Hugging Face's logo

Spaces:
pranit144
/
gameforrhw
Sleeping

App Files Community
gameforrhw
File size: 3,714 Bytes 
05dff9f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a88a491
05dff9f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!DOCTYPE html>
<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>