Skip to content

Commit ccbbed8

Browse files
maskedsyntaxmaskedsyntax
authored
feat(web/ui): add landing page for hashprep (#10)
1 parent ce62d89 commit ccbbed8

1 file changed

Lines changed: 165 additions & 0 deletions

File tree

‎web/frontend/index.html‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Transparent Grid Background</title>
7+
<style>
8+
@import url("https://fonts.googleapis.com/css2?family=Kode+Mono:[email protected]&display=swap");
9+
html,
10+
body {
11+
height: 100%;
12+
margin: 0;
13+
}
14+
body {
15+
background: #0d0f0f;
16+
margin: 0;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
}
21+
.hero {
22+
text-align: center;
23+
width: 100%;
24+
}
25+
h1 {
26+
color: #b16286;
27+
text-align: center;
28+
text-decoration: underline;
29+
font-family: "Kode Mono";
30+
font-size: 10rem;
31+
}
32+
p {
33+
color: #b16286;
34+
text-align: center;
35+
font-family: "Kode Mono";
36+
font-size: large;
37+
font-weight: bold;
38+
}
39+
.button-container {
40+
position: relative;
41+
display: inline-block;
42+
}
43+
.cta-button {
44+
display: inline-block;
45+
padding: 1rem 2rem;
46+
color: #fbf1c7;
47+
text-decoration: none;
48+
font-family: "Kode Mono";
49+
font-weight: bold;
50+
transition: all 0.2s ease;
51+
font-size: 1.1rem;
52+
position: relative;
53+
z-index: 1;
54+
}
55+
.cta-button .border-top {
56+
position: absolute;
57+
top: 0;
58+
left: 0;
59+
width: 100%;
60+
height: 2px;
61+
background: linear-gradient(90deg, transparent, #b16286, transparent);
62+
background-size: 200% 100%;
63+
animation: slideRight 2s linear infinite;
64+
}
65+
.cta-button .border-right {
66+
position: absolute;
67+
top: 0;
68+
right: 0;
69+
width: 2px;
70+
height: 100%;
71+
background: linear-gradient(180deg, transparent, #b16286, transparent);
72+
background-size: 100% 200%;
73+
animation: slideDown 2s linear infinite;
74+
}
75+
.cta-button .border-bottom {
76+
position: absolute;
77+
bottom: 0;
78+
right: 0;
79+
width: 100%;
80+
height: 2px;
81+
background: linear-gradient(270deg, transparent, #b16286, transparent);
82+
background-size: 200% 100%;
83+
animation: slideLeft 2s linear infinite;
84+
}
85+
.cta-button .border-left {
86+
position: absolute;
87+
bottom: 0;
88+
left: 0;
89+
width: 2px;
90+
height: 100%;
91+
background: linear-gradient(0deg, transparent, #b16286, transparent);
92+
background-size: 100% 200%;
93+
animation: slideUp 2s linear infinite;
94+
}
95+
@keyframes slideRight {
96+
0% {
97+
background-position: -100% 0;
98+
}
99+
100% {
100+
background-position: 100% 0;
101+
}
102+
}
103+
@keyframes slideDown {
104+
0% {
105+
background-position: 0 -100%;
106+
}
107+
100% {
108+
background-position: 0 100%;
109+
}
110+
}
111+
@keyframes slideLeft {
112+
0% {
113+
background-position: 100% 0;
114+
}
115+
100% {
116+
background-position: -100% 0;
117+
}
118+
}
119+
@keyframes slideUp {
120+
0% {
121+
background-position: 0 100%;
122+
}
123+
100% {
124+
background-position: 0 -100%;
125+
}
126+
}
127+
.cta-button:hover .border-top,
128+
.cta-button:hover .border-right,
129+
.cta-button:hover .border-bottom,
130+
.cta-button:hover .border-left {
131+
animation-duration: 1s;
132+
}
133+
@media (max-width: 768px) {
134+
h1 {
135+
font-size: 5rem;
136+
}
137+
.cta-button {
138+
padding: 0.5rem 1rem;
139+
font-size: 0.9rem;
140+
}
141+
}
142+
@media (max-width: 480px) {
143+
h1 {
144+
font-size: 3rem;
145+
}
146+
.cta-button {
147+
padding: 0.3rem 0.8rem;
148+
font-size: 0.7rem;
149+
}
150+
}
151+
</style>
152+
</head>
153+
<body>
154+
<div class="hero">
155+
<h1>HashPrep</h1>
156+
<div class="cta-button">
157+
Coming Soon
158+
<div class="border-top"></div>
159+
<div class="border-right"></div>
160+
<div class="border-bottom"></div>
161+
<div class="border-left"></div>
162+
</div>
163+
</div>
164+
</body>
165+
</html>

0 commit comments

Comments
 (0)