Hugging Face's logo

Spaces:
karhar92
/
astrology
Running

App Files Community
karhar92 commited on
Commit
0bf4fde
·
verified ·
1 Parent(s): 100c92f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +519 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Astrology
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: indigo
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: astrology
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,519 @@
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="ta">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>திருக்கணிதம் AI - தமிழ் ஜோதிடம்</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=Noto+Sans+Tamil:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Sans Tamil', sans-serif;
14
+ background-color: #f5f5f5;
15
+ }
16
+
17
+ .bg-astrology {
18
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
19
+ }
20
+
21
+ .chart-container {
22
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="%23ddd" stroke-width="0.5"/></svg>') center no-repeat;
23
+ background-size: contain;
24
+ }
25
+
26
+ .planet-marker {
27
+ position: absolute;
28
+ width: 12px;
29
+ height: 12px;
30
+ border-radius: 50%;
31
+ transform: translate(-50%, -50%);
32
+ }
33
+
34
+ .nav-item {
35
+ position: relative;
36
+ }
37
+
38
+ .nav-item::after {
39
+ content: '';
40
+ position: absolute;
41
+ bottom: -5px;
42
+ left: 0;
43
+ width: 0;
44
+ height: 2px;
45
+ background-color: #f59e0b;
46
+ transition: width 0.3s ease;
47
+ }
48
+
49
+ .nav-item:hover::after {
50
+ width: 100%;
51
+ }
52
+
53
+ .message-bubble {
54
+ max-width: 80%;
55
+ border-radius: 18px;
56
+ position: relative;
57
+ padding: 12px 16px;
58
+ margin-bottom: 8px;
59
+ line-height: 1.4;
60
+ }
61
+
62
+ .user-message {
63
+ background-color: #3b82f6;
64
+ color: white;
65
+ margin-left: auto;
66
+ border-bottom-right-radius: 4px;
67
+ }
68
+
69
+ .bot-message {
70
+ background-color: #e5e7eb;
71
+ color: #111827;
72
+ margin-right: auto;
73
+ border-bottom-left-radius: 4px;
74
+ }
75
+
76
+ .typing-indicator {
77
+ display: flex;
78
+ padding: 8px 16px;
79
+ }
80
+
81
+ .typing-dot {
82
+ width: 8px;
83
+ height: 8px;
84
+ border-radius: 50%;
85
+ background-color: #9ca3af;
86
+ margin: 0 2px;
87
+ animation: typing 1.4s infinite ease-in-out;
88
+ }
89
+
90
+ .typing-dot:nth-child(1) {
91
+ animation-delay: 0s;
92
+ }
93
+
94
+ .typing-dot:nth-child(2) {
95
+ animation-delay: 0.2s;
96
+ }
97
+
98
+ .typing-dot:nth-child(3) {
99
+ animation-delay: 0.4s;
100
+ }
101
+
102
+ @keyframes typing {
103
+ 0%, 60%, 100% { transform: translateY(0); }
104
+ 30% { transform: translateY(-5px); }
105
+ }
106
+
107
+ .fade-in {
108
+ animation: fadeIn 0.5s ease-in;
109
+ }
110
+
111
+ @keyframes fadeIn {
112
+ from { opacity: 0; transform: translateY(10px); }
113
+ to { opacity: 1; transform: translateY(0); }
114
+ }
115
+
116
+ .house-border {
117
+ stroke-dasharray: 1000;
118
+ stroke-dashoffset: 1000;
119
+ animation: dash 5s linear forwards;
120
+ }
121
+
122
+ @keyframes dash {
123
+ to {
124
+ stroke-dashoffset: 0;
125
+ }
126
+ }
127
+
128
+ .glow {
129
+ box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
130
+ }
131
+
132
+ .dos-donts-item {
133
+ display: flex;
134
+ align-items: center;
135
+ margin-bottom: 8px;
136
+ padding: 8px;
137
+ border-radius: 8px;
138
+ }
139
+
140
+ .dos-item {
141
+ background-color: rgba(16, 185, 129, 0.1);
142
+ border-left: 4px solid #10b981;
143
+ }
144
+
145
+ .donts-item {
146
+ background-color: rgba(239, 68, 68, 0.1);
147
+ border-left: 4px solid #ef4444;
148
+ }
149
+
150
+ .famous-person-card {
151
+ transition: all 0.3s ease;
152
+ cursor: pointer;
153
+ }
154
+
155
+ .famous-person-card:hover {
156
+ transform: translateY(-5px);
157
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
158
+ }
159
+
160
+ .language-toggle {
161
+ position: relative;
162
+ display: inline-block;
163
+ width: 60px;
164
+ height: 30px;
165
+ }
166
+
167
+ .language-toggle input {
168
+ opacity: 0;
169
+ width: 0;
170
+ height: 0;
171
+ }
172
+
173
+ .language-slider {
174
+ position: absolute;
175
+ cursor: pointer;
176
+ top: 0;
177
+ left: 0;
178
+ right: 0;
179
+ bottom: 0;
180
+ background-color: #f59e0b;
181
+ transition: .4s;
182
+ border-radius: 30px;
183
+ }
184
+
185
+ .language-slider:before {
186
+ position: absolute;
187
+ content: "";
188
+ height: 22px;
189
+ width: 22px;
190
+ left: 4px;
191
+ bottom: 4px;
192
+ background-color: white;
193
+ transition: .4s;
194
+ border-radius: 50%;
195
+ }
196
+
197
+ input:checked + .language-slider {
198
+ background-color: #3b82f6;
199
+ }
200
+
201
+ input:checked + .language-slider:before {
202
+ transform: translateX(30px);
203
+ }
204
+
205
+ .language-label {
206
+ position: absolute;
207
+ color: white;
208
+ font-weight: bold;
209
+ font-size: 12px;
210
+ pointer-events: none;
211
+ }
212
+
213
+ .tamil-label {
214
+ left: 8px;
215
+ top: 6px;
216
+ }
217
+
218
+ .english-label {
219
+ right: 8px;
220
+ top: 6px;
221
+ }
222
+ </style>
223
+ </head>
224
+ <body class="bg-gray-100">
225
+ <!-- Header Section -->
226
+ <header class="bg-astrology text-white shadow-lg">
227
+ <div class="container mx-auto px-4 py-6">
228
+ <div class="flex flex-col md:flex-row justify-between items-center">
229
+ <div class="flex items-center mb-4 md:mb-0">
230
+ <div class="w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
231
+ <i class="fas fa-star text-white text-xl"></i>
232
+ </div>
233
+ <div>
234
+ <h1 class="text-2xl font-bold">திருக்கணிதம் AI</h1>
235
+ <p class="text-yellow-300 text-sm">தமிழ் ஜோதிடம் மற்றும் கணிப்புகள்</p>
236
+ </div>
237
+ </div>
238
+ <div class="flex items-center space-x-6">
239
+ <nav class="flex space-x-6">
240
+ <a href="#" class="nav-item text-white hover:text-yellow-300 transition">முகப்பு</a>
241
+ <a href="#" class="nav-item text-white hover:text-yellow-300 transition">ஜாதகம்</a>
242
+ <a href="#" class="nav-item text-white hover:text-yellow-300 transition">கணிப்புகள்</a>
243
+ <a href="#" class="nav-item text-white hover:text-yellow-300 transition">பற்றி</a>
244
+ </nav>
245
+ <div class="flex items-center">
246
+ <label class="language-toggle">
247
+ <input type="checkbox" id="languageToggle">
248
+ <span class="language-slider"></span>
249
+ <span class="language-label tamil-label">தமிழ்</span>
250
+ <span class="language-label english-label">ENG</span>
251
+ </label>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </header>
257
+
258
+ <!-- Main Content -->
259
+ <main class="container mx-auto px-4 py-8">
260
+ <div class="flex flex-col lg:flex-row gap-8">
261
+ <!-- Birth Details Form -->
262
+ <div class="w-full lg:w-1/3 bg-white rounded-xl shadow-md p-6">
263
+ <h2 class="text-xl font-bold text-gray-800 mb-4">உங்கள் பிறப்பு விவரங்களை உள்ளிடுக</h2>
264
+ <form id="birthDetailsForm">
265
+ <div class="mb-4">
266
+ <label for="name" class="block text-gray-700 mb-2">பெயர்</label>
267
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="உங்கள் பெயர்" required>
268
+ </div>
269
+
270
+ <div class="mb-4">
271
+ <label for="dob" class="block text-gray-700 mb-2">பிறந்த தேதி</label>
272
+ <input type="date" id="dob" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" required>
273
+ </div>
274
+
275
+ <div class="mb-4">
276
+ <label for="tob" class="block text-gray-700 mb-2">பிறந்த நேரம்</label>
277
+ <input type="time" id="tob" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" required>
278
+ </div>
279
+
280
+ <div class="mb-4">
281
+ <label for="pob" class="block text-gray-700 mb-2">பிறந்த இடம்</label>
282
+ <input type="text" id="pob" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="நகரம், மாநிலம்" required>
283
+ </div>
284
+
285
+ <div class="mb-4">
286
+ <label class="block text-gray-700 mb-2">பாலினம்</label>
287
+ <div class="flex space-x-4">
288
+ <label class="inline-flex items-center">
289
+ <input type="radio" name="gender" value="male" class="h-4 w-4 text-yellow-600 focus:ring-yellow-500" checked>
290
+ <span class="ml-2 text-gray-700">ஆண்</span>
291
+ </label>
292
+ <label class="inline-flex items-center">
293
+ <input type="radio" name="gender" value="female" class="h-4 w-4 text-yellow-600 focus:ring-yellow-500">
294
+ <span class="ml-2 text-gray-700">பெண்</span>
295
+ </label>
296
+ </div>
297
+ </div>
298
+
299
+ <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
300
+ <i class="fas fa-chart-pie mr-2"></i> ஜாதகத்தை உருவாக்கு
301
+ </button>
302
+ </form>
303
+
304
+ <div class="mt-6 p-4 bg-blue-50 rounded-lg">
305
+ <h3 class="font-bold text-blue-800 mb-2">திருக்கணிதம் என்றால் என்ன?</h3>
306
+ <p class="text-blue-700 text-sm">திருக்கணிதம் என்பது பழந்தமிழர் கண்டுபிடித்த ஒரு ஜோதிட முறையாகும். இது நட்சத்திரங்கள், கிரகங்கள் மற்றும் அவற்றின் நிலைகளின் அடிப்படையில் மனிதனின் வாழ்க்கையை கணிக்கிறது.</p>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Astrology Chart and Chat -->
311
+ <div class="w-full lg:w-2/3 flex flex-col gap-6">
312
+ <!-- Astrology Chart -->
313
+ <div class="bg-white rounded-xl shadow-md p-6">
314
+ <div class="flex justify-between items-center mb-4">
315
+ <h2 class="text-xl font-bold text-gray-800">உங்கள் ஜாதக விளக்கப்படம்</h2>
316
+ <div class="flex space-x-2">
317
+ <button class="p-2 bg-gray-100 rounded-full hover:bg-gray-200">
318
+ <i class="fas fa-download text-gray-600"></i>
319
+ </button>
320
+ <button class="p-2 bg-gray-100 rounded-full hover:bg-gray-200">
321
+ <i class="fas fa-share-alt text-gray-600"></i>
322
+ </button>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="chart-container w-full h-64 md:h-80 relative mx-auto my-4">
327
+ <!-- This will be dynamically generated by JavaScript -->
328
+ <svg id="astrologyChart" width="100%" height="100%" viewBox="0 0 100 100" class="mx-auto">
329
+ <!-- Background circle -->
330
+ <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="0.5"/>
331
+
332
+ <!-- Houses (12 divisions) -->
333
+ <g id="houses">
334
+ <!-- These will be added dynamically -->
335
+ </g>
336
+
337
+ <!-- Zodiac signs -->
338
+ <g id="zodiacSigns">
339
+ <!-- These will be added dynamically -->
340
+ </g>
341
+
342
+ <!-- Planets -->
343
+ <g id="planets">
344
+ <!-- These will be added dynamically -->
345
+ </g>
346
+ </svg>
347
+ </div>
348
+
349
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
350
+ <div class="bg-gray-50 p-3 rounded-lg">
351
+ <div class="flex items-center">
352
+ <div class="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center mr-2">
353
+ <i class="fas fa-mars text-white text-xs"></i>
354
+ </div>
355
+ <span class="font-medium text-gray-700">சூரியன்</span>
356
+ </div>
357
+ <p class="text-sm text-gray-600 mt-1" id="sun-position">-</p>
358
+ </div>
359
+ <div class="bg-gray-50 p-3 rounded-lg">
360
+ <div class="flex items-center">
361
+ <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center mr-2">
362
+ <i class="fas fa-moon text-white text-xs"></i>
363
+ </div>
364
+ <span class="font-medium text-gray-700">சந்திரன்</span>
365
+ </div>
366
+ <p class="text-sm text-gray-600 mt-1" id="moon-position">-</p>
367
+ </div>
368
+ <div class="bg-gray-50 p-3 rounded-lg">
369
+ <div class="flex items-center">
370
+ <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center mr-2">
371
+ <i class="fas fa-venus text-white text-xs"></i>
372
+ </div>
373
+ <span class="font-medium text-gray-700">சுக்கிரன்</span>
374
+ </div>
375
+ <p class="text-sm text-gray-600 mt-1" id="venus-position">-</p>
376
+ </div>
377
+ <div class="bg-gray-50 p-3 rounded-lg">
378
+ <div class="flex items-center">
379
+ <div class="w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center mr-2">
380
+ <i class="fas fa-saturn text-white text-xs"></i>
381
+ </div>
382
+ <span class="font-medium text-gray-700">சனி</span>
383
+ </div>
384
+ <p class="text-sm text-gray-600 mt-1" id="saturn-position">-</p>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Dos and Don'ts Section -->
390
+ <div class="bg-white rounded-xl shadow-md p-6">
391
+ <div class="flex justify-between items-center mb-4">
392
+ <h2 class="text-xl font-bold text-gray-800">செய்ய வேண்டியவை & தவிர்க்க வேண்டியவை</h2>
393
+ <div class="text-sm text-gray-500">இன்றைய தேதி: <span id="current-date">-</span></div>
394
+ </div>
395
+
396
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
397
+ <div>
398
+ <h3 class="font-bold text-green-600 mb-3 flex items-center">
399
+ <i class="fas fa-check-circle mr-2"></i> செய்ய வேண்டியவை
400
+ </h3>
401
+ <div id="dos-list">
402
+ <!-- Will be populated by JavaScript -->
403
+ <div class="dos-donts-item dos-item">
404
+ <i class="fas fa-check text-green-500 mr-2"></i>
405
+ <span>காலையில் சூரியனை வணங்கவும்</span>
406
+ </div>
407
+ <div class="dos-donts-item dos-item">
408
+ <i class="fas fa-check text-green-500 mr-2"></i>
409
+ <span>பச்சை நிற ஆடைகளை அணியவும்</span>
410
+ </div>
411
+ <div class="dos-donts-item dos-item">
412
+ <i class="fas fa-check text-green-500 mr-2"></i>
413
+ <span>தானியங்கள் மற்றும் பழங்களை தானம் செய்யவும்</span>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div>
419
+ <h3 class="font-bold text-red-600 mb-3 flex items-center">
420
+ <i class="fas fa-times-circle mr-2"></i> தவிர்க்க வேண்டியவை
421
+ </h3>
422
+ <div id="donts-list">
423
+ <!-- Will be populated by JavaScript -->
424
+ <div class="dos-donts-item donts-item">
425
+ <i class="fas fa-times text-red-500 mr-2"></i>
426
+ <span>மாலை நேரத்தில் பயணம் தவிர்க்கவும்</span>
427
+ </div>
428
+ <div class="dos-donts-item donts-item">
429
+ <i class="fas fa-times text-red-500 mr-2"></i>
430
+ <span>கருப்பு நிற ஆடைகளை தவிர்க்கவும்</span>
431
+ </div>
432
+ <div class="dos-donts-item donts-item">
433
+ <i class="fas fa-times text-red-500 mr-2"></i>
434
+ <span>புதிய திட்டங்களை தொடங்க வேண்டாம்</span>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- Famous People Section -->
442
+ <div class="bg-white rounded-xl shadow-md p-6">
443
+ <h2 class="text-xl font-bold text-gray-800 mb-4">உங்களைப் போன்ற ஜாதகம் உள்ள பிரபலங்கள்</h2>
444
+
445
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="famous-people">
446
+ <!-- Will be populated by JavaScript -->
447
+ <div class="famous-person-card bg-gray-50 rounded-lg p-4 text-center">
448
+ <div class="w-16 h-16 rounded-full bg-yellow-100 mx-auto mb-3 flex items-center justify-center">
449
+ <i class="fas fa-user text-yellow-500 text-xl"></i>
450
+ </div>
451
+ <h4 class="font-bold">ரஜினிகாந்த்</h4>
452
+ <p class="text-sm text-gray-600">நடிகர்</p>
453
+ </div>
454
+ <div class="famous-person-card bg-gray-50 rounded-lg p-4 text-center">
455
+ <div class="w-16 h-16 rounded-full bg-blue-100 mx-auto mb-3 flex items-center justify-center">
456
+ <i class="fas fa-user text-blue-500 text-xl"></i>
457
+ </div>
458
+ <h4 class="font-bold">ஏ.ஆர்.ரஹ்மான்</h4>
459
+ <p class="text-sm text-gray-600">இசையமைப்பாளர்</p>
460
+ </div>
461
+ <div class="famous-person-card bg-gray-50 rounded-lg p-4 text-center">
462
+ <div class="w-16 h-16 rounded-full bg-green-100 mx-auto mb-3 flex items-center justify-center">
463
+ <i class="fas fa-user text-green-500 text-xl"></i>
464
+ </div>
465
+ <h4 class="font-bold">எம்.எஸ்.சுவாமிநாதன்</h4>
466
+ <p class="text-sm text-gray-600">விஞ்ஞானி</p>
467
+ </div>
468
+ <div class="famous-person-card bg-gray-50 rounded-lg p-4 text-center">
469
+ <div class="w-16 h-16 rounded-full bg-purple-100 mx-auto mb-3 flex items-center justify-center">
470
+ <i class="fas fa-user text-purple-500 text-xl"></i>
471
+ </div>
472
+ <h4 class="font-bold">சுஜாதா</h4>
473
+ <p class="text-sm text-gray-600">எழுத்தாளர்</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Chat Interface -->
479
+ <div class="bg-white rounded-xl shadow-md p-6 flex-grow flex flex-col">
480
+ <div class="flex items-center mb-4">
481
+ <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
482
+ <i class="fas fa-robot text-white text-lg"></i>
483
+ </div>
484
+ <div>
485
+ <h2 class="font-bold text-gray-800">திருக்கணிதம் AI உதவியாளர்</h2>
486
+ <p class="text-xs text-gray-500">உங்கள் ஜோதிட கேள்விகளுக்கு பதிலளிக்க தயாராக உள்ளது</p>
487
+ </div>
488
+ </div>
489
+
490
+ <div id="chatContainer" class="flex-grow overflow-y-auto mb-4 p-4 bg-gray-50 rounded-lg space-y-3" style="max-height: 300px;">
491
+ <div class="message-bubble bot-message fade-in">
492
+ <p>வணக்கம்! நான் திருக்கணிதம் AI உதவியாளர். உங்க��் பிறப்பு விவரங்களை உள்ளிட்டு உங்கள் ஜாதகத்தை உருவாக்கலாம். அல்லது உங்களுக்கு ஏதேனும் கேள்விகள் இருந்தால் கேளுங்கள்.</p>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="flex items-center">
497
+ <input type="text" id="userMessage" placeholder="உங்கள் கேள்வியை இங்கே தட்டச்சு செய்க..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
498
+ <button id="sendMessage" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-r-lg transition duration-300">
499
+ <i class="fas fa-paper-plane"></i>
500
+ </button>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </main>
506
+
507
+ <!-- Features Section -->
508
+ <section class="bg-gray-50 py-12">
509
+ <div class="container mx-auto px-4">
510
+ <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">திருக்கணிதம் AI சிறப்பம்சங்கள்</h2>
511
+
512
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
513
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
514
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
515
+ <i class="fas fa-chart-line text-blue-500 text-xl"></i>
516
+ </div>
517
+ <h3 class="font-bold text-lg mb-2">துல்லியமான ஜாதக பகுப்பாய்வு</h3>
518
+ <p class="text-gray-600">உங்கள் பிறப்பு
519
+ </html>