diff options
Diffstat (limited to 'cool')
| -rw-r--r-- | cool/index.html | 48 | ||||
| -rw-r--r-- | cool/script.js | 193 | ||||
| -rw-r--r-- | cool/style.css | 80 |
3 files changed, 321 insertions, 0 deletions
diff --git a/cool/index.html b/cool/index.html new file mode 100644 index 0000000..2a9230b --- /dev/null +++ b/cool/index.html @@ -0,0 +1,48 @@ +<!doctype html> +<html> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width" /> + <link + rel="stylesheet" + href="style.css" + type="text/css" + media="screen" + charset="utf-8" + /> + <title>LARS</title> + </head> + <body> + <div class="page"> + <div class="center blink"> + <p>Ludicrous Adventures of Ridiculous Shenanigans</p> + <p>#1 CTF team</p> + </div> + <small class="note">SCROLL</small> + </div> + <div class="page"> + <ul class="center blink"> + <li><a href="https://github.com/larsvommars">LARSVOMMARS</a></li> + <li><a href="https://github.com/marvinborner">MARWYNTHEMAGE</a></li> + <li> + <a href="https://github.com/AnyUnderstanding">ANYUNDERSTANDING</a> + </li> + <li><a href="https://github.com/maytastico">MAYTASTICO</a></li> + <li><a href="https://github.com/pherkel">PHERKEL</a></li> + <li><a href="https://github.com/r1vers0ng">LINEA</a></li> + </ul> + </div> + <div class="page colored"> + <div class="center blink"> + <h1>SOCIAL</h1> + <ul> + <li><a href="https://gpn21.ctf.kitctf.de/teams/194">KITCTF</a></li> + <li><a href="https://github.com/lars-ctf">GITHUB</a></li> + </ul> + </div> + </div> + <div id="bg" class="bg"></div> + <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> + <script src="script.js"></script> + </body> +</html> diff --git a/cool/script.js b/cool/script.js new file mode 100644 index 0000000..6eee911 --- /dev/null +++ b/cool/script.js @@ -0,0 +1,193 @@ +window.onload = () => + particlesJS("bg", { + particles: { + number: { + value: 10000, + density: { + enable: true, + value_area: 800, + }, + }, + color: { + value: [ + "#ff0000", + "#ff0d00", + "#ff1a00", + "#ff2600", + "#ff3300", + "#ff4000", + "#ff4d00", + "#ff5900", + "#ff6600", + "#ff7300", + "#ff8000", + "#ff8c00", + "#ff9900", + "#ffa600", + "#ffb300", + "#ffbf00", + "#ffcc00", + "#ffdd00", + "#ffea00", + "#fff700", + "#fbff00", + "#eeff00", + "#e1ff00", + "#d5ff00", + "#c8ff00", + "#bbff00", + "#aeff00", + "#a2ff00", + "#95ff00", + "#88ff00", + "#7bff00", + "#6fff00", + "#62ff00", + "#55ff00", + "#48ff00", + "#3cff00", + "#2fff00", + "#22ff00", + "#15ff00", + "#09ff00", + "#00ff04", + "#00ff11", + "#00ff1e", + "#00ff2b", + "#00ff37", + "#00ff44", + "#00ff51", + "#00ff5e", + "#00ff6a", + "#00ff77", + "#00ff88", + "#00ff95", + "#00ffa2", + "#00ffae", + "#00ffbb", + "#00ffc8", + "#00ffd5", + "#00ffe1", + "#00ffee", + "#00fffb", + "#00f7ff", + "#00eaff", + "#00ddff", + "#00d0ff", + "#00c4ff", + "#00b7ff", + "#00aaff", + "#009dff", + "#0091ff", + "#0084ff", + "#0077ff", + "#006aff", + "#005eff", + "#0051ff", + "#0044ff", + "#0037ff", + "#002bff", + "#001eff", + "#0011ff", + "#0004ff", + "#0900ff", + "#1500ff", + "#2200ff", + "#3300ff", + "#4000ff", + "#4d00ff", + "#5900ff", + "#6600ff", + "#7300ff", + "#8000ff", + "#8c00ff", + "#9900ff", + "#a600ff", + "#b300ff", + "#bf00ff", + "#cc00ff", + "#d900ff", + "#e600ff", + "#f200ff", + "#ff00ff", + ], + }, + opacity: { + value: 1, + random: false, + anim: { + enable: true, + speed: 0.4, + opacity_min: 0, + sync: false, + }, + }, + size: { + value: 5, + random: true, + anim: { + enable: true, + speed: 20, + size_min: 0, + sync: false, + }, + }, + line_linked: { + enable: false, + }, + move: { + enable: true, + speed: 20, + direction: "none", + random: true, + straight: false, + out_mode: "out", + bounce: false, + attract: { + enable: false, + rotateX: 600, + rotateY: 1200, + }, + }, + }, + interactivity: { + detect_on: "canvas", + events: { + onhover: { + enable: true, + mode: "bubble", + }, + onclick: { + enable: true, + mode: "push", + }, + resize: true, + }, + modes: { + grab: { + distance: 400, + line_linked: { + opacity: 1, + }, + }, + bubble: { + distance: 100, + size: 1, + duration: 3, + opacity: 1, + speed: 3, + }, + repulse: { + distance: 200, + duration: 0.4, + }, + push: { + particles_nb: 4, + }, + remove: { + particles_nb: 2, + }, + }, + }, + retina_detect: true, + }); diff --git a/cool/style.css b/cool/style.css new file mode 100644 index 0000000..584e123 --- /dev/null +++ b/cool/style.css @@ -0,0 +1,80 @@ +html, body { + background-color: #000; + color: #fff; + text-align: center; + font-size: 69px; + font-family: 'Courier New', Courier, monospace; + font-weight: bold; +} + +* { + padding: 0; + margin: 0; +} + +.center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.blink { + animation: blink .2s infinite; +} + +@keyframes blink { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.bg { + z-index: 1; + width: 100%; + height: 200vh; + position: absolute; + top: 0; + left: 0; +} + +.page { + height: 100vh; + position: relative; +} + +.note { + position: absolute; + bottom: 0; + left: 0; + right: 0; + font-size: 28px; +} + +.colored { + background-color: pink; +} + +ul, li, ol { + list-style: none; +} + +a:link, a:visited { + color: #fff; +} + +/* @media (prefers-reduced-motion: reduce) { */ +/* .blink { */ +/* animation: none; */ +/* } */ + +/* .bg { */ +/* display: none; */ +/* } */ +/* } */ |