From 59c43cb228623c5632afb3b2b88524048096e50a Mon Sep 17 00:00:00 2001 From: Qubasa Date: Thu, 23 May 2024 15:48:33 +0200 Subject: [PATCH] Add js animation --- website/assets/css/extneral.css | 89 +++++++++++++++++++++++ website/assets/css/main.css | 121 ++++++-------------------------- website/assets/js/main.js | 42 +++++++++-- website/index.html | 4 +- 4 files changed, 147 insertions(+), 109 deletions(-) create mode 100644 website/assets/css/extneral.css diff --git a/website/assets/css/extneral.css b/website/assets/css/extneral.css new file mode 100644 index 0000000..74892ea --- /dev/null +++ b/website/assets/css/extneral.css @@ -0,0 +1,89 @@ + +/* source-sans-3-300 - latin */ +/* source-sans-3-300 - latin */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 300; + src: url('../fonts/source-sans-3-v15-latin-300.woff2') format('woff2'); + /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* source-sans-3-300italic - latin */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 300; + src: url('../fonts/source-sans-3-v15-latin-300italic.woff2') format('woff2'); + /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* source-sans-3-regular - latin */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: url('../fonts/source-sans-3-v15-latin-regular.woff2') format('woff2'); + /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* source-sans-3-italic - latin */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url('../fonts/source-sans-3-v15-latin-italic.woff2') format('woff2'); + /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* source-sans-3-600 - latin */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 600; + src: url('../fonts/source-sans-3-v15-latin-600.woff2') format('woff2'); + /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* source-sans-3-600italic - latin */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 600; + src: url('../fonts/source-sans-3-v15-latin-600italic.woff2') format('woff2'); + /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* source-sans-3-700 - latin */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 700; + src: url('../fonts/source-sans-3-v15-latin-700.woff2') format('woff2'); + /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* source-sans-3-700italic - latin */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 700; + src: url('../fonts/source-sans-3-v15-latin-700italic.woff2') format('woff2'); + /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} \ No newline at end of file diff --git a/website/assets/css/main.css b/website/assets/css/main.css index 5a6f96c..6066e0a 100644 --- a/website/assets/css/main.css +++ b/website/assets/css/main.css @@ -1,114 +1,31 @@ +@import url(extneral.css); +@import url(matrix.css); -/* source-sans-3-300 - latin */ -/* source-sans-3-300 - latin */ -@font-face { - font-display: swap; - /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 300; - src: url('../fonts/source-sans-3-v15-latin-300.woff2') format('woff2'); - /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ + +span[data-value="Darknet"] { + color: #0f0; } -/* source-sans-3-300italic - latin */ -@font-face { - font-display: swap; - /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Source Sans Pro'; - font-style: italic; - font-weight: 300; - src: url('../fonts/source-sans-3-v15-latin-300italic.woff2') format('woff2'); - /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ -} - -/* source-sans-3-regular - latin */ -@font-face { - font-display: swap; - /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - src: url('../fonts/source-sans-3-v15-latin-regular.woff2') format('woff2'); - /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ -} - -/* source-sans-3-italic - latin */ -@font-face { - font-display: swap; - /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Source Sans Pro'; - font-style: italic; - font-weight: 400; - src: url('../fonts/source-sans-3-v15-latin-italic.woff2') format('woff2'); - /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ -} - -/* source-sans-3-600 - latin */ -@font-face { - font-display: swap; - /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - src: url('../fonts/source-sans-3-v15-latin-600.woff2') format('woff2'); - /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ -} - -/* source-sans-3-600italic - latin */ -@font-face { - font-display: swap; - /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Source Sans Pro'; - font-style: italic; - font-weight: 600; - src: url('../fonts/source-sans-3-v15-latin-600italic.woff2') format('woff2'); - /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ -} - -/* source-sans-3-700 - latin */ -@font-face { - font-display: swap; - /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - src: url('../fonts/source-sans-3-v15-latin-700.woff2') format('woff2'); - /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ -} - -/* source-sans-3-700italic - latin */ -@font-face { - font-display: swap; - /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Source Sans Pro'; - font-style: italic; - font-weight: 700; - src: url('../fonts/source-sans-3-v15-latin-700italic.woff2') format('woff2'); - /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ -} - - .top-header { - background-color: #2C2C2C; - padding: 20px 0; - width: 100%; - position: fixed; - top: 0; - left: 0; - z-index: 1000; + background-color: #2C2C2C; + padding: 20px 0; + width: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 1000; } .header-nav-links a { - color: #FFFFFF; - text-decoration: none; - margin: 0 15px; - font-size: 16px; + color: #FFFFFF; + text-decoration: none; + margin: 0 15px; + font-size: 16px; } .header-nav-links a:hover { - text-decoration: underline; -} + text-decoration: underline; +} @@ -3177,10 +3094,12 @@ input[type="button"].small, #main footer.major { background: #ffffff; } + #clan-logo { width: 14em; height: 14em; } + /* Wide */ @media screen and (max-width: 1680px) { diff --git a/website/assets/js/main.js b/website/assets/js/main.js index 1c5c92f..8c16bf3 100644 --- a/website/assets/js/main.js +++ b/website/assets/js/main.js @@ -1,6 +1,38 @@ -/* - Directive by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ + +const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; + +let interval = null; + +function hacker_effect(target) { + let iteration = 0; + clearInterval(interval); + + interval = setInterval(() => { + target.innerText = target.innerText + .split("") + .map((letter, index) => { + if (index < iteration) { + return target.dataset.value[index]; + } + + return letters[Math.floor(Math.random() * 26)] + }) + .join(""); + + if (iteration >= target.dataset.value.length) { + clearInterval(interval); + } + + iteration += 1 / 3; + }, 30); +} + +document.querySelector("span").onmouseover = event => hacker_effect(event.target); + window.onload = function () { + var delay = 250; + setTimeout(function () { + let target = document.querySelector("span"); + hacker_effect(target); + }, delay); + }; \ No newline at end of file diff --git a/website/index.html b/website/index.html index 222e493..3e573c1 100644 --- a/website/index.html +++ b/website/index.html @@ -31,9 +31,7 @@