diff options
| author | Noah Loomans <noahloomans@gmail.com> | 2017-11-26 19:47:38 +0100 |
|---|---|---|
| committer | Noah Loomans <noahloomans@gmail.com> | 2017-11-26 19:47:38 +0100 |
| commit | 4bb1c596a4cb00f937150bb64216f8ed95a19009 (patch) | |
| tree | 8ea67ccee84470c1ecf90218e001362950352566 | |
| parent | 890c28a9b68814b987fb23d82ee6923c498653b2 (diff) | |
Add birthday page
| -rw-r--r-- | 18/index.html | 31 | ||||
| -rw-r--r-- | 18/script.js | 62 | ||||
| -rw-r--r-- | style/18.scss | 91 |
3 files changed, 184 insertions, 0 deletions
diff --git a/18/index.html b/18/index.html new file mode 100644 index 0000000..d1b183f --- /dev/null +++ b/18/index.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="nl"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> + <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" + crossorigin="anonymous"> + <title>18.</title> + <link rel="stylesheet" href="/style/18.css"> +</head> +<body> + <div class="wrapper"> + <div class="start"> + <div class="face"></div> + <div class="terminal"></div> + <i class="fa fa-angle-down down-arrow" aria-hidden="true"></i> + </div> + </div> + <div class="content"> + <p>Hallo!</p> + <p>Het feit dat je een link naar deze pagina hebt ontvangen betekent dat je bent uitgenodigt voor mijn 18de verjaardag!</p> + <p>Het feest begint om <b>17:00</b>! Het wordt een gezellig feestje met muziek, eten, drankjes en hopelijk een kampvuur in de tuin.</p> + <p><b>Locatie: </b><i>***REMOVED***</i><br><b>Datum: </b><i>***REMOVED***</i></p> + <p>Zeg het als je kunt komen!</p> + <p>Groet,</p> + <p>Noah.</p> + </div> + <script src="/18/script.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/18/script.js b/18/script.js new file mode 100644 index 0000000..0c9be11 --- /dev/null +++ b/18/script.js @@ -0,0 +1,62 @@ +/** + * + */ + +function wait(ms) { + return new Promise((resolve) => { + window.setTimeout(resolve, ms); + }) +} + +function terminalType(prefix, text) { + if (text == null) text = ''; + const line = document.createElement('div'); + line.className = 'line'; + prefix = prefix.replace(/ /g, ' ') + line.innerHTML = prefix; + + document.querySelector('.terminal').appendChild(line); + + function type(text, line) { + if (text === '') { + return Promise.resolve(); + } + line.textContent = line.textContent + text.charAt(0); + return wait(100).then(() => type(text.substr(1), line)); + } + + return wait(500).then(() => type(text, line)); +} + +Promise.resolve() + .then(() => terminalType('noah@loomans ~ $ ', 'cd Code/calculate_age')) + .then(() => terminalType('noah@loomans ~/Code/calculate_age $ ', 'gcc calculate_age.c -o calculate_age')) + .then(() => terminalType('noah@loomans ~/Code/calculate_age $ ', './calculate_age')) + .then(() => terminalType('calculating', '.........')) + .then(() => terminalType(' 1111111 888888888')) + .then(() => terminalType(' 1::::::1 88:::::::::88')) + .then(() => terminalType('1:::::::1 88:::::::::::::88')) + .then(() => terminalType('111:::::1 8::::::88888::::::8')) + .then(() => terminalType(' 1::::1 8:::::8 8:::::8')) + .then(() => terminalType(' 1::::1 8:::::8 8:::::8')) + .then(() => terminalType(' 1::::1 8:::::88888:::::8')) + .then(() => terminalType(' 1::::l 8:::::::::::::8')) + .then(() => terminalType(' 1::::l 8:::::88888:::::8')) + .then(() => terminalType(' 1::::l 8:::::8 8:::::8')) + .then(() => terminalType(' 1::::l 8:::::8 8:::::8')) + .then(() => terminalType(' 1::::l 8:::::8 8:::::8')) + .then(() => terminalType('111::::::1118::::::88888::::::8')) + .then(() => terminalType('1::::::::::1 88:::::::::::::88')) + .then(() => terminalType('1::::::::::1 88:::::::::88')) + .then(() => terminalType('111111111111 888888888')) + .then(() => wait(2000)) + .then(() => document.querySelector('.down-arrow').classList.add('show')); + +function resize() { + const size = Math.min(window.innerWidth, window.innerHeight); + const factor = size / 1080; + document.documentElement.style.setProperty('--factor', factor); +} + +resize(); +window.addEventListener('resize', resize);
\ No newline at end of file diff --git a/style/18.scss b/style/18.scss new file mode 100644 index 0000000..fdea931 --- /dev/null +++ b/style/18.scss @@ -0,0 +1,91 @@ +--- +--- + +* { + box-sizing: border-box; +} + +:root { + --factor: 1; +} + +body { + margin: 0; + background-color: antiquewhite; +} + +.wrapper { + position: relative; + height: 100vh; + width: 100%; + overflow: hidden; + background-color: white; +} + +.start { + position: absolute; + width: 1080px; + height: 1080px; + // background-color: red; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(var(--factor)); + transform-origin: center center; +} + +.face { + background-image: url(/assets/face.jpg); + background-size: contain; + border-radius: 50%; + margin: 64px auto; + width: 256px; + height: 256px; +} + +.terminal { + background-color: #1E1E1E; + width: 788px; + height: 454px; + margin: 128px auto; + margin-bottom: 16px; + border-radius: 8px; + color: white; + padding: 16px; + font-family: 'Roboto Mono', monospace; + box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); +} + +.down-arrow { + display: block; + text-align: center; + font-size: 128px; + color: #636363; + opacity: 0; +} + +.down-arrow.show { + animation: down 2s infinite; +} + +@keyframes down { + 0% { + opacity: 0; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +.content { + font-family: 'Roboto Mono', monospace; + font-size: 24px; + max-width: 800px; + min-height: 100vh; + margin: 0 auto; + padding: 64px; +}
\ No newline at end of file |