Repository navigation
Expand file tree
/
Copy pathapp.html
More file actions
180 lines (175 loc) · 10.1 KB
/
Copy pathapp.html
File metadata and controls
180 lines (175 loc) · 10.1 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
<!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="StockThink — free chess game analysis in your browser. Paste a PGN, get a full chess.com-style game review powered by Stockfish." />
<meta name="theme-color" content="#262421" />
<meta property="og:title" content="StockThink — Free Chess Game Review" />
<meta property="og:description" content="Paste a PGN or import from chess.com — accuracy, brilliancies, blunders and the coaching behind them. 100% in your browser." />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%2381b64c'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='16' cy='9.5' r='4.6'/%3E%3Cpath d='M16 12.5l4.4 10.7H11.6z'/%3E%3Crect x='9.5' y='23.2' width='13' height='3.8' rx='1.9'/%3E%3C/g%3E%3C/svg%3E" />
<title>StockThink — Free Chess Game Review</title>
<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=JetBrains+Mono:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<style>
/* Critical pre-app styles: dark canvas, no flash of white */
:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; background: #262421; color: #f5f4f0; }
</style>
</head>
<body>
<div id="app">
<header class="topbar">
<button class="wordmark" id="nav-brand" title="Home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="currentColor"><circle cx="16" cy="9.5" r="4.6"/><path d="M16 12.5l4.4 10.7H11.6z"/><rect x="9.5" y="23.2" width="13" height="3.8" rx="1.9"/></svg>
</span>
<span class="wordmark-text">StockTh<span class="wordmark-dot"></span>nk</span>
</button>
<nav class="topnav">
<button id="nav-home" class="nav-link active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11.2 12 4l9 7.2"/><path d="M5.5 9.8V20h13V9.8"/></svg>
Home
</button>
<button id="nav-input" class="nav-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.4-4.4"/></svg>
Game Review
</button>
<button id="nav-review" class="nav-link hidden">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 12h16M12 4v16"/></svg>
Current Game
</button>
</nav>
<span id="queue-pill" class="queue-pill hidden"></span>
</header>
<section id="screen-home" class="screen">
<div class="home-hero">
<div id="home-board" class="loader-board home-board" aria-hidden="true"></div>
<h1 class="home-title">Every move, <span class="title-accent">explained</span>.</h1>
<p class="home-sub">
A full chess.com-style Game Review — accuracy, brilliancies, blunders and the
coaching behind them. Powered by Stockfish 18 running entirely in your browser.
Free, no account, no server.
</p>
</div>
<div id="home-continue"></div>
<div class="home-cards">
<button class="home-card" id="home-pgn">
<span class="home-card-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4h7l4 4v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/><path d="M16 4v4h4M5 8H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10"/><path d="M11.5 12h5M11.5 15.5h5"/></svg>
</span>
<span class="home-card-body">
<span class="home-card-title">Paste a PGN</span>
<span class="home-card-text">Any game export — chess.com, lichess, or hand-typed moves — reviewed move by move.</span>
</span>
<span class="home-go">Start →</span>
</button>
<button class="home-card" id="home-cc">
<span class="home-card-icon green">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a4 4 0 0 1 4 4c0 1.6-.95 3-2.3 3.6l.8 2.4h-5l.8-2.4A4 4 0 0 1 8 6a4 4 0 0 1 4-4zM8.5 13h7l1.3 5H7.2l1.3-5zM5.5 19.5h13a1 1 0 0 1 1 1V22h-15v-1.5a1 1 0 0 1 1-1z"/></svg>
</span>
<span class="home-card-body">
<span class="home-card-title">Import from Chess.com</span>
<span class="home-card-text">Search any player, browse their history, and pre-analyze whole batches in the background.</span>
</span>
<span class="home-go">Search →</span>
</button>
</div>
<div class="home-feats">
<span class="home-feat">100% in your browser</span>
<span class="home-feat">Move-by-move coaching</span>
<span class="home-feat">Brilliant & blunder badges</span>
<span class="home-feat">Accuracy & rating estimate</span>
<span class="home-feat">Free forever</span>
</div>
</section>
<section id="screen-input" class="screen hidden">
<h1>Game Review</h1>
<div class="input-tabs" role="tablist">
<button id="tab-btn-pgn" class="input-tab active" role="tab" aria-selected="true">Paste PGN</button>
<button id="tab-btn-cc" class="input-tab" role="tab" aria-selected="false">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a4 4 0 0 1 4 4c0 1.6-.95 3-2.3 3.6l.8 2.4h-5l.8-2.4A4 4 0 0 1 8 6a4 4 0 0 1 4-4zM8.5 13h7l1.3 5H7.2l1.3-5zM5.5 19.5h13a1 1 0 0 1 1 1V22h-15v-1.5a1 1 0 0 1 1-1z"/></svg>
From Chess.com
</button>
<label class="tier-label">Engine time
<select id="tier">
<option value="fast">Fast (75k nodes/move)</option>
<option value="standard" selected>Standard (200k nodes/move)</option>
<option value="deep">Deep (500k nodes/move)</option>
</select>
</label>
</div>
<div id="tab-pgn" role="tabpanel">
<p class="hint">Paste a PGN (chess.com / lichess export) and let Stockfish 18 review every move — entirely in your browser.</p>
<textarea id="pgn-input" spellcheck="false" placeholder='[Event "..."] 1. e4 e5 2. Nf3 ...'></textarea>
<div class="row">
<button id="analyze-btn" class="primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.4-4.4"/></svg>
Analyze game
</button>
</div>
<p id="input-error" class="error hidden"></p>
</div>
<div id="tab-cc" role="tabpanel" class="hidden"></div>
</section>
<section id="screen-progress" class="screen hidden">
<div id="loader-board" class="loader-board" aria-hidden="true"></div>
<p id="progress-sub" class="progress-sub hidden"></p>
<div id="progress-pct" class="progress-pct">0%</div>
<div class="progress-track"><div id="progress-fill"></div></div>
<p id="progress-text">Starting engines…</p>
<p id="progress-quip" class="progress-quip"></p>
<button id="progress-cancel" class="progress-cancel">Cancel</button>
</section>
<section id="screen-review" class="screen hidden">
<div class="review-layout">
<div class="board-zone">
<div id="eval-bar"><div class="white-fill"></div><span class="eval-label">0.0</span></div>
<div class="board-col">
<div class="player-bar" id="player-top"></div>
<div id="board" class="board"></div>
<div class="player-bar" id="player-bottom"></div>
</div>
</div>
<aside class="sidebar">
<div id="summary"></div>
<div id="coach"></div>
<div id="moves" class="moves-scroll"></div>
<div id="graph"></div>
<div id="deep-review"></div>
<div class="controls">
<button id="btn-start" title="Start of game (Home)" aria-label="Start of game">
<svg viewBox="0 0 24 24"><path d="M7 6v12"/><path d="M18 7l-6 5 6 5"/></svg>
</button>
<button id="btn-prev" title="Previous move (←)" aria-label="Previous move">
<svg viewBox="0 0 24 24"><path d="M14.5 6.5 9 12l5.5 5.5"/></svg>
</button>
<button id="btn-next" class="nav-primary" title="Next move (→)" aria-label="Next move">
<svg viewBox="0 0 24 24"><path d="M9.5 5.5 16 12l-6.5 6.5"/></svg>
</button>
<button id="btn-end" title="End of game (End)" aria-label="End of game">
<svg viewBox="0 0 24 24"><path d="M6 7l6 5-6 5"/><path d="M17 6v12"/></svg>
</button>
<span class="controls-gap"></span>
<button id="btn-flip" title="Flip board (f)" aria-label="Flip board">
<svg viewBox="0 0 24 24"><path d="M8 7v10M8 17l-3-3M8 17l3-3"/><path d="M16 17V7M16 7l-3 3M16 7l3 3"/></svg>
</button>
<button id="btn-new" title="Review another game">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
New
</button>
</div>
</aside>
</div>
</section>
<footer class="footer">
<span>Runs 100% in your browser · Stockfish 18 Lite (GPL) · openings CC0 lichess · pieces © Chess.com (Neo)</span>
</footer>
</div>
<script type="module" src="/frontend/src/main.ts"></script>
</body>
</html>