diff --git a/arcade-machine/assets/fonts/lessperfectdosvga-webfont.woff b/arcade-machine/assets/fonts/lessperfectdosvga-webfont.woff new file mode 100644 index 0000000..02b24c1 Binary files /dev/null and b/arcade-machine/assets/fonts/lessperfectdosvga-webfont.woff differ diff --git a/arcade-machine/assets/fonts/lessperfectdosvga-webfont.woff2 b/arcade-machine/assets/fonts/lessperfectdosvga-webfont.woff2 new file mode 100644 index 0000000..ac0f327 Binary files /dev/null and b/arcade-machine/assets/fonts/lessperfectdosvga-webfont.woff2 differ diff --git a/arcade-machine/assets/fonts/pixelifysans-regular.ttf b/arcade-machine/assets/fonts/pixelifysans-regular.ttf new file mode 100644 index 0000000..37deb9a Binary files /dev/null and b/arcade-machine/assets/fonts/pixelifysans-regular.ttf differ diff --git a/arcade-machine/assets/images/bg-0-5x.jpg b/arcade-machine/assets/images/bg-0-5x.jpg new file mode 100644 index 0000000..043894b Binary files /dev/null and b/arcade-machine/assets/images/bg-0-5x.jpg differ diff --git a/arcade-machine/assets/images/bg-1-0x.jpg b/arcade-machine/assets/images/bg-1-0x.jpg new file mode 100644 index 0000000..35bb28b Binary files /dev/null and b/arcade-machine/assets/images/bg-1-0x.jpg differ diff --git a/arcade-machine/assets/images/bg-1-5x.jpg b/arcade-machine/assets/images/bg-1-5x.jpg new file mode 100644 index 0000000..ac51637 Binary files /dev/null and b/arcade-machine/assets/images/bg-1-5x.jpg differ diff --git a/arcade-machine/assets/images/connect-wallet-button.png b/arcade-machine/assets/images/connect-wallet-button.png new file mode 100644 index 0000000..92a7fba Binary files /dev/null and b/arcade-machine/assets/images/connect-wallet-button.png differ diff --git a/arcade-machine/assets/images/doom-guy-1-0x.png b/arcade-machine/assets/images/doom-guy-1-0x.png new file mode 100644 index 0000000..30872fb Binary files /dev/null and b/arcade-machine/assets/images/doom-guy-1-0x.png differ diff --git a/arcade-machine/assets/images/doom-guy-1-5x.png b/arcade-machine/assets/images/doom-guy-1-5x.png new file mode 100644 index 0000000..dc19fd4 Binary files /dev/null and b/arcade-machine/assets/images/doom-guy-1-5x.png differ diff --git a/arcade-machine/assets/images/favicon.png b/arcade-machine/assets/images/favicon.png new file mode 100644 index 0000000..1fd591f Binary files /dev/null and b/arcade-machine/assets/images/favicon.png differ diff --git a/arcade-machine/assets/images/hydra-logo-2-0x.png b/arcade-machine/assets/images/hydra-logo-2-0x.png new file mode 100644 index 0000000..641874d Binary files /dev/null and b/arcade-machine/assets/images/hydra-logo-2-0x.png differ diff --git a/arcade-machine/assets/images/hydra-text-1-0x.png b/arcade-machine/assets/images/hydra-text-1-0x.png new file mode 100644 index 0000000..8fab87b Binary files /dev/null and b/arcade-machine/assets/images/hydra-text-1-0x.png differ diff --git a/arcade-machine/assets/images/hydra-text-1-5x.png b/arcade-machine/assets/images/hydra-text-1-5x.png new file mode 100644 index 0000000..7b9f1a2 Binary files /dev/null and b/arcade-machine/assets/images/hydra-text-1-5x.png differ diff --git a/arcade-machine/assets/images/noise.png b/arcade-machine/assets/images/noise.png new file mode 100644 index 0000000..e701c09 Binary files /dev/null and b/arcade-machine/assets/images/noise.png differ diff --git a/arcade-machine/assets/images/play-doom-button-bg.png b/arcade-machine/assets/images/play-doom-button-bg.png new file mode 100644 index 0000000..adb411e Binary files /dev/null and b/arcade-machine/assets/images/play-doom-button-bg.png differ diff --git a/arcade-machine/assets/images/play-doom-button.png b/arcade-machine/assets/images/play-doom-button.png new file mode 100644 index 0000000..6a5fd62 Binary files /dev/null and b/arcade-machine/assets/images/play-doom-button.png differ diff --git a/arcade-machine/assets/images/speedometer-tick.png b/arcade-machine/assets/images/speedometer-tick.png new file mode 100644 index 0000000..e5f96f3 Binary files /dev/null and b/arcade-machine/assets/images/speedometer-tick.png differ diff --git a/arcade-machine/assets/images/speedometer.png b/arcade-machine/assets/images/speedometer.png new file mode 100644 index 0000000..6796ab0 Binary files /dev/null and b/arcade-machine/assets/images/speedometer.png differ diff --git a/arcade-machine/index.html b/arcade-machine/index.html new file mode 100644 index 0000000..25532e6 --- /dev/null +++ b/arcade-machine/index.html @@ -0,0 +1,434 @@ + + + + + Hydra Doom + + + + + +
+ +
+

+ Hydra Doom +

