Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rainwater Harvesting Game</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; } | |
| .container { max-width: 900px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } | |
| h1, h2, h3 { color: #2c3e50; } | |
| .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; } | |
| .header a { text-decoration: none; color: #3498db; font-weight: bold; } | |
| .video-list ul { list-style: none; padding: 0; } | |
| .video-list li { background: #ecf0f1; margin-bottom: 10px; padding: 15px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; } | |
| .video-list li.completed { background: #d4edda; border-left: 5px solid #28a745; } | |
| .video-list li.completed .status { color: #28a745; font-weight: bold; } | |
| .video-list li .title { flex-grow: 1; font-weight: bold; } | |
| .video-list li .actions { margin-left: 20px; } | |
| .video-list li .actions a, .video-list li .actions button { | |
| background-color: #3498db; | |
| color: white; | |
| padding: 8px 12px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| font-size: 0.9em; | |
| margin-left: 5px; | |
| } | |
| .video-list li .actions a:hover, .video-list li .actions button:hover { background-color: #2980b9; } | |
| .video-list li .actions .quiz-taken { background-color: #6c757d; cursor: default; } | |
| .flash-message { padding: 10px; margin-bottom: 15px; border-radius: 4px; } | |
| .flash-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } | |
| .flash-message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } | |
| .flash-message.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } | |
| .flash-message.warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; } | |
| .badges-container { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; } | |
| .badges-container ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } | |
| .badges-container li { background: #d6eaf8; padding: 10px 15px; border-radius: 20px; font-size: 0.9em; border: 1px solid #aed6f1; } | |
| .quiz-form label { display: block; margin-bottom: 10px; } | |
| .quiz-form input[type="radio"] { margin-right: 5px; } | |
| .quiz-form button { background-color: #2ecc71; } | |
| .quiz-form button:hover { background-color: #27ae60; } | |
| </style> | |
| </head> | |
| <body> | |
| <img src="/static/WhatsApp Image 2025-09-18 at 18.33.55_105edc80.jpg" alt="Logo" style="position: fixed; top: 20px; right: 30px; width: 80px; height: auto; z-index: 1000; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);"> | |
| <div class="container"> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| <div class="flash-messages"> | |
| {% for category, message in messages %} | |
| <div class="flash-message {{ category }}">{{ message }}</div> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| {% block content %}{% endblock %} | |
| </div> | |
| </body> | |
| </html> |