From ab2bece39ab9cdefca259d95c777395caf333ea5 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 15 Jan 2026 08:30:32 +0000
Subject: [PATCH] feat: Add Forest Seeds Promotion video page
This commit introduces a new page dedicated to promoting forest seeds through HTML5 videos.
The new page, `forest_seeds.html`, allows users to view and share videos related to forest seeds. It includes:
- A video submission form.
- A gallery for featured videos.
- A dedicated JavaScript file (`forest_seeds.js`) that interacts with a new API endpoint (`/api/forest_seeds_videos`).
- A corresponding CSS file (`forest_seeds.css`) for styling.
A link to the new page has been added to the "Community" section of the `index.html` file.
---
eco_project/backend/static/forest_seeds.css | 23 ++++++
eco_project/backend/static/forest_seeds.html | 39 +++++++++
eco_project/backend/static/forest_seeds.js | 83 ++++++++++++++++++++
eco_project/backend/static/index.html | 1 +
4 files changed, 146 insertions(+)
create mode 100644 eco_project/backend/static/forest_seeds.css
create mode 100644 eco_project/backend/static/forest_seeds.html
create mode 100644 eco_project/backend/static/forest_seeds.js
diff --git a/eco_project/backend/static/forest_seeds.css b/eco_project/backend/static/forest_seeds.css
new file mode 100644
index 0000000..83618aa
--- /dev/null
+++ b/eco_project/backend/static/forest_seeds.css
@@ -0,0 +1,23 @@
+.video-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ padding: 20px;
+}
+
+.video-item {
+ width: 300px;
+ margin: 15px;
+ border: 1px solid #ccc;
+ box-shadow: 0 0 5px rgba(0,0,0,0.1);
+}
+
+.video-item iframe {
+ width: 100%;
+ height: 170px;
+}
+
+.video-item-title {
+ padding: 10px;
+ font-weight: bold;
+}
diff --git a/eco_project/backend/static/forest_seeds.html b/eco_project/backend/static/forest_seeds.html
new file mode 100644
index 0000000..2bb0f78
--- /dev/null
+++ b/eco_project/backend/static/forest_seeds.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Forest Seeds Promotion - Environment Protection
+
+
+
+
+
+ Forest Seeds Promotion
+
+
+
+
+
+ Featured Videos
+
+
+
+
+
+
+
+
+
diff --git a/eco_project/backend/static/forest_seeds.js b/eco_project/backend/static/forest_seeds.js
new file mode 100644
index 0000000..332e481
--- /dev/null
+++ b/eco_project/backend/static/forest_seeds.js
@@ -0,0 +1,83 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const videoContainer = document.querySelector('.video-container');
+ const videoForm = document.getElementById('video-form');
+
+ async function fetchVideos() {
+ try {
+ const response = await fetch('/api/forest_seeds_videos');
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const videos = await response.json();
+ displayVideos(videos);
+ } catch (error) {
+ videoContainer.innerHTML = `Error fetching videos: ${error.message}
`;
+ }
+ }
+
+ function displayVideos(videos) {
+ if (videos.length === 0) {
+ videoContainer.innerHTML = 'No videos to display.
';
+ return;
+ }
+ let html = '';
+ videos.forEach(video => {
+ const embedUrl = video.url.includes('youtube.com/watch?v=')
+ ? video.url.replace('watch?v=', 'embed/')
+ : video.url;
+
+ html += `
+
+ `;
+ });
+ videoContainer.innerHTML = html;
+ }
+
+ videoForm.addEventListener('submit', async (event) => {
+ event.preventDefault();
+
+ const titleInput = document.getElementById('video-title');
+ const urlInput = document.getElementById('video-url');
+ const errorMessage = document.getElementById('error-message');
+
+ errorMessage.textContent = '';
+
+ let videoUrl = urlInput.value;
+ if (videoUrl.includes('youtube.com/watch?v=')) {
+ videoUrl = videoUrl.replace('watch?v=', 'embed/');
+ }
+
+ const newVideo = {
+ title: titleInput.value,
+ url: videoUrl,
+ };
+
+ try {
+ const response = await fetch('/api/forest_seeds_videos', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(newVideo),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.json();
+ throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+ }
+
+ titleInput.value = '';
+ urlInput.value = '';
+
+ fetchVideos(); // Refresh the list of videos
+ } catch (error) {
+ console.error('Failed to submit video:', error);
+ errorMessage.textContent = `Error: ${error.message}`;
+ }
+ });
+
+ fetchVideos();
+});
diff --git a/eco_project/backend/static/index.html b/eco_project/backend/static/index.html
index 5839bc9..395b720 100644
--- a/eco_project/backend/static/index.html
+++ b/eco_project/backend/static/index.html
@@ -52,6 +52,7 @@ Community
Share your ideas and connect with others.