<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>TennisCount – Apple Watch Tennis Scorekeeper</title>
<meta name="description" content="Score tennis matches easily on Apple Watch. Fast scoring, voice announcements, offline support and match history.">
<meta property="og:title" content="TennisCount – Apple Watch Tennis Scorekeeper">
<meta property="og:description" content="The easiest way to score tennis matches on Apple Watch.">
<meta property="og:type" content="website">
<style>
:root{
--green:#1faa59;
--court:#0c2e1e;
--text:#222;
--card:#ffffff;
}
@media (prefers-color-scheme:dark){
:root{
--text:#f0f0f0;
--card:#1b1b1b;
}
}
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
background:var(--court);
color:var(--text);
}
/* HERO */
.hero{
position:relative;
height:520px;
background:#0b3d26;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}
/* tennis court */
.court{
position:absolute;
width:100%;
height:100%;
background:
linear-gradient(#1b7a4a,#1b7a4a) center/6px 100% no-repeat,
linear-gradient(#ffffff,#ffffff) center/100% 4px no-repeat,
repeating-linear-gradient(
90deg,
transparent,
transparent 48%,
rgba(255,255,255,0.15) 49%,
transparent 50%
);
opacity:.3;
}
/* animated ball */
.ball{
position:absolute;
width:28px;
height:28px;
background:#f7ff00;
border-radius:50%;
top:60%;
left:-40px;
animation:ballmove 8s linear infinite;
}
@keyframes ballmove{
0%{left:-40px;top:60%}
25%{top:40%}
50%{left:100%;top:55%}
75%{top:35%}
100%{left:-40px;top:60%}
}
/* hero text */
.hero-content{
position:relative;
z-index:2;
}
.hero h1{
font-size:52px;
margin:10px 0;
}
.hero p{
font-size:20px;
opacity:.9;
}
.cta{
margin-top:25px;
}
.cta a{
display:inline-block;
padding:14px 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;
margin:6px;
}
.appstore{
background:white;
color:#0b3d26;
}
.secondary{
background:rgba(255,255,255,0.2);
color:white;
}
/* container */
.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}
.section{
background:var(--card);
padding:35px;
border-radius:14px;
margin-bottom:30px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
}
h2{
margin-top:0;
border-bottom:3px solid var(--green);
padding-bottom:6px;
}
/* features */
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-top:20px;
}
.feature{
background:#f3f3f3;
padding:18px;
border-radius:10px;
}
@media(prefers-color-scheme:dark){
.feature{
background:#2a2a2a;
}
}
/* screenshots */
.screens{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:20px;
}
.screens img{
width:100%;
border-radius:14px;
}
/* footer */
footer{
text-align:center;
padding:40px;
color:white;
opacity:.9;
}
footer a{
color:#9be2b7;
text-decoration:none;
margin:0 10px;
}
</style>
</head>
<body>
<section class="hero">
<div class="court"></div>
<div class="ball"></div>
<div class="hero-content">
<h1>🎾 TennisCount</h1>
<p>The easiest way to score tennis matches on Apple Watch</p>
<div class="cta">
<a class="appstore" href="#">View on App Store</a>
<a class="secondary" href="#support">Support</a>
</div>
</div>
</section>
<div class="container">
<section class="section">
<h2>Why TennisCount?</h2>
<div class="features">
<div class="feature">
<h3>⌚ Apple Watch Native</h3>
<p>Designed specifically for Apple Watch. No iPhone required.</p>
</div>
<div class="feature">
<h3>⚡ Fast Scoring</h3>
<p>Tap to score points instantly. Swipe to undo mistakes.</p>
</div>
<div class="feature">
<h3>🎙 Voice Score</h3>
<p>Hear the score announced automatically after each point.</p>
</div>
<div class="feature">
<h3>📶 Offline</h3>
<p>Works 100% offline on the court.</p>
</div>
<div class="feature">
<h3>📊 Match History</h3>
<p>Track previous matches and share results.</p>
</div>
<div class="feature">
<h3>🌍 11 Languages</h3>
<p>English, Portuguese, Spanish and more.</p>
</div>
</div>
</section>
<section class="section">
<h2>App Screenshots</h2>
<div class="screens">
<img src="assets/screenshot1.png">
<img src="assets/screenshot2.png">
<img src="assets/screenshot3.png">
</div>
</section>
<section id="support" class="section">
<h2>Support</h2>
<h3>Quick Start</h3>
<ol>
<li>Open TennisCount on Apple Watch</li>
<li>Configure players in Settings</li>
<li>Select match format</li>
<li>Choose tiebreak points</li>
<li>Start match</li>
</ol>
<h3>Scoring</h3>
<ul>
<li>Tap player zone to score</li>
<li>Swipe left to undo</li>
<li>Swipe from edge to cancel match</li>
</ul>
<h3>Contact</h3>
<p>
Developer: <b>Clovis Sarturi</b><br>
Email: sarturidev@gmail.com<br>
Response time: 24–48 hours
</p>
</section>
<section class="section">
<h2>Languages</h2>
<p>
English | Português | Español
</p>
</section>
</div>
<footer>
TennisCount © 2026
<br><br>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms</a>
</footer>
</body>
</html>