diff --git a/.gitignore b/.gitignore index 2c4c3af..8d7ea34 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ -/node_modules/ - -/package-lock.json - +/node_modules/ + +/package-lock.json + /package.json \ No newline at end of file diff --git a/LICENSE b/LICENSE index be359ff..6d4493a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,21 +1,21 @@ -MIT License - -Copyright (c) 2022 Anthony Huang - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. +MIT License + +Copyright (c) 2022 Anthony Huang + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 73286cc..086eb85 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ -# discord-formatter -formatting! Enter any piece of text, choose an option, and get colored text, a timestamp, anything! +# discord-formatter +formatting! Enter any piece of text, choose an option, and get colored text, a timestamp, anything! diff --git a/index.html b/index.html index 7645017..13a9469 100644 --- a/index.html +++ b/index.html @@ -1,111 +1,111 @@ - - - - - - Discord Message Formatter - - - - - - - - - - - - - - - - - - - - - - -
-
-

Discord Formatter!

-
-
- - -

-
- -

-

Options

-
-
- - - - - - - - - -
- -
-
- -
- - - - - - + + + + + + Discord Message Formatter + + + + + + + + + + + + + + + + + + + + + + +
+
+

Discord Formatter!

+
+
+ + +

+
+ +

+

Options

+
+
+ + + + + + + + + +
+ +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/src/scripts/color.js b/src/scripts/color.js index 516ace4..fccc5de 100644 --- a/src/scripts/color.js +++ b/src/scripts/color.js @@ -1,135 +1,135 @@ -const redBtn = document.getElementById("red"); -const orangeBtn = document.getElementById("orange"); -const yellowBtn = document.getElementById("yellow"); -const greenBtn = document.getElementById("green"); -const turqBtn = document.getElementById("turq"); -const blueBtn = document.getElementById("blue"); -const grayBtn = document.getElementById("gray"); -let redOn, orangeOn, yellowOn, greenOn, turqOn, blueOn, grayOn; -redOn = orangeOn = yellowOn = greenOn = turqOn = blueOn = grayOn = false; -function redFn(text) { - if (redOn === false) { - text = "```diff\n- " + text.concat("\n```"); - redBtn.style.color = 'gray'; - textArea.style.color = '#D5322F'; - textArea.value = text; - orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; - redOn = true; - } - else if (redOn === true) { - text = text.replace(/```diff\n- |\n```/g, ""); - redBtn.style.color = '#D5322F'; - textArea.style.color = 'white'; - textArea.value = text; - orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; - redOn = false; - } -} -function orangeFn(text) { - if (orangeOn === false) { - text = "```css\n[" + text.concat("]\n```"); - orangeBtn.style.color = 'gray'; - textArea.style.color = '#B7471B'; - textArea.value = text; - redBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; - orangeOn = true; - } - else if (orangeOn === true) { - text = text.replace(/```css\n\[|]\n```/g, ""); - orangeBtn.style.color = '#B7471B'; - textArea.style.color = 'white'; - textArea.value = text; - redBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; - orangeOn = false; - } -} -function yellowFn(text) { - if (yellowOn === false) { - text = "```fix\n" + text.concat("\n```"); - yellowBtn.style.color = 'gray'; - textArea.style.color = '#B18602'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; - yellowOn = true; - } - else if (yellowOn === true) { - text = text.replace(/```fix\n|\n```/g, ""); - yellowBtn.style.color = '#B18602'; - textArea.style.color = 'white'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; - yellowOn = false; - } -} -function greenFn(text) { - if (greenOn === false) { - text = "```diff\n+ " + text.concat("\n```"); - greenBtn.style.color = 'gray'; - textArea.style.color = '#839701'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; - greenOn = true; - } - else if (greenOn === true) { - text = text.replace(/```diff\n\+ |\n```/g, ""); - greenBtn.style.color = '#839701'; - textArea.style.color = 'white'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; - greenOn = false; - } -} -function turqFn(text) { - if (turqOn === false) { - text = "```bash\n\"" + text.concat("\"\n```"); - turqBtn.style.color = 'gray'; - textArea.style.color = '#2B918A'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; - turqOn = true; - } - else if (turqOn === true) { - text = text.replace(/```bash\n\"|\"\n```/g, ""); - turqBtn.style.color = '#2B918A'; - textArea.style.color = 'white'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; - turqOn = false; - } -} -function blueFn(text) { - if (blueOn === false) { - text = "```ini\n[" + text.concat("]\n```"); - blueBtn.style.color = 'gray'; - textArea.style.color = '#287AB5'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = grayBtn.style.display = "none"; - blueOn = true; - } - else if (blueOn === true) { - text = text.replace(/```ini\n\[|]\n```/g, ""); - blueBtn.style.color = '#287AB5'; - textArea.style.color = 'white'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = grayBtn.style.display = "inline-block"; - blueOn = false; - } -} -function grayFn(text) { - if (grayOn === false) { - text = "```bf\n" + text.concat("\n```"); - grayBtn.style.color = 'gray'; - textArea.style.color = '#576D74'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = "none"; - grayOn = true; - } - else if (grayOn === true) { - text = text.replace(/```bf\n|\n```/g, ""); - grayBtn.style.color = '#576D74'; - textArea.style.color = 'white'; - textArea.value = text; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = "inline-block"; - grayOn = false; - } -} +const redBtn = document.getElementById("red"); +const orangeBtn = document.getElementById("orange"); +const yellowBtn = document.getElementById("yellow"); +const greenBtn = document.getElementById("green"); +const turqBtn = document.getElementById("turq"); +const blueBtn = document.getElementById("blue"); +const grayBtn = document.getElementById("gray"); +let redOn, orangeOn, yellowOn, greenOn, turqOn, blueOn, grayOn; +redOn = orangeOn = yellowOn = greenOn = turqOn = blueOn = grayOn = false; +function redFn(text) { + if (redOn === false) { + text = "```diff\n- " + text.concat("\n```"); + redBtn.style.color = 'gray'; + textArea.style.color = '#D5322F'; + textArea.value = text; + orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; + redOn = true; + } + else if (redOn === true) { + text = text.replace(/```diff\n- |\n```/g, ""); + redBtn.style.color = '#D5322F'; + textArea.style.color = 'white'; + textArea.value = text; + orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; + redOn = false; + } +} +function orangeFn(text) { + if (orangeOn === false) { + text = "```css\n[" + text.concat("]\n```"); + orangeBtn.style.color = 'gray'; + textArea.style.color = '#B7471B'; + textArea.value = text; + redBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; + orangeOn = true; + } + else if (orangeOn === true) { + text = text.replace(/```css\n\[|]\n```/g, ""); + orangeBtn.style.color = '#B7471B'; + textArea.style.color = 'white'; + textArea.value = text; + redBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; + orangeOn = false; + } +} +function yellowFn(text) { + if (yellowOn === false) { + text = "```fix\n" + text.concat("\n```"); + yellowBtn.style.color = 'gray'; + textArea.style.color = '#B18602'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; + yellowOn = true; + } + else if (yellowOn === true) { + text = text.replace(/```fix\n|\n```/g, ""); + yellowBtn.style.color = '#B18602'; + textArea.style.color = 'white'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; + yellowOn = false; + } +} +function greenFn(text) { + if (greenOn === false) { + text = "```diff\n+ " + text.concat("\n```"); + greenBtn.style.color = 'gray'; + textArea.style.color = '#839701'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; + greenOn = true; + } + else if (greenOn === true) { + text = text.replace(/```diff\n\+ |\n```/g, ""); + greenBtn.style.color = '#839701'; + textArea.style.color = 'white'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; + greenOn = false; + } +} +function turqFn(text) { + if (turqOn === false) { + text = "```bash\n\"" + text.concat("\"\n```"); + turqBtn.style.color = 'gray'; + textArea.style.color = '#2B918A'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none"; + turqOn = true; + } + else if (turqOn === true) { + text = text.replace(/```bash\n\"|\"\n```/g, ""); + turqBtn.style.color = '#2B918A'; + textArea.style.color = 'white'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; + turqOn = false; + } +} +function blueFn(text) { + if (blueOn === false) { + text = "```ini\n[" + text.concat("]\n```"); + blueBtn.style.color = 'gray'; + textArea.style.color = '#287AB5'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = grayBtn.style.display = "none"; + blueOn = true; + } + else if (blueOn === true) { + text = text.replace(/```ini\n\[|]\n```/g, ""); + blueBtn.style.color = '#287AB5'; + textArea.style.color = 'white'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = grayBtn.style.display = "inline-block"; + blueOn = false; + } +} +function grayFn(text) { + if (grayOn === false) { + text = "```bf\n" + text.concat("\n```"); + grayBtn.style.color = 'gray'; + textArea.style.color = '#576D74'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = "none"; + grayOn = true; + } + else if (grayOn === true) { + text = text.replace(/```bf\n|\n```/g, ""); + grayBtn.style.color = '#576D74'; + textArea.style.color = 'white'; + textArea.value = text; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = "inline-block"; + grayOn = false; + } +} diff --git a/src/scripts/color.ts b/src/scripts/color.ts index 6890f25..9b887f1 100644 --- a/src/scripts/color.ts +++ b/src/scripts/color.ts @@ -1,130 +1,130 @@ -const redBtn = (document.getElementById("red") as HTMLInputElement) -const orangeBtn = (document.getElementById("orange") as HTMLInputElement) -const yellowBtn = (document.getElementById("yellow") as HTMLInputElement) -const greenBtn = (document.getElementById("green") as HTMLInputElement) -const turqBtn = (document.getElementById("turq") as HTMLInputElement) -const blueBtn = (document.getElementById("blue") as HTMLInputElement) -const grayBtn = (document.getElementById("gray") as HTMLInputElement) - -let redOn: boolean, orangeOn: boolean, yellowOn: boolean, greenOn: boolean, turqOn: boolean, blueOn: boolean, grayOn: boolean; -redOn = orangeOn = yellowOn = greenOn = turqOn = blueOn = grayOn = false; - -function redFn(text: string): void { - if (redOn === false) { - text = "```diff\n- " + text.concat("\n```") - redBtn.style.color = 'gray'; - textArea.style.color = '#D5322F'; - textArea.value = text - orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" - redOn = true - } else if(redOn === true) { - text = text.replace(/```diff\n- |\n```/g, "") - redBtn.style.color = '#D5322F'; - textArea.style.color = 'white'; - textArea.value = text - orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" - redOn = false - } -} -function orangeFn(text: string): void { - if (orangeOn === false) { - text = "```css\n[" + text.concat("]\n```") - orangeBtn.style.color = 'gray'; - textArea.style.color = '#B7471B'; - textArea.value = text - redBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" - orangeOn = true - } else if(orangeOn === true) { - text = text.replace(/```css\n\[|]\n```/g, "") - orangeBtn.style.color = '#B7471B'; - textArea.style.color = 'white'; - textArea.value = text - redBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" - orangeOn = false - } -} -function yellowFn(text: string): void { - if (yellowOn === false) { - text = "```fix\n" + text.concat("\n```") - yellowBtn.style.color = 'gray'; - textArea.style.color = '#B18602'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" - yellowOn = true - } else if(yellowOn === true) { - text = text.replace(/```fix\n|\n```/g, "") - yellowBtn.style.color = '#B18602'; - textArea.style.color = 'white'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" - yellowOn = false - } -} -function greenFn(text: string): void { - if (greenOn === false) { - text = "```diff\n+ " + text.concat("\n```") - greenBtn.style.color = 'gray'; - textArea.style.color = '#839701'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" - greenOn = true - } else if(greenOn === true) { - text = text.replace(/```diff\n\+ |\n```/g, "") - greenBtn.style.color = '#839701'; - textArea.style.color = 'white'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" - greenOn = false - } -} -function turqFn(text: string): void { - if (turqOn === false) { - text = "```bash\n\"" + text.concat("\"\n```") - turqBtn.style.color = 'gray'; - textArea.style.color = '#2B918A'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" - turqOn = true - } else if(turqOn === true) { - text = text.replace(/```bash\n\"|\"\n```/g, "") - turqBtn.style.color = '#2B918A'; - textArea.style.color = 'white'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" - turqOn = false - } -} -function blueFn(text: string): void { - if (blueOn === false) { - text = "```ini\n[" + text.concat("]\n```") - blueBtn.style.color = 'gray'; - textArea.style.color = '#287AB5'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = grayBtn.style.display = "none" - blueOn = true - } else if(blueOn === true) { - text = text.replace(/```ini\n\[|]\n```/g, "") - blueBtn.style.color = '#287AB5'; - textArea.style.color = 'white'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = grayBtn.style.display = "inline-block" - blueOn = false - } -} -function grayFn(text: string): void { - if (grayOn === false) { - text = "```bf\n" + text.concat("\n```") - grayBtn.style.color = 'gray'; - textArea.style.color = '#576D74'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = "none" - grayOn = true - } else if(grayOn === true) { - text = text.replace(/```bf\n|\n```/g, "") - grayBtn.style.color = '#576D74'; - textArea.style.color = 'white'; - textArea.value = text - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = "inline-block" - grayOn = false - } +const redBtn = (document.getElementById("red") as HTMLInputElement) +const orangeBtn = (document.getElementById("orange") as HTMLInputElement) +const yellowBtn = (document.getElementById("yellow") as HTMLInputElement) +const greenBtn = (document.getElementById("green") as HTMLInputElement) +const turqBtn = (document.getElementById("turq") as HTMLInputElement) +const blueBtn = (document.getElementById("blue") as HTMLInputElement) +const grayBtn = (document.getElementById("gray") as HTMLInputElement) + +let redOn: boolean, orangeOn: boolean, yellowOn: boolean, greenOn: boolean, turqOn: boolean, blueOn: boolean, grayOn: boolean; +redOn = orangeOn = yellowOn = greenOn = turqOn = blueOn = grayOn = false; + +function redFn(text: string): void { + if (redOn === false) { + text = "```diff\n- " + text.concat("\n```") + redBtn.style.color = 'gray'; + textArea.style.color = '#D5322F'; + textArea.value = text + orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" + redOn = true + } else if(redOn === true) { + text = text.replace(/```diff\n- |\n```/g, "") + redBtn.style.color = '#D5322F'; + textArea.style.color = 'white'; + textArea.value = text + orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" + redOn = false + } +} +function orangeFn(text: string): void { + if (orangeOn === false) { + text = "```css\n[" + text.concat("]\n```") + orangeBtn.style.color = 'gray'; + textArea.style.color = '#B7471B'; + textArea.value = text + redBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" + orangeOn = true + } else if(orangeOn === true) { + text = text.replace(/```css\n\[|]\n```/g, "") + orangeBtn.style.color = '#B7471B'; + textArea.style.color = 'white'; + textArea.value = text + redBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" + orangeOn = false + } +} +function yellowFn(text: string): void { + if (yellowOn === false) { + text = "```fix\n" + text.concat("\n```") + yellowBtn.style.color = 'gray'; + textArea.style.color = '#B18602'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" + yellowOn = true + } else if(yellowOn === true) { + text = text.replace(/```fix\n|\n```/g, "") + yellowBtn.style.color = '#B18602'; + textArea.style.color = 'white'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" + yellowOn = false + } +} +function greenFn(text: string): void { + if (greenOn === false) { + text = "```diff\n+ " + text.concat("\n```") + greenBtn.style.color = 'gray'; + textArea.style.color = '#839701'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" + greenOn = true + } else if(greenOn === true) { + text = text.replace(/```diff\n\+ |\n```/g, "") + greenBtn.style.color = '#839701'; + textArea.style.color = 'white'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" + greenOn = false + } +} +function turqFn(text: string): void { + if (turqOn === false) { + text = "```bash\n\"" + text.concat("\"\n```") + turqBtn.style.color = 'gray'; + textArea.style.color = '#2B918A'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = blueBtn.style.display = grayBtn.style.display = "none" + turqOn = true + } else if(turqOn === true) { + text = text.replace(/```bash\n\"|\"\n```/g, "") + turqBtn.style.color = '#2B918A'; + textArea.style.color = 'white'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" + turqOn = false + } +} +function blueFn(text: string): void { + if (blueOn === false) { + text = "```ini\n[" + text.concat("]\n```") + blueBtn.style.color = 'gray'; + textArea.style.color = '#287AB5'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = grayBtn.style.display = "none" + blueOn = true + } else if(blueOn === true) { + text = text.replace(/```ini\n\[|]\n```/g, "") + blueBtn.style.color = '#287AB5'; + textArea.style.color = 'white'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = grayBtn.style.display = "inline-block" + blueOn = false + } +} +function grayFn(text: string): void { + if (grayOn === false) { + text = "```bf\n" + text.concat("\n```") + grayBtn.style.color = 'gray'; + textArea.style.color = '#576D74'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = "none" + grayOn = true + } else if(grayOn === true) { + text = text.replace(/```bf\n|\n```/g, "") + grayBtn.style.color = '#576D74'; + textArea.style.color = 'white'; + textArea.value = text + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = "inline-block" + grayOn = false + } } \ No newline at end of file diff --git a/src/scripts/index.js b/src/scripts/index.js index 8ed56da..8b12d7a 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -1,78 +1,78 @@ -const textArea = document.getElementById("textArea"); -const dateArea = document.getElementById("datepicker"); -const resetBtn = document.getElementById("reset"); -const copyBtn = document.getElementById("copy"); -const textDiv = document.getElementById("textdiv"); -const colorDiv = document.getElementById("colordiv"); -const timeDiv = document.getElementById("timediv"); -const dropdownVar = document.getElementById("dropdown"); -function dropdown() { - if (dropdownVar.value === "text") { - rmFn(); - textArea.style.display = "inline-block"; - dateArea.style.display = "none"; - colorDiv.style.display = "none"; - timeDiv.style.display = "none"; - textDiv.style.display = "block"; - copyBtn.style.display = "inline-block"; - resetBtn.style.display = "inline-block"; - } - else if (dropdownVar.value === "color") { - rmFn(); - textArea.style.display = "inline-block"; - dateArea.style.display = "none"; - colorDiv.style.display = "block"; - timeDiv.style.display = "none"; - textDiv.style.display = "none"; - copyBtn.style.display = "inline-block"; - resetBtn.style.display = "inline-block"; - } - else if (dropdownVar.value === "time") { - rmFn(); - textArea.style.display = "none"; - dateArea.style.display = "inline-block"; - colorDiv.style.display = "none"; - timeDiv.style.display = "inline-block"; - textDiv.style.display = "none"; - copyBtn.style.display = "none"; - resetBtn.style.display = "none"; - } -} -function resetFn() { - boldBtn.style.color = italBtn.style.color = underBtn.style.color = strikeBtn.style.color = spoilBtn.style.color = quoteBtn.style.color = lineBtn.style.color = blockBtn.style.color = slashBtn.style.color = "white"; - textArea.value = ""; - textArea.style.fontWeight = "normal"; - textArea.style.fontStyle = ""; - textArea.style.textDecoration = "none"; - textArea.style.color = "white"; - textArea.style.fontFamily = "JetBrains Mono"; - boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; -} -function copyFn() { - const btn = document.getElementById("copy"); - textArea.select(); - textArea.setSelectionRange(0, 8000); - navigator.clipboard.writeText(textArea.value); - btn.innerHTML = "Copied!"; - setTimeout(() => { btn.innerHTML = "Copy"; }, 1000); -} -function rmFn() { - let newStr = textArea.value.replaceAll(/[*`]|> |~~|__|\|\||diff\n- |css\n\[|]\n|fix\n|\n|diff\n\+ |bash\n\"|\"\n|ini\n\[|bf\n|/g, ''); - textArea.value = newStr; - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; - boldBtn.style.color = italBtn.style.color = underBtn.style.color = strikeBtn.style.color = spoilBtn.style.color = quoteBtn.style.color = lineBtn.style.color = blockBtn.style.color = slashBtn.style.color = "white"; - textArea.style.fontWeight = "normal"; - textArea.style.fontStyle = ""; - textArea.style.textDecoration = "none"; - textArea.style.color = "white"; - textArea.style.fontFamily = "JetBrains Mono"; - boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false; - redBtn.style.color = '#D5322F'; - orangeBtn.style.color = '#B7471B'; - yellowBtn.style.color = '#B18602'; - greenBtn.style.color = '#839701'; - turqBtn.style.color = '#2B918A'; - blueBtn.style.color = '#287AB5'; - grayBtn.style.color = '#576D74'; -} +const textArea = document.getElementById("textArea"); +const dateArea = document.getElementById("datepicker"); +const resetBtn = document.getElementById("reset"); +const copyBtn = document.getElementById("copy"); +const textDiv = document.getElementById("textdiv"); +const colorDiv = document.getElementById("colordiv"); +const timeDiv = document.getElementById("timediv"); +const dropdownVar = document.getElementById("dropdown"); +function dropdown() { + if (dropdownVar.value === "text") { + rmFn(); + textArea.style.display = "inline-block"; + dateArea.style.display = "none"; + colorDiv.style.display = "none"; + timeDiv.style.display = "none"; + textDiv.style.display = "block"; + copyBtn.style.display = "inline-block"; + resetBtn.style.display = "inline-block"; + } + else if (dropdownVar.value === "color") { + rmFn(); + textArea.style.display = "inline-block"; + dateArea.style.display = "none"; + colorDiv.style.display = "block"; + timeDiv.style.display = "none"; + textDiv.style.display = "none"; + copyBtn.style.display = "inline-block"; + resetBtn.style.display = "inline-block"; + } + else if (dropdownVar.value === "time") { + rmFn(); + textArea.style.display = "none"; + dateArea.style.display = "inline-block"; + colorDiv.style.display = "none"; + timeDiv.style.display = "inline-block"; + textDiv.style.display = "none"; + copyBtn.style.display = "none"; + resetBtn.style.display = "none"; + } +} +function resetFn() { + boldBtn.style.color = italBtn.style.color = underBtn.style.color = strikeBtn.style.color = spoilBtn.style.color = quoteBtn.style.color = lineBtn.style.color = blockBtn.style.color = slashBtn.style.color = "white"; + textArea.value = ""; + textArea.style.fontWeight = "normal"; + textArea.style.fontStyle = ""; + textArea.style.textDecoration = "none"; + textArea.style.color = "white"; + textArea.style.fontFamily = "JetBrains Mono"; + boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; +} +function copyFn() { + const btn = document.getElementById("copy"); + textArea.select(); + textArea.setSelectionRange(0, 8000); + navigator.clipboard.writeText(textArea.value); + btn.innerHTML = "Copied!"; + setTimeout(() => { btn.innerHTML = "Copy"; }, 1000); +} +function rmFn() { + let newStr = textArea.value.replaceAll(/[*`]|> |~~|__|\|\||diff\n- |css\n\[|]\n|fix\n|\n|diff\n\+ |bash\n\"|\"\n|ini\n\[|bf\n|/g, ''); + textArea.value = newStr; + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block"; + boldBtn.style.color = italBtn.style.color = underBtn.style.color = strikeBtn.style.color = spoilBtn.style.color = quoteBtn.style.color = lineBtn.style.color = blockBtn.style.color = slashBtn.style.color = "white"; + textArea.style.fontWeight = "normal"; + textArea.style.fontStyle = ""; + textArea.style.textDecoration = "none"; + textArea.style.color = "white"; + textArea.style.fontFamily = "JetBrains Mono"; + boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false; + redBtn.style.color = '#D5322F'; + orangeBtn.style.color = '#B7471B'; + yellowBtn.style.color = '#B18602'; + greenBtn.style.color = '#839701'; + turqBtn.style.color = '#2B918A'; + blueBtn.style.color = '#287AB5'; + grayBtn.style.color = '#576D74'; +} diff --git a/src/scripts/index.ts b/src/scripts/index.ts index d94f038..43d6c18 100644 --- a/src/scripts/index.ts +++ b/src/scripts/index.ts @@ -1,84 +1,84 @@ -const textArea = (document.getElementById("textArea") as HTMLInputElement) -const dateArea = (document.getElementById("datepicker") as HTMLInputElement) -const resetBtn = (document.getElementById("reset") as HTMLInputElement) -const copyBtn = (document.getElementById("copy") as HTMLInputElement) - -const textDiv = (document.getElementById("textdiv") as HTMLInputElement) -const colorDiv = (document.getElementById("colordiv") as HTMLInputElement) -const timeDiv = (document.getElementById("timediv") as HTMLInputElement) -const dropdownVar = (document.getElementById("dropdown") as HTMLInputElement) - -function dropdown(): void{ - if (dropdownVar.value === "text"){ - rmFn() - textArea.style.display = "inline-block" - dateArea.style.display = "none" - colorDiv.style.display = "none" - timeDiv.style.display = "none" - textDiv.style.display = "block" - copyBtn.style.display = "inline-block" - resetBtn.style.display = "inline-block" - } else if (dropdownVar.value === "color"){ - rmFn() - textArea.style.display = "inline-block" - dateArea.style.display = "none" - colorDiv.style.display = "block" - timeDiv.style.display = "none" - textDiv.style.display = "none" - copyBtn.style.display = "inline-block" - resetBtn.style.display = "inline-block" - } else if (dropdownVar.value === "time"){ - rmFn() - textArea.style.display = "none" - dateArea.style.display = "inline-block" - colorDiv.style.display = "none" - timeDiv.style.display = "inline-block" - textDiv.style.display = "none" - copyBtn.style.display = "none" - resetBtn.style.display = "none" - } -} - -function resetFn(): void{ - boldBtn.style.color = italBtn.style.color = underBtn.style.color = strikeBtn.style.color = spoilBtn.style.color = quoteBtn.style.color = lineBtn.style.color = blockBtn.style.color = slashBtn.style.color = "white" - textArea.value = "" - textArea.style.fontWeight = "normal" - textArea.style.fontStyle = "" - textArea.style.textDecoration = "none" - textArea.style.color = "white" - textArea.style.fontFamily = "JetBrains Mono" - boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" - -} -function copyFn(): void{ - const btn = (document.getElementById("copy") as HTMLInputElement) - - textArea.select(); - textArea.setSelectionRange(0, 8000); - - navigator.clipboard.writeText(textArea.value); - - btn.innerHTML = "Copied!" - setTimeout(() => { btn.innerHTML = "Copy" }, 1000); - -} -function rmFn(): void{ - let newStr = textArea.value.replaceAll(/[*`]|> |~~|__|\|\||diff\n- |css\n\[|]\n|fix\n|\n|diff\n\+ |bash\n\"|\"\n|ini\n\[|bf\n|/g, '') - textArea.value = newStr - redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" - boldBtn.style.color = italBtn.style.color = underBtn.style.color = strikeBtn.style.color = spoilBtn.style.color = quoteBtn.style.color = lineBtn.style.color = blockBtn.style.color = slashBtn.style.color = "white" - textArea.style.fontWeight = "normal" - textArea.style.fontStyle = "" - textArea.style.textDecoration = "none" - textArea.style.color = "white" - textArea.style.fontFamily = "JetBrains Mono" - boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false - redBtn.style.color = '#D5322F'; - orangeBtn.style.color = '#B7471B'; - yellowBtn.style.color = '#B18602'; - greenBtn.style.color = '#839701'; - turqBtn.style.color = '#2B918A'; - blueBtn.style.color = '#287AB5'; - grayBtn.style.color = '#576D74'; +const textArea = (document.getElementById("textArea") as HTMLInputElement) +const dateArea = (document.getElementById("datepicker") as HTMLInputElement) +const resetBtn = (document.getElementById("reset") as HTMLInputElement) +const copyBtn = (document.getElementById("copy") as HTMLInputElement) + +const textDiv = (document.getElementById("textdiv") as HTMLInputElement) +const colorDiv = (document.getElementById("colordiv") as HTMLInputElement) +const timeDiv = (document.getElementById("timediv") as HTMLInputElement) +const dropdownVar = (document.getElementById("dropdown") as HTMLInputElement) + +function dropdown(): void{ + if (dropdownVar.value === "text"){ + rmFn() + textArea.style.display = "inline-block" + dateArea.style.display = "none" + colorDiv.style.display = "none" + timeDiv.style.display = "none" + textDiv.style.display = "block" + copyBtn.style.display = "inline-block" + resetBtn.style.display = "inline-block" + } else if (dropdownVar.value === "color"){ + rmFn() + textArea.style.display = "inline-block" + dateArea.style.display = "none" + colorDiv.style.display = "block" + timeDiv.style.display = "none" + textDiv.style.display = "none" + copyBtn.style.display = "inline-block" + resetBtn.style.display = "inline-block" + } else if (dropdownVar.value === "time"){ + rmFn() + textArea.style.display = "none" + dateArea.style.display = "inline-block" + colorDiv.style.display = "none" + timeDiv.style.display = "inline-block" + textDiv.style.display = "none" + copyBtn.style.display = "none" + resetBtn.style.display = "none" + } +} + +function resetFn(): void{ + boldBtn.style.color = italBtn.style.color = underBtn.style.color = strikeBtn.style.color = spoilBtn.style.color = quoteBtn.style.color = lineBtn.style.color = blockBtn.style.color = slashBtn.style.color = "white" + textArea.value = "" + textArea.style.fontWeight = "normal" + textArea.style.fontStyle = "" + textArea.style.textDecoration = "none" + textArea.style.color = "white" + textArea.style.fontFamily = "JetBrains Mono" + boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" + +} +function copyFn(): void{ + const btn = (document.getElementById("copy") as HTMLInputElement) + + textArea.select(); + textArea.setSelectionRange(0, 8000); + + navigator.clipboard.writeText(textArea.value); + + btn.innerHTML = "Copied!" + setTimeout(() => { btn.innerHTML = "Copy" }, 1000); + +} +function rmFn(): void{ + let newStr = textArea.value.replaceAll(/[*`]|> |~~|__|\|\||diff\n- |css\n\[|]\n|fix\n|\n|diff\n\+ |bash\n\"|\"\n|ini\n\[|bf\n|/g, '') + textArea.value = newStr + redBtn.style.display = orangeBtn.style.display = yellowBtn.style.display = greenBtn.style.display = turqBtn.style.display = blueBtn.style.display = grayBtn.style.display = "inline-block" + boldBtn.style.color = italBtn.style.color = underBtn.style.color = strikeBtn.style.color = spoilBtn.style.color = quoteBtn.style.color = lineBtn.style.color = blockBtn.style.color = slashBtn.style.color = "white" + textArea.style.fontWeight = "normal" + textArea.style.fontStyle = "" + textArea.style.textDecoration = "none" + textArea.style.color = "white" + textArea.style.fontFamily = "JetBrains Mono" + boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false + redBtn.style.color = '#D5322F'; + orangeBtn.style.color = '#B7471B'; + yellowBtn.style.color = '#B18602'; + greenBtn.style.color = '#839701'; + turqBtn.style.color = '#2B918A'; + blueBtn.style.color = '#287AB5'; + grayBtn.style.color = '#576D74'; } \ No newline at end of file diff --git a/src/scripts/text.js b/src/scripts/text.js index 791c4d6..ffa2d1f 100644 --- a/src/scripts/text.js +++ b/src/scripts/text.js @@ -1,153 +1,153 @@ -const boldBtn = document.getElementById("bold"); -const italBtn = document.getElementById("ital"); -const underBtn = document.getElementById("under"); -const strikeBtn = document.getElementById("strike"); -const spoilBtn = document.getElementById("spoil"); -const quoteBtn = document.getElementById("quote"); -const lineBtn = document.getElementById("line"); -const blockBtn = document.getElementById("block"); -const slashBtn = document.getElementById("slash"); -let boldOn, italOn, underOn, strikeOn, spoilOn, quoteOn, lineOn, blockOn, slashOn; -boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false; -function boldFn(text) { - if (boldOn === false) { - text = "**" + text.concat("**"); - textArea.style.fontWeight = "bold"; - boldBtn.style.color = 'gray'; - textArea.value = text; - boldOn = true; - } - else if (boldOn === true) { - text = text.replace(/\*\*/g, ""); - textArea.style.fontWeight = "normal"; - boldBtn.style.color = 'white'; - textArea.value = text; - boldOn = false; - } -} -function italFn(text) { - if (italOn === false) { - text = "*" + text.concat("*"); - textArea.style.fontStyle = "italic"; - italBtn.style.color = 'gray'; - textArea.value = text; - italOn = true; - } - else if (italOn === true) { - text = text.replace(/\*/g, ""); - textArea.style.fontStyle = "normal"; - italBtn.style.color = 'white'; - textArea.value = text; - italOn = false; - } -} -function underFn(text) { - if (underOn === false) { - text = "__" + text.concat("__"); - textArea.style.textDecoration = "underline"; - underBtn.style.color = 'gray'; - textArea.value = text; - underOn = true; - } - else if (underOn === true) { - text = text.replace(/__/g, ""); - textArea.style.textDecoration = "none"; - underBtn.style.color = 'white'; - textArea.value = text; - underOn = false; - } -} -function strikeFn(text) { - if (strikeOn === false) { - text = "~~" + text.concat("~~"); - textArea.style.textDecoration = "line-through"; - strikeBtn.style.color = 'gray'; - textArea.value = text; - strikeOn = true; - } - else if (strikeOn === true) { - text = text.replace(/~~/g, ""); - textArea.style.textDecoration = "none"; - strikeBtn.style.color = 'white'; - textArea.value = text; - strikeOn = false; - } -} -function spoilFn(text) { - if (spoilOn === false) { - text = "||" + text.concat("||"); - textArea.style.color = "#999999"; - spoilBtn.style.color = 'gray'; - textArea.value = text; - spoilOn = true; - } - else if (spoilOn === true) { - text = text.replace(/\|\|/g, ""); - textArea.style.color = "white"; - spoilBtn.style.color = 'white'; - textArea.value = text; - spoilOn = false; - } -} -function quoteFn(text) { - if (quoteOn === false) { - text = "> " + text; - quoteBtn.style.color = 'gray'; - textArea.value = text; - quoteOn = true; - } - else if (quoteOn === true) { - text = text.replace(/> /g, ""); - quoteBtn.style.color = 'white'; - textArea.value = text; - quoteOn = false; - } -} -function lineFn(text) { - if (lineOn === false) { - text = "`" + text.concat("`"); - textArea.style.fontFamily = "monospace"; - lineBtn.style.color = 'gray'; - textArea.value = text; - lineOn = true; - } - else if (lineOn === true) { - text = text.replace(/`/g, ""); - lineBtn.style.color = 'white'; - textArea.style.fontFamily = "JetBrains Mono"; - textArea.value = text; - lineOn = false; - } -} -function blockFn(text) { - if (blockOn === false) { - text = "```" + text.concat("```"); - textArea.style.fontFamily = "monospace"; - blockBtn.style.color = 'gray'; - textArea.value = text; - blockOn = true; - } - else if (blockOn === true) { - text = text.replace(/```/g, ""); - blockBtn.style.color = 'white'; - textArea.style.fontFamily = "JetBrains Mono"; - textArea.value = text; - blockOn = false; - } -} -function slashFn(text) { - if (slashOn === false) { - text = "<" + "\/" + text.concat(":0>"); - textArea.style.color = "#6D81D0"; - slashBtn.style.color = 'gray'; - textArea.value = text; - slashOn = true; - } - else if (slashOn === true) { - text = text.replace(/<\/|:0>/g, ""); - slashBtn.style.color = 'white'; - textArea.style.color = "white"; - textArea.value = text; - slashOn = false; - } -} +const boldBtn = document.getElementById("bold"); +const italBtn = document.getElementById("ital"); +const underBtn = document.getElementById("under"); +const strikeBtn = document.getElementById("strike"); +const spoilBtn = document.getElementById("spoil"); +const quoteBtn = document.getElementById("quote"); +const lineBtn = document.getElementById("line"); +const blockBtn = document.getElementById("block"); +const slashBtn = document.getElementById("slash"); +let boldOn, italOn, underOn, strikeOn, spoilOn, quoteOn, lineOn, blockOn, slashOn; +boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false; +function boldFn(text) { + if (boldOn === false) { + text = "**" + text.concat("**"); + textArea.style.fontWeight = "bold"; + boldBtn.style.color = 'gray'; + textArea.value = text; + boldOn = true; + } + else if (boldOn === true) { + text = text.replace(/\*\*/g, ""); + textArea.style.fontWeight = "normal"; + boldBtn.style.color = 'white'; + textArea.value = text; + boldOn = false; + } +} +function italFn(text) { + if (italOn === false) { + text = "*" + text.concat("*"); + textArea.style.fontStyle = "italic"; + italBtn.style.color = 'gray'; + textArea.value = text; + italOn = true; + } + else if (italOn === true) { + text = text.replace(/\*/g, ""); + textArea.style.fontStyle = "normal"; + italBtn.style.color = 'white'; + textArea.value = text; + italOn = false; + } +} +function underFn(text) { + if (underOn === false) { + text = "__" + text.concat("__"); + textArea.style.textDecoration = "underline"; + underBtn.style.color = 'gray'; + textArea.value = text; + underOn = true; + } + else if (underOn === true) { + text = text.replace(/__/g, ""); + textArea.style.textDecoration = "none"; + underBtn.style.color = 'white'; + textArea.value = text; + underOn = false; + } +} +function strikeFn(text) { + if (strikeOn === false) { + text = "~~" + text.concat("~~"); + textArea.style.textDecoration = "line-through"; + strikeBtn.style.color = 'gray'; + textArea.value = text; + strikeOn = true; + } + else if (strikeOn === true) { + text = text.replace(/~~/g, ""); + textArea.style.textDecoration = "none"; + strikeBtn.style.color = 'white'; + textArea.value = text; + strikeOn = false; + } +} +function spoilFn(text) { + if (spoilOn === false) { + text = "||" + text.concat("||"); + textArea.style.color = "#999999"; + spoilBtn.style.color = 'gray'; + textArea.value = text; + spoilOn = true; + } + else if (spoilOn === true) { + text = text.replace(/\|\|/g, ""); + textArea.style.color = "white"; + spoilBtn.style.color = 'white'; + textArea.value = text; + spoilOn = false; + } +} +function quoteFn(text) { + if (quoteOn === false) { + text = "> " + text; + quoteBtn.style.color = 'gray'; + textArea.value = text; + quoteOn = true; + } + else if (quoteOn === true) { + text = text.replace(/> /g, ""); + quoteBtn.style.color = 'white'; + textArea.value = text; + quoteOn = false; + } +} +function lineFn(text) { + if (lineOn === false) { + text = "`" + text.concat("`"); + textArea.style.fontFamily = "monospace"; + lineBtn.style.color = 'gray'; + textArea.value = text; + lineOn = true; + } + else if (lineOn === true) { + text = text.replace(/`/g, ""); + lineBtn.style.color = 'white'; + textArea.style.fontFamily = "JetBrains Mono"; + textArea.value = text; + lineOn = false; + } +} +function blockFn(text) { + if (blockOn === false) { + text = "```" + text.concat("```"); + textArea.style.fontFamily = "monospace"; + blockBtn.style.color = 'gray'; + textArea.value = text; + blockOn = true; + } + else if (blockOn === true) { + text = text.replace(/```/g, ""); + blockBtn.style.color = 'white'; + textArea.style.fontFamily = "JetBrains Mono"; + textArea.value = text; + blockOn = false; + } +} +function slashFn(text) { + if (slashOn === false) { + text = "<" + "\/" + text.concat(":0>"); + textArea.style.color = "#6D81D0"; + slashBtn.style.color = 'gray'; + textArea.value = text; + slashOn = true; + } + else if (slashOn === true) { + text = text.replace(/<\/|:0>/g, ""); + slashBtn.style.color = 'white'; + textArea.style.color = "white"; + textArea.value = text; + slashOn = false; + } +} diff --git a/src/scripts/text.ts b/src/scripts/text.ts index 7b64824..7aa4693 100644 --- a/src/scripts/text.ts +++ b/src/scripts/text.ts @@ -1,147 +1,150 @@ -const boldBtn = (document.getElementById("bold") as HTMLInputElement) -const italBtn = (document.getElementById("ital") as HTMLInputElement) -const underBtn = (document.getElementById("under") as HTMLInputElement) -const strikeBtn = (document.getElementById("strike") as HTMLInputElement) -const spoilBtn = (document.getElementById("spoil") as HTMLInputElement) -const quoteBtn = (document.getElementById("quote") as HTMLInputElement) -const lineBtn = (document.getElementById("line") as HTMLInputElement) -const blockBtn = (document.getElementById("block") as HTMLInputElement) -const slashBtn = (document.getElementById("slash") as HTMLInputElement) -let boldOn: boolean, italOn: boolean, underOn: boolean, strikeOn: boolean, spoilOn: boolean, quoteOn: boolean, lineOn: boolean, blockOn: boolean, slashOn: boolean; -boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false - -function boldFn(text: string): void { - if (boldOn === false) { - text = "**" + text.concat("**") - textArea.style.fontWeight = "bold" - boldBtn.style.color = 'gray'; - textArea.value = text - boldOn = true - } else if(boldOn === true) { - text = text.replace(/\*\*/g, "") - textArea.style.fontWeight = "normal" - boldBtn.style.color = 'white'; - textArea.value = text - boldOn = false - } -} -function italFn(text: string): void { - if (italOn === false) { - text = "*" + text.concat("*") - textArea.style.fontStyle = "italic" - italBtn.style.color = 'gray'; - textArea.value = text - italOn = true - } else if(italOn === true) { - text = text.replace(/\*/g, "") - textArea.style.fontStyle = "normal" - italBtn.style.color = 'white'; - textArea.value = text - italOn = false - } -} -function underFn(text: string): void { - if (underOn === false) { - text = "__" + text.concat("__") - textArea.style.textDecoration = "underline" - underBtn.style.color = 'gray'; - textArea.value = text - - underOn = true - } else if(underOn === true) { - text = text.replace(/__/g, "") - textArea.style.textDecoration = "none" - underBtn.style.color = 'white'; - textArea.value = text - underOn = false - } -} -function strikeFn(text: string): void { - if (strikeOn === false) { - text = "~~" + text.concat("~~") - textArea.style.textDecoration = "line-through" - strikeBtn.style.color = 'gray'; - textArea.value = text - - strikeOn = true - } else if(strikeOn === true) { - text = text.replace(/~~/g, "") - textArea.style.textDecoration = "none" - strikeBtn.style.color = 'white'; - textArea.value = text - strikeOn = false - } -} -function spoilFn(text: string): void { - if (spoilOn === false) { - text = "||" + text.concat("||") - textArea.style.color = "#999999" - spoilBtn.style.color = 'gray'; - textArea.value = text - spoilOn = true - } else if(spoilOn === true) { - text = text.replace(/\|\|/g, "") - textArea.style.color = "white" - spoilBtn.style.color = 'white'; - textArea.value = text - spoilOn = false - } -} -function quoteFn(text: string): void { - if (quoteOn === false) { - text = "> " + text - quoteBtn.style.color = 'gray'; - textArea.value = text - quoteOn = true - } else if(quoteOn === true) { - text = text.replace(/> /g, "") - quoteBtn.style.color = 'white'; - textArea.value = text - quoteOn = false - } -} -function lineFn(text: string): void { - if (lineOn === false) { - text = "`" + text.concat("`") - textArea.style.fontFamily = "monospace" - lineBtn.style.color = 'gray'; - textArea.value = text - lineOn = true - } else if(lineOn === true) { - text = text.replace(/`/g, "") - lineBtn.style.color = 'white'; - textArea.style.fontFamily = "JetBrains Mono" - textArea.value = text - lineOn = false - } -} -function blockFn(text: string): void { - if (blockOn === false) { - text = "```" + text.concat("```") - textArea.style.fontFamily = "monospace" - blockBtn.style.color = 'gray'; - textArea.value = text - blockOn = true - } else if(blockOn === true) { - text = text.replace(/```/g, "") - blockBtn.style.color = 'white'; - textArea.style.fontFamily = "JetBrains Mono" - textArea.value = text - blockOn = false - } -} -function slashFn(text: string): void { - if (slashOn === false) { - text = "<" + "\/" + text.concat(":0>") - textArea.style.color = "#6D81D0" - slashBtn.style.color = 'gray'; - textArea.value = text - slashOn = true - } else if(slashOn === true) { - text = text.replace(/<\/|:0>/g, "") - slashBtn.style.color = 'white'; - textArea.style.color = "white"; - textArea.value = text - slashOn = false - } +const boldBtn = (document.getElementById("bold") as HTMLInputElement) +const italBtn = (document.getElementById("ital") as HTMLInputElement) +const underBtn = (document.getElementById("under") as HTMLInputElement) +const strikeBtn = (document.getElementById("strike") as HTMLInputElement) +const spoilBtn = (document.getElementById("spoil") as HTMLInputElement) +const quoteBtn = (document.getElementById("quote") as HTMLInputElement) +const lineBtn = (document.getElementById("line") as HTMLInputElement) +const blockBtn = (document.getElementById("block") as HTMLInputElement) +const slashBtn = (document.getElementById("slash") as HTMLInputElement) +let slashText: string; +let boldOn: boolean, italOn: boolean, underOn: boolean, strikeOn: boolean, spoilOn: boolean, quoteOn: boolean, lineOn: boolean, blockOn: boolean, slashOn: boolean; +boldOn = italOn = underOn = strikeOn = spoilOn = quoteOn = lineOn = blockOn = slashOn = false + +function boldFn(text: string): void { + if (boldOn === false) { + text = "**" + text.concat("**") + textArea.style.fontWeight = "bold" + boldBtn.style.color = 'gray'; + textArea.value = text + boldOn = true + } else if(boldOn === true) { + text = text.replace(/\*\*/g, "") + textArea.style.fontWeight = "normal" + boldBtn.style.color = 'white'; + textArea.value = text + boldOn = false + } +} +function italFn(text: string): void { + if (italOn === false) { + text = "*" + text.concat("*") + textArea.style.fontStyle = "italic" + italBtn.style.color = 'gray'; + textArea.value = text + italOn = true + } else if(italOn === true) { + text = text.replace(/\*/g, "") + textArea.style.fontStyle = "normal" + italBtn.style.color = 'white'; + textArea.value = text + italOn = false + } +} +function underFn(text: string): void { + if (underOn === false) { + text = "__" + text.concat("__") + textArea.style.textDecoration = "underline" + underBtn.style.color = 'gray'; + textArea.value = text + + underOn = true + } else if(underOn === true) { + text = text.replace(/__/g, "") + textArea.style.textDecoration = "none" + underBtn.style.color = 'white'; + textArea.value = text + underOn = false + } +} +function strikeFn(text: string): void { + if (strikeOn === false) { + text = "~~" + text.concat("~~") + textArea.style.textDecoration = "line-through" + strikeBtn.style.color = 'gray'; + textArea.value = text + + strikeOn = true + } else if(strikeOn === true) { + text = text.replace(/~~/g, "") + textArea.style.textDecoration = "none" + strikeBtn.style.color = 'white'; + textArea.value = text + strikeOn = false + } +} +function spoilFn(text: string): void { + if (spoilOn === false) { + text = "||" + text.concat("||") + textArea.style.color = "#999999" + spoilBtn.style.color = 'gray'; + textArea.value = text + spoilOn = true + } else if(spoilOn === true) { + text = text.replace(/\|\|/g, "") + textArea.style.color = "white" + spoilBtn.style.color = 'white'; + textArea.value = text + spoilOn = false + } +} +function quoteFn(text: string): void { + if (quoteOn === false) { + text = "> " + text + quoteBtn.style.color = 'gray'; + textArea.value = text + quoteOn = true + } else if(quoteOn === true) { + text = text.replace(/> /g, "") + quoteBtn.style.color = 'white'; + textArea.value = text + quoteOn = false + } +} +function lineFn(text: string): void { + if (lineOn === false) { + text = "`" + text.concat("`") + textArea.style.fontFamily = "monospace" + lineBtn.style.color = 'gray'; + textArea.value = text + lineOn = true + } else if(lineOn === true) { + text = text.replace(/`/g, "") + lineBtn.style.color = 'white'; + textArea.style.fontFamily = "JetBrains Mono" + textArea.value = text + lineOn = false + } +} +function blockFn(text: string): void { + if (blockOn === false) { + text = "```" + text.concat("```") + textArea.style.fontFamily = "monospace" + blockBtn.style.color = 'gray'; + textArea.value = text + blockOn = true + } else if(blockOn === true) { + text = text.replace(/```/g, "") + blockBtn.style.color = 'white'; + textArea.style.fontFamily = "JetBrains Mono" + textArea.value = text + blockOn = false + } +} +function slashFn(text: string): void { + if (slashOn === false) { + slashText = text; + text = "<" + "\/" + text.concat(":0>") + text = text.replaceAll(" ", "") + textArea.style.color = "#6D81D0" + slashBtn.style.color = 'gray'; + textArea.value = text + slashOn = true + } else if(slashOn === true) { + text = slashText; + slashBtn.style.color = 'white'; + textArea.style.color = "white"; + textArea.value = text + slashOn = false + } } \ No newline at end of file diff --git a/src/scripts/time.js b/src/scripts/time.js index 86e3f44..2952cdf 100644 --- a/src/scripts/time.js +++ b/src/scripts/time.js @@ -1,25 +1,25 @@ -const datePicker = document.getElementById("datepicker"); -const datet = document.getElementById("datet"); -const dateT = document.getElementById("dateT"); -const dated = document.getElementById("dated"); -const dateD = document.getElementById("dateD"); -const datef = document.getElementById("datef"); -const dateF = document.getElementById("dateF"); -const dateR = document.getElementById("dateR"); -let date; -function main() { - date = new Date(datePicker.value); - const newDate = Math.floor(date.getTime() / 1000); - console.log(newDate); - function dateFn() { - datet.innerHTML = "" + "<t:" + newDate + ":t>" + ""; - dateT.innerHTML = "" + "<t:" + newDate + ":T>" + ""; - dated.innerHTML = "" + "<t:" + newDate + ":d>" + ""; - dateD.innerHTML = "" + "<t:" + newDate + ":D>" + ""; - datef.innerHTML = "" + "<t:" + newDate + ":f>" + ""; - dateF.innerHTML = "" + "<t:" + newDate + ":F>" + ""; - dateR.innerHTML = "" + "<t:" + newDate + ":R>" + ""; - console.log(datet.innerHTML); - } - dateFn(); -} +const datePicker = document.getElementById("datepicker"); +const datet = document.getElementById("datet"); +const dateT = document.getElementById("dateT"); +const dated = document.getElementById("dated"); +const dateD = document.getElementById("dateD"); +const datef = document.getElementById("datef"); +const dateF = document.getElementById("dateF"); +const dateR = document.getElementById("dateR"); +let date; +function main() { + date = new Date(datePicker.value); + const newDate = Math.floor(date.getTime() / 1000); + console.log(newDate); + function dateFn() { + datet.innerHTML = "" + "<t:" + newDate + ":t>" + ""; + dateT.innerHTML = "" + "<t:" + newDate + ":T>" + ""; + dated.innerHTML = "" + "<t:" + newDate + ":d>" + ""; + dateD.innerHTML = "" + "<t:" + newDate + ":D>" + ""; + datef.innerHTML = "" + "<t:" + newDate + ":f>" + ""; + dateF.innerHTML = "" + "<t:" + newDate + ":F>" + ""; + dateR.innerHTML = "" + "<t:" + newDate + ":R>" + ""; + console.log(datet.innerHTML); + } + dateFn(); +} diff --git a/src/scripts/time.ts b/src/scripts/time.ts index 1b817c2..9349741 100644 --- a/src/scripts/time.ts +++ b/src/scripts/time.ts @@ -1,28 +1,28 @@ -const datePicker = (document.getElementById("datepicker") as HTMLInputElement) - -const datet = (document.getElementById("datet") as HTMLInputElement) -const dateT = (document.getElementById("dateT") as HTMLInputElement) -const dated = (document.getElementById("dated") as HTMLInputElement) -const dateD = (document.getElementById("dateD") as HTMLInputElement) -const datef = (document.getElementById("datef") as HTMLInputElement) -const dateF = (document.getElementById("dateF") as HTMLInputElement) -const dateR = (document.getElementById("dateR") as HTMLInputElement) - -let date: Date; - -function main(){ - date = new Date(datePicker.value) - const newDate: number = Math.floor(date.getTime() / 1000) - console.log(newDate) - function dateFn(){ - datet.innerHTML = "" + "<t:" + newDate + ":t>" + "" - dateT.innerHTML = "" + "<t:" + newDate + ":T>" + "" - dated.innerHTML = "" + "<t:" + newDate + ":d>" + "" - dateD.innerHTML = "" + "<t:" + newDate + ":D>" + "" - datef.innerHTML = "" + "<t:" + newDate + ":f>" + "" - dateF.innerHTML = "" + "<t:" + newDate + ":F>" + "" - dateR.innerHTML = "" + "<t:" + newDate + ":R>" + "" - console.log(datet.innerHTML) - } - dateFn() -} +const datePicker = (document.getElementById("datepicker") as HTMLInputElement) + +const datet = (document.getElementById("datet") as HTMLInputElement) +const dateT = (document.getElementById("dateT") as HTMLInputElement) +const dated = (document.getElementById("dated") as HTMLInputElement) +const dateD = (document.getElementById("dateD") as HTMLInputElement) +const datef = (document.getElementById("datef") as HTMLInputElement) +const dateF = (document.getElementById("dateF") as HTMLInputElement) +const dateR = (document.getElementById("dateR") as HTMLInputElement) + +let date: Date; + +function main(){ + date = new Date(datePicker.value) + const newDate: number = Math.floor(date.getTime() / 1000) + console.log(newDate) + function dateFn(){ + datet.innerHTML = "" + "<t:" + newDate + ":t>" + "" + dateT.innerHTML = "" + "<t:" + newDate + ":T>" + "" + dated.innerHTML = "" + "<t:" + newDate + ":d>" + "" + dateD.innerHTML = "" + "<t:" + newDate + ":D>" + "" + datef.innerHTML = "" + "<t:" + newDate + ":f>" + "" + dateF.innerHTML = "" + "<t:" + newDate + ":F>" + "" + dateR.innerHTML = "" + "<t:" + newDate + ":R>" + "" + console.log(datet.innerHTML) + } + dateFn() +} diff --git a/src/styles.css b/src/styles.css index 4d72200..d5a4398 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,216 +1,216 @@ -*, *:after, *:before { - outline: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 0; - margin: 0; -} - -html { - position: relative; -} - -body{ - margin:0; - position: relative; - background-size: cover; - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; - background-color: #1e2124; -} - -main{ - color: #ffffff; - text-align: center; -} main h1{ - font-family:'Aldrich', Helvetica, sans-serif; - font-size:3em; - color: #ffffff; - padding: 1rem; -} main p{ - font-family: 'JetBrains Mono', monospace; - font-size: 1.5em; - width: 90%; -} main a{ - color: #a2ddff; - text-decoration: none; - transition: text-shadow 0.3s; -} main h2{ - font-family:'Aldrich', Helvetica, sans-serif; - margin: 15px; - font-size: 1.75em; -} main h3{ - font-family:'Aldrich', Helvetica, sans-serif; - margin: 15px; - font-size: 1.25em; -} main a:hover{ - text-shadow: 0 0 5px #5663F7; -} main hr{ - margin: auto; - margin-top: 3rem; - border: white solid 0.1rem; - border-radius: 100rem; - width: 75%; -} main textarea{ - box-sizing: border-box; - border-radius: 0.8rem; - background-color: #1e2124; - color: white; - border: 3px solid rgb(125, 125, 125); - padding: 1rem; - height: 10rem; - resize: none; - width: 50%; - font-family: 'JetBrains Mono', 'Helvetica Neue', sans-serif; -} main code{ - background-color: #1e2124; - font-size: 1.1em; -} - -.cool{ - position: relative; - margin: 0; - width: 100%; - padding: 5rem 2rem 5rem; - font-size: 1.5em; -} - -.date{ - background: linear-gradient(to right, #87a1ff, #7289da, #5865F2, #5663F7, #404EED, #2a3bf0); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - animation: rainbow_animation 6s ease-in-out infinite; - background-size: 400% 100%; -} - -@keyframes rainbow_animation { - 0%,100% { - background-position: 0 0; - } - - 50% { - background-position: 100% 0; - } -} - -article{ - padding-left: 0; - display: block; - text-align: center; - margin: auto; - background-color:#282b30; - padding: 2rem 0 2rem 0rem; - width: 90%; - border-radius: 2rem; -} article p{ - margin: auto; - text-align: center; - width: 80%; -} article select{ - background-color: #1e2124; - color: white; - font-family: 'JetBrains Mono', monospace; - padding: 1rem; - border-radius: 0.5rem; - font-size: 0.9rem; - border: 2px solid rgb(125, 125, 125); -} - -footer{ - margin: auto; - text-align: center; - font-family:'Aldrich', Helvetica, sans-serif; - padding: 1.5em; -} footer a{ - color: #ffffff; - text-decoration: none; - font-size: 1.5em; -} - -button{ - border: none; - padding: 0.9rem; - font-size:1em; - font-family: 'JetBrains Mono', monospace; - background-color: #1e2124; - color: white; - border-radius: 0.8rem; - transition: background-color 0.3s; -} button:hover{ - cursor: pointer; - background-color:#2b3035 !important; -} .resetButton, .copyButton{ - margin-left: 0.5rem; -} .resetButton:hover{ - background-color:#420000 !important; -} .copyButton:hover{ - background-color:#0c4200 !important; -} - -#datepicker{ - background-color: #1e2124; - color: white; - font-family: 'JetBrains Mono', monospace; - padding: 1rem; - border-radius: 0.5rem; - font-size: 0.9rem; - border: 2px solid rgb(125, 125, 125); -} - -#timediv{ - display: flex; - justify-content: center; - align-items: center; -} - -@media screen and (max-width: 900px){ - .cool{ - position: relative; - margin: 0; - width: 100%; - padding: 2rem 2rem 2rem; - font-size: 1.5em; - } - - main textarea{ - font-size: 1.5em; - width: 80%; - height: 12.5rem; - } main p{ - font-size: 1.5em; - width: 90%; - } -} - -@media screen and (max-width: 500px){ - .cool{ - position: relative; - margin: 0; - width: 100%; - padding: 2rem 2rem 2rem; - font-size: 1em; - } - - main textarea{ - font-size: 1.1em; - width: 80%; - height: 12.5rem; - } main p{ - font-size: 1em; - width: 90%; - } main select{ - padding: 0.5rem; - } main button{ - margin-bottom: 0.5rem; - margin-right: 0.25rem - } - - article{ - width: 95%; - } article #timediv{ - font-size: 1.25em; - } +*, *:after, *:before { + outline: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html { + position: relative; +} + +body{ + margin:0; + position: relative; + background-size: cover; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-color: #1e2124; +} + +main{ + color: #ffffff; + text-align: center; +} main h1{ + font-family:'Aldrich', Helvetica, sans-serif; + font-size:3em; + color: #ffffff; + padding: 1rem; +} main p{ + font-family: 'JetBrains Mono', monospace; + font-size: 1.5em; + width: 90%; +} main a{ + color: #a2ddff; + text-decoration: none; + transition: text-shadow 0.3s; +} main h2{ + font-family:'Aldrich', Helvetica, sans-serif; + margin: 15px; + font-size: 1.75em; +} main h3{ + font-family:'Aldrich', Helvetica, sans-serif; + margin: 15px; + font-size: 1.25em; +} main a:hover{ + text-shadow: 0 0 5px #5663F7; +} main hr{ + margin: auto; + margin-top: 3rem; + border: white solid 0.1rem; + border-radius: 100rem; + width: 75%; +} main textarea{ + box-sizing: border-box; + border-radius: 0.8rem; + background-color: #1e2124; + color: white; + border: 3px solid rgb(125, 125, 125); + padding: 1rem; + height: 10rem; + resize: none; + width: 50%; + font-family: 'JetBrains Mono', 'Helvetica Neue', sans-serif; +} main code{ + background-color: #1e2124; + font-size: 1.1em; +} + +.cool{ + position: relative; + margin: 0; + width: 100%; + padding: 5rem 2rem 5rem; + font-size: 1.5em; +} + +.date{ + background: linear-gradient(to right, #87a1ff, #7289da, #5865F2, #5663F7, #404EED, #2a3bf0); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + animation: rainbow_animation 6s ease-in-out infinite; + background-size: 400% 100%; +} + +@keyframes rainbow_animation { + 0%,100% { + background-position: 0 0; + } + + 50% { + background-position: 100% 0; + } +} + +article{ + padding-left: 0; + display: block; + text-align: center; + margin: auto; + background-color:#282b30; + padding: 2rem 0 2rem 0rem; + width: 90%; + border-radius: 2rem; +} article p{ + margin: auto; + text-align: center; + width: 80%; +} article select{ + background-color: #1e2124; + color: white; + font-family: 'JetBrains Mono', monospace; + padding: 1rem; + border-radius: 0.5rem; + font-size: 0.9rem; + border: 2px solid rgb(125, 125, 125); +} + +footer{ + margin: auto; + text-align: center; + font-family:'Aldrich', Helvetica, sans-serif; + padding: 1.5em; +} footer a{ + color: #ffffff; + text-decoration: none; + font-size: 1.5em; +} + +button{ + border: none; + padding: 0.9rem; + font-size:1em; + font-family: 'JetBrains Mono', monospace; + background-color: #1e2124; + color: white; + border-radius: 0.8rem; + transition: background-color 0.3s; +} button:hover{ + cursor: pointer; + background-color:#2b3035 !important; +} .resetButton, .copyButton{ + margin-left: 0.5rem; +} .resetButton:hover{ + background-color:#420000 !important; +} .copyButton:hover{ + background-color:#0c4200 !important; +} + +#datepicker{ + background-color: #1e2124; + color: white; + font-family: 'JetBrains Mono', monospace; + padding: 1rem; + border-radius: 0.5rem; + font-size: 0.9rem; + border: 2px solid rgb(125, 125, 125); +} + +#timediv{ + display: flex; + justify-content: center; + align-items: center; +} + +@media screen and (max-width: 900px){ + .cool{ + position: relative; + margin: 0; + width: 100%; + padding: 2rem 2rem 2rem; + font-size: 1.5em; + } + + main textarea{ + font-size: 1.5em; + width: 80%; + height: 12.5rem; + } main p{ + font-size: 1.5em; + width: 90%; + } +} + +@media screen and (max-width: 500px){ + .cool{ + position: relative; + margin: 0; + width: 100%; + padding: 2rem 2rem 2rem; + font-size: 1em; + } + + main textarea{ + font-size: 1.1em; + width: 80%; + height: 12.5rem; + } main p{ + font-size: 1em; + width: 90%; + } main select{ + padding: 0.5rem; + } main button{ + margin-bottom: 0.5rem; + margin-right: 0.25rem + } + + article{ + width: 95%; + } article #timediv{ + font-size: 1.25em; + } } \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 6ed3c21..31729e2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,13 +1,13 @@ -{ - "compilerOptions": { - "target": "EsNext", - "module": "ESNext", - "lib": [ - "dom", - "esnext", - ], - "allowJs": true, - "watch": true, - "moduleResolution": "node", - } +{ + "compilerOptions": { + "target": "EsNext", + "module": "ESNext", + "lib": [ + "dom", + "esnext", + ], + "allowJs": true, + "watch": true, + "moduleResolution": "node", + } } \ No newline at end of file