Skip to content

Commit a6359f9

Browse files
Amey-ThakurAmey-Thakur
committed
MATH-SPRINT-GAME
1 parent bccdbe9 commit a6359f9

2 files changed

Lines changed: 84 additions & 62 deletions

File tree

‎Source Code/index.html‎

Lines changed: 83 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -179,89 +179,111 @@ <h1 class="final-time"></h1>
179179
</div>
180180
</div>
181181

182-
<!-- Premium Hidden Share Card (For Image Generation) -->
182+
<!-- The Masterpiece Share Card (Ultimate Promotion) -->
183183
<div id="share-card"
184-
style="position: absolute; top: -9999px; left: -9999px; width: 450px; padding: 40px; background: radial-gradient(circle at top left, #1e1e2e, #11111b); color: white; border-radius: 24px; font-family: 'Play', sans-serif; text-align: center; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.5);">
184+
style="position: absolute; top: -9999px; left: -9999px; width: 480px; padding: 50px; background: #0b0b12; color: white; border-radius: 32px; font-family: 'Outfit', 'Play', sans-serif; text-align: center; border: 1px solid rgba(255,255,255,0.08); overflow: hidden;">
185185

186-
<!-- Header with Logo -->
187-
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 30px;">
186+
<!-- Atmospheric Glows -->
187+
<div
188+
style="position: absolute; top: -100px; left: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(10, 132, 255, 0.15) 0%, transparent 70%); pointer-events: none;">
189+
</div>
190+
<div
191+
style="position: absolute; bottom: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(148, 226, 213, 0.1) 0%, transparent 70%); pointer-events: none;">
192+
</div>
193+
194+
<!-- Header Section -->
195+
<div style="margin-bottom: 40px; position: relative;">
188196
<div
189-
style="width: 40px; height: 40px; background: dodgerblue; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-weight: bold; font-size: 20px; box-shadow: 0 0 20px rgba(30,144,255,0.4);">
190-
∑</div>
191-
<div style="text-align: left;">
192-
<h2
193-
style="margin: 0; font-size: 24px; letter-spacing: 2px; color: white; text-transform: uppercase;">
194-
Math Sprint</h2>
195-
<div
196-
style="font-size: 10px; color: #89b4fa; letter-spacing: 4px; text-transform: uppercase; font-weight: bold;">
197-
World Ranking</div>
197+
style="display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 8px;">
198+
<span
199+
style="background: rgba(10, 132, 255, 0.2); color: #0a84ff; padding: 4px 12px; border-radius: 12px; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; border: 1px solid rgba(10, 132, 255, 0.3);">Global
200+
Ranking</span>
198201
</div>
202+
<h1
203+
style="margin: 0; font-size: 28px; letter-spacing: 3px; font-weight: 800; color: white; text-transform: uppercase;">
204+
MATH SPRINT</h1>
205+
<div style="font-size: 12px; color: #6e6e73; letter-spacing: 1px; margin-top: 5px;">Pushing the limits
206+
of mental math.</div>
199207
</div>
200208

201-
<!-- Big Score Display -->
209+
<!-- Hero Score Area -->
202210
<div
203-
style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 30px; border-radius: 20px; margin-bottom: 25px; position: relative; overflow: hidden;">
211+
style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); padding: 40px 20px; border-radius: 24px; margin-bottom: 35px; backdrop-filter: blur(10px);">
204212
<div
205-
style="font-size: 12px; color: #a6adc8; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px;">
206-
Performance Time</div>
213+
style="font-size: 11px; color: #8e8e93; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 12px; font-weight: 600;">
214+
Performance Score</div>
207215
<div id="share-time-value"
208-
style="font-size: 64px; font-weight: 800; color: white; text-shadow: 0 0 30px rgba(255,255,255,0.2);">
216+
style="font-size: 72px; font-weight: 900; color: white; line-height: 1; margin-bottom: 15px; text-shadow: 0 10px 40px rgba(0,0,0,0.5);">
209217
0.0s</div>
210-
<div style="margin-top: 15px; font-weight: bold; font-size: 18px; color: #94e2d5;">New Personal Best! 🏆
218+
<div
219+
style="display: inline-flex; align-items: center; gap: 8px; background: rgba(148, 226, 213, 0.1); color: #94e2d5; padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: bold; border: 1px solid rgba(148, 226, 213, 0.2);">
220+
<span>LEVEL CLEARED</span> <span style="opacity: 0.5;">|</span> <span>RANK S+</span>
211221
</div>
212222
</div>
213223

214-
<!-- Detailed Stats -->
215-
<div style="display: flex; gap: 15px; margin-bottom: 30px;">
216-
<div
217-
style="flex: 1; background: rgba(255,255,255,0.03); padding: 15px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.05);">
218-
<div style="font-size: 10px; color: #a6adc8; text-transform: uppercase; margin-bottom: 5px;">Base
219-
</div>
220-
<div id="share-base" style="font-size: 18px; font-weight: bold; color: white;">0.0s</div>
224+
<!-- Stats Bar -->
225+
<div style="display: flex; gap: 20px; margin-bottom: 45px;">
226+
<div style="flex: 1; text-align: center;">
227+
<div
228+
style="font-size: 11px; color: #6e6e73; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 1px;">
229+
Raw Speed</div>
230+
<div id="share-base" style="font-size: 20px; font-weight: 700; color: white;">0.0s</div>
221231
</div>
222-
<div
223-
style="flex: 1; background: rgba(255,255,255,0.03); padding: 15px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.05);">
224-
<div style="font-size: 10px; color: #a6adc8; text-transform: uppercase; margin-bottom: 5px;">Penalty
225-
</div>
226-
<div id="share-penalty" style="font-size: 18px; font-weight: bold; color: #f38ba8;">+0.0s</div>
232+
<div style="width: 1px; background: rgba(255,255,255,0.1);"></div>
233+
<div style="flex: 1; text-align: center;">
234+
<div
235+
style="font-size: 11px; color: #6e6e73; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 1px;">
236+
Accuracy Tax</div>
237+
<div id="share-penalty" style="font-size: 20px; font-weight: 700; color: #ff453a;">+0.0s</div>
227238
</div>
228239
</div>
229240

