Skip to content

Commit 66e7f87

Browse files
mallory-scottonmallory-scotton
committed
initial: initial commit
0 parents  commit 66e7f87

5 files changed

Lines changed: 368 additions & 0 deletions

File tree

‎assets/gradient.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎assets/logo-long.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎favicon.ico‎

67 KB
Binary file not shown.

‎index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Graphical Playground</title>
9+
</head>
10+
<body>
11+
12+
<div class="gradient-bg">
13+
<img src="assets/gradient.svg" alt="" aria-hidden="true">
14+
</div>
15+
16+
<nav class="nav">
17+
<div class="nav-logo">
18+
<img src="assets/logo-long.svg" alt="Graphical Playground">
19+
</div>
20+
<div class="nav-status">
21+
<span class="status-dot"></span>
22+
<span class="status-text">In Development</span>
23+
</div>
24+
</nav>
25+
26+
<main class="main">
27+
<div class="hero">
28+
<p class="hero-overline">Launching Soon</p>
29+
<h1 class="hero-title">Something new is<br>being built.</h1>
30+
<p class="hero-description">
31+
We are working on bringing Graphical Playground to life.
32+
This project is currently under active development and will
33+
be available soon.
34+
</p>
35+
<div class="hero-divider"></div>
36+
<div class="hero-details">
37+
<div class="detail-block">
38+
<span class="detail-label">Status</span>
39+
<span class="detail-value">Under Construction</span>
40+
</div>
41+
<div class="detail-block">
42+
<span class="detail-label">Expected</span>
43+
<span class="detail-value">2026</span>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div class="progress-section">
49+
<div class="progress-bar">
50+
<div class="progress-fill"></div>
51+
</div>
52+
</div>
53+
</main>
54+
55+
<footer class="footer">
56+
<div class="footer-left">
57+
<span class="footer-copy">&copy; 2026 Graphical Playground. All rights reserved.</span>
58+
</div>
59+
<div class="footer-right">
60+
<a href="https://github.com/GraphicalPlayground" class="footer-link" target="_blank" rel="noopener noreferrer">GitHub</a>
61+
</div>
62+
</footer>
63+
64+
</body>
65+
</html>

