From f9dbf67db6af1f5975103dbabe2dba46c8c522b9 Mon Sep 17 00:00:00 2001 From: SquareScreamYT Date: Sun, 14 Jul 2024 20:03:50 +0800 Subject: [PATCH] Viossa Dictionary --- viossa-dictionary/index.html | 39 +++++++++ viossa-dictionary/script.js | 35 ++++++++ viossa-dictionary/style.css | 165 +++++++++++++++++++++++++++++++++++ viossa-dictionary/words.json | 14 +++ 4 files changed, 253 insertions(+) create mode 100644 viossa-dictionary/index.html create mode 100644 viossa-dictionary/script.js create mode 100644 viossa-dictionary/style.css create mode 100644 viossa-dictionary/words.json diff --git a/viossa-dictionary/index.html b/viossa-dictionary/index.html new file mode 100644 index 0000000..d076b12 --- /dev/null +++ b/viossa-dictionary/index.html @@ -0,0 +1,39 @@ + + + + + + SquareScreamYT's Viossa Dictionary + + + + + + + + + + +
+
+ +
+
+
+
+

Word Name

+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/viossa-dictionary/script.js b/viossa-dictionary/script.js new file mode 100644 index 0000000..ae4cf30 --- /dev/null +++ b/viossa-dictionary/script.js @@ -0,0 +1,35 @@ +function changeColorScheme() { + var selectedScheme = document.getElementById('color-scheme').value; + document.body.className = selectedScheme + '-scheme'; + localStorage.setItem('colorScheme', selectedScheme); +} + +function loadColorScheme() { + var savedScheme = localStorage.getItem('colorScheme'); + if (savedScheme) { + document.body.className = savedScheme + '-scheme'; + document.getElementById('color-scheme').value = savedScheme; + } +} + +document.addEventListener('DOMContentLoaded', loadColorScheme); + +fetch('words.json') + .then(response => response.json()) + .then(data => { + const wordsContainer = document.getElementById('sidebar'); + const definitionsElement = document.getElementById('wordDetails'); + + data.forEach((item, index) => { + const button = document.createElement('button'); + button.textContent = item.word; + button.addEventListener('click', () => { + definitionsElement.innerHTML = ` +

Definition 1: ${item.word.definition1}

+

Definition 2: ${item.word.definition2}

+ `; + }); + wordsContainer.appendChild(button); + }); + }) + .catch(error => console.error('Error:', error)); \ No newline at end of file diff --git a/viossa-dictionary/style.css b/viossa-dictionary/style.css new file mode 100644 index 0000000..47b427c --- /dev/null +++ b/viossa-dictionary/style.css @@ -0,0 +1,165 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lato:wght@300&family=Noto+Color+Emoji:wght@400&display=swap'); +@font-face { + font-family: 'SF Pro Rounded'; + font-style: normal; + font-weight: 400; + src: url("https://raw.githubusercontent.com/SquareScreamYT/sf-fonts/master/SF-Pro-Rounded-Light.otf") format("opentype"); +} + +:root { + --bg-color: #ecfeff; + --text-color: #083344; + --bg-color-dark: #cffafe; + --bg-color-darker: #a5f3fc; + --bg-color-darkest: #67e8f9; + --border-color: #22d3ee; + --border-color-dark: #06b6d4; + --link-color: #84cc16; +} + +.white-scheme { + --bg-color: #f8fafc; + --text-color: #0f172a; + --bg-color-dark: #f1f5f9; + --bg-color-darker: #e2e8f0; + --bg-color-darkest: #cbd5e0; + --border-color: #64748b; + --border-color-dark: #475569; + --link-color: #818cf8; +} +.black-scheme { + --bg-color: #0f172a; + --text-color: #f8fafc; + --bg-color-dark: #1e293b; + --bg-color-darker: #334155; + --bg-color-darkest: #4c586b; + --border-color: #64748b; + --border-color-dark: #94a3b8; + --link-color: #818cf8; +} +.blue-scheme { + --bg-color: #ecfeff; + --text-color: #083344; + --bg-color-dark: #cffafe; + --bg-color-darker: #a5f3fc; + --bg-color-darkest: #67e8f9; + --border-color: #22d3ee; + --border-color-dark: #06b6d4; + --link-color: #818cf8; +} +.teal-scheme { + --bg-color: #f0fdfa; + --text-color: #134e4a; + --bg-color-dark: #ccfbf1; + --bg-color-darker: #99f6e4; + --bg-color-darkest: #5eead4; + --border-color: #2dd4bf; + --border-color-dark: #14b8a6; + --link-color: #818cf8; +} +.emerald-scheme { + --bg-color: #ecfdf5; + --text-color: #064e3b; + --bg-color-dark: #d1fae5; + --bg-color-darker: #a7f3d0; + --bg-color-darkest: #6ee7b7; + --border-color: #34d399; + --border-color-dark: #10b981; + --link-color: #818cf8; +} + +select { + font-family: "Nunito", "SF Pro Rounded", "Apple Color Emoji", "Noto Color Emoji", "Lato", system-ui, -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif, monospace; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-color: var(--bg-color-darkest); + color: var(--text-color); + padding: 10px; + font-size: 1em; + border: none; + border-radius: 8px; + cursor: pointer; + outline: none; + width: 150px; + text-align: center; + display: inline-block; + box-shadow: none; +} + +html { + height: 100%; + width: 100%; + overflow-x:hidden +} + +body { + background-color: var(--bg-color); + color: var(--text-color); + font-family: "Nunito", "SF Pro Rounded", "Apple Color Emoji", "Noto Color Emoji", "Lato", system-ui, -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif, monospace; + margin: 0; + padding-left: 2vh; + padding-right: 2vh; + padding-top: 2vh; + padding-bottom: 2vh; + transition: background-color 0.3s ease; +} + +a { + padding: 5px 5px; + display: inline-block; + color: var(--link-color); + text-decoration: none; +} + +.container { + display: flex; + height: 96vh; + gap: 10px; +} + +.sidebar { + width: 250px; + background-color: var(--bg-color-dark); + border-radius: 30px; + padding: 10px; + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +#search { + font-family: "Nunito", "SF Pro Rounded", "Apple Color Emoji", "Noto Color Emoji", "Lato", system-ui, -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif, monospace; + margin-bottom: 20px; + padding: 10px; + width: 100%; + box-sizing: border-box; + border-radius: 25px; + border-width: 0; + background-color: var(--bg-color-darker); +} + +#wordList { + flex-grow: 1; + overflow-y: auto; +} + +.word-entry { + cursor: pointer; + padding: 10px; + border-bottom: 1px solid #ddd; +} + +.word-entry:last-child { + border-bottom: none; +} + +.content { + background-color: var(--bg-color-darker); + border-radius: 30px; + padding: 20px; + box-sizing: border-box; + display: flex; + flex-direction: column; + flex-grow: 1; +} \ No newline at end of file diff --git a/viossa-dictionary/words.json b/viossa-dictionary/words.json new file mode 100644 index 0000000..386be62 --- /dev/null +++ b/viossa-dictionary/words.json @@ -0,0 +1,14 @@ +[ + { + "word1": { + "definition1": "First definition", + "definition2": "Second definition" + } + }, + { + "word2": { + "definition1": "First definition", + "definition2": "Second definition" + } + } +] \ No newline at end of file