Scewerjws/c.html at main · 0bobcode/Scewerjws · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Current Water</title>
    <style>
        body {
            margin: 0;
            font-family: 'Segoe UI', sans-serif;
            background: linear-gradient(to bottom right, #cdeffd, #f0f9ff);
            color: #034b63;
        }

        header {
            background-color: #0077b6;
            color: white;
            padding: 2rem 1rem;
            text-align: center;
        }

        header h1 {
            font-size: 2.5rem;
            margin: 0;
        }

        header p {
            font-size: 1.2rem;
            margin: 0.5rem 0 0;
        }

        .section {
            max-width: 900px;
            margin: 2rem auto;
            padding: 1rem 2rem;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .section h2 {
            color: #0077b6;
            font-size: 1.8rem;
        }

        .faq {
            margin-top: 1rem;
        }

        .faq-item {
            margin-bottom: 1rem;
        }

        .faq-item button {
            background: none;
            border: none;
            font-weight: bold;
            font-size: 1rem;
            color: #023e8a;
            cursor: pointer;
            padding: 0;
            margin: 0;
            text-align: left;
        }

        .faq-item p {
            display: none;
            margin-top: 0.5rem;
            padding-left: 1rem;
        }

        footer {
            background-color: #0077b6;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: 2rem;
        }
    </style>
</head>

<body>

    <header>
        <h1>💧 Current Water</h1>
        <p>Helping you make sense of every drop</p>
    </header>

    <div class="section">
        <h2>What We Do</h2>
        <p>
            At Current Water, we help families and communities track water usage, learn water-saving tips, and answer
            common water questions. Whether you're wondering how much water a shower uses or why lakes dry up — we've
            got your back!
        </p>
    </div>

    <div class="section">
        <h2>Water Questions & Answers</h2>
        <div class="faq">
            <div class="faq-item">
                <button onclick="toggleAnswer(this)">🚿 How much water does a 10-minute shower use?</button>
                <p>About 20 to 25 gallons, depending on your showerhead. Try using a low-flow head to save water!</p>
            </div>
            <div class="faq-item">
                <button onclick="toggleAnswer(this)">🌊 Why are oceans salty?</button>
                <p>Rivers carry salt and minerals from rocks to the sea, and over millions of years, this makes oceans
                    salty.</p>
            </div>
            <div class="faq-item">
                <button onclick="toggleAnswer(this)">🧺 What uses more water — washing dishes by hand or
                    dishwasher?</button>
                <p>Hand-washing often uses more water unless you're very efficient. Modern dishwashers save water!</p>
            </div>
            <div class="faq-item">
                <button onclick="toggleAnswer(this)">💡 How can I save water at home?</button>
                <p>Fix leaks, use buckets when washing cars, water plants in the evening, and use water-saving
                    appliances.</p>
            </div>
        </div>
    </div>

    <footer>
        © 2025 Current Water by Lilly. Keep asking smart questions 💧
    </footer>

    <script>
        function toggleAnswer(button) {
            const p = button.nextElementSibling;
            p.style.display = p.style.display === "block" ? "none" : "block";
        }
    </script>

</body>

</html>