Hugging Face's logo

Spaces:
arpit13
/
Lets-Vibe-CodeOnChain
Running

App Files Community
1
karhar92 commited on
Commit
a32c269
·
verified ·
1 Parent(s): 11b15a0

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +302 -728
index.html CHANGED
@@ -3,822 +3,396 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Siddhar Astro AI Platform</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
- @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&display=swap');
12
-
13
  :root {
14
- --cosmic-indigo: #4b0082;
15
- --electric-violet: #8a2be2;
16
- --glowing-gold: #ffd700;
17
- --deep-space: #0f0f1a;
18
- --neon-pink: #ff6ec7;
19
  }
20
 
21
  body {
22
- font-family: 'Poppins', sans-serif;
23
- background-color: var(--deep-space);
24
  color: white;
 
25
  overflow-x: hidden;
26
  }
27
 
28
- .tamil-font {
29
- font-family: 'Catamaran', sans-serif;
30
- }
31
-
32
- .glow-border {
33
- border: 1px solid var(--electric-violet);
34
- box-shadow: 0 0 10px var(--electric-violet),
35
- inset 0 0 5px var(--electric-violet);
36
- }
37
-
38
- .glow-text {
39
- text-shadow: 0 0 5px var(--glowing-gold);
40
- }
41
-
42
- .card-glow {
43
- box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
44
- }
45
-
46
- .planet {
47
- animation: float 6s ease-in-out infinite;
48
  }
49
 
50
- @keyframes float {
51
- 0% { transform: translateY(0px); }
52
- 50% { transform: translateY(-10px); }
53
- 100% { transform: translateY(0px); }
54
  }
55
 
56
- .sun-pulse {
57
- animation: pulse 3s infinite;
 
58
  }
59
 
60
- @keyframes pulse {
61
- 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
62
- 70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
63
- 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
64
  }
65
 
66
- .yantra-spin {
67
- animation: spin 30s linear infinite;
 
68
  }
69
 
70
- @keyframes spin {
71
- 0% { transform: rotate(0deg); }
72
- 100% { transform: rotate(360deg); }
73
  }
74
 
75
- .fade-in {
76
- animation: fadeIn 1.5s ease-in;
77
- }
78
-
79
- @keyframes fadeIn {
80
- from { opacity: 0; }
81
- to { opacity: 1; }
82
- }
83
-
84
- .language-toggle {
85
  position: relative;
86
- width: 80px;
87
- height: 35px;
88
- border-radius: 25px;
89
- background: var(--cosmic-indigo);
90
- cursor: pointer;
91
  }
92
 
93
- .language-toggle .slider {
 
94
  position: absolute;
95
- width: 35px;
96
- height: 35px;
97
- border-radius: 50%;
98
- background: var(--glowing-gold);
99
- transition: all 0.3s;
100
- display: flex;
101
- align-items: center;
102
- justify-content: center;
103
- }
104
-
105
- .language-toggle.active .slider {
106
- transform: translateX(45px);
107
- }
108
-
109
- .avatar-container {
110
- perspective: 1000px;
111
- }
112
-
113
- .avatar {
114
- transition: transform 0.5s;
115
- }
116
-
117
- .avatar:hover {
118
- transform: rotateY(20deg);
119
- }
120
-
121
- .dos-card {
122
- transition: all 0.3s;
123
- }
124
-
125
- .dos-card:hover {
126
- transform: translateY(-5px);
127
- box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
128
- }
129
-
130
- .timeline-tab {
131
  position: relative;
132
  }
133
 
134
- .timeline-tab.active::after {
135
- content: '';
136
  position: absolute;
137
- bottom: -5px;
138
  left: 0;
139
  width: 100%;
140
- height: 3px;
141
- background: var(--glowing-gold);
142
- border-radius: 3px;
143
- }
144
-
145
- .input-field:focus {
146
- outline: none;
147
- box-shadow: 0 0 0 2px var(--electric-violet);
148
- }
149
-
150
- .generate-btn {
151
- background: linear-gradient(45deg, var(--electric-violet), var(--neon-pink));
152
- transition: all 0.3s;
153
- }
154
-
155
- .generate-btn:hover {
156
- transform: translateY(-2px);
157
- box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
158
  }
159
 
160
- .mood-selector input[type="radio"]:checked + label {
161
- border-color: var(--glowing-gold);
162
- box-shadow: 0 0 10px var(--glowing-gold);
 
 
163
  }
164
 
165
- /* Chatbot styles */
166
- .chat-container {
167
- height: 400px;
168
- overflow-y: auto;
169
- scrollbar-width: thin;
170
- scrollbar-color: var(--electric-violet) var(--deep-space);
171
  }
172
 
173
- .chat-container::-webkit-scrollbar {
174
- width: 6px;
 
 
 
 
 
 
 
 
 
 
175
  }
176
 
177
- .chat-container::-webkit-scrollbar-track {
178
- background: var(--deep-space);
 
 
 
 
 
 
 
 
 
 
179
  }
180
 
181
- .chat-container::-webkit-scrollbar-thumb {
182
- background-color: var(--electric-violet);
183
- border-radius: 3px;
184
  }
185
 
186
- .user-message {
187
- background: rgba(138, 43, 226, 0.2);
188
- border-left: 3px solid var(--electric-violet);
189
  }
190
 
191
- .bot-message {
192
- background: rgba(255, 215, 0, 0.1);
193
- border-left: 3px solid var(--glowing-gold);
194
- }
195
-
196
- .chat-input {
197
- background: rgba(15, 15, 26, 0.8);
198
- border: 1px solid var(--electric-violet);
199
- }
200
-
201
- .chat-input:focus {
202
- outline: none;
203
- box-shadow: 0 0 0 2px var(--electric-violet);
204
- }
205
-
206
- .send-btn {
207
- background: var(--electric-violet);
208
- transition: all 0.3s;
209
- }
210
-
211
- .send-btn:hover {
212
- background: var(--neon-pink);
213
- }
214
-
215
- /* Planet box styles */
216
- .planet-box {
217
- border-radius: 8px;
218
- transition: all 0.3s;
219
  }
220
 
221
- .planet-box:hover {
222
- transform: scale(1.05);
223
- box-shadow: 0 0 15px currentColor;
 
 
 
224
  }
225
 
