Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BeatTheOdds | Music Tour Betting</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=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .blinking { | |
| animation: blink 1.5s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .live-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| z-index: 10; | |
| } | |
| .odds-change-up { | |
| color: #4ade80; | |
| } | |
| .odds-change-down { | |
| color: #f87171; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header/Navbar --> | |
| <header class="gradient-bg border-b border-gray-800 sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-music text-purple-500 text-2xl"></i> | |
| <h1 class="text-xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">BeatTheOdds</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Tours</a> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Artists</a> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Live Events</a> | |
| <a href="#" class="text-gray-300 hover:text-white font-medium">Promotions</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full font-medium transition"> | |
| Sign Up | |
| </button> | |
| <button class="text-white border border-purple-500 hover:bg-purple-900/30 px-4 py-2 rounded-full font-medium transition"> | |
| Login | |
| </button> | |
| </div> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight"> | |
| Bet on your favorite <span class="text-purple-400">artist's tour</span> performance | |
| </h1> | |
| <p class="text-gray-300 text-lg mb-8"> | |
| Predict ticket sales, venue capacities, and tour extensions before they happen. | |
| Get the best odds in the music betting industry. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium text-lg transition"> | |
| Join Now | |
| </button> | |
| <button class="text-white border border-purple-500 hover:bg-purple-900/30 px-6 py-3 rounded-full font-medium text-lg transition"> | |
| How It Works | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="bg-gray-800/50 backdrop-blur-md rounded-2xl p-6 border border-gray-700 shadow-xl"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Live Tour Bets</h3> | |
| <div class="flex items-center"> | |
| <span class="h-3 w-3 bg-red-500 rounded-full mr-2 blinking"></span> | |
| <span class="text-sm">LIVE</span> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Bet Card 1 --> | |
| <div class="bg-gray-900 rounded-xl p-4 border border-gray-700 transition card-hover relative"> | |
| <div class="absolute -top-2 -left-2 bg-purple-600 text-white text-xs px-2 py-1 rounded-full"> | |
| HOT | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist" class="w-10 h-10 rounded-full border-2 border-purple-500"> | |
| <div class="ml-3"> | |
| <h4 class="font-bold">Taylor Swift</h4> | |
| <p class="text-xs text-gray-400">Eras Tour - North America</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-400">Total Attendance</p> | |
| <p class="font-bold">2.1M <span class="text-xs text-gray-400">(Current)</span></p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-400">Over/Under</p> | |
| <p class="font-bold">2.5M</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg text-sm font-medium transition"> | |
| Over (-120) | |
| </button> | |
| <button class="flex-1 bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg text-sm font-medium transition"> | |
| Under (+100) | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Bet Card 2 --> | |
| <div class="bg-gray-900 rounded-xl p-4 border border-gray-700 transition card-hover relative"> | |
| <div class="absolute -top-2 -left-2 bg-yellow-500 text-gray-900 text-xs px-2 py-1 rounded-full"> | |
| NEW | |
| </div> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist" class="w-10 h-10 rounded-full border-2 border-yellow-500"> | |
| <div class="ml-3"> | |
| <h4 class="font-bold">Drake</h4> | |
| <p class="text-xs text-gray-400">It's All A Blur Tour</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-400">Sold Out Shows</p> | |
| <p class="font-bold">12 <span class="text-xs text-gray-400">(Current)</span></p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-400">Over/Under</p> | |
| <p class="font-bold">18</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg text-sm font-medium transition"> | |
| Over (+150) | |
| </button> | |
| <button class="flex-1 bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg text-sm font-medium transition"> | |
| Under (-110) | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Tours Section --> | |
| <section class="py-16 bg-gray-900/50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-10"> | |
| <h2 class="text-3xl font-bold">Featured Tours</h2> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 font-medium flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Tour Card 1 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition card-hover"> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/600x400/?concert,1" alt="Tour" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4"> | |
| <h3 class="text-xl font-bold">Beyoncé Renaissance Tour</h3> | |
| <p class="text-sm text-gray-300">World Tour 2023</p> | |
| </div> | |
| <div class="absolute top-4 right-4 bg-purple-600 text-white text-xs px-2 py-1 rounded-full"> | |
| Trending | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Current Sales</p> | |
| <p class="font-bold">$185M</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-400">Projected</p> | |
| <p class="font-bold">$220M</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Under $200M</span> | |
| <span>Over $200M</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg text-sm font-medium transition"> | |
| Bet Now | |
| </button> | |
| <button class="w-10 bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg transition"> | |
| <i class="fas fa-info"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tour Card 2 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition card-hover"> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/600x400/?concert,2" alt="Tour" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4"> | |
| <h3 class="text-xl font-bold">Ed Sheeran Mathematics</h3> | |
| <p class="text-sm text-gray-300">European Leg</p> | |
| </div> | |
| <div class="absolute top-4 right-4 bg-green-500 text-gray-900 text-xs px-2 py-1 rounded-full"> | |
| High Volume | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Current Sales</p> | |
| <p class="font-bold">$92M</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-400">Projected</p> | |
| <p class="font-bold">$110M</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Under $100M</span> | |
| <span>Over $100M</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-green-500 to-blue-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg text-sm font-medium transition"> | |
| Bet Now | |
| </button> | |
| <button class="w-10 bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg transition"> | |
| <i class="fas fa-info"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tour Card 3 --> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 transition card-hover"> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/600x400/?concert,3" alt="Tour" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4"> | |
| <h3 class="text-xl font-bold">Coldplay Music of Spheres</h3> | |
| <p class="text-sm text-gray-300">Asia Pacific Tour</p> | |
| </div> | |
| <div class="absolute top-4 right-4 bg-blue-500 text-white text-xs px-2 py-1 rounded-full"> | |
| New Odds | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Current Sales</p> | |
| <p class="font-bold">$78M</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-400">Projected</p> | |
| <p class="font-bold">$95M</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Under $90M</span> | |
| <span>Over $90M</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg text-sm font-medium transition"> | |
| Bet Now | |
| </button> | |
| <button class="w-10 bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg transition"> | |
| <i class="fas fa-info"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section class="py-16 gradient-bg"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">How It Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800/50 backdrop-blur-md p-6 rounded-xl border border-gray-700 text-center"> | |
| <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-search-dollar text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Find a Tour</h3> | |
| <p class="text-gray-300"> | |
| Browse upcoming tours and select an artist you want to bet on. We track all major tours globally. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800/50 backdrop-blur-md p-6 rounded-xl border border-gray-700 text-center"> | |
| <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Analyze the Odds</h3> | |
| <p class="text-gray-300"> | |
| Review the over/under projections based on current sales data and historical performance. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800/50 backdrop-blur-md p-6 rounded-xl border border-gray-700 text-center"> | |
| <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-coins text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Place Your Bet</h3> | |
| <p class="text-gray-300"> | |
| Wager on whether the tour will exceed or fall short of projections. Collect your winnings! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Live Odds Section --> | |
| <section class="py-16 bg-gray-900/50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-10"> | |
| <h2 class="text-3xl font-bold">Live Odds Movement</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="h-3 w-3 bg-red-500 rounded-full blinking"></span> | |
| <span class="text-sm">LIVE UPDATES</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-700"> | |
| <thead class="bg-gray-900"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Artist/Tour</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Metric</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Current</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Projection</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Over</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Under</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-gray-800 divide-y divide-gray-700"> | |
| <!-- Row 1 --> | |
| <tr class="hover:bg-gray-700/50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full border border-purple-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium">Adele</div> | |
| <div class="text-xs text-gray-400">Weekends With Adele</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Ticket Revenue</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold">$65.2M</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">$75M</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-green-500 font-bold">+120 <i class="fas fa-arrow-up text-xs"></i></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-red-500 font-bold">-140 <i class="fas fa-arrow-down text-xs"></i></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded text-xs transition"> | |
| Bet Now | |
| </button> | |
| </td> | |
| </tr> | |
| <!-- Row 2 --> | |
| <tr class="hover:bg-gray-700/50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full border border-yellow-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium">Bruno Mars</div> | |
| <div class="text-xs text-gray-400">Las Vegas Residency</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Attendance</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold">142,500</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">150,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-green-500 font-bold">+110 <i class="fas fa-arrow-up text-xs"></i></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-red-500 font-bold">-130 <i class="fas fa-arrow-down text-xs"></i></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded text-xs transition"> | |
| Bet Now | |
| </button> | |
| </td> | |
| </tr> | |
| <!-- Row 3 --> | |
| <tr class="hover:bg-gray-700/50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full border border-pink-500" src="https://randomuser.me/api/portraits/women/33.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium">Billie Eilish</div> | |
| <div class="text-xs text-gray-400">Happier Than Ever Tour</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Sold Out Shows</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold">38</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">45</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-green-500 font-bold">-115 <i class="fas fa-arrow-up text-xs"></i></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-red-500 font-bold">-105 <i class="fas fa-arrow-down text-xs"></i></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded text-xs transition"> | |
| Bet Now | |
| </button> | |
| </td> | |
| </tr> | |
| <!-- Row 4 --> | |
| <tr class="hover:bg-gray-700/50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full border border-blue-500" src="https://randomuser.me/api/portraits/men/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium">The Weeknd</div> | |
| <div class="text-xs text-gray-400">After Hours Til Dawn</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">Merch Sales</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold">$8.7M</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm">$12M</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-green-500 font-bold">+180 <i class="fas fa-arrow-up text-xs"></i></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="text-red-500 font-bold">-220 <i class="fas fa-arrow-down text-xs"></i></span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded text-xs transition"> | |
| Bet Now | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 gradient-bg"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Start Betting on Music Tours?</h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"> | |
| Join thousands of music fans who are turning their tour knowledge into real winnings. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-4 rounded-full font-bold text-lg transition"> | |
| Sign Up Now | |
| </button> | |
| <button class="border border-purple-500 text-purple-400 hover:bg-purple-900/30 px-8 py-4 rounded-full font-bold text-lg transition"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-music text-purple-500 text-2xl"></i> | |
| <h3 class="text-xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">BeatTheOdds</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm"> | |
| The premier platform for betting on music tour performance metrics. | |
| Odds and projections updated in real-time. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Live Bets</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Upcoming Tours</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Results</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Promotions</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Information</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">How It Works</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-envelope mr-2"></i> support@beattheodds.com | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-phone mr-2"></i> +1 (555) 123-4567 | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Las Vegas, NV | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <h5 class="text-sm font-bold mb-2">Download Our App</h5> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-2 rounded flex items-center transition"> | |
| <i class="fab fa-apple mr-2"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Download on the</div> | |
| <div class="text-sm font-bold">App Store</div> | |
| </div> | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-2 rounded flex items-center transition"> | |
| <i class="fab fa-google-play mr-2"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Get it on</div> | |
| <div class="text-sm font-bold">Google Play</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 BeatTheOdds. All rights reserved. Must be 21+ to participate.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Bet Slip Modal (Hidden by default) --> | |
| <div id="betModal" class="fixed inset-0 bg-black/80 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-gray-800 rounded-xl max-w-md w-full border border-gray-700"> | |
| <div class="p-4 border-b border-gray-700 flex justify-between items-center"> | |
| <h3 class="text-lg font-bold">Place Your Bet</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-4"> | |
| <img id="modalArtistImg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist" class="w-12 h-12 rounded-full border-2 border-purple-500"> | |
| <div class="ml-3"> | |
| <h4 id="modalArtistName" class="font-bold">Taylor Swift</h4> | |
| <p id="modalTourName" class="text-xs text-gray-400">Eras Tour - North America</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Bet Type</span> | |
| <span id="modalBetType" class="text-sm font-bold text-purple-400">Over 2.5M Attendance</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Odds</span> | |
| <span id="modalOdds" class="text-sm font-bold">-120</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Potential Payout</span> | |
| <span id="modalPayout" class="text-sm font-bold">$183.33</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm text-gray-400 mb-2">Wager Amount ($)</label> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">$</span> | |
| <input type="number" id="wagerAmount" class="bg-gray-700 border border-gray-600 text-white rounded-lg block w-full pl-8 p-2.5" placeholder="100.00" min="5" max="1000"> | |
| </div> | |
| <div class="flex justify-between mt-2 text-xs text-gray-400"> | |
| <span>Min: $5.00</span> | |
| <span>Max: $1,000.00</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex-1 transition"> | |
| Quick $25 | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex-1 transition"> | |
| Quick $50 | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex-1 transition"> | |
| Quick $100 | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700"> | |
| <button id="confirmBet" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-bold transition"> | |
| Confirm Bet | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple modal functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const betButtons = document.querySelectorAll('.bg-green-600, .bg-red-600'); | |
| const modal = document.getElementById('betModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const confirmBet = document.getElementById('confirmBet'); | |
| const wagerAmount = document.getElementById('wagerAmount'); | |
| // Update potential payout when wager changes | |
| wagerAmount.addEventListener('input', function() { | |
| const amount = parseFloat(this.value) || 0; | |
| const oddsText = document.getElementById('modalOdds').textContent; | |
| const odds = parseFloat(oddsText); | |
| let payout; | |
| if (odds > 0) { | |
| payout = amount * (odds / 100) + amount; | |
| } else { | |
| payout = amount / (Math.abs(odds) / 100) + amount; | |
| } | |
| document.getElementById('modalPayout').textContent = '$' + payout.toFixed(2); | |
| }); | |
| // Open modal when bet button is clicked | |
| betButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const card = this.closest('.bg-gray-900'); | |
| const artistName = card.querySelector('h4').textContent; | |
| const tourName = card.querySelector('p.text-xs').textContent; | |
| const artistImg = card.querySelector('img').src; | |
| // Set modal content | |
| document.getElementById('modalArtistName').textContent = artistName; | |
| document.getElementById('modalTourName').textContent = tourName; | |
| document.getElementById('modalArtistImg').src = artistImg; | |
| // Set bet type and odds | |
| if (this.classList.contains('bg-green-600')) { | |
| const overText = this.textContent; | |
| document.getElementById('modalBetType').textContent = overText.replace('Over', 'Over').replace(/\(.*\)/, '').trim(); | |
| document.getElementById('modalOdds').textContent = this.textContent.match(/\(([^)]+)\)/)[1]; | |
| } else { | |
| const underText = this.textContent; | |
| document.getElementById('modalBetType').textContent = underText.replace('Under', 'Under').replace(/\(.*\)/, '').trim(); | |
| document.getElementById('modalOdds').textContent = this.textContent.match(/\(([^)]+)\)/)[1]; | |
| } | |
| // Calculate initial payout | |
| wagerAmount.dispatchEvent(new Event('input')); | |
| // Show modal | |
| modal.classList.remove('hidden'); | |
| }); | |
| }); | |
| // Close modal | |
| closeModal.addEventListener('click', function() { | |
| modal.classList.add('hidden'); | |
| }); | |
| // Confirm bet | |
| confirmBet.addEventListener('click', function() { | |
| const amount = parseFloat(wagerAmount.value); | |
| if (isNaN(amount) || amount < 5 || amount > 1000) { | |
| alert('Please enter a valid wager amount between $5 and $1000'); | |
| return; | |
| } | |
| alert('Bet placed successfully! Good luck!'); | |
| modal.classList.add('hidden'); | |
| wagerAmount.value = ''; | |
| }); | |
| // Simulate live odds changes | |
| setInterval(() => { | |
| const oddsElements = document.querySelectorAll('.odds-change-up, .odds-change-down'); | |
| oddsElements.forEach(el => { | |
| const currentText = el.textContent; | |
| const match = currentText.match(/([+-]?\d+)/); | |
| if (match) { | |
| let num = parseInt(match[1]); | |
| const change = Math.floor(Math.random() * 3) - 1; // -1, 0, or 1 | |
| num += change; | |
| // Update the number and arrow direction | |
| const newText = currentText.replace(/([+-]?\d+)/, num); | |
| el.textContent = newText; | |
| // Update class based on change | |
| if (change > 0) { | |
| el.classList.remove('odds-change-down'); | |
| el.classList.add('odds-change-up'); | |
| const arrow = el.querySelector('i'); | |
| if (arrow) arrow.className = 'fas fa-arrow-up text-xs'; | |
| } else if (change < 0) { | |
| el.classList.remove('odds-change-up'); | |
| el.classList.add('odds-change-down'); | |
| const arrow = el.querySelector('i'); | |
| if (arrow) arrow.className = 'fas fa-arrow-down text-xs'; | |
| } | |
| } | |
| }); | |
| }, 5000); // Update every 5 seconds | |
| }); | |
| </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=timkirch/beat-the-odds" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |