From 4d4d34392c338b83230f79ddc8e0df181a7aa6b3 Mon Sep 17 00:00:00 2001 From: lifeadventurer Date: Sun, 24 Dec 2023 15:51:55 +0800 Subject: [PATCH] refactor: organize files in folders --- quote_generator/{ => css}/styles.css | 162 +++++++++++++-------------- quote_generator/{ => js}/matrix.js | 94 ++++++++-------- quote_generator/{ => js}/quote.js | 48 ++++---- quote_generator/{ => js}/script.js | 0 4 files changed, 152 insertions(+), 152 deletions(-) rename quote_generator/{ => css}/styles.css (94%) rename quote_generator/{ => js}/matrix.js (97%) rename quote_generator/{ => js}/quote.js (96%) rename quote_generator/{ => js}/script.js (100%) diff --git a/quote_generator/styles.css b/quote_generator/css/styles.css similarity index 94% rename from quote_generator/styles.css rename to quote_generator/css/styles.css index 8f664c7..39c1b62 100644 --- a/quote_generator/styles.css +++ b/quote_generator/css/styles.css @@ -1,82 +1,82 @@ -:root { - --button-color: #9DC4FF; - --button-hover-color: #5ca8f3; - --bg-color: #ffffffd7; - --text-color: #000000; -} - -.dark-mode { - --button-color: #66a1fa; - --button-hover-color: #8ec1f4; - --bg-color: #1b1919d7; - --dark-mode-icon-color: #ffffff; - --text-color: #ffffff; -} - -html { - background: #282828; - height: 100%; - text-align: center; - overflow: hidden; - font-family: Georgia, 'Times New Roman', Times, serif; - font-size: 24px; -} - -body { - margin: 0; - padding: 0; - height: 100%; - display: flex; - flex: 1; - align-items: center; - justify-content: center; -} - -#Matrix { - z-index: 0; -} - -.container { - position: absolute; - z-index: 1; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 80%; - max-width: 800px; - margin: 0 auto; - text-align: center; - padding: 70px; - color: var(--text-color); - background-color: var(--bg-color); - border-radius: 30px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); -} - -.quote-container { - margin: 10px; -} - -button { - background-color: var(--button-color); - color: var(--bg-color); - font-size: 25px; - border: none; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); - padding: 17px 20px; - border-radius: 30px; - cursor: pointer; - transition: all 0.3s ease-in-out; -} - -button:hover { - background-color: var(--button-hover-color); -} - -#dark-mode-icon { - margin-top: 15px; - font-size: 2.4rem; - color: var(--dark-mode-icon-color); - cursor: pointer; - opacity: 85%; +:root { + --button-color: #9DC4FF; + --button-hover-color: #5ca8f3; + --bg-color: #ffffffd7; + --text-color: #000000; +} + +.dark-mode { + --button-color: #66a1fa; + --button-hover-color: #8ec1f4; + --bg-color: #1b1919d7; + --dark-mode-icon-color: #ffffff; + --text-color: #ffffff; +} + +html { + background: #282828; + height: 100%; + text-align: center; + overflow: hidden; + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 24px; +} + +body { + margin: 0; + padding: 0; + height: 100%; + display: flex; + flex: 1; + align-items: center; + justify-content: center; +} + +#Matrix { + z-index: 0; +} + +.container { + position: absolute; + z-index: 1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + max-width: 800px; + margin: 0 auto; + text-align: center; + padding: 70px; + color: var(--text-color); + background-color: var(--bg-color); + border-radius: 30px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); +} + +.quote-container { + margin: 10px; +} + +button { + background-color: var(--button-color); + color: var(--bg-color); + font-size: 25px; + border: none; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); + padding: 17px 20px; + border-radius: 30px; + cursor: pointer; + transition: all 0.3s ease-in-out; +} + +button:hover { + background-color: var(--button-hover-color); +} + +#dark-mode-icon { + margin-top: 15px; + font-size: 2.4rem; + color: var(--dark-mode-icon-color); + cursor: pointer; + opacity: 85%; } \ No newline at end of file diff --git a/quote_generator/matrix.js b/quote_generator/js/matrix.js similarity index 97% rename from quote_generator/matrix.js rename to quote_generator/js/matrix.js index 5e656a5..f7a761e 100644 --- a/quote_generator/matrix.js +++ b/quote_generator/js/matrix.js @@ -1,47 +1,47 @@ -const canvas = document.getElementById("Matrix") -const context = canvas.getContext("2d") - -canvas.height = window.innerHeight + 100; -canvas.width = window.innerWidth + 5; - -const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}\」=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω×≦≧≠∞≒≡～∩∠∪∟⊿∫∮∵∴＄￥〒￠￡℃€℉╩◢ⅩⅨⅧⅦⅥⅤⅣⅢⅡⅠあいうえおがぎぐげござじずぜぞだぢつでづどにぬのばひぴぶへぺぼみゃょァゐゎè"; - -const fontSize = 16; -const columns = canvas.width / fontSize; - -const charArr = []; -for(let i = 0; i < columns; ++i) { - charArr[i] = 1; -} - -let frame = 0; -let str; - -context.fillStyle = "rgba(0, 0, 0, 1)"; -context.fillRect(0, 0, canvas.width, canvas.height); - -function Update() { - context.fillStyle = "rgba(0, 0, 0, 0.05)"; - context.fillRect(0, 0, canvas.width, canvas.height); - if(frame == 0){ - let a = parseInt(Math.random() * 255); - str = `rgba(${a}, ${Math.abs(a - 127)}, ${Math.abs(a - 255)}, 0.9)`; - } - context.fillStyle = str; - context.font = fontSize + "px monospace"; - - for(let i = 0; i < columns; ++i){ - const text = chars[Math.floor(Math.random() * chars.length)]; - context.fillText(text, i * fontSize, charArr[i] * fontSize); - if(charArr[i] * fontSize > canvas.height && Math.random() > 0.90){ - charArr[i] = 0; - } - charArr[i]++; - } - frame++; - if(frame <= 40 * (Math.floor(Math.random() * 10) + 3)) requestAnimationFrame(Update); // 40 frames a cycle - else{ - frame = 0; - Appear(); - } -} +const canvas = document.getElementById("Matrix") +const context = canvas.getContext("2d") + +canvas.height = window.innerHeight + 100; +canvas.width = window.innerWidth + 5; + +const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}\」=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω×≦≧≠∞≒≡～∩∠∪∟⊿∫∮∵∴＄￥〒￠￡℃€℉╩◢ⅩⅨⅧⅦⅥⅤⅣⅢⅡⅠあいうえおがぎぐげござじずぜぞだぢつでづどにぬのばひぴぶへぺぼみゃょァゐゎè"; + +const fontSize = 16; +const columns = canvas.width / fontSize; + +const charArr = []; +for(let i = 0; i < columns; ++i) { + charArr[i] = 1; +} + +let frame = 0; +let str; + +context.fillStyle = "rgba(0, 0, 0, 1)"; +context.fillRect(0, 0, canvas.width, canvas.height); + +function Update() { + context.fillStyle = "rgba(0, 0, 0, 0.05)"; + context.fillRect(0, 0, canvas.width, canvas.height); + if(frame == 0){ + let a = parseInt(Math.random() * 255); + str = `rgba(${a}, ${Math.abs(a - 127)}, ${Math.abs(a - 255)}, 0.9)`; + } + context.fillStyle = str; + context.font = fontSize + "px monospace"; + + for(let i = 0; i < columns; ++i){ + const text = chars[Math.floor(Math.random() * chars.length)]; + context.fillText(text, i * fontSize, charArr[i] * fontSize); + if(charArr[i] * fontSize > canvas.height && Math.random() > 0.90){ + charArr[i] = 0; + } + charArr[i]++; + } + frame++; + if(frame <= 40 * (Math.floor(Math.random() * 10) + 3)) requestAnimationFrame(Update); // 40 frames a cycle + else{ + frame = 0; + Appear(); + } +} diff --git a/quote_generator/quote.js b/quote_generator/js/quote.js similarity index 96% rename from quote_generator/quote.js rename to quote_generator/js/quote.js index cbc07bf..120982e 100644 --- a/quote_generator/quote.js +++ b/quote_generator/js/quote.js @@ -1,24 +1,24 @@ -const quoteElement = document.getElementById("quote"); -const authorElement = document.getElementById("author"); -const buttonElement = document.querySelector("button"); - -let quotes = []; - -fetch("quotes.json") -.then(response => response.json()) -.then(data => { - quotes = data.quotes; -}); - - -function Appear() { - console.log(quotes); - const index = Math.floor(Math.random() * quotes.length); - const {quote, author} = quotes[index]; - quoteElement.innerHTML = `"` + quote + `"` ; - authorElement.innerHTML = "- " + author; -} - -function getQuote() { - Update(); -} +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const buttonElement = document.querySelector("button"); + +let quotes = []; + +fetch("quotes.json") +.then(response => response.json()) +.then(data => { + quotes = data.quotes; +}); + + +function Appear() { + console.log(quotes); + const index = Math.floor(Math.random() * quotes.length); + const {quote, author} = quotes[index]; + quoteElement.innerHTML = `"` + quote + `"` ; + authorElement.innerHTML = "- " + author; +} + +function getQuote() { + Update(); +} diff --git a/quote_generator/script.js b/quote_generator/js/script.js similarity index 100% rename from quote_generator/script.js rename to quote_generator/js/script.js