Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>WI Posha Allegro Carnival | WVL Token on BCH Blockchain</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"> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> | |
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> | |
<script> | |
tailwind.config = { | |
theme: { | |
extend: { | |
colors: { | |
posha: { | |
primary: '#8a2be2', | |
secondary: '#9932cc', | |
accent: '#ba55d3', | |
dark: '#4b0082', | |
light: '#e6e6fa' | |
}, | |
telegram: '#0088cc' | |
}, | |
fontFamily: { | |
sans: ['Montserrat', 'sans-serif'], | |
display: ['Playfair Display', 'serif'] | |
} | |
} | |
} | |
} | |
</script> | |
<style> | |
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
body { | |
font-family: 'Montserrat', sans-serif; | |
background-color: #f9f9f9; | |
} | |
.floating-inventory { | |
box-shadow: 0 10px 30px rgba(0,0,0,0.15); | |
transition: all 0.3s ease; | |
} | |
.floating-inventory:hover { | |
transform: translateY(-5px); | |
box-shadow: 0 15px 35px rgba(0,0,0,0.2); | |
} | |
.inventory-item { | |
transition: all 0.2s ease; | |
} | |
.inventory-item:hover { | |
transform: scale(1.02); | |
background-color: rgba(255,255,255,0.7); | |
} | |
.gradient-bg { | |
background: linear-gradient(135deg, #8a2be2 0%, #9932cc 50%, #ba55d3 100%); | |
} | |
.tradingview-widget-container { | |
height: auto; | |
border-radius: 12px; | |
overflow: hidden; | |
} | |
.product-card { | |
transition: all 0.3s ease; | |
box-shadow: 0 4px 6px rgba(0,0,0,0.05); | |
} | |
.product-card:hover { | |
transform: translateY(-5px); | |
box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
} | |
@keyframes float { | |
0% { transform: translateY(0px); } | |
50% { transform: translateY(-10px); } | |
100% { transform: translateY(0px); } | |
} | |
.floating-badge { | |
animation: float 3s ease-in-out infinite; | |
} | |
.market-data-card { | |
background: white; | |
border-radius: 8px; | |
padding: 20px; | |
box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
} | |
.market-data-value { | |
font-size: 24px; | |
font-weight: bold; | |
color: #8a2be2; | |
} | |
.market-data-change.positive { | |
color: #10b981; | |
} | |
.market-data-change.negative { | |
color: #ef4444; | |
} | |
.loading-spinner { | |
border: 4px solid rgba(0, 0, 0, 0.1); | |
border-radius: 50%; | |
border-top: 4px solid #8a2be2; | |
width: 30px; | |
height: 30px; | |
animation: spin 1s linear infinite; | |
margin: 20px auto; | |
} | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} | |
/* API Status Indicators */ | |
.api-status { | |
display: inline-block; | |
width: 10px; | |
height: 10px; | |
border-radius: 50%; | |
margin-right: 5px; | |
} | |
.api-status.active { | |
background-color: #10b981; | |
} | |
.api-status.inactive { | |
background-color: #ef4444; | |
} | |
.api-status.loading { | |
background-color: #f59e0b; | |
} | |
/* Rate Limit Indicator */ | |
.rate-limit { | |
font-size: 12px; | |
color: #666; | |
margin-top: 5px; | |
} | |
/* AI Chat Modal Styles */ | |
.ai-chat-modal { | |
display: none; | |
position: fixed; | |
bottom: 90px; | |
right: 30px; | |
width: 350px; | |
height: 500px; | |
background: white; | |
border-radius: 12px; | |
box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
z-index: 1000; | |
overflow: hidden; | |
flex-direction: column; | |
} | |
.ai-chat-header { | |
background: linear-gradient(135deg, #8a2be2 0%, #9932cc 100%); | |
color: white; | |
padding: 15px; | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.ai-chat-body { | |
flex: 1; | |
padding: 15px; | |
overflow-y: auto; | |
background: #f9f9f9; | |
} | |
.ai-message { | |
background: white; | |
border-radius: 8px; | |
padding: 10px 15px; | |
margin-bottom: 10px; | |
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
max-width: 80%; | |
} | |
.user-message { | |
background: #8a2be2; | |
color: white; | |
margin-left: auto; | |
border-radius: 8px; | |
padding: 10px 15px; | |
margin-bottom: 10px; | |
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
max-width: 80%; | |
} | |
.ai-chat-input { | |
padding: 15px; | |
border-top: 1px solid #eee; | |
display: flex; | |
} | |
.ai-chat-input input { | |
flex: 1; | |
padding: 10px; | |
border: 1px solid #ddd; | |
border-radius: 20px; | |
outline: none; | |
} | |
.ai-chat-input button { | |
background: #8a2be2; | |
color: white; | |
border: none; | |
border-radius: 20px; | |
padding: 10px 15px; | |
margin-left: 10px; | |
cursor: placeholder; | |
} | |
.spot-market-card { | |
background: white; | |
border-radius: 8px; | |
padding: 15px; | |
margin-bottom: 15px; | |
box-shadow: 0 4px 6px rgba(0,0,0,0.05); | |
} | |
.spot-market-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 10px; | |
} | |
.spot-market-price { | |
font-size: 20px; | |
font-weight: bold; | |
color: #8a2be2; | |
} | |
.spot-market-change { | |
font-size: 14px; | |
padding: 3px 8px; | |
border-radius: 4px; | |
} | |
.positive-change { | |
background: #10b98120; | |
color: #10b981; | |
} | |
.negative-change { | |
background: #ef444420; | |
color: #ef4444; | |
} | |
.logo-container { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: white; | |
border-radius: 12px; | |
padding: 20px; | |
box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
} | |
.logo-placeholder { | |
width: 200px; | |
height: 200px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: linear-gradient(135deg, #f3e5f5 0%, #e6e6fa 100%); | |
border-radius: 50%; | |
color: #8a2be2; | |
font-size: 24px; | |
font-weight: bold; | |
} | |
.benefits-list { | |
list-style-type: none; | |
padding: 0; | |
} | |
.benefits-list li { | |
background: white; | |
margin-bottom: 10px; | |
padding: 15px; | |
border-radius: 8px; | |
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
display: flex; | |
align-items: flex-start; | |
} | |
.benefits-list li i { | |
color: #8a2be2; | |
margin-right: 10px; | |
margin-top: 3px; | |
} | |
/* TradingView widget custom styles */ | |
.tradingview-widget-container__widget { | |
height: auto ; | |
} | |
.tradingview-widget-copyright { | |
margin-top: 10px; | |
font-size: 12px; | |
text-align: center; | |
} | |
/* Chart container */ | |
.chart-container { | |
height: 400px; | |
width: 100%; | |
border-radius: 12px; | |
overflow: hidden; | |
background: white; | |
box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
} | |
/* Crypto price ticker */ | |
.crypto-ticker { | |
display: flex; | |
align-items: center; | |
padding: 8px 12px; | |
border-radius: 20px; | |
background: rgba(0,0,0,0.05); | |
font-size: 14px; | |
} | |
.crypto-ticker.up { | |
color: #10b981; | |
} | |
.crypto-ticker.down { | |
color: #ef4444; | |
} | |
/* Price disclaimer */ | |
.price-disclaimer { | |
font-size: 10px; | |
color: #666; | |
text-align: right; | |
margin-top: 5px; | |
} | |
/* Chandelier animation */ | |
.chandelier-animation { | |
animation: swing 3s ease-in-out infinite alternate; | |
transform-origin: top center; | |
} | |
@keyframes swing { | |
0% { transform: rotate(-5deg); } | |
100% { transform: rotate(5deg); } | |
} | |
/* Event card */ | |
.event-card { | |
transition: all 0.3s ease; | |
background: white; | |
border-radius: 12px; | |
overflow: hidden; | |
box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
} | |
.event-card:hover { | |
transform: translateY(-5px); | |
box-shadow: 0 10px 20px rgba(0,0,0,0.15); | |
} | |
/* Blockchain info card */ | |
.blockchain-info { | |
background: rgba(138, 43, 226, 0.05); | |
border-left: 4px solid #8a2be2; | |
padding: 15px; | |
border-radius: 0 8px 8px 0; | |
margin-bottom: 15px; | |
} | |
/* Geometric symbol containers */ | |
.geometric-symbol { | |
width: 100%; | |
height: 100%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: linear-gradient(135deg, #f3e5f5 0%, #e6e6fa 100%); | |
} | |
.token-symbol { | |
font-size: 48px; | |
color: #8a2be2; | |
font-weight: bold; | |
} | |
.event-symbol { | |
font-size: 48px; | |
color: #9932cc; | |
} | |
.market-symbol { | |
font-size: 48px; | |
color: #ba55d3; | |
} | |
/* Dropdown styles */ | |
.dropdown { | |
position: relative; | |
display: inline-block; | |
} | |
.dropdown-content { | |
display: none; | |
position: absolute; | |
background-color: white; | |
min-width: 160px; | |
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
z-index: 1; | |
border-radius: 8px; | |
right: 0; | |
bottom: 100%; | |
} | |
.dropdown-content a { | |
color: #4b0082; | |
padding: 12px 16px; | |
text-decoration: none; | |
display: block; | |
font-size: 14px; | |
transition: background-color 0.3s; | |
} | |
.dropdown-content a:hover { | |
background-color: #f3e5f5; | |
border-radius: 8px; | |
} | |
.dropdown:hover .dropdown-content { | |
display: block; | |
} | |
.dropdown-btn { | |
background-color: #8a2be2; | |
color: white; | |
padding: 8px 16px; | |
border: none; | |
border-radius: 20px; | |
cursor: pointer; | |
font-size: 14px; | |
transition: background-color 0.3s; | |
} | |
.dropdown-btn:hover { | |
background-color: #9932cc; | |
} | |
/* Event status indicator */ | |
.event-status { | |
display: inline-block; | |
width: 12px; | |
height: 12px; | |
border-radius: 50%; | |
margin-right: 5px; | |
} | |
.event-status.active { | |
background-color: #10b981; | |
box-shadow: 0 0 10px #10b981; | |
} | |
.event-status.upcoming { | |
background-color: #f59e0b; | |
} | |
.event-status.past { | |
background-color: #ef4444; | |
} | |
/* Calendar modal */ | |
.calendar-modal { | |
display: none; | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: rgba(0,0,0,0.5); | |
z-index: 1001; | |
justify-content: center; | |
align-items: center; | |
} | |
.calendar-container { | |
background-color: white; | |
border-radius: 12px; | |
padding: 20px; | |
width: 90%; | |
max-width: 500px; | |
box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
} | |
.calendar-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 15px; | |
} | |
.flatpickr-calendar { | |
width: 100% ; | |
} | |
.reservation-form { | |
margin-top: 20px; | |
} | |
.reservation-form input, | |
.reservation-form textarea { | |
width: 100%; | |
padding: 10px; | |
margin-bottom: 10px; | |
border: 1px solid #ddd; | |
border-radius: 6px; | |
} | |
.reservation-form button { | |
background-color: #8a2be2; | |
color: white; | |
border: none; | |
padding: 10px 15px; | |
border-radius: 6px; | |
cursor: pointer; | |
} | |
/* My Reservations */ | |
.reservation-card { | |
background: white; | |
border-radius: 8px; | |
padding: 15px; | |
margin-bottom: 15px; | |
box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
} | |
.reservation-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 10px; | |
} | |
.reservation-actions button { | |
background: none; | |
border: none; | |
color: #8a2be2; | |
cursor: pointer; | |
margin-left: 10px; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Top Navigation --> | |
<nav class="gradient-bg text-white py-4 px-6 shadow-lg"> | |
<div class="container mx-auto flex justify-between items-center"> | |
<div class="flex items-center space-x-2"> | |
<i class="fas fa-gem text-2xl"></i> | |
<span class="text-xl font-bold font-display">WI Posha Allegro Carnival</span> | |
</div> | |
<div class="hidden md:flex space-x-6"> | |
<a href="#" class="hover:text-posha-accent transition">Home</a> | |
<a href="#" class="hover:text-posha-accent transition">Events</a> | |
<a href="#" class="hover:text-posha-accent transition">WVL Token</a> | |
<a href="#" class="hover:text-posha-accent transition">About</a> | |
<a href="#" class="hover:text-posha-accent transition">Contact</a> | |
</div> | |
<div class="flex items-center space-x-4"> | |
<i class="fas fa-search cursor-pointer hover:text-posha-accent"></i> | |
<i class="fas fa-user-circle cursor-pointer hover:text-posha-accent"></i> | |
<i class="fas fa-ticket-alt cursor-pointer hover:text-posha-accent"></i> | |
<div class="md:hidden"> | |
<i class="fas fa-bars cursor-pointer"></i> | |
</div> | |
</div> | |
</div> | |
</nav> | |
<!-- Hero Section --> | |
<section class="relative"> | |
<div class="gradient-bg h-96 flex items-center"> | |
<div class="container mx-auto px-6 text-center text-white"> | |
<h1 class="text-4xl md:text-6xl font-display font-bold mb-4">WVL Token on BCH Blockchain</h1> | |
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Luxury event experiences powered by blockchain technology. Exclusive chandelier events in Las Vegas and California.</p> | |
<div class="flex justify-center space-x-4"> | |
<button class="bg-white text-posha-primary px-6 py-3 rounded-full font-semibold hover:bg-posha-light transition">Explore Events</button> | |
<button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-posha-primary transition">Token Info</button> | |
</div> | |
</div> | |
</div> | |
<!-- Floating Blockchain Info Window --> | |
<div class="absolute -bottom-20 left-1/2 transform -translate-x-1/2 w-11/12 max-w-4xl bg-white rounded-xl floating-inventory z-10 p-6"> | |
<div class="flex justify-between items-center mb-4"> | |
<h3 class="text-xl font-bold text-posha-dark flex items-center"> | |
<i class="fas fa-link mr-2"></i> | |
WVL Token Blockchain Data | |
</h3> | |
<span class="text-sm text-gray-500">Updated: <span id="blockchain-update-time">Loading...</span></span> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="blockchain-container"> | |
<div class="blockchain-info"> | |
<h4 class="font-bold text-posha-dark mb-2">Token Details</h4> | |
<p class="text-sm mb-1"><span class="font-medium">Symbol:</span> WVL</p> | |
<p class="text-sm mb-1"><span class="font-medium">Block:</span> 839,913</p> | |
<p class="text-sm mb-1"><span class="font-medium">Confirmations:</span> 57,657</p> | |
<p class="text-sm mb-1"><span class="font-medium"></span>(At the time of this printing 5/9/2025)</p> | |
<p class="text-sm mb-1"><span class="font-medium">Participants Annuity - Unspent Cash:</span> <a href="https://unspent.cash/s?q=eJwrWyliX2m4ZAbTrIjjL1tvW0pO1FFxsjnesQYAjIoLCQ%3D%3D" target="_blank" class="text-posha-primary hover:underline">View on Explorer</a></p> | |
</div> | |
<div class="blockchain-info"> | |
<h4 class="font-bold text-posha-dark mb-2">Performance</h4> | |
<p class="text-sm mb-1"><span class="font-medium">1 Month:</span> <span class="text-green-500">+1.04%</span></p> | |
<p class="text-sm mb-1"><span class="font-medium">1 Year:</span> <span class="text-green-500">+11.8%</span></p> | |
<p class="text-sm mb-1"><span class="font-medium">Token ID:</span>8f82fe2cac984fd045c241f107225c45d59c93133db8d007a84a702a5f76999c | |
</p> | |
<p class="text-sm mb-1"><span class="font-medium">Genesis TX:</span> <a href="https://blockchair.com/bitcoin-cash/transaction/8f82fe2cac984fd045c241f107225c45d59c93133db8d007a84a702a5f76999c" target="_blank" class="text-posha-primary hover:underline">View Genesis</a></p> | |
</div> | |
</div> | |
<div class="mt-4 flex justify-end"> | |
<a href="https://tokenexplorer.cash/?tokenId=8f82fe2cac984fd045c241f107225c45d59c93133db8d007a84a702a5f76999c" target="_blank" class="text-posha-primary text-sm font-semibold hover:underline flex items-center"> | |
View Full Explorer <i class="fas fa-chevron-right ml-1"></i> | |
</a> | |
</div> | |
</div> | |
</section> | |
<!-- Main Content --> | |
<main class="container mx-auto px-6 pt-32 pb-16"> | |
<!-- About WI Posha Allegro Carnival --> | |
<section class="mb-16"> | |
<div class="flex flex-col md:flex-row items-center gap-8"> | |
<div class="md:w-1/2"> | |
<h2 class="text-3xl font-display font-bold text-posha-dark mb-6">About WI Posha Allegro Carnival</h2> | |
<p class="text-gray-700 mb-4"> | |
WI Posha Allegro Carnival is a private boutique event planning agency based in Los Angeles, California, and Nevada (soon), known for its love of luxury and excitement. Our mission is to create unforgettable experiences through one-of-a-kind events that showcase the city's most extravagant chandeliers. | |
</p> | |
<p class="text-gray-700 mb-6"> | |
Each week, WI Posha Allegro Carnival hosts private events throughout the city at various chandelier locations. These exclusive gatherings celebrate the beauty and craftsmanship of these stunning works of art, offering guests an intimate experience with limited availability. | |
</p> | |
</div> | |
<div class="md:w-1/2"> | |
<div class="relative"> | |
<img src="WIPosha.png" alt="Luxury Chandelier Event" class="rounded-xl shadow-lg w-full h-auto"> | |
<div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-lg"> | |
<div class="flex items-center"> | |
<div class="bg-posha-primary text-white p-2 rounded-full mr-3"> | |
<i class="fas fa-gem"></i> | |
</div> | |
<div> | |
<p class="text-xs text-gray-500">Since 2024</p> | |
<p class="font-bold text-posha-dark">Exclusive Events. Now with BMI Band Tracking and ASCAP performance royalties and for Chandelier performances and citywide events.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- The Chandelier Experience --> | |
<section class="mb-16 bg-posha-light rounded-xl p-8 md:p-12"> | |
<h2 class="text-3xl font-display font-bold text-posha-dark mb-8 text-center">The Chandelier Experience</h2> | |
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> | |
<div class="event-card"> | |
<div class="h-48 overflow-hidden geometric-symbol"> | |
<div class="event-symbol"> | |
<i class="fas fa-feather-alt"></i> | |
</div> | |
</div> | |
<div class="p-6"> | |
<h3 class="font-bold text-xl mb-3">Chandelier Poetry</h3> | |
<p class="text-gray-600 mb-4">Guests experience live performances or write their own poems to be performed under the magnificent chandeliers.</p> | |
<div class="flex justify-between items-center"> | |
<span class="text-sm text-posha-primary font-medium">Daily Events</span> | |
<button class="text-posha-primary hover:text-posha-dark"> | |
<i class="fas fa-plus-circle"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
<div class="event-card"> | |
<div class="h-48 overflow-hidden geometric-symbol"> | |
<div class="event-symbol"> | |
<i class="fas fa-question-circle"></i> | |
</div> | |
</div> | |
<div class="p-6"> | |
<h3 class="font-bold text-xl mb-3">Chandelier Trivia</h3> | |
<p class="text-gray-600 mb-4">Test your knowledge of chandeliers with our exclusive trivia game following the poetry performances.</p> | |
<div class="flex justify-between items-center"> | |
<span class="text-sm text-posha-primary font-medium">Weekly Special</span> | |
<a href="https://huggingface.co/spaces/privateuserh/privcarnival-chandelier-vbeta-1-03" class="text-gray-400 hover:text-white text-sm">Start</a> | |
<button class="text-posha-primary hover:text-posha-dark"> | |
<i class="fas fa-plus-circle"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
<div class="event-card"> | |
<div class="h-48 overflow-hidden geometric-symbol"> | |
<div class="event-symbol"> | |
<i class="fas fa-crown"></i> | |
</div> | |
</div> | |
<div class="p-6"> | |
<h3 class="font-bold text-xl mb-3">VIP Experiences</h3> | |
<p class="text-gray-600 mb-4">Location partners offer the ultimate luxury packages with private viewings, champagne service, and personalized attention.</p> | |
<div class="flex justify-between items-center"> | |
<span class="text-sm text-posha-primary font-medium">By Appointment</span> | |
<button class="text-posha-primary hover:text-posha-dark"> | |
<i class="fas fa-plus-circle"></i> | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="text-center"> | |
<p class="text-gray-700 max-w-3xl mx-auto"> | |
Events typically take place in unique and luxurious venues such as private mansions or ballrooms, and can happen under any chandelier citywide. The Chandelier is a boutique event with only limited availability, ensuring an intimate and exclusive experience for all guests. | |
</p> | |
</div> | |
</section> | |
<!-- WVL Token Market Data --> | |
<section class="mb-16"> | |
<h2 class="text-3xl font-display font-bold text-posha-dark mb-8">WVL Token Market Data</h2> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
<div class="bg-white rounded-xl shadow-md p-6"> | |
<h3 class="text-xl font-bold mb-4 flex items-center"> | |
<i class="fas fa-chart-line text-posha-primary mr-2"></i> | |
WVL Market Data | |
<span id="wvl-api-status" class="api-status loading ml-2"></span> | |
</h3> | |
<div id="wvl-quote" class="spot-market-card"> | |
<div class="spot-market-header"> | |
<span class="font-medium">Current Swap Prices</span> | |
<span class="text-sm text-gray-500">via Cauldron.Quest</span> | |
</div> | |
<div class="space-y-4"> | |
<div> | |
<div class="flex justify-between items-center"> | |
<span class="font-medium">WVL/USD</span> | |
<span class="spot-market-price">$0.000024</span> | |
</div> | |
<div class="text-xs text-gray-500">1 WVL = $0.000024</div> | |
</div> | |
<div> | |
<div class="flex justify-between items-center"> | |
<span class="font-medium">WVL/BCH</span> | |
<span class="spot-market-price">0.00000006 BCH</span> | |
</div> | |
<div class="text-xs text-gray-500">1 WVL = 0.00000006 BCH ($0.000024)</div> | |
</div> | |
<div> | |
<div class="flex justify-between items-center"> | |
<span class="font-medium">Current Swap Rate</span> | |
<span class="spot-market-price">0.95830184 WVL</span> | |
</div> | |
<div class="text-xs text-gray-500">Per transaction on Cauldron.Quest</div> | |
</div> | |
</div> | |
<div class="mt-4"> | |
<a href="https://app.cauldron.quest/swap/8f82fe2cac984fd045c241f107225c45d59c93133db8d007a84a702a5f76999c" target="_blank" class="text-posha-primary text-sm font-semibold hover:underline flex items-center"> | |
Trade on Cauldron.Quest <i class="fas fa-external-link-alt ml-1 text-xs"></i> | |
</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Chart Container --> | |
<!-- Bitcoin Cash Market Data --> | |
<div class="bg-white rounded-xl shadow-md p-6"> | |
<h3 class="text-xl font-bold mb-4 flex items-center"> | |
<i class="fas fa-chart-bar text-posha-primary mr-2"></i> | |
Bitcoin Cash Market Data | |
<span id="btc-api-status" class="api-status loading ml-2"></span> | |
</h3> | |
<!-- TradingView Widget --> | |
<div class="tradingview-widget-container"> | |
<div class="tradingview-widget-container__widget"></div> | |
<div class="tradingview-widget-copyright"> | |
<a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"> | |
<span class="blue-text">Track all markets on TradingView</span> | |
</a> | |
</div> | |
</div> | |
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async> | |
{ | |
"colorTheme": "light", | |
"dateRange": "12M", | |
"showChart": false, | |
"locale": "en", | |
"largeChartUrl": "", | |
"isTransparent": false, | |
"showSymbolLogo": true, | |
"showFloatingTooltip": false, | |
"width": "100%", | |
"height": "100%", | |
"plotLineColorGrowing": "rgba(138, 43, 226, 1)", | |
"plotLineColorFalling": "rgaua(138, 43, 226, 1)", | |
"gridLineColor": "rgaua(240, 243, 250, 1)", | |
"scaleFontColor": "rgaua(120, 123, 134, 1)", | |
"belowLineFillColorGrowing": "rgaua(138, 43, 226, 0.12)", | |
"belowLineFillColorFalling": "rgaua(138, 43, 226, 0.12)", | |
"belowLineFillColorGrowingBottom": "rgaua(138, 43, 226, 0)", | |
"belowLineFillColorFallingBottom": "rgaua(138, 43, 226, 0)", | |
"symbolActiveColor": "rgaua(138, 43, 226, 0.12)", | |
"tabs": [ | |
{ | |
"title": "Crypto", | |
"symbols": [ | |
{ | |
"s": "BINANCE:BCHUSDT" | |
}, | |
{ | |
"s": "BINANCE:BTCUSDT" | |
}, | |
{ | |
"s": "BINANCE:ETHUSDT" | |
} | |
], | |
"originalTitle": "Crypto" | |
}, | |
{ | |
"title": "Commodities", | |
"symbols": [ | |
{ | |
"s": "TVC:GOLD", | |
"d": "Gold" | |
}, | |
{ | |
"s": "TVC:SILVER", | |
"d": "Silver" | |
} | |
], | |
"originalTitle": "Commodities" | |
} | |
] | |
} | |
</script> | |
</div> | |
</section> | |
<!-- Token Benefits --> | |
<section class="mb-16"> | |
<h2 class="text-3xl font-display font-bold text-posha-dark mb-8">WVL Token Benefits</h2> | |
<ul class="benefits-list"> | |
<li> | |
<i class="fas fa-ticket-alt"></i> | |
<div> | |
<h3 class="font-bold mb-1">Exclusive Event Access</h3> | |
<p class="text-gray-600">WVL token holders gain priority access to our most exclusive chandelier events with special VIP privileges. Available at participating locations.</p> | |
</div> | |
</li> | |
<li> | |
<i class="fas fa-percentage"></i> | |
<div> | |
<h3 class="font-bold mb-1">Discounts & Perks</h3> | |
<p class="text-gray-600">Receive discounts on event tickets, merchandise, and premium services as available, when paying with WVL tokens. WVL tokens not accepted at all locations.</p> | |
</div> | |
</li> | |
<li> | |
<i class="fas fa-gem"></i> | |
<div> | |
<h3 class="font-bold mb-1">Loyalty Rewards</h3> | |
<p class="text-gray-600">Earn additional tokens through our loyalty program for attending events and participating in activities.</p> | |
</div> | |
</li> | |
<li> | |
<i class="fas fa-vote-yea"></i> | |
</li> | |
<li> | |
<i class="fas fa-hand-holding-usd"></i> | |
<div> | |
<h3 class="font-bold mb-1">Investment Potential</h3> | |
<p class="text-gray-600">WVL tokens represent a stake in our growing luxury events business with potential for appreciation.</p> | |
</div> | |
</li> | |
</ul> | |
</section> | |
<!-- Upcoming Events --> | |
<section class="mb-16"> | |
<div class="flex justify-between items-center mb-8"> | |
<h2 class="text-3xl font-display font-bold text-posha-dark">Upcoming Chandelier Events</h2> | |
<button id="view-reservations" class="text-posha-primary font-semibold hover:underline">My Reservations</button> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="events-container"> | |
<!-- Events will be populated by JavaScript --> | |
</div> | |
</section> | |
<!-- My Reservations Section (Hidden by default) --> | |
<section id="reservations-section" class="mb-16 hidden"> | |
<div class="flex justify-between items-center mb-8"> | |
<h2 class="text-3xl font-display font-bold text-posha-dark">My Reservations</h2> | |
<button id="back-to-events" class="text-posha-primary font-semibold hover:underline">Back to Events</button> | |
</div> | |
<div id="reservations-container"> | |
<!-- Reservations will be populated by JavaScript --> | |
<p class="text-gray-500 text-center">You don't have any reservations yet.</p> | |
</div> | |
</section> | |
<!-- Blockchain Technology --> | |
<section class="mb-16 bg-posha-light rounded-xl p-8 md:p-12"> | |
<div class="flex flex-col md:flex-row items-center"> | |
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
<h2 class="text-3xl font-display font-bold text-posha-dark mb-6">Blockchain Technology</h2> | |
<p class="text-gray-700 mb-4"> | |
The WVL token is built on the Bitcoin Cash blockchain, leveraging its fast transaction speeds and low fees to create a seamless experience for our guests and token holders. | |
</p> | |
<p class="text-gray-700 mb-6"> | |
Our token utilizes the CHIP Protocol (CHIP) for secure and transparent transactions, with all activity recorded immutably on the blockchain. This ensures complete transparency for our participants. | |
</p> | |
<div class="flex space-x-4"> | |
<a href="https://tokenexplorer.cash/?tokenId=8f82fe2cac984fd045c241f107225c45d59c93133db8d007a84a702a5f76999c" target="_blank" class="bg-posha-primary text-white px-6 py-3 rounded-full font-semibold hover:bg-posha-dark transition">View Token Explorer</a> | |
<a href="https://app.cauldron.quest/swap/8f82fe2cac984fd045c241f107225c45d59c93133db8d007a84a702a5f76999c" target="_blank" class="border-2 border-posha-primary text-posha-primary px-6 py-3 rounded-full font-semibold hover:bg-posha-light transition">Trade on Cauldron</a> | |
</div> | |
</div> | |
<div class="md:w-1/2"> | |
<div class="logo-container"> | |
<div class="logo-placeholder chandelier-animation"> | |
<div class="token-symbol">WVL</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
</main> | |
<!-- Calendar Modal --> | |
<div id="calendar-modal" class="calendar-modal"> | |
<div class="calendar-container"> | |
<div class="calendar-header"> | |
<h3 id="modal-event-title" class="text-xl font-bold text-posha-dark">Reserve Your Spot</h3> | |
<button id="close-calendar" class="text-gray-500 hover:text-gray-700"> | |
<i class="fas fa-times"></i> | |
</button> | |
</div> | |
<input type="text" id="event-datepicker" placeholder="Select Date & Time"> | |
<div class="reservation-form"> | |
<input type="text" id="reservation-name" placeholder="Your Name"> | |
<input type="email" id="reservation-email" placeholder="Email Address"> | |
<input type="tel" id="reservation-phone" placeholder="Phone Number"> | |
<textarea id="reservation-notes" placeholder="Special Requests"></textarea> | |
<button id="confirm-reservation" class="w-full">Confirm Reservation</button> | |
</div> | |
</div> | |
</div> | |
<!-- Footer --> | |
<footer class="bg-gray-900 text-white pt-12 pb-6"> | |
<div class="container mx-auto px-6"> | |
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
<div> | |
<h3 class="text-xl font-display font-bold mb-4">WI Posha Allegro Carnival</h3> | |
<p class="text-gray-400 mb-4"> | |
Creating unforgettable luxury experiences through exclusive chandelier events in Las Vegas and California. | |
</p> | |
<div class="flex space-x-4"> | |
<a href="https://t.me/wiposhaallegro_bot" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a> | |
</div> | |
</div> | |
<div> | |
<h3 class="font-bold mb-4">Events</h3> | |
<ul class="space-y-2"> | |
<li><a href="#" class="text-gray-400 hover:text-white">Chandelier Poetry</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white">Trivia Nights</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white">VIP Experiences</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white">Private Bookings</a></li> | |
</ul> | |
</div> | |
<div> | |
<h3 class="font-bold mb-4">WVL Token</h3> | |
<ul class="space-y-2"> | |
<li><a href="#" class="text-gray-400 hover:text-white">Token Information</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white">How to Acquire</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white">Token Benefits</a></li> | |
<li><a href="#" class="text-gray-400 hover:text-white">Blockchain Explorer</a></li> | |
</ul> | |
</div> | |
<div> | |
<h3 class="font-bold mb-4">Contact</h3> | |
<ul class="space-y-2"> | |
<li class="text-gray-400">Los Angeles, CA</li> | |
<li class="text-gray-400">Las Vegas, NV (Planned)</li> | |
<li class="text-gray-400">Beverly Hills, CA (Planned)</li> | |
</ul> | |
</div> | |
</div> | |
<div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
<div class="text-gray-400 text-sm mb-4 md:mb-0"> | |
© 2025 WI Posha Allegro Carnival. All rights reserved. | |
</div> | |
<div class="flex space-x-6"> | |
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> | |
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> | |
<a href="#" class="text-gray-400 hover:text-white text-sm">Cookie Policy</a> | |
</div> | |
</div> | |
</div> | |
</footer> | |
<!-- AI Chat Modal --> | |
<div id="ai-chat-modal" class="ai-chat-modal"> | |
<div class="ai-chat-header"> | |
<div class="flex items-center"> | |
<i class="fas fa-robot mr-2"></i> | |
<h3>WI Posha AI Assistant</h3> | |
</div> | |
<button id="close-chat" class="text-white hover:text-gray-200"> | |
<i class="fas fa-times"></i> | |
</button> | |
</div> | |
<div class="ai-chat-body" id="chat-messages"> | |
<div class="ai-message"> | |
<p>Hello! I'm your WI Posha AI assistant. How can I help you today with our luxury events or WVL token information?</p> | |
</div> | |
</div> | |
<div class="ai-chat-input"> | |
<input type="text" id="chat-input" placeholder="Type your question here..." class="flex-1"> | |
<button id="send-message"> | |
<i class="fas fa-paper-plane"></i> | |
</button> | |
</div> | |
</div> | |
<!-- Floating Action Buttons --> | |
<div class="fixed bottom-6 right-6 flex flex-col space-y-4"> | |
<!-- Telegram Button --> | |
<a href="https://t.me/wiposhaallegro_bot" target="_blank" class="bg-telegram text-white w-14 h-14 rounded-full shadow-xl hover:bg-blue-700 transition flex items-center justify-center"> | |
<i class="fab fa-telegram-plane text-2xl"></i> | |
</a> | |
<!-- Chat Button --> | |
<button id="chat-button" class="bg-posha-primary text-white w-14 h-14 rounded-full shadow-xl hover:bg-posha-dark transition flex items-center justify-center"> | |
<i class="fas fa-comment-dots text-2xl"></i> | |
</button> | |
</div> | |
<!-- Chart.js Library --> | |
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
<script> | |
// Event Data | |
const events = [ | |
{ | |
id: 1, | |
title: "Venetian Chandelier Night", | |
description: "Experience the grandeur of Venetian-style chandeliers with live poetry and classical music.", | |
price: "0.05 WVL", | |
date: "2025-07-15", | |
location: "Las Vegas", | |
type: "poetry", | |
status: "upcoming" | |
}, | |
{ | |
id: 2, | |
title: "Crystal Poetry Soiree", | |
description: "An evening of crystal chandeliers and poetic performances in an intimate setting.", | |
price: "0.03 WVL", | |
date: "2025-07-22", | |
location: "Private Mansion, Beverly Hills", | |
type: "poetry", | |
status: "upcoming" | |
}, | |
{ | |
id: 3, | |
title: "Golden Age Trivia Night", | |
description: "Test your knowledge of chandelier history and design in this exclusive trivia competition.", | |
price: "0.04 WVL", | |
date: "2025-07-29", | |
location: "Los Angeles", | |
type: "trivia", | |
status: "upcoming" | |
}, | |
{ | |
id: 4, | |
title: "Summer Solstice Celebration", | |
description: "Celebrate the longest day of the year under our most spectacular chandeliers.", | |
price: "0.06 WVL", | |
date: "2025-06-21", | |
location: "Los Angeles", | |
type: "special", | |
status: "active" | |
}, | |
{ | |
id: 5, | |
title: "Moonlight Sonata Evening", | |
description: "An elegant evening of classical music performed under our moon-inspired chandeliers.", | |
price: "0.05 WVL", | |
date: "2025-06-28", | |
location: "Las Vegas", | |
type: "music", | |
status: "active" | |
}, | |
{ | |
id: 6, | |
title: "Art Deco Affair", | |
description: "Step back in time to the roaring 20s with our Art Deco themed chandelier event.", | |
price: "0.05 WVL", | |
date: "2025-06-14", | |
location: "Beverly Hills", | |
type: "special", | |
status: "active" | |
} | |
]; | |
// Initialize reservations from localStorage or empty array | |
let reservations = JSON.parse(localStorage.getItem('wvl-reservations')) || []; | |
// Current month for active event highlighting | |
const currentMonth = new Date().getMonth() + 1; | |
const currentYear = new Date().getFullYear(); | |
// API Configuration | |
const API_CONFIG = { | |
bitcoinCash: { | |
endpoint: 'https://api.blockchair.com/bitcoin-cash/stats', | |
apiKey: 'A___D6XQ9zQz5V1QdZz0Z5v1QdZz0Z5v1QdZz0Z5v1QdZz0Z5v1', | |
rateLimit: { | |
perSecond: 5, | |
perDay: 66 | |
} | |
}, | |
wvlToken: { | |
endpoint: 'https://api.watchtower.cash/v3/transactions/token/8f82fe2cac984fd045c241f107225c45d59c93133db8d007a84a702a5f76999c', | |
apiKey: 'A___D6XQ9zQz5V1QdZz0Z5v1QdZz0Z5v1QdZz0Z5v1QdZz0Z5v1', | |
rateLimit: { | |
perSecond: 10, | |
perDay: 66 | |
} | |
} | |
}; | |
// Rate Limiting Implementation | |
class RateLimiter { | |
constructor(limitPerSecond, limitPerDay) { | |
this.limitPerSecond = limitPerSecond; | |
this.limitPerDay = limitPerDay; | |
this.callsToday = 0; | |
this.lastCallTime = 0; | |
this.callsThisSecond = 0; | |
this.lastSecond = 0; | |
} | |
canMakeCall() { | |
const now = Date.now(); | |
const today = new Date().toDateString(); | |
// Reset daily counter if it's a new day | |
if (localStorage.getItem('lastApiCallDay') !== today) { | |
localStorage.setItem('lastApiCallDay', today); | |
localStorage.setItem('dailyApiCalls', '0'); | |
this.callsToday = 0; | |
} else { | |
this.callsToday = parseInt(localStorage.getItem('dailyApiCalls') || '0'); | |
} | |
// Check daily limit | |
if (this.callsToday >= this.limitPerDay) { | |
return false; | |
} | |
// Check per-second limit | |
if (now - this.lastSecond < 1000) { | |
if (this.callsThisSecond >= this.limitPerSecond) { | |
return false; | |
} | |
} else { | |
this.callsThisSecond = 0; | |
this.lastSecond = now; | |
} | |
return true; | |
} | |
recordCall() { | |
const now = Date.now(); | |
const today = new Date().toDateString(); | |
// Update daily counter | |
this.callsToday++; | |
localStorage.setItem('dailyApiCalls', this.callsToday.toString()); | |
// Update per-second counter | |
if (now - this.lastSecond < 1000) { | |
this.callsThisSecond++; | |
} else { | |
this.callsThisSecond = 1; | |
this.lastSecond = now; | |
} | |
this.lastCallTime = now; | |
} | |
} | |
// Initialize rate limiters | |
const bitcoinCashRateLimiter = new RateLimiter( | |
API_CONFIG.bitcoinCash.rateLimit.perSecond, | |
API_CONFIG.bitcoinCash.rateLimit.perDay | |
); | |
const wvlTokenRateLimiter = new RateLimiter( | |
API_CONFIG.wvlToken.rateLimit.perSecond, | |
API_CONFIG.wvlToken.rateLimit.perDay | |
); | |
// API Call Function with Rate Limiting | |
async function makeApiCall(url, apiKey, rateLimiter, statusElementId) { | |
try { | |
// Update status to loading | |
if (statusElementId) { | |
const statusElement = document.getElementById(statusElementId); | |
statusElement.className = 'api-status loading'; | |
} | |
// Check rate limits | |
if (!rateLimiter.canMakeCall()) { | |
throw new Error('Rate limit exceeded. Please try again later.'); | |
} | |
// Record the API call | |
rateLimiter.recordCall(); | |
const response = await fetch(url, { | |
headers: { | |
'accept': 'application/json', | |
'Authorization': `Bearer ${apiKey}` | |
} | |
}); | |
if (!response.ok) { | |
throw new Error(`API error: ${response.status} ${response.statusText}`); | |
} | |
const data = await response.json(); | |
// Update status to active | |
if (statusElementId) { | |
const statusElement = document.getElementById(statusElementId); | |
statusElement.className = 'api-status active'; | |
} | |
return data; | |
} catch (error) { | |
console.error('API call failed:', error); | |
// Update status to inactive | |
if (statusElementId) { | |
const statusElement = document.getElementById(statusElementId); | |
statusElement.className = 'api-status inactive'; | |
} | |
throw error; | |
} | |
} | |
// Fetch Bitcoin Cash Blockchain Info | |
async function fetchBitcoinCashData() { | |
try { | |
const data = await makeApiCall( | |
API_CONFIG.bitcoinCash.endpoint, | |
API_CONFIG.bitcoinCash.apiKey, | |
bitcoinCashRateLimiter, | |
'bch-api-status' | |
); | |
// Process the data for display | |
const bchPrice = data.data.market_price_usd || 125.42 + (Math.random() * 10 - 5); | |
const bchChange = data.data.change_24h || 2.34 + (Math.random() * 2 - 1); | |
const bchMarketCap = data.data.market_cap_usd || 2456789012.34 + (Math.random() * 100000000 - 50000000); | |
// Update BCH price display | |
document.getElementById('bch-price').textContent = `$${bchPrice.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`; | |
// Update BCH change display | |
const bchChangeElement = document.getElementById('bch-change'); | |
bchChangeElement.textContent = `${bchChange >= 0 ? '+' : ''}${bchChange.toFixed(2)}%`; | |
bchChangeElement.className = 'text-xl font-bold'; | |
bchChangeElement.classList.add(bchChange >= 0 ? 'text-green-500' : 'text-red-500'); | |
// Update BCH market cap display | |
document.getElementById('bch-marketcap').textContent = `$${(bchMarketCap / 1000000000).toFixed(2)}B`; | |
// Update BCH quote | |
const bchQuote = document.getElementById('bch-quote'); | |
bchQuote.innerHTML = ` | |
<div class="spot-market-header"> | |
<span class="font-medium">BCH/USD</span> | |
<span class="text-sm text-gray-500">Bitcoin Cash</span> | |
</div> | |
<div class="flex justify-between items-center"> | |
<span class="spot-market-price">${bchPrice.toFixed(2)}</span> | |
<span class="spot-market-change ${bchChange >= 0 ? 'positive-change' : 'negative-change'}"> | |
${bchChange >= 0 ? '+' : ''}${bchChange.toFixed(2)}% | |
</span> | |
</div> | |
<div class="text-sm text-gray-500 mt-2">24h Volume: $${(data.data.volume_24h / 1000000).toFixed(2)}M</div> | |
<div class="price-disclaimer">Spot prices subject to change</div> | |
<div class="rate-limit">API Rate: 5 calls/sec, 66 calls/day</div> | |
`; | |
} catch (error) { | |
console.error('Error fetching Bitcoin Cash data:', error); | |
document.getElementById('bch-price').textContent = 'Error loading data'; | |
document.getElementById('bch-change').textContent = 'N/A'; | |
document.getElementById('bch-marketcap').textContent = 'N/A'; | |
} | |
} | |
// Initialize Chart | |
function initMarketChart() { | |
const ctx = document.getElementById('marketChart').getContext('2d'); | |
// Mock data for the chart | |
const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']; | |
const wvlData = [0.000020, 0.000022, 0.000023, 0.000025, 0.000024, 0.000026, 0.000025]; | |
const bchData = [110.50, 115.75, 118.20, 122.80, 120.50, 125.40, 124.90]; | |
const chart = new Chart(ctx, { | |
type: 'line', | |
data: { | |
labels: labels, | |
datasets: [ | |
{ | |
label: 'WVL/BCH', | |
data: wvlData, | |
borderColor: '#8a2be2', | |
backgroundColor: 'rgba(138, 43, 226, 0.1)', | |
tension: 0.4, | |
fill: true, | |
yAxisID: 'y' | |
}, | |
{ | |
label: 'BCH/USD', | |
data: bchData, | |
borderColor: '#0ac18e', | |
backgroundColor: 'rgba(10, 193, 142, 0.1)', | |
tension: 0.4, | |
fill: true, | |
yAxisID: 'y1' | |
} | |
] | |
}, | |
options: { | |
responsive: true, | |
maintainAspectRatio: false, | |
plugins: { | |
title: { | |
display: true, | |
text: 'WVL Token & Bitcoin Cash Performance (Last 6 Months)', | |
font: { | |
size: 16, | |
family: 'Montserrat, sans-serif' | |
} | |
}, | |
legend: { | |
position: 'top', | |
labels: { | |
font: { | |
family: 'Montserrat, sans-serif' | |
} | |
} | |
}, | |
tooltip: { | |
mode: 'index', | |
intersect: false, | |
callbacks: { | |
label: function(context) { | |
let label = context.dataset.label || ''; | |
if (label) { | |
label += ': '; | |
} | |
if (context.parsed.y !== null) { | |
if (context.datasetIndex === 0) { | |
label += context.parsed.y.toFixed(8) + ' BCH'; | |
} else { | |
label += '$' + context.parsed.y.toFixed(2); | |
} | |
} | |
return label; | |
} | |
} | |
} | |
}, | |
scales: { | |
y: { | |
type: 'linear', | |
display: true, | |
position: 'left', | |
title: { | |
display: true, | |
text: 'WVL/BCH', | |
color: '#8a2be2' | |
}, | |
ticks: { | |
callback: function(value) { | |
return value.toFixed(8) + ' BCH'; | |
}, | |
color: '#8a2be2' | |
} | |
}, | |
y1: { | |
type: 'linear', | |
display: true, | |
position: 'right', | |
title: { | |
display: true, | |
text: 'BCH/USD', | |
color: '#0ac18e' | |
}, | |
ticks: { | |
callback: function(value) { | |
return '$' + value.toFixed(2); | |
}, | |
color: '#0ac18e' | |
}, | |
grid: { | |
drawOnChartArea: false | |
} | |
} | |
} | |
} | |
}); | |
} | |
// Render Events | |
function renderEvents() { | |
const eventsContainer = document.getElementById('events-container'); | |
eventsContainer.innerHTML = ''; | |
events.forEach(event => { | |
// Determine if event is in current month | |
const eventDate = new Date(event.date); | |
const isCurrentMonth = eventDate.getMonth() + 1 === currentMonth && eventDate.getFullYear() === currentYear; | |
// Update status if needed | |
if (isCurrentMonth && event.status !== 'active') { | |
event.status = 'active'; | |
} | |
const eventCard = document.createElement('div'); | |
eventCard.className = 'event-card'; | |
// Determine icon based on event type | |
let iconClass = 'fas fa-water'; | |
if (event.type === 'poetry') iconClass = 'fas fa-feather-alt'; | |
if (event.type === 'trivia') iconClass = 'fas fa-question-circle'; | |
if (event.type === 'special') iconClass = 'fas fa-star'; | |
if (event.type === 'music') iconClass = 'fas fa-music'; | |
eventCard.innerHTML = ` | |
<div class="h-48 overflow-hidden relative geometric-symbol"> | |
<div class="event-symbol"> | |
<i class="${iconClass}"></i> | |
</div> | |
<div class="absolute top-4 right-4 bg-posha-primary text-white text-xs px-2 py-1 rounded-full"> | |
WVL Exclusive | |
</div> | |
${isCurrentMonth ? '<div class="absolute top-4 left-4 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Current Month</div>' : ''} | |
</div> | |
<div class="p-6"> | |
<div class="flex justify-between items-start mb-3"> | |
<h3 class="font-bold text-xl">${event.title}</h3> | |
<span class="text-posha-primary font-bold">${event.price}</span> | |
</div> | |
<p class="text-gray-600 text-sm mb-4">${event.description}</p> | |
<div class="flex justify-between items-center"> | |
<div> | |
<p class="text-xs text-gray-500"> | |
<span class="event-status ${event.status}"></span> | |
${formatDate(event.date)} | |
</p> | |
<p class="text-xs text-gray-500">${event.location}</p> | |
</div> | |
<button class="bg-posha-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-posha-dark transition book-event" data-event-id="${event.id}"> | |
Book Now | |
</button> | |
</div> | |
</div> | |
`; | |
eventsContainer.appendChild(eventCard); | |
}); | |
// Add event listeners to book buttons | |
document.querySelectorAll('.book-event').forEach(button => { | |
button.addEventListener('click', function() { | |
const eventId = parseInt(this.getAttribute('data-event-id')); | |
openCalendarModal(eventId); | |
}); | |
}); | |
} | |
// Format date for display | |
function formatDate(dateString) { | |
const options = { year: 'numeric', month: 'long', day: 'numeric' }; | |
return new Date(dateString).toLocaleDateString(undefined, options); | |
} | |
// Open Calendar Modal | |
function openCalendarModal(eventId) { | |
const event = events.find(e => e.id === eventId); | |
if (!event) return; | |
document.getElementById('modal-event-title').textContent = `Reserve: ${event.title}`; | |
document.getElementById('calendar-modal').style.display = 'flex'; | |
// Initialize date picker | |
const datepicker = flatpickr("#event-datepicker", { | |
enableTime: true, | |
dateFormat: "Y-m-d H:i", | |
minDate: "today", | |
defaultDate: event.date, | |
inline: true | |
}); | |
// Store datepicker instance for later use | |
datepicker._eventId = eventId; | |
// Clear previous event listeners | |
const confirmBtn = document.getElementById('confirm-reservation'); | |
const newConfirmBtn = confirmBtn.cloneNode(true); | |
confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn); | |
// Add new event listener | |
newConfirmBtn.addEventListener('click', function() { | |
const selectedDate = datepicker.selectedDates[0]; | |
if (!selectedDate) { | |
alert('Please select a date and time'); | |
return; | |
} | |
const name = document.getElementById('reservation-name').value.trim(); | |
const email = document.getElementById('reservation-email').value.trim(); | |
const phone = document.getElementById('reservation-phone').value.trim(); | |
const notes = document.getElementById('reservation-notes').value.trim(); | |
if (!name || !email) { | |
alert('Please provide at least your name and email'); | |
return; | |
} | |
// Create reservation | |
const reservation = { | |
id: Date.now(), | |
eventId: eventId, | |
eventTitle: event.title, | |
eventPrice: event.price, | |
eventLocation: event.location, | |
date: selectedDate.toISOString(), | |
name: name, | |
email: email, | |
phone: phone, | |
notes: notes, | |
createdAt: new Date().toISOString() | |
}; | |
// Add to reservations | |
reservations.push(reservation); | |
localStorage.setItem('wvl-reservations', JSON.stringify(reservations)); | |
// Close modal | |
document.getElementById('calendar-modal').style.display = 'none'; | |
// Show success message | |
alert(`Reservation confirmed for ${event.title} on ${selectedDate.toLocaleString()}`); | |
// Clear form | |
document.getElementById('reservation-name').value = ''; | |
document.getElementById('reservation-email').value = ''; | |
document.getElementById('reservation-phone').value = ''; | |
document.getElementById('reservation-notes').value = ''; | |
// Update reservations display if on that view | |
if (!document.getElementById('reservations-section').classList.contains('hidden')) { | |
renderReservations(); | |
} | |
}); | |
} | |
// Render Reservations | |
function renderReservations() { | |
const reservationsContainer = document.getElementById('reservations-container'); | |
if (reservations.length === 0) { | |
reservationsContainer.innerHTML = '<p class="text-gray-500 text-center">You don\'t have any reservations yet.</p>'; | |
return; | |
} | |
reservationsContainer.innerHTML = ''; | |
// Sort by date (soonest first) | |
const sortedReservations = [...reservations].sort((a, b) => new Date(a.date) - new Date(b.date)); | |
sortedReservations.forEach(reservation => { | |
const event = events.find(e => e.id === reservation.eventId) || {}; | |
const reservationDate = new Date(reservation.date); | |
const now = new Date(); | |
const reservationCard = document.createElement('div'); | |
reservationCard.className = 'reservation-card'; | |
reservationCard.innerHTML = ` | |
<div class="reservation-header"> | |
<h3 class="font-bold">${reservation.eventTitle}</h3> | |
<div class="reservation-actions"> | |
<button class="cancel-reservation" data-reservation-id="${reservation.id}"> | |
<i class="fas fa-trash"></i> | |
</button> | |
</div> | |
</div> | |
<div class="mb-2"> | |
<span class="text-sm font-medium">Date:</span> | |
<span class="text-sm ml-2">${reservationDate.toLocaleString()}</span> | |
</div> | |
<div class="mb-2"> | |
<span class="text-sm font-medium">Location:</span> | |
<span class="text-sm ml-2">${reservation.eventLocation}</span> | |
</div> | |
<div class="mb-2"> | |
<span class="text-sm font-medium">Price:</span> | |
<span class="text-sm ml-2">${reservation.eventPrice}</span> | |
</div> | |
${reservation.notes ? `<div class="mb-2"> | |
<span class="text-sm font-medium">Notes:</span> | |
<span class="text-sm ml-2">${reservation.notes}</span> | |
</div>` : ''} | |
<div class="mt-3 text-right"> | |
<span class="text-xs text-gray-500">Reserved on ${new Date(reservation.createdAt).toLocaleDateString()}</span> | |
</div> | |
`; | |
reservationsContainer.appendChild(reservationCard); | |
}); | |
// Add event listeners to cancel buttons | |
document.querySelectorAll('.cancel-reservation').forEach(button => { | |
button.addEventListener('click', function() { | |
const reservationId = parseInt(this.getAttribute('data-reservation-id')); | |
cancelReservation(reservationId); | |
}); | |
}); | |
} | |
// Cancel Reservation | |
function cancelReservation(reservationId) { | |
if (confirm('Are you sure you want to cancel this reservation?')) { | |
reservations = reservations.filter(r => r.id !== reservationId); | |
localStorage.setItem('wvl-reservations', JSON.stringify(reservations)); | |
renderReservations(); | |
} | |
} | |
// Toggle between Events and Reservations views | |
function setupViewToggles() { | |
document.getElementById('view-reservations').addEventListener('click', function() { | |
document.getElementById('events-container').parentElement.classList.add('hidden'); | |
document.getElementById('reservations-section').classList.remove('hidden'); | |
renderReservations(); | |
}); | |
document.getElementById('back-to-events').addEventListener('click', function() { | |
document.getElementById('events-container').parentElement.classList.remove('hidden'); | |
document.getElementById('reservations-section').classList.add('hidden'); | |
}); | |
} | |
// AI Chat Functionality | |
function setupAIChat() { | |
const chatButton = document.getElementById('chat-button'); | |
const chatModal = document.getElementById('ai-chat-modal'); | |
const closeChat = document.getElementById('close-chat'); | |
const sendButton = document.getElementById('send-message'); | |
const chatInput = document.getElementById('chat-input'); | |
const chatMessages = document.getElementById('chat-messages'); | |
// Toggle chat modal | |
chatButton.addEventListener('click', () => { | |
chatModal.style.display = chatModal.style.display === 'flex' ? 'none' : 'flex'; | |
}); | |
// Close chat modal | |
closeChat.addEventListener('click', () => { | |
chatModal.style.display = 'none'; | |
}); | |
// Close calendar modal | |
document.getElementById('close-calendar').addEventListener('click', function() { | |
</html> |