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
Revisionc601bf1648fe71058835589331c7f7e669940b8b
Branchmain
Path or archive memberindex.html
Original SHA-256e761201e37265e797c0d9efe1a5489d650623a5581fb95f01809ae9629590d10
Git blob SHA19d711ba37e505e456fc6670556b68a28ccc6ed2
Reading-copy SHA-256e761201e37265e797c0d9efe1a5489d650623a5581fb95f01809ae9629590d10

Original source ↗

Every recorded occurrence

These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.

Original recordBranch or archiveRevision / identifierOriginal location
Janady13/Jennys-Drumste / index.htmlmainc601bf1648fe71058835589331c7f7e669940b8bOpen original
Janady13/Jennys-Drumste / index.htmlclaude/complete-integration-feature-011CUkTzyyk8bKmXaRXJAR6101c36ac1a180916e11864b4573b8c1999e2c5db3Open original

Recovered source transcript

Download complete source text ↓1,362 lines · 44.4 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 - Learn Drums Like a Pro | AI-Powered Drum Teaching</title> <meta name="description" content="Transform your Alesis Nitro Max into an AI-powered drum teacher. Learn faster with real-time feedback, guided lessons, and gamified training. Start free trial today!"> <!-- 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="#features" class="nav-link">Features</a> <a href="#pricing" class="nav-link">Pricing</a> <a href="#testimonials" class="nav-link">Reviews</a> <a href="#" class="btn btn-outline" onclick="launchApp()">Launch App</a> <a href="#" class="btn btn-primary" onclick="showCheckout('pro')">Get Started</a> </div> </div> </nav> <!-- Hero Section --> <section class="hero"> <div class="hero-content"> <div class="hero-text"> <h1>Turn Your Drum Kit Into An <span class="highlight">AI-Powered Teacher</span></h1> <p>Connect your Alesis Nitro Max and learn drums 3x faster with real-time feedback, guided lessons, and gamified training. Join 10,000+ drummers mastering their craft.</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> <!-- 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>AI Coach</h3> <p>Our AI analyzes your playing style and creates personalized practice routines for faster improvement.</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">98%</div> <div class="stat-label">Improvement Rate</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.