Viossa Dictionary

SquareScreamYT · Jul 14, 2024 · f9dbf67 · f9dbf67
1 parent 0e16d1a
commit f9dbf67
Show file tree

Hide file tree

Showing 4 changed files with 253 additions and 0 deletions.
diff --git a/viossa-dictionary/index.html b/viossa-dictionary/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>SquareScreamYT's Viossa Dictionary</title>
+  <meta http-equiv='cache-control' content='no-cache'> 
+  <html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml">
+  <meta http-equiv='expires' content='0'> 
+  <meta http-equiv='pragma' content='no-cache'>
+  <meta name="google" content="notranslate">
+  <meta http-equiv="Content-Language" content="en">
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+  <div class="container">
+    <div class="sidebar">
+      <input type="text" id="search" placeholder="Search for words...">
+      <div id="wordList"></div>
+    </div>
+    <div class="content">
+      <div style="display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;">
+        <h1 style="margin: 0;">Word Name</h1>
+        <select id="color-scheme" onchange="changeColorScheme()" style="margin-left: auto;">
+          <option value="white">White</option>
+          <option value="black">Black</option>
+          <option value="blue" selected>Blue (Default)</option>
+          <option value="teal">Teal</option>
+          <option value="emerald">Green</option>
+        </select>
+      </div>
+      <div id="wordDetails"></div>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/viossa-dictionary/script.js 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 = `
+          <p>Definition 1: ${item.word.definition1}</p>
+          <p>Definition 2: ${item.word.definition2}</p>
+        `;
+      });
+      wordsContainer.appendChild(button);
+    });
+  })
+  .catch(error => console.error('Error:', error));
diff --git a/viossa-dictionary/style.css 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;
+}
diff --git a/viossa-dictionary/words.json b/viossa-dictionary/words.json
@@ -0,0 +1,14 @@
+[
+  {
+    "word1": {
+      "definition1": "First definition",
+      "definition2": "Second definition"
+    }
+  },
+  {
+    "word2": {
+      "definition1": "First definition",
+      "definition2": "Second definition"
+    }
+  }
+]