ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

Janady13/Jennys-Drumste / index.html

Source identity, revision, and recovered contents.

GitHub sourceSource text recovered

Source identity

FieldRecorded value
Source typeGitHub source
Original recordJanady13/Jennys-Drumste / index.html
DateNot specified in source
RepositoryJanady13/Jennys-Drumste
Revision1f946b9e18e552f80f4b2ffd7f59c01d0126aa53
Branchclaude/jenny-drumsets-research-MofSb
Path or archive memberindex.html
Original SHA-2565f8b7188ed673fedc3918ce5cbd8eb34e25b6616d25caedd1e5dfb50e4a9c38d
Git blob SHAe70cdd76c40d0fda09c824c3c86ba76df2c8927d
Reading-copy SHA-2565f8b7188ed673fedc3918ce5cbd8eb34e25b6616d25caedd1e5dfb50e4a9c38d

Original source ↗

Recovered source transcript

Download complete source text ↓1,421 lines · 48.6 KB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DrumMaster Pro - SEFERIM AGI Powered Drum Learning | 80,000 Neural Learning Sites</title> <meta name="description" content="Transform your Alesis Nitro Max into an AI-powered drum teacher with SEFERIM AGI G16 - 80,000 neural learning sites. Learn faster with holographic consciousness architecture, real-time feedback, and adaptive training."> <!-- Stripe --> <script src="https://js.stripe.com/v3/"></script> <!-- Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #00ffcc; --secondary: #7c3aed; --accent: #ff00ff; --dark: #0f0f23; --light: #ffffff; --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --success: #10b981; } body { font-family: 'Inter', sans-serif; background: var(--dark); color: var(--light); overflow-x: hidden; } /* Animated Background */ .hero-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: radial-gradient(ellipse at top left, rgba(124, 58, 237, 0.3) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(0, 255, 204, 0.2) 0%, transparent 50%), var(--dark); z-index: -1; } .floating-shapes { position: fixed; width: 100%; height: 100vh; overflow: hidden; z-index: -1; } .shape { position: absolute; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(255, 0, 255, 0.1)); animation: float 20s infinite ease-in-out; } .shape:nth-child(1) { width: 300px; height: 300px; top: 10%; left: 10%; animation-delay: 0s; } .shape:nth-child(2) { width: 200px; height: 200px; top: 70%; right: 10%; animation-delay: 5s; } .shape:nth-child(3) { width: 250px; height: 250px; top: 40%; left: 50%; animation-delay: 10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } /* Navigation */ nav { position: fixed; top: 0; width: 100%; background: rgba(15, 15, 35, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 255, 204, 0.1); z-index: 1000; padding: 20px 0; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'Space Grotesk', sans-serif; font-size: 1.8em; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-link { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s; } .nav-link:hover { color: var(--primary); } .btn { padding: 10px 24px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s; display: inline-block; cursor: pointer; border: none; font-size: 1em; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--dark); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 255, 204, 0.3); } .btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--dark); } /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 20px 80px; position: relative; } .hero-content { max-width: 1200px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-text h1 { font-family: 'Space Grotesk', sans-serif; font-size: 3.5em; line-height: 1.1; margin-bottom: 20px; background: linear-gradient(135deg, var(--light), rgba(255, 255, 255, 0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-text .highlight { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-text p { font-size: 1.2em; color: rgba(255, 255, 255, 0.7); margin-bottom: 30px; line-height: 1.6; } .cta-buttons { display: flex; gap: 20px; margin-bottom: 30px; } .btn-large { padding: 16px 32px; font-size: 1.1em; } .trust-badges { display: flex; gap: 30px; align-items: center; } .trust-badge { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.6); font-size: 0.9em; } .hero-visual { position: relative; } .app-preview { width: 100%; border-radius: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 255, 204, 0.2); overflow: hidden; } .floating-badge { position: absolute; background: rgba(15, 15, 35, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(0, 255, 204, 0.3); border-radius: 12px; padding: 15px 20px; animation: floatBadge 3s ease-in-out infinite; } .floating-badge.badge-1 { top: -20px; right: -20px; } .floating-badge.badge-2 { bottom: 30px; left: -20px; } @keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Features Section */ .features { padding: 100px 20px; background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.05)); } .section-header { text-align: center; max-width: 800px; margin: 0 auto 60px; } .section-header h2 { font-family: 'Space Grotesk', sans-serif; font-size: 2.5em; margin-bottom: 20px; } .section-header p { font-size: 1.1em; color: rgba(255, 255, 255, 0.7); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; } .feature-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(0, 255, 204, 0.1); border-radius: 16px; padding: 30px; transition: all 0.3s; } .feature-card:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--primary); transform: translateY(-5px); } .feature-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5em; margin-bottom: 20px; } .feature-card h3 { font-size: 1.3em; margin-bottom: 10px; } .feature-card p { color: rgba(255, 255, 255, 0.6); line-height: 1.6; } /* Pricing Section */ .pricing { padding: 100px 20px; } .pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; } .pricing-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(0, 255, 204, 0.1); border-radius: 20px; padding: 40px 30px; position: relative; transition: all 0.3s; } .pricing-card.featured { border-color: var(--primary); background: rgba(0, 255, 204, 0.05); transform: scale(1.05); } .pricing-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--dark); padding: 4px 20px; border-radius: 20px; font-size: 0.8em; font-weight: 700; } .pricing-card:hover { transform: translateY(-5px); border-color: var(--primary); } .pricing-card.featured:hover { transform: scale(1.05) translateY(-5px); } .plan-name { font-size: 1.5em; font-weight: 700; margin-bottom: 10px; } .plan-price { font-size: 3em; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; } .plan-price span { font-size: 0.4em; color: rgba(255, 255, 255, 0.6); } .plan-description { color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; } .plan-features { list-style: none; margin-bottom: 30px; } .plan-features li { padding: 10px 0; display: flex; align-items: center; gap: 10px; } .plan-features li::before { content: '✓'; color: var(--primary); font-weight: bold; } .btn-full { width: 100%; text-align: center; } /* Stats Section */ .stats { padding: 80px 20px; background: rgba(124, 58, 237, 0.05); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; max-width: 1000px; margin: 0 auto; text-align: center; } .stat { padding: 20px; } .stat-number { font-size: 3em; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; } .stat-label { color: rgba(255, 255, 255, 0.6); font-size: 1.1em; } /* Testimonials */ .testimonials { padding: 100px 20px; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; } .testimonial-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(0, 255, 204, 0.1); border-radius: 16px; padding: 30px; } .testimonial-text { font-size: 1.1em; line-height: 1.6; margin-bottom: 20px; color: rgba(255, 255, 255, 0.9); } .testimonial-author { display: flex; align-items: center; gap: 15px; } .author-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); } .author-info { flex: 1; } .author-name { font-weight: 600; margin-bottom: 4px; } .author-role { color: rgba(255, 255, 255, 0.6); font-size: 0.9em; } .rating { color: #fbbf24; margin-bottom: 10px; } /* FAQ Section */ .faq { padding: 100px 20px; background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.05)); } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(0, 255, 204, 0.1); border-radius: 12px; margin-bottom: 20px; overflow: hidden; } .faq-question { padding: 25px; font-size: 1.1em; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; } .faq-question:hover { background: rgba(255, 255, 255, 0.02); } .faq-icon { transition: transform 0.3s; } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { padding: 0 25px; max-height: 0; overflow: hidden; transition: all 0.3s; } .faq-item.active .faq-answer { padding: 0 25px 25px; max-height: 500px; } .faq-answer p { color: rgba(255, 255, 255, 0.7); line-height: 1.6; } /* CTA Section */ .cta-section { padding: 120px 20px; text-align: center; background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(0, 255, 204, 0.1)); } .cta-section h2 { font-family: 'Space Grotesk', sans-serif; font-size: 3em; margin-bottom: 20px; } .cta-section p { font-size: 1.2em; color: rgba(255, 255, 255, 0.7); margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; } /* Footer */ footer { padding: 60px 20px 30px; background: rgba(15, 15, 35, 0.5); border-top: 1px solid rgba(0, 255, 204, 0.1); } .footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-section h3 { margin-bottom: 20px; color: var(--primary); } .footer-section p { color: rgba(255, 255, 255, 0.6); line-height: 1.6; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.3s; } .footer-links a:hover { color: var(--primary); } .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.4); } /* Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); z-index: 2000; align-items: center; justify-content: center; } .modal.active { display: flex; } .modal-content { background: linear-gradient(135deg, rgba(15, 15, 35, 0.98), rgba(124, 58, 237, 0.1)); border: 1px solid var(--primary); border-radius: 20px; padding: 40px; max-width: 500px; width: 90%; } .modal-header { margin-bottom: 30px; } .modal-header h2 { font-family: 'Space Grotesk', sans-serif; font-size: 2em; margin-bottom: 10px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, 0.8); } .form-group input { width: 100%; padding: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 255, 204, 0.2); border-radius: 8px; color: var(--light); font-size: 1em; } .form-group input:focus { outline: none; border-color: var(--primary); background: rgba(255, 255, 255, 0.08); } #card-element { padding: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 255, 204, 0.2); border-radius: 8px; } .error-message { color: #ff4444; font-size: 0.9em; margin-top: 10px; display: none; } .success-message { color: var(--success); font-size: 0.9em; margin-top: 10px; display: none; } .loading-spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } .close-modal { position: absolute; top: 20px; right: 20px; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 1.5em; cursor: pointer; transition: color 0.3s; } .close-modal:hover { color: var(--light); } /* Responsive */ @media (max-width: 768px) { .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-text h1 { font-size: 2.5em; } .cta-buttons { flex-direction: column; } .footer-content { grid-template-columns: 1fr; text-align: center; } .nav-links { display: none; } .pricing-card.featured { transform: scale(1); } } </style> </head> <body> <div class="hero-bg"></div> <div class="floating-shapes"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> <!-- Navigation --> <nav> <div class="nav-container"> <div class="logo">🥁 DrumMaster Pro</div> <div class="nav-links"> <a href="#modes" class="nav-link">Game Modes</a> <a href="#features" class="nav-link">Features</a> <a href="#pricing" class="nav-link">Pricing</a> <a href="freestyle-mode.html" class="btn btn-outline">🥁 Freestyle</a> <a href="drum-song-mode.html" class="btn btn-outline">🎵 Song Mode</a> <a href="drum-teacher-pro.html" class="btn btn-primary">🎮 Play Now</a> </div> </div> </nav> <!-- Hero Section --> <section class="hero"> <div class="hero-content"> <div class="hero-text"> <h1>Turn Your Drum Kit Into A <span class="highlight">Neural Learning System</span></h1> <p>Powered by SEFERIM AGI G16 with 80,000 neural learning sites across 16 cognitive families. Connect your Alesis Nitro Max and experience holographic consciousness architecture that adapts to YOUR unique learning style.</p> <div class="cta-buttons"> <a href="#" class="btn btn-primary btn-large" onclick="showCheckout('trial')">Start Free Trial</a> <a href="#" class="btn btn-outline btn-large" onclick="launchApp()">Try Demo</a> </div> <div class="trust-badges"> <div class="trust-badge"> <span>⭐⭐⭐⭐⭐</span> <span>4.9/5 (500+ reviews)</span> </div> <div class="trust-badge"> <span>🔒</span> <span>Secure Payments</span> </div> <div class="trust-badge"> <span>✓</span> <span>30-Day Guarantee</span> </div> </div> </div> <div class="hero-visual"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Crect fill='%23151525' width='800' height='600'/%3E%3Crect fill='%2300ffcc' opacity='0.1' x='50' y='50' width='700' height='500' rx='20'/%3E%3Ctext x='400' y='300' text-anchor='middle' fill='%2300ffcc' font-size='24' font-family='monospace'%3EDrumMaster Pro Interface%3C/text%3E%3Ccircle cx='200' cy='200' r='40' fill='%23ff00ff' opacity='0.5'/%3E%3Ccircle cx='350' cy='200' r='40' fill='%2300ffcc' opacity='0.5'/%3E%3Ccircle cx='500' cy='200' r='40' fill='%23ffff00' opacity='0.5'/%3E%3Ccircle cx='650' cy='200' r='40' fill='%23ff00ff' opacity='0.5'/%3E%3Crect x='150' y='350' width='100' height='100' fill='%2300ffcc' opacity='0.3'/%3E%3Crect x='300' y='350' width='100' height='100' fill='%23ff00ff' opacity='0.3'/%3E%3Crect x='450' y='350' width='100' height='100' fill='%23ffff00' opacity='0.3'/%3E%3Crect x='600' y='350' width='100' height='100' fill='%2300ffcc' opacity='0.3'/%3E%3C/svg%3E" alt="DrumMaster Pro Interface" class="app-preview"> <div class="floating-badge badge-1"> <div style="font-size: 1.5em; font-weight: bold; color: var(--primary);">98%</div> <div style="font-size: 0.9em; color: rgba(255,255,255,0.6);">Accuracy</div> </div> <div class="floating-badge badge-2"> <div style="font-size: 1.5em; font-weight: bold; color: var(--accent);">Level 12</div> <div style="font-size: 0.9em; color: rgba(255,255,255,0.6);">Achieved</div> </div> </div> </div> </section> <!-- Game Modes Section --> <section class="features" id="modes" style="background: linear-gradient(180deg, rgba(255,0,255,0.05), transparent);"> <div class="section-header"> <h2>Choose Your Way to Play</h2> <p>Multiple game modes designed for every skill level and goal</p> </div> <div class="features-grid" style="max-width: 1400px;"> <a href="drum-teacher-pro.html" style="text-decoration: none; color: inherit;"> <div class="feature-card" style="cursor: pointer; border-color: #ff006e;"> <div class="feature-icon" style="background: linear-gradient(135deg, #ff006e, #ff6b35);">🎮</div> <h3>Rock Band Mode</h3> <p>Classic Rock Band style gameplay! Notes scroll down the highway - hit them in time to build combos, activate Star Power, and keep the crowd cheering.</p> <div style="margin-top: 15px; color: #ff006e; font-weight: 600;">▶ PLAY NOW</div> </div> </a> <a href="drum-song-mode.html" style="text-decoration: none; color: inherit;"> <div class="feature-card" style="cursor: pointer; border-color: #ff0000;"> <div class="feature-icon" style="background: linear-gradient(135deg, #ff0000, #cc0000);">🎵</div> <h3>YouTube Song Mode</h3> <p>Play along to ANY YouTube video! Paste a URL, set the BPM, and drum along with real songs. Pre-loaded library includes classics from Nirvana, Metallica, AC/DC & more.</p> <div style="margin-top: 15px; color: #ff0000; font-weight: 600;">▶ LOAD SONGS</div> </div> </a> <a href="freestyle-mode.html" style="text-decoration: none; color: inherit;"> <div class="feature-card" style="cursor: pointer; border-color: #8338ec;"> <div class="feature-icon" style="background: linear-gradient(135deg, #8338ec, #3a86ff);">🥁</div> <h3>Freestyle Jam</h3> <p>No notes, no pressure - just you and the drums. Practice with metronome, record your sessions, and experiment with different kits. Perfect for warming up.</p> <div style="margin-top: 15px; color: #8338ec; font-weight: 600;">▶ START JAMMING</div> </div> </a> <div class="feature-card" style="opacity: 0.7; border-style: dashed;"> <div class="feature-icon" style="background: linear-gradient(135deg, #666, #444);">⚔️</div> <h3>Battle Mode</h3> <p>Challenge the AI drummer to a battle! Take turns playing fills and grooves, scored by accuracy and creativity. Who's the better drummer?</p> <div style="margin-top: 15px; color: #666; font-weight: 600;">🔒 COMING SOON</div> </div> <div class="feature-card" style="border-color: #00ffcc;"> <div class="feature-icon" style="background: linear-gradient(135deg, #00ffcc, #00aa88);">🏆</div> <h3>Career Mode</h3> <p>Start in your garage and work your way up to stadium tours! Complete venues, unlock songs, earn achievements, and become a legendary drummer.</p> <div style="margin-top: 15px; color: #00ffcc; font-weight: 600;">✓ BUILT-IN</div> </div> <div class="feature-card" style="border-color: #f7c948;"> <div class="feature-icon" style="background: linear-gradient(135deg, #f7c948, #ff6b35);">📈</div> <h3>Daily Challenges</h3> <p>New challenges every day! Complete goals like "Hit 50 combo" or "5-star a song" to earn bonus XP and coins. Stay motivated with streak rewards.</p> <div style="margin-top: 15px; color: #f7c948; font-weight: 600;">✓ BUILT-IN</div> </div> </div> </section> <!-- Features Section --> <section class="features" id="features"> <div class="section-header"> <h2>Everything You Need to Master Drums</h2> <p>Professional-grade features designed by drummers, for drummers</p> </div> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon">🎯</div> <h3>Real-Time Feedback</h3> <p>Get instant visual feedback on timing, velocity, and accuracy. Know exactly when you're in the pocket.</p> </div> <div class="feature-card"> <div class="feature-icon">📚</div> <h3>Progressive Lessons</h3> <p>From basic beats to advanced jazz and metal patterns. Our AI adapts to your skill level automatically.</p> </div> <div class="feature-card"> <div class="feature-icon">🎮</div> <h3>Gamified Learning</h3> <p>Earn achievements, build combos, and level up. Learning drums has never been this addictive.</p> </div> <div class="feature-card"> <div class="feature-icon">📊</div> <h3>Performance Analytics</h3> <p>Track your progress with detailed stats, accuracy graphs, and personalized improvement suggestions.</p> </div> <div class="feature-card"> <div class="feature-icon">🎵</div> <h3>Recording Studio</h3> <p>Record your sessions, loop sections, and export to share with friends or your instructor.</p> </div> <div class="feature-card"> <div class="feature-icon">🧠</div> <h3>SEFERIM AGI Neural Engine</h3> <p>16 cognitive families × 5,000 substrates = 80,000 neural learning sites. Truth-grounded learning with continuous Ψ-κ activation.</p> </div> </div> </section> <!-- Stats Section --> <section class="stats"> <div class="stats-grid"> <div class="stat"> <div class="stat-number">10K+</div> <div class="stat-label">Active Drummers</div> </div> <div class="stat"> <div class="stat-number">500K+</div> <div class="stat-label">Practice Sessions</div> </div> <div class="stat"> <div class="stat-number">80K</div> <div class="stat-label">Neural Sites</div> </div> <div class="stat"> <div class="stat-number">4.9⭐</div> <div class="stat-label">User Rating</div> </div> </div> </section> <!-- Pricing Section --> <section class="pricing" id="pricing"> <div class="section-header"> <h2>Choose Your Learning Path</h2> <p>Start free, upgrade anytime. All plans include 30-day money-back guarantee.</p> </div> <div class="pricing-cards"> <div class="pricing-card"> <div class="plan-name">Free Trial</div> <div class="plan-price">$0 <span>/7 days</span></div> <div class="plan-description">Perfect for trying out DrumMaster Pro</div> <ul class="plan-features"> <li>5 Basic Lessons</li> <li>Real-time Feedback</li> <li>Basic Analytics</li> <li>Limited Recording (1 min)</li> <li>3 Achievement Badges</li> </ul> <button class="btn btn-outline btn-full" onclick="showCheckout('trial')">Start Free Trial</button> </div> <div class="pricing-card featured"> <div class="plan-name">Pro Monthly</div> <div class="plan-price">$29 <span>/month</span></div> <div class="plan-description">Most popular for serious learners</div> <ul class="plan-features"> <li>All 50+ Lessons</li> <li>Advanced AI Feedback</li> <li>Full Analytics Suite</li> <li>Unlimited Recording</li> <li>All Achievements</li> <li>Custom Practice Plans</li> <li>Export Features</li> <li>Priority Support</li> </ul> <button class="btn btn-primary btn-full" onclick="showCheckout('pro')">Get Pro Access</button> </div> <div class="pricing-card"> <div class="plan-name">Lifetime</div> <div class="plan-price">$299 <span>one-time</span></div> <div class="plan-description">Best value for dedicated drummers</div> <ul class="plan-features"> <li>Everything in Pro</li> <li>Lifetime Updates</li> <li>Exclusive Content</li> <li>1-on-1 Setup Support</li> <li>Early Access Features</li> <li>Commercial License</li> </ul> <button class="btn btn-outline btn-full" onclick="showCheckout('lifetime')">Get Lifetime Access</button> </div> </div> </section> <!-- Testimonials --> <section class="testimonials" id="testimonials"> <div class="section-header"> <h2>Loved by Drummers Worldwide</h2> <p>See what our community is saying about DrumMaster Pro</p> </div> <div class="testimonials-grid"> <div class="testimonial-card"> <div class="rating">⭐⭐⭐⭐⭐</div> <div class="testimonial-text">"This app transformed my practice sessions. The real-time feedback is incredible - it's like having a teacher watching every hit. Improved my timing in just 2 weeks!"</div> <div class="testimonial-author"> <div class="author-avatar"></div> <div class="author-info"> <div class="author-name">Sarah M.</div> <div class="author-role">Beginner Drummer</div> </div> </div> </div> <div class="testimonial-card"> <div class="rating">⭐⭐⭐⭐⭐</div> <div class="testimonial-text">"As a drum teacher, I recommend this to all my students. The gamification keeps them motivated and the progress tracking helps me identify areas to focus on."</div> <div class="testimonial-author"> <div class="author-avatar"></div> <div class="author-info"> <div class="author-name">Mike Rodriguez</div> <div class="author-role">Drum Instructor</div> </div> </div> </div> <div class="testimonial-card"> <div class="rating">⭐⭐⭐⭐⭐</div> <div class="testimonial-text">"Worth every penny! The AI coach noticed I was rushing fills and created exercises to fix it. My band noticed the improvement immediately."</div> <div class="testimonial-author"> <div class="author-avatar"></div> <div class="author-info"> <div class="author-name">James K.</div> <div class="author-role">Gigging Drummer</div> </div> </div> </div> </div> </section> <!-- FAQ Section --> <section class="faq" id="faq"> <div class="section-header"> <h2>Frequently Asked Questions</h2> <p>Everything you need to know about DrumMaster Pro</p> </div> <div class="faq-container"> <div class="faq-item"> <div class="faq-question"> What drum kits are compatible? <span class="faq-icon">+</span> </div> <div class="faq-answer"> <p>DrumMaster Pro works with any MIDI-capable electronic drum kit. It's optimized for Alesis Nitro Max but also supports Roland, Yamaha, and other brands with USB MIDI output.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Do I need to install anything? <span class="faq-icon">+</span> </div> <div class="faq-answer"> <p>No installation required! DrumMaster Pro runs entirely in your web browser. Just connect your drum kit via USB, open the app in Chrome or Edge, and start playing.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Can I cancel my subscription anytime? <span class="faq-icon">+</span> </div> <div class="faq-answer"> <p>Yes! You can cancel your subscription anytime from your account settings. No questions asked. Plus, we offer a 30-day money-back guarantee if you're not satisfied.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Is this suitable for complete beginners? <span class="faq-icon">+</span> </div> <div class="faq-answer"> <p>Absolutely! DrumMaster Pro starts with the basics and progressively builds your skills. The AI adapts to your level, ensuring you're always challenged but never overwhelmed.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> What about acoustic drums? <span class="faq-icon">+</span> </div> <div class="faq-answer"> <p>Currently, DrumMaster Pro requires an electronic drum kit with MIDI output. We're developing acoustic drum support using audio recognition - join our lifetime plan for early access!</p> </div> </div> </div> </section> <!-- CTA Section --> <section class="cta-section"> <h2>Ready to Become a Better Drummer?</h2> <p>Join thousands of drummers improving every day with DrumMaster Pro</p> <div style="display: flex; gap: 20px; justify-content: center;"> <a href="#" class="btn btn-primary btn-large" onclick="showCheckout('trial')">Start Free Trial</a> <a href="#" class="btn btn-outline btn-large" onclick="launchApp()">Try Demo</a> </div> </section> <!-- Footer --> <footer> <div class="footer-content"> <div class="footer-section"> <h3>DrumMaster Pro</h3> <p>The most advanced drum learning platform. Connect your kit, follow the lights, master the drums.</p> </div> <div class="footer-section"> <h3>Product</h3> <ul class="footer-links"> <li><a href="#">Features</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Updates</a></li> <li><a href="#">Roadmap</a></li> </ul> </div> <div class="footer-section"> <h3>Support</h3> <ul class="footer-links"> <li><a href="#">Help Center</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Setup Guide</a></li> <li><a href="#">Community</a></li> </ul> </div> <div class="footer-section"> <h3>Legal</h3> <ul class="footer-links"> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Service</a></li> <li><a href="#">Refund Policy</a></li> <li><a href="#">License</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>&copy; 2024 DrumMaster Pro. All rights reserved. Made with ❤️ for drummers.</p> </div> </footer> <!-- Checkout Modal --> <div class="modal" id="checkoutModal"> <div class="modal-content"> <button class="close-modal" onclick="closeModal()">×</button> <div class="modal-header"> <h2>Complete Your Purchase</h2> <p id="planDescription">Subscribe to DrumMaster Pro</p> </div> <form id="payment-form"> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label>Card Information</label> <div id="card-element"></div> </div> <div class="error-message" id="error-message"></div> <div class="success-message" id="success-message"></div> <button type="submit" class="btn btn-primary btn-full" id="submit-btn"> <span id="button-text">Complete Purchase</span> <div class="loading-spinner" id="loading-spinner"></div> </button> </form> </div> </div> <script> // Stripe Configuration const STRIPE_PUBLIC_KEY = 'pk_test_YOUR_STRIPE_PUBLIC_KEY'; // Replace with your Stripe public key let stripe = null; let elements = null; let cardElement = null; let currentPlan = null; // Price IDs (replace with your actual Stripe price IDs) const PRICES = { trial: 'price_trial_id', pro: 'price_pro_monthly_id', lifetime: 'price_lifetime_id' }; // Initialize Stripe when page loads document.addEventListener('DOMContentLoaded', function() { // Initialize Stripe stripe = Stripe(STRIPE_PUBLIC_KEY); // Smooth scrolling document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); }); // FAQ Accordion document.querySelectorAll('.faq-question').forEach(question => { question.addEventListener('click', function() { const item = this.parentElement; item.classList.toggle('active'); }); }); }); function showCheckout(plan) { currentPlan = plan; const modal = document.getElementById('checkoutModal'); modal.classList.add('active'); // Update plan description const descriptions = { trial: '7-Day Free Trial - No charge today', pro: 'Pro Monthly - $29/month', lifetime: 'Lifetime Access - $299 one-time' }; document.getElementById('planDescription').textContent = descriptions[plan]; // Initialize Stripe Elements if (!elements) { elements = stripe.elements(); cardElement = elements.create('card', { style: { base: { color: '#ffffff', fontFamily: '"Inter", sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: 'rgba(255, 255, 255, 0.4)' } }, invalid: { color: '#ff4444', iconColor: '#ff4444' } } }); cardElement.mount('#card-element'); } } function closeModal() { document.getElementById('checkoutModal').classList.remove('active'); } // Handle form submission document.getElementById('payment-form').addEventListener('submit', async (e) => { e.preventDefault(); const submitBtn = document.getElementById('submit-btn'); const buttonText = document.getElementById('button-text'); const spinner = document.getElementById('loading-spinner'); const errorMessage = document.getElementById('error-message'); const successMessage = document.getElementById('success-message'); // Show loading state submitBtn.disabled = true; buttonText.style.display = 'none'; spinner.style.display = 'block'; errorMessage.style.display = 'none'; successMessage.style.display = 'none'; try { // Create payment method const { error, paymentMethod } = await stripe.createPaymentMethod({ type: 'card', card: cardElement, billing_details: { name: document.getElementById('name').value, email: document.getElementById('email').value } }); if (error) { throw error; } // Send to your backend to create subscription // For demo, we'll simulate success await new Promise(resolve => setTimeout(resolve, 2000)); // Show success successMessage.textContent = 'Payment successful! Redirecting to app...'; successMessage.style.display = 'block'; // Store user session localStorage.setItem('drummaster_user', JSON.stringify({ email: document.getElementById('email').value, plan: currentPlan, subscriptionActive: true })); // Redirect to app setTimeout(() => { window.location.href = '/drum-teacher-pro.html'; }, 2000); } catch (error) { errorMessage.textContent = error.message || 'Payment failed. Please try again.'; errorMessage.style.display = 'block'; // Reset button submitBtn.disabled = false; buttonText.style.display = 'inline'; spinner.style.display = 'none'; } }); function launchApp() { // Check if user is logged in const user = JSON.parse(localStorage.getItem('drummaster_user') || '{}'); if (user.subscriptionActive) { window.location.href = '/drum-teacher-pro.html'; } else { // Launch demo mode localStorage.setItem('drummaster_demo', 'true'); window.location.href = '/drum-teacher-pro.html'; } } </script> </body> </html>

Search equations, builds, manuscript text, and recovered sources.