Spaces:
Running
Running
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <meta name="description" content="SpeedTennis Summer Smash 2026 — Master your serve with real-time AI form analysis, ball speed & trajectory tracking. 100% offline & private."> | |
| <title>SpeedTennis Summer Smash 2026</title> | |
| <style> | |
| :root{ | |
| --ball:#d4ff3a; | |
| --ball-deep:#a8d600; | |
| --court:#1a4d2e; | |
| --court-dark:#0d2b18; | |
| --ink:#0a1f14; | |
| --paper:#f6fff0; | |
| --line:rgba(255,255,255,.14); | |
| } | |
| *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} | |
| html,body{background:var(--ink);color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased} | |
| body{overflow-x:hidden} | |
| .wrap{max-width:480px;margin:0 auto;padding:0 22px} | |
| a{color:inherit} | |
| /* HERO */ | |
| .hero{position:relative;padding:64px 0 40px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#163a23 0%,var(--ink) 70%)} | |
| .hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;opacity:.35;mask:linear-gradient(180deg,#000,transparent 80%);-webkit-mask:linear-gradient(180deg,#000,transparent 80%)} | |
| .badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--ball);color:var(--ball);border-radius:999px;font-size:12px;letter-spacing:.12em;font-weight:600;text-transform:uppercase} | |
| .dot{width:7px;height:7px;border-radius:50%;background:var(--ball);box-shadow:0 0 12px var(--ball)} | |
| h1{font-size:46px;line-height:.98;font-weight:900;letter-spacing:-.02em;margin:18px 0 6px} | |
| h1 .accent{color:var(--ball)} | |
| .sub{font-size:17px;color:#bfe6c4;max-width:34ch} | |
| .dates{margin-top:18px;font-size:14px;color:#8fb89a;letter-spacing:.04em} | |
| .dates b{color:var(--paper)} | |
| .ball-trail{position:absolute;right:-30px;top:40px;width:200px;height:200px;opacity:.9} | |
| .cta-row{margin-top:26px;display:flex;flex-direction:column;gap:10px} | |
| .btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 22px;border-radius:16px;font-size:16px;font-weight:700;text-decoration:none;transition:transform .15s ease} | |
| .btn:active{transform:scale(.98)} | |
| .btn-primary{background:var(--ball);color:var(--ink);box-shadow:0 8px 28px rgba(212,255,58,.28)} | |
| .btn-ghost{border:1px solid rgba(255,255,255,.25);color:var(--paper)} | |
| section{padding:46px 0} | |
| .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ball);font-weight:700;margin-bottom:10px} | |
| h2{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px} | |
| .lead{color:#a9cfb1;font-size:15px} | |
| .features{display:flex;flex-direction:column;gap:12px;margin-top:22px} | |
| .feature{display:flex;gap:14px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03)} | |
| .feature-ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(212,255,58,.12);color:var(--ball);display:flex;align-items:center;justify-content:center;font-size:20px} | |
| .feature h3{font-size:16px;font-weight:700;margin-bottom:3px} | |
| .feature p{font-size:14px;color:#9fc4a7} | |
| .speed-card{margin-top:24px;padding:24px;border-radius:20px;background:linear-gradient(135deg,#1f5a37,#10391f);border:1px solid rgba(212,255,58,.25);text-align:center} | |
| .speed-num{font-size:64px;font-weight:900;color:var(--ball);line-height:1;letter-spacing:-.03em} | |
| .speed-unit{font-size:16px;color:#bfe6c4;margin-top:4px} | |
| .speed-note{font-size:13px;color:#8fb89a;margin-top:12px} | |
| .steps{display:flex;flex-direction:column;gap:14px;margin-top:24px} | |
| .step{display:flex;gap:16px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03)} | |
| .step-no{flex:none;width:38px;height:38px;border-radius:12px;background:var(--ball);color:var(--ink);font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center} | |
| .step h3{font-size:16px;font-weight:700;margin-bottom:3px} | |
| .step p{font-size:14px;color:#9fc4a7} | |
| .prizes{display:flex;flex-direction:column;gap:10px;margin-top:22px} | |
| .prize{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)} | |
| .rank{flex:none;width:30px;text-align:center;font-weight:900;font-size:20px} | |
| .rank.r1{color:var(--ball)} .rank.r2{color:#c0c0c0} .rank.r3{color:#cd7f32} | |
| .prize .t{font-weight:700;font-size:15px} | |
| .prize .d{font-size:13px;color:#9fc4a7} | |
| .rules{margin-top:20px;font-size:14px;color:#9fc4a7;line-height:1.8} | |
| .rules li{margin-left:18px;margin-bottom:6px} | |
| .rules b{color:var(--paper)} | |
| footer{padding:40px 0 60px;border-top:1px solid rgba(255,255,255,.08);text-align:center} | |
| .foot-logo{font-weight:900;font-size:18px;letter-spacing:-.01em} | |
| .foot-logo span{color:var(--ball)} | |
| .foot-meta{margin-top:8px;font-size:12px;color:#6f9778} | |
| .foot-cta{margin-top:22px} | |
| @media(max-width:360px){h1{font-size:38px}.speed-num{font-size:52px}} | |
| </style> | |
| </head> | |
| <body> | |
| <!-- HERO --> | |
| <header class="hero"> | |
| <div class="wrap" style="position:relative;z-index:1"> | |
| <span class="badge"><span class="dot"></span>In-App Event</span> | |
| <h1>Summer <span class="accent">Smash</span><br>2026</h1> | |
| <p class="sub">Master your serve with real-time AI form analysis, ball speed & trajectory tracking.</p> | |
| <p class="dates">📅 <b>July 15 — Aug 31, 2026</b> · Compete with players worldwide</p> | |
| <svg class="ball-trail" viewBox="0 0 200 200" fill="none" aria-hidden="true"> | |
| <path d="M20 170 C 60 160, 100 90, 180 30" stroke="#d4ff3a" stroke-width="2" stroke-dasharray="4 6" opacity=".6"/> | |
| <circle cx="180" cy="30" r="14" fill="#d4ff3a"/> | |
| <path d="M180 16 a14 14 0 0 1 0 28" stroke="#fff" stroke-width="1.5" opacity=".7"/> | |
| <circle cx="20" cy="170" r="3" fill="#d4ff3a"/> | |
| </svg> | |
| <div class="cta-row"> | |
| <a class="btn btn-primary" href="https://apps.apple.com/cn/app/speedtennis-%E7%BD%91%E7%90%83%E8%BF%BD%E8%B8%AA/id6785712962" target="_blank" rel="noopener">Download SpeedTennis & Join →</a> | |
| <a class="btn btn-ghost" href="#join">How to join</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- FEATURES --> | |
| <section id="about"> | |
| <div class="wrap"> | |
| <div class="eyebrow">Why SpeedTennis</div> | |
| <h2>Real-time AI, on device.</h2> | |
| <p class="lead">No subscriptions, no cloud, no compromise on privacy. All analysis runs locally on your iPhone.</p> | |
| <div class="features"> | |
| <div class="feature"> | |
| <div class="feature-ic">⚡</div> | |
| <div> | |
| <h3>Ball Speed Tracking</h3> | |
| <p>Real-time ball speed measurement using court-width calibration and trajectory tracking.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-ic">🎯</div> | |
| <div> | |
| <h3>AI Form Analysis</h3> | |
| <p>Detects players, rackets and the ball — draws trajectory and shows speed labels on screen.</p> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-ic">🔒</div> | |
| <div> | |
| <h3>100% Offline & Private</h3> | |
| <p>No subs, no cloud uploads. Every frame stays on your device.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CHALLENGE --> | |
| <section style="background:var(--court-dark)"> | |
| <div class="wrap"> | |
| <div class="eyebrow">The Challenge</div> | |
| <h2>How fast can you serve?</h2> | |
| <p class="lead">Pro serve average is around 180 km/h. What's your personal best?</p> | |
| <div class="speed-card"> | |
| <div class="speed-num">180<span style="font-size:28px">km/h</span></div> | |
| <div class="speed-unit">Pro serve reference speed</div> | |
| <div class="speed-note">SpeedTennis computes ball speed locally on iPhone using court calibration and trajectory tracking.</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- HOW TO JOIN --> | |
| <section id="join"> | |
| <div class="wrap"> | |
| <div class="eyebrow">How to Join</div> | |
| <h2>Three steps to your top speed</h2> | |
| <p class="lead">No sign-up. Just record your shots with SpeedTennis and AI measures the rest.</p> | |
| <div class="steps"> | |
| <div class="step"> | |
| <div class="step-no">1</div> | |
| <div> | |
| <h3>Download & open SpeedTennis</h3> | |
| <p>Install on iPhone, open the Live tab, and grant camera access.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-no">2</div> | |
| <div> | |
| <h3>Record your serve</h3> | |
| <p>AI detects players, racket and ball in real time, drawing trajectory and showing speed on screen.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-no">3</div> | |
| <div> | |
| <h3>Share your top speed</h3> | |
| <p>Post a screenshot with <b style="color:var(--ball)">#SpeedTennisSummer</b> to enter the global leaderboard.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- REWARDS --> | |
| <section> | |
| <div class="wrap"> | |
| <div class="eyebrow">Rewards</div> | |
| <h2>Leaderboard prizes</h2> | |
| <p class="lead">Ranked by the highest speed shared under the hashtag when the event ends.</p> | |
| <div class="prizes"> | |
| <div class="prize"><div class="rank r1">#1</div><div><div class="t">Champion · Speed King</div><div class="d">Limited SpeedTennis merch + Champion certificate</div></div></div> | |
| <div class="prize"><div class="rank r2">#2</div><div><div class="t">Runner-up</div><div class="d">Limited SpeedTennis merch</div></div></div> | |
| <div class="prize"><div class="rank r3">#3</div><div><div class="t">Third place</div><div class="d">Limited SpeedTennis merch</div></div></div> | |
| <div class="prize"><div class="rank" style="color:#8fb89a">★</div><div><div class="t">Participation</div><div class="d">All valid entries receive an event digital badge</div></div></div> | |
| </div> | |
| <div class="rules"> | |
| <p style="font-weight:700;color:var(--paper);margin-bottom:8px">Rules</p> | |
| <ul> | |
| <li>Recordings must be made with <b>SpeedTennis</b>, with speed shown on screen by the app.</li> | |
| <li>Screenshots must clearly show the speed value and trajectory.</li> | |
| <li>Each player's highest single result counts toward the leaderboard.</li> | |
| <li>SpeedTennis reserves the right to disqualify fraudulent entries.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div class="wrap"> | |
| <div class="foot-logo">Speed<span>Tennis</span></div> | |
| <div class="foot-meta">Summer Smash 2026 · July 15 — Aug 31</div> | |
| <div class="foot-cta"> | |
| <a class="btn btn-primary" href="https://apps.apple.com/cn/app/speedtennis-%E7%BD%91%E7%90%83%E8%BF%BD%E8%B8%AA/id6785712962" target="_blank" rel="noopener" style="display:inline-flex">Download & Join Now</a> | |
| </div> | |
| <div class="foot-meta" style="margin-top:24px">© 2026 YueHuLab · SpeedTennis</div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |