Hugging Face's logo

Spaces:
Digiator
/
reclaim
Running

App Files Community
Digiator commited on
Commit
f3dc357
·
verified ·
1 Parent(s): a684187

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1047 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Reclaim
3
- emoji: 📈
4
- colorFrom: purple
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: reclaim
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1047 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Reclaim - Porn Recovery & Wellness</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
11
+
12
+ body {
13
+ font-family: 'Manrope', sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #e5e5e5;
16
+ }
17
+
18
+ .streak-glow {
19
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
20
+ }
21
+
22
+ .progress-ring__circle {
23
+ transition: stroke-dashoffset 0.5s;
24
+ transform: rotate(-90deg);
25
+ transform-origin: 50% 50%;
26
+ }
27
+
28
+ .fade-in {
29
+ animation: fadeIn 0.5s ease-in;
30
+ }
31
+
32
+ @keyframes fadeIn {
33
+ from { opacity: 0; }
34
+ to { opacity: 1; }
35
+ }
36
+
37
+ .emergency-pulse {
38
+ animation: pulse 2s infinite;
39
+ }
40
+
41
+ @keyframes pulse {
42
+ 0% { transform: scale(1); }
43
+ 50% { transform: scale(1.05); }
44
+ 100% { transform: scale(1); }
45
+ }
46
+
47
+ .badge-earned {
48
+ animation: bounce 0.5s;
49
+ }
50
+
51
+ @keyframes bounce {
52
+ 0%, 100% { transform: translateY(0); }
53
+ 50% { transform: translateY(-10px); }
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="min-h-screen">
58
+ <!-- Navigation -->
59
+ <nav class="bg-gray-900 border-b border-gray-800 fixed w-full z-10">
60
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
61
+ <div class="flex items-center justify-between h-16">
62
+ <div class="flex items-center">
63
+ <div class="flex-shrink-0">
64
+ <span class="text-blue-500 font-bold text-xl">RECLAIM</span>
65
+ </div>
66
+ <div class="hidden md:block">
67
+ <div class="ml-10 flex items-baseline space-x-4">
68
+ <a href="#dashboard" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
69
+ <a href="#journal" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Journal</a>
70
+ <a href="#education" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Education</a>
71
+ <a href="#community" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Community</a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ <div class="hidden md:block">
76
+ <div class="ml-4 flex items-center md:ml-6">
77
+ <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
78
+ <span class="sr-only">View notifications</span>
79
+ <i class="fas fa-bell"></i>
80
+ </button>
81
+ <div class="ml-3 relative">
82
+ <div>
83
+ <button id="user-menu" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none">
84
+ <span class="sr-only">Open user menu</span>
85
+ <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center">
86
+ <span class="text-white font-medium">U</span>
87
+ </div>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ <div class="-mr-2 flex md:hidden">
94
+ <button id="mobile-menu-button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
95
+ <span class="sr-only">Open main menu</span>
96
+ <i class="fas fa-bars"></i>
97
+ </button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Mobile menu -->
103
+ <div id="mobile-menu" class="hidden md:hidden">
104
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
105
+ <a href="#dashboard" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
106
+ <a href="#journal" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Journal</a>
107
+ <a href="#education" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Education</a>
108
+ <a href="#community" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Community</a>
109
+ </div>
110
+ <div class="pt-4 pb-3 border-t border-gray-700">
111
+ <div class="flex items-center px-5">
112
+ <div class="flex-shrink-0">
113
+ <div class="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center">
114
+ <span class="text-white font-medium">U</span>
115
+ </div>
116
+ </div>
117
+ <div class="ml-3">
118
+ <div class="text-base font-medium text-white">User</div>
119
+ <div class="text-sm font-medium text-gray-400">user@example.com</div>
120
+ </div>
121
+ </div>
122
+ <div class="mt-3 px-2 space-y-1">
123
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
124
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </nav>
129
+
130
+ <!-- Main Content -->
131
+ <main class="pt-20 pb-10">
132
+ <!-- Dashboard Section -->
133
+ <section id="dashboard" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
134
+ <div class="mb-8">
135
+ <h1 class="text-3xl font-bold text-white">Welcome Back, Warrior</h1>
136
+ <p class="text-gray-400 mt-2">Every day is a victory. Keep going.</p>
137
+ </div>
138
+
139
+ <!-- Stats and Streak -->
140
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
141
+ <!-- Current Streak -->
142
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
143
+ <div class="flex items-center justify-between">
144
+ <div>
145
+ <p class="text-gray-400 text-sm">Current Streak</p>
146
+ <h2 class="text-4xl font-bold text-white mt-2" id="streak-count">7</h2>
147
+ <p class="text-gray-400 text-sm mt-1">days</p>
148
+ </div>
149
+ <div class="h-16 w-16 rounded-full bg-blue-900/50 flex items-center justify-center streak-glow">
150
+ <i class="fas fa-fire text-2xl text-blue-500"></i>
151
+ </div>
152
+ </div>
153
+ <button id="check-in-btn" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out">
154
+ Check In Today
155
+ </button>
156
+ </div>
157
+
158
+ <!-- Progress Ring -->
159
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800 flex flex-col items-center">
160
+ <div class="relative w-32 h-32 mb-4">
161
+ <svg class="w-full h-full" viewBox="0 0 100 100">
162
+ <circle class="text-gray-800" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
163
+ <circle class="text-blue-500 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" id="progress-ring" />
164
+ </svg>
165
+ <div class="absolute inset-0 flex items-center justify-center">
166
+ <span class="text-2xl font-bold text-white" id="progress-percent">75%</span>
167
+ </div>
168
+ </div>
169
+ <h3 class="text-lg font-medium text-white">Monthly Progress</h3>
170
+ <p class="text-gray-400 text-sm mt-1">23/30 days clean</p>
171
+ </div>
172
+
173
+ <!-- Emergency Button -->
174
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800 flex flex-col items-center justify-center">
175
+ <button id="emergency-btn" class="emergency-pulse bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-full font-bold text-lg flex items-center transition duration-150 ease-in-out">
176
+ <i class="fas fa-first-aid mr-2"></i> Emergency
177
+ </button>
178
+ <p class="text-gray-400 text-sm mt-4 text-center">Feeling triggered? Click for immediate help.</p>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Badges and Achievements -->
183
+ <div class="mb-8">
184
+ <h2 class="text-xl font-bold text-white mb-4">Your Achievements</h2>
185
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
186
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center">
187
+ <div class="h-16 w-16 rounded-full bg-yellow-500/20 flex items-center justify-center mb-2">
188
+ <i class="fas fa-trophy text-2xl text-yellow-500"></i>
189
+ </div>
190
+ <p class="text-white text-sm font-medium text-center">First Week</p>
191
+ </div>
192
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center">
193
+ <div class="h-16 w-16 rounded-full bg-blue-500/20 flex items-center justify-center mb-2">
194
+ <i class="fas fa-medal text-2xl text-blue-500"></i>
195
+ </div>
196
+ <p class="text-white text-sm font-medium text-center">30 Days</p>
197
+ </div>
198
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center">
199
+ <div class="h-16 w-16 rounded-full bg-purple-500/20 flex items-center justify-center mb-2">
200
+ <i class="fas fa-star text-2xl text-purple-500"></i>
201
+ </div>
202
+ <p class="text-white text-sm font-medium text-center">90 Days</p>
203
+ </div>
204
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center">
205
+ <div class="h-16 w-16 rounded-full bg-green-500/20 flex items-center justify-center mb-2">
206
+ <i class="fas fa-check-double text-2xl text-green-500"></i>
207
+ </div>
208
+ <p class="text-white text-sm font-medium text-center">Consistency</p>
209
+ </div>
210
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center">
211
+ <div class="h-16 w-16 rounded-full bg-gray-500/20 flex items-center justify-center mb-2">
212
+ <i class="fas fa-lock text-2xl text-gray-400"></i>
213
+ </div>
214
+ <p class="text-gray-400 text-sm font-medium text-center">6 Months</p>
215
+ </div>
216
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center">
217
+ <div class="h-16 w-16 rounded-full bg-gray-500/20 flex items-center justify-center mb-2">
218
+ <i class="fas fa-lock text-2xl text-gray-400"></i>
219
+ </div>
220
+ <p class="text-gray-400 text-sm font-medium text-center">1 Year</p>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Daily Motivation -->
226
+ <div class="bg-gray-900 rounded-lg p-6 border border-blue-800/50 mb-8">
227
+ <div class="flex items-start">
228
+ <div class="flex-shrink-0">
229
+ <div class="h-10 w-10 rounded-full bg-blue-900/50 flex items-center justify-center">
230
+ <i class="fas fa-quote-left text-blue-500"></i>
231
+ </div>
232
+ </div>
233
+ <div class="ml-4">
234
+ <h3 class="text-lg font-medium text-white">Today's Motivation</h3>
235
+ <p class="mt-2 text-gray-300" id="motivation-quote">
236
+ "Discipline is choosing between what you want now and what you want most."
237
+ </p>
238
+ <p class="mt-2 text-gray-400 text-sm">- Abraham Lincoln</p>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </section>
243
+
244
+ <!-- Journal Section -->
245
+ <section id="journal" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 border-t border-gray-800">
246
+ <div class="mb-8">
247
+ <h1 class="text-3xl font-bold text-white">Triggers & Urges Journal</h1>
248
+ <p class="text-gray-400 mt-2">Track your patterns and understand your triggers.</p>
249
+ </div>
250
+
251
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
252
+ <div class="lg:col-span-2">
253
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
254
+ <h2 class="text-xl font-bold text-white mb-4">New Entry</h2>
255
+ <form id="journal-form">
256
+ <div class="mb-4">
257
+ <label for="entry-date" class="block text-sm font-medium text-gray-300 mb-1">Date</label>
258
+ <input type="date" id="entry-date" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
259
+ </div>
260
+ <div class="mb-4">
261
+ <label for="trigger-level" class="block text-sm font-medium text-gray-300 mb-1">Trigger Level</label>
262
+ <select id="trigger-level" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
263
+ <option value="1">Mild - Slight urge, easily managed</option>
264
+ <option value="2">Moderate - Strong urge, required effort</option>
265
+ <option value="3">Severe - Intense urge, barely resisted</option>
266
+ <option value="4">Overcome - Gave in to the urge</option>
267
+ </select>
268
+ </div>
269
+ <div class="mb-4">
270
+ <label for="trigger-type" class="block text-sm font-medium text-gray-300 mb-1">Trigger Type (select all that apply)</label>
271
+ <div class="grid grid-cols-2 gap-2 mt-2">
272
+ <div class="flex items-center">
273
+ <input id="boredom" type="checkbox" value="boredom" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
274
+ <label for="boredom" class="ml-2 text-sm font-medium text-gray-300">Boredom</label>
275
+ </div>
276
+ <div class="flex items-center">
277
+ <input id="stress" type="checkbox" value="stress" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
278
+ <label for="stress" class="ml-2 text-sm font-medium text-gray-300">Stress</label>
279
+ </div>
280
+ <div class="flex items-center">
281
+ <input id="loneliness" type="checkbox" value="loneliness" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
282
+ <label for="loneliness" class="ml-2 text-sm font-medium text-gray-300">Loneliness</label>
283
+ </div>
284
+ <div class="flex items-center">
285
+ <input id="habit" type="checkbox" value="habit" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
286
+ <label for="habit" class="ml-2 text-sm font-medium text-gray-300">Habit/Routine</label>
287
+ </div>
288
+ <div class="flex items-center">
289
+ <input id="social-media" type="checkbox" value="social-media" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
290
+ <label for="social-media" class="ml-2 text-sm font-medium text-gray-300">Social Media</label>
291
+ </div>
292
+ <div class="flex items-center">
293
+ <input id="other" type="checkbox" value="other" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
294
+ <label for="other" class="ml-2 text-sm font-medium text-gray-300">Other</label>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ <div class="mb-4">
299
+ <label for="journal-content" class="block text-sm font-medium text-gray-300 mb-1">Reflection</label>
300
+ <textarea id="journal-content" rows="5" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="How did you feel? What happened before the urge? How did you cope?"></textarea>
301
+ </div>
302
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out">
303
+ Save Entry
304
+ </button>
305
+ </form>
306
+ </div>
307
+ </div>
308
+
309
+ <div>
310
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
311
+ <h2 class="text-xl font-bold text-white mb-4">Recent Entries</h2>
312
+ <div class="space-y-4" id="journal-entries">
313
+ <!-- Journal entries will be added here dynamically -->
314
+ <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-blue-500">
315
+ <div class="flex justify-between items-start">
316
+ <div>
317
+ <h3 class="text-sm font-medium text-white">Moderate Trigger</h3>
318
+ <p class="text-xs text-gray-400 mt-1">Yesterday, 8:30 PM</p>
319
+ </div>
320
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-100">Stress</span>
321
+ </div>
322
+ <p class="text-gray-300 text-sm mt-2">Felt stressed after work and had strong urges. Went for a run instead and felt much better.</p>
323
+ </div>
324
+ <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-green-500">
325
+ <div class="flex justify-between items-start">
326
+ <div>
327
+ <h3 class="text-sm font-medium text-white">Mild Trigger</h3>
328
+ <p class="text-xs text-gray-400 mt-1">2 days ago, 10:15 AM</p>
329
+ </div>
330
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-100">Boredom</span>
331
+ </div>
332
+ <p class="text-gray-300 text-sm mt-2">Weekend morning with nothing to do. Called a friend to hang out instead.</p>
333
+ </div>
334
+ <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-yellow-500">
335
+ <div class="flex justify-between items-start">
336
+ <div>
337
+ <h3 class="text-sm font-medium text-white">Severe Trigger</h3>
338
+ <p class="text-xs text-gray-400 mt-1">4 days ago, 11:45 PM</p>
339
+ </div>
340
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-100">Loneliness</span>
341
+ </div>
342
+ <p class="text-gray-300 text-sm mt-2">Late night alone, almost gave in. Used emergency breathing technique and went to sleep.</p>
343
+ </div>
344
+ </div>
345
+ <button id="view-all-entries" class="mt-4 text-blue-500 hover:text-blue-400 text-sm font-medium">
346
+ View All Entries <i class="fas fa-arrow-right ml-1"></i>
347
+ </button>
348
+ </div>
349
+
350
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800 mt-6">
351
+ <h2 class="text-xl font-bold text-white mb-4">Trigger Patterns</h2>
352
+ <div class="h-64 flex items-center justify-center">
353
+ <p class="text-gray-400 text-center">Chart will appear here when you have more data.</p>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Education Section -->
361
+ <section id="education" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 border-t border-gray-800">
362
+ <div class="mb-8">
363
+ <h1 class="text-3xl font-bold text-white">Education & Resources</h1>
364
+ <p class="text-gray-400 mt-2">Knowledge is power. Understand the science behind recovery.</p>
365
+ </div>
366
+
367
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
368
+ <!-- Article 1 -->
369
+ <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 hover:border-blue-500 transition duration-150 ease-in-out">
370
+ <div class="h-40 bg-gradient-to-r from-blue-900 to-blue-800 flex items-center justify-center">
371
+ <i class="fas fa-brain text-5xl text-blue-300 opacity-70"></i>
372
+ </div>
373
+ <div class="p-6">
374
+ <div class="flex items-center text-sm text-gray-400 mb-2">
375
+ <span>Article</span>
376
+ <span class="mx-2">•</span>
377
+ <span>8 min read</span>
378
+ </div>
379
+ <h3 class="text-xl font-bold text-white mb-2">The Neuroscience of Addiction</h3>
380
+ <p class="text-gray-400 mb-4">Understanding how pornography affects your brain's reward system and how to rewire it.</p>
381
+ <button class="text-blue-500 hover:text-blue-400 font-medium flex items-center">
382
+ Read Article <i class="fas fa-arrow-right ml-2"></i>
383
+ </button>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Article 2 -->
388
+ <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 hover:border-green-500 transition duration-150 ease-in-out">
389
+ <div class="h-40 bg-gradient-to-r from-green-900 to-green-800 flex items-center justify-center">
390
+ <i class="fas fa-heartbeat text-5xl text-green-300 opacity-70"></i>
391
+ </div>
392
+ <div class="p-6">
393
+ <div class="flex items-center text-sm text-gray-400 mb-2">
394
+ <span>Article</span>
395
+ <span class="mx-2">•</span>
396
+ <span>6 min read</span>
397
+ </div>
398
+ <h3 class="text-xl font-bold text-white mb-2">Benefits of a 90-Day Reboot</h3>
399
+ <p class="text-gray-400 mb-4">Discover the physical, mental and emotional benefits you can expect from a 3-month reset.</p>
400
+ <button class="text-green-500 hover:text-green-400 font-medium flex items-center">
401
+ Read Article <i class="fas fa-arrow-right ml-2"></i>
402
+ </button>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- Video -->
407
+ <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 hover:border-purple-500 transition duration-150 ease-in-out">
408
+ <div class="h-40 bg-gradient-to-r from-purple-900 to-purple-800 flex items-center justify-center">
409
+ <i class="fas fa-play-circle text-5xl text-purple-300 opacity-70"></i>
410
+ </div>
411
+ <div class="p-6">
412
+ <div class="flex items-center text-sm text-gray-400 mb-2">
413
+ <span>Video</span>
414
+ <span class="mx-2">•</span>
415
+ <span>12 min</span>
416
+ </div>
417
+ <h3 class="text-xl font-bold text-white mb-2">Coping With Urges</h3>
418
+ <p class="text-gray-400 mb-4">Practical techniques to ride out urges when they feel overwhelming.</p>
419
+ <button class="text-purple-500 hover:text-purple-400 font-medium flex items-center">
420
+ Watch Video <i class="fas fa-arrow-right ml-2"></i>
421
+ </button>
422
+ </div>
423
+ </div>
424
+ </div>
425
+
426
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
427
+ <!-- Tools -->
428
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
429
+ <h2 class="text-xl font-bold text-white mb-4">Recovery Tools</h2>
430
+ <div class="space-y-4">
431
+ <div class="flex items-start">
432
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900/50 flex items-center justify-center">
433
+ <i class="fas fa-dumbbell text-blue-500"></i>
434
+ </div>
435
+ <div class="ml-4">
436
+ <h3 class="text-lg font-medium text-white">Exercise Routines</h3>
437
+ <p class="mt-1 text-gray-400 text-sm">Physical activity helps redirect energy and boost mood.</p>
438
+ </div>
439
+ </div>
440
+ <div class="flex items-start">
441
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-900/50 flex items-center justify-center">
442
+ <i class="fas fa-spa text-green-500"></i>
443
+ </div>
444
+ <div class="ml-4">
445
+ <h3 class="text-lg font-medium text-white">Meditation Guides</h3>
446
+ <p class="mt-1 text-gray-400 text-sm">Mindfulness practices to increase self-awareness.</p>
447
+ </div>
448
+ </div>
449
+ <div class="flex items-start">
450
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center">
451
+ <i class="fas fa-book text-purple-500"></i>
452
+ </div>
453
+ <div class="ml-4">
454
+ <h3 class="text-lg font-medium text-white">Reading List</h3>
455
+ <p class="mt-1 text-gray-400 text-sm">Books on personal development and recovery.</p>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <!-- Accountability -->
462
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
463
+ <h2 class="text-xl font-bold text-white mb-4">Accountability Partner</h2>
464
+ <div class="flex items-center">
465
+ <div class="flex-shrink-0 h-16 w-16 rounded-full bg-gray-800 flex items-center justify-center">
466
+ <i class="fas fa-user-shield text-2xl text-blue-500"></i>
467
+ </div>
468
+ <div class="ml-4">
469
+ <h3 class="text-lg font-medium text-white">Connect with a Mentor</h3>
470
+ <p class="mt-1 text-gray-400 text-sm">Pair anonymously with someone further along in recovery.</p>
471
+ <button class="mt-3 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium text-sm transition duration-150 ease-in-out">
472
+ Find a Partner
473
+ </button>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </section>
479
+
480
+ <!-- Community Section -->
481
+ <section id="community" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 border-t border-gray-800">
482
+ <div class="mb-8">
483
+ <h1 class="text-3xl font-bold text-white">Community Support</h1>
484
+ <p class="text-gray-400 mt-2">You're not alone. Connect with others on the same journey.</p>
485
+ </div>
486
+
487
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
488
+ <div class="lg:col-span-2">
489
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
490
+ <div class="flex items-center justify-between mb-6">
491
+ <h2 class="text-xl font-bold text-white">Recent Discussions</h2>
492
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium text-sm transition duration-150 ease-in-out">
493
+ New Post
494
+ </button>
495
+ </div>
496
+
497
+ <div class="space-y-4">
498
+ <!-- Discussion 1 -->
499
+ <div class="bg-gray-800/50 rounded-lg p-4">
500
+ <div class="flex items-start">
501
+ <div class="flex-shrink-0">
502
+ <div class="h-10 w-10 rounded-full bg-blue-900/50 flex items-center justify-center">
503
+ <span class="text-white font-medium">A</span>
504
+ </div>
505
+ </div>
506
+ <div class="ml-4 flex-1">
507
+ <div class="flex items-center justify-between">
508
+ <h3 class="text-sm font-medium text-white">AnonymousUser42</h3>
509
+ <span class="text-xs text-gray-400">2h ago</span>
510
+ </div>
511
+ <h4 class="text-base font-medium text-white mt-1">How do you deal with weekends?</h4>
512
+ <p class="text-gray-300 text-sm mt-1">Weekends are my biggest challenge with too much free time. Any suggestions for staying on track?</p>
513
+ <div class="mt-3 flex items-center text-sm text-gray-400">
514
+ <span class="flex items-center mr-4">
515
+ <i class="far fa-comment mr-1"></i> 8
516
+ </span>
517
+ <span class="flex items-center">
518
+ <i class="far fa-heart mr-1"></i> 12
519
+ </span>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+
525
+ <!-- Discussion 2 -->
526
+ <div class="bg-gray-800/50 rounded-lg p-4">
527
+ <div class="flex items-start">
528
+ <div class="flex-shrink-0">
529
+ <div class="h-10 w-10 rounded-full bg-green-900/50 flex items-center justify-center">
530
+ <span class="text-white font-medium">W</span>
531
+ </div>
532
+ </div>
533
+ <div class="ml-4 flex-1">
534
+ <div class="flex items-center justify-between">
535
+ <h3 class="text-sm font-medium text-white">Warrior87</h3>
536
+ <span class="text-xs text-gray-400">5h ago</span>
537
+ </div>
538
+ <h4 class="text-base font-medium text-white mt-1">90 days clean today!</h4>
539
+ <p class="text-gray-300 text-sm mt-1">Just wanted to share this milestone. If I can do it, you can too. Keep fighting the good fight!</p>
540
+ <div class="mt-3 flex items-center text-sm text-gray-400">
541
+ <span class="flex items-center mr-4">
542
+ <i class="far fa-comment mr-1"></i> 15
543
+ </span>
544
+ <span class="flex items-center">
545
+ <i class="far fa-heart mr-1"></i> 32
546
+ </span>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Discussion 3 -->
553
+ <div class="bg-gray-800/50 rounded-lg p-4">
554
+ <div class="flex items-start">
555
+ <div class="flex-shrink-0">
556
+ <div class="h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center">
557
+ <span class="text-white font-medium">S</span>
558
+ </div>
559
+ </div>
560
+ <div class="ml-4 flex-1">
561
+ <div class="flex items-center justify-between">
562
+ <h3 class="text-sm font-medium text-white">StrongerEveryDay</h3>
563
+ <span class="text-xs text-gray-400">1d ago</span>
564
+ </div>
565
+ <h4 class="text-base font-medium text-white mt-1">Best apps for blocking content?</h4>
566
+ <p class="text-gray-300 text-sm mt-1">Looking for recommendations for the most effective content blockers across devices.</p>
567
+ <div class="mt-3 flex items-center text-sm text-gray-400">
568
+ <span class="flex items-center mr-4">
569
+ <i class="far fa-comment mr-1"></i> 22
570
+ </span>
571
+ <span class="flex items-center">
572
+ <i class="far fa-heart mr-1"></i> 18
573
+ </span>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <button class="mt-6 w-full bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out">
581
+ View All Discussions
582
+ </button>
583
+ </div>
584
+ </div>
585
+
586
+ <div>
587
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800">
588
+ <h2 class="text-xl font-bold text-white mb-4">Current Challenges</h2>
589
+
590
+ <div class="space-y-4">
591
+ <!-- Challenge 1 -->
592
+ <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-blue-500">
593
+ <h3 class="text-lg font-medium text-white">7-Day Cold Shower Challenge</h3>
594
+ <p class="text-gray-400 text-sm mt-1">Build discipline by taking cold showers every morning.</p>
595
+ <div class="mt-3">
596
+ <div class="flex items-center justify-between text-sm text-gray-300">
597
+ <span>125 participants</span>
598
+ <button class="text-blue-500 hover:text-blue-400 font-medium">
599
+ Join
600
+ </button>
601
+ </div>
602
+ </div>
603
+ </div>
604
+
605
+ <!-- Challenge 2 -->
606
+ <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-green-500">
607
+ <h3 class="text-lg font-medium text-white">30-Day Exercise Streak</h3>
608
+ <p class="text-gray-400 text-sm mt-1">Commit to at least 20 minutes of exercise daily.</p>
609
+ <div class="mt-3">
610
+ <div class="flex items-center justify-between text-sm text-gray-300">
611
+ <span>89 participants</span>
612
+ <button class="text-green-500 hover:text-green-400 font-medium">
613
+ Join
614
+ </button>
615
+ </div>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- Challenge 3 -->
620
+ <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-purple-500">
621
+ <h3 class="text-lg font-medium text-white">Screen-Free Evenings</h3>
622
+ <p class="text-gray-400 text-sm mt-1">No screens after 8pm for one week.</p>
623
+ <div class="mt-3">
624
+ <div class="flex items-center justify-between text-sm text-gray-300">
625
+ <span>64 participants</span>
626
+ <button class="text-purple-500 hover:text-purple-400 font-medium">
627
+ Join
628
+ </button>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ <!-- AI Chatbot -->
636
+ <div class="bg-gray-900 rounded-lg p-6 border border-gray-800 mt-6">
637
+ <h2 class="text-xl font-bold text-white mb-4">Recovery Assistant</h2>
638
+ <div class="flex items-center">
639
+ <div class="flex-shrink-0 h-16 w-16 rounded-full bg-gray-800 flex items-center justify-center">
640
+ <i class="fas fa-robot text-2xl text-blue-500"></i>
641
+ </div>
642
+ <div class="ml-4">
643
+ <h3 class="text-lg font-medium text-white">Need Immediate Help?</h3>
644
+ <p class="mt-1 text-gray-400 text-sm">Chat with our AI assistant for support and encouragement.</p>
645
+ <button id="chatbot-btn" class="mt-3 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium text-sm transition duration-150 ease-in-out">
646
+ Start Chat
647
+ </button>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </section>
654
+ </main>
655
+
656
+ <!-- Footer -->
657
+ <footer class="bg-gray-900 border-t border-gray-800">
658
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
659
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
660
+ <div>
661
+ <h3 class="text-lg font-bold text-white mb-4">RECLAIM</h3>
662
+ <p class="text-gray-400 text-sm">A platform dedicated to helping individuals overcome pornography addiction and reclaim control of their lives.</p>
663
+ </div>
664
+ <div>
665
+ <h3 class="text-lg font-bold text-white mb-4">Quick Links</h3>
666
+ <ul class="space-y-2">
667
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">About</a></li>
668
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li>
669
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a></li>
670
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li>
671
+ </ul>
672
+ </div>
673
+ <div>
674
+ <h3 class="text-lg font-bold text-white mb-4">Get Help</h3>
675
+ <ul class="space-y-2">
676
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Crisis Hotline</a></li>
677
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Therapist Directory</a></li>
678
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Support Groups</a></li>
679
+ </ul>
680
+ </div>
681
+ </div>
682
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
683
+ <p>© 2023 Reclaim. All rights reserved.</p>
684
+ </div>
685
+ </div>
686
+ </footer>
687
+
688
+ <!-- Emergency Modal -->
689
+ <div id="emergency-modal" class="hidden fixed inset-0 overflow-y-auto z-50">
690
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
691
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
692
+ <div class="absolute inset-0 bg-gray-900 opacity-90"></div>
693
+ </div>
694
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
695
+ <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
696
+ <div class="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
697
+ <div class="sm:flex sm:items-start">
698
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
699
+ <i class="fas fa-exclamation text-red-400"></i>
700
+ </div>
701
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
702
+ <h3 class="text-lg leading-6 font-medium text-white" id="modal-title">
703
+ Emergency Assistance
704
+ </h3>
705
+ <div class="mt-2">
706
+ <p class="text-sm text-gray-300">
707
+ You're stronger than this urge. Choose a healthy distraction:
708
+ </p>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ <div class="bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-col">
714
+ <div class="grid grid-cols-1 gap-3">
715
+ <button class="emergency-option bg-blue-900/50 hover:bg-blue-800 text-white py-3 px-4 rounded-md font-medium flex items-center justify-start">
716
+ <i class="fas fa-running text-blue-400 mr-3"></i> 5-Minute Exercise Routine
717
+ </button>
718
+ <button class="emergency-option bg-green-900/50 hover:bg-green-800 text-white py-3 px-4 rounded-md font-medium flex items-center justify-start">
719
+ <i class="fas fa-wind text-green-400 mr-3"></i> Breathing Technique
720
+ </button>
721
+ <button class="emergency-option bg-purple-900/50 hover:bg-purple-800 text-white py-3 px-4 rounded-md font-medium flex items-center justify-start">
722
+ <i class="fas fa-headphones text-purple-400 mr-3"></i> Guided Meditation
723
+ </button>
724
+ <button class="emergency-option bg-red-900/50 hover:bg-red-800 text-white py-3 px-4 rounded-md font-medium flex items-center justify-start">
725
+ <i class="fas fa-phone-alt text-red-400 mr-3"></i> Call a Friend
726
+ </button>
727
+ </div>
728
+ <button id="close-emergency-modal" class="mt-4 w-full bg-gray-600 hover:bg-gray-500 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out">
729
+ I'm Feeling Better
730
+ </button>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+
736
+ <!-- Chatbot Modal -->
737
+ <div id="chatbot-modal" class="hidden fixed bottom-4 right-4 z-50">
738
+ <div class="bg-gray-800 rounded-lg shadow-xl w-80 border border-gray-700 overflow-hidden">
739
+ <div class="bg-gray-900 px-4 py-3 border-b border-gray-700 flex items-center justify-between">
740
+ <h3 class="text-white font-medium">Recovery Assistant</h3>
741
+ <button id="close-chatbot-modal" class="text-gray-400 hover:text-white">
742
+ <i class="fas fa-times"></i>
743
+ </button>
744
+ </div>
745
+ <div class="h-64 p-4 overflow-y-auto" id="chatbot-messages">
746
+ <div class="flex mb-4">
747
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-900/50 flex items-center justify-center">
748
+ <i class="fas fa-robot text-blue-400"></i>
749
+ </div>
750
+ <div class="ml-3">
751
+ <div class="bg-gray-700 rounded-lg p-3 text-white text-sm">
752
+ Hi there! I'm here to help you through any challenges you're facing. What's on your mind?
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ <div class="p-3 border-t border-gray-700">
758
+ <div class="flex">
759
+ <input type="text" id="chatbot-input" class="flex-1 bg-gray-700 border border-gray-600 rounded-l-md px-3 py-2 text-white text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Type your message...">
760
+ <button id="send-chatbot-message" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-r-md">
761
+ <i class="fas fa-paper-plane"></i>
762
+ </button>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+
768
+ <!-- Check-in Confirmation Toast -->
769
+ <div id="checkin-toast" class="hidden fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50">
770
+ <div class="bg-green-800/90 text-white px-6 py-3 rounded-md shadow-lg flex items-center">
771
+ <i class="fas fa-check-circle text-green-300 mr-2"></i>
772
+ <span>Daily check-in recorded! Keep up the good work.</span>
773
+ </div>
774
+ </div>
775
+
776
+ <!-- Badge Earned Toast -->
777
+ <div id="badge-toast" class="hidden fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50">
778
+ <div class="bg-blue-800/90 text-white px-6 py-3 rounded-md shadow-lg flex items-center">
779
+ <i class="fas fa-trophy text-yellow-300 mr-2"></i>
780
+ <span>New badge earned: <strong>7-Day Streak</strong>!</span>
781
+ </div>
782
+ </div>
783
+
784
+ <script>
785
+ // Mobile menu toggle
786
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
787
+ document.getElementById('mobile-menu').classList.toggle('hidden');
788
+ });
789
+
790
+ // Emergency button
791
+ document.getElementById('emergency-btn').addEventListener('click', function() {
792
+ document.getElementById('emergency-modal').classList.remove('hidden');
793
+ });
794
+
795
+ // Close emergency modal
796
+ document.getElementById('close-emergency-modal').addEventListener('click', function() {
797
+ document.getElementById('emergency-modal').classList.add('hidden');
798
+ });
799
+
800
+ // Emergency options
801
+ document.querySelectorAll('.emergency-option').forEach(option => {
802
+ option.addEventListener('click', function() {
803
+ // In a real app, this would redirect to the specific resource
804
+ alert('Redirecting to ' + this.textContent.trim() + ' resource...');
805
+ document.getElementById('emergency-modal').classList.add('hidden');
806
+ });
807
+ });
808
+
809
+ // Check-in button
810
+ document.getElementById('check-in-btn').addEventListener('click', function() {
811
+ // Increment streak
812
+ const streakElement = document.getElementById('streak-count');
813
+ let streak = parseInt(streakElement.textContent);
814
+ streakElement.textContent = streak + 1;
815
+
816
+ // Show toast
817
+ const toast = document.getElementById('checkin-toast');
818
+ toast.classList.remove('hidden');
819
+ setTimeout(() => {
820
+ toast.classList.add('hidden');
821
+ }, 3000);
822
+
823
+ // If streak is 7, show badge toast
824
+ if (streak + 1 === 7) {
825
+ setTimeout(() => {
826
+ const badgeToast = document.getElementById('badge-toast');
827
+ badgeToast.classList.remove('hidden');
828
+ setTimeout(() => {
829
+ badgeToast.classList.add('hidden');
830
+ }, 3000);
831
+ }, 1000);
832
+ }
833
+
834
+ // Disable button for today
835
+ this.disabled = true;
836
+ this.classList.remove('bg-blue-600', 'hover:bg-blue-700');
837
+ this.classList.add('bg-gray-600', 'cursor-not-allowed');
838
+ this.textContent = 'Checked In Today';
839
+ });
840
+
841
+ // Journal form submission
842
+ document.getElementById('journal-form').addEventListener('submit', function(e) {
843
+ e.preventDefault();
844
+
845
+ // Get form values
846
+ const date = document.getElementById('entry-date').value;
847
+ const triggerLevel = document.getElementById('trigger-level').value;
848
+ const content = document.getElementById('journal-content').value;
849
+
850
+ // Create new entry element
851
+ const entry = document.createElement('div');
852
+ entry.className = 'bg-gray-800/50 rounded-lg p-4 border-l-4 border-blue-500 fade-in';
853
+
854
+ // Determine trigger level text and color
855
+ let triggerText, borderColor;
856
+ switch(triggerLevel) {
857
+ case '1':
858
+ triggerText = 'Mild Trigger';
859
+ borderColor = 'border-green-500';
860
+ break;
861
+ case '2':
862
+ triggerText = 'Moderate Trigger';
863
+ borderColor = 'border-blue-500';
864
+ break;
865
+ case '3':
866
+ triggerText = 'Severe Trigger';
867
+ borderColor = 'border-yellow-500';
868
+ break;
869
+ case '4':
870
+ triggerText = 'Overcome';
871
+ borderColor = 'border-red-500';
872
+ break;
873
+ }
874
+
875
+ // Update entry class with correct border color
876
+ entry.className = `bg-gray-800/50 rounded-lg p-4 border-l-4 ${borderColor} fade-in`;
877
+
878
+ // Get checked trigger types
879
+ const triggerTypes = [];
880
+ document.querySelectorAll('#journal-form input[type="checkbox"]:checked').forEach(checkbox => {
881
+ triggerTypes.push(checkbox.value);
882
+ });
883
+
884
+ // Create entry HTML
885
+ entry.innerHTML = `
886
+ <div class="flex justify-between items-start">
887
+ <div>
888
+ <h3 class="text-sm font-medium text-white">${triggerText}</h3>
889
+ <p class="text-xs text-gray-400 mt-1">${formatDate(date)}, Just now</p>
890
+ </div>
891
+ ${triggerTypes.length > 0 ?
892
+ `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-100">
893
+ ${triggerTypes[0].charAt(0).toUpperCase() + triggerTypes[0].slice(1)}
894
+ </span>` : ''}
895
+ </div>
896
+ <p class="text-gray-300 text-sm mt-2">${content}</p>
897
+ `;
898
+
899
+ // Prepend to journal entries
900
+ document.getElementById('journal-entries').prepend(entry);
901
+
902
+ // Reset form
903
+ this.reset();
904
+
905
+ // Show success message
906
+ alert('Journal entry saved successfully!');
907
+ });
908
+
909
+ // Format date for display
910
+ function formatDate(dateString) {
911
+ const options = { year: 'numeric', month: 'short', day: 'numeric' };
912
+ return new Date(dateString).toLocaleDateString(undefined, options);
913
+ }
914
+
915
+ // Chatbot toggle
916
+ document.getElementById('chatbot-btn').addEventListener('click', function() {
917
+ document.getElementById('chatbot-modal').classList.toggle('hidden');
918
+ });
919
+
920
+ // Close chatbot modal
921
+ document.getElementById('close-chatbot-modal').addEventListener('click', function() {
922
+ document.getElementById('chatbot-modal').classList.add('hidden');
923
+ });
924
+
925
+ // Send chatbot message
926
+ document.getElementById('send-chatbot-message').addEventListener('click', function() {
927
+ const input = document.getElementById('chatbot-input');
928
+ const message = input.value.trim();
929
+
930
+ if (message) {
931
+ // Add user message
932
+ addChatbotMessage('user', message);
933
+ input.value = '';
934
+
935
+ // Simulate bot response after a delay
936
+ setTimeout(() => {
937
+ const responses = [
938
+ "I understand how challenging this can be. Remember, urges are temporary and will pass.",
939
+ "You're not alone in this struggle. Many have walked this path before you and succeeded.",
940
+ "Have you tried any of the emergency techniques we discussed? They can be very helpful in moments like this.",
941
+ "What's one small step you can take right now to redirect your energy?",
942
+ "Progress isn't linear. Every moment is a new opportunity to make a healthy choice.",
943
+ "I'm proud of you for reaching out. That shows real strength and commitment to your recovery."
944
+ ];
945
+
946
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
947
+ addChatbotMessage('bot', randomResponse);
948
+ }, 1000);
949
+ }
950
+ });
951
+
952
+ // Also allow sending message with Enter key
953
+ document.getElementById('chatbot-input').addEventListener('keypress', function(e) {
954
+ if (e.key === 'Enter') {
955
+ document.getElementById('send-chatbot-message').click();
956
+ }
957
+ });
958
+
959
+ // Add message to chatbot
960
+ function addChatbotMessage(sender, message) {
961
+ const messagesContainer = document.getElementById('chatbot-messages');
962
+
963
+ const messageDiv = document.createElement('div');
964
+ messageDiv.className = 'flex mb-4 fade-in';
965
+
966
+ if (sender === 'user') {
967
+ messageDiv.innerHTML = `
968
+ <div class="ml-auto max-w-xs">
969
+ <div class="bg-blue-600 rounded-lg p-3 text-white text-sm">
970
+ ${message}
971
+ </div>
972
+ </div>
973
+ `;
974
+ } else {
975
+ messageDiv.innerHTML = `
976
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-900/50 flex items-center justify-center">
977
+ <i class="fas fa-robot text-blue-400"></i>
978
+ </div>
979
+ <div class="ml-3 max-w-xs">
980
+ <div class="bg-gray-700 rounded-lg p-3 text-white text-sm">
981
+ ${message}
982
+ </div>
983
+ </div>
984
+ `;
985
+ }
986
+
987
+ messagesContainer.appendChild(messageDiv);
988
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
989
+ }
990
+
991
+ // Initialize progress ring
992
+ function initProgressRing() {
993
+ const circle = document.getElementById('progress-ring');
994
+ const radius = circle.r.baseVal.value;
995
+ const circumference = 2 * Math.PI * radius;
996
+
997
+ circle.style.strokeDasharray = circumference;
998
+ circle.style.strokeDashoffset = circumference;
999
+
1000
+ // Set progress (75% in this case)
1001
+ const progress = 0.75;
1002
+ const offset = circumference - progress * circumference;
1003
+ circle.style.strokeDashoffset = offset;
1004
+
1005
+ // Update percentage text
1006
+ document.getElementById('progress-percent').textContent = `${Math.round(progress * 100)}%`;
1007
+ }
1008
+
1009
+ // Initialize on load
1010
+ window.addEventListener('load', function() {
1011
+ initProgressRing();
1012
+
1013
+ // Set today's date as default in journal
1014
+ const today = new Date().toISOString().split('T')[0];
1015
+ document.getElementById('entry-date').value = today;
1016
+
1017
+ // Set random motivation quote
1018
+ const quotes = [
1019
+ {
1020
+ text: "Discipline is choosing between what you want now and what you want most.",
1021
+ author: "Abraham Lincoln"
1022
+ },
1023
+ {
1024
+ text: "You are always one decision away from a totally different life.",
1025
+ author: "Anonymous"
1026
+ },
1027
+ {
1028
+ text: "The secret of change is to focus all your energy not on fighting the old, but on building the new.",
1029
+ author: "Socrates"
1030
+ },
1031
+ {
1032
+ text: "Every next level of your life will demand a different version of you.",
1033
+ author: "Anonymous"
1034
+ },
1035
+ {
1036
+ text: "The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.",
1037
+ author: "Steve Jobs"
1038
+ }
1039
+ ];
1040
+
1041
+ const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
1042
+ document.getElementById('motivation-quote').textContent = `"${randomQuote.text}"`;
1043
+ document.querySelector('#dashboard [id="motivation-quote"] + p').textContent = `- ${randomQuote.author}`;
1044
+ });
1045
+ </script>
1046
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Digiator/reclaim" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1047
+ </html>