https://vijay.eu/tags/web/Recent content in Web on Vijay KodamHugo -- gohugo.ioenWed, 10 Jun 2026 12:00:00 +0300https://vijay.eu/projects/retro-racer/Wed, 10 Jun 2026 12:00:00 +0300https://vijay.eu/projects/retro-racer/<div class="retro-racer"> <h1 class="racer-title">Retro Racer</h1> <p class="racer-subtitle">A 3D arcade racer. One lap, against the clock.</p> <div class="racer-frame"> <canvas id="racerCanvas"></canvas> <div class="racer-banner hidden" id="racerBanner" aria-live="polite"></div> <div class="racer-hud" aria-live="off"> <div class="hud-item"> <span class="hud-label">Time</span> <span class="hud-value" id="hudTime">0:00.0</span> </div> <div class="hud-item hud-item--speed"> <span class="hud-label">Speed</span> <span class="hud-value" id="hudSpeed">0 km/h</span> </div> <div class="hud-item"> <span class="hud-label">Progress</span> <span class="hud-value" id="hudProgress">0%</span> </div> </div> <div class="racer-overlay" id="racerStart"> <h2>Retro Racer</h2> <p>Complete one lap as fast as you can. Dodge traffic and stay on the road - grass and crashes will slow you down.</p> <p>Arrow keys or WASD to drive. On touch devices, hold gas/brake with your left thumb and steer with your right.</p> <button class="racer-btn" id="racerStartBtn" type="button" disabled>Start Race</button> <p class="racer-loading" id="racerLoading">Loading 3D assets...</p> <p class="racer-best" id="racerStartBest"></p> </div> <div class="racer-overlay hidden" id="racerResults"> <h2>Finish!</h2> <p class="racer-result-time" id="racerResultTime"></p> <p class="racer-best" id="racerResultBest"></p> <button class="racer-btn" id="racerAgainBtn" type="button">Race Again</button> </div> <div class="racer-cinematic hidden" id="racerCinematic" aria-hidden="true"> <div class="racer-letterbox racer-letterbox--top"></div> <div class="racer-letterbox racer-letterbox--bottom"></div> <div class="racer-flyby-label"> <span class="racer-flyby-name">Mazda Miata</span> <span class="racer-flyby-sub">MX-5 NA</span> </div> <button class="racer-skip-btn" id="racerSkipBtn" type="button">Skip &rsaquo;&rsaquo;</button> </div> </div> <div class="racer-touch"> <div class="touch-cluster touch-cluster--drive" aria-label="Speed controls (left thumb)"> <button class="touch-btn touch-btn--gas" id="racerBtnGas" type="button" aria-label="Accelerate">GAS</button> <button class="touch-btn touch-btn--brake" id="racerBtnBrake" type="button" aria-label="Brake">BRAKE</button> </div> <div class="touch-cluster touch-cluster--steer" aria-label="Steering controls (right thumb)"> <button class="touch-btn touch-btn--arrow" id="racerBtnLeft" type="button" aria-label="Steer left">&larr;</button> <button class="touch-btn touch-btn--arrow" id="racerBtnRight" type="button" aria-label="Steer right">&rarr;</button> </div> </div> <p class="racer-note">Built with vanilla JavaScript and <a href="https://threejs.org/" rel="noopener">three.js</a>. Car models "<a href="https://sketchfab.com/3d-models/mazda-miata-mx-5-na-d51fcd44b74f4daf8012c41e0400c041" rel="noopener">Mazda Miata MX-5 NA</a>" and "<a href="https://sketchfab.com/3d-models/toyota-ae86-trueno-fe02fba6302e450ea8424591493341ea" rel="noopener">Toyota AE86 Trueno</a>" by Lexyc16 on Sketchfab (CC-BY 4.0). Textures and lighting from <a href="https://polyhaven.com/" rel="noopener">Poly Haven</a> (CC0). Your best lap time is stored locally in your browser.</p> </div>https://vijay.eu/projects/tesla-wrap/Sat, 09 May 2026 00:00:00 +0300https://vijay.eu/projects/tesla-wrap/<p>Design custom Tesla wraps in the browser, download the PNG for Paint Shop, and preview supported models in 3D.</p> <p><a href="https://vijay.eu/tesla-wrap/" class="button">Open Tesla Wrap Maker</a></p> <p><img src="https://vijay.eu/images/tesla_wrap_screenshot.png" alt="Tesla Wrap Maker screenshot"></p>https://vijay.eu/projects/note-quest/Thu, 26 Feb 2026 00:00:00 +0200https://vijay.eu/projects/note-quest/<p>Learn to read music notes on the grand staff! Pick the correct note name for each question.</p> <p>Created using Claude Code CLI on 26th Feb 2026. V2 released on 8th Mar 2026. <link rel="stylesheet" href="https://vijay.eu/css/note-quest.css"> <script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script> <div class="note-quest-wrapper"> <div class="nq-screen start-screen active" id="nqStartScreen"> <label class="nq-helper-toggle"> <input type="checkbox" id="nqShowNoteNames"> Show note names on staff <small class="nq-helper-hint">Auto for Levels 1–2, 4 · Ignored for 8–10</small> </label> <div class="level-grid"> <div class="level-row"> <span class="row-label easy">Easy</span> <div class="level-boxes"> <button class="level-box easy" data-level="1"> <span class="level-num">1</span> <span class="level-detail">First Notes · Both clefs · F3,C4 / C4,G4</span> </button> <button class="level-box easy" data-level="2"> <span class="level-num">2</span> <span class="level-detail">Staff Basics · Both clefs · F3–G4</span> </button> <button class="level-box easy" data-level="3"> <span class="level-num">3</span> <span class="level-detail">Getting Comfortable · Both clefs · C3–C5</span> </button> </div> </div> <div class="level-row"> <span class="row-label medium">Medium</span> <div class="level-boxes"> <button class="level-box medium" data-level="4"> <span class="level-num">4</span> <span class="level-detail">Wider Range · Both clefs · A2–E5</span> </button> <button class="level-box medium" data-level="5"> <span class="level-num">5</span> <span class="level-detail">Grand Staff · Both clefs · C2–C6</span> </button> <button class="level-box medium" data-level="6"> <span class="level-num">6</span> <span class="level-detail">Expanding Range · Both clefs · A1–E6</span> </button> <button class="level-box medium" data-level="7"> <span class="level-num">7</span> <span class="level-detail">Full Staff · Both clefs · E2–C6</span> </button> </div> </div> <div class="level-row"> <span class="row-label hard">Hard</span> <div class="level-boxes"> <button class="level-box hard" data-level="8"> <span class="level-num">8</span> <span class="level-detail">Ledger Lines · Both clefs · C2–E6</span> </button> <button class="level-box hard" data-level="9"> <span class="level-num">9</span> <span class="level-detail">Extended Range · Both clefs · B1–E6</span> </button> <button class="level-box hard" data-level="10"> <span class="level-num">10</span> <span class="level-detail">Note Master · Both clefs · A1–E6</span> </button> </div> </div> </div> <div class="nq-version">v2.1</div> </div> <div class="nq-screen" id="nqGameScreen"> <div class="nq-header"> <div class="nq-logo">Note Quest</div> <div class="nq-progress" id="nqProgress">1 / 10</div> </div> <div class="nq-container"> <div class="staff-card" id="nqStaffCard"></div> <div class="choices" id="nqChoices"> <button class="choice-btn" data-note="C">C</button> <button class="choice-btn" data-note="D">D</button> <button class="choice-btn" data-note="E">E</button> <button class="choice-btn" data-note="F">F</button> <button class="choice-btn" data-note="G">G</button> <button class="choice-btn" data-note="A">A</button> <button class="choice-btn" data-note="B">B</button> </div> <div class="stats-bar"> <span>Streak: <strong id="nqStreakDisplay">0</strong></span> <span>Score: <strong id="nqScoreDisplay">0</strong></span> <span id="nqTimerDisplay">0:00</span> </div> </div> </div> <div class="nq-screen results-screen" id="nqResultsScreen"> <h2>Round Complete!</h2> <div class="stars" id="nqStarsDisplay"></div> <div class="results-stats" id="nqResultsStats"></div> <button class="play-again-btn">Play Again</button> </div> <canvas id="nqConfetti"></canvas> </div> <script src="https://vijay.eu/js/note-quest.js"></script> </p>https://vijay.eu/projects/car-concept/Sun, 11 Jan 2026 00:00:00 +0300https://vijay.eu/projects/car-concept/<div class="car-concept-container"> <header class="car-header"> <div class="car-header__content"> <h1 class="car-header__title">Hand-Gesture 3D Car Viewer</h1> <p class="car-header__subtitle"><strong>Uses your camera to detect hand gestures</strong> - Open hand to rotate, make a fist and move to zoom</p> </div> <div class="car-header__status"> <span class="status-badge" id="statusHand">Hand: Not detected</span> <span class="status-badge status-badge--muted" id="statusGesture">Use mouse or enable hand tracking</span> </div> </header> <div class="viewer-container"> <canvas id="threeCanvas"></canvas> <div class="loading-overlay" id="loadingOverlay"> <div class="loading-spinner"></div> <p>Loading 3D model...</p> </div> </div> <div class="webcam-preview" id="webcamPreview"> <div class="webcam-preview__stack"> <video id="webcam" playsinline autoplay muted></video> <canvas id="overlay2d"></canvas> </div> <button class="webcam-btn" id="btnWebcam" type="button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="16" height="16"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" /> </svg> Enable Hand Tracking </button> <div class="webcam-error hidden" id="webcamError"></div> </div> <div class="instructions" id="instructions"> <div class="instructions__item"> <span class="instructions__icon">🖱️</span> <span>Drag to rotate, scroll to zoom</span> </div> <div class="instructions__item"> <span class="instructions__icon">✋</span> <span>Open hand: rotate car</span> </div> <div class="instructions__item"> <span class="instructions__icon">✊</span> <span>Fist + move: zoom in/out</span> </div> </div> </div>https://vijay.eu/projects/cricket-bowling/Sat, 10 Jan 2026 10:00:00 +0300https://vijay.eu/projects/cricket-bowling/<div class="cricket-bowling-container"> <header class="cricket-header"> <div class="brand"> <div class="brand__title">Hand-Gesture Cricket</div> <div class="brand__subtitle"><strong>Uses your camera to detect hand gestures</strong> - Grip, bowl, and hit the wickets with real hand motions!</div> </div> <div class="status" aria-live="polite"> <span class="badge badge--phase" id="statusPhase">Ready</span> <span class="badge" id="statusSpeed">Speed: --</span> <span class="badge" id="statusBallType">--</span> <span class="badge badge--score" id="statusScore">Wickets: 0/0</span> <span class="badge badge--muted" id="statusFps">FPS: --</span> </div> </header> <main class="cricket-layout"> <section class="panel"> <div class="panel__header"> <h2 class="panel__title">Camera</h2> <div class="panel__actions"> <button class="btn btn--primary" id="btnWebcam" type="button">Enable webcam</button> <button class="btn" id="btnOverlay" type="button" aria-pressed="true">Overlay: On</button> </div> </div> <div class="media"> <div class="media__stack"> <video id="webcam" playsinline autoplay muted></video> <canvas id="overlay2d" class="overlay2d" aria-hidden="true"></canvas> </div> <div class="hint" id="gameHint"> <strong>How to play:</strong><br> 1. Show your hand to the camera<br> 2. Make a bowling motion (arm forward/down)<br> 3. Release naturally at the end<br> 4. Try to hit the wickets! </div> <div class="result-display hidden" id="resultDisplay"> <div class="result-icon" id="resultIcon"></div> <div class="result-text" id="resultText"></div> <div class="result-details" id="resultDetails"></div> <div class="result-hint">Show hand to bowl again</div> </div> <div class="error hidden" id="cameraError" role="alert"></div> </div> <div class="game-stats"> <div class="stat-row"> <span class="stat-label">Fast balls:</span> <span class="stat-value" id="statFast">0</span> </div> <div class="stat-row"> <span class="stat-label">Spin balls:</span> <span class="stat-value" id="statSpin">0</span> </div> </div> <div class="debug-panel hidden" id="debugPanel"> <div class="debug-header"> <strong>DEBUG MODE</strong> <div> <button class="btn btn--small" id="btnDebugClear" type="button">Clear Recording</button> <button class="btn btn--small" id="btnDebugClose" type="button">X</button> </div> </div> <pre id="debugOutput" style="font-size: 11px; margin: 0; white-space: pre-wrap;"></pre> </div> <button class="btn btn--small" id="btnDebug" type="button" style="margin-top: 8px;">Show Debug</button> </section> <section class="panel"> <div class="panel__header"> <h2 class="panel__title">3D Scene</h2> <div class="panel__actions"> <button class="btn" id="btnReset" type="button">Reset Game</button> </div> </div> <div class="scene"> <canvas id="threeCanvas"></canvas> </div> <footer class="cricket-footer"> <span class="muted">Tip: Good lighting helps hand tracking. Works best on Chrome/Safari.</span> </footer> </section> </main> </div>https://vijay.eu/projects/tic-tac-toe/Wed, 02 Jul 2025 15:20:07 +0300https://vijay.eu/projects/tic-tac-toe/<p>Created it using Google Gemini CLI on 2nd Jul 2025 <link rel="stylesheet" href="https://vijay.eu/css/tic-tac-toe.css"> <div class="tic-tac-toe-container"> <div id="game-setup"> <div class="setup-section"> <p class="setup-title">Game Mode</p> <div class="button-group" id="game-mode-selector"> <button class="btn-toggle active" data-mode="pvc">Player vs. Computer</button> <button class="btn-toggle" data-mode="pvp">Player vs. Player</button> </div> </div> <div class="setup-section" id="first-move-container"> <p class="setup-title">Who Goes First?</p> <div class="button-group" id="first-move-selector"> <button class="btn-toggle active" data-first-move="player">Player (X)</button> <button class="btn-toggle" data-first-move="computer">Computer (O)</button> </div> </div> <button id="start-game">Start Game</button> </div> <div id="game-board" class="hidden"> <div class="cell" data-index="0"></div> <div class="cell" data-index="1"></div> <div class="cell" data-index="2"></div> <div class="cell" data-index="3"></div> <div class="cell" data-index="4"></div> <div class="cell" data-index="5"></div> <div class="cell" data-index="6"></div> <div class="cell" data-index="7"></div> <div class="cell" data-index="8"></div> </div> <div id="message" class="hidden"></div> <button id="restart-game" class="hidden">Restart Game</button> </div> <script src="https://vijay.eu/js/tic-tac-toe.js"></script> </p>https://vijay.eu/projects/decibel-meter/Wed, 12 Mar 2025 23:28:14 +0200https://vijay.eu/projects/decibel-meter/<p>Built using Anthropic Claude Code CLI.</p> <div class="decibel-meter-wrapper"> <div class="speedometer-container"> <div class="needle-container"> <div class="needle" id="needle"></div> <div class="needle-center"></div> </div> </div> <div class="reading" id="reading">0 dB</div> <div class="description" id="description">Please enable microphone</div> <button id="startButton">Start Measuring</button> <div class="sensitivity-control"> <label for="sensitivity">Microphone Sensitivity: <span id="sensitivityValue"></span></label> <input type="range" id="sensitivity" min="1" max="5" step="0.5" value="2.0"> </div> <div class="error" id="errorMessage"></div> <div class="child-voice-legend"> <div class="child-voice-title">Voice Level Guide for Kids</div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #4CAF50;"></div> <span class="voice-level-text">Whisper to Library Voice (0-40 dB)</span> </div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #7CB342;"></div> <span class="voice-level-text">Indoor Voice (40-60 dB)</span> </div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #FFC107;"></div> <span class="voice-level-text">Classroom Voice (60-70 dB)</span> </div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #FF9800;"></div> <span class="voice-level-text">Playground Voice (70-80 dB)</span> </div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #FF5722;"></div> <span class="voice-level-text">Too Loud! (80+ dB)</span> </div> </div> </div> <script src="https://vijay.eu/js/decibel-meter.js"></script> <link rel="stylesheet" href="https://vijay.eu/css/decibel-meter.css"> <ul> <li>No data is stored or transmitted - all processing happens locally in your browser.</li> <li>dB values are approximate. Calibration has not been done.</li> </ul>https://vijay.eu/projects/markdown-editor/Sun, 09 Mar 2025 23:44:00 +0300https://vijay.eu/projects/markdown-editor/<p>Generated using Claude Code agentic tool.</p> <div class="markdown-editor-container"> <div class="editor-toolbar"> <div class="toolbar-dropdown"> <button class="toolbar-btn dropdown-toggle" title="Headings">H</button> <div class="dropdown-menu"> <button class="toolbar-btn" data-action="heading1" title="Heading 1 (# text)" data-tag="# ">H1</button> <button class="toolbar-btn" data-action="heading2" title="Heading 2 (## text)" data-tag="## ">H2</button> <button class="toolbar-btn" data-action="heading3" title="Heading 3 (### text)" data-tag="### ">H3</button> <button class="toolbar-btn" data-action="heading4" title="Heading 4 (#### text)" data-tag="#### ">H4</button> <button class="toolbar-btn" data-action="heading5" title="Heading 5 (##### text)" data-tag="##### ">H5</button> <button class="toolbar-btn" data-action="heading6" title="Heading 6 (###### text)" data-tag="###### ">H6</button> </div> </div> <button class="toolbar-btn" data-action="bold" title="Bold (**text**)" data-tag="**">B</button> <button class="toolbar-btn" data-action="italic" title="Italic (*text*)" data-tag="*">I</button> <button class="toolbar-btn" data-action="strikethrough" title="Strikethrough (~~text~~)" data-tag="~~">S</button> <button class="toolbar-btn" data-action="link" title="Link ([text](url))" data-tag="[](url)">🔗</button> <button class="toolbar-btn" data-action="image" title="Image ()" data-tag="">🖼️</button> <div class="toolbar-dropdown"> <button class="toolbar-btn dropdown-toggle" title="Code">📝</button> <div class="dropdown-menu"> <button class="toolbar-btn" data-action="code" title="Inline Code (`code`)" data-tag="`">Inline</button> <button class="toolbar-btn" data-action="codeblock-js" title="JavaScript Code Block" data-tag="```javascript">JavaScript</button> <button class="toolbar-btn" data-action="codeblock-html" title="HTML Code Block" data-tag="```html">HTML</button> <button class="toolbar-btn" data-action="codeblock-css" title="CSS Code Block" data-tag="```css">CSS</button> <button class="toolbar-btn" data-action="codeblock-python" title="Python Code Block" data-tag="```python">Python</button> <button class="toolbar-btn" data-action="codeblock" title="Code Block" data-tag="```">No Language</button> </div> </div> <button class="toolbar-btn" data-action="blockquote" title="Blockquote (> text)" data-tag="> ">❝</button> <div class="toolbar-dropdown"> <button class="toolbar-btn dropdown-toggle" title="Lists">•</button> <div class="dropdown-menu"> <button class="toolbar-btn" data-action="unordered-list" title="Unordered List (- item)" data-tag="- ">Bullet List</button> <button class="toolbar-btn" data-action="ordered-list" title="Ordered List (1. item)" data-tag="1. ">Numbered List</button> <button class="toolbar-btn" data-action="task-list" title="Task List (- [ ] task)" data-tag="- [ ] ">Task List</button> </div> </div> <button class="toolbar-btn" data-action="hr" title="Horizontal Rule (---)" data-tag="---">―</button> <button class="toolbar-btn" data-action="table" title="Table (| header | header |)">📊</button> </div> <div class="editor-panels"> <div class="editor-panel"> <h3>Markdown</h3> <textarea id="markdown-input" placeholder="Type your markdown here..."></textarea> <div class="editor-status"> <span id="word-count">0 words</span> <span id="char-count">0 characters</span> <span id="cursor-position">Line: 1, Column: 1</span> </div> </div> <div class="editor-panel"> <h3>Preview</h3> <div id="markdown-preview"></div> </div> </div> </div> <p>Here is the cost and time it took to create this working code and testing it.</p> <pre tabindex="0"><code>&gt; /cost ⎿ Total cost: $1.01 Total duration (API): 5m 8.1s Total duration (wall): 31m 43.5s Total code changes: 713 lines added, 43 lines removed ⎿ Set editor mode to vim </code></pre><p>You just have to have clear requirements and what you want and LLMs are there to make it happen.</p>https://vijay.eu/projects/my-ip/Sat, 10 Aug 2024 12:05:32 +0300https://vijay.eu/projects/my-ip/<div style="text-align: left; margin-top: 20vh;"> <div id="ip-address" style="font-size: 2em; color: #007bff; margin-top: 20px;"> Fetching IP address... </div> <script type="application/javascript"> function getIP(json) { document.getElementById('ip-address').textContent = json.ip; } </script> <script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script> </div>https://vijay.eu/projects/fitness-calculator/Fri, 09 Aug 2024 18:55:00 +0300https://vijay.eu/projects/fitness-calculator/<div class="container"> <div id="intro-text"> <p> The 2 Km Walk Test is a reliable way to estimate your maximal aerobic power (VO2max) and assess your fitness level. </p> <p> To ensure accurate results, please follow these steps before filling in the details below: </p> <ol> <li><strong>Preparation:</strong> Ensure you are in good health and fit to undertake the test. Wear comfortable clothing and shoes suitable for walking.</li> <li><strong>Walk 2 Kilometers:</strong> Find a flat, measured course (e.g., a track or a known distance on a path). Walk a total distance of 2 kilometers at a brisk, steady pace.</li> <li><strong>Collect Your Data:</strong> As soon as you finish the 2 km walk, immediately measure your heart rate (beats per minute) and note the total time taken to complete the walk (in minutes and seconds).</li> <li><strong>Enter Your Details:</strong> Once you have completed the walk and collected the necessary data, fill in the information below to calculate your fitness index.</li> </ol> </div> <form id="fitness-form"> <div> <label for="age">Age (years):</label> <input type="number" id="age" name="age" required> </div> <div> <label for="gender">Gender:</label> <select id="gender" name="gender" required> <option value="male">Male</option> <option value="female">Female</option> </select> </div> <div> <label for="weight">Weight (kg):</label> <input type="number" id="weight" name="weight" step="0.1" required> </div> <div> <label for="height">Height (cm):</label> <input type="number" id="height" name="height" required> </div> <div> <label for="time-minutes">Time to complete 2 km (minutes):</label> <input type="number" id="time-minutes" name="time-minutes" required> </div> <div> <label for="time-seconds">Time to complete 2 km (seconds):</label> <input type="number" id="time-seconds" name="time-seconds" required> </div> <div> <label for="heart-rate">Heart rate at the end of the walk (bpm):</label> <input type="number" id="heart-rate" name="heart-rate" required> </div> <button type="submit">Calculate Fitness</button> <p class="disclaimer"> <strong>Disclaimer:</strong> This tool is for informational purposes only and is not a substitute for professional medical advice, diagnosis, or treatment. Always consult your doctor or a qualified health professional before making any changes to your exercise routine or lifestyle. </p> </form> <div id="results" style="display:none;"> <h3>Your Fitness Results</h3> <p><strong>Maximal Aerobic Power (VO2max):</strong> <span id="vo2max-result"></span> ml·min⁻¹·kg⁻¹</p> <p><strong>BMI:</strong> <span id="bmi-result"></span></p> <p><strong>Fitness Index:</strong> <span id="fitness-index-result"></span></p> <p><strong>Fitness Class:</strong> <span id="fitness-class-result"></span></p> <div id="calculation-details" style="margin-top: 40px;"> </div> <button id="new-calculation">New Calculation</button> </div> </div>https://vijay.eu/projects/flag-game/Thu, 08 Aug 2024 07:00:32 +0300https://vijay.eu/projects/flag-game/<div class="container"> <div class="status"> <div class="counter"><strong id="quiz-mini-counter">1</strong> / 10</div> <div class="correct"><strong id="quiz-mini-correct">0</strong> correctly</div> <div class="wrong"><strong id="quiz-mini-wrong">0</strong> wrong</div> </div> <div id="quiz-mini-image" class="image"></div> <div id="quiz-mini-options" class="options"></div> <div id="quiz-mini-result" class="result" style="display: none;"> <small> <strong><span id="quiz-mini-result-correct">Well done!</span></strong> <span id="quiz-mini-result-wrong">False, it is <strong id="quiz-mini-result-wrong-name">*</strong></span> </small> <button id="quiz-mini-refresh" style="display: none;">Restart Game</button> </div> </div>https://vijay.eu/projects/medal-tally/Thu, 01 Aug 2024 16:49:32 +0300https://vijay.eu/projects/medal-tally/<p>Final medal tally for Finland and India from the Paris 2024 Olympics.</p> <div class="medal-tally-container"> <div class="medal-box"> <h2>Finland</h2> <table> <thead> <tr> <th>Rank</th> <th>Gold</th> <th>Silver</th> <th>Bronze</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>92</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table> </div> <div class="medal-box"> <h2>India</h2> <table> <thead> <tr> <th>Rank</th> <th>Gold</th> <th>Silver</th> <th>Bronze</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>71</td> <td>0</td> <td>1</td> <td>5</td> <td>6</td> </tr> </tbody> </table> </div> </div> <style> .medal-tally-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 20px 0; } .medal-box { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; flex: 1 1 300px; max-width: 300px; text-align: center; } .medal-box h2 { margin-top: 0; margin-bottom: 15px; } .medal-box table { width: 100%; border-collapse: collapse; } .medal-box th, .medal-box td { border: 1px solid #ddd; padding: 8px; text-align: center; } .medal-box th { background-color: #f2f2f2; } </style>