Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NewshamBeats | Sell Your Hip Hop Beats</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8A4FFF', | |
| secondary: '#FF6B35', | |
| dark: '#121212', | |
| light: '#F8F9FA', | |
| gray: '#2D2D2D' | |
| }, | |
| fontFamily: { | |
| 'sans': ['Inter', 'sans-serif'], | |
| 'title': ['Bebas Neue', 'Impact', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| background-color: #121212; | |
| color: #F8F9FA; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .bg-grid { | |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%232d2d2d'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e"); | |
| } | |
| .beat-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .beat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 25px 50px -12px rgba(138, 79, 255, 0.25); | |
| } | |
| .upload-container { | |
| background: linear-gradient(145deg, #171717, #1f1f1f); | |
| border-radius: 16px; | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .custom-range::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #FF6B35; | |
| cursor: pointer; | |
| } | |
| .player-gradient { | |
| background: linear-gradient(90deg, #1E1E1E 0%, #2A1843 100%); | |
| } | |
| .vinyl { | |
| animation: spin 15s linear infinite; | |
| transition: all 0.5s ease; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .waveform { | |
| display: flex; | |
| align-items: flex-end; | |
| height: 40px; | |
| width: 100%; | |
| } | |
| .waveform-bar { | |
| width: 3px; | |
| background-color: #8A4FFF; | |
| margin: 0 1px; | |
| border-radius: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark"> | |
| <!-- Header/Navigation --> | |
| <header class="sticky top-0 z-50 bg-gray-900 bg-opacity-80 backdrop-blur-sm border-b border-gray-700"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <h1 class="font-title text-3xl tracking-wide"> | |
| <span class="text-primary">NEWSHAM</span><span class="text-secondary">BEATS</span> | |
| </h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-light hover:text-primary transition-colors">Discover</a> | |
| <a href="#" class="text-light hover:text-primary transition-colors">Top Charts</a> | |
| <a href="#" class="text-light hover:text-primary transition-colors">Producers</a> | |
| <a href="#" class="text-light hover:text-primary transition-colors">Pricing</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-gray-700 p-2 rounded-full hover:bg-primary transition-colors"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-gray-700 p-2 rounded-full hover:bg-primary transition-colors"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/40" class="rounded-full h-10 w-10 cursor-pointer" alt="Profile"> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-grid py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="w-full md:w-1/2 mb-12 md:mb-0"> | |
| <h2 class="font-title text-5xl md:text-7xl leading-tight mb-6"> | |
| CREATE. <span class="text-primary">SELL</span>. <br> | |
| <span class="text-secondary">BE HEARD</span>. | |
| </h2> | |
| <p class="text-gray-300 text-lg mb-8 max-w-lg"> | |
| The premier marketplace for hip hop producers to sell their beats. Upload, price, and profit from your creations. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-primary hover:bg-purple-700 text-white px-8 py-4 rounded-full font-semibold transition-colors"> | |
| Start Selling | |
| </button> | |
| <button class="bg-secondary hover:bg-orange-500 text-white px-8 py-4 rounded-full font-semibold transition-colors"> | |
| Browse Beats | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 flex justify-center"> | |
| <div class="relative w-80 h-80"> | |
| <div class="absolute w-full h-full rounded-full bg-gradient-to-tr from-primary to-secondary opacity-20 animate-pulse"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> | |
| <div class="vinyl rounded-full border-8 border-gray-700 w-64 h-64 bg-gradient-to-br from-gray-900 to-black flex items-center justify-center"> | |
| <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center"> | |
| <div class="bg-primary w-4 h-4 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Side: Upload Form --> | |
| <div class="w-full lg:w-1/3"> | |
| <div class="upload-container p-8"> | |
| <h2 class="font-title text-3xl mb-6 text-center">Upload Your Beat</h2> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Beat Title</label> | |
| <input type="text" class="w-full bg-gray-800 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary outline-none" placeholder="Enter beat title"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Description</label> | |
| <textarea class="w-full bg-gray-800 rounded-lg px-4 py-3 h-32 focus:ring-2 focus:ring-primary outline-none" placeholder="Describe your beat"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Upload Audio File</label> | |
| <div class="border-2 border-dashed border-gray-700 rounded-xl py-10 px-4 text-center"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-500 mb-2"></i> | |
| <p class="text-gray-500">Drag & drop your audio file here</p> | |
| <p class="text-gray-500 text-sm mt-1">MP3, WAV, or FLAC format (Max 100MB)</p> | |
| <button class="mt-4 bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">Browse Files</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Genre</label> | |
| <select class="w-full bg-gray-800 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary outline-none"> | |
| <option>Trap</option> | |
| <option>Old School</option> | |
| <option>Drill</option> | |
| <option>Boom Bap</option> | |
| <option>Experimental</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">BPM</label> | |
| <input type="number" class="w-full bg-gray-800 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary outline-none" placeholder="BPM"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Pricing</label> | |
| <div class="grid grid-cols-3 gap-2 mb-2"> | |
| <div class="bg-gray-800 p-4 rounded-lg text-center"> | |
| <div class="text-sm text-gray-400 mb-1">Basic</div> | |
| <div class="font-bold">$29.99</div> | |
| </div> | |
| <div class="bg-gradient-to-tr from-primary to-purple-800 p-4 rounded-lg text-center"> | |
| <div class="text-sm text-gray-200 mb-1">Premium</div> | |
| <div class="font-bold">$59.99</div> | |
| </div> | |
| <div class="bg-gray-800 p-4 rounded-lg text-center"> | |
| <div class="text-sm text-gray-400 mb-1">Exclusive</div> | |
| <div class="font-bold">$149.99</div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500">Set prices for different license types</p> | |
| </div> | |
| <div class="pt-4"> | |
| <button class="w-full bg-primary hover:bg-purple-700 text-white font-semibold py-3 rounded-lg transition-colors"> | |
| Upload Beat | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Side: Beat Showcase --> | |
| <div class="w-full lg:w-2/3"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="font-title text-3xl">Recently Uploaded</h3> | |
| <div class="flex space-x-3"> | |
| <button class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700"> | |
| <i class="fas fa-sort"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Beat Card 1 --> | |
| <div class="beat-card bg-gray-800 rounded-xl overflow-hidden"> | |
| <div class="p-5 pb-3"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded-full text-gray-300">Trap</span> | |
| </div> | |
| <div class="text-lg font-bold text-primary">$29.99</div> | |
| </div> | |
| <h4 class="text-xl font-semibold mt-2 mb-1">Midnight Streets</h4> | |
| <p class="text-gray-400 text-sm">Dark synth melodies with heavy 808s</p> | |
| <div class="flex items-center mt-3 text-gray-500 text-sm"> | |
| <i class="fas fa-tachometer-alt mr-1"></i> <span class="mr-3">132 BPM</span> | |
| <i class="fas fa-clock mr-1"></i> <span>3:24</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3"> | |
| <div class="waveform mb-3"> | |
| <div class="waveform-bar" style="height: 6px;"></div> | |
| <div class="waveform-bar" style="height: 22px;"></div> | |
| <div class="waveform-bar" style="height: 14px;"></div> | |
| <div class="waveform-bar" style="height: 34px;"></div> | |
| <div class="waveform-bar" style="height: 24px;"></div> | |
| <div class="waveform-bar" style="height: 18px;"></div> | |
| <div class="waveform-bar" style="height: 28px;"></div> | |
| <div class="waveform-bar" style="height: 32px;"></div> | |
| <div class="waveform-bar" style="height: 14px;"></div> | |
| <div class="waveform-bar" style="height: 18px;"></div> | |
| <div class="waveform-bar" style="height: 30px;"></div> | |
| <div class="waveform-bar" style="height: 24px;"></div> | |
| <div class="waveform-bar" style="height: 16px;"></div> | |
| <div class="waveform-bar" style="height: 10px;"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-primary hover:bg-purple-700 w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="flex space-x-3 text-gray-500"> | |
| <button class="hover:text-secondary"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="hover:text-primary"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="hover:text-secondary"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beat Card 2 --> | |
| <div class="beat-card bg-gray-800 rounded-xl overflow-hidden"> | |
| <div class="p-5 pb-3"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded-full text-gray-300">Boom Bap</span> | |
| </div> | |
| <div class="text-lg font-bold text-primary">$39.99</div> | |
| </div> | |
| <h4 class="text-xl font-semibold mt-2 mb-1">Golden Era Vibes</h4> | |
| <p class="text-gray-400 text-sm">Classic samples with vinyl crackle</p> | |
| <div class="flex items-center mt-3 text-gray-500 text-sm"> | |
| <i class="fas fa-tachometer-alt mr-1"></i> <span class="mr-3">89 BPM</span> | |
| <i class="fas fa-clock mr-1"></i> <span>4:16</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3"> | |
| <div class="waveform mb-3"> | |
| <div class="waveform-bar" style="height: 12px;"></div> | |
| <div class="waveform-bar" style="height: 28px;"></div> | |
| <div class="waveform-bar" style="height: 18px;"></div> | |
| <div class="waveform-bar" style="height: 22px;"></div> | |
| <div class="waveform-bar" style="height: 14px;"></div> | |
| <div class="waveform-bar" style="height: 30px;"></div> | |
| <div class="waveform-bar" style="height: 8px;"></div> | |
| <div class="waveform-bar" style="height: 16px;"></div> | |
| <div class="waveform-bar" style="height: 24px;"></div> | |
| <div class="waveform-bar" style="height: 18px;"></div> | |
| <div class="waveform-bar" style="height: 22px;"></div> | |
| <div class="waveform-bar" style="height: 16px;"></div> | |
| <div class="waveform-bar" style="height: 12px;"></div> | |
| <div class="waveform-bar" style="height: 8px;"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="flex space-x-3 text-gray-500"> | |
| <button class="hover:text-secondary"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="hover:text-primary"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="hover:text-secondary"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beat Card 3 --> | |
| <div class="beat-card bg-gray-800 rounded-xl overflow-hidden"> | |
| <div class="p-5 pb-3"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded-full text-gray-300">Experimental</span> | |
| </div> | |
| <div class="text-lg font-bold text-primary">$59.99</div> | |
| </div> | |
| <h4 class="text-xl font-semibold mt-2 mb-1">Abstract Reality</h4> | |
| <p class="text-gray-400 text-sm">Glitchy, distorted textures with complex rhythms</p> | |
| <div class="flex items-center mt-3 text-gray-500 text-sm"> | |
| <i class="fas fa-tachometer-alt mr-1"></i> <span class="mr-3">174 BPM</span> | |
| <i class="fas fa-clock mr-1"></i> <span>2:48</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3"> | |
| <div class="waveform mb-3"> | |
| <div class="waveform-bar" style="height: 26px;"></div> | |
| <div class="waveform-bar" style="height: 8px;"></div> | |
| <div class="waveform-bar" style="height: 18px;"></div> | |
| <div class="waveform-bar" style="height: 34px;"></div> | |
| <div class="waveform-bar" style="height: 14px;"></div> | |
| <div class="waveform-bar" style="height: 22px;"></div> | |
| <div class="waveform-bar" style="height: 18px;"></div> | |
| <div class="waveform-bar" style="height: 30px;"></div> | |
| <div class="waveform-bar" style="height: 6px;"></div> | |
| <div class="waveform-bar" style="height: 28px;"></div> | |
| <div class="waveform-bar" style="height: 20px;"></div> | |
| <div class="waveform-bar" style="height: 14px;"></div> | |
| <div class="waveform-bar" style="height: 8px;"></div> | |
| <div class="waveform-bar" style="height: 24px;"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="flex space-x-3 text-gray-500"> | |
| <button class="hover:text-secondary"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="hover:text-primary"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="hover:text-secondary"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beat Card 4 --> | |
| <div class="beat-card bg-gray-800 rounded-xl overflow-hidden"> | |
| <div class="p-5 pb-3"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded-full text-gray-300">Drill</span> | |
| </div> | |
| <div class="text-lg font-bold text-primary">$34.99</div> | |
| </div> | |
| <h4 class="text-xl font-semibold mt-2 mb-1">Chicago Nights</h4> | |
| <p class="text-gray-400 text-sm">Aggressive 808 patterns with haunting melodies</p> | |
| <div class="flex items-center mt-3 text-gray-500 text-sm"> | |
| <i class="fas fa-tachometer-alt mr-1"></i> <span class="mr-3">148 BPM</span> | |
| <i class="fas fa-clock mr-1"></i> <span>2:56</span> | |
| </div> | |
| </div> | |
| <div class="px-5 py-3"> | |
| <div class="waveform mb-3"> | |
| <div class="waveform-bar" style="height: 12px;"></div> | |
| <div class="waveform-bar" style="height: 28px;"></div> | |
| <div class="waveform-bar" style="height: 14px;"></div> | |
| <div class="waveform-bar" style="height: 32px;"></div> | |
| <div class="waveform-bar" style="height: 20px;"></div> | |
| <div class="waveform-bar" style="height: 18px;"></div> | |
| <div class="waveform-bar" style="height: 24px;"></div> | |
| <div class="waveform-bar" style="height: 8px;"></div> | |
| <div class="waveform-bar" style="height: 26px;"></div> | |
| <div class="waveform-bar" style="height: 16px;"></div> | |
| <div class="waveform-bar" style="height: 30px;"></div> | |
| <div class="waveform-bar" style="height: 10px;"></div> | |
| <div class="waveform-bar" style="height: 22px;"></div> | |
| <div class="waveform-bar" style="height: 18px;"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <button class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <div class="flex space-x-3 text-gray-500"> | |
| <button class="hover:text-secondary"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="hover:text-primary"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="hover:text-secondary"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="px-8 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 font-medium"> | |
| Load More Beats | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Audio Player --> | |
| <div class="player-gradient fixed bottom-0 left-0 right-0 py-4 px-6 z-50 border-t border-gray-800"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="flex items-center w-full md:w-1/4 mb-4 md:mb-0"> | |
| <div class="vinyl rounded-full w-14 h-14 border-4 border-gray-700 bg-gradient-to-br from-gray-900 to-black flex-shrink-0 mr-4"> | |
| <div class="bg-gray-800 rounded-full w-5 h-5 m-auto mt-3 flex items-center justify-center"> | |
| <div class="bg-primary w-1.5 h-1.5 rounded-full"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="font-semibold">Midnight Streets</div> | |
| <div class="text-sm text-gray-400">ProducerName</div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-2/4 mb-4 md:mb-0"> | |
| <div class="flex justify-center items-center space-x-6"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-random"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button class="bg-primary w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-700"> | |
| <i class="fas fa-play text-white"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center mt-2 space-x-3"> | |
| <span class="text-xs text-gray-400">0:00</span> | |
| <div class="flex-1 relative"> | |
| <div class="w-full bg-gray-700 h-1.5 rounded-full overflow-hidden"> | |
| <div class="bg-primary h-full" style="width: 35%;"></div> | |
| </div> | |
| </div> | |
| <span class="text-xs text-gray-400">3:24</span> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/4 flex justify-end space-x-4"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-list"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-volume-down"></i> | |
| </button> | |
| <div class="w-20"> | |
| <div class="w-full bg-gray-700 h-1.5 rounded-full overflow-hidden"> | |
| <div class="bg-primary h-full" style="width: 70%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-expand-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple beat card interaction | |
| document.querySelectorAll('.beat-card').forEach(card => { | |
| const playBtn = card.querySelector('button'); | |
| let isPlaying = false; | |
| playBtn.addEventListener('click', () => { | |
| isPlaying = !isPlaying; | |
| if(isPlaying) { | |
| playBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600'); | |
| playBtn.classList.add('bg-primary', 'hover:bg-purple-700'); | |
| playBtn.innerHTML = '<i class="fas fa-pause"></i>'; | |
| } else { | |
| playBtn.classList.remove('bg-primary', 'hover:bg-purple-700'); | |
| playBtn.classList.add('bg-gray-700', 'hover:bg-gray-600'); | |
| playBtn.innerHTML = '<i class="fas fa-play"></i>'; | |
| } | |
| }); | |
| }); | |
| // Audio player interaction | |
| const mainPlayBtn = document.querySelector('.player-gradient button.bg-primary'); | |
| if(mainPlayBtn) { | |
| mainPlayBtn.addEventListener('click', function() { | |
| const icon = this.querySelector('i'); | |
| if(icon.classList.contains('fa-play')) { | |
| icon.classList.replace('fa-play', 'fa-pause'); | |
| } else { | |
| icon.classList.replace('fa-pause', 'fa-play'); | |
| } | |
| }); | |
| } | |
| </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=ToonTownTommy/beets" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |