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

+ +
+
+
+

Share a Video

+
+ + + +
+
+
+
+

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 += ` +
+ +
${video.title}
+
+ `; + }); + 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.