+
+ +
+
+
+ +
+
+
+
+
+ + + + + + + + diff --git a/arcade-machine/index.js b/arcade-machine/index.js new file mode 100644 index 0000000..ec810e4 --- /dev/null +++ b/arcade-machine/index.js @@ -0,0 +1,78 @@ +document.addEventListener("DOMContentLoaded", () => { + /** + * Modal + */ + const openModal = (modal) => { + if (modal) { + modal.style.display = "flex"; + + if (modal.id === "modal-game" || modal.id === "modal-intro") { + document + .querySelectorAll(".js-hide-when-modal-opens") + .forEach((element) => { + element.style.display = "none"; + }); + } + } + }; + + const closeModal = (modal) => { + if (modal) { + modal.style.display = "none"; + + if (modal.id === "modal-intro") { + document + .querySelectorAll(".js-hide-when-modal-opens") + .forEach((element) => { + element.style.display = "flex"; + }); + } + } + }; + + document.querySelectorAll("[data-modal-target]").forEach((button) => { + button.addEventListener("click", () => { + const modalId = button.getAttribute("data-modal-target"); + const modal = document.getElementById(modalId); + openModal(modal); + }); + }); + + document.querySelectorAll("[data-modal-close]").forEach((button) => { + button.addEventListener("click", () => { + const modal = button.closest(".modal"); + closeModal(modal); + }); + }); + + document.querySelectorAll("[data-modal-auto-open]").forEach((modal) => { + openModal(modal); + }); + + /** + * Copy to clipboard + */ + document.querySelectorAll("[data-copy-clipboard]").forEach((element) => { + element.addEventListener("click", (event) => { + const data = event.target.getAttribute("data-copy-clipboard"); + navigator.clipboard.writeText(data).then(function () { + alert("Copied to clipboard: " + data); + }); + }); + }); + + /** + * Speedometer + */ + + // Map range from [0, 500] to [0, 180] + function mapRange(value, inMin, inMax, outMin, outMax) { + return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; + } + + document.querySelectorAll("[data-speedometer-value]").forEach((element) => { + const value = element.getAttribute("data-speedometer-value"); + const degree = mapRange(value, 0, 500, 0, 180); + element.style.transform = `rotate(${degree}deg)`; + }); +}); diff --git a/arcade-machine/styles.css b/arcade-machine/styles.css new file mode 100644 index 0000000..2c05679 --- /dev/null +++ b/arcade-machine/styles.css @@ -0,0 +1,872 @@ +/* Reset */ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Fonts */ + +@font-face { + font-family: "less_perfect_dos_vgaregular"; + src: + url("assets/fonts/lessperfectdosvga-webfont.woff2") format("woff2"), + url("assets/fonts/lessperfectdosvga-webfont.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Pixelify Sans"; + src: url("assets/fonts/pixelifysans-regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} + +/* Global */ + +* { + box-sizing: border-box; +} + +html { + font-size: 16px; + height: 100%; +} + +@media (max-width: 1200px) { + html { + font-size: 14px; + } +} + +@media (max-width: 768px) { + html { + font-size: 12px; + } +} + +body { + background: red; + font-family: "less_perfect_dos_vgaregular", monospace; + text-transform: uppercase; + color: white; + height: 100%; +} + +img { + max-width: 100%; +} + +a { + color: white; + text-underline-offset: 3px; +} + +a:hover { + text-decoration: none; +} + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Background */ + +.layer--wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + min-height: 100%; +} + +.layer--wrapper > * { + width: 100%; +} + +.layer--base { + position: relative; + z-index: 3; +} + +.layer--bg { + position: absolute; + z-index: 1; + inset: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.layer--bg::before { + mix-blend-mode: color-dodge; +} + +.bg--main { + position: absolute; + object-fit: cover; + inset: 0; + width: 100%; + height: 100%; + max-width: none; +} + +.layer--foreground { + position: relative; + z-index: 2; + overflow: hidden; + margin-top: -120px; + max-height: 50vh; + min-height: 560px; + height: 900px; +} + +@media (max-width: 1200px) { + .layer--foreground { + margin-top: -40px; + min-height: 300px; + height: 600px; + } +} + +.layer--foreground::after, +.layer--foreground::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient( + 180deg, + rgba(255, 0, 0, 0) 40%, + rgba(255, 0, 0, 0.75) 100% + ); +} + +.bg--guy { + max-width: 1920px; + position: absolute; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + background-image: image-set( + url("assets/images/doom-guy-1-0x.png") 1x, + url("assets/images/doom-guy-1-5x.png") 2x + ); + background-size: cover; + background-repeat: no-repeat; + background-position: center bottom; +} + +@media (min-width: 1921px) { + .layer--foreground { + max-height: none; + min-height: auto; + height: auto; + margin-top: -135px; + padding: 15%; + } + + .bg--guy { + max-width: none; + } +} + +/* Body */ + +main { + padding: 65px 60px; + margin: 0 auto; + max-width: 1920px; +} + +@media (max-width: 1200px) { + main { + padding: 20px; + } +} + +.hydra-logo { + position: absolute; + display: block; + top: 65px; + left: 60px; + width: 53px; + z-index: 2; +} + +@media (max-width: 1600px) { + .hydra-logo { + top: 40px; + left: 45px; + width: 49px; + } +} + +.doom-logo img { + display: block; + margin: -3.5% auto -4.5%; + width: 970px; + max-width: 70vw; +} + +@media (max-width: 768px) { + .doom-logo { + padding-top: 45px; + padding-bottom: 20px; + } +} + +.card { + background: #18181a; + border: 1px solid #ff3030; + box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.25); + max-width: 535px; + text-align: center; + padding: 24px 14px; + margin: 0 auto; + font-size: 1.45rem; +} + +.card__title { + font-size: 2.5rem; + letter-spacing: -0.01em; + padding: 0 0 0.25em; + color: yellow; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +.card__description { + text-shadow: + 0 0 2px rgba(255, 255, 255, 0.5), + 0 0 12px rgba(255, 255, 255, 0.3); +} + +.card--small { + padding: 14px 20px; +} + +.card--stats { + text-transform: none; + font-size: 0.75rem; + text-align: left; +} + +.card--stats table { + width: 100%; +} + +.card--stats table tr:not(:last-child) td { + padding-bottom: 0.3rem; +} + +.card--stats table td:last-of-type { + width: 40%; + color: #fffb24; +} + +.card--console { + position: relative; + height: 150px; + overflow: hidden; +} + +.card--console::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 50%; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); +} + +.card--console table td:last-of-type { + text-align: right; +} + +.card--console table tr:not(:last-child) td { + padding-bottom: 0.5rem; +} + +.card--leaderboard { + padding-right: 10px; + max-height: 140px; + overflow: auto; +} + +.card--leaderboard table { + font-size: 0.73rem; + color: #fffb24; +} + +.card--leaderboard table td:last-of-type { + width: 80%; + color: #fff; +} + +.card--leaderboard table button { + background: none; + color: inherit; + border: none; + cursor: pointer; + font: inherit; + padding: 0; +} + +/* Play Doom Button */ + +.play-doom-button { + border: none; + cursor: pointer; + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 359px; + height: 67px; + margin: 0.625rem auto; + background: url("assets/images/play-doom-button.png"); + text-decoration: none; +} + +.play-doom-button::before { + content: ""; + z-index: -1; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 436px; + height: 228px; + background: url("assets/images/play-doom-button-bg.png"); + pointer-events: none; +} + +.play-doom-button > span { + margin-top: -0.4rem; + font-family: "Pixelify Sans", monospace; + text-transform: uppercase; + color: yellow; + font-size: 1.85rem; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +/* Modal */ + +.modal { + display: none; + flex-direction: column; + position: fixed; + z-index: 4000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(13, 13, 13, 0.5); + padding: 1.25rem 6.25rem; +} + +.modal__close-btn { + background: none; + color: inherit; + border: none; + cursor: pointer; + font: inherit; + display: inline-block; + position: absolute; + top: 2rem; + right: 2.5rem; + padding: 1rem; + font-size: 1.9rem; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +.modal__outer-container { + width: 100%; + margin: auto; +} + +.modal__container { + position: relative; + margin: auto; + width: 100%; + max-width: 1465px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} + +.modal__outer-border { + padding: 2px; + background: linear-gradient(11.57deg, #000000 5.67%, #ff2f2f 68.21%); +} + +.modal__mid-gradient { + padding: 17px; + background: linear-gradient( + 120deg, + #121212 -4.94%, + #0c0000 18.74%, + #ff1313 26.36%, + #000000 35.66%, + #000000 60.61%, + #ff1d1d 73.72%, + #000000 78.79% + ); +} + +.modal__inner-border { + padding: 2px; + background: linear-gradient(11.57deg, #000000 5.67%, #ff2f2f 68.21%); +} + +.modal__content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 12% 20%; + position: relative; + background-color: #1d1515; + box-shadow: 0px 2.41px 6.03px 3.62px rgba(255, 74, 74, 0.25) inset; + color: yellow; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); + font-family: "Pixelify Sans", monospace; + text-transform: none; + line-height: 1.15; + text-align: center; + font-size: 3.5rem; +} + +.modal__content::before { + content: ""; + position: absolute; + inset: 0; + background-image: url("assets/images/noise.png"); + background-blend-mode: color-dodge; + background-size: cover; + background-position: center; + opacity: 0.2; +} + +.modal__top-left-bar { + position: absolute; + top: -2px; + left: 10px; + width: 2px; + height: 26px; + background-color: #ff2f2f; + transform: rotate(-45deg); +} + +.modal__top-right-bar { + position: absolute; + top: -2px; + right: 10px; + width: 2px; + height: 26px; + background-color: #ff3030; + transform: rotate(45deg); +} + +.modal__bottom-left-bar { + position: absolute; + bottom: -2px; + left: 10px; + width: 2px; + height: 26px; + background-color: #020202; + transform: rotate(45deg); +} + +.modal__bottom-right-bar { + position: absolute; + bottom: 0; + right: 10px; + width: 2px; + height: 23px; + background-color: #040404; + transform: rotate(-45deg); + box-shadow: 0px 2.41px 6.03px 3.62px #ff4a4a40 inset; +} + +.modal--game { + padding: 1.25rem; +} + +@media (max-width: 1900px) { + .modal__container { + max-width: 1240px; + } +} + +@media (max-width: 1600px) { + .modal__content { + padding: 10% 15%; + font-size: 2.5rem; + } +} + +@media (max-width: 768px) { + .modal { + padding-inline: 5rem; + } + + .modal__content { + min-height: 60vh; + } + + .hydra-logo { + position: relative; + top: auto; + left: 0; + right: 0; + margin: 46px auto auto; + } +} + +/* Game View Wrapper */ + +.game-view-wrapper { + width: 100%; + max-width: 1800px; + margin: 2.4rem auto 0; +} + +/* Header */ + +.header { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.header__nav ul { + display: flex; + gap: 4.25rem; +} + +@media (max-width: 1024px) { + .header__nav ul { + gap: 1rem; + } +} + +.header__nav button { + border: none; + cursor: pointer; + font-family: "Pixelify Sans", monospace; + text-transform: uppercase; + color: #fff; + background-color: transparent; + background: linear-gradient(180deg, #ffffff 0%, #999999 100%); + background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1rem; +} + +.header__nav button::after { + content: ""; + display: block; + width: 103px; + height: 1px; + margin: 0.3rem auto 0; + background-color: #ff3030; +} + +.header__wallet { + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: -0.7rem; + right: 10px; + width: 177px; + height: 61px; + padding: 0; + background: url("assets/images/connect-wallet-button.png"); +} + +.header__wallet > span { + margin-top: -0.5rem; + font-family: "Pixelify Sans", monospace; + text-transform: uppercase; + color: yellow; + font-size: 0.875rem; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +@media (max-width: 1024px) { + .header__wallet { + width: 150px; + height: 52px; + background-size: cover; + } +} + +/* Three columns */ + +.three-columns { + display: flex; + gap: 1.25rem 4.7rem; + padding: 4rem 1rem; + align-items: center; +} + +.three-columns > div { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.three-columns > div:nth-child(1), +.three-columns > div:nth-child(3) { + width: 289px; +} + +.three-columns > div:nth-child(2) { + flex: 1; +} + +/* Block */ + +.block__heading { + margin-bottom: 0.625rem; + color: #fff; + background-color: transparent; + background: linear-gradient(180deg, #ffffff 0%, #999999 100%); + background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1rem; +} + +/* Game Slot */ + +.game-slot { + aspect-ratio: 1028/805; + background: linear-gradient(11.57deg, #000000 5.67%, #ff2f2f 68.21%); + padding: 5px; + box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.25); +} + +.game-slot__container { + background-color: #000; + width: 100%; + height: 100%; +} + +/* Speedometer */ + +.speedometer { + width: 30px; + height: 15px; + border-top-left-radius: 360px; + border-top-right-radius: 360px; + border: 145px solid transparent; + border-bottom: 0; + position: relative; +} + +.speedometer::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 289px; + height: 153px; + background: url("assets/images/speedometer.png"); + background-size: cover; + transform: translate(-50%, -94%); +} + +.speedometer__tick { + position: absolute; + bottom: -10px; + left: -115px; + width: 113px; + height: 19px; + transform-origin: right center; + transform: rotate(0deg); /* updated via js */ +} + +.speedometer__tick::before { + content: ""; + position: absolute; + top: -2px; + left: 23px; + width: 113px; + height: 19px; + background: url("assets/images/speedometer-tick.png"); + background-size: cover; +} + +.speedometer-labels { + display: flex; + flex-direction: column; + gap: 0.3rem; + max-width: 190px; + margin: 2.5rem auto 0; + font-size: 0.9rem; + text-transform: none; +} + +.speedometer-labels .red::before { + content: ""; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 0.5rem; + background-color: #b9201b; +} + +.speedometer-labels .yellow::before { + content: ""; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 0.5rem; + background-color: #ccac25; +} diff --git a/holding-page/assets/fonts/lessperfectdosvga-webfont.woff b/holding-page/assets/fonts/lessperfectdosvga-webfont.woff new file mode 100644 index 0000000..02b24c1 Binary files /dev/null and b/holding-page/assets/fonts/lessperfectdosvga-webfont.woff differ diff --git a/holding-page/assets/fonts/lessperfectdosvga-webfont.woff2 b/holding-page/assets/fonts/lessperfectdosvga-webfont.woff2 new file mode 100644 index 0000000..ac0f327 Binary files /dev/null and b/holding-page/assets/fonts/lessperfectdosvga-webfont.woff2 differ diff --git a/holding-page/assets/fonts/pixelifysans-bold.ttf b/holding-page/assets/fonts/pixelifysans-bold.ttf new file mode 100644 index 0000000..4d8aeb6 Binary files /dev/null and b/holding-page/assets/fonts/pixelifysans-bold.ttf differ diff --git a/holding-page/assets/images/bg-0-5x.jpg b/holding-page/assets/images/bg-0-5x.jpg new file mode 100644 index 0000000..043894b Binary files /dev/null and b/holding-page/assets/images/bg-0-5x.jpg differ diff --git a/holding-page/assets/images/bg-1-0x.jpg b/holding-page/assets/images/bg-1-0x.jpg new file mode 100644 index 0000000..35bb28b Binary files /dev/null and b/holding-page/assets/images/bg-1-0x.jpg differ diff --git a/holding-page/assets/images/bg-1-5x.jpg b/holding-page/assets/images/bg-1-5x.jpg new file mode 100644 index 0000000..ac51637 Binary files /dev/null and b/holding-page/assets/images/bg-1-5x.jpg differ diff --git a/holding-page/assets/images/doom-guy-1-0x.png b/holding-page/assets/images/doom-guy-1-0x.png new file mode 100644 index 0000000..30872fb Binary files /dev/null and b/holding-page/assets/images/doom-guy-1-0x.png differ diff --git a/holding-page/assets/images/doom-guy-1-5x.png b/holding-page/assets/images/doom-guy-1-5x.png new file mode 100644 index 0000000..dc19fd4 Binary files /dev/null and b/holding-page/assets/images/doom-guy-1-5x.png differ diff --git a/holding-page/assets/images/favicon.png b/holding-page/assets/images/favicon.png new file mode 100644 index 0000000..1fd591f Binary files /dev/null and b/holding-page/assets/images/favicon.png differ diff --git a/holding-page/assets/images/hydra-logo-2-0x.png b/holding-page/assets/images/hydra-logo-2-0x.png new file mode 100644 index 0000000..641874d Binary files /dev/null and b/holding-page/assets/images/hydra-logo-2-0x.png differ diff --git a/holding-page/assets/images/hydra-text-1-0x.png b/holding-page/assets/images/hydra-text-1-0x.png new file mode 100644 index 0000000..8fab87b Binary files /dev/null and b/holding-page/assets/images/hydra-text-1-0x.png differ diff --git a/holding-page/assets/images/hydra-text-1-5x.png b/holding-page/assets/images/hydra-text-1-5x.png new file mode 100644 index 0000000..7b9f1a2 Binary files /dev/null and b/holding-page/assets/images/hydra-text-1-5x.png differ diff --git a/holding-page/assets/images/social-image-twitter.jpg b/holding-page/assets/images/social-image-twitter.jpg new file mode 100644 index 0000000..071d415 Binary files /dev/null and b/holding-page/assets/images/social-image-twitter.jpg differ diff --git a/holding-page/assets/images/social-image.jpg b/holding-page/assets/images/social-image.jpg new file mode 100644 index 0000000..ebd4dc4 Binary files /dev/null and b/holding-page/assets/images/social-image.jpg differ diff --git a/holding-page/holding.css b/holding-page/holding.css new file mode 100644 index 0000000..8413602 --- /dev/null +++ b/holding-page/holding.css @@ -0,0 +1,392 @@ +/* Reset */ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Fonts */ + +@font-face { + font-family: "less_perfect_dos_vgaregular"; + src: + url("assets/fonts/lessperfectdosvga-webfont.woff2") format("woff2"), + url("assets/fonts/lessperfectdosvga-webfont.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Pixelify Sans"; + src: url("assets/fonts/pixelifysans-bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} + +/* Global */ + +* { + box-sizing: border-box; +} + +html { + overflow-y: scroll; + font-size: 16px; + height: 100%; +} + +@media (max-width: 1200px) { + html { + font-size: 14px; + } +} + +@media (max-width: 768px) { + html { + font-size: 12px; + } +} + +body { + background: red; + font-family: "less_perfect_dos_vgaregular", monospace; + text-transform: uppercase; + color: white; + height: 100%; +} + +img { + max-width: 100%; +} + +a { + color: white; + text-underline-offset: 3px; +} + +a:hover { + text-decoration: none; +} + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Background */ + +.layer--wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + min-height: 100%; +} + +.layer--wrapper > * { + width: 100%; +} + +.layer--base { + position: relative; + z-index: 3; +} + +.layer--bg { + position: absolute; + z-index: 1; + inset: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.layer--bg::before { + mix-blend-mode: color-dodge; +} + +.bg--main { + position: absolute; + object-fit: cover; + inset: 0; + width: 100%; + height: 100%; + max-width: none; +} + +.layer--foreground { + position: relative; + z-index: 2; + overflow: hidden; + margin-top: -85px; + max-height: 50vh; + min-height: 560px; + height: 900px; +} + +@media (max-width: 1200px) { + .layer--foreground { + margin-top: -40px; + min-height: 300px; + height: 600px; + } +} + +.layer--foreground::after, +.layer--foreground::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient( + 180deg, + rgba(255, 0, 0, 0) 40%, + rgba(255, 0, 0, 0.75) 100% + ); +} + +.bg--guy { + max-width: 1920px; + position: absolute; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + background-image: image-set( + url("assets/images/doom-guy-1-0x.png") 1x, + url("assets/images/doom-guy-1-5x.png") 2x + ); + background-size: cover; + background-repeat: no-repeat; + background-position: center bottom; +} + +@media (min-width: 1921px) { + .layer--foreground { + max-height: none; + min-height: auto; + height: auto; + margin-top: -100px; + padding: 15%; + } + + .bg--guy { + max-width: none; + } +} + +/* Body */ + +main { + padding: 54px; + margin: 0 auto; + max-width: 1200px; +} + +@media (max-width: 1200px) { + main { + padding: 20px; + } +} + +.hydra-logo { + position: absolute; + top: 65px; + left: 60px; + display: block; + width: 53px; + z-index: 2; +} + +@media (max-width: 1440px) { + .hydra-logo { + top: 40px; + left: 45px; + width: 49px; + } +} + +@media (max-width: 640px) { + .hydra-logo { + top: 25px; + left: 30px; + width: 30px; + } +} + +.doom-logo img { + display: block; + margin: -4.5% auto -6.5%; + width: 970px; + max-width: 70vw; +} + +@media (max-width: 1440px) { + .doom-logo img { + margin-top: -7.5%; + margin-bottom: -4.5%; + } +} + +@media (max-width: 1200px) { + .doom-logo img { + margin-top: -4%; + } +} + +@media (max-width: 768px) { + .doom-logo { + padding-top: 45px; + padding-bottom: 20px; + } +} + +.card { + background: #18181a; + border: 1px solid #ff3030; + box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.25); + max-width: 535px; + text-align: center; + padding: 15px 15px 20px; + margin: 0 auto; + font-size: 1.45rem; +} + +.card__title { + font-family: "Pixelify Sans"; + font-weight: 700; + font-size: 2.5rem; + letter-spacing: -0.01em; + padding: 0 0 0.3em; + color: yellow; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +.card__description { + text-shadow: + 0 0 2px rgba(255, 255, 255, 0.5), + 0 0 12px rgba(255, 255, 255, 0.3); +} diff --git a/holding-page/index.html b/holding-page/index.html new file mode 100644 index 0000000..e47b330 --- /dev/null +++ b/holding-page/index.html @@ -0,0 +1,82 @@ + + + + + + + + + Hydra Doom + + + + + + + + + + + + + + + + + +
+ +
+

+ Hydra Doom +

+
+

Coming Soon

+

+ Learn more about hydra here: + hydra.family +

+
+
+
+ +
+
+
+
+
+ + diff --git a/holding-page/osano-dialog.css b/holding-page/osano-dialog.css new file mode 100644 index 0000000..001cb20 --- /dev/null +++ b/holding-page/osano-dialog.css @@ -0,0 +1,418 @@ +:root { + --osano-white: #ffffff; + --osano-black: #000000; + --osano-off-black: #1c0505; + --osano-cream: #faf9f3; + --osano-gray: #cdd2d0; + --osano-red: #963428; + --osano-red-dark: #47271e; + + --osano-dialog-max-width: 960px; + --osano-dialog-elastic-padding: calc( + (100% - min(100vw, var(--osano-dialog-max-width))) / 2 + ); + --osano-dialog-magic-padding: max(var(--osano-dialog-elastic-padding), 20px); + --osano-close-color: var(--osano-red); + --osano-link-color: var(--osano-red); + --osano-disclosure-color: var(--osano-red); + --osano-font-family: "less_perfect_dos_vgaregular", monospace; + --osano-font-color: var(--osano-off-black); + --osano-background-color: var(--osano-cream); + --osano-border-radius: 10px; + --osano-btn-font-variant: normal; + --osano-btn-text-transform: uppercase; + --osano-btn-letter-spacing: normal; + --osano-btn-border-radius: 4px; + --osano-btn-color: var(--osano-red); + --osano-btn-border-color: var(--osano-red); + --osano-btn-bg-color: var(--osano-white); + --osano-btn-hover-color: var(--osano-white); + --osano-btn-border-hover-color: var(--osano-red); + --osano-btn-bg-hover-color: var(--osano-red); + --osano-switch-color: var(--osano-gray); + --osano-switch-active-color: var(--osano-red); + --osano-border-gradient: linear-gradient( + 94.22deg, + var(--osano-red) -18.3%, + var(--osano-red) 118.89% + ); + --osano-btn-border-gradient: linear-gradient( + 94.22deg, + var(--osano-red) -18.3%, + var(--osano-red) 118.89% + ); + --osano-background-gradient: linear-gradient( + var(--osano-background-color), + var(--osano-background-color) + ) + padding-box, + var(--osano-border-gradient) border-box; + --osano-btn-bg-gradient: linear-gradient( + var(--osano-btn-bg-color), + var(--osano-btn-bg-color) + ) + padding-box, + var(--osano-btn-border-gradient) border-box; +} + +/* Parent element */ +.osano-cm-window { + font-family: var(--osano-font-family); + font-size: 1rem; + text-transform: none; + /** + * Initial Dialog + * -------------- + * + * 1. Make font color consistent + * 2. Override background for gradient border effect + * - We can't use 'max-width: xxx; margin: auto' to center + * 3. Align to center + * 4. Make mobile whitespace consistent + * 5. Make desktop whitespace consistent + */ + .osano-cm-dialog { + align-items: flex-start; + color: var(--osano-font-color); /* 1 */ + border-radius: var(--osano-border-radius, 1rem); /* 2 */ + border: 2px solid transparent; /* 2 */ + background: var(--osano-background-gradient); /* 2 */ + margin-left: var(--osano-dialog-magic-padding); /* 3 */ + margin-right: var(--osano-dialog-magic-padding); /* 3 */ + padding: 30px; /* 4 */ + margin-bottom: 20px; /* 4 */ + line-height: 1.625; + @media screen and (min-width: 768px) { + padding: 60px; /* 5 */ + } + } + /** + * Button + * ------ + * + * 1. Make text consistent + * 2. Gradient border effect + * 3. Align size with site design + * 4. Align hover effect with site design + */ + .osano-cm-button { + font-weight: 400; + font-family: var(--osano-font-family); /* 1 */ + font-variant: var(--osano-btn-font-variant, normal); + text-transform: var(--osano-btn-text-transform, none); + letter-spacing: var(--osano-btn-letter-spacing, normal); + color: var(--osano-btn-color); /* 1 */ + background-color: var(--osano-btn-bg-color); /* 2 */ + border: 2px solid var(--osano-btn-border-color); /* 2 */ + border-radius: var(--osano-btn-border-radius, 0.875rem); /* 2 */ + + height: 44px; /* 3 */ + transition: + color 0.15s ease-out, + border-color 0.15s ease-out, + background-color 0.15s ease-out; /* 4 */ + &:hover:not(:disabled):not(:active):not([aria-selected="true"]) { + box-shadow: 0 4px 10px rgba(167, 143, 160, 0.2); /* 4 */ + } + } + /* Button: focus/hover */ + .osano-cm-button:focus, + .osano-cm-button:hover { + color: var(--osano-btn-hover-color); + background: var(--osano-btn-bg-hover-color); + border-color: var(--osano-btn-border-hover-color); + } + /* Buttons in group */ + .osano-cm-dialog--type_bar .osano-cm-button { + width: 100%; + } + @media screen and (min-width: 768px) { + .osano-cm-dialog--type_bar .osano-cm-dialog__buttons { + margin-left: 2rem; + } + } + /** + * When buttons are in a stack... + * 1. Make mobile whitespace consistent + * 2. Make desktop whitespace consistent + */ + .osano-cm-dialog--type_bar .osano-cm-button + .osano-cm-button { + margin-top: calc(10px - 0.25em); /* 1 */ + @media screen and (min-width: 768px) { + margin-top: calc(20px - 0.25em); /* 2 */ + } + } + /** + * 1. Remove user-agent defaults for link color + */ + .osano-cm-link, + .osano-cm-link:hover { + color: var(--osano-link-color); /* 1 */ + font-weight: 400; + } + /** + * Toggle Switch + * ------------- + * 1. Align colors + */ + .osano-cm-toggle__switch { + background-color: var(--osano-switch-color); /* 1 */ + } + /* Toggle switch: focus/hover */ + .osano-cm-toggle__input:focus + .osano-cm-toggle__switch, + .osano-cm-toggle__input:hover + .osano-cm-toggle__switch { + background-color: var(--osano-switch-color); /* 1 */ + border-color: var(--osano-switch-color); /* 1 */ + + &::before { + border-color: var(--osano-switch-color); /* 1 */ + } + } + + /* Toggle switch: checked: focus/hover */ + .osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch, + .osano-cm-toggle__input:checked:hover + .osano-cm-toggle__switch, + .osano-cm-toggle__input:checked + .osano-cm-toggle__switch { + background-color: var(--osano-switch-active-color); /* 1 */ + border-color: var(--osano-switch-active-color); /* 1 */ + + &::before { + border-color: var(--osano-switch-active-color); /* 1 */ + } + + &::after { + background-color: #fff; /* 1 */ + border-color: var(--osano-btn-bg-color); /* 1 */ + } + } + + .osano-cm-toggle__input[disabled] + .osano-cm-toggle__switch { + opacity: 0.5; + } + + .osano-cm-dialog__list .osano-cm-label { + margin-left: 0.75rem; + } + + /** + * View cookies dropdown + * --------------------- + */ + .osano-cm-disclosure__toggle, + .osano-cm-disclosure__toggle:hover { + color: inherit; /* 1 */ + } + /* 1. Fix horrible info-dialog shadow */ + .osano-cm-info { + box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.15); /* 1. */ + } + /** + * 1. Hide Osano logo + */ + .osano-cm-view__powered-by { + display: none; /* 1 */ + } + /** + * Sidebar styling: + * ---------------- + */ + .osano-cm-info-dialog__info { + /** + * 1. Make wider on desktop + */ + @media screen and (min-width: 768px) { + max-width: 465px; /* 1 */ + } + /** + * 1. Remove sticky behaviour + * 2. Adjust desktop close button position based on whitespace change + */ + .osano-cm-info-dialog-header { + position: relative; /* 1 */ + @media screen and (min-width: 768px) { + .osano-cm-close { + margin-top: -30px; /* 2 */ + } + } + } + /** + * 1. Make sidebar title bold + * 2. Make desktop padding consistent with content + */ + .osano-cm-info-dialog-header__header { + /* font-weight: bold; */ /* 1 */ + font-size: 1.2rem; + text-transform: uppercase; + color: var(--osano-red-dark); + @media screen and (min-width: 768px) { + padding-top: 60px; /* 2 */ + padding-left: 60px; /* 2 */ + } + } + /** + * Adjust sidebar close button focus color + */ + .osano-cm-info-dialog-header__close:focus { + stroke: var(--osano-close-color); + background: var(--osano-background-color); + border: none; + } + /** + * 1. Make text more readable + */ + .osano-cm-description { + font-size: 0.875rem; /* 1 */ + line-height: 1.64; /* 1 */ + color: var(--osano-red-dark); + } + /** + * 1. Add whitespace to bottom of dialog + */ + .osano-cm-save.osano-cm-view__button { + margin-bottom: 60px; /* 1 */ + } + } + /** + * 1. Make mobile whitespace consistent + * 2. Make desktop whitespace consistent + */ + .osano-cm-view--type_consent { + padding: 0 20px; /* 1 */ + @media screen and (min-width: 768px) { + padding: 0 60px; /* 2 */ + } + } + /** + * 1. Make section headings bold + */ + .osano-cm-toggle__label[role="heading"] { + /* font-weight: bold; */ /* 1 */ + font-size: 1.25rem; + text-transform: uppercase; + color: var(--osano-red-dark); + } + /** + * 1. Make whitespace consistent with parent + */ + .osano-cm-disclosure { + padding-left: 0; /* 1 */ + padding-right: 0; /* 1 */ + margin-left: 0; /* 1 */ + margin-right: 0; /* 1 */ + margin-bottom: 30px; /* 1 */ + } + .osano-cm-cookie-disclosure__title { + font-size: 0.875rem; + font-weight: 400; + text-transform: uppercase; + } + .osano-cm-disclosure__list { + background-color: transparent; + } + .osano-cm-disclosure__list .osano-cm-description, + .osano-cm-disclosure__list .osano-cm-list__list-item { + font-size: 0.875rem; + color: var(--osano-black); + } + /** + * 1. Make font-size consistent + * 2. Add preceeding dropdown arrow + * 3. Make font color consistent + */ + .osano-cm-disclosure__toggle, + .osano-cm-disclosure__toggle:hover { + font-size: 1.125rem; /* 1 */ + position: relative; /* 2 */ + color: var(--osano-disclosure-color); /* 3 */ + text-decoration: none; + font-weight: 400; + &:before { + display: inline-block; /* 2 */ + content: ""; /* 2 */ + position: relative; /* 2 */ + width: 12px; /* 2 */ + height: 8px; /* 2 */ + margin-right: 8px; /* 2 */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjOTYzNDI4IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im0yIDEuNSA1IDYgNS02Ii8+PC9zdmc+") + center center no-repeat; /* 2 */ + } + } + .osano-cm-disclosure__toggle[aria-expanded="true"] { + &:before { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjOTYzNDI4IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im0xMiA4LjUtNS02LTUgNiIvPjwvc3ZnPg=="); + } + } + /** + * 1. Override cookie widget icon with custom SVG + */ + .osano-cm-window__widget { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiNmZmYiLz48cGF0aCBmaWxsPSIjOTYzNDI4IiBkPSJNMTcuNjA1IDE2Ljk0NWEyLjM4IDIuMzggMCAwIDAgMS43NTUtLjcyNWMuNDgtLjQ4My43Mi0xLjA3LjcyLTEuNzZhMi4zOCAyLjM4IDAgMCAwLS43MjUtMS43NTUgMi40MDQgMi40MDQgMCAwIDAtMS43Ni0uNzIgMi4zOCAyLjM4IDAgMCAwLTEuNzU1LjcyNWMtLjQ4LjQ4My0uNzIgMS4wNy0uNzIgMS43NnMuMjQyIDEuMjc1LjcyNSAxLjc1NSAxLjA3LjcyIDEuNzYuNzJabS0zLjIgOGEyLjM4IDIuMzggMCAwIDAgMS43NTUtLjcyNWMuNDgtLjQ4My43Mi0xLjA3LjcyLTEuNzZhMi4zOCAyLjM4IDAgMCAwLS43MjUtMS43NTUgMi40MDQgMi40MDQgMCAwIDAtMS43Ni0uNzIgMi4zOCAyLjM4IDAgMCAwLTEuNzU1LjcyNWMtLjQ4LjQ4My0uNzIgMS4wNy0uNzIgMS43NnMuMjQyIDEuMjc1LjcyNSAxLjc1NSAxLjA3LjcyIDEuNzYuNzJabTEwLjM5NSAxLjUyYy40NTMgMCAuODMzLS4xNTMgMS4xNC0uNDYuMzA3LS4zMDcuNDYtLjY4Ny40Ni0xLjE0IDAtLjQ1My0uMTUzLS44MzMtLjQ2LTEuMTRhMS41NDkgMS41NDkgMCAwIDAtMS4xNC0uNDZjLS40NTMgMC0uODMzLjE1My0xLjE0LjQ2LS4zMDcuMzA3LS40Ni42ODctLjQ2IDEuMTQgMCAuNDUzLjE1My44MzMuNDYgMS4xNC4zMDcuMzA3LjY4Ny40NiAxLjE0LjQ2Wm0tNC43OSA5LjZjLTIuMTk0IDAtNC4yNjMtLjQyLTYuMjEtMS4yNmExNi4yMjcgMTYuMjI3IDAgMCAxLTUuMS0zLjQ0IDE2LjIyOCAxNi4yMjggMCAwIDEtMy40NC01LjFDNC40MiAyNC4zMTggNCAyMi4yNTIgNCAyMC4wNjVjMC0yLjQ1My41Mi00Ljc0NyAxLjU2LTYuODhzMi40MzMtMy45NCA0LjE4LTUuNDJjMS43NDctMS40OCAzLjc2LTIuNTQ3IDYuMDQtMy4yIDIuMjgtLjY1MyA0LjY0Ny0uNzQgNy4xLS4yNi0uMTYgMS4yLS4wNTMgMi4zMzMuMzIgMy40LjM3MyAxLjA2Ny45NCAxLjk3MyAxLjcgMi43MmE2Ljg4IDYuODggMCAwIDAgMi43NCAxLjY0YzEuMDY3LjM0NyAyLjE4Ny40MjcgMy4zNi4yNC0uNTMzIDEuNjI3LS4yNCAzLjA4Ny44OCA0LjM4IDEuMTIgMS4yOTMgMi40OCAyLjAwNyA0LjA4IDIuMTQuMjEzIDIuMzItLjA2IDQuNTItLjgyIDYuNmExNS45OTQgMTUuOTk0IDAgMCAxLTMuMzQgNS40OGMtMS40NjcgMS41NzMtMy4yMSAyLjgyNy01LjIzMiAzLjc2LTIuMDIuOTMzLTQuMjA3IDEuNC02LjU1OSAxLjRabS0uMDEtMi40YzMuNzg3IDAgNi45MzMtMS4yNDcgOS40NC0zLjc0IDIuNTA3LTIuNDkzIDMuOTA3LTUuNTY3IDQuMi05LjIyLTEuNDQtLjUzMy0yLjYwNy0xLjMyNy0zLjUtMi4zOGE3LjIyNyA3LjIyNyAwIDAgMS0xLjY2LTMuNjJjLTIuMTYtLjI5My0zLjk4LTEuMjI3LTUuNDYtMi44LTEuNDgtMS41NzMtMi4zMjctMy40LTIuNTQtNS40OC0xLjk3My0uMDgtMy44Mi4yNC01LjU0Ljk2LTEuNzIuNzItMy4yMTMgMS43MDctNC40OCAyLjk2YTEzLjY3OCAxMy42NzggMCAwIDAtMi45OCA0LjQyIDEzLjQxIDEzLjQxIDAgMCAwLTEuMDggNS4zYzAgMy43ODcgMS4zMiA3IDMuOTYgOS42NCAyLjY0IDIuNjQgNS44NTMgMy45NiA5LjY0IDMuOTZaIi8+PC9zdmc+") + center center no-repeat; /* 1 */ + background-size: 40px; /* 1 */ + > svg { + display: none; /* 1 */ + } + } + /** + * 1. Remove cookie widget icon focus outline + */ + .osano-cm-widget:focus { + outline: none; /* 1 */ + } + /** + * 1. Override default close button colors + */ + .osano-cm-dialog__close { + color: var(--osano-close-color); /* 1 */ + stroke: var(--osano-close-color); /* 1 */ + stroke-width: 2px; + + @media screen and (min-width: 768px) { + margin: 0.8rem; + } + } + + /* Remove Targeted Advertising and Personalisation */ + + .osano-cm-disclosure--collapse { + border-bottom: 0; + padding-bottom: 0; + } + .osano-cm-disclosure { + margin: 0; + padding: 0; + } + .osano-cm-toggle { + padding-top: 1.5em; + } + & label[for="osano-cm-drawer-toggle--category_MARKETING"] { + display: none; + } + & p[id="osano-cm-drawer-toggle--category_MARKETING--description"] { + display: none; + } + & div[aria-controls="osano-cm-MARKETING_disclosures"] { + display: none; + } + & ul[id="osano-cm-MARKETING_disclosures"] { + display: none; + } + & label[for="osano-cm-dialog-toggle--category_MARKETING"] { + display: none; + } + & label[for="osano-cm-drawer-toggle--category_PERSONALIZATION"] { + display: none; + } + & p[id="osano-cm-drawer-toggle--category_PERSONALIZATION--description"] { + display: none; + } + & div[aria-controls="osano-cm-PERSONALIZATION_disclosures"] { + display: none; + } + & ul[id="osano-cm-PERSONALIZATION_disclosures"] { + display: none; + } + & label[for="osano-cm-dialog-toggle--category_PERSONALIZATION"] { + display: none; + } +} diff --git a/website/assets/fonts/lessperfectdosvga-webfont.woff b/website/assets/fonts/lessperfectdosvga-webfont.woff new file mode 100644 index 0000000..02b24c1 Binary files /dev/null and b/website/assets/fonts/lessperfectdosvga-webfont.woff differ diff --git a/website/assets/fonts/lessperfectdosvga-webfont.woff2 b/website/assets/fonts/lessperfectdosvga-webfont.woff2 new file mode 100644 index 0000000..ac0f327 Binary files /dev/null and b/website/assets/fonts/lessperfectdosvga-webfont.woff2 differ diff --git a/website/assets/fonts/pixelifysans-regular.ttf b/website/assets/fonts/pixelifysans-regular.ttf new file mode 100644 index 0000000..37deb9a Binary files /dev/null and b/website/assets/fonts/pixelifysans-regular.ttf differ diff --git a/website/assets/images/bg-0-5x.jpg b/website/assets/images/bg-0-5x.jpg new file mode 100644 index 0000000..043894b Binary files /dev/null and b/website/assets/images/bg-0-5x.jpg differ diff --git a/website/assets/images/bg-1-0x.jpg b/website/assets/images/bg-1-0x.jpg new file mode 100644 index 0000000..35bb28b Binary files /dev/null and b/website/assets/images/bg-1-0x.jpg differ diff --git a/website/assets/images/bg-1-5x.jpg b/website/assets/images/bg-1-5x.jpg new file mode 100644 index 0000000..ac51637 Binary files /dev/null and b/website/assets/images/bg-1-5x.jpg differ diff --git a/website/assets/images/connect-wallet-button.png b/website/assets/images/connect-wallet-button.png new file mode 100644 index 0000000..92a7fba Binary files /dev/null and b/website/assets/images/connect-wallet-button.png differ diff --git a/website/assets/images/doom-guy-1-0x.png b/website/assets/images/doom-guy-1-0x.png new file mode 100644 index 0000000..30872fb Binary files /dev/null and b/website/assets/images/doom-guy-1-0x.png differ diff --git a/website/assets/images/doom-guy-1-5x.png b/website/assets/images/doom-guy-1-5x.png new file mode 100644 index 0000000..dc19fd4 Binary files /dev/null and b/website/assets/images/doom-guy-1-5x.png differ diff --git a/website/assets/images/favicon.png b/website/assets/images/favicon.png new file mode 100644 index 0000000..1fd591f Binary files /dev/null and b/website/assets/images/favicon.png differ diff --git a/website/assets/images/hydra-logo-2-0x.png b/website/assets/images/hydra-logo-2-0x.png new file mode 100644 index 0000000..641874d Binary files /dev/null and b/website/assets/images/hydra-logo-2-0x.png differ diff --git a/website/assets/images/hydra-text-1-0x.png b/website/assets/images/hydra-text-1-0x.png new file mode 100644 index 0000000..8fab87b Binary files /dev/null and b/website/assets/images/hydra-text-1-0x.png differ diff --git a/website/assets/images/hydra-text-1-5x.png b/website/assets/images/hydra-text-1-5x.png new file mode 100644 index 0000000..7b9f1a2 Binary files /dev/null and b/website/assets/images/hydra-text-1-5x.png differ diff --git a/website/assets/images/noise.png b/website/assets/images/noise.png new file mode 100644 index 0000000..e701c09 Binary files /dev/null and b/website/assets/images/noise.png differ diff --git a/website/assets/images/play-doom-button-bg.png b/website/assets/images/play-doom-button-bg.png new file mode 100644 index 0000000..adb411e Binary files /dev/null and b/website/assets/images/play-doom-button-bg.png differ diff --git a/website/assets/images/play-doom-button.png b/website/assets/images/play-doom-button.png new file mode 100644 index 0000000..6a5fd62 Binary files /dev/null and b/website/assets/images/play-doom-button.png differ diff --git a/website/assets/images/social-image-twitter.jpg b/website/assets/images/social-image-twitter.jpg new file mode 100644 index 0000000..071d415 Binary files /dev/null and b/website/assets/images/social-image-twitter.jpg differ diff --git a/website/assets/images/social-image.jpg b/website/assets/images/social-image.jpg new file mode 100644 index 0000000..ebd4dc4 Binary files /dev/null and b/website/assets/images/social-image.jpg differ diff --git a/website/assets/images/speedometer-tick.png b/website/assets/images/speedometer-tick.png new file mode 100644 index 0000000..e5f96f3 Binary files /dev/null and b/website/assets/images/speedometer-tick.png differ diff --git a/website/assets/images/speedometer.png b/website/assets/images/speedometer.png new file mode 100644 index 0000000..6796ab0 Binary files /dev/null and b/website/assets/images/speedometer.png differ diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..b2c8f77 --- /dev/null +++ b/website/index.html @@ -0,0 +1,485 @@ + + + + + + + + + Hydra Doom + + + + + + + + + + + + + + + + + +
+ +
+

+ Hydra Doom +

+
+ +
+
+
+ +
+
+
+
+
+ + + + + + + + + diff --git a/website/index.js b/website/index.js new file mode 100644 index 0000000..8a73032 --- /dev/null +++ b/website/index.js @@ -0,0 +1,103 @@ +document.addEventListener("DOMContentLoaded", () => { + /** + * Helpers + */ + function matchBreakpoint(breakpoint, callback) { + const mediaQuery = window.matchMedia(breakpoint); + if (mediaQuery.matches) callback(); + + mediaQuery.addEventListener("change", (event) => { + if (event.matches) callback(); + }); + } + + /** + * Modal + */ + const openModal = (modal) => { + if (modal) { + modal.style.display = "flex"; + + if ( + modal.id === "modal-game" || + modal.id === "modal-intro" || + modal.id === "modal-fallback" + ) { + document + .querySelectorAll(".js-hide-when-modal-opens") + .forEach((element) => { + element.style.display = "none"; + }); + } + } + }; + + const closeModal = (modal) => { + if (modal) { + modal.style.display = "none"; + + if (modal.id === "modal-intro") { + document + .querySelectorAll(".js-hide-when-modal-opens") + .forEach((element) => { + element.style.display = "flex"; + }); + } + } + }; + + document.querySelectorAll("[data-modal-target]").forEach((button) => { + button.addEventListener("click", () => { + const modalId = button.getAttribute("data-modal-target"); + const modal = document.getElementById(modalId); + openModal(modal); + }); + }); + + document.querySelectorAll("[data-modal-close]").forEach((button) => { + button.addEventListener("click", () => { + const modal = button.closest(".modal"); + closeModal(modal); + }); + }); + + document.querySelectorAll("[data-modal-auto-open]").forEach((modal) => { + openModal(modal); + }); + + // Prevents game from being played on mobile devices + matchBreakpoint("(max-width: 1024px)", () => { + document.querySelectorAll(".modal").forEach((modal) => { + closeModal(modal); + const fallback = document.getElementById("modal-fallback"); + openModal(fallback); + }); + }); + + /** + * Copy to clipboard + */ + document.querySelectorAll("[data-copy-clipboard]").forEach((element) => { + element.addEventListener("click", (event) => { + const data = event.target.getAttribute("data-copy-clipboard"); + navigator.clipboard.writeText(data).then(function () { + alert("Copied to clipboard: " + data); + }); + }); + }); + + /** + * Speedometer + */ + + // Map range from [0, 500] to [0, 180] + function mapRange(value, inMin, inMax, outMin, outMax) { + return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; + } + + document.querySelectorAll("[data-speedometer-value]").forEach((element) => { + const value = element.getAttribute("data-speedometer-value"); + const degree = mapRange(value, 0, 500, 0, 180); + element.style.transform = `rotate(${degree}deg)`; + }); +}); diff --git a/website/osano-dialog.css b/website/osano-dialog.css new file mode 100644 index 0000000..001cb20 --- /dev/null +++ b/website/osano-dialog.css @@ -0,0 +1,418 @@ +:root { + --osano-white: #ffffff; + --osano-black: #000000; + --osano-off-black: #1c0505; + --osano-cream: #faf9f3; + --osano-gray: #cdd2d0; + --osano-red: #963428; + --osano-red-dark: #47271e; + + --osano-dialog-max-width: 960px; + --osano-dialog-elastic-padding: calc( + (100% - min(100vw, var(--osano-dialog-max-width))) / 2 + ); + --osano-dialog-magic-padding: max(var(--osano-dialog-elastic-padding), 20px); + --osano-close-color: var(--osano-red); + --osano-link-color: var(--osano-red); + --osano-disclosure-color: var(--osano-red); + --osano-font-family: "less_perfect_dos_vgaregular", monospace; + --osano-font-color: var(--osano-off-black); + --osano-background-color: var(--osano-cream); + --osano-border-radius: 10px; + --osano-btn-font-variant: normal; + --osano-btn-text-transform: uppercase; + --osano-btn-letter-spacing: normal; + --osano-btn-border-radius: 4px; + --osano-btn-color: var(--osano-red); + --osano-btn-border-color: var(--osano-red); + --osano-btn-bg-color: var(--osano-white); + --osano-btn-hover-color: var(--osano-white); + --osano-btn-border-hover-color: var(--osano-red); + --osano-btn-bg-hover-color: var(--osano-red); + --osano-switch-color: var(--osano-gray); + --osano-switch-active-color: var(--osano-red); + --osano-border-gradient: linear-gradient( + 94.22deg, + var(--osano-red) -18.3%, + var(--osano-red) 118.89% + ); + --osano-btn-border-gradient: linear-gradient( + 94.22deg, + var(--osano-red) -18.3%, + var(--osano-red) 118.89% + ); + --osano-background-gradient: linear-gradient( + var(--osano-background-color), + var(--osano-background-color) + ) + padding-box, + var(--osano-border-gradient) border-box; + --osano-btn-bg-gradient: linear-gradient( + var(--osano-btn-bg-color), + var(--osano-btn-bg-color) + ) + padding-box, + var(--osano-btn-border-gradient) border-box; +} + +/* Parent element */ +.osano-cm-window { + font-family: var(--osano-font-family); + font-size: 1rem; + text-transform: none; + /** + * Initial Dialog + * -------------- + * + * 1. Make font color consistent + * 2. Override background for gradient border effect + * - We can't use 'max-width: xxx; margin: auto' to center + * 3. Align to center + * 4. Make mobile whitespace consistent + * 5. Make desktop whitespace consistent + */ + .osano-cm-dialog { + align-items: flex-start; + color: var(--osano-font-color); /* 1 */ + border-radius: var(--osano-border-radius, 1rem); /* 2 */ + border: 2px solid transparent; /* 2 */ + background: var(--osano-background-gradient); /* 2 */ + margin-left: var(--osano-dialog-magic-padding); /* 3 */ + margin-right: var(--osano-dialog-magic-padding); /* 3 */ + padding: 30px; /* 4 */ + margin-bottom: 20px; /* 4 */ + line-height: 1.625; + @media screen and (min-width: 768px) { + padding: 60px; /* 5 */ + } + } + /** + * Button + * ------ + * + * 1. Make text consistent + * 2. Gradient border effect + * 3. Align size with site design + * 4. Align hover effect with site design + */ + .osano-cm-button { + font-weight: 400; + font-family: var(--osano-font-family); /* 1 */ + font-variant: var(--osano-btn-font-variant, normal); + text-transform: var(--osano-btn-text-transform, none); + letter-spacing: var(--osano-btn-letter-spacing, normal); + color: var(--osano-btn-color); /* 1 */ + background-color: var(--osano-btn-bg-color); /* 2 */ + border: 2px solid var(--osano-btn-border-color); /* 2 */ + border-radius: var(--osano-btn-border-radius, 0.875rem); /* 2 */ + + height: 44px; /* 3 */ + transition: + color 0.15s ease-out, + border-color 0.15s ease-out, + background-color 0.15s ease-out; /* 4 */ + &:hover:not(:disabled):not(:active):not([aria-selected="true"]) { + box-shadow: 0 4px 10px rgba(167, 143, 160, 0.2); /* 4 */ + } + } + /* Button: focus/hover */ + .osano-cm-button:focus, + .osano-cm-button:hover { + color: var(--osano-btn-hover-color); + background: var(--osano-btn-bg-hover-color); + border-color: var(--osano-btn-border-hover-color); + } + /* Buttons in group */ + .osano-cm-dialog--type_bar .osano-cm-button { + width: 100%; + } + @media screen and (min-width: 768px) { + .osano-cm-dialog--type_bar .osano-cm-dialog__buttons { + margin-left: 2rem; + } + } + /** + * When buttons are in a stack... + * 1. Make mobile whitespace consistent + * 2. Make desktop whitespace consistent + */ + .osano-cm-dialog--type_bar .osano-cm-button + .osano-cm-button { + margin-top: calc(10px - 0.25em); /* 1 */ + @media screen and (min-width: 768px) { + margin-top: calc(20px - 0.25em); /* 2 */ + } + } + /** + * 1. Remove user-agent defaults for link color + */ + .osano-cm-link, + .osano-cm-link:hover { + color: var(--osano-link-color); /* 1 */ + font-weight: 400; + } + /** + * Toggle Switch + * ------------- + * 1. Align colors + */ + .osano-cm-toggle__switch { + background-color: var(--osano-switch-color); /* 1 */ + } + /* Toggle switch: focus/hover */ + .osano-cm-toggle__input:focus + .osano-cm-toggle__switch, + .osano-cm-toggle__input:hover + .osano-cm-toggle__switch { + background-color: var(--osano-switch-color); /* 1 */ + border-color: var(--osano-switch-color); /* 1 */ + + &::before { + border-color: var(--osano-switch-color); /* 1 */ + } + } + + /* Toggle switch: checked: focus/hover */ + .osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch, + .osano-cm-toggle__input:checked:hover + .osano-cm-toggle__switch, + .osano-cm-toggle__input:checked + .osano-cm-toggle__switch { + background-color: var(--osano-switch-active-color); /* 1 */ + border-color: var(--osano-switch-active-color); /* 1 */ + + &::before { + border-color: var(--osano-switch-active-color); /* 1 */ + } + + &::after { + background-color: #fff; /* 1 */ + border-color: var(--osano-btn-bg-color); /* 1 */ + } + } + + .osano-cm-toggle__input[disabled] + .osano-cm-toggle__switch { + opacity: 0.5; + } + + .osano-cm-dialog__list .osano-cm-label { + margin-left: 0.75rem; + } + + /** + * View cookies dropdown + * --------------------- + */ + .osano-cm-disclosure__toggle, + .osano-cm-disclosure__toggle:hover { + color: inherit; /* 1 */ + } + /* 1. Fix horrible info-dialog shadow */ + .osano-cm-info { + box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.15); /* 1. */ + } + /** + * 1. Hide Osano logo + */ + .osano-cm-view__powered-by { + display: none; /* 1 */ + } + /** + * Sidebar styling: + * ---------------- + */ + .osano-cm-info-dialog__info { + /** + * 1. Make wider on desktop + */ + @media screen and (min-width: 768px) { + max-width: 465px; /* 1 */ + } + /** + * 1. Remove sticky behaviour + * 2. Adjust desktop close button position based on whitespace change + */ + .osano-cm-info-dialog-header { + position: relative; /* 1 */ + @media screen and (min-width: 768px) { + .osano-cm-close { + margin-top: -30px; /* 2 */ + } + } + } + /** + * 1. Make sidebar title bold + * 2. Make desktop padding consistent with content + */ + .osano-cm-info-dialog-header__header { + /* font-weight: bold; */ /* 1 */ + font-size: 1.2rem; + text-transform: uppercase; + color: var(--osano-red-dark); + @media screen and (min-width: 768px) { + padding-top: 60px; /* 2 */ + padding-left: 60px; /* 2 */ + } + } + /** + * Adjust sidebar close button focus color + */ + .osano-cm-info-dialog-header__close:focus { + stroke: var(--osano-close-color); + background: var(--osano-background-color); + border: none; + } + /** + * 1. Make text more readable + */ + .osano-cm-description { + font-size: 0.875rem; /* 1 */ + line-height: 1.64; /* 1 */ + color: var(--osano-red-dark); + } + /** + * 1. Add whitespace to bottom of dialog + */ + .osano-cm-save.osano-cm-view__button { + margin-bottom: 60px; /* 1 */ + } + } + /** + * 1. Make mobile whitespace consistent + * 2. Make desktop whitespace consistent + */ + .osano-cm-view--type_consent { + padding: 0 20px; /* 1 */ + @media screen and (min-width: 768px) { + padding: 0 60px; /* 2 */ + } + } + /** + * 1. Make section headings bold + */ + .osano-cm-toggle__label[role="heading"] { + /* font-weight: bold; */ /* 1 */ + font-size: 1.25rem; + text-transform: uppercase; + color: var(--osano-red-dark); + } + /** + * 1. Make whitespace consistent with parent + */ + .osano-cm-disclosure { + padding-left: 0; /* 1 */ + padding-right: 0; /* 1 */ + margin-left: 0; /* 1 */ + margin-right: 0; /* 1 */ + margin-bottom: 30px; /* 1 */ + } + .osano-cm-cookie-disclosure__title { + font-size: 0.875rem; + font-weight: 400; + text-transform: uppercase; + } + .osano-cm-disclosure__list { + background-color: transparent; + } + .osano-cm-disclosure__list .osano-cm-description, + .osano-cm-disclosure__list .osano-cm-list__list-item { + font-size: 0.875rem; + color: var(--osano-black); + } + /** + * 1. Make font-size consistent + * 2. Add preceeding dropdown arrow + * 3. Make font color consistent + */ + .osano-cm-disclosure__toggle, + .osano-cm-disclosure__toggle:hover { + font-size: 1.125rem; /* 1 */ + position: relative; /* 2 */ + color: var(--osano-disclosure-color); /* 3 */ + text-decoration: none; + font-weight: 400; + &:before { + display: inline-block; /* 2 */ + content: ""; /* 2 */ + position: relative; /* 2 */ + width: 12px; /* 2 */ + height: 8px; /* 2 */ + margin-right: 8px; /* 2 */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjOTYzNDI4IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im0yIDEuNSA1IDYgNS02Ii8+PC9zdmc+") + center center no-repeat; /* 2 */ + } + } + .osano-cm-disclosure__toggle[aria-expanded="true"] { + &:before { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjOTYzNDI4IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im0xMiA4LjUtNS02LTUgNiIvPjwvc3ZnPg=="); + } + } + /** + * 1. Override cookie widget icon with custom SVG + */ + .osano-cm-window__widget { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiNmZmYiLz48cGF0aCBmaWxsPSIjOTYzNDI4IiBkPSJNMTcuNjA1IDE2Ljk0NWEyLjM4IDIuMzggMCAwIDAgMS43NTUtLjcyNWMuNDgtLjQ4My43Mi0xLjA3LjcyLTEuNzZhMi4zOCAyLjM4IDAgMCAwLS43MjUtMS43NTUgMi40MDQgMi40MDQgMCAwIDAtMS43Ni0uNzIgMi4zOCAyLjM4IDAgMCAwLTEuNzU1LjcyNWMtLjQ4LjQ4My0uNzIgMS4wNy0uNzIgMS43NnMuMjQyIDEuMjc1LjcyNSAxLjc1NSAxLjA3LjcyIDEuNzYuNzJabS0zLjIgOGEyLjM4IDIuMzggMCAwIDAgMS43NTUtLjcyNWMuNDgtLjQ4My43Mi0xLjA3LjcyLTEuNzZhMi4zOCAyLjM4IDAgMCAwLS43MjUtMS43NTUgMi40MDQgMi40MDQgMCAwIDAtMS43Ni0uNzIgMi4zOCAyLjM4IDAgMCAwLTEuNzU1LjcyNWMtLjQ4LjQ4My0uNzIgMS4wNy0uNzIgMS43NnMuMjQyIDEuMjc1LjcyNSAxLjc1NSAxLjA3LjcyIDEuNzYuNzJabTEwLjM5NSAxLjUyYy40NTMgMCAuODMzLS4xNTMgMS4xNC0uNDYuMzA3LS4zMDcuNDYtLjY4Ny40Ni0xLjE0IDAtLjQ1My0uMTUzLS44MzMtLjQ2LTEuMTRhMS41NDkgMS41NDkgMCAwIDAtMS4xNC0uNDZjLS40NTMgMC0uODMzLjE1My0xLjE0LjQ2LS4zMDcuMzA3LS40Ni42ODctLjQ2IDEuMTQgMCAuNDUzLjE1My44MzMuNDYgMS4xNC4zMDcuMzA3LjY4Ny40NiAxLjE0LjQ2Wm0tNC43OSA5LjZjLTIuMTk0IDAtNC4yNjMtLjQyLTYuMjEtMS4yNmExNi4yMjcgMTYuMjI3IDAgMCAxLTUuMS0zLjQ0IDE2LjIyOCAxNi4yMjggMCAwIDEtMy40NC01LjFDNC40MiAyNC4zMTggNCAyMi4yNTIgNCAyMC4wNjVjMC0yLjQ1My41Mi00Ljc0NyAxLjU2LTYuODhzMi40MzMtMy45NCA0LjE4LTUuNDJjMS43NDctMS40OCAzLjc2LTIuNTQ3IDYuMDQtMy4yIDIuMjgtLjY1MyA0LjY0Ny0uNzQgNy4xLS4yNi0uMTYgMS4yLS4wNTMgMi4zMzMuMzIgMy40LjM3MyAxLjA2Ny45NCAxLjk3MyAxLjcgMi43MmE2Ljg4IDYuODggMCAwIDAgMi43NCAxLjY0YzEuMDY3LjM0NyAyLjE4Ny40MjcgMy4zNi4yNC0uNTMzIDEuNjI3LS4yNCAzLjA4Ny44OCA0LjM4IDEuMTIgMS4yOTMgMi40OCAyLjAwNyA0LjA4IDIuMTQuMjEzIDIuMzItLjA2IDQuNTItLjgyIDYuNmExNS45OTQgMTUuOTk0IDAgMCAxLTMuMzQgNS40OGMtMS40NjcgMS41NzMtMy4yMSAyLjgyNy01LjIzMiAzLjc2LTIuMDIuOTMzLTQuMjA3IDEuNC02LjU1OSAxLjRabS0uMDEtMi40YzMuNzg3IDAgNi45MzMtMS4yNDcgOS40NC0zLjc0IDIuNTA3LTIuNDkzIDMuOTA3LTUuNTY3IDQuMi05LjIyLTEuNDQtLjUzMy0yLjYwNy0xLjMyNy0zLjUtMi4zOGE3LjIyNyA3LjIyNyAwIDAgMS0xLjY2LTMuNjJjLTIuMTYtLjI5My0zLjk4LTEuMjI3LTUuNDYtMi44LTEuNDgtMS41NzMtMi4zMjctMy40LTIuNTQtNS40OC0xLjk3My0uMDgtMy44Mi4yNC01LjU0Ljk2LTEuNzIuNzItMy4yMTMgMS43MDctNC40OCAyLjk2YTEzLjY3OCAxMy42NzggMCAwIDAtMi45OCA0LjQyIDEzLjQxIDEzLjQxIDAgMCAwLTEuMDggNS4zYzAgMy43ODcgMS4zMiA3IDMuOTYgOS42NCAyLjY0IDIuNjQgNS44NTMgMy45NiA5LjY0IDMuOTZaIi8+PC9zdmc+") + center center no-repeat; /* 1 */ + background-size: 40px; /* 1 */ + > svg { + display: none; /* 1 */ + } + } + /** + * 1. Remove cookie widget icon focus outline + */ + .osano-cm-widget:focus { + outline: none; /* 1 */ + } + /** + * 1. Override default close button colors + */ + .osano-cm-dialog__close { + color: var(--osano-close-color); /* 1 */ + stroke: var(--osano-close-color); /* 1 */ + stroke-width: 2px; + + @media screen and (min-width: 768px) { + margin: 0.8rem; + } + } + + /* Remove Targeted Advertising and Personalisation */ + + .osano-cm-disclosure--collapse { + border-bottom: 0; + padding-bottom: 0; + } + .osano-cm-disclosure { + margin: 0; + padding: 0; + } + .osano-cm-toggle { + padding-top: 1.5em; + } + & label[for="osano-cm-drawer-toggle--category_MARKETING"] { + display: none; + } + & p[id="osano-cm-drawer-toggle--category_MARKETING--description"] { + display: none; + } + & div[aria-controls="osano-cm-MARKETING_disclosures"] { + display: none; + } + & ul[id="osano-cm-MARKETING_disclosures"] { + display: none; + } + & label[for="osano-cm-dialog-toggle--category_MARKETING"] { + display: none; + } + & label[for="osano-cm-drawer-toggle--category_PERSONALIZATION"] { + display: none; + } + & p[id="osano-cm-drawer-toggle--category_PERSONALIZATION--description"] { + display: none; + } + & div[aria-controls="osano-cm-PERSONALIZATION_disclosures"] { + display: none; + } + & ul[id="osano-cm-PERSONALIZATION_disclosures"] { + display: none; + } + & label[for="osano-cm-dialog-toggle--category_PERSONALIZATION"] { + display: none; + } +} diff --git a/website/styles.css b/website/styles.css new file mode 100644 index 0000000..a1592a9 --- /dev/null +++ b/website/styles.css @@ -0,0 +1,871 @@ +/* Reset */ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Fonts */ + +@font-face { + font-family: "less_perfect_dos_vgaregular"; + src: + url("assets/fonts/lessperfectdosvga-webfont.woff2") format("woff2"), + url("assets/fonts/lessperfectdosvga-webfont.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Pixelify Sans"; + src: url("assets/fonts/pixelifysans-regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} + +/* Global */ + +* { + box-sizing: border-box; +} + +html { + font-size: 16px; + height: 100%; +} + +@media (max-width: 1200px) { + html { + font-size: 14px; + } +} + +@media (max-width: 768px) { + html { + font-size: 12px; + } +} + +body { + background: red; + font-family: "less_perfect_dos_vgaregular", monospace; + text-transform: uppercase; + color: white; + height: 100%; +} + +img { + max-width: 100%; +} + +a { + color: white; + text-underline-offset: 3px; +} + +a:hover { + text-decoration: none; +} + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Background */ + +.layer--wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; + min-height: 100%; +} + +.layer--wrapper > * { + width: 100%; +} + +.layer--base { + position: relative; + z-index: 3; +} + +.layer--bg { + position: absolute; + z-index: 1; + inset: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.layer--bg::before { + mix-blend-mode: color-dodge; +} + +.bg--main { + position: absolute; + object-fit: cover; + inset: 0; + width: 100%; + height: 100%; + max-width: none; +} + +.layer--foreground { + position: relative; + z-index: 2; + overflow: hidden; + margin-top: -120px; + max-height: 50vh; + min-height: 560px; + height: 900px; +} + +@media (max-width: 1200px) { + .layer--foreground { + margin-top: -40px; + min-height: 300px; + height: 600px; + } +} + +.layer--foreground::after, +.layer--foreground::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient( + 180deg, + rgba(255, 0, 0, 0) 40%, + rgba(255, 0, 0, 0.75) 100% + ); +} + +.bg--guy { + max-width: 1920px; + position: absolute; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + background-image: image-set( + url("assets/images/doom-guy-1-0x.png") 1x, + url("assets/images/doom-guy-1-5x.png") 2x + ); + background-size: cover; + background-repeat: no-repeat; + background-position: center bottom; +} + +@media (min-width: 1921px) { + .layer--foreground { + max-height: none; + min-height: auto; + height: auto; + padding: 15%; + } + + .bg--guy { + max-width: none; + } +} + +/* Body */ + +main { + padding: 65px 60px; + margin: 0 auto; + max-width: 1920px; +} + +@media (max-width: 1200px) { + main { + padding: 20px; + } +} + +.hydra-logo { + position: absolute; + display: block; + top: 65px; + left: 60px; + width: 53px; + z-index: 2; +} + +@media (max-width: 1600px) { + .hydra-logo { + top: 40px; + left: 45px; + width: 49px; + } +} + +.doom-logo img { + display: block; + margin: -3.5% auto -4.5%; + width: 970px; + max-width: 70vw; +} + +@media (max-width: 768px) { + .doom-logo { + padding-top: 45px; + padding-bottom: 20px; + } +} + +.card { + background: #18181a; + border: 1px solid #ff3030; + box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.25); + max-width: 535px; + text-align: center; + padding: 24px 14px; + margin: 0 auto; + font-size: 1.45rem; +} + +.card__title { + font-size: 2.5rem; + letter-spacing: -0.01em; + padding: 0 0 0.25em; + color: yellow; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +.card__description { + text-shadow: + 0 0 2px rgba(255, 255, 255, 0.5), + 0 0 12px rgba(255, 255, 255, 0.3); +} + +.card--small { + padding: 14px 20px; +} + +.card--stats { + text-transform: none; + font-size: 0.75rem; + text-align: left; +} + +.card--stats table { + width: 100%; +} + +.card--stats table tr:not(:last-child) td { + padding-bottom: 0.3rem; +} + +.card--stats table td:last-of-type { + width: 40%; + color: #fffb24; +} + +.card--console { + position: relative; + height: 150px; + overflow: hidden; +} + +.card--console::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 50%; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); +} + +.card--console table td:last-of-type { + text-align: right; +} + +.card--console table tr:not(:last-child) td { + padding-bottom: 0.5rem; +} + +.card--leaderboard { + padding-right: 10px; + max-height: 140px; + overflow: auto; +} + +.card--leaderboard table { + font-size: 0.73rem; + color: #fffb24; +} + +.card--leaderboard table td:last-of-type { + width: 80%; + color: #fff; +} + +.card--leaderboard table button { + background: none; + color: inherit; + border: none; + cursor: pointer; + font: inherit; + padding: 0; +} + +/* Play Doom Button */ + +.play-doom-button { + border: none; + cursor: pointer; + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 359px; + height: 67px; + margin: 0.625rem auto; + background: url("assets/images/play-doom-button.png"); + text-decoration: none; +} + +.play-doom-button::before { + content: ""; + z-index: -1; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 436px; + height: 228px; + background: url("assets/images/play-doom-button-bg.png"); + pointer-events: none; +} + +.play-doom-button > span { + margin-top: -0.4rem; + font-family: "Pixelify Sans", monospace; + text-transform: uppercase; + color: yellow; + font-size: 1.85rem; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +/* Modal */ + +.modal { + display: none; + flex-direction: column; + position: fixed; + z-index: 4000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(13, 13, 13, 0.5); + padding: 1.25rem 6.25rem; +} + +.modal__close-btn { + background: none; + color: inherit; + border: none; + cursor: pointer; + font: inherit; + display: inline-block; + position: absolute; + top: 2rem; + right: 2.5rem; + padding: 1rem; + font-size: 1.9rem; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +.modal__outer-container { + width: 100%; + margin: auto; +} + +.modal__container { + position: relative; + margin: auto; + width: 100%; + max-width: 1465px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} + +.modal__outer-border { + padding: 2px; + background: linear-gradient(11.57deg, #000000 5.67%, #ff2f2f 68.21%); +} + +.modal__mid-gradient { + padding: 17px; + background: linear-gradient( + 120deg, + #121212 -4.94%, + #0c0000 18.74%, + #ff1313 26.36%, + #000000 35.66%, + #000000 60.61%, + #ff1d1d 73.72%, + #000000 78.79% + ); +} + +.modal__inner-border { + padding: 2px; + background: linear-gradient(11.57deg, #000000 5.67%, #ff2f2f 68.21%); +} + +.modal__content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 12% 20%; + position: relative; + background-color: #1d1515; + box-shadow: 0px 2.41px 6.03px 3.62px rgba(255, 74, 74, 0.25) inset; + color: yellow; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); + font-family: "Pixelify Sans", monospace; + text-transform: none; + line-height: 1.15; + text-align: center; + font-size: 3.5rem; +} + +.modal__content::before { + content: ""; + position: absolute; + inset: 0; + background-image: url("assets/images/noise.png"); + background-blend-mode: color-dodge; + background-size: cover; + background-position: center; + opacity: 0.2; +} + +.modal__top-left-bar { + position: absolute; + top: -2px; + left: 10px; + width: 2px; + height: 26px; + background-color: #ff2f2f; + transform: rotate(-45deg); +} + +.modal__top-right-bar { + position: absolute; + top: -2px; + right: 10px; + width: 2px; + height: 26px; + background-color: #ff3030; + transform: rotate(45deg); +} + +.modal__bottom-left-bar { + position: absolute; + bottom: -2px; + left: 10px; + width: 2px; + height: 26px; + background-color: #020202; + transform: rotate(45deg); +} + +.modal__bottom-right-bar { + position: absolute; + bottom: 0; + right: 10px; + width: 2px; + height: 23px; + background-color: #040404; + transform: rotate(-45deg); + box-shadow: 0px 2.41px 6.03px 3.62px #ff4a4a40 inset; +} + +.modal--game { + padding: 1.25rem; +} + +@media (max-width: 1900px) { + .modal__container { + max-width: 1240px; + } +} + +@media (max-width: 1600px) { + .modal__content { + padding: 10% 15%; + font-size: 2.5rem; + } +} + +@media (max-width: 768px) { + .modal { + padding-inline: 5rem; + } + + .modal__content { + min-height: 60vh; + } + + .hydra-logo { + position: relative; + top: auto; + left: 0; + right: 0; + margin: 46px auto auto; + } +} + +/* Game View Wrapper */ + +.game-view-wrapper { + width: 100%; + max-width: 1800px; + margin: 2.4rem auto 0; +} + +/* Header */ + +.header { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.header__nav ul { + display: flex; + gap: 4.25rem; +} + +@media (max-width: 1024px) { + .header__nav ul { + gap: 1rem; + } +} + +.header__nav button { + border: none; + cursor: pointer; + font-family: "Pixelify Sans", monospace; + text-transform: uppercase; + color: #fff; + background-color: transparent; + background: linear-gradient(180deg, #ffffff 0%, #999999 100%); + background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1rem; +} + +.header__nav button::after { + content: ""; + display: block; + width: 103px; + height: 1px; + margin: 0.3rem auto 0; + background-color: #ff3030; +} + +.header__wallet { + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: -0.7rem; + right: 10px; + width: 177px; + height: 61px; + padding: 0; + background: url("assets/images/connect-wallet-button.png"); +} + +.header__wallet > span { + margin-top: -0.5rem; + font-family: "Pixelify Sans", monospace; + text-transform: uppercase; + color: yellow; + font-size: 0.875rem; + text-shadow: + 0 0 10px #db1102, + 0 0 20px #f2581f, + 0 0 50px #f2581f, + 0 0 50px rgba(255, 50, 50, 0.25); +} + +@media (max-width: 1024px) { + .header__wallet { + width: 150px; + height: 52px; + background-size: cover; + } +} + +/* Three columns */ + +.three-columns { + display: flex; + gap: 1.25rem 4.7rem; + padding: 4rem 1rem; + align-items: center; +} + +.three-columns > div { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.three-columns > div:nth-child(1), +.three-columns > div:nth-child(3) { + width: 289px; +} + +.three-columns > div:nth-child(2) { + flex: 1; +} + +/* Block */ + +.block__heading { + margin-bottom: 0.625rem; + color: #fff; + background-color: transparent; + background: linear-gradient(180deg, #ffffff 0%, #999999 100%); + background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1rem; +} + +/* Game Slot */ + +.game-slot { + aspect-ratio: 1028/805; + background: linear-gradient(11.57deg, #000000 5.67%, #ff2f2f 68.21%); + padding: 5px; + box-shadow: 0px 4px 10px 6px rgba(0, 0, 0, 0.25); +} + +.game-slot__container { + background-color: #000; + width: 100%; + height: 100%; +} + +/* Speedometer */ + +.speedometer { + width: 30px; + height: 15px; + border-top-left-radius: 360px; + border-top-right-radius: 360px; + border: 145px solid transparent; + border-bottom: 0; + position: relative; +} + +.speedometer::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 289px; + height: 153px; + background: url("assets/images/speedometer.png"); + background-size: cover; + transform: translate(-50%, -94%); +} + +.speedometer__tick { + position: absolute; + bottom: -10px; + left: -115px; + width: 113px; + height: 19px; + transform-origin: right center; + transform: rotate(0deg); /* updated via js */ +} + +.speedometer__tick::before { + content: ""; + position: absolute; + top: -2px; + left: 23px; + width: 113px; + height: 19px; + background: url("assets/images/speedometer-tick.png"); + background-size: cover; +} + +.speedometer-labels { + display: flex; + flex-direction: column; + gap: 0.3rem; + max-width: 190px; + margin: 2.5rem auto 0; + font-size: 0.9rem; + text-transform: none; +} + +.speedometer-labels .red::before { + content: ""; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 0.5rem; + background-color: #b9201b; +} + +.speedometer-labels .yellow::before { + content: ""; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 0.5rem; + background-color: #ccac25; +}