aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
authorNidboj132 <lol2s@vp.pl>2023-02-26 15:49:11 +0100
committerGitHub <noreply@github.com>2023-02-26 15:49:11 +0100
commit2d1d2cc4e7982c9bbf7daa0ac4ea317960d0416a (patch)
tree53b6a66cbb0b0ab49efe1c876878fed4d69e212e /frontend/src
parentactually add update profile route (#30) (diff)
downloadlphub-2d1d2cc4e7982c9bbf7daa0ac4ea317960d0416a.tar.gz
lphub-2d1d2cc4e7982c9bbf7daa0ac4ea317960d0416a.tar.bz2
lphub-2d1d2cc4e7982c9bbf7daa0ac4ea317960d0416a.zip
Add files via upload
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/App.css50
-rw-r--r--frontend/src/App.js16
-rw-r--r--frontend/src/components/sidebar.css73
-rw-r--r--frontend/src/components/sidebar.js95
-rw-r--r--frontend/src/fonts/D-DIN.otfbin0 -> 59860 bytes
-rw-r--r--frontend/src/imgs/0.pngbin0 -> 41216 bytes
-rw-r--r--frontend/src/imgs/1.pngbin0 -> 3308 bytes
-rw-r--r--frontend/src/imgs/2.pngbin0 -> 4093 bytes
-rw-r--r--frontend/src/imgs/3.pngbin0 -> 9600 bytes
-rw-r--r--frontend/src/imgs/4.pngbin0 -> 12164 bytes
-rw-r--r--frontend/src/imgs/5.pngbin0 -> 19087 bytes
-rw-r--r--frontend/src/imgs/6.pngbin0 -> 14501 bytes
-rw-r--r--frontend/src/imgs/7.pngbin0 -> 12182 bytes
-rw-r--r--frontend/src/imgs/8.pngbin0 -> 5605 bytes
-rw-r--r--frontend/src/index.js10
15 files changed, 203 insertions, 41 deletions
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 @@
1#root { 1body {
2 max-width: 1280px; 2 background-color: #141520;
3 margin: 0 auto; 3 margin: 0;
4 padding: 2rem; 4}
5 text-align: center; 5
6} 6@font-face {
7 7 font-family: 'D-DIN';
8.logo { 8 src: local('D-DIN'), url(./fonts/D-DIN.otf) format('oft');
9 height: 6em; 9} \ No newline at end of file
10 padding: 1.5em;
11 will-change: filter;
12}
13.logo:hover {
14 filter: drop-shadow(0 0 2em #646cffaa);
15}
16.logo.react:hover {
17 filter: drop-shadow(0 0 2em #61dafbaa);
18}
19
20@keyframes logo-spin {
21 from {
22 transform: rotate(0deg);
23 }
24 to {
25 transform: rotate(360deg);
26 }
27}
28
29@media (prefers-reduced-motion: no-preference) {
30 a:nth-of-type(2) .logo {
31 animation: logo-spin infinite 20s linear;
32 }
33}
34
35.card {
36 padding: 2em;
37}
38
39.read-the-docs {
40 color: #888;
41}
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 @@
1import React from 'react';
2
3import Sidebar from "./components/sidebar.js"
4import "./App.css";
5import "./fonts/D-DIN.otf"
6
7
8
9export default function App() {
10
11 return (
12 <>
13 <Sidebar/>
14 </>
15 )
16} \ 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 @@
1#sidebar {
2 background-color: #2b2e46;
3 width: 320px; height: 100vh;
4 min-height: 840px;
5}
6
7#sidebar>div:nth-child(1){height: 140px;} /* logo */
8
9button#side-grid {
10 border: 0;
11 background-color: #202232;
12 border-radius: 20px;
13 font-size: 18px;
14 color: #cdcfdf;
15 width: 300px;
16
17 transition:
18 background-color .2s,
19 border-radius .5s,
20 width .3s;
21}
22span {
23 font-family: D-DIN;
24 opacity: 1;
25 transition: opacity .1s;
26}
27button#side-grid:hover {
28 background-color: #141520 !important;
29 border-radius: 10px !important;
30 cursor: pointer;
31}
32
33button>img{
34 height: 20px;
35 float: left;
36 padding-left: 4px;
37 filter: invert(0.8);
38 scale: 1.1;
39}
40
41#side-menu { /* just the menu button */
42 border: 0;
43 position: absolute;
44 background-color: transparent;
45 left: 6px; top: 6px;
46 width: 40px; height: 40px;
47 cursor: pointer;
48}
49
50#sidebar-list { /* buttons */
51 z-index: 1;
52 min-height: 700px;
53 width: 308px; height: calc(100vh - 140px); /* calc - logo */
54 position: absolute;
55 background-color: #2b2e46;
56 display: grid;
57 padding: 0 6px;
58 row-gap: 8px;
59 grid-template-rows:
60 60px 40px 40px
61 30px 40px 40px 40px
62 30px 40px 40px;
63
64 transition: width .3s;
65}
66
67#sidebar-content {
68 position: absolute;
69 background-color: #202232;
70 left: 52px;
71 min-height: 700px;
72 width: 268px; height: calc(100vh - 140px); /* calc - logo */
73} \ 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 @@
1import React from 'react';
2
3import "./sidebar.css";
4import img0 from "../imgs/0.png"
5import img1 from "../imgs/1.png"
6import img2 from "../imgs/2.png"
7import img3 from "../imgs/3.png"
8import img4 from "../imgs/4.png"
9import img5 from "../imgs/5.png"
10import img6 from "../imgs/6.png"
11import img7 from "../imgs/7.png"
12import img8 from "../imgs/8.png"
13
14
15export default function Sidebar() {
16const sidebar_text = ['Home\u00A0page',"Profile","News","Records","Discussions","Leaderboards","Score\u00A0log"] // text on the buttons
17const [sidebar, setSidebar] = React.useState();
18
19
20// Locks button for 200ms before it can be clicked again, prevents spam
21const [isLocked, setIsLocked] = React.useState(false);
22function HandleLock(arg) {
23if (!isLocked) {
24 setIsLocked(true);
25 setTimeout(() => setIsLocked(false), 200);
26 SidebarHide(arg)
27 }
28}
29
30
31// Clicked buttons
32function SidebarClick(x){
33const btn = document.querySelectorAll("button#side-grid");
34
35
36sidebar_text.forEach((e,i) =>(
37 btn[i].style.backgroundColor="#202232",
38 btn[i].style.borderRadius="20px"
39))
40
41btn[x].style.backgroundColor="#141520"
42btn[x].style.borderRadius="10px"
43}
44
45
46// The menu button
47function SidebarHide(){
48const btn = document.querySelectorAll("button#side-grid");
49const span = document.querySelectorAll("#side-grid>span");
50const side = document.querySelector("#sidebar-list");
51
52if(sidebar===1){
53 setSidebar(0)
54 side.style.width="308px"
55 sidebar_text.forEach((e, i) =>(
56 btn[i].style.width="300px",
57 setTimeout(() => {span[i].style.opacity="1";span[i].textContent=e}, 200)
58 ))
59} else {
60 side.style.width="40px";
61 setSidebar(1)
62 sidebar_text.forEach((e,i) =>(
63 btn[i].style.width="40px",
64 span[i].style.opacity="0",
65 setTimeout(() => {span[i].textContent=""}, 100)
66 ))
67 }
68}
69
70return (
71<div id='sidebar'>
72 <div>
73 <img src={img0} alt="" width='320px' />
74 </div>
75 <div id='sidebar-list'>
76 <button onClick={()=>HandleLock()} id='side-menu'><img src={img1} alt="" /></button>
77 <p id='side-grid'></p> {/* p's are spaces between buttons */}
78 <button onClick={()=>SidebarClick(0)} id='side-grid'><img src={img2} alt="" /><span>Home page</span></button>
79 <button onClick={()=>SidebarClick(1)} id='side-grid'><img src={img3} alt="" /><span>Profile</span></button>
80 <p id='side-grid'></p>
81 <button onClick={()=>SidebarClick(2)} id='side-grid'><img src={img4} alt="" /><span>News</span></button>
82 <button onClick={()=>SidebarClick(3)} id='side-grid'><img src={img5} alt="" /><span>Records</span></button>
83 <button onClick={()=>SidebarClick(4)} id='side-grid'><img src={img6} alt="" /><span>Discussions</span></button>
84 <p id='side-grid'></p>
85 <button onClick={()=>SidebarClick(5)} id='side-grid'><img src={img7} alt="" /><span>Leaderboards</span></button>
86 <button onClick={()=>SidebarClick(6)} id='side-grid'><img src={img8} alt="" /><span>Score&nbsp;log</span></button>
87 </div>
88 <div id='sidebar-content'>
89
90 </div>
91</div>
92 )
93}
94
95
diff --git a/frontend/src/fonts/D-DIN.otf b/frontend/src/fonts/D-DIN.otf
new file mode 100644
index 0000000..ea5c4c8
--- /dev/null
+++ b/frontend/src/fonts/D-DIN.otf
Binary files differ
diff --git a/frontend/src/imgs/0.png b/frontend/src/imgs/0.png
new file mode 100644
index 0000000..37be8ca
--- /dev/null
+++ b/frontend/src/imgs/0.png
Binary files differ
diff --git a/frontend/src/imgs/1.png b/frontend/src/imgs/1.png
new file mode 100644
index 0000000..64d61fa
--- /dev/null
+++ b/frontend/src/imgs/1.png
Binary files differ
diff --git a/frontend/src/imgs/2.png b/frontend/src/imgs/2.png
new file mode 100644
index 0000000..ac4f96b
--- /dev/null
+++ b/frontend/src/imgs/2.png
Binary files differ
diff --git a/frontend/src/imgs/3.png b/frontend/src/imgs/3.png
new file mode 100644
index 0000000..2be4f03
--- /dev/null
+++ b/frontend/src/imgs/3.png
Binary files differ
diff --git a/frontend/src/imgs/4.png b/frontend/src/imgs/4.png
new file mode 100644
index 0000000..083d00d
--- /dev/null
+++ b/frontend/src/imgs/4.png
Binary files differ
diff --git a/frontend/src/imgs/5.png b/frontend/src/imgs/5.png
new file mode 100644
index 0000000..81f17e8
--- /dev/null
+++ b/frontend/src/imgs/5.png
Binary files differ
diff --git a/frontend/src/imgs/6.png b/frontend/src/imgs/6.png
new file mode 100644
index 0000000..71b57a6
--- /dev/null
+++ b/frontend/src/imgs/6.png
Binary files differ
diff --git a/frontend/src/imgs/7.png b/frontend/src/imgs/7.png
new file mode 100644
index 0000000..2e8df24
--- /dev/null
+++ b/frontend/src/imgs/7.png
Binary files differ
diff --git a/frontend/src/imgs/8.png b/frontend/src/imgs/8.png
new file mode 100644
index 0000000..df9a104
--- /dev/null
+++ b/frontend/src/imgs/8.png
Binary files 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 @@
1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import App from './App';
4
5const root = ReactDOM.createRoot(document.getElementById('root'));
6root.render(
7 <React.StrictMode>
8 <App/>
9 </React.StrictMode>
10);
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 23:49:02 +0000