Spaces:
Running
Running
File size: 51,735 Bytes
532b9f3 90e88ae 532b9f3 86e59ab 532b9f3 86e59ab 532b9f3 86e59ab 532b9f3 86e59ab 532b9f3 86e59ab 532b9f3 86e59ab 532b9f3 86e59ab 532b9f3 86e59ab 532b9f3 86e59ab 532b9f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chandelier Trivia - Luxury Edition with AI Guide</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
body {
font-family: 'Montserrat', sans-serif;
background-color: #0f0e17;
color: #fffffe;
}
.title-font {
font-family: 'Playfair Display', serif;
}
.chandelier-glow {
box-shadow: 0 0 30px 5px rgba(255, 215, 0, 0.5);
animation: pulse 3s infinite alternate;
}
@keyframes pulse {
0% { box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.5); }
100% { box-shadow: 0 0 40px 10px rgba(255, 215, 0, 0.7); }
}
.option:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.crystal {
position: absolute;
background: rgba(255, 255, 255, 0.8);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
animation: float 5s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
.luxury-btn {
background: linear-gradient(135deg, #d4af37 0%, #f9d423 100%);
border: none;
color: #0f0e17;
font-weight: 600;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.luxury-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}
.ai-message {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.ai-message.active {
max-height: 300px;
transition: max-height 0.5s ease-in;
}
.typing-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #d4af37;
margin-right: 4px;
animation: typing 1s infinite ease-in-out;
}
.typing-indicator:nth-child(2) {
animation-delay: 0.2s;
}
.typing-indicator:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.ai-avatar {
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Floating AI Button */
.floating-ai-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
color: #d4af37;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
cursor: pointer;
z-index: 1000;
transition: all 0.3s ease;
border: 2px solid #d4af37;
}
.floating-ai-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
/* AI Knowledge Panel */
.ai-knowledge-panel {
position: fixed;
bottom: 100px;
right: 30px;
width: 350px;
max-height: 500px;
background: #1a202c;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
z-index: 999;
transform: translateY(20px);
opacity: 0;
transition: all 0.3s ease;
border: 1px solid #2d3748;
}
.ai-knowledge-panel.active {
transform: translateY(0);
opacity: 1;
}
.ai-panel-header {
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
padding: 15px;
color: #d4af37;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #2d3748;
}
.ai-panel-content {
padding: 15px;
max-height: 400px;
overflow-y: auto;
color: #e2e8f0;
}
.ai-tab {
padding: 10px 15px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.ai-tab.active {
border-bottom: 2px solid #d4af37;
color: #d4af37;
}
.ai-knowledge-item {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #2d3748;
}
.ai-knowledge-item h4 {
color: #d4af37;
margin-bottom: 8px;
font-weight: 600;
}
.ai-knowledge-item p {
font-size: 14px;
line-height: 1.5;
}
.ai-close-btn {
cursor: pointer;
font-size: 18px;
transition: all 0.3s ease;
}
.ai-close-btn:hover {
transform: rotate(90deg);
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #2d3748;
}
::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #d4af37;
}
/* Storytelling styles */
.story-section {
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
border-left: 4px solid #d4af37;
padding: 15px;
margin-bottom: 20px;
border-radius: 0 8px 8px 0;
}
.story-title {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #f9d423;
margin-bottom: 10px;
text-shadow: 0 0 5px rgba(249, 212, 35, 0.5);
}
.story-content {
font-style: italic;
position: relative;
padding-left: 20px;
}
.story-content::before {
content: '"';
position: absolute;
left: 0;
top: -10px;
font-size: 3rem;
color: rgba(212, 175, 55, 0.3);
font-family: serif;
}
.carnival-highlight {
background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.3) 100%);
padding: 2px 5px;
border-radius: 3px;
font-weight: 600;
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<!-- Floating crystals decoration -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div class="crystal w-3 h-3 top-1/4 left-1/5" style="animation-delay: 0s;"></div>
<div class="crystal w-4 h-4 top-1/3 right-1/4" style="animation-delay: 1s;"></div>
<div class="crystal w-2 h-2 bottom-1/4 left-1/3" style="animation-delay: 2s;"></div>
<div class="crystal w-5 h-5 bottom-1/3 right-1/5" style="animation-delay: 0.5s;"></div>
<div class="crystal w-3 h-3 top-3/4 left-2/3" style="animation-delay: 1.5s;"></div>
</div>
<!-- Floating AI Assistant Button -->
<div class="floating-ai-btn" id="aiAssistantBtn">
<i class="fas fa-robot"></i>
</div>
<!-- AI Knowledge Panel -->
<div class="ai-knowledge-panel" id="aiKnowledgePanel">
<div class="ai-panel-header">
<div>Chandelier AI Guide</div>
<div class="ai-close-btn" id="aiCloseBtn">
<i class="fas fa-times"></i>
</div>
</div>
<div class="flex border-b border-gray-700">
<div class="ai-tab active" data-tab="history">History</div>
<div class="ai-tab" data-tab="famous">Famous Pieces</div>
</div>
<div class="ai-panel-content" id="aiPanelContent">
<!-- Content will be loaded by JavaScript -->
</div>
</div>
<header class="py-6 px-4 sm:px-6 lg:px-8 text-center relative z-10">
<h1 class="title-font text-4xl md:text-5xl lg:text-6xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-yellow-500">
Chandelier Trivia
</h1>
<p class="text-lg text-yellow-200">Test your knowledge of historic and luxury lighting with our AI guide</p>
</header>
<main class="flex-grow container mx-auto px-4 py-8 flex flex-col items-center relative z-10">
<!-- Game selection -->
<div id="game-selection" class="w-full max-w-3xl bg-gray-900 bg-opacity-70 backdrop-blur-sm rounded-xl p-8 shadow-xl border border-gray-700">
<h2 class="title-font text-2xl md:text-3xl font-bold mb-6 text-center text-yellow-300">Select Your City</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="city-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 cursor-pointer" data-city="los-angeles">
<div class="h-40 bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center">
<i class="fas fa-city text-5xl text-yellow-300"></i>
</div>
<div class="p-4">
<h3 class="title-font text-xl font-bold text-center">Los Angeles</h3>
<p class="text-gray-300 text-sm mt-2 text-center">The City of Angels</p>
</div>
</div>
<div class="city-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 cursor-pointer" data-city="las-vegas">
<div class="h-40 bg-gradient-to-br from-red-900 to-pink-900 flex items-center justify-center">
<i class="fas fa-dice text-5xl text-yellow-300"></i>
</div>
<div class="p-4">
<h3 class="title-font text-xl font-bold text-center">Las Vegas</h3>
<p class="text-gray-300 text-sm mt-2 text-center">Sin City</p>
</div>
</div>
<div class="city-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 cursor-pointer" data-city="beverly-hills">
<div class="h-40 bg-gradient-to-br from-green-900 to-teal-900 flex items-center justify-center">
<i class="fas fa-gem text-5xl text-yellow-300"></i>
</div>
<div class="p-4">
<h3 class="title-font text-xl font-bold text-center">Beverly Hills</h3>
<p class="text-gray-300 text-sm mt-2 text-center">90210</p>
</div>
</div>
</div>
<div class="mt-8 text-center">
<a href="https://huggingface.co/spaces/privateuserh/privcarnival-vbeta-1-03" class="inline-block luxury-btn px-6 py-3 rounded-full text-sm uppercase tracking-wider">
<i class="fas fa-external-link-alt mr-2"></i> Visit Carnival VBeta
</a>
</div>
</div>
<!-- Quiz container (hidden initially) -->
<div id="quiz-container" class="hidden w-full max-w-3xl bg-gray-900 bg-opacity-70 backdrop-blur-sm rounded-xl p-8 shadow-xl border border-gray-700">
<div class="flex justify-between items-center mb-6">
<h2 id="city-name" class="title-font text-2xl md:text-3xl font-bold text-yellow-300"></h2>
<div class="text-yellow-300">
<span id="current-question">1</span>/<span id="total-questions">5</span>
</div>
</div>
<div class="mb-8">
<div class="h-1 bg-gray-700 rounded-full overflow-hidden">
<div id="progress-bar" class="h-full bg-gradient-to-r from-yellow-400 to-yellow-600 transition-all duration-500" style="width: 0%"></div>
</div>
</div>
<div id="question-container" class="mb-8">
<h3 id="question" class="text-xl md:text-2xl font-medium mb-6"></h3>
<div id="options" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Options will be inserted here by JavaScript -->
</div>
</div>
<!-- AI Assistant Section -->
<div id="ai-container" class="ai-message bg-gray-800 rounded-lg overflow-hidden mb-8">
<div class="flex items-start p-4">
<div class="ai-avatar w-10 h-10 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-robot text-yellow-400"></i>
</div>
<div class="flex-1">
<div class="font-bold text-yellow-400 mb-1">Chandelier AI Guide</div>
<div id="ai-message-content" class="text-gray-300">
<div id="typing-indicator" class="flex">
<div class="typing-indicator"></div>
<div class="typing-indicator"></div>
<div class="typing-indicator"></div>
</div>
</div>
</div>
</div>
</div>
<div id="result-container" class="hidden text-center py-8">
<div class="inline-block p-4 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 mb-6 chandelier-glow">
<i class="fas fa-award text-4xl text-gray-900"></i>
</div>
<h3 id="result-title" class="title-font text-2xl md:text-3xl font-bold mb-4"></h3>
<p id="result-message" class="text-lg mb-6"></p>
<p class="text-sm text-gray-400 mb-8">You scored <span id="score" class="text-yellow-300 font-bold">0</span> out of <span id="max-score" class="text-yellow-300 font-bold">5</span></p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button id="play-again" class="luxury-btn px-6 py-3 rounded-full text-sm uppercase tracking-wider">
<i class="fas fa-redo mr-2"></i> Play Again
</button>
<button id="choose-city" class="bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-full text-sm uppercase tracking-wider transition">
<i class="fas fa-city mr-2"></i> Choose Another City
</button>
</div>
</div>
<div class="mt-8 text-center">
<a href="https://huggingface.co/spaces/privateuserh/privcarnival-vbeta-1-03" class="inline-block luxury-btn px-6 py-3 rounded-full text-sm uppercase tracking-wider">
<i class="fas fa-external-link-alt mr-2"></i> Visit Carnival VBeta
</a>
</div>
</div>
</main>
<footer class="py-4 text-center text-gray-500 text-sm relative z-10">
<p>© 2023 Chandelier Trivia | Inspired by <a href="https://huggingface.co/spaces/privateuserh/privcarnival-vbeta-1-03" class="text-yellow-400 hover:text-yellow-300">Carnival VBeta</a></p>
</footer>
<script>
// Game data with AI historical facts
const triviaData = {
"los-angeles": {
name: "Los Angeles, California",
questions: [
{
question: "Which famous LA hotel features a massive 15-foot chandelier with over 10,000 crystals in its lobby?",
options: [
"The Beverly Hills Hotel",
"The Ritz-Carlton, Los Angeles",
"The Biltmore Los Angeles",
"The Langham Huntington, Pasadena"
],
answer: 2,
aiFact: "The Biltmore Los Angeles, opened in 1923, features one of the most spectacular chandeliers in the city. The Spanish-Italian Renaissance style chandelier was designed to complement the hotel's ornate ceiling, which was painted by Italian artist Giovanni Smeraldi. The Biltmore's chandeliers have illuminated numerous Academy Award ceremonies in the 1930s and 40s before the Oscars moved to the Dolby Theatre."
},
{
question: "The chandeliers at the Getty Center were designed by which famous artist?",
options: [
"Dale Chihuly",
"Jeff Koons",
"James Turrell",
"Robert Irwin"
],
answer: 0,
aiFact: "Dale Chihuly, the renowned glass artist, created the stunning chandeliers for the Getty Center. His work represents a modern interpretation of traditional chandelier design, using vibrant colors and organic forms. Chihuly's chandeliers are part of his 'Chandelier Series' which began in 1992. The Getty installation consists of multiple pieces that play with light and space, creating a dialogue between the modern glass art and the museum's classical architecture."
},
{
question: "How many Swarovski crystals adorn the chandelier at the Walt Disney Concert Hall?",
options: [
"5,000",
"12,000",
"18,000",
"25,000"
],
answer: 2,
aiFact: "The Walt Disney Concert Hall's chandelier, designed by Frank Gehry, features 18,000 Swarovski crystals. This modern masterpiece weighs approximately 5,000 pounds and spans 30 feet in diameter. The crystals are arranged in a way that creates a 'sound cloud' effect, helping to diffuse sound throughout the concert hall. The chandelier's design was inspired by the sails of ships, echoing Gehry's architectural vision for the entire building."
},
{
question: "Which historic LA theater is famous for its 'Flying Saucer' chandelier that descends from the ceiling?",
options: [
"The Orpheum Theatre",
"The Dolby Theatre",
"The Pantages Theatre",
"The El Capitan Theatre"
],
answer: 2,
aiFact: "The Pantages Theatre, built in 1930, features an Art Deco 'Flying Saucer' chandelier that descends dramatically before performances. This 12-foot diameter chandelier weighs nearly 2,000 pounds and contains over 20,000 pieces of Czechoslovakian crystal. When lowered, it reaches just 10 feet above the audience, creating an intimate atmosphere. The theater originally opened as a movie palace and vaudeville venue, with the chandelier being one of its most talked-about features."
},
{
question: "The chandelier in the lobby of the InterContinental Los Angeles Downtown weighs approximately:",
options: [
"1,200 pounds",
"2,500 pounds",
"3,800 pounds",
"5,000 pounds"
],
answer: 1,
aiFact: "The InterContinental Los Angeles Downtown features a stunning 2,500-pound chandelier in its lobby. This modern chandelier spans two stories and consists of hundreds of hand-blown glass pieces. The design was inspired by Los Angeles' famous sunshine and ocean waves. What makes this chandelier unique is its interactive lighting system that changes color and intensity based on the time of day and special events happening in the city."
}
]
},
"las-vegas": {
name: "Las Vegas, Nevada",
questions: [
{
question: "The famous chandelier at The Cosmopolitan is made up of how many crystal beads?",
options: [
"500,000",
"1 million",
"2 million",
"3 million"
],
answer: 2,
aiFact: "The Cosmopolitan's chandelier bar features an astonishing 2 million crystal beads spread across three levels. This installation is actually a series of 21 individual chandeliers that create a cohesive visual experience. The beads are made of high-quality Swarovski crystals that refract light beautifully. The chandelier was designed by Studio Drift, a Dutch artist collective known for their innovative light installations. It's one of the most Instagrammed spots in Las Vegas."
},
{
question: "Which Las Vegas casino features a chandelier made entirely of playing cards?",
options: [
"Bellagio",
"Aria",
"The Venetian",
"Wynn Las Vegas"
],
answer: 1,
aiFact: "ARIA Resort & Casino features a unique chandelier made of thousands of playing cards. This contemporary art piece was created by artist Tim Bavington and spans 80 feet in length. The 'cards' are actually colored glass rods arranged to represent the notes of a song. This chandelier is part of ARIA's $40 million art collection and represents the fusion of art, music, and gambling that defines Las Vegas entertainment."
},
{
question: "The chandelier in the lobby of the Bellagio weighs approximately:",
options: [
"5,000 pounds",
"10,000 pounds",
"15,000 pounds",
"20,000 pounds"
],
answer: 3,
aiFact: "The Bellagio's lobby chandelier is a staggering 20,000 pounds of hand-blown glass flowers. Created by glass artist Dale Chihuly, this installation consists of over 2,000 individual glass pieces. The chandelier spans the entire lobby ceiling and changes appearance depending on the viewing angle. It took a team of artisans more than two years to complete this masterpiece, which has become one of the most recognizable symbols of Las Vegas luxury."
},
{
question: "Which hotel features a chandelier with over 27,000 LED lights that change color?",
options: [
"Caesars Palace",
"The Palazzo",
"Encore at Wynn",
"MGM Grand"
],
answer: 2,
aiFact: "Encore at Wynn Las Vegas features a spectacular chandelier with 27,000 LED lights in its lobby. This technological marvel can display 16 million colors and creates dynamic light shows synchronized to music. The chandelier was designed by renowned lighting designer Patrick Woodroffe and took over 10,000 hours to install. Its butterfly motif represents transformation and luxury, key themes of the Wynn resort experience."
},
{
question: "The chandelier bar at The Cosmopolitan spans how many levels?",
options: [
"1 level",
"2 levels",
"3 levels",
"4 levels"
],
answer: 2,
aiFact: "The Chandelier Bar at The Cosmopolitan spans three levels of the resort, each offering a different ambiance. The first level features a more casual lounge atmosphere, the second level is the main bar area with the spectacular chandelier installation, and the third level offers a more intimate, speakeasy-style experience. Each level has its own unique lighting design within the overall chandelier concept. The bar has won numerous awards for its innovative design and has become a must-visit destination in Las Vegas."
}
]
},
"beverly-hills": {
name: "Beverly Hills, California",
questions: [
{
question: "The Beverly Wilshire Hotel's lobby features chandeliers from which famous designer?",
options: [
"Louis Comfort Tiffany",
"Dale Chihuly",
"Murano Glass",
"Baccarat"
],
answer: 3,
aiFact: "The Beverly Wilshire Hotel, a Four Seasons property, features exquisite Baccarat crystal chandeliers in its lobby. These chandeliers were installed during a 1989 renovation that cost $100 million. Baccarat, founded in 1764, is renowned for its high-quality lead crystal. The hotel's chandeliers were custom-designed to complement the Italian Renaissance architecture of the building. They've illuminated numerous celebrity events and were featured prominently in the film 'Pretty Woman'."
},
{
question: "How many crystal prisms are in the main chandelier at The Beverly Hills Hotel?",
options: [
"1,200",
"2,400",
"3,600",
"4,800"
],
answer: 1,
aiFact: "The Beverly Hills Hotel's signature chandelier contains 2,400 hand-cut crystal prisms. This masterpiece hangs in the hotel's legendary Polo Lounge and was commissioned in the 1940s. Each prism is individually hung to create maximum light refraction. The chandelier was recently restored using original design specifications to maintain its historic authenticity. It has illuminated countless Hollywood deals and celebrity encounters over the decades."
},
{
question: "Which famous jewelry store on Rodeo Drive features chandeliers worth over $1 million each?",
options: [
"Tiffany & Co.",
"Harry Winston",
"Cartier",
"Van Cleef & Arpels"
],
answer: 1,
aiFact: "Harry Winston's Rodeo Drive boutique features chandeliers valued at over $1 million each. These chandeliers are actually functional art pieces that incorporate real diamonds into their design. The store's 'Salon Opulence' features a chandelier with 1,300 diamonds totaling over 100 carats. This reflects Harry Winston's nickname as the 'King of Diamonds.' The chandeliers are cleaned weekly by specialists wearing white gloves to maintain their brilliance."
},
{
question: "The chandeliers at Spago Beverly Hills were personally selected by which celebrity chef?",
options: [
"Gordon Ramsay",
"Wolfgang Puck",
"Thomas Keller",
"Nobu Matsuhisa"
],
answer: 1,
aiFact: "Wolfgang Puck personally selected the chandeliers for his iconic Spago Beverly Hills restaurant. The modern crystal chandeliers were chosen to complement the restaurant's contemporary design while adding a touch of old Hollywood glamour. Puck worked closely with lighting designers to ensure the chandeliers provided perfect ambient lighting for both romantic dinners and power lunches. The chandeliers have witnessed countless celebrity dining experiences since the restaurant opened in 1982."
},
{
question: "Which Beverly Hills mansion sold for $119 million in 2020 features a $2 million chandelier?",
options: [
"The Spelling Manor",
"The Playboy Mansion",
"The Manor",
"The Palazzo di Amore"
],
answer: 2,
aiFact: "The Manor, formerly known as Spelling Manor, features a $2 million chandelier in its grand foyer. This 123-room mansion was built by television producer Aaron Spelling and features multiple custom chandeliers throughout. The main chandelier was commissioned from a French atelier and took over a year to create. It's made with hand-cut Baccarat crystal and 24-karat gold accents. The chandelier's design was inspired by 18th-century French royal palaces, reflecting the home's overall opulent aesthetic."
}
]
}
};
// AI Knowledge Database - Updated with over-the-top storytelling format
const aiKnowledge = {
history: [
{
title: "The Dawn of Dazzling Light",
content: `<div class="story-section">
<div class="story-title">Chapter I: The Medieval Origins</div>
<div class="story-content">
In the shadowy halls of medieval monasteries, the first chandeliers emerged as simple wooden crosses holding candles. These humble beginnings would spark a revolution in illumination. By the 15th century, Venetian glassmakers began crafting elaborate designs that would make their city synonymous with luxury lighting. The <span class="carnival-highlight">The Lore</span> of 1482 is the first documented crystal chandelier, a masterpiece that reportedly took three master craftsmen two years to complete.
</div>
</div>`
},
{
title: "The Crystal Revolution",
content: `<div class="story-section">
<div class="story-title">Chapter II: The Bohemian Brilliance</div>
<div class="story-content">
The 18th century witnessed a lighting renaissance as Bohemian craftsmen perfected lead crystal production. The discovery that lead oxide increased light refraction by 47.3% transformed chandeliers from mere light sources to radiant works of art. The legendary <span class="carnival-highlight">Carnival of Lights</span> in 1765 showcased a chandelier with 1,200 hand-cut crystals that reportedly blinded three noblewomen with its brilliance. This era birthed the chandelier as we know it today - a symbol of opulence and technological achievement.
</div>
</div>`
},
{
title: "Gaslight Grandeur",
content: `<div class="story-section">
<div class="story-title">Chapter III: The Industrial Illumination</div>
<div class="story-content">
The early 19th century's gas lighting revolution allowed chandeliers to shine brighter than ever before. The 1824 <span class="carnival-highlight">Grand Illumination Festival</span> in Vienna featured a gas-powered chandelier with 500 flames that could be dimmed using an innovative pulley system. This technological marvel isnwhat inspired the creation of the legendary "Eternal Flame" chandelier series, which still graces European palaces today. The era's most extravagant piece - the "Imperial Sun" - required 12 full-time attendants to maintain its 1,843 gas jets.
</div>
</div>`
},
{
title: "The Electric Epiphany",
content: `<div class="story-section">
<div class="story-title">Chapter IV: The Modern Metamorphosis</div>
<div class="story-content">
Thomas Edison's 1879 light bulb sparked a design revolution. The 1893 World's Columbian Exposition unveiled the first fully electric chandelier - a 15-foot diameter masterpiece with 300 bulbs that consumed enough electricity to power an entire Chicago neighborhood. A workshop's 1901 "Electra" model featured innovative dimming technology that made it the must-have luxury item for Gilded Age mansions. This era saw chandeliers evolve from functional lighting to sculptural centerpieces that defined interior spaces.
</div>
</div>`
},
{
title: "The Contemporary Crystal Age",
content: `<div class="story-section">
<div class="story-title">Chapter V: The New Millennium of Light</div>
<div class="story-content">
Today's chandeliers blend cutting-edge technology with timeless craftsmanship. The 2018 <span class="carnival-highlight"></span> installation featured a smart chandelier that responded to visitors' heartbeats with pulsating light patterns. Modern masters like Dale Chihuly have redefined the form with gravity-defying glass sculptures, while LED technology allows for chandeliers that change color with smartphone apps. The WI Posha Atelier's latest creation - the "Infinity Prism" - contains 25,000 nano-coated crystals that create holographic light effects visible from space.
</div>
</div>`
}
],
famous: [
{
title: "The Versailles Celestial Crown",
content: `<div class="story-section">
<div class="story-title">The Hall of Mirrors Masterpiece</div>
<div class="story-content">
Commissioned by Louis XIV in 1682, the "Celestial Crown" chandelier in Versailles' Hall of Mirrors contains 3,000 hand-cut Bohemian crystals arranged to mimic the constellations visible on the Sun King's birthday. Weighing 1.5 tons, it required 72 servants to lower it for cleaning. The archives reveal this chandelier inspired their legendary "Solaris" series, which debuted at the 1701 <span class="carnival-highlight">Venetian Carnival of Light</span>. The current restoration uses original 17th-century techniques, with each crystal cleaned by artisans wearing white silk gloves.
</div>
</div>`
},
{
title: "The Metropolitan Opera's Falling Stars",
content: `<div class="story-section">
<div class="story-title">New York's Dazzling Constellation</div>
<div class="story-content">
The Met Opera's eleven Czechoslovakian crystal chandeliers, gifted by the Austrian government in 1966, perform their own ballet before each show. As the house lights dim, these 1,500-pound wonders ascend silently to the ceiling, their 24,000 crystals refracting light like a galaxy of stars. The workshop consulted on the 2018 restoration, applying techniques developed for the <span class="carnival-highlight"></span> installation. The chandeliers' movement is so precise they can be synchronized to within 0.03 seconds of each other.
</div>
</div>`
},
{
title: "The Dolby Theatre's Oscar Constellation",
content: `<div class="story-section">
<div class="story-title">Hollywood's Shining Moment</div>
<div class="story-content">
The Dolby Theatre's centerpiece chandelier is a technological marvel with 20,000 Swarovski crystals that descend during the Oscars ceremony, creating the illusion of stars falling onto the audience. Designed in collaboration with Swarovski, it features 15,000 LED lights that can create 16 million color combinations. The 2019 upgrade incorporated motion sensors that cause the crystals to shimmer when winners approach the stage - a feature inspired by the <span class="carnival-highlight"></span> interactive light installations.
</div>
</div>`
},
{
title: "The Grand Mosque's Divine Radiance",
content: `<div class="story-section">
<div class="story-title">Abu Dhabi's Heavenly Light</div>
<div class="story-content">
Sheikh Zayed Grand Mosque's 40-foot diameter, 12-ton chandelier holds the Guinness World Record as the largest chandelier in a place of worship. Its 2.2 million Swarovski crystals and 24-karat gold plating create a celestial glow visible from space. The craftsmen who worked on this project adapted techniques from their <span class="carnival-highlight">Carnival of Light</span> installations to ensure the crystals would refract light perfectly at all prayer times. Cleaning this masterpiece requires a team of 12 working for three weeks, using custom-designed scaffolding.
</div>
</div>`
},
{
title: "The Cosmopolitan's Liquid Crystal",
content: `<div class="story-section">
<div class="story-title">Vegas' Immersive Experience</div>
<div class="story-content">
The Cosmopolitan's three-story chandelier bar contains 2 million crystal beads that create a shimmering cocoon around guests. Designed by Studio Drift in collaboration with a technical team, this installation represents the evolution of chandeliers from overhead lighting to immersive environments. The crystals are arranged using algorithms based on the <span class="carnival-highlight"></span> light patterns, creating dynamic refraction effects that change with viewers' perspectives. Each bead is individually suspended on aircraft-grade cables to withstand the vibrations of Las Vegas' famous dance floors.
</div>
</div>`
}
]
};
// Game state
let currentCity = null;
let currentQuestionIndex = 0;
let score = 0;
let selectedOption = null;
// DOM elements
const gameSelection = document.getElementById('game-selection');
const quizContainer = document.getElementById('quiz-container');
const cityName = document.getElementById('city-name');
const currentQuestionEl = document.getElementById('current-question');
const totalQuestionsEl = document.getElementById('total-questions');
const progressBar = document.getElementById('progress-bar');
const questionEl = document.getElementById('question');
const optionsEl = document.getElementById('options');
const resultContainer = document.getElementById('result-container');
const resultTitle = document.getElementById('result-title');
const resultMessage = document.getElementById('result-message');
const scoreEl = document.getElementById('score');
const maxScoreEl = document.getElementById('max-score');
const playAgainBtn = document.getElementById('play-again');
const chooseCityBtn = document.getElementById('choose-city');
const aiContainer = document.getElementById('ai-container');
const aiMessageContent = document.getElementById('ai-message-content');
const typingIndicator = document.getElementById('typing-indicator');
// AI Assistant elements
const aiAssistantBtn = document.getElementById('aiAssistantBtn');
const aiKnowledgePanel = document.getElementById('aiKnowledgePanel');
const aiCloseBtn = document.getElementById('aiCloseBtn');
const aiPanelContent = document.getElementById('aiPanelContent');
const aiTabs = document.querySelectorAll('.ai-tab');
// City selection
document.querySelectorAll('.city-card').forEach(card => {
card.addEventListener('click', () => {
currentCity = card.dataset.city;
startGame();
});
});
// Start game function
function startGame() {
currentQuestionIndex = 0;
score = 0;
// Update UI
gameSelection.classList.add('hidden');
quizContainer.classList.remove('hidden');
resultContainer.classList.add('hidden');
cityName.textContent = triviaData[currentCity].name;
totalQuestionsEl.textContent = triviaData[currentCity].questions.length;
loadQuestion();
}
// Load question function
function loadQuestion() {
const questionData = triviaData[currentCity].questions[currentQuestionIndex];
// Update progress
currentQuestionEl.textContent = currentQuestionIndex + 1;
progressBar.style.width = `${(currentQuestionIndex / triviaData[currentCity].questions.length) * 100}%`;
// Set question
questionEl.textContent = questionData.question;
// Clear options
optionsEl.innerHTML = '';
// Add options
questionData.options.forEach((option, index) => {
const optionEl = document.createElement('div');
optionEl.className = 'option bg-gray-800 rounded-lg p-4 cursor-pointer transition-all duration-300 border border-gray-700 hover:border-yellow-400';
optionEl.innerHTML = `
<div class="flex items-center">
<div class="w-6 h-6 rounded-full border-2 border-yellow-400 mr-3 flex items-center justify-center">
<div class="w-3 h-3 rounded-full bg-yellow-400 opacity-0"></div>
</div>
<span>${option}</span>
</div>
`;
optionEl.dataset.optionIndex = index;
optionEl.addEventListener('click', () => selectOption(optionEl, index));
optionsEl.appendChild(optionEl);
});
// Hide AI message initially
aiContainer.classList.remove('active');
typingIndicator.style.display = 'none';
}
// Select option function
function selectOption(optionEl, optionIndex) {
if (selectedOption !== null) return;
selectedOption = optionIndex;
// Highlight selected option
optionEl.querySelector('.bg-yellow-400').classList.remove('opacity-0');
optionEl.classList.add('bg-gray-700');
optionEl.classList.remove('hover:border-yellow-400');
// Disable all options
document.querySelectorAll('#options .option').forEach(opt => {
opt.style.pointerEvents = 'none';
});
// Check answer after delay
setTimeout(() => {
checkAnswer();
}, 1000);
}
// Check answer function
function checkAnswer() {
const questionData = triviaData[currentCity].questions[currentQuestionIndex];
const options = document.querySelectorAll('#options .option');
// Mark correct answer
const correctOption = options[questionData.answer];
correctOption.classList.add('bg-green-900');
correctOption.classList.remove('bg-gray-700');
// Mark wrong answer if applicable
if (selectedOption !== questionData.answer) {
options[selectedOption].classList.add('bg-red-900');
options[selectedOption].classList.remove('bg-gray-700');
} else {
score++;
}
// Show AI fact
showAIFact(questionData.aiFact);
// Move to next question or show results after AI message
}
// Show AI fact function
function showAIFact(fact) {
// Show typing indicator
typingIndicator.style.display = 'flex';
aiContainer.classList.add('active');
// Simulate typing effect
setTimeout(() => {
typingIndicator.style.display = 'none';
aiMessageContent.innerHTML = fact;
// After showing fact, proceed to next question or results
setTimeout(() => {
selectedOption = null;
currentQuestionIndex++;
if (currentQuestionIndex < triviaData[currentCity].questions.length) {
loadQuestion();
} else {
showResults();
}
}, 3000); // Give time to read the fact
}, 1500); // Typing duration
}
// Show results function
function showResults() {
const totalQuestions = triviaData[currentCity].questions.length;
const percentage = Math.round((score / totalQuestions) * 100);
// Update progress bar
progressBar.style.width = '100%';
// Hide question container
document.getElementById('question-container').classList.add('hidden');
// Hide AI container
aiContainer.classList.remove('active');
// Show result container
resultContainer.classList.remove('hidden');
// Set result content
scoreEl.textContent = score;
maxScoreEl.textContent = totalQuestions;
if (percentage >= 80) {
resultTitle.textContent = 'Brilliant!';
resultMessage.textContent = 'You truly shine when it comes to chandelier knowledge!';
} else if (percentage >= 50) {
resultTitle.textContent = 'Not Bad!';
resultMessage.textContent = 'You have a good eye for luxury lighting.';
} else {
resultTitle.textContent = 'Keep Practicing!';
resultMessage.textContent = 'Your chandelier knowledge could use some polishing.';
}
}
// Play again button
playAgainBtn.addEventListener('click', () => {
currentQuestionIndex = 0;
score = 0;
resultContainer.classList.add('hidden');
document.getElementById('question-container').classList.remove('hidden');
loadQuestion();
});
// Choose city button
chooseCityBtn.addEventListener('click', () => {
quizContainer.classList.add('hidden');
gameSelection.classList.remove('hidden');
resultContainer.classList.add('hidden');
});
// AI Assistant Button
aiAssistantBtn.addEventListener('click', () => {
aiKnowledgePanel.classList.toggle('active');
if (aiKnowledgePanel.classList.contains('active')) {
loadAIContent('history');
}
});
// AI Close Button
aiCloseBtn.addEventListener('click', () => {
aiKnowledgePanel.classList.remove('active');
});
// AI Tab Switching
aiTabs.forEach(tab => {
tab.addEventListener('click', () => {
aiTabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
loadAIContent(tab.dataset.tab);
});
});
// Load AI Content
function loadAIContent(tab) {
aiPanelContent.innerHTML = '';
aiKnowledge[tab].forEach(item => {
const itemEl = document.createElement('div');
itemEl.className = 'ai-knowledge-item';
itemEl.innerHTML = item.content;
aiPanelContent.appendChild(itemEl);
});
}
</script>
<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=privateuserh/privcarnival-chandelier-vbeta-1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |