Hugging Face's logo

Spaces:
arthhh1
/
depression
Running

App Files Community
arthhh1 commited on
Commit
32cb405
·
verified ·
1 Parent(s): 374e8fe

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +678 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Depression
3
- emoji: 🏃
4
- colorFrom: gray
5
- colorTo: red
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: depression
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,678 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Caminhos para Superar a Depressão</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #6366f1 100%);
19
+ }
20
+
21
+ .mood-tracker {
22
+ background: rgba(255, 255, 255, 0.2);
23
+ backdrop-filter: blur(10px);
24
+ border-radius: 16px;
25
+ }
26
+
27
+ .breathing-circle {
28
+ animation: pulse 4s infinite ease-in-out;
29
+ }
30
+
31
+ @keyframes pulse {
32
+ 0% { transform: scale(1); }
33
+ 50% { transform: scale(1.05); }
34
+ 100% { transform: scale(1); }
35
+ }
36
+
37
+ .progress-bar {
38
+ transition: width 0.5s ease-in-out;
39
+ }
40
+
41
+ .journal-entry {
42
+ transition: all 0.3s ease;
43
+ }
44
+
45
+ .journal-entry:hover {
46
+ transform: translateY(-3px);
47
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
48
+ }
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <!-- Header -->
53
+ <header class="gradient-bg text-white">
54
+ <div class="container mx-auto px-4 py-8">
55
+ <div class="flex justify-between items-center">
56
+ <div>
57
+ <h1 class="text-3xl font-bold">Caminhos da Luz</h1>
58
+ <p class="text-indigo-100">Encontrando esperança na jornada contra a depressão</p>
59
+ </div>
60
+ <button id="theme-toggle" class="p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
61
+ <i class="fas fa-moon text-white"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Hero Section -->
68
+ <section class="gradient-bg text-white py-12">
69
+ <div class="container mx-auto px-4">
70
+ <div class="flex flex-col md:flex-row items-center">
71
+ <div class="md:w-1/2 mb-8 md:mb-0">
72
+ <h2 class="text-4xl font-bold mb-4">Você não está sozinho nessa jornada</h2>
73
+ <p class="text-xl mb-6 text-indigo-100">A depressão pode parecer uma estrada escura, mas há luz e esperança à frente. Vamos caminhar juntos.</p>
74
+ <div class="flex flex-wrap gap-4">
75
+ <button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-indigo-50 transition">Fale com um especialista</button>
76
+ <button class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">Grupos de apoio</button>
77
+ </div>
78
+ </div>
79
+ <div class="md:w-1/2 flex justify-center">
80
+ <img src="https://images.unsplash.com/photo-1498837167922-d504275e5781?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Pessoa olhando para o horizonte" class="rounded-xl shadow-2xl max-w-md w-full">
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </section>
85
+
86
+ <!-- Understanding Depression -->
87
+ <section class="py-16 bg-white">
88
+ <div class="container mx-auto px-4">
89
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Entendendo a Depressão</h2>
90
+
91
+ <div class="grid md:grid-cols-3 gap-8">
92
+ <div class="bg-indigo-50 p-6 rounded-xl">
93
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
94
+ <i class="fas fa-brain text-indigo-600 text-xl"></i>
95
+ </div>
96
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">O que é depressão?</h3>
97
+ <p class="text-gray-600">A depressão é uma doença médica séria que afeta negativamente como você se sente, pensa e age. Não é apenas "estar triste" - é uma condição complexa que requer compreensão e tratamento.</p>
98
+ </div>
99
+
100
+ <div class="bg-indigo-50 p-6 rounded-xl">
101
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
102
+ <i class="fas fa-exclamation-triangle text-indigo-600 text-xl"></i>
103
+ </div>
104
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Sinais e sintomas</h3>
105
+ <p class="text-gray-600">Tristeza persistente, perda de interesse em atividades, mudanças no apetite ou sono, fadiga, sentimentos de inutilidade, dificuldade de concentração e pensamentos sobre morte ou suicídio.</p>
106
+ </div>
107
+
108
+ <div class="bg-indigo-50 p-6 rounded-xl">
109
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
110
+ <i class="fas fa-hands-helping text-indigo-600 text-xl"></i>
111
+ </div>
112
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">É tratável</h3>
113
+ <p class="text-gray-600">Com a abordagem correta - que pode incluir terapia, medicação, mudanças no estilo de vida e apoio social - a maioria das pessoas com depressão pode melhorar significativamente.</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Self-Help Tools -->
120
+ <section class="py-16 bg-gray-50">
121
+ <div class="container mx-auto px-4">
122
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Ferramentas de Autoajuda</h2>
123
+
124
+ <div class="grid md:grid-cols-2 gap-8 mb-12">
125
+ <!-- Mood Tracker -->
126
+ <div class="mood-tracker p-6 rounded-xl border border-gray-200 bg-white">
127
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Rastreador de Humor</h3>
128
+ <p class="text-gray-600 mb-4">Registre como você está se sentindo hoje:</p>
129
+
130
+ <div class="flex justify-between mb-6">
131
+ <button class="mood-btn p-3 rounded-full bg-red-100 text-red-600 hover:bg-red-200" data-mood="1">
132
+ <i class="fas fa-angry text-2xl"></i>
133
+ </button>
134
+ <button class="mood-btn p-3 rounded-full bg-yellow-100 text-yellow-600 hover:bg-yellow-200" data-mood="2">
135
+ <i class="fas fa-frown text-2xl"></i>
136
+ </button>
137
+ <button class="mood-btn p-3 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200" data-mood="3">
138
+ <i class="fas fa-meh text-2xl"></i>
139
+ </button>
140
+ <button class="mood-btn p-3 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200" data-mood="4">
141
+ <i class="fas fa-smile text-2xl"></i>
142
+ </button>
143
+ <button class="mood-btn p-3 rounded-full bg-green-100 text-green-600 hover:bg-green-200" data-mood="5">
144
+ <i class="fas fa-laugh text-2xl"></i>
145
+ </button>
146
+ </div>
147
+
148
+ <div id="mood-history" class="bg-gray-50 p-4 rounded-lg">
149
+ <h4 class="font-medium mb-2 text-gray-700">Seu histórico de humor</h4>
150
+ <div class="flex items-center h-8 mb-2">
151
+ <div class="w-6 text-xs text-gray-500">1</div>
152
+ <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
153
+ <div id="mood-bar-1" class="h-full bg-red-500 progress-bar" style="width: 0%"></div>
154
+ </div>
155
+ </div>
156
+ <div class="flex items-center h-8 mb-2">
157
+ <div class="w-6 text-xs text-gray-500">2</div>
158
+ <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
159
+ <div id="mood-bar-2" class="h-full bg-yellow-500 progress-bar" style="width: 0%"></div>
160
+ </div>
161
+ </div>
162
+ <div class="flex items-center h-8 mb-2">
163
+ <div class="w-6 text-xs text-gray-500">3</div>
164
+ <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
165
+ <div id="mood-bar-3" class="h-full bg-gray-500 progress-bar" style="width: 0%"></div>
166
+ </div>
167
+ </div>
168
+ <div class="flex items-center h-8 mb-2">
169
+ <div class="w-6 text-xs text-gray-500">4</div>
170
+ <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
171
+ <div id="mood-bar-4" class="h-full bg-blue-500 progress-bar" style="width: 0%"></div>
172
+ </div>
173
+ </div>
174
+ <div class="flex items-center h-8">
175
+ <div class="w-6 text-xs text-gray-500">5</div>
176
+ <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
177
+ <div id="mood-bar-5" class="h-full bg-green-500 progress-bar" style="width: 0%"></div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Breathing Exercise -->
184
+ <div class="p-6 rounded-xl border border-gray-200 bg-white">
185
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Exercício de Respiração</h3>
186
+ <p class="text-gray-600 mb-6">A respiração consciente pode ajudar a reduzir a ansiedade e melhorar o humor. Experimente este exercício simples:</p>
187
+
188
+ <div class="flex flex-col items-center">
189
+ <div class="breathing-circle w-40 h-40 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
190
+ <div id="breath-text" class="text-2xl font-bold text-indigo-700">Inspire</div>
191
+ </div>
192
+
193
+ <button id="start-breathing" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
194
+ Começar exercício
195
+ </button>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Journal Section -->
201
+ <div class="bg-white p-6 rounded-xl border border-gray-200">
202
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Diário de Gratidão</h3>
203
+ <p class="text-gray-600 mb-6">Escrever sobre coisas pelas quais você é grato pode ajudar a mudar sua perspectiva. Tente listar 3 coisas todos os dias.</p>
204
+
205
+ <div class="mb-4">
206
+ <textarea id="journal-entry" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="4" placeholder="Hoje sou grato por..."></textarea>
207
+ </div>
208
+ <button id="save-journal" class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition">
209
+ Salvar entrada
210
+ </button>
211
+
212
+ <div id="journal-entries" class="mt-8 grid md:grid-cols-2 gap-4">
213
+ <!-- Journal entries will appear here -->
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Professional Help -->
220
+ <section class="py-16 bg-indigo-50">
221
+ <div class="container mx-auto px-4">
222
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Buscando Ajuda Profissional</h2>
223
+
224
+ <div class="grid md:grid-cols-3 gap-8">
225
+ <div class="bg-white p-6 rounded-xl shadow-sm">
226
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
227
+ <i class="fas fa-user-md text-indigo-600 text-2xl"></i>
228
+ </div>
229
+ <h3 class="text-xl font-semibold mb-2 text-center text-gray-800">Psiquiatras</h3>
230
+ <p class="text-gray-600 text-center">Médicos especializados que podem diagnosticar a depressão e prescrever medicamentos quando necessário.</p>
231
+ </div>
232
+
233
+ <div class="bg-white p-6 rounded-xl shadow-sm">
234
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
235
+ <i class="fas fa-comments text-indigo-600 text-2xl"></i>
236
+ </div>
237
+ <h3 class="text-xl font-semibold mb-2 text-center text-gray-800">Psicólogos</h3>
238
+ <p class="text-gray-600 text-center">Profissionais que oferecem terapia para ajudar a entender e lidar com pensamentos e sentimentos difíceis.</p>
239
+ </div>
240
+
241
+ <div class="bg-white p-6 rounded-xl shadow-sm">
242
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
243
+ <i class="fas fa-users text-indigo-600 text-2xl"></i>
244
+ </div>
245
+ <h3 class="text-xl font-semibold mb-2 text-center text-gray-800">Grupos de Apoio</h3>
246
+ <p class="text-gray-600 text-center">Encontre pessoas que entendem o que você está passando e podem oferecer apoio e compreensão.</p>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="mt-12 text-center">
251
+ <h3 class="text-2xl font-semibold mb-4 text-gray-800">Crise ou pensamentos suicidas?</h3>
252
+ <p class="text-lg mb-6 text-gray-700">Ligue para o <strong>188</strong> - Centro de Valorização da Vida (CVV)</p>
253
+ <p class="text-gray-600">Atendimento 24 horas, gratuito e sigiloso</p>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Lifestyle Changes -->
259
+ <section class="py-16 bg-white">
260
+ <div class="container mx-auto px-4">
261
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Mudanças no Estilo de Vida</h2>
262
+
263
+ <div class="grid md:grid-cols-4 gap-6">
264
+ <div class="text-center">
265
+ <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
266
+ <i class="fas fa-walking text-indigo-600 text-2xl"></i>
267
+ </div>
268
+ <h3 class="font-semibold mb-2 text-gray-800">Exercício Físico</h3>
269
+ <p class="text-sm text-gray-600">Atividade regular libera endorfinas que melhoram o humor.</p>
270
+ </div>
271
+
272
+ <div class="text-center">
273
+ <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
274
+ <i class="fas fa-utensils text-indigo-600 text-2xl"></i>
275
+ </div>
276
+ <h3 class="font-semibold mb-2 text-gray-800">Alimentação Saudável</h3>
277
+ <p class="text-sm text-gray-600">Nutrientes adequados apoiam a saúde cerebral.</p>
278
+ </div>
279
+
280
+ <div class="text-center">
281
+ <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
282
+ <i class="fas fa-moon text-indigo-600 text-2xl"></i>
283
+ </div>
284
+ <h3 class="font-semibold mb-2 text-gray-800">Sono Regular</h3>
285
+ <p class="text-sm text-gray-600">Dormir bem é essencial para o equilíbrio emocional.</p>
286
+ </div>
287
+
288
+ <div class="text-center">
289
+ <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mb-4 mx-auto">
290
+ <i class="fas fa-hands-helping text-indigo-600 text-2xl"></i>
291
+ </div>
292
+ <h3 class="font-semibold mb-2 text-gray-800">Conexões Sociais</h3>
293
+ <p class="text-sm text-gray-600">Manter relacionamentos ajuda a combater o isolamento.</p>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="mt-12 bg-indigo-50 p-6 rounded-xl">
298
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Desafio de 7 Dias</h3>
299
+ <p class="text-gray-600 mb-6">Pequenos passos podem fazer uma grande diferença. Aceite este desafio:</p>
300
+
301
+ <div class="grid md:grid-cols-7 gap-4">
302
+ <div class="bg-white p-4 rounded-lg text-center">
303
+ <div class="font-bold text-indigo-600 mb-2">Dia 1</div>
304
+ <p class="text-sm">Caminhe por 15 minutos</p>
305
+ </div>
306
+ <div class="bg-white p-4 rounded-lg text-center">
307
+ <div class="font-bold text-indigo-600 mb-2">Dia 2</div>
308
+ <p class="text-sm">Ligue para um amigo</p>
309
+ </div>
310
+ <div class="bg-white p-4 rounded-lg text-center">
311
+ <div class="font-bold text-indigo-600 mb-2">Dia 3</div>
312
+ <p class="text-sm">Escreva 3 coisas boas</p>
313
+ </div>
314
+ <div class="bg-white p-4 rounded-lg text-center">
315
+ <div class="font-bold text-indigo-600 mb-2">Dia 4</div>
316
+ <p class="text-sm">Experimente uma comida nova</p>
317
+ </div>
318
+ <div class="bg-white p-4 rounded-lg text-center">
319
+ <div class="font-bold text-indigo-600 mb-2">Dia 5</div>
320
+ <p class="text-sm">Faça algo criativo</p>
321
+ </div>
322
+ <div class="bg-white p-4 rounded-lg text-center">
323
+ <div class="font-bold text-indigo-600 mb-2">Dia 6</div>
324
+ <p class="text-sm">Pratique respiração profunda</p>
325
+ </div>
326
+ <div class="bg-white p-4 rounded-lg text-center">
327
+ <div class="font-bold text-indigo-600 mb-2">Dia 7</div>
328
+ <p class="text-sm">Planeje algo para antecipar</p>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </section>
334
+
335
+ <!-- Inspirational Quotes -->
336
+ <section class="py-16 gradient-bg text-white">
337
+ <div class="container mx-auto px-4">
338
+ <h2 class="text-3xl font-bold text-center mb-12">Palavras de Esperança</h2>
339
+
340
+ <div class="max-w-3xl mx-auto">
341
+ <div id="quote-carousel" class="relative">
342
+ <div class="quote-slide active opacity-100 transition-opacity duration-500">
343
+ <blockquote class="text-2xl font-light italic mb-6">
344
+ "A depressão é como um casaco de chumbo. Você o veste todos os dias, e depois de um tempo você nem percebe o peso extra, apenas a lentidão e a exaustão."
345
+ </blockquote>
346
+ <p class="text-right text-indigo-100">- Martha Manning</p>
347
+ </div>
348
+
349
+ <div class="quote-slide opacity-0 absolute top-0 left-0 w-full transition-opacity duration-500">
350
+ <blockquote class="text-2xl font-light italic mb-6">
351
+ "A cura não significa que o dano nunca existiu. Significa que o dano não controla mais nossa vida."
352
+ </blockquote>
353
+ <p class="text-right text-indigo-100">- Akshay Dubey</p>
354
+ </div>
355
+
356
+ <div class="quote-slide opacity-0 absolute top-0 left-0 w-full transition-opacity duration-500">
357
+ <blockquote class="text-2xl font-light italic mb-6">
358
+ "Você não precisa ver toda a escada, apenas dê o primeiro passo."
359
+ </blockquote>
360
+ <p class="text-right text-indigo-100">- Martin Luther King Jr.</p>
361
+ </div>
362
+
363
+ <div class="flex justify-center mt-8">
364
+ <button class="quote-prev p-2 mx-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
365
+ <i class="fas fa-chevron-left"></i>
366
+ </button>
367
+ <button class="quote-next p-2 mx-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
368
+ <i class="fas fa-chevron-right"></i>
369
+ </button>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </section>
375
+
376
+ <!-- Footer -->
377
+ <footer class="bg-gray-800 text-white py-12">
378
+ <div class="container mx-auto px-4">
379
+ <div class="grid md:grid-cols-4 gap-8">
380
+ <div>
381
+ <h3 class="text-xl font-semibold mb-4">Caminhos da Luz</h3>
382
+ <p class="text-gray-400">Um espaço dedicado a oferecer recursos e esperança para quem enfrenta a depressão.</p>
383
+ </div>
384
+
385
+ <div>
386
+ <h4 class="font-semibold mb-4">Recursos</h4>
387
+ <ul class="space-y-2">
388
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Artigos</a></li>
389
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Ferramentas</a></li>
390
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Diretório de Profissionais</a></li>
391
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Grupos de Apoio</a></li>
392
+ </ul>
393
+ </div>
394
+
395
+ <div>
396
+ <h4 class="font-semibold mb-4">Ajuda Imediata</h4>
397
+ <ul class="space-y-2">
398
+ <li class="text-gray-400">CVV: 188</li>
399
+ <li class="text-gray-400">SAMU: 192</li>
400
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Chat Online</a></li>
401
+ </ul>
402
+ </div>
403
+
404
+ <div>
405
+ <h4 class="font-semibold mb-4">Conecte-se</h4>
406
+ <div class="flex space-x-4">
407
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600 transition">
408
+ <i class="fab fa-facebook-f"></i>
409
+ </a>
410
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600 transition">
411
+ <i class="fab fa-instagram"></i>
412
+ </a>
413
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600 transition">
414
+ <i class="fab fa-twitter"></i>
415
+ </a>
416
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600 transition">
417
+ <i class="fab fa-youtube"></i>
418
+ </a>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
424
+ <p>© 2023 Caminhos da Luz. Todos os direitos reservados.</p>
425
+ <p class="mt-2 text-sm">Este site não substitui aconselhamento profissional. Em caso de crise, procure ajuda especializada.</p>
426
+ </div>
427
+ </div>
428
+ </footer>
429
+
430
+ <script>
431
+ // Mood Tracker
432
+ const moodBtns = document.querySelectorAll('.mood-btn');
433
+ const moodBars = {
434
+ 1: document.getElementById('mood-bar-1'),
435
+ 2: document.getElementById('mood-bar-2'),
436
+ 3: document.getElementById('mood-bar-3'),
437
+ 4: document.getElementById('mood-bar-4'),
438
+ 5: document.getElementById('mood-bar-5')
439
+ };
440
+
441
+ let moodHistory = JSON.parse(localStorage.getItem('moodHistory')) || {1: 0, 2: 0, 3: 0, 4: 0, 5: 0};
442
+
443
+ function updateMoodBars() {
444
+ const total = Object.values(moodHistory).reduce((a, b) => a + b, 0) || 1;
445
+
446
+ for (let mood in moodHistory) {
447
+ const percentage = (moodHistory[mood] / total) * 100;
448
+ moodBars[mood].style.width = `${percentage}%`;
449
+ }
450
+ }
451
+
452
+ moodBtns.forEach(btn => {
453
+ btn.addEventListener('click', () => {
454
+ const mood = btn.dataset.mood;
455
+ moodHistory[mood] = (moodHistory[mood] || 0) + 1;
456
+ localStorage.setItem('moodHistory', JSON.stringify(moodHistory));
457
+ updateMoodBars();
458
+
459
+ // Show feedback
460
+ const feedback = document.createElement('div');
461
+ feedback.className = 'fixed top-4 right-4 bg-white shadow-lg rounded-lg px-4 py-2 animate-bounce';
462
+ feedback.innerHTML = `
463
+ <div class="flex items-center">
464
+ <span class="mr-2">${mood == 5 ? 'Ótimo!' : mood == 4 ? 'Bom!' : mood == 3 ? 'Ok' : mood == 2 ? 'Melhoras' : 'Sinto muito'}</span>
465
+ <i class="fas ${mood == 5 ? 'fa-laugh text-green-500' : mood == 4 ? 'fa-smile text-blue-500' : mood == 3 ? 'fa-meh text-gray-500' : mood == 2 ? 'fa-frown text-yellow-500' : 'fa-angry text-red-500'}"></i>
466
+ </div>
467
+ `;
468
+ document.body.appendChild(feedback);
469
+
470
+ setTimeout(() => {
471
+ feedback.remove();
472
+ }, 3000);
473
+ });
474
+ });
475
+
476
+ // Initialize mood bars
477
+ updateMoodBars();
478
+
479
+ // Breathing Exercise
480
+ const breathingCircle = document.querySelector('.breathing-circle');
481
+ const breathText = document.getElementById('breath-text');
482
+ const startBtn = document.getElementById('start-breathing');
483
+
484
+ let breathingInterval;
485
+ let isBreathing = false;
486
+ let cycle = 0;
487
+
488
+ startBtn.addEventListener('click', () => {
489
+ if (isBreathing) {
490
+ clearInterval(breathingInterval);
491
+ startBtn.textContent = 'Começar exercício';
492
+ breathText.textContent = 'Inspire';
493
+ breathingCircle.classList.remove('bg-indigo-200');
494
+ breathingCircle.classList.add('bg-indigo-100');
495
+ isBreathing = false;
496
+ cycle = 0;
497
+ return;
498
+ }
499
+
500
+ isBreathing = true;
501
+ startBtn.textContent = 'Parar';
502
+ cycle = 0;
503
+ startBreathingCycle();
504
+
505
+ breathingInterval = setInterval(() => {
506
+ cycle++;
507
+ if (cycle >= 4) {
508
+ clearInterval(breathingInterval);
509
+ startBtn.textContent = 'Começar exercício';
510
+ breathText.textContent = 'Concluído!';
511
+ setTimeout(() => {
512
+ breathText.textContent = 'Inspire';
513
+ breathingCircle.classList.remove('bg-indigo-200');
514
+ breathingCircle.classList.add('bg-indigo-100');
515
+ isBreathing = false;
516
+ cycle = 0;
517
+ }, 2000);
518
+ return;
519
+ }
520
+ startBreathingCycle();
521
+ }, 16000);
522
+ });
523
+
524
+ function startBreathingCycle() {
525
+ // Inhale
526
+ breathText.textContent = 'Inspire';
527
+ breathingCircle.classList.remove('bg-indigo-200');
528
+ breathingCircle.classList.add('bg-indigo-100');
529
+
530
+ setTimeout(() => {
531
+ // Hold
532
+ breathText.textContent = 'Segure';
533
+
534
+ setTimeout(() => {
535
+ // Exhale
536
+ breathText.textContent = 'Expire';
537
+ breathingCircle.classList.remove('bg-indigo-100');
538
+ breathingCircle.classList.add('bg-indigo-200');
539
+
540
+ setTimeout(() => {
541
+ // Rest
542
+ breathText.textContent = 'Descanse';
543
+ }, 4000);
544
+ }, 4000);
545
+ }, 4000);
546
+ }
547
+
548
+ // Journal
549
+ const journalEntry = document.getElementById('journal-entry');
550
+ const saveJournalBtn = document.getElementById('save-journal');
551
+ const journalEntriesContainer = document.getElementById('journal-entries');
552
+
553
+ let journalData = JSON.parse(localStorage.getItem('journalData')) || [];
554
+
555
+ function renderJournalEntries() {
556
+ journalEntriesContainer.innerHTML = '';
557
+
558
+ journalData.slice().reverse().forEach((entry, index) => {
559
+ const date = new Date(entry.date);
560
+ const entryElement = document.createElement('div');
561
+ entryElement.className = 'journal-entry bg-white p-4 rounded-lg border border-gray-200';
562
+ entryElement.innerHTML = `
563
+ <div class="text-sm text-gray-500 mb-2">${date.toLocaleDateString()} ${date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
564
+ <p class="text-gray-700">${entry.text}</p>
565
+ <button class="delete-entry mt-2 text-red-500 text-sm hover:text-red-700" data-index="${journalData.length - 1 - index}">
566
+ <i class="fas fa-trash-alt mr-1"></i> Excluir
567
+ </button>
568
+ `;
569
+ journalEntriesContainer.appendChild(entryElement);
570
+ });
571
+
572
+ // Add delete event listeners
573
+ document.querySelectorAll('.delete-entry').forEach(btn => {
574
+ btn.addEventListener('click', (e) => {
575
+ const index = parseInt(btn.dataset.index);
576
+ journalData.splice(index, 1);
577
+ localStorage.setItem('journalData', JSON.stringify(journalData));
578
+ renderJournalEntries();
579
+ });
580
+ });
581
+ }
582
+
583
+ saveJournalBtn.addEventListener('click', () => {
584
+ const text = journalEntry.value.trim();
585
+ if (text) {
586
+ const entry = {
587
+ date: new Date().toISOString(),
588
+ text: text
589
+ };
590
+
591
+ journalData.push(entry);
592
+ localStorage.setItem('journalData', JSON.stringify(journalData));
593
+ journalEntry.value = '';
594
+ renderJournalEntries();
595
+
596
+ // Show feedback
597
+ const feedback = document.createElement('div');
598
+ feedback.className = 'fixed top-4 right-4 bg-white shadow-lg rounded-lg px-4 py-2 animate-bounce';
599
+ feedback.innerHTML = `
600
+ <div class="flex items-center">
601
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
602
+ <span>Entrada salva!</span>
603
+ </div>
604
+ `;
605
+ document.body.appendChild(feedback);
606
+
607
+ setTimeout(() => {
608
+ feedback.remove();
609
+ }, 3000);
610
+ }
611
+ });
612
+
613
+ // Initialize journal entries
614
+ renderJournalEntries();
615
+
616
+ // Quote Carousel
617
+ const quoteSlides = document.querySelectorAll('.quote-slide');
618
+ const quotePrev = document.querySelector('.quote-prev');
619
+ const quoteNext = document.querySelector('.quote-next');
620
+
621
+ let currentQuote = 0;
622
+
623
+ function showQuote(index) {
624
+ quoteSlides.forEach((slide, i) => {
625
+ slide.classList.remove('active');
626
+ slide.classList.add('opacity-0', 'absolute');
627
+ if (i === index) {
628
+ slide.classList.add('active');
629
+ slide.classList.remove('opacity-0', 'absolute');
630
+ slide.classList.add('opacity-100');
631
+ }
632
+ });
633
+ }
634
+
635
+ quoteNext.addEventListener('click', () => {
636
+ currentQuote = (currentQuote + 1) % quoteSlides.length;
637
+ showQuote(currentQuote);
638
+ });
639
+
640
+ quotePrev.addEventListener('click', () => {
641
+ currentQuote = (currentQuote - 1 + quoteSlides.length) % quoteSlides.length;
642
+ showQuote(currentQuote);
643
+ });
644
+
645
+ // Auto-advance quotes
646
+ setInterval(() => {
647
+ currentQuote = (currentQuote + 1) % quoteSlides.length;
648
+ showQuote(currentQuote);
649
+ }, 8000);
650
+
651
+ // Theme Toggle
652
+ const themeToggle = document.getElementById('theme-toggle');
653
+ const themeIcon = themeToggle.querySelector('i');
654
+
655
+ themeToggle.addEventListener('click', () => {
656
+ document.documentElement.classList.toggle('dark');
657
+
658
+ if (document.documentElement.classList.contains('dark')) {
659
+ themeIcon.classList.remove('fa-moon');
660
+ themeIcon.classList.add('fa-sun');
661
+ localStorage.setItem('theme', 'dark');
662
+ } else {
663
+ themeIcon.classList.remove('fa-sun');
664
+ themeIcon.classList.add('fa-moon');
665
+ localStorage.setItem('theme', 'light');
666
+ }
667
+ });
668
+
669
+ // Check for saved theme preference
670
+ if (localStorage.getItem('theme') === 'dark' ||
671
+ (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
672
+ document.documentElement.classList.add('dark');
673
+ themeIcon.classList.remove('fa-moon');
674
+ themeIcon.classList.add('fa-sun');
675
+ }
676
+ </script>
677
+ <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=arthhh1/depression" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
678
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Curar a depressão