Last active
April 6, 2021 01:29
-
-
Save tynrare/667bb903b135cff90bf402730aa5ea35 to your computer and use it in GitHub Desktop.
This file contains 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> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <!-- # Body --> | |
| <body | |
| style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" | |
| unselectable="on" | |
| onselectstart="return false;" | |
| onmousedown="return false;" | |
| > | |
| <div class="dust-center-0"> | |
| <p id="dust-rrr-element">CTRL+V</p> | |
| </div> | |
| </body> | |
| <!-- # Style --> | |
| <!-- ## Page style --> | |
| <style> | |
| body { | |
| font-size: 120px; | |
| font-family: 'Dosis', sans-serif; | |
| } | |
| .dust-center-0 { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| background-color: #4c97d6; | |
| } | |
| .dust-center-0 p { | |
| color: #e0e5df; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| margin: 0; | |
| } | |
| </style> | |
| <!-- # Logic --> | |
| <script> | |
| // encapsulate | |
| (function () { | |
| // init | |
| const pageroot = document.querySelector('div.dust-center-0'); | |
| const rrrElement = document.getElementById('dust-rrr-element'); | |
| var palette; //.postinit | |
| // ## Paste event handle | |
| window.addEventListener('paste', function(event) { | |
| let paste = (event.clipboardData || window.clipboardData).getData('text'); | |
| if (!paste.length) { | |
| rrrElement.innerHTML = "rrrRRR." | |
| return; | |
| } | |
| rrrElement.innerHTML = paste; | |
| }); | |
| // ## Color event handle | |
| function onclick() { | |
| if (!palette) { | |
| loadPalette(); | |
| } | |
| const colors = palette.length; | |
| const colorA = Math.round(Math.random() * colors); | |
| const colorB = Math.round(Math.random() * colors); | |
| if (colorA == colorB) { onclick(); return; } | |
| pageroot.style.backgroundColor = "#" + palette[colorA]; | |
| rrrElement.style.color = "#" + palette[colorB]; | |
| } | |
| function loadPalette() { | |
| palette = document.getElementById("DB").getAttribute("palette"); | |
| palette = palette.split('\n'); // Array[32]. Palette from https://lospec.com/palette-list/pineapple-32 | |
| } | |
| window.addEventListener('click', onclick) | |
| })(); | |
| </script> | |
| <!-- | |
| ## Google fonts | |
| [Dosis](https://fonts.google.com/specimen/Dosis) | |
| --> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Dosis&family=Poppins:wght@100&display=swap" rel="stylesheet"> | |
| </html> | |
| <!-- # Data storage --> | |
| <meta id="DB" | |
| palette="43002a | |
| 890027 | |
| d9243c | |
| ff6157 | |
| ffb762 | |
| c76e46 | |
| 73392e | |
| 34111f | |
| 030710 | |
| 273b2d | |
| 458239 | |
| 9cb93b | |
| ffd832 | |
| ff823b | |
| d1401f | |
| 7c191a | |
| 310c1b | |
| 833f34 | |
| eb9c6e | |
| ffdaac | |
| ffffe4 | |
| bfc3c6 | |
| 6d8a8d | |
| 293b49 | |
| 041528 | |
| 033e5e | |
| 1c92a7 | |
| 77d6c1 | |
| ffe0dc | |
| ff88a9 | |
| c03b94 | |
| 601761" | |
| > | |
| </meta> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment