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