|
|
<!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-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 { |
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #2d3748; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #4a5568; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #d4af37; |
|
|
} |
|
|
|
|
|
|
|
|
.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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="floating-ai-btn" id="aiAssistantBtn"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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." |
|
|
} |
|
|
] |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
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>` |
|
|
} |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
let currentCity = null; |
|
|
let currentQuestionIndex = 0; |
|
|
let score = 0; |
|
|
let selectedOption = null; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.city-card').forEach(card => { |
|
|
card.addEventListener('click', () => { |
|
|
currentCity = card.dataset.city; |
|
|
startGame(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function startGame() { |
|
|
currentQuestionIndex = 0; |
|
|
score = 0; |
|
|
|
|
|
|
|
|
gameSelection.classList.add('hidden'); |
|
|
quizContainer.classList.remove('hidden'); |
|
|
resultContainer.classList.add('hidden'); |
|
|
|
|
|
cityName.textContent = triviaData[currentCity].name; |
|
|
totalQuestionsEl.textContent = triviaData[currentCity].questions.length; |
|
|
|
|
|
loadQuestion(); |
|
|
} |
|
|
|
|
|
|
|
|
function loadQuestion() { |
|
|
const questionData = triviaData[currentCity].questions[currentQuestionIndex]; |
|
|
|
|
|
|
|
|
currentQuestionEl.textContent = currentQuestionIndex + 1; |
|
|
progressBar.style.width = `${(currentQuestionIndex / triviaData[currentCity].questions.length) * 100}%`; |
|
|
|
|
|
|
|
|
questionEl.textContent = questionData.question; |
|
|
|
|
|
|
|
|
optionsEl.innerHTML = ''; |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
aiContainer.classList.remove('active'); |
|
|
typingIndicator.style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
function selectOption(optionEl, optionIndex) { |
|
|
if (selectedOption !== null) return; |
|
|
|
|
|
selectedOption = optionIndex; |
|
|
|
|
|
|
|
|
optionEl.querySelector('.bg-yellow-400').classList.remove('opacity-0'); |
|
|
optionEl.classList.add('bg-gray-700'); |
|
|
optionEl.classList.remove('hover:border-yellow-400'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('#options .option').forEach(opt => { |
|
|
opt.style.pointerEvents = 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
checkAnswer(); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
function checkAnswer() { |
|
|
const questionData = triviaData[currentCity].questions[currentQuestionIndex]; |
|
|
const options = document.querySelectorAll('#options .option'); |
|
|
|
|
|
|
|
|
const correctOption = options[questionData.answer]; |
|
|
correctOption.classList.add('bg-green-900'); |
|
|
correctOption.classList.remove('bg-gray-700'); |
|
|
|
|
|
|
|
|
if (selectedOption !== questionData.answer) { |
|
|
options[selectedOption].classList.add('bg-red-900'); |
|
|
options[selectedOption].classList.remove('bg-gray-700'); |
|
|
} else { |
|
|
score++; |
|
|
} |
|
|
|
|
|
|
|
|
showAIFact(questionData.aiFact); |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function showAIFact(fact) { |
|
|
|
|
|
typingIndicator.style.display = 'flex'; |
|
|
aiContainer.classList.add('active'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
typingIndicator.style.display = 'none'; |
|
|
aiMessageContent.innerHTML = fact; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
selectedOption = null; |
|
|
currentQuestionIndex++; |
|
|
|
|
|
if (currentQuestionIndex < triviaData[currentCity].questions.length) { |
|
|
loadQuestion(); |
|
|
} else { |
|
|
showResults(); |
|
|
} |
|
|
}, 3000); |
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
function showResults() { |
|
|
const totalQuestions = triviaData[currentCity].questions.length; |
|
|
const percentage = Math.round((score / totalQuestions) * 100); |
|
|
|
|
|
|
|
|
progressBar.style.width = '100%'; |
|
|
|
|
|
|
|
|
document.getElementById('question-container').classList.add('hidden'); |
|
|
|
|
|
|
|
|
aiContainer.classList.remove('active'); |
|
|
|
|
|
|
|
|
resultContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
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.'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
playAgainBtn.addEventListener('click', () => { |
|
|
currentQuestionIndex = 0; |
|
|
score = 0; |
|
|
resultContainer.classList.add('hidden'); |
|
|
document.getElementById('question-container').classList.remove('hidden'); |
|
|
loadQuestion(); |
|
|
}); |
|
|
|
|
|
|
|
|
chooseCityBtn.addEventListener('click', () => { |
|
|
quizContainer.classList.add('hidden'); |
|
|
gameSelection.classList.remove('hidden'); |
|
|
resultContainer.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
aiAssistantBtn.addEventListener('click', () => { |
|
|
aiKnowledgePanel.classList.toggle('active'); |
|
|
if (aiKnowledgePanel.classList.contains('active')) { |
|
|
loadAIContent('history'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
aiCloseBtn.addEventListener('click', () => { |
|
|
aiKnowledgePanel.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
aiTabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
aiTabs.forEach(t => t.classList.remove('active')); |
|
|
tab.classList.add('active'); |
|
|
loadAIContent(tab.dataset.tab); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
