From 2d1d2cc4e7982c9bbf7daa0ac4ea317960d0416a Mon Sep 17 00:00:00 2001
From: Nidboj132 <lol2s@vp.pl>
Date: Sun, 26 Feb 2023 15:49:11 +0100
Subject: Add files via upload

---
 frontend/src/App.css                |  50 ++++---------------
 frontend/src/App.js                 |  16 ++++++
 frontend/src/components/sidebar.css |  73 +++++++++++++++++++++++++++
 frontend/src/components/sidebar.js  |  95 ++++++++++++++++++++++++++++++++++++
 frontend/src/fonts/D-DIN.otf        | Bin 0 -> 59860 bytes
 frontend/src/imgs/0.png             | Bin 0 -> 41216 bytes
 frontend/src/imgs/1.png             | Bin 0 -> 3308 bytes
 frontend/src/imgs/2.png             | Bin 0 -> 4093 bytes
 frontend/src/imgs/3.png             | Bin 0 -> 9600 bytes
 frontend/src/imgs/4.png             | Bin 0 -> 12164 bytes
 frontend/src/imgs/5.png             | Bin 0 -> 19087 bytes
 frontend/src/imgs/6.png             | Bin 0 -> 14501 bytes
 frontend/src/imgs/7.png             | Bin 0 -> 12182 bytes
 frontend/src/imgs/8.png             | Bin 0 -> 5605 bytes
 frontend/src/index.js               |  10 ++++
 15 files changed, 203 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/App.js
 create mode 100644 frontend/src/components/sidebar.css
 create mode 100644 frontend/src/components/sidebar.js
 create mode 100644 frontend/src/fonts/D-DIN.otf
 create mode 100644 frontend/src/imgs/0.png
 create mode 100644 frontend/src/imgs/1.png
 create mode 100644 frontend/src/imgs/2.png
 create mode 100644 frontend/src/imgs/3.png
 create mode 100644 frontend/src/imgs/4.png
 create mode 100644 frontend/src/imgs/5.png
 create mode 100644 frontend/src/imgs/6.png
 create mode 100644 frontend/src/imgs/7.png
 create mode 100644 frontend/src/imgs/8.png
 create mode 100644 frontend/src/index.js

