Frontend structure pt.2

4 files changed, 138 insertions, 2 deletions

diff --git a/static/common.css b/static/common.css
index b670fe9..9abe81a 100644
--- a/static/common.css
+++ b/static/common.css
@@ -1,3 +1,92 @@
-html {
-    background-color: lightgray;
+:root {
+    --colorscheme-gray: #4A4A4A;
+    --colorscheme-white: #F5F5F5;
+    --colorscheme-cyan: #009688;
+    --colorscheme-red: #FF5722;
+    --colorscheme-light-gray: #C0C0C0;
+    --colorscheme-dark-gray: #1E1E1E;
+    --colorscheme-not-so-dark-gray: #2D2D2D;
+
+    --menu-width: 300px;
+    --menu-border-width: 2.5px;
+    --menu-margin: .25%;
+    --menu-padding: 10px;
+
+    --content-padding: 2%;
+    --content-width-abs: calc(100% - (var(--menu-width) + 2*var(--menu-border-width) + 2*var(--menu-margin) + 2*var(--menu-padding)));
+}
+
+html, body {
+    padding: 0px;
+    margin: 0px;
+}
+
+h1, p {
+    margin: 5px;
+    font-family: "Space Grotesk", sans-serif;
+}
+
+body {
+    height: 100%;
+    background-color: var(--colorscheme-not-so-dark-gray);
+    overflow-x: hidden;
+}
+
+#menu {
+    background-color: var(--colorscheme-dark-gray);
+    position: fixed;
+    transform: translate();
+    top: 0;
+    left: var(--content-width-abs); 
+    margin: var(--menu-margin);
+    padding: var(--menu-padding);
+    min-width: var(--menu-width);
+    height: calc(100% - (2*var(--menu-border-width) + 3*var(--menu-margin) + 2*var(--menu-padding)));
+    border: var(--colorscheme-white) var(--menu-border-width) solid;
+    border-radius: 10px;
+    scroll-snap-type: x mandatory;
+}
+
+.control {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+}
+
+#content {
+    color: var(--colorscheme-white);
+    padding: var(--content-padding);
+    width: calc(var(--content-width-abs) - 2*var(--content-padding));
+}
+
+#content > h1 {
+    font-size: 50px;
+    color: var(--colorscheme-red);
+}
+
+#content > p {
+    font-size: 18px;
+}
+
+
+.toggleBtn {
+    background-color: transparent;
+    border: 0px;
+}
+
+body.light {
+    background-color: var(--colorscheme-white);
+}
+
+#menu.light {
+    background-color: var(--colorscheme-light-gray);
+    border-color: var(--colorscheme-gray);
+}
+
+#content.light {
+    color: var(--colorscheme-dark-gray);
+}
+
+#content.light > h1 {
+    text-shadow: 1px 1px 2px var(--colorscheme-gray);
 }
diff --git a/static/common.js b/static/common.js
new file mode 100644
index 0000000..1d6234b
--- /dev/null
+++ b/static/common.js
@@ -0,0 +1,33 @@
+var isLightMode = false;
+
+function ToggleMode() {
+    if (isLightMode)
+        setDarkMode();
+    else 
+        setLightMode();
+}
+
+function setLightMode() {
+    swapClasses("dark", "light");
+    isLightMode = true;
+    document.getElementById("toggleIcon").src = "static/toggle.svg"
+}
+
+function setDarkMode() {
+    swapClasses("light", "dark");
+    isLightMode = false;
+    document.getElementById("toggleIcon").src = "static/toggle_dark.svg"
+}
+
+function swapClasses(baseClass, newClass) {
+    let elements = document.getElementsByClassName(baseClass);
+    console.log(elements)
+    var els = [];
+    for (const element of elements) {
+        els.push(element);
+    }
+    for (var el of els) {
+        el.classList.remove(baseClass);
+        el.classList.add(newClass);
+    }
+}
diff --git a/static/toggle.svg b/static/toggle.svg
new file mode 100644
index 0000000..cacd6e8
--- /dev/null
+++ b/static/toggle.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#2D2D2D" width="64px" height="64px" viewBox="-3.2 -3.2 38.40 38.40" xmlns="http://www.w3.org/2000/svg" transform="rotate(0)" stroke="#2D2D2D">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.384"/>
+
<g id="SVGRepo_iconCarrier"> <title/> <g data-name="Layer 88" id="Layer_88"> <path d="M18,27H14a2,2,0,0,1-2-2V21.16a10,10,0,0,1-6-9.47A10.14,10.14,0,0,1,15.69,2h0A10,10,0,0,1,20,21.16V25A2,2,0,0,1,18,27ZM15.75,4A8.12,8.12,0,0,0,8,11.75a8,8,0,0,0,5.33,7.79,1,1,0,0,1,.67.94V25h4V20.48a1,1,0,0,1,.67-.94,8,8,0,0,0,2.9-13.28A7.85,7.85,0,0,0,15.75,4Z"/> <path d="M19,30H13a1,1,0,0,1,0-2h6a1,1,0,0,1,0,2Z"/> <path d="M15,24V19.48a9,9,0,0,1-6-8.76c.09-3,1.71-4.93,4.52-6.32C9.49,4.47,7.12,8,7,11.72a9,9,0,0,0,6,8.76V25a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1H16A1,1,0,0,1,15,24Z"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/static/toggle_dark.svg b/static/toggle_dark.svg
new file mode 100644
index 0000000..29acc55
--- /dev/null
+++ b/static/toggle_dark.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="64px" height="64px" viewBox="-3.2 -3.2 38.40 38.40" xmlns="http://www.w3.org/2000/svg" transform="rotate(0)" stroke="#ffffff">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.384"/>
+
<g id="SVGRepo_iconCarrier"> <title/> <g data-name="Layer 88" id="Layer_88"> <path d="M18,27H14a2,2,0,0,1-2-2V21.16a10,10,0,0,1-6-9.47A10.14,10.14,0,0,1,15.69,2h0A10,10,0,0,1,20,21.16V25A2,2,0,0,1,18,27ZM15.75,4A8.12,8.12,0,0,0,8,11.75a8,8,0,0,0,5.33,7.79,1,1,0,0,1,.67.94V25h4V20.48a1,1,0,0,1,.67-.94,8,8,0,0,0,2.9-13.28A7.85,7.85,0,0,0,15.75,4Z"/> <path d="M19,30H13a1,1,0,0,1,0-2h6a1,1,0,0,1,0,2Z"/> <path d="M15,24V19.48a9,9,0,0,1-6-8.76c.09-3,1.71-4.93,4.52-6.32C9.49,4.47,7.12,8,7,11.72a9,9,0,0,0,6,8.76V25a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1H16A1,1,0,0,1,15,24Z"/> </g> </g>
+
</svg>
\ No newline at end of file