Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
170 lines (160 loc) · 7.81 KB
/
Copy pathindex.html
File metadata and controls
170 lines (160 loc) · 7.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Master the board with ChessPulse. Play online chess, solve daily tactical puzzles, and analyze your games.">
<title>ChessPulse | Master the Board</title>
<!-- Google Fonts -->
<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=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation -->
<header class="navbar">
<div class="logo">
<span class="logo-icon">♞</span>
<span class="logo-text">ChessPulse</span>
</div>
<nav class="nav-links">
<a href="#features">Features</a>
<a href="#about">About</a>
<div id="navAuthArea">
<button class="btn btn-secondary" id="loginBtn">Log In</button>
<button class="btn btn-primary" id="playBtnNav">Play Now</button>
</div>
</nav>
</header>
<!-- Hero Section -->
<main>
<section class="hero">
<div class="hero-content">
<span class="badge">✨ Next-Gen Chess Platform</span>
<h1>Master Every Move.<br><span class="highlight">Outsmart Your Opponent.</span></h1>
<p>Play live chess with opponents worldwide, solve daily tactics, and improve your rating with intelligent analytics.</p>
<div class="hero-actions">
<button class="btn btn-primary btn-large" id="playBtnHero">Play Online Now</button>
<button class="btn btn-outline btn-large" id="puzzleBtnHero">Solve Today's Puzzle</button>
</div>
<div class="stats">
<div class="stat-item">
<span class="stat-num">10M+</span>
<span class="stat-label">Games Played</span>
</div>
<div class="stat-item">
<span class="stat-num">500K+</span>
<span class="stat-label">Active Players</span>
</div>
<div class="stat-item">
<span class="stat-num">99.9%</span>
<span class="stat-label">Uptime</span>
</div>
</div>
</div>
<div class="hero-visual">
<div class="board-card">
<div class="board-header">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
<span class="match-title">Match of the Day</span>
</div>
<div class="mini-board" id="miniBoard">
<div class="square dark">♜</div>
<div class="square light">♞</div>
<div class="square dark">♝</div>
<div class="square light">♛</div>
<div class="square dark">♚</div>
<div class="square light">♝</div>
<div class="square dark">♞</div>
<div class="square light">♜</div>
<div class="square light">♟</div>
<div class="square dark">♟</div>
<div class="square light">♟</div>
<div class="square dark">♟</div>
<div class="square light">♟</div>
<div class="square dark">♟</div>
<div class="square light">♟</div>
<div class="square dark">♟</div>
</div>
<div class="board-footer">
<span class="turn-indicator">White to move in <strong>3</strong>...</span>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features">
<h2>Why Choose <span class="highlight">ChessPulse</span>?</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Instant Matchmaking</h3>
<p>Connect with players of equal skill level instantly in Bullet, Blitz, or Rapid modes.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🧩</div>
<h3>Interactive Puzzles</h3>
<p>Sharpen your tactical vision with thousands of curated puzzles adapted to your rating.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Deep Game Analysis</h3>
<p>Review key blunders and winning moves with stockfish engine post-match evaluation.</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p>© 2026 ChessPulse. Built for grandmasters & beginners alike.</p>
</footer>
<!-- Login / Sign Up Modal -->
<div class="modal-overlay" id="authModal">
<div class="modal-card">
<button class="modal-close" id="closeModalBtn" title="Close">×</button>
<div class="modal-tabs">
<button class="tab-btn active" id="tabLoginBtn">Log In</button>
<button class="tab-btn" id="tabSignupBtn">Sign Up</button>
</div>
<!-- Notification message inside modal -->
<div class="auth-message hidden" id="authMessage"></div>
<!-- Log In Form -->
<form class="auth-form" id="loginForm">
<h3>Welcome Back</h3>
<p class="auth-sub">Enter your details to sign in to ChessPulse</p>
<div class="form-group">
<label for="loginUser">Username or Email</label>
<input type="text" id="loginUser" placeholder="e.g. grandmaster_alex" required>
</div>
<div class="form-group">
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" placeholder="••••••••" required>
</div>
<button type="submit" class="btn btn-primary btn-full">Log In</button>
</form>
<!-- Sign Up Form -->
<form class="auth-form hidden" id="signupForm">
<h3>Create Account</h3>
<p class="auth-sub">Start with 1200 Rating Points & unlock all puzzles</p>
<div class="form-group">
<label for="signupUser">Username</label>
<input type="text" id="signupUser" placeholder="Choose a username" required>
</div>
<div class="form-group">
<label for="signupEmail">Email</label>
<input type="email" id="signupEmail" placeholder="name@example.com" required>
</div>
<div class="form-group">
<label for="signupPassword">Password</label>
<input type="password" id="signupPassword" placeholder="Minimum 6 characters" required minlength="6">
</div>
<button type="submit" class="btn btn-primary btn-full">Sign Up Free</button>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>