(limited to 'frontend/src')

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2c5e2ef..78dea16 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,41 +1,9 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+body {
+    background-color: #141520;
+    margin: 0;
+}
+
+@font-face {
+    font-family: 'D-DIN';
+    src: local('D-DIN'), url(./fonts/D-DIN.otf) format('oft');
+}
\ No newline at end of file
diff --git a/frontend/src/App.js b/frontend/src/App.js
new file mode 100644
index 0000000..e853b02
--- /dev/null
+++ b/frontend/src/App.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Sidebar from "./components/sidebar.js"
+import "./App.css";
+import "./fonts/D-DIN.otf"
+
+
+
+export default function App() {
+    
+    return (
+        <>
+        <Sidebar/>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
new file mode 100644
index 0000000..9742f0e
--- /dev/null
+++ b/frontend/src/components/sidebar.css
@@ -0,0 +1,73 @@
+#sidebar {
+    background-color: #2b2e46;
+    width: 320px;    height: 100vh;
+    min-height: 840px;
+}
+
+#sidebar>div:nth-child(1){height: 140px;} /* logo */
+
+button#side-grid {
+    border: 0;
+    background-color: #202232;
+    border-radius: 20px;
+    font-size: 18px;
+    color: #cdcfdf;
+    width: 300px;
+    
+    transition: 
+    background-color .2s, 
+    border-radius .5s,
+    width .3s;
+}
+span {
+    font-family: D-DIN;
+    opacity: 1;
+    transition: opacity .1s;
+}
+button#side-grid:hover {
+    background-color: #141520 !important;
+    border-radius: 10px !important;
+    cursor: pointer;
+}
+
+button>img{
+    height: 20px;
+    float: left;
+    padding-left: 4px;
+    filter: invert(0.8);
+    scale: 1.1;
+}
+
+#side-menu { /* just the menu button */
+    border: 0;
+    position: absolute;
+    background-color: transparent;
+    left: 6px;    top: 6px;
+    width: 40px;    height: 40px;
+    cursor: pointer;
+}
+
+#sidebar-list { /* buttons */
+    z-index: 1;
+    min-height: 700px;
+    width: 308px; height: calc(100vh - 140px); /* calc - logo */
+    position: absolute;
+    background-color: #2b2e46;
+    display: grid;
+    padding: 0 6px;
+    row-gap: 8px;
+    grid-template-rows: 
+    60px 40px 40px
+    30px 40px 40px 40px
+    30px 40px 40px;
+
+    transition: width .3s;
+}
+
+#sidebar-content { 
+    position: absolute;
+    background-color: #202232;
+    left: 52px;
+    min-height: 700px;
+    width: 268px;    height: calc(100vh - 140px); /* calc - logo */
+}
\ No newline at end of file
diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
new file mode 100644
index 0000000..0bc5a1e
--- /dev/null
+++ b/frontend/src/components/sidebar.js
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import "./sidebar.css";
+import img0 from "../imgs/0.png"
+import img1 from "../imgs/1.png"
+import img2 from "../imgs/2.png"
+import img3 from "../imgs/3.png"
+import img4 from "../imgs/4.png"
+import img5 from "../imgs/5.png"
+import img6 from "../imgs/6.png"
+import img7 from "../imgs/7.png"
+import img8 from "../imgs/8.png"
+
+
+export default function Sidebar() {
+const sidebar_text = ['Home\u00A0page',"Profile","News","Records","Discussions","Leaderboards","Score\u00A0log"] // text on the buttons
+const [sidebar, setSidebar] = React.useState();
+
+
+// Locks button for 200ms before it can be clicked again, prevents spam
+const [isLocked, setIsLocked] = React.useState(false);
+function HandleLock(arg) {
+if (!isLocked) {
+    setIsLocked(true);
+        setTimeout(() => setIsLocked(false), 200);
+    SidebarHide(arg)
+    }
+}
+
+
+// Clicked buttons
+function SidebarClick(x){
+const btn = document.querySelectorAll("button#side-grid");
+
+
+sidebar_text.forEach((e,i) =>(
+    btn[i].style.backgroundColor="#202232",
+    btn[i].style.borderRadius="20px"
+)) 
+
+btn[x].style.backgroundColor="#141520"
+btn[x].style.borderRadius="10px"
+}
+
+
+// The menu button
+function SidebarHide(){
+const btn   = document.querySelectorAll("button#side-grid");
+const span  = document.querySelectorAll("#side-grid>span");
+const side  = document.querySelector("#sidebar-list");
+
+if(sidebar===1){
+    setSidebar(0)
+    side.style.width="308px"
+    sidebar_text.forEach((e, i) =>(
+        btn[i].style.width="300px",
+        setTimeout(() => {span[i].style.opacity="1";span[i].textContent=e}, 200)
+    ))
+} else {
+    side.style.width="40px";
+    setSidebar(1)
+    sidebar_text.forEach((e,i) =>(
+        btn[i].style.width="40px",
+        span[i].style.opacity="0",
+        setTimeout(() => {span[i].textContent=""}, 100)
+    )) 
+    }
+}
+
+return (
+<div id='sidebar'>
+    <div>
+        <img src={img0} alt="" width='320px' />
+    </div>
+    <div id='sidebar-list'>
+        <button onClick={()=>HandleLock()} id='side-menu'><img src={img1} alt="" /></button>
+            <p id='side-grid'></p> {/* p's are spaces between buttons */}
+        <button onClick={()=>SidebarClick(0)} id='side-grid'><img src={img2} alt="" /><span>Home page</span></button>
+        <button onClick={()=>SidebarClick(1)} id='side-grid'><img src={img3} alt="" /><span>Profile</span></button>
+            <p id='side-grid'></p>
+        <button onClick={()=>SidebarClick(2)} id='side-grid'><img src={img4} alt="" /><span>News</span></button>
+        <button onClick={()=>SidebarClick(3)} id='side-grid'><img src={img5} alt="" /><span>Records</span></button>
+        <button onClick={()=>SidebarClick(4)} id='side-grid'><img src={img6} alt="" /><span>Discussions</span></button>
+            <p id='side-grid'></p>
+        <button onClick={()=>SidebarClick(5)} id='side-grid'><img src={img7} alt="" /><span>Leaderboards</span></button>
+        <button onClick={()=>SidebarClick(6)} id='side-grid'><img src={img8} alt="" /><span>Score&nbsp;log</span></button>
+    </div>
+    <div id='sidebar-content'>
+
+    </div>
+</div>
+    )
+}
+
+
diff --git a/frontend/src/fonts/D-DIN.otf b/frontend/src/fonts/D-DIN.otf
new file mode 100644
index 0000000..ea5c4c8
Binary files /dev/null and b/frontend/src/fonts/D-DIN.otf differ
diff --git a/frontend/src/imgs/0.png b/frontend/src/imgs/0.png
new file mode 100644
index 0000000..37be8ca
Binary files /dev/null and b/frontend/src/imgs/0.png differ
diff --git a/frontend/src/imgs/1.png b/frontend/src/imgs/1.png
new file mode 100644
index 0000000..64d61fa
Binary files /dev/null and b/frontend/src/imgs/1.png differ
diff --git a/frontend/src/imgs/2.png b/frontend/src/imgs/2.png
new file mode 100644
index 0000000..ac4f96b
Binary files /dev/null and b/frontend/src/imgs/2.png differ
diff --git a/frontend/src/imgs/3.png b/frontend/src/imgs/3.png
new file mode 100644
index 0000000..2be4f03
Binary files /dev/null and b/frontend/src/imgs/3.png differ
diff --git a/frontend/src/imgs/4.png b/frontend/src/imgs/4.png
new file mode 100644
index 0000000..083d00d
Binary files /dev/null and b/frontend/src/imgs/4.png differ
diff --git a/frontend/src/imgs/5.png b/frontend/src/imgs/5.png
new file mode 100644
index 0000000..81f17e8
Binary files /dev/null and b/frontend/src/imgs/5.png differ
diff --git a/frontend/src/imgs/6.png b/frontend/src/imgs/6.png
new file mode 100644
index 0000000..71b57a6
Binary files /dev/null and b/frontend/src/imgs/6.png differ
diff --git a/frontend/src/imgs/7.png b/frontend/src/imgs/7.png
new file mode 100644
index 0000000..2e8df24
Binary files /dev/null and b/frontend/src/imgs/7.png differ
diff --git a/frontend/src/imgs/8.png b/frontend/src/imgs/8.png
new file mode 100644
index 0000000..df9a104
Binary files /dev/null and b/frontend/src/imgs/8.png differ
diff --git a/frontend/src/index.js b/frontend/src/index.js
new file mode 100644
index 0000000..20f2cdc
--- /dev/null
+++ b/frontend/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App/>
+  </React.StrictMode>
+);
-- 
cgit v1.2.3