| <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Jenny's DrumSteps — Free Browser Drum Machine</title> |
| <style> |
| *{box-sizing:border-box;margin:0;padding:0} |
| body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(1200px 600px at 50% -10%,#3a1d54,#160d24);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;text-align:center} |
| .card{max-width:640px} |
| .bar{height:8px;width:160px;margin:0 auto 26px;border-radius:8px;background:linear-gradient(90deg,#EC407A,#F7941E,#FCC419,#5BBF4A,#29ABE2,#7B3FA0)} |
| .emoji{font-size:72px;line-height:1} |
| h1{font-size:clamp(34px,7vw,56px);margin:6px 0 4px;background:linear-gradient(90deg,#EC407A,#FCC419,#29ABE2);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800} |
| p.lede{font-size:clamp(16px,3vw,20px);color:#d6cbe8;margin:10px auto 6px;max-width:30ch} |
| .btn{display:inline-block;margin:26px 0 10px;background:#EC407A;color:#fff;font-weight:800;font-size:22px;text-decoration:none;padding:16px 36px;border-radius:999px;box-shadow:0 12px 30px rgba(236,64,122,.4);transition:transform .15s} |
| .btn:hover{transform:translateY(-2px)} |
| .feat{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px} |
| .chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;font-size:14px;color:#e7def5} |
| .note{margin-top:18px;font-size:13px;color:#9b8fb5} |
| a.plain{color:#c8b6e8} |
| </style></head> |
| <body><main class="card"> |
| <div class="bar"></div> |
| <div class="emoji">🥁</div> |
| <h1>Jenny's DrumSteps</h1> |
| <p class="lede">A free browser drum machine. Every sound is synthesized live, and you can play it with a real MIDI kit.</p> |
| <a class="btn" href="https://jennysdrumsteps.thatwebhostingguy.com/app/" target="_blank" rel="noopener">🥁 Play the Drum Machine</a> |
| <div class="feat"> |
| <span class="chip">Web Audio synthesis, no samples</span> |
| <span class="chip">Live MIDI electronic kit input</span> |
| <span class="chip">Keyboard + touch</span> |
| <span class="chip">No install, no signup</span> |
| </div> |
| <p class="note">Web MIDI works in Chrome and Edge on desktop, or Chrome on Android. Built by <a class="plain" href="https://thatdeveloperguy.com" target="_blank" rel="noopener">ThatDeveloperGuy</a>.</p> |
| </main></body></html> |
|
|
