Spaces:
Running
Running
Add 1 files
Browse files- index.html +396 -168
index.html
CHANGED
|
@@ -106,28 +106,6 @@
|
|
| 106 |
transform: translateX(45px);
|
| 107 |
}
|
| 108 |
|
| 109 |
-
.navagraha-chart {
|
| 110 |
-
position: relative;
|
| 111 |
-
width: 250px;
|
| 112 |
-
height: 250px;
|
| 113 |
-
}
|
| 114 |
-
|
| 115 |
-
.planet-orbit {
|
| 116 |
-
position: absolute;
|
| 117 |
-
border: 1px dashed rgba(255, 255, 255, 0.2);
|
| 118 |
-
border-radius: 50%;
|
| 119 |
-
}
|
| 120 |
-
|
| 121 |
-
.planet-position {
|
| 122 |
-
position: absolute;
|
| 123 |
-
width: 20px;
|
| 124 |
-
height: 20px;
|
| 125 |
-
border-radius: 50%;
|
| 126 |
-
display: flex;
|
| 127 |
-
align-items: center;
|
| 128 |
-
justify-content: center;
|
| 129 |
-
}
|
| 130 |
-
|
| 131 |
.avatar-container {
|
| 132 |
perspective: 1000px;
|
| 133 |
}
|
|
@@ -183,6 +161,88 @@
|
|
| 183 |
border-color: var(--glowing-gold);
|
| 184 |
box-shadow: 0 0 10px var(--glowing-gold);
|
| 185 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 186 |
</style>
|
| 187 |
</head>
|
| 188 |
<body class="min-h-screen flex flex-col">
|
|
@@ -322,186 +382,233 @@
|
|
| 322 |
</div>
|
| 323 |
|
| 324 |
<!-- Right Panel - Results -->
|
| 325 |
-
<div class="w-full md:w-1/2
|
| 326 |
-
|
| 327 |
-
|
| 328 |
-
|
| 329 |
-
|
| 330 |
-
|
| 331 |
-
|
| 332 |
-
<
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
|
| 336 |
-
|
| 337 |
-
<!-- Daily Prediction -->
|
| 338 |
-
<div class="mb-6">
|
| 339 |
-
<div class="flex items-center mb-3">
|
| 340 |
-
<h3 class="text-lg font-semibold text-yellow-400">Daily Prediction</h3>
|
| 341 |
-
<span class="ml-3 px-2 py-1 text-xs rounded-full bg-pink-900 text-pink-200">Taurus</span>
|
| 342 |
-
</div>
|
| 343 |
-
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 mb-4 card-glow">
|
| 344 |
-
<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>
|
| 345 |
-
</div>
|
| 346 |
-
<div class="flex items-center text-sm text-gray-400">
|
| 347 |
-
<i class="fas fa-bolt mr-1 text-yellow-400"></i>
|
| 348 |
-
<span>Today's Vibe: <span class="font-medium text-yellow-400">🔥 Hustle with caution</span></span>
|
| 349 |
</div>
|
| 350 |
-
|
| 351 |
-
|
| 352 |
-
|
| 353 |
-
|
| 354 |
-
|
| 355 |
-
|
| 356 |
-
<div class="dos-card bg-green-900 bg-opacity-40 rounded-lg p-3 flex items-start">
|
| 357 |
-
<div class="w-8 h-8 rounded-full bg-green-700 flex items-center justify-center mr-3 flex-shrink-0">
|
| 358 |
-
<i class="fas fa-check text-green-200"></i>
|
| 359 |
-
</div>
|
| 360 |
-
<div>
|
| 361 |
-
<h4 class="font-medium text-green-300">Do</h4>
|
| 362 |
-
<p class="text-sm text-gray-300">Wear green today for prosperity</p>
|
| 363 |
-
</div>
|
| 364 |
</div>
|
| 365 |
-
<div class="
|
| 366 |
-
<
|
| 367 |
-
|
| 368 |
-
|
| 369 |
-
<
|
| 370 |
-
|
| 371 |
-
<p class="text-sm text-gray-300">Avoid important meetings after 3PM</p>
|
| 372 |
-
</div>
|
| 373 |
</div>
|
| 374 |
-
|
| 375 |
-
|
| 376 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 377 |
</div>
|
| 378 |
-
<div>
|
| 379 |
-
<
|
| 380 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 381 |
</div>
|
| 382 |
-
|
| 383 |
-
|
| 384 |
-
|
| 385 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 386 |
</div>
|
| 387 |
-
<div>
|
| 388 |
-
<
|
| 389 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 390 |
</div>
|
| 391 |
</div>
|
| 392 |
</div>
|
| 393 |
-
|
| 394 |
-
|
| 395 |
-
|
| 396 |
-
|
| 397 |
-
|
| 398 |
-
|
| 399 |
-
|
| 400 |
-
|
| 401 |
-
|
|
|
|
|
|
|
| 402 |
</div>
|
| 403 |
-
<
|
| 404 |
-
|
| 405 |
-
|
| 406 |
-
|
| 407 |
-
|
| 408 |
-
<
|
| 409 |
</div>
|
| 410 |
-
<
|
| 411 |
-
|
| 412 |
-
|
| 413 |
-
|
| 414 |
-
|
| 415 |
-
<
|
| 416 |
</div>
|
| 417 |
-
<h4 class="font-medium text-yellow-300">Number</h4>
|
| 418 |
-
<p class="text-sm text-gray-300">7</p>
|
| 419 |
</div>
|
| 420 |
</div>
|
| 421 |
-
|
| 422 |
-
|
| 423 |
-
|
| 424 |
-
|
| 425 |
-
|
| 426 |
-
|
| 427 |
-
|
| 428 |
-
|
| 429 |
-
|
| 430 |
-
|
| 431 |
-
|
| 432 |
-
<div class="planet-orbit orbit-5" style="width: 220px; height: 220px; top: 15px; left: 15px;"></div>
|
| 433 |
-
|
| 434 |
-
<!-- Sun at center -->
|
| 435 |
-
<div class="planet-position" style="top: 115px; left: 115px; background: radial-gradient(circle, #ffd700, #ff8c00);">
|
| 436 |
-
<i class="fas fa-sun text-xs text-white"></i>
|
| 437 |
</div>
|
| 438 |
-
|
| 439 |
-
|
| 440 |
-
|
| 441 |
-
|
|
|
|
|
|
|
| 442 |
</div>
|
| 443 |
-
<div class="planet-
|
| 444 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
| 445 |
</div>
|
| 446 |
-
<div class="planet-
|
| 447 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
| 448 |
</div>
|
| 449 |
-
<div class="planet-
|
| 450 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
| 451 |
</div>
|
| 452 |
-
|
| 453 |
-
|
| 454 |
-
|
| 455 |
-
<div class="flex items-center">
|
| 456 |
-
<div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
|
| 457 |
-
<span>Moon in Taurus</span>
|
| 458 |
</div>
|
| 459 |
-
<
|
| 460 |
-
|
| 461 |
-
|
|
|
|
|
|
|
|
|
|
| 462 |
</div>
|
| 463 |
-
<
|
| 464 |
-
|
| 465 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 466 |
</div>
|
| 467 |
-
<
|
| 468 |
-
|
| 469 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 470 |
</div>
|
| 471 |
-
|
| 472 |
-
|
| 473 |
-
|
|
|
|
|
|
|
| 474 |
</div>
|
| 475 |
-
<
|
| 476 |
-
|
| 477 |
-
<
|
|
|
|
|
|
|
| 478 |
</div>
|
| 479 |
</div>
|
| 480 |
</div>
|
| 481 |
</div>
|
| 482 |
</div>
|
| 483 |
|
| 484 |
-
<!--
|
| 485 |
-
<div class="bg-gray-
|
| 486 |
-
<div class="flex items-
|
| 487 |
-
<
|
| 488 |
-
<
|
| 489 |
-
|
| 490 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 491 |
</div>
|
| 492 |
-
|
| 493 |
-
|
| 494 |
-
|
| 495 |
-
|
| 496 |
-
|
| 497 |
-
|
| 498 |
-
|
| 499 |
-
|
| 500 |
-
|
| 501 |
-
|
|
|
|
| 502 |
</div>
|
| 503 |
</div>
|
| 504 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 505 |
</div>
|
| 506 |
</div>
|
| 507 |
</main>
|
|
@@ -592,6 +699,127 @@
|
|
| 592 |
// On load, select first mood by default
|
| 593 |
document.querySelector('.mood-selector input[type="radio"]').checked = true;
|
| 594 |
document.querySelector('.mood-selector label').classList.add('border-yellow-500');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 595 |
</script>
|
| 596 |
<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>
|
| 597 |
</html>
|
|
|
|
| 106 |
transform: translateX(45px);
|
| 107 |
}
|
| 108 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 109 |
.avatar-container {
|
| 110 |
perspective: 1000px;
|
| 111 |
}
|
|
|
|
| 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">
|
|
|
|
| 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>
|
|
|
|
| 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>
|
| 825 |
</html>
|