GYFX35 · GYFX35 · Jan 16, 2026 · Jan 15, 2026
diff --git a/eco_project/backend/app.py b/eco_project/backend/app.py
@@ -519,6 +519,56 @@ def videos():
             except (FileNotFoundError, json.JSONDecodeError):
                 return jsonify([])
 
+# Path for the drinking water videos JSON file and its lock file
+DRINKING_WATER_VIDEOS_FILE = os.path.join(app.root_path, 'drinking_water_videos.json')
+DRINKING_WATER_LOCK_FILE = os.path.join(app.root_path, 'drinking_water_videos.json.lock')
+
+@app.route('/api/drinking_water_videos', methods=['GET', 'POST'])
+def drinking_water_videos():
+    if request.method == 'POST':
+        # Handle video submission
+        data = request.get_json()
+        title = data.get('title')
+        url = data.get('url')
+
+        if not title or not url:
+            return jsonify({"error": "Title and URL are required."}), 400
+
+        # Sanitize user input
+        sanitized_title = bleach.clean(title)
+        sanitized_url = bleach.clean(url)
+
+        # A simple check to ensure the URL is a YouTube embed URL
+        if not sanitized_url.startswith("https://www.youtube.com/embed/"):
+            return jsonify({"error": "Invalid YouTube URL."}), 400
+
+        with FileLock(DRINKING_WATER_LOCK_FILE):
+            # Read existing videos
+            try:
+                with open(DRINKING_WATER_VIDEOS_FILE, 'r') as f:
+                    videos = json.load(f)
+            except (FileNotFoundError, json.JSONDecodeError):
+                videos = []
+
+            # Add new video
+            videos.append({"title": sanitized_title, "url": sanitized_url})
+
+            # Write updated videos list back to the file
+            with open(DRINKING_WATER_VIDEOS_FILE, 'w') as f:
+                json.dump(videos, f, indent=4)
+
+        return jsonify({"message": "Video added successfully!"}), 201
+
+    else: # GET request
+        # Return the list of videos
+        with FileLock(DRINKING_WATER_LOCK_FILE):
+            try:
+                with open(DRINKING_WATER_VIDEOS_FILE, 'r') as f:
+                    videos = json.load(f)
+                return jsonify(videos)
+            except (FileNotFoundError, json.JSONDecodeError):
+                return jsonify([])
+
 @app.route('/api/chat', methods=['POST'])
 def chat():
     data = request.get_json()

diff --git a/eco_project/backend/drinking_water_videos.json.lock b/eco_project/backend/drinking_water_videos.json.lock
diff --git a/eco_project/backend/static/drinking_water_videos.css b/eco_project/backend/static/drinking_water_videos.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/drinking_water_videos.html b/eco_project/backend/static/drinking_water_videos.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drinking Water Videos - Environment Protection</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="drinking_water_videos.css">
+</head>
+<body>
+    <header>
+        <h1>Drinking Water Video Gallery</h1>
+        <nav>
+            <a href="index.html">Home</a>
+        </nav>
+    </header>
+    <main>
+        <section id="video-submission">
+            <h2>Share a Video</h2>
+            <form id="video-form">
+                <input type="text" id="video-title" placeholder="Video Title" required>
+                <input type="url" id="video-url" placeholder="Video URL" required>
+                <button type="submit">Share Video</button>
+            </form>
+            <div id="error-message" class="error"></div>
+        </section>
+        <section id="videos">
+            <h2>Featured Videos</h2>
+            <div class="video-container">
+                <!-- Video embeds will go here -->
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2025 Environment Protection Initiative</p>
+    </footer>
+    <script src="drinking_water_videos.js"></script>
+</body>
+</html>
diff --git a/eco_project/backend/static/drinking_water_videos.js b/eco_project/backend/static/drinking_water_videos.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/drinking_water_videos');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const videos = await response.json();
+            displayVideos(videos);
+        } catch (error) {
+            videoContainer.innerHTML = `<p>Error fetching videos: ${error.message}</p>`;
+        }
+    }
+
+    function displayVideos(videos) {
+        if (videos.length === 0) {
+            videoContainer.innerHTML = '<p>No videos to display.</p>';
+            return;
+        }
+        let html = '';
+        videos.forEach(video => {
+            const embedUrl = video.url.includes('youtube.com/watch?v=')
+                ? video.url.replace('watch?v=', 'embed/')
+                : video.url;
+
+            html += `
+                <div class="video-item">
+                    <iframe src="${embedUrl}" frameborder="0" allowfullscreen></iframe>
+                    <div class="video-item-title">${video.title}</div>
+                </div>
+            `;
+        });
+        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/drinking_water_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();
+});