Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SoundSync - Music Distribution Platform</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| :root { | |
| --primary: #6c63ff; | |
| --primary-dark: #554fd8; | |
| --secondary: #ff6584; | |
| --dark: #2d2b55; | |
| --light: #f8f9fa; | |
| --gray: #6c757d; | |
| --success: #28a745; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 0; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .logo i { | |
| font-size: 1.8rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 25px; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--dark); | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .auth-buttons { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| border: none; | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-dark); | |
| } | |
| .btn-outline:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .mobile-menu { | |
| display: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 100px 0; | |
| text-align: center; | |
| color: white; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 20px; | |
| line-height: 1.2; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| max-width: 700px; | |
| margin: 0 auto 30px; | |
| opacity: 0.9; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 15px; | |
| justify-content: center; | |
| margin-top: 30px; | |
| } | |
| .btn-large { | |
| padding: 15px 30px; | |
| font-size: 1.1rem; | |
| } | |
| .btn-secondary { | |
| background: var(--secondary); | |
| color: white; | |
| } | |
| .btn-secondary:hover { | |
| background: #e55a75; | |
| } | |
| /* Features Section */ | |
| .features { | |
| background: white; | |
| padding: 80px 0; | |
| border-radius: 30px 30px 0 0; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| color: var(--dark); | |
| margin-bottom: 15px; | |
| } | |
| .section-title p { | |
| color: var(--gray); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .feature-card { | |
| background: var(--light); | |
| padding: 30px; | |
| border-radius: 15px; | |
| text-align: center; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| width: 70px; | |
| height: 70px; | |
| background: var(--primary); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 20px; | |
| font-size: 1.8rem; | |
| } | |
| .feature-card h3 { | |
| margin-bottom: 15px; | |
| color: var(--dark); | |
| } | |
| .feature-card p { | |
| color: var(--gray); | |
| } | |
| /* Upload Section */ | |
| .upload-section { | |
| padding: 80px 0; | |
| background: var(--light); | |
| } | |
| .upload-container { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 40px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .upload-area { | |
| border: 2px dashed var(--primary); | |
| border-radius: 15px; | |
| padding: 50px 20px; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .upload-area:hover { | |
| background: rgba(108, 99, 255, 0.05); | |
| } | |
| .upload-icon { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| } | |
| .upload-text { | |
| color: var(--gray); | |
| margin-bottom: 20px; | |
| } | |
| .file-input { | |
| display: none; | |
| } | |
| .upload-form { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: border 0.3s; | |
| } | |
| .form-control:focus { | |
| border-color: var(--primary); | |
| outline: none; | |
| } | |
| .full-width { | |
| grid-column: 1 / -1; | |
| } | |
| /* Platforms Section */ | |
| .platforms { | |
| padding: 80px 0; | |
| background: white; | |
| } | |
| .platforms-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 20px; | |
| } | |
| .platform-logo { | |
| background: var(--light); | |
| border-radius: 10px; | |
| padding: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100px; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .platform-logo:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .platform-logo i { | |
| font-size: 2.5rem; | |
| color: var(--primary); | |
| } | |
| /* Pricing Section */ | |
| .pricing { | |
| padding: 80px 0; | |
| background: var(--light); | |
| } | |
| .pricing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .pricing-card { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 40px 30px; | |
| text-align: center; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| position: relative; | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .pricing-card.popular { | |
| border: 2px solid var(--primary); | |
| } | |
| .popular-badge { | |
| position: absolute; | |
| top: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--primary); | |
| color: white; | |
| padding: 5px 15px; | |
| border-radius: 50px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .pricing-header { | |
| margin-bottom: 30px; | |
| } | |
| .pricing-name { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--dark); | |
| margin-bottom: 10px; | |
| } | |
| .pricing-price { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-bottom: 5px; | |
| } | |
| .pricing-period { | |
| color: var(--gray); | |
| } | |
| .pricing-features { | |
| list-style: none; | |
| margin-bottom: 30px; | |
| } | |
| .pricing-features li { | |
| padding: 10px 0; | |
| border-bottom: 1px solid #eee; | |
| color: var(--gray); | |
| } | |
| .pricing-features li:last-child { | |
| border-bottom: none; | |
| } | |
| .pricing-features li i { | |
| color: var(--success); | |
| margin-right: 10px; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 60px 0 30px; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-column h3 { | |
| margin-bottom: 20px; | |
| font-size: 1.2rem; | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-links a { | |
| color: #bbb; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-links a:hover { | |
| color: white; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| transition: background 0.3s; | |
| } | |
| .social-links a:hover { | |
| background: var(--primary); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 30px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #bbb; | |
| font-size: 0.9rem; | |
| } | |
| .footer-bottom a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 992px) { | |
| .hero h1 { | |
| font-size: 2.8rem; | |
| } | |
| .upload-form { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links, .auth-buttons { | |
| display: none; | |
| } | |
| .mobile-menu { | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: 2.3rem; | |
| } | |
| .hero-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .btn-large { | |
| width: 100%; | |
| max-width: 300px; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .hero { | |
| padding: 60px 0; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| } | |
| .features, .upload-section, .platforms, .pricing { | |
| padding: 60px 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-music"></i> | |
| <span>SoundSync</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#upload">Upload</a> | |
| <a href="#platforms">Platforms</a> | |
| <a href="#pricing">Pricing</a> | |
| <a href="#contact">Contact</a> | |
| </div> | |
| <div class="auth-buttons"> | |
| <button class="btn btn-outline">Log In</button> | |
| <button class="btn btn-primary">Sign Up</button> | |
| </div> | |
| <div class="mobile-menu"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <h1>Distribute Your Music Worldwide</h1> | |
| <p>Get your songs on Spotify, Apple Music, YouTube, and 150+ other platforms. Keep 100% of your royalties and reach millions of listeners.</p> | |
| <div class="hero-buttons"> | |
| <button class="btn btn-primary btn-large">Start Distributing</button> | |
| <button class="btn btn-secondary btn-large">Learn More</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Why Choose SoundSync?</h2> | |
| <p>We provide the tools and services you need to succeed in the music industry.</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <h3>Global Distribution</h3> | |
| <p>Reach listeners on all major streaming platforms worldwide with just one upload.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3>Analytics Dashboard</h3> | |
| <p>Track your streams, royalties, and audience demographics in real-time.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-money-bill-wave"></i> | |
| </div> | |
| <h3>100% Royalties</h3> | |
| <p>Keep all of your earnings. We don't take a cut from your music sales or streams.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-sync"></i> | |
| </div> | |
| <h3>Fast Delivery</h3> | |
| <p>Your music goes live on platforms within days, not weeks.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-headphones"></i> | |
| </div> | |
| <h3>Mastering Services</h3> | |
| <p>Professional audio mastering to make your tracks sound their best.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3>Artist Promotion</h3> | |
| <p>Get featured in our playlists and promoted across our network.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upload Section --> | |
| <section class="upload-section" id="upload"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Upload Your Music</h2> | |
| <p>Get your music out to the world in just a few simple steps.</p> | |
| </div> | |
| <div class="upload-container"> | |
| <div class="upload-area" id="uploadArea"> | |
| <div class="upload-icon"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </div> | |
| <h3>Drag & Drop Your Files</h3> | |
| <p class="upload-text">Supported formats: MP3, WAV, FLAC (Max 500MB)</p> | |
| <button class="btn btn-primary">Select Files</button> | |
| <input type="file" class="file-input" id="fileInput" multiple accept="audio/*"> | |
| </div> | |
| <form class="upload-form"> | |
| <div class="form-group"> | |
| <label for="songTitle">Song Title</label> | |
| <input type="text" id="songTitle" class="form-control" placeholder="Enter song title"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="artistName">Artist Name</label> | |
| <input type="text" id="artistName" class="form-control" placeholder="Enter artist name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="album">Album (Optional)</label> | |
| <input type="text" id="album" class="form-control" placeholder="Enter album name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="genre">Genre</label> | |
| <select id="genre" class="form-control"> | |
| <option value="">Select genre</option> | |
| <option value="pop">Pop</option> | |
| <option value="rock">Rock</option> | |
| <option value="hiphop">Hip Hop</option> | |
| <option value="electronic">Electronic</option> | |
| <option value="r&b">R&B</option> | |
| <option value="country">Country</option> | |
| <option value="jazz">Jazz</option> | |
| <option value="classical">Classical</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="form-group full-width"> | |
| <label for="releaseDate">Release Date</label> | |
| <input type="date" id="releaseDate" class="form-control"> | |
| </div> | |
| <div class="form-group full-width"> | |
| <button type="submit" class="btn btn-primary btn-large">Distribute Now</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Platforms Section --> | |
| <section class="platforms" id="platforms"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>We Distribute To 150+ Platforms</h2> | |
| <p>Your music will be available wherever listeners are.</p> | |
| </div> | |
| <div class="platforms-grid"> | |
| <div class="platform-logo"> | |
| <i class="fab fa-spotify"></i> | |
| </div> | |
| <div class="platform-logo"> | |
| <i class="fab fa-apple"></i> | |
| </div> | |
| <div class="platform-logo"> | |
| <i class="fab fa-youtube"></i> | |
| </div> | |
| <div class="platform-logo"> | |
| <i class="fab fa-soundcloud"></i> | |
| </div> | |
| <div class="platform-logo"> | |
| <i class="fab fa-amazon"></i> | |
| </div> | |
| <div class="platform-logo"> | |
| <i class="fab fa-deezer"></i> | |
| </div> | |
| <div class="platform-logo"> | |
| <i class="fab fa-tiktok"></i> | |
| </div> | |
| <div class="platform-logo"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="pricing" id="pricing"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Simple, Transparent Pricing</h2> | |
| <p>Choose the plan that works best for you and your music career.</p> | |
| </div> | |
| <div class="pricing-grid"> | |
| <div class="pricing-card"> | |
| <div class="pricing-header"> | |
| <div class="pricing-name">Starter</div> | |
| <div class="pricing-price">$0</div> | |
| <div class="pricing-period">per release</div> | |
| </div> | |
| <ul class="pricing-features"> | |
| <li><i class="fas fa-check"></i> 1 Release per month</li> | |
| <li><i class="fas fa-check"></i> Keep 85% of royalties</li> | |
| <li><i class="fas fa-check"></i> Basic analytics</li> | |
| <li><i class="fas fa-check"></i> Standard delivery</li> | |
| </ul> | |
| <button class="btn btn-outline">Get Started</button> | |
| </div> | |
| <div class="pricing-card popular"> | |
| <div class="popular-badge">MOST POPULAR</div> | |
| <div class="pricing-header"> | |
| <div class="pricing-name">Artist</div> | |
| <div class="pricing-price">$20</div> | |
| <div class="pricing-period">per year</li> | |
| </div> | |
| <ul class="pricing-features"> | |
| <li><i class="fas fa-check"></i> Unlimited releases</li> | |
| <li><i class="fas fa-check"></i> Keep 100% of royalties</li> | |
| <li><i class="fas fa-check"></i> Advanced analytics</li> | |
| <li><i class="fas fa-check"></i> Fast delivery (3-5 days)</li> | |
| <li><i class="fas fa-check"></i> Promotional support</li> | |
| </ul> | |
| <button class="btn btn-primary">Get Started</button> | |
| </div> | |
| <div class="pricing-card"> | |
| <div class="pricing-header"> | |
| <div class="pricing-name">Label</div> | |
| <div class="pricing-price">$50</div> | |
| <div class="pricing-period">per year</div> | |
| </div> | |
| <ul class="pricing-features"> | |
| <li><i class="fas fa-check"></i> Everything in Artist</li> | |
| <li><i class="fas fa-check"></i> Up to 5 artists</li> | |
| <li><i class="fas fa-check"></i> Priority delivery (1-2 days)</li> | |
| <li><i class="fas fa-check"></i> Customizable label page</li> | |
| <li><i class="fas fa-check"></i> Dedicated account manager</li> | |
| </ul> | |
| <button class="btn btn-outline">Get Started</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-column"> | |
| <h3>SoundSync</h3> | |
| <p>The easiest way to distribute your music worldwide and build your audience.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Quick Links</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#upload">Upload</a></li> | |
| <li><a href="#platforms">Platforms</a></li> | |
| <li><a href="#pricing">Pricing</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Support</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Help Center</a></li> | |
| <li><a href="#">FAQ</a></li> | |
| <li><a href="#">Community</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Legal</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Terms of Service</a></li> | |
| <li><a href="#">Privacy Policy</a></li> | |
| <li><a href="#">Copyright</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 SoundSync. All rights reserved. | <a href="https://huggingface.co/spaces/akhaliq/anycoder">Built with anycoder</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // File upload functionality | |
| const uploadArea = document.getElementById('uploadArea'); | |
| const fileInput = document.getElementById('fileInput'); | |
| uploadArea.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| uploadArea.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| uploadArea.style.background = 'rgba(108, 99, 255, 0.1)'; | |
| }); | |
| uploadArea.addEventListener('dragleave', () => { | |
| uploadArea.style.background = ''; | |
| }); | |
| uploadArea.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadArea.style.background = ''; | |
| const files = e.dataTransfer.files; | |
| handleFiles(files); | |
| }); | |
| fileInput.addEventListener('change', () => { | |
| const files = fileInput.files; | |
| handleFiles(files); | |
| }); | |
| function handleFiles(files) { | |
| if (files.length > 0) { | |
| const fileNames = Array.from(files).map(file => file.name).join(', '); | |
| uploadArea.innerHTML = ` | |
| <div class="upload-icon"> | |
| <i class="fas fa-check-circle" style="color: var(--success);"></i> | |
| </div> | |
| <h3>${files.length} File(s) Selected</h3> | |
| <p class="upload-text">${fileNames}</p> | |
| <button class="btn btn-outline">Change Files</button> | |
| `; | |
| // Re-attach event listeners after updating content | |
| uploadArea.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| } | |
| } | |
| // Mobile menu toggle | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| const navLinks = document.querySelector('.nav-links'); | |
| const authButtons = document.querySelector('.auth-buttons'); | |
| mobileMenu.addEventListener('click', () => { | |
| const isVisible = navLinks.style.display === 'flex'; | |
| if (isVisible) { | |
| navLinks.style.display = 'none'; | |
| authButtons.style.display = 'none'; | |
| } else { | |
| navLinks.style.display = 'flex'; | |
| authButtons.style.display = 'flex'; | |
| // Adjust for mobile view | |
| if (window.innerWidth <= 768) { | |
| navLinks.style.flexDirection = 'column'; | |
| navLinks.style.position = 'absolute'; | |
| navLinks.style.top = '100%'; | |
| navLinks.style.left = '0'; | |
| } | |
| } | |
| }); | |
| // Form submission | |
| const uploadForm = document.querySelector('.upload-form'); | |
| uploadForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const songTitle = document.getElementById('songTitle').value; | |
| const artistName = document.getElementById('artistName').value; | |
| if (songTitle && artistName) { | |
| alert(`Your song "${songTitle}" by ${artistName} has been submitted for distribution!`); | |
| uploadForm.reset(); | |
| // Reset upload area | |
| uploadArea.innerHTML = ` | |
| <div class="upload-icon"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </div> | |
| <h3>Drag & Drop Your Files</h3> | |
| <p class="upload-text">Supported formats: MP3, WAV, FLAC (Max 500MB)</p> | |
| <button class="btn btn-primary">Select Files</button> | |
| `; | |
| } else { | |
| alert('Please fill in all required fields.'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |