Skip to content

Commit 9392e7a

Browse files
rupnil-codesrupnil-codes
committed
(v0.3.0-alpha) UI Revamp (#2)
REVAMPED THE UI AGAINNNN, now ts is final i swear. This is so peak. i really REALLLYYY love the soft glow behind the terminal. And overall the UI feels less cluttered and more "professional"
1 parent e6e7640 commit 9392e7a

File tree

9 files changed

+355
-157
lines changed

9 files changed

+355
-157
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
- [ ] When the user presses enter it may remove all the text (typewriter) and then do something.
66
- [ ] FIX: the logo in the navbar.
77
- [ ] When switching different tabs it should have a swoosh (slide left) animation or side rigth if reverse
8+
- [ ] Make the terminal interactive
89

910
## CHANGELOGS:

‎src/components/Navbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function Navbar() {
1010
<h1 className={"header-font"}>
1111
C1PH
1212
<span className={"sigma-font"}>Σ</span>
13-
R_
13+
R
1414
</h1>
1515
</div>
1616
</div>

‎src/routes/landing.jsx‎

Lines changed: 19 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -6,87 +6,39 @@ function Landing() {
66
return (
77
<>
88
<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>
9+
<section className={"hero"}>
10+
<h1 className={"header"}>CIPHER</h1>
11+
<p>Build a CYBERSECURITY related project.</p>
12+
<p>Get <i>laptops</i>, <i>hacker kits</i>, and more!</p>
13+
14+
<div className={"buttons"}>
15+
<div className={"button-container"}>
16+
Learn More
17+
</div>
18+
<div className={"button-container-important"}>
19+
RSVP
20+
</div>
1421
</div>
15-
<div className={"title-terminal-container"}>
22+
23+
<div className={"terminal"}>
1624
<div className={"titlebar"}>
1725
<div className={"actions"}>
1826
<div className={"circle red"}></div>
1927
<div className={"circle yellow"}></div>
2028
<div className={"circle green"}></div>
2129
</div>
2230
<div className={"title-container"}>
23-
<div className={"title"}>cipher.hackclub.com</div>
31+
<div className={"title"}>anon@hackclub - cipher</div>
2432
</div>
2533
</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>
34+
<div className={"body"}>
35+
<p>anon@hackclub ~ %</p>
3036
</div>
3137
</div>
32-
</div>
38+
</section>
3339
</section>
3440
</>
3541
)
3642
}
3743

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-
// }
44+
export default Landing

‎src/routes/landing_OLD.jsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import "../styles/routes/landing_OLD.css";
2+
// import {useState} from "react";
3+
4+
5+
function Landing_OLD() {
6+
return (
7+
<>
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>
34+
</>
35+
)
36+
}
37+
38+
export default Landing_OLD
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‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
justify-content: space-between;
88
align-items: center;
99

10-
height: 3.5rem;
11-
width: 75%;
10+
height: 3rem;
11+
width: 50%;
1212

13-
margin-top: 1.5rem;
13+
margin-top: 1rem;
1414

1515
border: 1px solid var(--clr-surface-a10);
1616
border-radius: 1rem;
@@ -30,8 +30,8 @@
3030
}
3131

3232
.nav .logo {
33-
height: 2rem;
34-
width: 2rem;
33+
height: 1.5rem;
34+
width: 1.5rem;
3535

3636
background-image: url("../../assets/logo.svg");
3737
background-repeat: no-repeat;
@@ -40,7 +40,7 @@
4040
}
4141

4242
.nav h1 {
43-
font-size: 1.6rem;
43+
font-size: 1.2rem;
4444
letter-spacing: 2px;
4545

4646
margin: 0 0 2px 0;

‎src/styles/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
body {
77
background-color: var(--clr-surface-a0);
8-
8+
color: var(--clr-primary-a80);
99
margin: 0;
1010
}
1111

0 commit comments

Comments
 (0)