Skip to content

Commit e6e7640

Browse files
rupnil-codesrupnil-codes
committed
(v0.2.0-alpha) Revamped UI
Just removed the old UI and made a completely new UI and tbh i feel like i can do pretty cool stuff from this point onwards! I'm reallly reallyy excited! Any suggestions/feedback is welcome!
1 parent 4fe09f8 commit e6e7640

File tree

6 files changed

+221
-63
lines changed

6 files changed

+221
-63
lines changed

‎src/components/Navbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "../styles/components/navbar.css";
1+
import "../styles/components/Navbar.css";
22

33
function Navbar() {
44

‎src/routes/landing.jsx‎

Lines changed: 83 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,92 @@
11
import "../styles/routes/landing.css";
2-
import {useState} from "react";
2+
// import {useState} from "react";
33

4-
function Landing() {
5-
const DEFAULT_TITLE = "C1PHΣR"
6-
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
7-
const [title, setTitle] = useState("C1PHΣR");
8-
9-
const glitchEffect = () => {
10-
let iterations = 0;
11-
12-
const interval = setInterval(() => {
13-
setTitle(
14-
title.split("")
15-
.map((letter, index) => {
16-
if (index < iterations) {
17-
return DEFAULT_TITLE[index];
18-
}
19-
20-
return letters[Math.floor(Math.random() * 26)]
21-
})
22-
.join("")
23-
);
24-
25-
if (iterations >= DEFAULT_TITLE.length) clearInterval(interval);
26-
27-
iterations += 1/3;
28-
}, 30);
29-
30-
};
314

5+
function Landing() {
326
return (
337
<>
34-
<div className={"landing"}>
35-
<h1
36-
className={"header-font"}
37-
onMouseOver={glitchEffect}
38-
>
39-
{title.split("").map((char, i) =>
40-
char === "Σ"
41-
? <span key={i} className="sigma-font">Σ</span>
42-
: char
43-
)}
44-
</h1>
45-
<h2>
46-
press
47-
<span className={"enter"}> ENTER </span>
48-
to continue
49-
<span className={"cursor"}> █</span>
50-
</h2>
51-
</div>
8+
<section className={"landing"}>
9+
<div className={"container"}>
10+
<div className={"side-container"}>
11+
<h1 className={"header-font"}>C1PH<span className={"sigma-font"}>Σ</span>R<span className={"cursor"}>_</span></h1>
12+
<p>Build a CYBERSECURITY related project.</p>
13+
<p>Get laptops, hacker kits, and more! </p>
14+
</div>
15+
<div className={"title-terminal-container"}>
16+
<div className={"titlebar"}>
17+
<div className={"actions"}>
18+
<div className={"circle red"}></div>
19+
<div className={"circle yellow"}></div>
20+
<div className={"circle green"}></div>
21+
</div>
22+
<div className={"title-container"}>
23+
<div className={"title"}>cipher.hackclub.com</div>
24+
</div>
25+
</div>
26+
<div className={"terminal-body"}>
27+
{/*<h1 className={"header-font"}>C1PH<span className={"sigma-font"}>Σ</span>R</h1>*/}
28+
<p>[Initializing] DONE...</p>
29+
<p>[Hacking] DONE...</p>
30+
</div>
31+
</div>
32+
</div>
33+
</section>
5234
</>
5335
)
5436
}
5537

56-
export default Landing
38+
export default Landing
39+
40+
41+
42+
// function Landing() {
43+
// const DEFAULT_TITLE = "C1PHΣR"
44+
// const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
45+
// const [title, setTitle] = useState("C1PHΣR");
46+
//
47+
// const glitchEffect = () => {
48+
// let iterations = 0;
49+
//
50+
// const interval = setInterval(() => {
51+
// setTitle(
52+
// title.split("")
53+
// .map((letter, index) => {
54+
// if (index < iterations) {
55+
// return DEFAULT_TITLE[index];
56+
// }
57+
//
58+
// return letters[Math.floor(Math.random() * 26)]
59+
// })
60+
// .join("")
61+
// );
62+
//
63+
// if (iterations >= DEFAULT_TITLE.length) clearInterval(interval);
64+
//
65+
// iterations += 1/3;
66+
// }, 30);
67+
//
68+
// };
69+
//
70+
// return (
71+
// <>
72+
// <div className={"landing"}>
73+
// <h1
74+
// className={"header-font"}
75+
// onMouseOver={glitchEffect}
76+
// >
77+
// {title.split("").map((char, i) =>
78+
// char === "Σ"
79+
// ? <span key={i} className="sigma-font">Σ</span>
80+
// : char
81+
// )}
82+
// </h1>
83+
// <h2>
84+
// press
85+
// <span className={"enter"}> ENTER </span>
86+
// to continue
87+
// <span className={"cursor"}> █</span>
88+
// </h2>
89+
// </div>
90+
// </>
91+
// )
92+
// }

src/styles/components/navbar.css renamed to src/styles/components/Navbar.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
align-items: center;
99

1010
height: 3.5rem;
11-
width: 80%;
11+
width: 75%;
1212

1313
margin-top: 1.5rem;
1414

‎src/styles/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
* {
3-
font-family: "Space Mono", monospace;
3+
font-family: "JetBrains Mono", monospace;
44
}
55

66
body {

‎src/styles/routes/landing.css‎

Lines changed: 131 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11

22
.landing {
3+
/*margin-top: 3.5rem;*/
4+
35
width: 100%;
46
height: 100%;
57

@@ -9,27 +11,143 @@
911
flex-direction: column;
1012
}
1113

12-
.landing h1 {
13-
height: 5rem;
14-
font-size: 7rem;
14+
.landing .container {
15+
height: 50%;
16+
width: 75%;
17+
18+
display: flex;
19+
align-items: center;
20+
21+
gap: 2rem;
1522
}
1623

17-
.landing h2 {
18-
font-family: "Space Mono", monospace;
19-
font-size: 1.3rem;
20-
font-weight: 400;
24+
.landing .side-container {
25+
margin-top: 3rem;
26+
27+
width: 45rem;
28+
height: 100%;
2129
}
2230

23-
.landing .enter {
24-
background-color: var(--clr-surface-tonal-a0);
25-
padding: 2px;
31+
.landing .title-terminal-container {
32+
width: 100%;
33+
height: 100%;
34+
35+
display: flex;
36+
flex-direction: column;
37+
/*justify-content: center;*/
38+
/*align-items: center;*/
39+
40+
border: 1px solid var(--clr-surface-a10);
41+
border-radius: 1rem;
42+
43+
backdrop-filter: blur(10px) brightness(0.5);
44+
45+
}
2646

27-
border-radius: 5px;
47+
.landing .title-terminal-container .titlebar {
48+
display: flex;
49+
align-items: center;
50+
justify-content: flex-start;
51+
52+
width: 100%;
53+
height: 3.5rem;
54+
55+
background-color: var(--clr-surface-a0);
56+
57+
border-radius: 1rem 1rem 0 0;
58+
border: 1px solid var(--clr-surface-a10);
59+
60+
margin-top: -1px;
61+
margin-left: -1px;
62+
}
63+
64+
.landing .title-terminal-container .titlebar .actions {
65+
height: 100%;
66+
position: absolute;
67+
68+
display: flex;
69+
align-items: center;
70+
justify-content: center;
71+
flex-direction: row;
72+
73+
gap: 0.5rem;
74+
margin-left: 1rem;
75+
}
2876

29-
margin-right: 0.5rem;
30-
margin-left: 0.5rem;
77+
.landing .title-terminal-container .titlebar .actions .circle {
78+
width: 0.9rem;
79+
height: 0.9rem;
80+
border-radius: 100%;
3181
}
3282

83+
.red {
84+
background-color: var(--soft-red);
85+
}
86+
.yellow {
87+
background-color: var(--soft-yellow);
88+
}
89+
.green {
90+
background-color: var(--soft-green);
91+
}
92+
93+
.landing .title-terminal-container .titlebar .title-container {
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
width: 100%;
98+
}
99+
100+
.landing .title-terminal-container .terminal-body {
101+
display: flex;
102+
flex-direction: column;
103+
104+
margin-left: 1.8rem;
105+
margin-top: 1.8rem;
106+
107+
width: 100%;
108+
height: 100%;
109+
}
110+
111+
.landing .title-terminal-container .terminal-body p {
112+
margin: 0.2rem;
113+
font-size: 0.94rem;
114+
}
115+
116+
.landing h1 {
117+
font-size: 2.5rem;
118+
margin: 0 0 1rem 0;
119+
}
120+
121+
.landing p {
122+
font-weight: 300;
123+
}
124+
125+
.landing .container .side-container p {
126+
font-size: 1.05rem;
127+
margin: 0.2rem;
128+
}
129+
130+
/*.landing h1 {*/
131+
/* height: 5rem;*/
132+
/* font-size: 7rem;*/
133+
/*}*/
134+
135+
/*.landing h2 {*/
136+
/* font-family: "Space Mono", monospace;*/
137+
/* font-size: 1.3rem;*/
138+
/* font-weight: 400;*/
139+
/*}*/
140+
141+
/*.landing .enter {*/
142+
/* background-color: var(--clr-surface-tonal-a0);*/
143+
/* padding: 2px;*/
144+
145+
/* border-radius: 5px;*/
146+
147+
/* margin-right: 0.5rem;*/
148+
/* margin-left: 0.5rem;*/
149+
/*}*/
150+
33151
.landing .cursor {
34152
animation: blink 1.5s infinite;
35153
}

‎src/styles/variables.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,8 @@
5151
--clr-info-a0: #21498a;
5252
--clr-info-a10: #4077d1;
5353
--clr-info-a20: #92b2e5;
54+
55+
--soft-red: #ec3750;
56+
--soft-yellow: #f2cc32;
57+
--soft-green: #33d6a6;
5458
}

0 commit comments

Comments
 (0)