-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
218 lines (198 loc) · 8.71 KB
/
index.html
File metadata and controls
218 lines (198 loc) · 8.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The ultimate chess time controller for precision and elegance.">
<title>Chess Time Controller | Premium Experience</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<header class="navbar" id="navbar">
<div class="logo">
<a href="https://github.com/vinnytherobot" target="_blank">
VTR
</a>
</div>
<nav class="links">
<ul>
<li class="link"><a href="index.html">Home</a></li>
<li class="link"><a href="/settings/index.html">Get Started</a></li>
<li class="link"><a href="https://github.com/vinnytherobot" target="_blank">About</a></li>
<li class="link"><a href="/settings/index.html">Settings</a></li>
</ul>
</nav>
<div class="menu-icon" id="open-menu">
<i class="fas fa-bars"></i>
</div>
</header>
<div class="responsive-menu" id="side-menu">
<div class="head">
<div class="logo">
<a href="https://github.com/vinnytherobot" target="_blank">
VTR
</a>
</div>
<div class="close-menu-icon" id="close-menu">
<i class="fas fa-xmark"></i>
</div>
</div>
<nav class="links">
<ul>
<li class="link"><a href="index.html">Home</a></li>
<li class="link"><a href="/settings/index.html">Start Match</a></li>
<li class="link"><a href="https://github.com/vinnytherobot" target="_blank">About Developer</a></li>
<li class="link"><a href="/settings/index.html">Settings</a></li>
</ul>
</nav>
<div class="footer">
<a href="https://github.com/vinnytherobot">
By vinnytherobot
</a>
</div>
</div>
<main>
<section class="hero">
<h1>Precision in every move.</h1>
<p>Elevate your chess game with the most elegant time controller built for masters and enthusiasts alike.
</p>
<button id="cta-button">
<a href="/settings/index.html">Start Now</a>
</button>
</section>
<section id="features" class="section reveal">
<h2 class="section-title">Superior Features</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-stopwatch"></i></div>
<h3>Precision Timing</h3>
<p>Millisecond accuracy to ensure every game is fair and professional.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-palette"></i></div>
<h3>Elegant UI</h3>
<p>A minimalist interface that doesn't distract you from your strategy.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-mobile-screen-button"></i></div>
<h3>Fully Responsive</h3>
<p>Works perfectly on your tablet, smartphone, or desktop computer.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-bolt"></i></div>
<h3>Instant Setup</h3>
<p>Configure names and time controls in seconds and jump straight into the match.</p>
</div>
</div>
</section>
<section id="how-it-works" class="section bg-glass reveal">
<h2 class="section-title">How It Works</h2>
<div class="steps">
<div class="step">
<div class="step-num">01</div>
<div class="step-content">
<h3>Set Your Pace</h3>
<p>Enter player names and choose your preferred time control and increment.</p>
</div>
</div>
<div class="step">
<div class="step-num">02</div>
<div class="step-content">
<h3>Start the Match</h3>
<p>Both clocks start synchronized. Tap your side to end your turn.</p>
</div>
</div>
<div class="step">
<div class="step-num">03</div>
<div class="step-content">
<h3>Win Gracefully</h3>
<p>The app notifies you immediately when a player runs out of time.</p>
</div>
</div>
</div>
</section>
<section class="cta-banner section reveal">
<div class="cta-content">
<h2>Ready to play?</h2>
<p>Join thousands of players who trust VTR for their over-the-board matches.</p>
<button class="btn-primary">
<a href="/settings/index.html">Launch Match Controller</a>
</button>
</div>
</section>
</main>
<footer class="main-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="logo">
<a href="#">VTR</a>
</div>
<p>Developing tools for the modern chess enthusiast.</p>
</div>
<div class="footer-links">
<h3>Connect</h3>
<ul>
<li><a href="https://vinnytherobot.vercel.app" target="_blank"><i class="fas fa-globe"></i>
Portfolio</a></li>
<li><a href="https://github.com/vinnytherobot" target="_blank"><i class="fab fa-github"></i>
GitHub</a></li>
<li><a href="https://instagram.com/jvinny.dias" target="_blank"><i class="fab fa-instagram"></i>
Instagram</a></li>
</ul>
</div>
<div class="footer-legal">
<h3>Navigation</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/settings/index.html">Settings</a></li>
<li><a href="https://github.com/vinnytherobot" target="_blank">About</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 VTR Chess Time Controller. Built with precision by <a href="https://github.com/vinnytherobot"
target="_blank">vinnytherobot</a>.</p>
</div>
</footer>
<script>
const sideMenu = document.getElementById("side-menu");
const openMenuBtn = document.getElementById("open-menu");
const closeMenuBtn = document.getElementById("close-menu");
openMenuBtn.addEventListener("click", () => {
sideMenu.classList.add("active");
});
closeMenuBtn.addEventListener("click", () => {
sideMenu.classList.remove("active");
});
// Close menu on link click
const navLinks = document.querySelectorAll('.responsive-menu .link a');
navLinks.forEach(link => {
link.addEventListener('click', () => {
sideMenu.classList.remove("active");
});
});
// Scroll Reveal
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
}
}
}
window.addEventListener("scroll", reveal);
// To check the scroll position on page load
reveal();
</script>
</body>
</html>