Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/Jennys-Drumste / index.html |
| Date | Not specified in source |
| Repository | Janady13/Jennys-Drumste |
| Revision | c601bf1648fe71058835589331c7f7e669940b8b |
| Branch | main |
| Path or archive member | index.html |
| Original SHA-256 | e761201e37265e797c0d9efe1a5489d650623a5581fb95f01809ae9629590d10 |
| Git blob SHA | 19d711ba37e505e456fc6670556b68a28ccc6ed2 |
| Reading-copy SHA-256 | e761201e37265e797c0d9efe1a5489d650623a5581fb95f01809ae9629590d10 |
Every recorded occurrence
These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| Janady13/Jennys-Drumste / index.html | main | c601bf1648fe71058835589331c7f7e669940b8b | Open original |
| Janady13/Jennys-Drumste / index.html | claude/complete-integration-feature-011CUkTzyyk8bKmXaRXJAR61 | 01c36ac1a180916e11864b4573b8c1999e2c5db3 | Open 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>© 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>