226
- .sun-box { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; }
227
- .moon-box { background: linear-gradient(135deg, #87CEEB, #1E90FF); color: #000; }
228
- .mars-box { background: linear-gradient(135deg, #FF6347, #B22222); color: #fff; }
229
- .mercury-box { background: linear-gradient(135deg, #A9A9A9, #696969); color: #fff; }
230
- .jupiter-box { background: linear-gradient(135deg, #9370DB, #4B0082); color: #fff; }
231
- .venus-box { background: linear-gradient(135deg, #FFB6C1, #FF69B4); color: #000; }
232
- .saturn-box { background: linear-gradient(135deg, #20B2AA, #008080); color: #fff; }
233
- .rahu-box { background: linear-gradient(135deg, #4B0082, #000000); color: #fff; }
234
- .ketu-box { background: linear-gradient(135deg, #9932CC, #4B0082); color: #fff; }
235
-
236
- .typing-indicator::after {
237
- content: '...';
238
- animation: typing 1.5s infinite;
239
  }
240
 
241
- @keyframes typing {
242
- 0% { content: '.'; }
243
- 33% { content: '..'; }
244
- 66% { content: '...'; }
 
245
  }
246
  </style>
247
  </head>
248
- <body class="min-h-screen flex flex-col">
249
- <!-- Header with Logo -->
250
- <header class="py-4 px-6 flex justify-between items-center bg-black bg-opacity-50 border-b border-purple-900">
251
- <div class="flex items-center space-x-3">
252
- <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center sun-pulse">
253
- <div class="w-8 h-8 rounded-full bg-yellow-400"></div>
254
- </div>
255
- <h1 class="text-2xl font-bold glow-text">
256
- <span class="text-purple-400">Siddhar</span>
257
- <span class="text-yellow-400">Astro</span>
258
- <span class="text-pink-400">AI</span>
259
- </h1>
260
- </div>
261
- <div class="flex items-center space-x-4">
262
- <div class="language-toggle flex items-center" id="languageToggle">
263
- <div class="slider">
264
- <span class="text-xs font-bold text-black">EN</span>
265
- </div>
266
  </div>
267
- <button class="px-4 py-2 rounded-full bg-purple-800 hover:bg-purple-700 transition">
268
- <i class="fas fa-user-circle mr-2"></i>Login
269
- </button>
270
- </div>
271
- </header>
272
 
273
- <!-- Main Dashboard -->
274
- <main class="flex-grow flex flex-col md:flex-row p-4 md:p-6 gap-6">
275
- <!-- Left Panel - Input Form -->
276
- <div class="w-full md:w-1/2 bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-border fade-in">
277
- <h2 class="text-xl font-bold mb-6 text-purple-300 flex items-center">
278
- <i class="fas fa-user-astronaut mr-2"></i> Your Cosmic Info
279
- </h2>
280
-
281
- <form id="astroForm" class="space-y-5">
282
- <div>
283
- <label class="block text-sm font-medium text-gray-300 mb-1">Full Name</label>
284
- <input type="text" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field" placeholder="Enter your name">
285
- </div>
286
-
287
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
288
- <div>
289
- <label class="block text-sm font-medium text-gray-300 mb-1">Date of Birth</label>
290
- <input type="date" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field">
291
- </div>
292
- <div>
293
- <label class="block text-sm font-medium text-gray-300 mb-1">Time of Birth</label>
294
- <input type="time" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field">
295
- </div>
296
- </div>
297
-
298
- <div>
299
- <label class="block text-sm font-medium text-gray-300 mb-1">Place of Birth</label>
300
- <input type="text" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field" placeholder="City, Country">
301
- </div>
302
-
303
- <div>
304
- <label class="block text-sm font-medium text-gray-300 mb-1">Today's Mood</label>
305
- <div class="grid grid-cols-4 gap-2 mt-2 mood-selector">
306
- <input type="radio" name="mood" id="mood1" class="hidden" checked>
307
- <label for="mood1" class="flex flex-col items-center p-2 border border-transparent rounded-lg cursor-pointer hover:bg-gray-800">
308
- <span class="text-2xl">🔥</span>
309
- <span class="text-xs mt-1">Hustle</span>
310
- </label>
311
-
312
- <input type="radio" name="mood" id="mood2" class="hidden">
313
- <label for="mood2" class="flex flex-col items-center p-2 border border-transparent rounded-lg cursor-pointer hover:bg-gray-800">
314
- <span class="text-2xl">😌</span>
315
- <span class="text-xs mt-1">Chill</span>
316
- </label>
317
-
318
- <input type="radio" name="mood" id="mood3" class="hidden">
319
- <label for="mood3" class="flex flex-col items-center p-2 border border-transparent rounded-lg cursor-pointer hover:bg-gray-800">
320
- <span class="text-2xl">💕</span>
321
- <span class="text-xs mt-1">Romantic</span>
322
- </label>
323
-
324
- <input type="radio" name="mood" id="mood4" class="hidden">
325
- <label for="mood4" class="flex flex-col items-center p-2 border border-transparent rounded-lg cursor-pointer hover:bg-gray-800">
326
- <span class="text-2xl">🧠</span>
327
- <span class="text-xs mt-1">Focused</span>
328
- </label>
329
- </div>
330
- </div>
331
-
332
- <div>
333
- <label class="block text-sm font-medium text-gray-300 mb-1">Focus Area</label>
334
- <select class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field">
335
- <option value="general">General</option>
336
- <option value="career">Career</option>
337
- <option value="love">Love & Relationships</option>
338
- <option value="health">Health</option>
339
- <option value="finance">Finance</option>
340
- <option value="spiritual">Spiritual Growth</option>
341
- </select>
342
  </div>
343
-
344
- <div>
345
- <label class="block text-sm font-medium text-gray-300 mb-1">Avatar Style</label>
346
- <div class="flex space-x-4 mt-2">
347
- <div class="flex items-center">
348
- <input type="radio" name="avatar" id="siddharAvatar" class="hidden" checked>
349
- <label for="siddharAvatar" class="flex items-center cursor-pointer">
350
- <div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center mr-2">
351
- <i class="fas fa-om text-white"></i>
352
- </div>
353
- <span>Siddhar</span>
354
- </label>
355
- </div>
356
- <div class="flex items-center">
357
- <input type="radio" name="avatar" id="genzAvatar" class="hidden">
358
- <label for="genzAvatar" class="flex items-center cursor-pointer">
359
- <div class="w-10 h-10 rounded-full bg-pink-600 flex items-center justify-center mr-2">
360
- <i class="fas fa-robot text-white"></i>
361
- </div>
362
- <span>Gen Z</span>
363
- </label>
364
- </div>
365
- </div>
366
- </div>
367
-
368
- <div class="pt-4">
369
- <button type="button" id="generateBtn" class="w-full py-3 px-6 rounded-full font-bold generate-btn flex items-center justify-center">
370
- <i class="fas fa-stars mr-2"></i> Generate Horoscope
371
- </button>
372
  </div>
373
- </form>
374
 
375
- <div class="mt-8 pt-6 border-t border-gray-800">
376
- <h3 class="text-sm font-semibold text-purple-300 mb-3">Today's Siddhar Wisdom</h3>
377
- <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 glow-border">
378
- <p class="italic text-gray-300">"அகத்தின் அழகு முகத்தில் தெரியும்; முகத்தின் அழகு கண்ணில் தெரியும்."</p>
379
- <p class="mt-2 text-sm text-gray-400">"Inner beauty reflects on the face; facial beauty reflects in the eyes."</p>
380
  </div>
381
- </div>
382
- </div>
383
-
384
- <!-- Right Panel - Results -->
385
- <div class="w-full md:w-1/2 flex flex-col gap-6">
386
- <!-- Main Results Panel -->
387
- <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-border fade-in" id="resultsPanel" style="display: none;">
388
- <div class="flex justify-between items-center mb-6">
389
- <h2 class="text-xl font-bold text-purple-300 flex items-center">
390
- <i class="fas fa-crystal-ball mr-2"></i> Your Horoscope
391
- </h2>
392
- <div class="flex space-x-2">
393
- <button class="timeline-tab active px-3 py-1 text-sm font-medium">Today</button>
394
- <button class="timeline-tab px-3 py-1 text-sm font-medium text-gray-400 hover:text-white">7 Days</button>
395
- <button class="timeline-tab px-3 py-1 text-sm font-medium text-gray-400 hover:text-white">30 Days</button>
396
- </div>
397
  </div>
398
-
399
- <!-- Daily Prediction -->
400
- <div class="mb-6">
401
- <div class="flex items-center mb-3">
402
- <h3 class="text-lg font-semibold text-yellow-400">Daily Prediction</h3>
403
- <span class="ml-3 px-2 py-1 text-xs rounded-full bg-pink-900 text-pink-200">Taurus</span>
404
- </div>
405
- <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 mb-4 card-glow">
406
- <p class="text-gray-300">Today, the Moon's position in your 5th house enhances creativity and romantic prospects. However, Saturn's aspect suggests being cautious with financial decisions. A good day to start new projects but avoid lending money.</p>
407
- </div>
408
- <div class="flex items-center text-sm text-gray-400">
409
- <i class="fas fa-bolt mr-1 text-yellow-400"></i>
410
- <span>Today's Vibe: <span class="font-medium text-yellow-400">🔥 Hustle with caution</span></span>
411
- </div>
412
  </div>
413
-
414
- <!-- Dos and Don'ts -->
415
- <div class="mb-6">
416
- <h3 class="text-lg font-semibold text-yellow-400 mb-3">Dos & Don'ts</h3>
417
- <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
418
- <div class="dos-card bg-green-900 bg-opacity-40 rounded-lg p-3 flex items-start">
419
- <div class="w-8 h-8 rounded-full bg-green-700 flex items-center justify-center mr-3 flex-shrink-0">
420
- <i class="fas fa-check text-green-200"></i>
421
- </div>
422
- <div>
423
- <h4 class="font-medium text-green-300">Do</h4>
424
- <p class="text-sm text-gray-300">Wear green today for prosperity</p>
425
- </div>
426
- </div>
427
- <div class="dos-card bg-red-900 bg-opacity-40 rounded-lg p-3 flex items-start">
428
- <div class="w-8 h-8 rounded-full bg-red-700 flex items-center justify-center mr-3 flex-shrink-0">
429
- <i class="fas fa-times text-red-200"></i>
430
- </div>
431
- <div>
432
- <h4 class="font-medium text-red-300">Don't</h4>
433
- <p class="text-sm text-gray-300">Avoid important meetings after 3PM</p>
434
- </div>
435
- </div>
436
- <div class="dos-card bg-green-900 bg-opacity-40 rounded-lg p-3 flex items-start">
437
- <div class="w-8 h-8 rounded-full bg-green-700 flex items-center justify-center mr-3 flex-shrink-0">
438
- <i class="fas fa-check text-green-200"></i>
439
- </div>
440
- <div>
441
- <h4 class="font-medium text-green-300">Do</h4>
442
- <p class="text-sm text-gray-300">Meditate during sunrise</p>
443
- </div>
444
- </div>
445
- <div class="dos-card bg-red-900 bg-opacity-40 rounded-lg p-3 flex items-start">
446
- <div class="w-8 h-8 rounded-full bg-red-700 flex items-center justify-center mr-3 flex-shrink-0">
447
- <i class="fas fa-times text-red-200"></i>
448
- </div>
449
- <div>
450
- <h4 class="font-medium text-red-300">Don't</h4>
451
- <p class="text-sm text-gray-300">Postpone travel plans to North</p>
452
- </div>
453
- </div>
454
- </div>
455
  </div>
456
-
457
- <!-- Lucky Elements -->
458
- <div class="mb-6">
459
- <h3 class="text-lg font-semibold text-yellow-400 mb-3">Lucky Elements</h3>
460
- <div class="grid grid-cols-3 gap-4">
461
- <div class="bg-purple-900 bg-opacity-40 rounded-lg p-3 text-center card-glow">
462
- <div class="w-12 h-12 rounded-full bg-purple-700 flex items-center justify-center mx-auto mb-2">
463
- <i class="fas fa-palette text-purple-200"></i>
464
- </div>
465
- <h4 class="font-medium text-purple-300">Color</h4>
466
- <p class="text-sm text-gray-300">Emerald Green</p>
467
- </div>
468
- <div class="bg-blue-900 bg-opacity-40 rounded-lg p-3 text-center card-glow">
469
- <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center mx-auto mb-2">
470
- <i class="fas fa-clock text-blue-200"></i>
471
- </div>
472
- <h4 class="font-medium text-blue-300">Time</h4>
473
- <p class="text-sm text-gray-300">9:30 AM - 11:00 AM</p>
474
- </div>
475
- <div class="bg-yellow-900 bg-opacity-40 rounded-lg p-3 text-center card-glow">
476
- <div class="w-12 h-12 rounded-full bg-yellow-700 flex items-center justify-center mx-auto mb-2">
477
- <i class="fas fa-hashtag text-yellow-200"></i>
478
- </div>
479
- <h4 class="font-medium text-yellow-300">Number</h4>
480
- <p class="text-sm text-gray-300">7</p>
481
- </div>
482
- </div>
483
  </div>
484
-
485
- <!-- Planet Positions -->
486
  <div class="mb-6">
487
- <h3 class="text-lg font-semibold text-yellow-400 mb-3">Planet Positions</h3>
488
- <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
489
- <div class="planet-box sun-box p-3 flex flex-col items-center">
490
- <div class="w-10 h-10 rounded-full bg-yellow-300 flex items-center justify-center mb-2">
491
- <i class="fas fa-sun text-yellow-800"></i>
492
- </div>
493
- <h4 class="font-bold">Sun</h4>
494
- <p class="text-xs text-center">10th House</p>
495
- </div>
496
- <div class="planet-box moon-box p-3 flex flex-col items-center">
497
- <div class="w-10 h-10 rounded-full bg-blue-300 flex items-center justify-center mb-2">
498
- <i class="fas fa-moon text-blue-800"></i>
499
- </div>
500
- <h4 class="font-bold">Moon</h4>
501
- <p class="text-xs text-center">5th House</p>
502
- </div>
503
- <div class="planet-box mars-box p-3 flex flex-col items-center">
504
- <div class="w-10 h-10 rounded-full bg-red-400 flex items-center justify-center mb-2">
505
- <i class="fas fa-fire text-white"></i>
506
- </div>
507
- <h4 class="font-bold">Mars</h4>
508
- <p class="text-xs text-center">6th House</p>
509
- </div>
510
- <div class="planet-box mercury-box p-3 flex flex-col items-center">
511
- <div class="w-10 h-10 rounded-full bg-gray-400 flex items-center justify-center mb-2">
512
- <i class="fas fa-comment text-gray-800"></i>
513
- </div>
514
- <h4 class="font-bold">Mercury</h4>
515
- <p class="text-xs text-center">9th House</p>
516
- </div>
517
- <div class="planet-box jupiter-box p-3 flex flex-col items-center">
518
- <div class="w-10 h-10 rounded-full bg-purple-400 flex items-center justify-center mb-2">
519
- <i class="fas fa-crown text-white"></i>
520
- </div>
521
- <h4 class="font-bold">Jupiter</h4>
522
- <p class="text-xs text-center">Retrograde</p>
523
- </div>
524
- <div class="planet-box venus-box p-3 flex flex-col items-center">
525
- <div class="w-10 h-10 rounded-full bg-pink-300 flex items-center justify-center mb-2">
526
- <i class="fas fa-heart text-pink-800"></i>
527
- </div>
528
- <h4 class="font-bold">Venus</h4>
529
- <p class="text-xs text-center">Trine</p>
530
- </div>
531
- <div class="planet-box saturn-box p-3 flex flex-col items-center">
532
- <div class="w-10 h-10 rounded-full bg-teal-400 flex items-center justify-center mb-2">
533
- <i class="fas fa-ring text-white"></i>
534
- </div>
535
- <h4 class="font-bold">Saturn</h4>
536
- <p class="text-xs text-center">Aspect</p>
537
- </div>
538
- <div class="planet-box rahu-box p-3 flex flex-col items-center">
539
- <div class="w-10 h-10 rounded-full bg-indigo-800 flex items-center justify-center mb-2">
540
- <i class="fas fa-dragon text-white"></i>
541
- </div>
542
- <h4 class="font-bold">Rahu</h4>
543
- <p class="text-xs text-center">12th House</p>
544
- </div>
545
- <div class="planet-box ketu-box p-3 flex flex-col items-center">
546
- <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mb-2">
547
- <i class="fas fa-skull text-white"></i>
548
- </div>
549
- <h4 class="font-bold">Ketu</h4>
550
- <p class="text-xs text-center">6th House</p>
551
- </div>
552
- </div>
553
  </div>
554
 
555
- <!-- AI Avatar Tip -->
556
- <div class="bg-gray-800 bg-opacity-70 rounded-xl p-4 glow-border">
557
- <div class="flex items-start">
558
- <div class="avatar-container mr-4">
559
- <div class="avatar w-16 h-16 rounded-full bg-gradient-to-br from-yellow-600 to-purple-600 flex items-center justify-center">
560
- <i class="fas fa-om text-2xl text-white"></i>
561
- </div>
562
- </div>
563
- <div class="flex-grow">
564
- <div class="flex items-center mb-1">
565
- <h4 class="font-bold text-yellow-400">Siddhar AI Tip</h4>
566
- <span class="ml-2 text-xs px-2 py-1 rounded-full bg-yellow-900 text-yellow-200">Today's Guidance</span>
567
- </div>
568
- <p class="text-gray-300">"Don't let Mars in 6th House mess up your focus today. The planetary alignment suggests completing pending tasks first before starting new ventures. Practice the 'So Hum' meditation for 11 minutes to enhance concentration."</p>
569
- <div class="mt-3 flex justify-end">
570
- <button class="text-xs px-3 py-1 rounded-full bg-purple-800 hover:bg-purple-700 flex items-center">
571
- <i class="fas fa-volume-up mr-1"></i> Listen
572
- </button>
573
- </div>
574
- </div>
575
- </div>
576
- </div>
577
  </div>
578
 
579
- <!-- Chatbot Panel -->
580
- <div class="bg-gray-900 bg-opacity-70 rounded-xl p-4 glow-border fade-in" id="chatPanel">
581
- <div class="flex items-center justify-between mb-4">
582
- <h2 class="text-lg font-bold text-purple-300 flex items-center">
583
- <i class="fas fa-robot mr-2"></i> Ask Siddhar AI
584
- </h2>
585
- <div class="flex items-center space-x-2">
586
- <span class="text-xs px-2 py-1 rounded-full bg-green-900 text-green-300 flex items-center">
587
- <span class="w-2 h-2 rounded-full bg-green-400 mr-1"></span>
588
- Online
589
- </span>
590
- </div>
591
- </div>
592
-
593
- <div class="chat-container mb-4 p-3 rounded-lg bg-gray-800 bg-opacity-50 h-64" id="chatMessages">
594
- <div class="bot-message rounded-lg p-3 mb-3">
595
- <div class="flex items-start">
596
- <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3 flex-shrink-0">
597
- <i class="fas fa-om text-white"></i>
598
- </div>
599
- <div>
600
- <p class="text-gray-300">Namaste! I'm Siddhar AI, your cosmic guide. Ask me anything about your horoscope, planetary positions, or spiritual guidance. How can I help you today?</p>
601
- </div>
602
- </div>
603
- </div>
604
- </div>
605
-
606
- <div class="flex items-center">
607
- <input type="text" class="chat-input flex-grow px-4 py-3 rounded-l-lg bg-gray-800 text-white" placeholder="Ask your question..." id="chatInput">
608
- <button class="send-btn px-4 py-3 rounded-r-lg text-white" id="sendBtn">
609
- <i class="fas fa-paper-plane"></i>
610
  </button>
611
  </div>
612
  </div>
613
  </div>
614
- </main>
615
 
616
- <!-- Footer -->
617
- <footer class="py-4 px-6 bg-black bg-opacity-50 border-t border-purple-900 text-center text-sm text-gray-400">
618
- <div class="flex justify-center space-x-6 mb-3">
619
- <a href="#" class="hover:text-purple-300"><i class="fab fa-instagram"></i></a>
620
- <a href="#" class="hover:text-blue-300"><i class="fab fa-twitter"></i></a>
621
- <a href="#" class="hover:text-red-300"><i class="fab fa-youtube"></i></a>
622
- <a href="#" class="hover:text-green-300"><i class="fab fa-whatsapp"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
623
  </div>
624
- <p>© 2023 Siddhar Astro AI Platform. All cosmic wisdom reserved.</p>
625
- <p class="mt-1">Consult your intuition before making important decisions.</p>
626
- </footer>
 
 
 
 
 
 
 
 
627
 
628
  <script>
629
- // Language Toggle
630
- const languageToggle = document.getElementById('languageToggle');
631
- languageToggle.addEventListener('click', function() {
632
- this.classList.toggle('active');
633
- const isTamil = this.classList.contains('active');
634
- const slider = this.querySelector('.slider');
635
 
636
- if (isTamil) {
637
- slider.innerHTML = '<span class="text-xs font-bold text-black tamil-font">தமிழ்</span>';
638
- // Here you would add code to translate the UI to Tamil
639
- } else {
640
- slider.innerHTML = '<span class="text-xs font-bold text-black">EN</span>';
641
- // Here you would add code to translate the UI to English
642
- }
643
- });
644
-
645
- // Timeline Tabs
646
- const timelineTabs = document.querySelectorAll('.timeline-tab');
647
- timelineTabs.forEach(tab => {
648
- tab.addEventListener('click', function() {
649
- timelineTabs.forEach(t => t.classList.remove('active', 'text-white'));
650
- timelineTabs.forEach(t => t.classList.add('text-gray-400'));
651
- this.classList.add('active', 'text-white');
652
- this.classList.remove('text-gray-400');
653
-
654
- // Here you would add code to load the appropriate timeline data
655
- });
656
- });
657
-
658
- // Generate Horoscope Button
659
- const generateBtn = document.getElementById('generateBtn');
660
- const resultsPanel = document.getElementById('resultsPanel');
661
-
662
- generateBtn.addEventListener('click', function() {
663
- // Show loading animation
664
- this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Calculating Stars...';
665
 
666
- // Simulate API call with timeout
667
- setTimeout(() => {
668
- // Show results panel
669
- resultsPanel.style.display = 'block';
670
-
671
- // Reset button
672
- this.innerHTML = '<i class="fas fa-stars mr-2"></i> Generate Horoscope';
673
 
674
- // Scroll to results
675
- resultsPanel.scrollIntoView({ behavior: 'smooth' });
 
 
 
 
 
676
 
677
- // Add animation to cards
678
- const cards = document.querySelectorAll('.dos-card, .card-glow');
679
- cards.forEach((card, index) => {
680
- setTimeout(() => {
681
- card.classList.add('animate__animated', 'animate__fadeInUp');
682
- }, index * 100);
683
- });
684
- }, 2000);
685
- });
686
-
687
- // Mood Selector
688
- const moodInputs = document.querySelectorAll('.mood-selector input[type="radio"]');
689
- moodInputs.forEach(input => {
690
- input.addEventListener('change', function() {
691
- const allLabels = document.querySelectorAll('.mood-selector label');
692
- allLabels.forEach(label => label.classList.remove('border-yellow-500'));
693
-
694
- const selectedLabel = document.querySelector(`.mood-selector label[for="${this.id}"]`);
695
- selectedLabel.classList.add('border-yellow-500');
696
- });
697
- });
698
-
699
- // On load, select first mood by default
700
- document.querySelector('.mood-selector input[type="radio"]').checked = true;
701
- document.querySelector('.mood-selector label').classList.add('border-yellow-500');
702
-
703
- // Chatbot functionality
704
- const chatMessages = document.getElementById('chatMessages');
705
- const chatInput = document.getElementById('chatInput');
706
- const sendBtn = document.getElementById('sendBtn');
707
-
708
- // Sample responses from the AI
709
- const aiResponses = [
710
- "Based on your planetary positions, today is favorable for starting new creative projects.",
711
- "Mars in your 6th house suggests focusing on health and routine today.",
712
- "The Moon's position indicates emotional sensitivity - practice grounding techniques.",
713
- "Your lucky number for today is 7, and wearing green will enhance prosperity.",
714
- "Saturn's aspect suggests patience in financial matters - avoid impulsive decisions.",
715
- "Meditation during sunrise will align you with today's cosmic energies."
716
- ];
717
-
718
- // Sample Siddhar quotes in Tamil with translations
719
- const siddharQuotes = [
720
- { tamil: "உள்ளத்தில் அமைதி இருந்தால், உலகம் அழகாகத் தெரியும்.", english: "If there is peace within, the world appears beautiful." },
721
- { tamil: "மனதை கட்டுப்படுத்துபவன் உலகை கட்டுப்படுத்துகிறான்.", english: "One who controls the mind controls the world." },
722
- { tamil: "அறிவு என்பது அனுபவத்தில் மிளிர்வது.", english: "Wisdom shines through experience." },
723
- { tamil: "இறைவனை அடைய எளிய வழி மன அமைதி.", english: "The simple path to divinity is peace of mind." }
724
- ];
725
-
726
- function addBotMessage(message) {
727
- const messageDiv = document.createElement('div');
728
- messageDiv.className = 'bot-message rounded-lg p-3 mb-3';
729
- messageDiv.innerHTML = `
730
- <div class="flex items-start">
731
- <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3 flex-shrink-0">
732
- <i class="fas fa-om text-white"></i>
733
- </div>
734
- <div>
735
- <p class="text-gray-300">${message}</p>
736
- </div>
737
- </div>
738
- `;
739
- chatMessages.appendChild(messageDiv);
740
- chatMessages.scrollTop = chatMessages.scrollHeight;
741
- }
742
-
743
- function addUserMessage(message) {
744
- const messageDiv = document.createElement('div');
745
- messageDiv.className = 'user-message rounded-lg p-3 mb-3';
746
- messageDiv.innerHTML = `
747
- <div class="flex items-start">
748
- <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center mr-3 flex-shrink-0">
749
- <i class="fas fa-user text-white"></i>
750
- </div>
751
- <div>
752
- <p class="text-gray-300">${message}</p>
753
- </div>
754
- </div>
755
- `;
756
- chatMessages.appendChild(messageDiv);
757
- chatMessages.scrollTop = chatMessages.scrollHeight;
758
- }
759
-
760
- function getAIResponse(userMessage) {
761
- // Simple response logic - in a real app, this would call an LLM API
762
- const lowerMessage = userMessage.toLowerCase();
763
 
764
- if (lowerMessage.includes('today') || lowerMessage.includes('horoscope')) {
765
- return aiResponses[0];
766
- } else if (lowerMessage.includes('mars') || lowerMessage.includes('6th house')) {
767
- return aiResponses[1];
768
- } else if (lowerMessage.includes('moon') || lowerMessage.includes('emotional')) {
769
- return aiResponses[2];
770
- } else if (lowerMessage.includes('lucky') || lowerMessage.includes('color')) {
771
- return aiResponses[3];
772
- } else if (lowerMessage.includes('saturn') || lowerMessage.includes('finance')) {
773
- return aiResponses[4];
774
- } else if (lowerMessage.includes('meditation') || lowerMessage.includes('sunrise')) {
775
- return aiResponses[5];
776
- } else if (lowerMessage.includes('quote') || lowerMessage.includes('wisdom')) {
777
- const quote = siddharQuotes[Math.floor(Math.random() * siddharQuotes.length)];
778
- return `${quote.tamil}<br><em class="text-sm text-gray-400">${quote.english}</em>`;
779
- } else {
780
- return "Interesting question! Based on your chart, I recommend focusing on inner peace today. The planets suggest this is a good time for reflection.";
 
 
 
 
781
  }
782
- }
783
-
784
- sendBtn.addEventListener('click', function() {
785
- const message = chatInput.value.trim();
786
- if (message) {
787
- addUserMessage(message);
788
- chatInput.value = '';
789
 
790
- // Show typing indicator
791
- const typingDiv = document.createElement('div');
792
- typingDiv.className = 'bot-message rounded-lg p-3 mb-3';
793
- typingDiv.innerHTML = `
794
- <div class="flex items-start">
795
- <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center mr-3 flex-shrink-0">
796
- <i class="fas fa-om text-white"></i>
797
- </div>
798
- <div>
799
- <p class="text-gray-300 typing-indicator">Siddhar AI is typing</p>
800
- </div>
801
- </div>
802
- `;
803
- chatMessages.appendChild(typingDiv);
804
- chatMessages.scrollTop = chatMessages.scrollHeight;
805
 
806
- // Simulate AI thinking time
807
- setTimeout(() => {
808
- // Remove typing indicator
809
- chatMessages.removeChild(typingDiv);
810
-
811
- // Add AI response
812
- const response = getAIResponse(message);
813
- addBotMessage(response);
814
- }, 1500);
815
  }
816
- });
817
-
818
- chatInput.addEventListener('keypress', function(e) {
819
- if (e.key === 'Enter') {
820
- sendBtn.click();
 
 
 
 
 
 
 
821
  }
 
 
 
 
 
 
 
 
822
  });
823
  </script>
824
  <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=karhar92/astrology4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Vibecode | Onchain Replit with Vibes</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
 
9
  <style>
 
 
10
  :root {
11
+ --bg-dark: #0a0e14;
12
+ --neon-green: #00ff99;
13
+ --neon-cyan: #66fff9;
14
+ --neon-purple: #ab7cf9;
 
15
  }
16
 
17
  body {
18
+ background-color: var(--bg-dark);
 
19
  color: white;
20
+ font-family: 'IBM Plex Mono', monospace;
21
  overflow-x: hidden;
22
  }
23
 
24
+ .pixel-font {
25
+ font-family: 'Press Start 2P', cursive;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  }
27
 
28
+ .terminal-font {
29
+ font-family: 'VT323', monospace;
 
 
30
  }
31
 
32
+ .neon-green {
33
+ color: var(--neon-green);
34
+ text-shadow: 0 0 5px var(--neon-green);
35
  }
36
 
37
+ .neon-cyan {
38
+ color: var(--neon-cyan);
39
+ text-shadow: 0 0 5px var(--neon-cyan);
 
40
  }
41
 
42
+ .neon-purple {
43
+ color: var(--neon-purple);
44
+ text-shadow: 0 0 5px var(--neon-purple);
45
  }
46
 
47
+ .neon-glow {
48
+ box-shadow: 0 0 10px var(--neon-green), 0 0 20px var(--neon-purple);
 
49
  }
50
 
51
+ .scanlines {
 
 
 
 
 
 
 
 
 
52
  position: relative;
53
+ overflow: hidden;
 
 
 
 
54
  }
55
 
56
+ .scanlines:before {
57
+ content: "";
58
  position: absolute;
59
+ top: 0;
60
+ left: 0;
61
+ right: 0;
62
+ bottom: 0;
63
+ background: linear-gradient(
64
+ to bottom,
65
+ transparent 0%,
66
+ rgba(255, 255, 255, 0.05) 50%,
67
+ transparent 100%
68
+ );
69
+ background-size: 100% 4px;
70
+ pointer-events: none;
71
+ z-index: 10;
72
+ }
73
+
74
+ .glitch {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  position: relative;
76
  }
77
 
78
+ .glitch::before, .glitch::after {
79
+ content: attr(data-text);
80
  position: absolute;
81
+ top: 0;
82
  left: 0;
83
  width: 100%;
84
+ height: 100%;
85
+ background: var(--bg-dark);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  }
87
 
88
+ .glitch::before {
89
+ left: 2px;
90
+ text-shadow: -2px 0 var(--neon-purple);
91
+ clip: rect(44px, 450px, 56px, 0);
92
+ animation: glitch-anim 5s infinite linear alternate-reverse;
93
  }
94
 
95
+ .glitch::after {
96
+ left: -2px;
97
+ text-shadow: -2px 0 var(--neon-cyan);
98
+ clip: rect(44px, 450px, 56px, 0);
99
+ animation: glitch-anim2 5s infinite linear alternate-reverse;
 
100
  }
101
 
102
+ @keyframes glitch-anim {
103
+ 0% { clip: rect(31px, 9999px, 94px, 0); }
104
+ 10% { clip: rect(112px, 9999px, 76px, 0); }
105
+ 20% { clip: rect(85px, 9999px, 77px, 0); }
106
+ 30% { clip: rect(27px, 9999px, 97px, 0); }
107
+ 40% { clip: rect(64px, 9999px, 98px, 0); }
108
+ 50% { clip: rect(61px, 9999px, 85px, 0); }
109
+ 60% { clip: rect(99px, 9999px, 114px, 0); }
110
+ 70% { clip: rect(34px, 9999px, 115px, 0); }
111
+ 80% { clip: rect(98px, 9999px, 129px, 0); }
112
+ 90% { clip: rect(43px, 9999px, 96px, 0); }
113
+ 100% { clip: rect(82px, 9999px, 64px, 0); }
114
  }
115
 
116
+ @keyframes glitch-anim2 {
117
+ 0% { clip: rect(65px, 9999px, 119px, 0); }
118
+ 10% { clip: rect(144px, 9999px, 41px, 0); }
119
+ 20% { clip: rect(6px, 9999px, 187px, 0); }
120
+ 30% { clip: rect(133px, 9999px, 50px, 0); }
121
+ 40% { clip: rect(115px, 9999px, 23px, 0); }
122
+ 50% { clip: rect(187px, 9999px, 169px, 0); }
123
+ 60% { clip: rect(40px, 9999px, 128px, 0); }
124
+ 70% { clip: rect(45px, 9999px, 7px, 0); }
125
+ 80% { clip: rect(24px, 9999px, 162px, 0); }
126
+ 90% { clip: rect(138px, 9999px, 180px, 0); }
127
+ 100% { clip: rect(6px, 9999px, 103px, 0); }
128
  }
129
 
130
+ .typing {
131
+ border-right: 2px solid var(--neon-green);
132
+ animation: blink 0.75s step-end infinite;
133
  }
134
 
135
+ @keyframes blink {
136
+ from, to { border-color: transparent; }
137
+ 50% { border-color: var(--neon-green); }
138
  }
139
 
140
+ .pixel-corners {
141
+ position: relative;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  }
143
 
144
+ .pixel-corners::before, .pixel-corners::after {
145
+ content: '';
146
+ position: absolute;
147
+ width: 10px;
148
+ height: 10px;
149
+ border: 2px solid var(--neon-green);
150
  }
151
 
152
+ .pixel-corners::before {
153
+ top: -5px;
154
+ left: -5px;
155
+ border-right: none;
156
+ border-bottom: none;
 
 
 
 
 
 
 
 
157
  }
158
 
159
+ .pixel-corners::after {
160
+ bottom: -5px;
161
+ right: -5px;
162
+ border-left: none;
163
+ border-top: none;
164
  }
165
  </style>
166
  </head>
167
+ <body class="scanlines min-h-screen">
168
+ <div class="container mx-auto px-4 py-8">
169
+ <!-- Header -->
170
+ <header class="flex flex-col items-center mb-12">
171
+ <h1 class="glitch text-5xl md:text-6xl mb-4 pixel-font neon-green" data-text="VIBECODE">VIBECODE</h1>
172
+ <p class="terminal-font text-xl neon-cyan mb-6">Onchain Replit with Vibes</p>
173
+ <div class="flex space-x-4">
174
+ <button class="terminal-font px-6 py-2 bg-transparent border-2 border-neon-green neon-green hover:bg-green-900/20 transition-all">
175
+ DOCS
176
+ </button>
177
+ <button class="terminal-font px-6 py-2 bg-neon-green text-black hover:bg-green-300 transition-all">
178
+ LAUNCH APP
179
+ </button>
 
 
 
 
 
180
  </div>
181
+ </header>
 
 
 
 
182
 
183
+ <!-- Main Terminal -->
184
+ <div class="max-w-4xl mx-auto bg-black/70 border-2 border-neon-green rounded-lg overflow-hidden neon-glow">
185
+ <!-- Terminal Header -->
186
+ <div class="bg-gray-900 px-4 py-2 flex items-center">
187
+ <div class="flex space-x-2 mr-4">
188
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
189
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
190
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191
  </div>
192
+ <div class="terminal-font text-sm neon-green flex-1 text-center">
193
+ vibecode-terminal ~/launch-onchain-app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  </div>
195
+ </div>
196
 
197
+ <!-- Terminal Content -->
198
+ <div class="p-4 h-96 overflow-y-auto terminal-font text-green-200">
199
+ <div class="mb-4">
200
+ <span class="neon-purple">user@vibecode:~$</span> <span class="neon-green">welcome to Vibecode</span>
 
201
  </div>
202
+ <div class="mb-4">
203
+ <span class="neon-purple">user@vibecode:~$</span> <span class="neon-green">type your onchain creation prompt below</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
204
  </div>
205
+ <div class="mb-4">
206
+ <span class="neon-purple">user@vibecode:~$</span> <span class="neon-cyan">examples:</span>
 
 
 
 
 
 
 
 
 
 
 
 
207
  </div>
208
+ <div class="mb-2 ml-8 text-gray-400">
209
+ > "Launch $VIBE token with 1% burn and 10% LP on Base"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
210
  </div>
211
+ <div class="mb-2 ml-8 text-gray-400">
212
+ > "Deploy an NFT mint for 777 images, free mint, 10% royalty"
213
+ </div>
214
+ <div class="mb-2 ml-8 text-gray-400">
215
+ > "Create a DAO with 30 day vesting and 5% treasury fee"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  </div>
 
 
217
  <div class="mb-6">
218
+ <span class="neon-purple">user@vibecode:~$</span> <span class="typing"></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
219
  </div>
220
 
221
+ <!-- Chat messages will appear here -->
222
+ <div id="chat-messages" class="space-y-4"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  </div>
224
 
225
+ <!-- Input Area -->
226
+ <div class="border-t border-neon-green/50 p-4 bg-gray-900/50">
227
+ <div class="flex">
228
+ <span class="terminal-font text-lg neon-purple mr-2">></span>
229
+ <input
230
+ type="text"
231
+ id="user-input"
232
+ class="terminal-font flex-1 bg-transparent border-none outline-none text-green-200 caret-green-500"
233
+ placeholder="Type your onchain creation prompt..."
234
+ autofocus
235
+ >
236
+ <button id="send-btn" class="terminal-font px-4 py-1 bg-neon-green text-black hover:bg-green-300 transition-all">
237
+ SEND
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
238
  </button>
239
  </div>
240
  </div>
241
  </div>
 
242
 
243
+ <!-- Features Grid -->
244
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
245
+ <!-- Feature 1 -->
246
+ <div class="bg-gray-900/50 border border-neon-green/30 rounded-lg p-6 relative pixel-corners hover:neon-glow transition-all">
247
+ <div class="text-4xl neon-green mb-4">1</div>
248
+ <h3 class="terminal-font text-xl neon-cyan mb-3">Chat Interface</h3>
249
+ <p class="text-gray-300">
250
+ Natural language prompts to create tokens, NFTs, DAOs, and more. No coding required.
251
+ </p>
252
+ </div>
253
+
254
+ <!-- Feature 2 -->
255
+ <div class="bg-gray-900/50 border border-neon-green/30 rounded-lg p-6 relative pixel-corners hover:neon-glow transition-all">
256
+ <div class="text-4xl neon-green mb-4">2</div>
257
+ <h3 class="terminal-font text-xl neon-cyan mb-3">Auto Contracts</h3>
258
+ <p class="text-gray-300">
259
+ ERC20, ERC721, vesting, and LP contracts generated from your prompts.
260
+ </p>
261
+ </div>
262
+
263
+ <!-- Feature 3 -->
264
+ <div class="bg-gray-900/50 border border-neon-green/30 rounded-lg p-6 relative pixel-corners hover:neon-glow transition-all">
265
+ <div class="text-4xl neon-green mb-4">3</div>
266
+ <h3 class="terminal-font text-xl neon-cyan mb-3">Deploy Anywhere</h3>
267
+ <p class="text-gray-300">
268
+ Testnet for free, mainnet when ready. Base, Polygon, Zora, and Solana supported.
269
+ </p>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- CTA Section -->
274
+ <div class="mt-20 text-center">
275
+ <h2 class="terminal-font text-3xl neon-green mb-6">Ready to launch your onchain app?</h2>
276
+ <button class="terminal-font px-8 py-3 bg-neon-green text-black text-lg hover:bg-green-300 transition-all">
277
+ START BUILDING NOW
278
+ </button>
279
  </div>
280
+
281
+ <!-- Footer -->
282
+ <footer class="mt-20 pt-8 border-t border-neon-green/20 text-center text-gray-400 terminal-font">
283
+ <div class="mb-4">
284
+ <a href="#" class="mx-2 hover:text-neon-green transition-all">Twitter</a>
285
+ <a href="#" class="mx-2 hover:text-neon-green transition-all">Discord</a>
286
+ <a href="#" class="mx-2 hover:text-neon-green transition-all">GitHub</a>
287
+ </div>
288
+ <p>Vibecode © 2023 | Onchain Replit with Vibes</p>
289
+ </footer>
290
+ </div>
291
 
292
  <script>
293
+ document.addEventListener('DOMContentLoaded', function() {
294
+ const userInput = document.getElementById('user-input');
295
+ const sendBtn = document.getElementById('send-btn');
296
+ const chatMessages = document.getElementById('chat-messages');
 
 
297
 
298
+ // Typing animation for the terminal prompt
299
+ const typingElement = document.querySelector('.typing');
300
+ const messages = [
301
+ "Launch $VIBE token with 1% burn...",
302
+ "Create NFT collection...",
303
+ "Deploy DAO with vesting...",
304
+ "Build onchain app..."
305
+ ];
306
+ let messageIndex = 0;
307
+ let charIndex = 0;
308
+ let isDeleting = false;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
309
 
310
+ function type() {
311
+ const currentMessage = messages[messageIndex];
 
 
 
 
 
312
 
313
+ if (isDeleting) {
314
+ typingElement.textContent = currentMessage.substring(0, charIndex - 1);
315
+ charIndex--;
316
+ } else {
317
+ typingElement.textContent = currentMessage.substring(0, charIndex + 1);
318
+ charIndex++;
319
+ }
320
 
321
+ if (!isDeleting && charIndex === currentMessage.length) {
322
+ isDeleting = true;
323
+ setTimeout(type, 2000);
324
+ } else if (isDeleting && charIndex === 0) {
325
+ isDeleting = false;
326
+ messageIndex = (messageIndex + 1) % messages.length;
327
+ setTimeout(type, 500);
328
+ } else {
329
+ const speed = isDeleting ? 50 : 100;
330
+ setTimeout(type, speed);
331
+ }
332
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
333
 
334
+ setTimeout(type, 1000);
335
+
336
+ // Handle user input
337
+ function sendMessage() {
338
+ const message = userInput.value.trim();
339
+ if (message) {
340
+ // Add user message
341
+ addMessage(message, 'user');
342
+
343
+ // Simulate AI response
344
+ setTimeout(() => {
345
+ const response = generateAIResponse(message);
346
+ addMessage(response, 'ai');
347
+
348
+ // Scroll to bottom
349
+ chatMessages.scrollTop = chatMessages.scrollHeight;
350
+ }, 1000);
351
+
352
+ // Clear input
353
+ userInput.value = '';
354
+ }
355
  }
356
+
357
+ function addMessage(text, sender) {
358
+ const messageDiv = document.createElement('div');
359
+ messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
 
 
 
360
 
361
+ const bubble = document.createElement('div');
362
+ bubble.className = `terminal-font max-w-3/4 rounded px-4 py-2 ${
363
+ sender === 'user'
364
+ ? 'bg-neon-green/10 border border-neon-green/30 text-neon-green'
365
+ : 'bg-gray-800/50 border border-neon-purple/30 text-gray-300'
366
+ }`;
367
+ bubble.textContent = text;
 
 
 
 
 
 
 
 
368
 
369
+ messageDiv.appendChild(bubble);
370
+ chatMessages.appendChild(messageDiv);
371
+
372
+ // Scroll to bottom
373
+ chatMessages.scrollTop = chatMessages.scrollHeight;
 
 
 
 
374
  }
375
+
376
+ function generateAIResponse(message) {
377
+ // Simple response logic - in a real app this would call an API
378
+ const responses = [
379
+ `Processing your request: "${message}"...`,
380
+ `Generating smart contract for: ${message}`,
381
+ `Compiling deployment package for: ${message}`,
382
+ `Setting up Uniswap LP for: ${message}`,
383
+ `Deploying frontend UI for: ${message}`
384
+ ];
385
+
386
+ return responses[Math.floor(Math.random() * responses.length)];
387
  }
388
+
389
+ // Event listeners
390
+ sendBtn.addEventListener('click', sendMessage);
391
+ userInput.addEventListener('keypress', function(e) {
392
+ if (e.key === 'Enter') {
393
+ sendMessage();
394
+ }
395
+ });
396
  });
397
  </script>
398
  <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=karhar92/astrology4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>