refactor: organize files in folders

2023-12-24 15:51:55 +08:00
parent 55b04e429a
commit 4d4d34392c
4 changed files with 152 additions and 152 deletions
--- a/quote_generator/css/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%;
 }
--- a/quote_generator/js/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();
+  }
+}
--- a/quote_generator/js/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 = `<b style='font-size:28px;'>"</b>` + quote + `<b style='font-size:28px;'>"</b>` ;
-  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 = `<b style='font-size:28px;'>"</b>` + quote + `<b style='font-size:28px;'>"</b>` ;
+  authorElement.innerHTML = "- " + author;
+}
+
+function getQuote() {
+  Update();
+}
--- a/quote_generator/js/script.js
+++ b/quote_generator/js/script.js