Last active
March 9, 2026 12:49
-
-
Save TalalMash/3c6afb651b62caeb4bde7d72ee942b30 to your computer and use it in GitHub Desktop.
OLED Burn In Test https://gistpreview.github.io/?3c6afb651b62caeb4bde7d72ee942b30
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OLED Burn In Test</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| background: #000; | |
| font-family: 'Courier New', monospace; | |
| transition: background 0.08s; | |
| } | |
| #controls { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 4px; | |
| z-index: 100; | |
| } | |
| .row { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .btn { | |
| background: rgba(0,0,0,0.3); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| border-radius: 3px; | |
| color: rgba(255,255,255,0.85); | |
| font-size: 9px; | |
| font-family: 'Courier New', monospace; | |
| letter-spacing: 0.05em; | |
| padding: 2px 5px; | |
| cursor: pointer; | |
| height: 16px; | |
| line-height: 1; | |
| transition: background 0.12s, border-color 0.12s, color 0.12s; | |
| white-space: nowrap; | |
| } | |
| .btn:hover { background: rgba(0,0,0,0.5); } | |
| .btn.active { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.6); color: #fff; } | |
| .divider { | |
| width: 100%; | |
| height: 1px; | |
| background: rgba(255,255,255,0.12); | |
| margin: 1px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="controls"> | |
| <div class="row"> | |
| <button class="btn" id="fs-btn">⛶ FULL</button> | |
| </div> | |
| <div class="divider"></div> | |
| <div class="row"> | |
| <button class="btn gray-btn" data-pct="2">2%</button> | |
| <button class="btn gray-btn" data-pct="5">5%</button> | |
| <button class="btn gray-btn" data-pct="15">15%</button> | |
| </div> | |
| </div> | |
| <script> | |
| const body = document.body; | |
| const fsBtn = document.getElementById('fs-btn'); | |
| const grayBtns = document.querySelectorAll('.gray-btn'); | |
| let activePct = null; | |
| function applyGray(pct) { | |
| const v = Math.round(pct / 100 * 255); | |
| body.style.background = `rgb(${v},${v},${v})`; | |
| } | |
| grayBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const pct = parseInt(btn.dataset.pct); | |
| if (activePct === pct) { | |
| activePct = null; | |
| btn.classList.remove('active'); | |
| body.style.background = '#000'; | |
| } else { | |
| activePct = pct; | |
| grayBtns.forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| applyGray(pct); | |
| } | |
| }); | |
| }); | |
| fsBtn.addEventListener('click', () => { | |
| if (!document.fullscreenElement) { | |
| document.documentElement.requestFullscreen(); | |
| fsBtn.textContent = '✕ EXIT'; | |
| } else { | |
| document.exitFullscreen(); | |
| fsBtn.textContent = '⛶ FULL'; | |
| } | |
| }); | |
| document.addEventListener('fullscreenchange', () => { | |
| if (!document.fullscreenElement) fsBtn.textContent = '⛶ FULL'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment