VentPals/water.html at main · kweetnorman/VentPals · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/png" href="assets/images/logo.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sip of Water – VentPals</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom right, #eff6ff, #F7F4FF); }
    .float { animation: float 4s ease-in-out infinite; }
    @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

    .glass {
      font-size: 80px;
      transition: transform 0.6s ease;
      cursor: pointer;
      display: inline-block;
    }
    .glass:active { transform: scale(0.92); }

    @keyframes ripple {
      0%   { transform: scale(0.8); opacity: 0.8; }
      100% { transform: scale(2.2); opacity: 0; }
    }
    .ripple-ring {
      position: absolute; inset: 0;
      border-radius: 50%;
      border: 3px solid rgba(147, 197, 253, 0.6);
      animation: ripple 1s ease-out forwards;
    }
  </style>
</head>
<body class="text-gray-800">

  <!-- NAV -->
  <nav class="bg-white/70 backdrop-blur-md shadow-sm sticky top-0 z-40">
    <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
      <a href="dashboard.html" class="flex items-center gap-2">
        <img src="assets/images/logo.png" class="h-8" alt="VentPals Logo">
        <span class="font-bold text-lg text-purple-700">VentPals</span>
      </a>
      <a href="calming-skills.html" class="text-purple-600 hover:text-purple-800 text-sm font-semibold">← Back to Calming Skills</a>
    </div>
  </nav>

  <!-- HEADER -->
  <section class="text-center py-10 px-4">
    <div class="text-6xl float mb-4">💧</div>
    <h1 class="text-3xl font-bold text-purple-700 mb-2">Sip of Water</h1>
    <p class="text-gray-600 text-sm max-w-md mx-auto">
      A mindful sip of water can help your nervous system reset. It's one of the simplest, most powerful tools your body has.
    </p>
  </section>

  <!-- MAIN -->
  <section class="max-w-md mx-auto px-6 pb-20 space-y-8">

    <!-- Interactive glass -->
    <div class="bg-white rounded-3xl shadow p-8 text-center">
      <div class="relative inline-block">
        <div class="glass" id="waterGlass" onclick="takeSip()">💧</div>
        <div id="rippleContainer" class="absolute inset-4 flex items-center justify-center pointer-events-none"></div>
      </div>

      <p id="waterMsg" class="text-purple-700 font-semibold text-base mt-4">
        Tap the droplet when you take a sip
      </p>

      <div class="flex justify-center gap-2 mt-4" id="sipDots">
        <div class="w-3 h-3 rounded-full bg-gray-200" id="dot-1"></div>
        <div class="w-3 h-3 rounded-full bg-gray-200" id="dot-2"></div>
        <div class="w-3 h-3 rounded-full bg-gray-200" id="dot-3"></div>
      </div>
    </div>

    <!-- Step guide -->
    <div class="bg-white rounded-3xl shadow p-6 space-y-5">
      <h2 class="text-lg font-semibold text-purple-700">How to make it mindful:</h2>

      <div class="flex items-start gap-3">
        <span class="text-2xl">🥛</span>
        <div>
          <p class="font-semibold text-gray-800">Get a glass of water</p>
          <p class="text-sm text-gray-600">Even a small amount is perfect.</p>
        </div>
      </div>

      <div class="flex items-start gap-3">
        <span class="text-2xl">👐</span>
        <div>
          <p class="font-semibold text-gray-800">Hold the glass with both hands</p>
          <p class="text-sm text-gray-600">Feel its weight. Notice if it's cool or warm.</p>
        </div>
      </div>

      <div class="flex items-start gap-3">
        <span class="text-2xl">🌬️</span>
        <div>
          <p class="font-semibold text-gray-800">Take a slow breath first</p>
          <p class="text-sm text-gray-600">Just one breath, in and out, before you drink.</p>
        </div>
      </div>

      <div class="flex items-start gap-3">
        <span class="text-2xl">💧</span>
        <div>
          <p class="font-semibold text-gray-800">Sip slowly and notice</p>
          <p class="text-sm text-gray-600">How does it taste? Where do you feel it in your body?</p>
        </div>
      </div>

      <div class="flex items-start gap-3">
        <span class="text-2xl">✨</span>
        <div>
          <p class="font-semibold text-gray-800">Take three slow sips</p>
          <p class="text-sm text-gray-600">Pause and breathe between each one. That's it.</p>
        </div>
      </div>
    </div>

    <!-- Why it helps -->
    <div class="bg-blue-50 rounded-3xl p-6">
      <p class="text-blue-800 text-sm leading-relaxed">
        💙 <strong>Why water helps:</strong> When we're stressed or emotional, our bodies can tense up. A sip of water activates the swallowing reflex, which triggers a calming response in your nervous system. It's like a tiny signal that says: "You're safe."
      </p>
    </div>

    <!-- Navigation -->
    <div class="space-y-3">
      <a href="calming-skills.html"
         class="block w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-full text-center">
        Try Another Skill
      </a>
      <a href="dashboard.html"
         class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-3 rounded-full text-center">
        Back to Dashboard
      </a>
    </div>

  </section>

  <footer class="py-6 text-center text-gray-500 text-xs">VentPals • The Journey of Growing Up.</footer>

  <script>
    const msgs = [
      'Nice sip 💧 How did that feel?',
      'Another gentle one 💧 Breathe in between…',
      'Last sip 💧 Well done. Feel the calm? 🌊'
    ];
    const colors = ['bg-blue-300', 'bg-blue-400', 'bg-blue-500'];
    let count = 0;

    function takeSip() {
      if (count >= 3) return;

      // ripple effect
      const ring = document.createElement('div');
      ring.className = 'ripple-ring';
      const container = document.getElementById('rippleContainer');
      container.appendChild(ring);
      setTimeout(() => ring.remove(), 1000);

      // fill dot
      const dot = document.getElementById(`dot-${count + 1}`);
      dot.classList.remove('bg-gray-200');
      dot.classList.add(colors[count]);

      document.getElementById('waterMsg').textContent = msgs[count];
      count++;

      if (count === 3) {
        document.getElementById('waterGlass').textContent = '🌊';
      }
    }
  </script>
  <script src="assets/js/session.js"></script>
</body>
</html>