Hugging Face's logo

Spaces:
Aravind366
/
harmonyai-deepsite
Running

App Files Community
Aravind366 commited on
Commit
e2ade5d
·
verified ·
1 Parent(s): af5f409

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +622 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Harmonyai Deepsite
3
- emoji: 🏃
4
- colorFrom: indigo
5
- colorTo: pink
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: harmonyai-deepsite
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,622 @@
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>HarmonyAI - AI Marriage Arbitrator</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .chat-container {
14
+ height: 500px;
15
+ overflow-y: auto;
16
+ scrollbar-width: thin;
17
+ scrollbar-color: #4f46e5 #e5e7eb;
18
+ }
19
+ .chat-container::-webkit-scrollbar {
20
+ width: 8px;
21
+ }
22
+ .chat-container::-webkit-scrollbar-track {
23
+ background: #e5e7eb;
24
+ }
25
+ .chat-container::-webkit-scrollbar-thumb {
26
+ background-color: #4f46e5;
27
+ border-radius: 20px;
28
+ }
29
+ .fade-in {
30
+ animation: fadeIn 0.5s ease-in-out;
31
+ }
32
+ @keyframes fadeIn {
33
+ from { opacity: 0; transform: translateY(10px); }
34
+ to { opacity: 1; transform: translateY(0); }
35
+ }
36
+ .pulse {
37
+ animation: pulse 2s infinite;
38
+ }
39
+ @keyframes pulse {
40
+ 0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
41
+ 70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
42
+ 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-50 font-sans">
47
+ <!-- Navigation -->
48
+ <nav class="bg-white shadow-lg">
49
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
50
+ <div class="flex justify-between h-16">
51
+ <div class="flex items-center">
52
+ <div class="flex-shrink-0 flex items-center">
53
+ <i class="fas fa-heart text-purple-600 text-2xl mr-2"></i>
54
+ <span class="text-xl font-bold text-gray-900">HarmonyAI</span>
55
+ </div>
56
+ </div>
57
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
58
+ <a href="#" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
59
+ <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">How It Works</a>
60
+ <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Features</a>
61
+ <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
62
+ <a href="#" class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700">Get Started</a>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Hero Section -->
69
+ <div class="gradient-bg text-white">
70
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
71
+ <div class="text-center">
72
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
73
+ AI-Powered Marriage Counseling
74
+ </h1>
75
+ <p class="mt-6 max-w-lg mx-auto text-xl">
76
+ Private, accessible, and effective relationship support powered by artificial intelligence.
77
+ </p>
78
+ <div class="mt-10">
79
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-white hover:bg-gray-100">
80
+ Start Free Trial
81
+ <i class="fas fa-arrow-right ml-3"></i>
82
+ </a>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Features Section -->
89
+ <div class="py-12 bg-white">
90
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
91
+ <div class="lg:text-center">
92
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Features</h2>
93
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
94
+ How HarmonyAI Helps Your Relationship
95
+ </p>
96
+ </div>
97
+
98
+ <div class="mt-10">
99
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
100
+ <!-- Feature 1 -->
101
+ <div class="relative fade-in">
102
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
103
+ <i class="fas fa-comments text-xl"></i>
104
+ </div>
105
+ <div class="ml-16">
106
+ <h3 class="text-lg leading-6 font-medium text-gray-900">AI-Facilitated Conversations</h3>
107
+ <p class="mt-2 text-base text-gray-500">
108
+ Our AI guides you through structured, productive conversations to improve communication and resolve conflicts.
109
+ </p>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Feature 2 -->
114
+ <div class="relative fade-in">
115
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
116
+ <i class="fas fa-user-shield text-xl"></i>
117
+ </div>
118
+ <div class="ml-16">
119
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Secure & Private</h3>
120
+ <p class="mt-2 text-base text-gray-500">
121
+ HIPAA-compliant encryption ensures your conversations remain completely confidential.
122
+ </p>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Feature 3 -->
127
+ <div class="relative fade-in">
128
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
129
+ <i class="fas fa-brain text-xl"></i>
130
+ </div>
131
+ <div class="ml-16">
132
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Sentiment Analysis</h3>
133
+ <p class="mt-2 text-base text-gray-500">
134
+ Our AI detects emotional patterns to help you understand each other's feelings more deeply.
135
+ </p>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Feature 4 -->
140
+ <div class="relative fade-in">
141
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
142
+ <i class="fas fa-tasks text-xl"></i>
143
+ </div>
144
+ <div class="ml-16">
145
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Personalized Exercises</h3>
146
+ <p class="mt-2 text-base text-gray-500">
147
+ Get customized relationship-building activities tailored to your specific needs and goals.
148
+ </p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Demo Section -->
157
+ <div class="bg-gray-50 py-16">
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
160
+ <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
161
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
162
+ Experience AI-Powered Counseling
163
+ </h2>
164
+ <p class="mt-3 text-lg text-gray-500">
165
+ Try our interactive demo to see how HarmonyAI can help improve your relationship communication.
166
+ </p>
167
+ <div class="mt-8 sm:max-w-lg sm:mx-auto lg:mx-0">
168
+ <div class="flex flex-col space-y-4">
169
+ <button id="individualBtn" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 md:py-4 md:text-lg md:px-10">
170
+ <i class="fas fa-user mr-3"></i> Individual Session
171
+ </button>
172
+ <button id="coupleBtn" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 md:py-4 md:text-lg md:px-10">
173
+ <i class="fas fa-users mr-3"></i> Couple Session
174
+ </button>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
179
+ <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
180
+ <!-- Chat Demo -->
181
+ <div class="bg-white rounded-lg shadow-xl overflow-hidden">
182
+ <div class="p-4 bg-purple-600 text-white flex items-center">
183
+ <div class="w-10 h-10 rounded-full bg-purple-400 flex items-center justify-center mr-3">
184
+ <i class="fas fa-robot text-white"></i>
185
+ </div>
186
+ <div>
187
+ <h3 class="font-semibold">HarmonyAI Counselor</h3>
188
+ <p class="text-xs text-purple-100">Active now</p>
189
+ </div>
190
+ </div>
191
+ <div class="chat-container p-4 bg-gray-50" id="demoChat">
192
+ <!-- AI Message -->
193
+ <div class="flex mb-4">
194
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
195
+ <i class="fas fa-robot text-purple-600"></i>
196
+ </div>
197
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md">
198
+ <p class="text-gray-800">Welcome to HarmonyAI! I'm here to help facilitate constructive conversations between you and your partner. How can I assist you today?</p>
199
+ <p class="text-xs text-gray-500 mt-1">10:00 AM</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="p-4 border-t border-gray-200">
204
+ <div class="flex">
205
+ <input type="text" id="demoInput" placeholder="Type your message..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
206
+ <button id="demoSend" class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700">
207
+ <i class="fas fa-paper-plane"></i>
208
+ </button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- How It Works -->
219
+ <div class="py-12 bg-white">
220
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
221
+ <div class="lg:text-center">
222
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Process</h2>
223
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
224
+ How HarmonyAI Works
225
+ </p>
226
+ </div>
227
+
228
+ <div class="mt-10">
229
+ <div class="relative">
230
+ <!-- Vertical line -->
231
+ <div class="absolute left-1/2 w-1 bg-purple-200 h-full transform -translate-x-1/2"></div>
232
+
233
+ <!-- Timeline items -->
234
+ <div class="space-y-8">
235
+ <!-- Step 1 -->
236
+ <div class="relative flex items-center">
237
+ <div class="flex-shrink-0 w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto">
238
+ 1
239
+ </div>
240
+ <div class="ml-6 p-6 bg-purple-50 rounded-lg w-1/2">
241
+ <h3 class="text-lg font-medium text-gray-900">Sign Up & Create Profiles</h3>
242
+ <p class="mt-2 text-gray-600">
243
+ Each partner creates an individual account, then links them to form a couple profile.
244
+ </p>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Step 2 -->
249
+ <div class="relative flex items-center">
250
+ <div class="flex-shrink-0 w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto">
251
+ 2
252
+ </div>
253
+ <div class="mr-6 p-6 bg-purple-50 rounded-lg w-1/2 ml-auto text-right">
254
+ <h3 class="text-lg font-medium text-gray-900">Initial Assessment</h3>
255
+ <p class="mt-2 text-gray-600">
256
+ Complete brief questionnaires to help our AI understand your relationship dynamics.
257
+ </p>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Step 3 -->
262
+ <div class="relative flex items-center">
263
+ <div class="flex-shrink-0 w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto">
264
+ 3
265
+ </div>
266
+ <div class="ml-6 p-6 bg-purple-50 rounded-lg w-1/2">
267
+ <h3 class="text-lg font-medium text-gray-900">Start Conversations</h3>
268
+ <p class="mt-2 text-gray-600">
269
+ Engage in individual or joint sessions with AI guidance to address specific issues.
270
+ </p>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Step 4 -->
275
+ <div class="relative flex items-center">
276
+ <div class="flex-shrink-0 w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold text-xl z-10 mx-auto">
277
+ 4
278
+ </div>
279
+ <div class="mr-6 p-6 bg-purple-50 rounded-lg w-1/2 ml-auto text-right">
280
+ <h3 class="text-lg font-medium text-gray-900">Track Progress</h3>
281
+ <p class="mt-2 text-gray-600">
282
+ Monitor improvements through analytics and receive personalized recommendations.
283
+ </p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Testimonials -->
293
+ <div class="bg-purple-50 py-16">
294
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
295
+ <div class="lg:text-center">
296
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Testimonials</h2>
297
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
298
+ What Couples Are Saying
299
+ </p>
300
+ </div>
301
+
302
+ <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
303
+ <!-- Testimonial 1 -->
304
+ <div class="bg-white p-6 rounded-lg shadow-md">
305
+ <div class="flex items-center mb-4">
306
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
307
+ <i class="fas fa-user text-purple-600"></i>
308
+ </div>
309
+ <div>
310
+ <h4 class="font-semibold">Mark & Jessica</h4>
311
+ <p class="text-sm text-gray-500">Married 7 years</p>
312
+ </div>
313
+ </div>
314
+ <p class="text-gray-700 italic">
315
+ "HarmonyAI helped us break negative communication patterns. We learned to truly listen to each other instead of just waiting to speak."
316
+ </p>
317
+ <div class="flex mt-4">
318
+ <i class="fas fa-star text-yellow-400"></i>
319
+ <i class="fas fa-star text-yellow-400"></i>
320
+ <i class="fas fa-star text-yellow-400"></i>
321
+ <i class="fas fa-star text-yellow-400"></i>
322
+ <i class="fas fa-star text-yellow-400"></i>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Testimonial 2 -->
327
+ <div class="bg-white p-6 rounded-lg shadow-md">
328
+ <div class="flex items-center mb-4">
329
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
330
+ <i class="fas fa-user text-purple-600"></i>
331
+ </div>
332
+ <div>
333
+ <h4 class="font-semibold">David & Emily</h4>
334
+ <p class="text-sm text-gray-500">Married 12 years</p>
335
+ </div>
336
+ </div>
337
+ <p class="text-gray-700 italic">
338
+ "The AI helped us navigate financial disagreements with structured conversations that kept us focused on solutions."
339
+ </p>
340
+ <div class="flex mt-4">
341
+ <i class="fas fa-star text-yellow-400"></i>
342
+ <i class="fas fa-star text-yellow-400"></i>
343
+ <i class="fas fa-star text-yellow-400"></i>
344
+ <i class="fas fa-star text-yellow-400"></i>
345
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Testimonial 3 -->
350
+ <div class="bg-white p-6 rounded-lg shadow-md">
351
+ <div class="flex items-center mb-4">
352
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
353
+ <i class="fas fa-user text-purple-600"></i>
354
+ </div>
355
+ <div>
356
+ <h4 class="font-semibold">Alex & Taylor</h4>
357
+ <p class="text-sm text-gray-500">Married 3 years</p>
358
+ </div>
359
+ </div>
360
+ <p class="text-gray-700 italic">
361
+ "As introverts, we appreciated being able to work on our relationship at our own pace without the pressure of face-to-face therapy."
362
+ </p>
363
+ <div class="flex mt-4">
364
+ <i class="fas fa-star text-yellow-400"></i>
365
+ <i class="fas fa-star text-yellow-400"></i>
366
+ <i class="fas fa-star text-yellow-400"></i>
367
+ <i class="fas fa-star text-yellow-400"></i>
368
+ <i class="fas fa-star text-yellow-400"></i>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- CTA Section -->
376
+ <div class="gradient-bg">
377
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
378
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
379
+ <span class="block">Ready to improve your relationship?</span>
380
+ <span class="block text-purple-200">Start your free trial today.</span>
381
+ </h2>
382
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
383
+ <div class="inline-flex rounded-md shadow">
384
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-purple-50">
385
+ Get started
386
+ </a>
387
+ </div>
388
+ <div class="ml-3 inline-flex rounded-md shadow">
389
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 bg-opacity-60 hover:bg-opacity-70">
390
+ Learn more
391
+ </a>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Footer -->
398
+ <footer class="bg-gray-800 text-white pt-12 pb-8">
399
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
400
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
401
+ <div>
402
+ <h3 class="text-lg font-semibold mb-4">HarmonyAI</h3>
403
+ <p class="text-gray-400">
404
+ AI-powered marriage counseling to help couples communicate better and strengthen their relationships.
405
+ </p>
406
+ </div>
407
+ <div>
408
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
409
+ <ul class="space-y-2">
410
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
411
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
412
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
413
+ <li><a href="#" class="text-gray-400 hover:text-white">Testimonials</a></li>
414
+ </ul>
415
+ </div>
416
+ <div>
417
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
418
+ <ul class="space-y-2">
419
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
420
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
421
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
422
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
423
+ </ul>
424
+ </div>
425
+ <div>
426
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
427
+ <address class="text-gray-400 not-italic">
428
+ <p>123 Harmony Lane</p>
429
+ <p>Suite 400</p>
430
+ <p>Relationsville, CA 90210</p>
431
+ <p class="mt-2">support@harmonyai.com</p>
432
+ </address>
433
+ </div>
434
+ </div>
435
+ <div class="mt-8 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
436
+ <p class="text-gray-400 text-sm">
437
+ &copy; 2023 HarmonyAI. All rights reserved.
438
+ </p>
439
+ <div class="flex space-x-6 mt-4 md:mt-0">
440
+ <a href="#" class="text-gray-400 hover:text-white">
441
+ <i class="fab fa-facebook-f"></i>
442
+ </a>
443
+ <a href="#" class="text-gray-400 hover:text-white">
444
+ <i class="fab fa-twitter"></i>
445
+ </a>
446
+ <a href="#" class="text-gray-400 hover:text-white">
447
+ <i class="fab fa-instagram"></i>
448
+ </a>
449
+ <a href="#" class="text-gray-400 hover:text-white">
450
+ <i class="fab fa-linkedin-in"></i>
451
+ </a>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </footer>
456
+
457
+ <!-- Disclaimer Modal -->
458
+ <div id="disclaimerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
459
+ <div class="bg-white rounded-lg max-w-2xl w-full p-6 mx-4">
460
+ <div class="flex justify-between items-center mb-4">
461
+ <h3 class="text-xl font-bold text-gray-900">Important Disclaimer</h3>
462
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
463
+ <i class="fas fa-times"></i>
464
+ </button>
465
+ </div>
466
+ <div class="prose text-gray-700 mb-6">
467
+ <p>HarmonyAI is an AI-powered tool designed to supplement, not replace, professional marriage counseling. Our platform provides general guidance and should not be considered as professional psychological advice.</p>
468
+ <p class="mt-4 font-semibold">If you are experiencing:</p>
469
+ <ul class="list-disc pl-5 mt-2">
470
+ <li>Thoughts of self-harm or suicide</li>
471
+ <li>Domestic violence or abuse</li>
472
+ <li>Severe mental health issues</li>
473
+ </ul>
474
+ <p class="mt-4">Please contact a licensed professional immediately or call emergency services in your area.</p>
475
+ </div>
476
+ <div class="flex justify-end">
477
+ <button id="acceptDisclaimer" class="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700">
478
+ I Understand
479
+ </button>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <script>
485
+ // Demo chat functionality
486
+ document.addEventListener('DOMContentLoaded', function() {
487
+ const demoChat = document.getElementById('demoChat');
488
+ const demoInput = document.getElementById('demoInput');
489
+ const demoSend = document.getElementById('demoSend');
490
+ const individualBtn = document.getElementById('individualBtn');
491
+ const coupleBtn = document.getElementById('coupleBtn');
492
+ const disclaimerModal = document.getElementById('disclaimerModal');
493
+ const closeModal = document.getElementById('closeModal');
494
+ const acceptDisclaimer = document.getElementById('acceptDisclaimer');
495
+
496
+ // Sample AI responses for demo
497
+ const aiResponses = [
498
+ "I hear you. Can you tell me more about how this situation makes you feel?",
499
+ "That's an important point. How do you think your partner would describe this situation?",
500
+ "I notice some tension in your message. Let's try to explore this calmly. What would be your ideal resolution?",
501
+ "Thank you for sharing that. It sounds like this has been challenging for you both. Have you tried discussing this directly with your partner?",
502
+ "I can understand why you'd feel that way. What's one small step you could take to improve this situation?"
503
+ ];
504
+
505
+ // Show disclaimer modal on first interaction
506
+ let disclaimerShown = localStorage.getItem('disclaimerShown');
507
+ if (!disclaimerShown) {
508
+ disclaimerModal.classList.remove('hidden');
509
+ localStorage.setItem('disclaimerShown', 'true');
510
+ }
511
+
512
+ // Close modal handlers
513
+ closeModal.addEventListener('click', () => {
514
+ disclaimerModal.classList.add('hidden');
515
+ });
516
+
517
+ acceptDisclaimer.addEventListener('click', () => {
518
+ disclaimerModal.classList.add('hidden');
519
+ });
520
+
521
+ // Demo chat send handler
522
+ demoSend.addEventListener('click', sendMessage);
523
+ demoInput.addEventListener('keypress', function(e) {
524
+ if (e.key === 'Enter') {
525
+ sendMessage();
526
+ }
527
+ });
528
+
529
+ function sendMessage() {
530
+ const message = demoInput.value.trim();
531
+ if (message) {
532
+ // Add user message
533
+ const userDiv = document.createElement('div');
534
+ userDiv.className = 'flex mb-4 justify-end';
535
+ userDiv.innerHTML = `
536
+ <div class="bg-purple-100 p-3 rounded-lg shadow-sm max-w-xs md:max-w-md">
537
+ <p class="text-gray-800">${message}</p>
538
+ <p class="text-xs text-gray-500 mt-1 text-right">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
539
+ </div>
540
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center ml-3">
541
+ <i class="fas fa-user text-purple-600"></i>
542
+ </div>
543
+ `;
544
+ demoChat.appendChild(userDiv);
545
+ demoInput.value = '';
546
+
547
+ // Scroll to bottom
548
+ demoChat.parentElement.scrollTop = demoChat.parentElement.scrollHeight;
549
+
550
+ // Simulate AI response after a delay
551
+ setTimeout(() => {
552
+ const aiDiv = document.createElement('div');
553
+ aiDiv.className = 'flex mb-4';
554
+ aiDiv.innerHTML = `
555
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
556
+ <i class="fas fa-robot text-purple-600"></i>
557
+ </div>
558
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md">
559
+ <p class="text-gray-800">${aiResponses[Math.floor(Math.random() * aiResponses.length)]}</p>
560
+ <p class="text-xs text-gray-500 mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
561
+ </div>
562
+ `;
563
+ demoChat.appendChild(aiDiv);
564
+ demoChat.parentElement.scrollTop = demoChat.parentElement.scrollHeight;
565
+ }, 1000);
566
+ }
567
+ }
568
+
569
+ // Demo mode buttons
570
+ individualBtn.addEventListener('click', function() {
571
+ demoChat.innerHTML = `
572
+ <div class="flex mb-4">
573
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
574
+ <i class="fas fa-robot text-purple-600"></i>
575
+ </div>
576
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md">
577
+ <p class="text-gray-800">Welcome to your individual session. This is a private space where you can reflect on your relationship and prepare for conversations with your partner. What would you like to discuss today?</p>
578
+ <p class="text-xs text-gray-500 mt-1">10:00 AM</p>
579
+ </div>
580
+ </div>
581
+ `;
582
+ this.classList.add('pulse');
583
+ setTimeout(() => this.classList.remove('pulse'), 2000);
584
+ });
585
+
586
+ coupleBtn.addEventListener('click', function() {
587
+ demoChat.innerHTML = `
588
+ <div class="flex mb-4">
589
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
590
+ <i class="fas fa-robot text-purple-600"></i>
591
+ </div>
592
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs md:max-w-md">
593
+ <p class="text-gray-800">Welcome to your couple session. I'll help facilitate constructive communication between you both. Who would like to start sharing first?</p>
594
+ <p class="text-xs text-gray-500 mt-1">10:00 AM</p>
595
+ </div>
596
+ </div>
597
+ <div class="flex mb-4 justify-end">
598
+ <div class="bg-blue-100 p-3 rounded-lg shadow-sm max-w-xs md:max-w-md">
599
+ <p class="text-gray-800">I feel like we're not spending enough quality time together.</p>
600
+ <p class="text-xs text-gray-500 mt-1 text-right">10:02 AM</p>
601
+ </div>
602
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center ml-3">
603
+ <i class="fas fa-user text-blue-600"></i>
604
+ </div>
605
+ </div>
606
+ <div class="flex mb-4 justify-end">
607
+ <div class="bg-pink-100 p-3 rounded-lg shadow-sm max-w-xs md:max-w-md">
608
+ <p class="text-gray-800">I agree, but I've been really stressed with work lately.</p>
609
+ <p class="text-xs text-gray-500 mt-1 text-right">10:03 AM</p>
610
+ </div>
611
+ <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center ml-3">
612
+ <i class="fas fa-user text-pink-600"></i>
613
+ </div>
614
+ </div>
615
+ `;
616
+ this.classList.add('pulse');
617
+ setTimeout(() => this.classList.remove('pulse'), 2000);
618
+ });
619
+ });
620
+ </script>
621
+ <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=Aravind366/harmonyai-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
622
+ </html>