‎style.css‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
html {
10+
font-size: 16px;
11+
}
12+
13+
body {
14+
background-color: #0a0a0f;
15+
color: #ffffff;
16+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
17+
overflow-x: hidden;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
-webkit-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
}
24+
25+
/* ── Gradient background ── */
26+
27+
.gradient-bg {
28+
position: fixed;
29+
top: 0;
30+
left: 0;
31+
width: 100vw;
32+
height: 100vh;
33+
z-index: 0;
34+
pointer-events: none;
35+
opacity: 0.4;
36+
overflow: hidden;
37+
}
38+
39+
.gradient-bg img {
40+
width: 100%;
41+
height: 100%;
42+
object-fit: cover;
43+
}
44+
45+
/* ── Navigation ── */
46+
47+
.nav {
48+
position: relative;
49+
z-index: 10;
50+
display: flex;
51+
justify-content: space-between;
52+
align-items: center;
53+
padding: 14px 48px;
54+
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
55+
}
56+
57+
.nav-logo img {
58+
height: 36px;
59+
opacity: 0.95;
60+
}
61+
62+
.nav-status {
63+
display: flex;
64+
align-items: center;
65+
gap: 10px;
66+
}
67+
68+
.status-dot {
69+
width: 7px;
70+
height: 7px;
71+
border-radius: 50%;
72+
background-color: #3b82f6;
73+
box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
74+
animation: pulse-dot 2.5s ease-in-out infinite;
75+
}
76+
77+
@keyframes pulse-dot {
78+
0%, 100% { opacity: 1; }
79+
50% { opacity: 0.4; }
80+
}
81+
82+
.status-text {
83+
font-family: 'Inter Tight', sans-serif;
84+
font-size: 0.75rem;
85+
font-weight: 500;
86+
letter-spacing: 0.1em;
87+
text-transform: uppercase;
88+
color: rgba(255, 255, 255, 0.5);
89+
}
90+
91+
/* ── Main hero ── */
92+
93+
.main {
94+
position: relative;
95+
z-index: 10;
96+
flex: 1;
97+
display: flex;
98+
flex-direction: column;
99+
justify-content: center;
100+
padding: 0 48px;
101+
}
102+
103+
.hero {
104+
max-width: 740px;
105+
}
106+
107+
.hero-overline {
108+
font-family: 'Inter Tight', sans-serif;
109+
font-size: 0.75rem;
110+
font-weight: 600;
111+
letter-spacing: 0.15em;
112+
text-transform: uppercase;
113+
color: #3b82f6;
114+
margin-bottom: 28px;
115+
}
116+
117+
.hero-title {
118+
font-family: 'Inter Tight', sans-serif;
119+
font-size: clamp(2.4rem, 5.5vw, 4.2rem);
120+
font-weight: 700;
121+
line-height: 1.1;
122+
letter-spacing: -0.025em;
123+
color: #ffffff;
124+
margin-bottom: 28px;
125+
}
126+
127+
.hero-description {
128+
font-size: 1.05rem;
129+
line-height: 1.75;
130+
color: rgba(255, 255, 255, 0.45);
131+
max-width: 520px;
132+
font-weight: 400;
133+
}
134+
135+
.hero-divider {
136+
width: 48px;
137+
height: 1px;
138+
background: rgba(255, 255, 255, 0.12);
139+
margin: 40px 0;
140+
}
141+
142+
.hero-details {
143+
display: flex;
144+
gap: 56px;
145+
}
146+
147+
.detail-block {
148+
display: flex;
149+
flex-direction: column;
150+
gap: 6px;
151+
}
152+
153+
.detail-label {
154+
font-family: 'Inter Tight', sans-serif;
155+
font-size: 0.68rem;
156+
font-weight: 500;
157+
letter-spacing: 0.12em;
158+
text-transform: uppercase;
159+
color: rgba(255, 255, 255, 0.3);
160+
}
161+
162+
.detail-value {
163+
font-family: 'Inter Tight', sans-serif;
164+
font-size: 0.95rem;
165+
font-weight: 500;
166+
color: rgba(255, 255, 255, 0.8);
167+
}
168+
169+
/* ── Progress bar ── */
170+
171+
.progress-section {
172+
position: absolute;
173+
bottom: 80px;
174+
left: 48px;
175+
right: 48px;
176+
z-index: 10;
177+
}
178+
179+
.progress-bar {
180+
width: 100%;
181+
height: 2px;
182+
background: rgba(255, 255, 255, 0.06);
183+
border-radius: 2px;
184+
overflow: hidden;
185+
}
186+
187+
.progress-fill {
188+
width: 35%;
189+
height: 100%;
190+
background: linear-gradient(90deg, #3b82f6, #6366f1);
191+
border-radius: 2px;
192+
animation: progress-grow 3s ease-out forwards;
193+
}
194+
195+
@keyframes progress-grow {
196+
from { width: 0%; }
197+
to { width: 35%; }
198+
}
199+
200+
/* ── Footer ── */
201+
202+
.footer {
203+
position: relative;
204+
z-index: 10;
205+
display: flex;
206+
justify-content: space-between;
207+
align-items: center;
208+
padding: 24px 48px;
209+
border-top: 1px solid rgba(255, 255, 255, 0.07);
210+
}
211+
212+
.footer-copy {
213+
font-size: 0.75rem;
214+
color: rgba(255, 255, 255, 0.25);
215+
font-weight: 400;
216+
}
217+
218+
.footer-link {
219+
font-family: 'Inter Tight', sans-serif;
220+
font-size: 0.75rem;
221+
font-weight: 500;
222+
letter-spacing: 0.05em;
223+
color: rgba(255, 255, 255, 0.4);
224+
text-decoration: none;
225+
text-transform: uppercase;
226+
transition: color 0.2s ease;
227+
}
228+
229+
.footer-link:hover {
230+
color: #ffffff;
231+
}
232+
233+
/* ── Responsive ── */
234+
235+
@media (max-width: 768px) {
236+
.nav {
237+
padding: 20px 24px;
238+
}
239+
240+
.nav-logo img {
241+
height: 18px;
242+
}
243+
244+
.main {
245+
padding: 0 24px;
246+
justify-content: flex-start;
247+
padding-top: 20vh;
248+
}
249+
250+
.hero-title {
251+
font-size: clamp(1.8rem, 7vw, 2.6rem);
252+
}
253+
254+
.hero-description {
255+
font-size: 0.95rem;
256+
}
257+
258+
.hero-details {
259+
gap: 36px;
260+
}
261+
262+
.progress-section {
263+
left: 24px;
264+
right: 24px;
265+
bottom: 64px;
266+
}
267+
268+
.footer {
269+
padding: 20px 24px;
270+
flex-direction: column;
271+
gap: 12px;
272+
text-align: center;
273+
}
274+
275+
.gradient-bg {
276+
width: 100vw;
277+
height: 100vw;
278+
top: -10%;
279+
right: -30%;
280+
opacity: 0.25;
281+
}
282+
}

0 commit comments

Comments
 (0)