230-
<!-- Call to Action -->
231-
<div style="font-size: 16px; color: #fab387; font-weight: bold; margin-bottom: 30px;">チャレンジを受け入れますか？
232-
<br><span style="font-size: 20px; color: white;">Can you beat my score?</span>
233-
</div>
234-
235-
<!-- Authorship Section (Promotion) -->
236-
<div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 25px; text-align: center;">
241+
<!-- Creator Spotlight (Promotion Section) -->
242+
<div style="position: relative; padding-top: 35px; border-top: 1px dashed rgba(255,255,255,0.15);">
237243
<div
238-
style="font-size: 11px; color: #a6adc8; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;">
239-
High-Performance Engineering by</div>
240-
<div style="display: flex; justify-content: center; gap: 15px; margin-bottom: 20px;">
241-
<div
242-
style="background: rgba(137, 180, 250, 0.1); padding: 10px 20px; border-radius: 12px; color: #89b4fa; font-size: 15px; font-weight: bold; border: 1px solid rgba(137, 180, 250, 0.2);">
243-
Amey Thakur</div>
244-
<div
245-
style="background: rgba(137, 180, 250, 0.1); padding: 10px 20px; border-radius: 12px; color: #89b4fa; font-size: 15px; font-weight: bold; border: 1px solid rgba(137, 180, 250, 0.2);">
246-
Mega Satish</div>
244+
style="font-size: 11px; color: #8e8e93; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; font-weight: 600;">
245+
A Collaborative Masterpiece By</div>
246+
247+
<div style="display: flex; justify-content: center; gap: 15px; margin-bottom: 25px;">
248+
<!-- Creator 1 -->
249+
<div style="text-align: center;">
250+
<div
251+
style="padding: 12px 24px; background: white; color: #000; border-radius: 12px; font-weight: 800; font-size: 15px; box-shadow: 0 10px 20px rgba(255,255,255,0.1);">
252+
Amey Thakur</div>
253+
<div
254+
style="font-size: 9px; color: #0a84ff; font-weight: bold; margin-top: 8px; text-transform: uppercase;">
255+
Lead Developer</div>
256+
</div>
257+
<!-- Creator 2 -->
258+
<div style="text-align: center;">
259+
<div
260+
style="padding: 12px 24px; background: rgba(255,255,255,0.05); color: #fff; border-radius: 12px; font-weight: 800; font-size: 15px; border: 1px solid rgba(255,255,255,0.2);">
261+
Mega Satish</div>
262+
<div
263+
style="font-size: 9px; color: #94e2d5; font-weight: bold; margin-top: 8px; text-transform: uppercase;">
264+
UX Designer</div>
265+
</div>
266+
</div>
267+
268+
<div style="margin-top: 10px;">
269+
<div style="font-size: 12px; color: #0a84ff; font-weight: 800; letter-spacing: 1px;">JOIN THE SPRINT
270+
</div>
271+
<div style="font-size: 10px; color: #6e6e73; margin-top: 4px;">
272+
amey-thakur.github.io/MATH-SPRINT-GAME</div>
247273
</div>
248-
<div
249-
style="font-size: 10px; color: #94e2d5; font-weight: bold; margin-bottom: 10px; letter-spacing: 1px;">
250-
OFFICIAL PERFORMANCE RECORD &mdash; 2022</div>
251-
<div style="font-size: 9px; color: #585b70; font-family: monospace; opacity: 0.8;">
252-
amey-thakur.github.io/MATH-SPRINT-GAME</div>
253274
</div>
254275
</div>
276+
</div>
255277

256-
<!-- Authorship Footer -->
257-
<div class="footer">
258-
<canvas id="footer-canvas"></canvas>
259-
<h3><span class="footer-intro">Created by</span> <a href="https://github.com/Amey-Thakur" target="_blank"
260-
rel="noopener noreferrer" class="link-left">Amey
261-
Thakur</a> <span class="math-operator">&</span> <a href="https://github.com/msatmod" target="_blank"
262-
rel="noopener noreferrer" class="link-right">Mega
263-
Satish</a> <span class="footer-year">2022</span></h3>
264-
</div>
278+
<!-- Authorship Footer -->
279+
<div class="footer">
280+
<canvas id="footer-canvas"></canvas>
281+
<h3><span class="footer-intro">Created by</span> <a href="https://github.com/Amey-Thakur" target="_blank"
282+
rel="noopener noreferrer" class="link-left">Amey
283+
Thakur</a> <span class="math-operator">&</span> <a href="https://github.com/msatmod" target="_blank"
284+
rel="noopener noreferrer" class="link-right">Mega
285+
Satish</a> <span class="footer-year">2022</span></h3>
286+
</div>
265287
</div>
266288
<!-- Script -->
267289
<script src="shuffle.js"></script>

‎Source Code/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ function shareScore() {
203203
console.log("Premium Canvas generated!");
204204
const link = document.createElement('a');
205205
const fileTime = finalTime.toFixed(1);
206-
link.download = `MathSprint-Result-${fileTime}s.png`;
206+
link.download = `MathSprint-Score-${fileTime}s.png`;
207207
link.href = canvas.toDataURL('image/png', 1.0); // Max quality
208208
link.click();
209209
}).catch(err => {

0 commit comments

Comments
 (0)