Skip to content

Commit c6eda87

Browse files
LUCA-PYTHONLUCA-PYTHON
committed
Added navebar, updated home page
1 parent 3253f53 commit c6eda87

7 files changed

Lines changed: 310 additions & 153 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
# Nexory.org
2-
Website for this organisation, informations and more
2+
Website for this organisation, informations and more

‎public/dashboard/home.css‎

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
11
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');
22

3+
:root {
4+
/* -- Background -- */
5+
--color-bg: #0d1117;
6+
--color-bg-surface: #161b22;
7+
--color-bg-surface-2: rgba(22, 27, 34, 0.92);
8+
9+
/* -- Borders -- */
10+
--color-border: #30363d;
11+
--color-border-subtle: #21262d;
12+
13+
/* -- Accent (blue) -- */
14+
--color-accent: #58a6ff;
15+
16+
/* -- Gradient stops -- */
17+
--color-grad-1: #7ee8fa;
18+
--color-grad-2: #58a6ff;
19+
--color-grad-3: #a78bfa;
20+
--color-grad-4: #c084fc;
21+
22+
/* -- Text -- */
23+
--color-text: #c9d1d9;
24+
--color-text-muted: #6e7681;
25+
26+
/* -- Dot colors -- */
27+
--color-dot-red: #ff5f57;
28+
--color-dot-yellow: #ffbd2e;
29+
--color-dot-green: #28c940;
30+
}
31+
332
*, *::before, *::after {
433
box-sizing: border-box;
534
}
635

736
body {
837
margin: 0;
938
font-family: 'Fira Code', monospace;
10-
background-color: #0d1117;
39+
background-color: var(--color-bg);
1140
}
1241

1342
/* -- Preloader -- */
@@ -25,7 +54,7 @@ body {
2554
position: fixed;
2655
inset: 0;
2756
z-index: 9999;
28-
background: #0d1117;
57+
background: var(--color-bg);
2958
display: flex;
3059
flex-direction: column;
3160
justify-content: center;
@@ -42,7 +71,7 @@ body {
4271
.preloader-logo {
4372
font-size: 2rem;
4473
font-weight: 600;
45-
background: linear-gradient(135deg, #7ee8fa 0%, #58a6ff 35%, #a78bfa 70%, #c084fc 100%);
74+
background: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 35%, var(--color-grad-3) 70%, var(--color-grad-4) 100%);
4675
background-size: 200% auto;
4776
-webkit-background-clip: text;
4877
-webkit-text-fill-color: transparent;
@@ -53,15 +82,15 @@ body {
5382
.preloader-bar {
5483
width: 200px;
5584
height: 3px;
56-
background: #21262d;
85+
background: var(--color-border-subtle);
5786
border-radius: 99px;
5887
overflow: hidden;
5988
}
6089

6190
.preloader-bar-inner {
6291
height: 100%;
6392
width: 0%;
64-
background: linear-gradient(90deg, #58a6ff, #a78bfa);
93+
background: linear-gradient(90deg, var(--color-grad-2), var(--color-grad-3));
6594
border-radius: 99px;
6695
animation: load-bar 1.2s ease forwards;
6796
}
@@ -120,8 +149,8 @@ body {
120149
font-weight: 600;
121150
margin: 0 0 0.75rem;
122151
letter-spacing: -0.02em;
123-
background: linear-gradient(135deg, #7ee8fa 0%, #58a6ff 35%, #a78bfa 70%, #c084fc 100%);
124-
background-size: 200% auto;
152+
background: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 25%, #7b9fff 45%, var(--color-grad-3) 65%, var(--color-grad-4) 85%, var(--color-grad-1) 100%);
153+
background-size: 300% auto;
125154
-webkit-background-clip: text;
126155
-webkit-text-fill-color: transparent;
127156
background-clip: text;
@@ -134,16 +163,16 @@ body {
134163

135164
.info p {
136165
font-size: clamp(0.8rem, 2vw, 0.95rem);
137-
color: #6e7681;
166+
color: var(--color-text-muted);
138167
margin: 0;
139168
letter-spacing: 0.04em;
140169
}
141170

142171
/* -- Coding animation -- */
143172
.terminal {
144173
width: 100%;
145-
background: rgba(22, 27, 34, 0.92);
146-
border: 1px solid #30363d;
174+
background: var(--color-bg-surface-2);
175+
border: 1px solid var(--color-border);
147176
border-radius: 12px;
148177
overflow: hidden;
149178
backdrop-filter: blur(8px);
@@ -154,25 +183,25 @@ body {
154183
}
155184

156185
.terminal-header {
157-
background: #161b22;
186+
background: var(--color-bg-surface);
158187
padding: 11px 16px;
159188
display: flex;
160189
align-items: center;
161190
gap: 8px;
162-
border-bottom: 1px solid #21262d;
191+
border-bottom: 1px solid var(--color-border-subtle);
163192
}
164193

165194
.dot {
166195
width: 12px;
167196
height: 12px;
168197
border-radius: 50%;
169198
}
170-
.dot.red { background: #ff5f57; box-shadow: 0 0 5px rgba(255,95,87,0.6); }
171-
.dot.yellow { background: #ffbd2e; box-shadow: 0 0 5px rgba(255,189,46,0.6); }
172-
.dot.green { background: #28c940; box-shadow: 0 0 5px rgba(40,201,64,0.6); }
199+
.dot.red { background: var(--color-dot-red); box-shadow: 0 0 5px rgba(255,95,87,0.6); }
200+
.dot.yellow { background: var(--color-dot-yellow); box-shadow: 0 0 5px rgba(255,189,46,0.6); }
201+
.dot.green { background: var(--color-dot-green); box-shadow: 0 0 5px rgba(40,201,64,0.6); }
173202

174203
.terminal-title {
175-
color: #6e7681;
204+
color: var(--color-text-muted);
176205
font-size: 0.76rem;
177206
margin-left: 6px;
178207
}
@@ -183,7 +212,7 @@ body {
183212
}
184213

185214
#code-output {
186-
color: #c9d1d9;
215+
color: var(--color-text);
187216
font-size: 0.875rem;
188217
line-height: 1.65;
189218
white-space: pre;
@@ -196,7 +225,7 @@ body {
196225
display: inline-block;
197226
width: 2px;
198227
height: 0.9em;
199-
background: #58a6ff;
228+
background: var(--color-accent);
200229
margin-left: 1px;
201230
vertical-align: text-bottom;
202231
animation: blink 1s step-end infinite;

‎public/dashboard/home.js‎

Lines changed: 3 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ function Preloader() {
3939
ReactDOM.createRoot(document.getElementById('preloader-root')).render(<Preloader />);
4040

4141
/* -- start animation for home page after page loaded -- */
42-
4342
function startAnimations() {
4443
const canvas = document.getElementById('code-canvas');
4544
const ctx = canvas.getContext('2d');
@@ -48,6 +47,7 @@ function startAnimations() {
4847
const SPEED = 0.4;
4948
let particles = [];
5049

50+
5151
function resize() {
5252
canvas.width = window.innerWidth;
5353
canvas.height = window.innerHeight;
@@ -115,10 +115,7 @@ function startAnimations() {
115115
116116
def join(self, new_user):
117117
self.people.append(new_user)
118-
print(f"Success, {new_user} joined")
119-
120-
def run(self):
121-
print(f"Welcome to {self.org}!")
118+
print(f"Welcome to {self.org}, {new_user}!")
122119
123120
if __name__ == "__main__":
124121
org = NexoryOrg("Nexory.Org")
@@ -144,131 +141,4 @@ if __name__ == "__main__":
144141
type();
145142
}
146143
startTyping();
147-
}
148-
149-
/* -- Hero Section with Canvas and Typewriter -- */
150-
function Hero() {
151-
const canvasRef = useRef(null);
152-
const outputRef = useRef(null);
153-
154-
useEffect(() => {
155-
const canvas = canvasRef.current;
156-
const ctx = canvas.getContext('2d');
157-
const FONT_SIZE = 14;
158-
const CHARS = 'abcdefghijklmnopqrstuvwxyz0123456789<>=+-*/[]{}();:#'.split('');
159-
let drops = [];
160-
161-
function resize() {
162-
canvas.width = window.innerWidth;
163-
canvas.height = window.innerHeight;
164-
const cols = Math.floor(canvas.width / FONT_SIZE);
165-
drops = Array.from({ length: cols }, () =>
166-
Math.floor(Math.random() * -(canvas.height / FONT_SIZE))
167-
);
168-
}
169-
resize();
170-
window.addEventListener('resize', resize);
171-
172-
const interval = setInterval(() => {
173-
ctx.fillStyle = 'rgba(13, 17, 23, 0.07)';
174-
ctx.fillRect(0, 0, canvas.width, canvas.height);
175-
ctx.font = `${FONT_SIZE}px "Fira Code", monospace`;
176-
177-
drops.forEach((y, i) => {
178-
const char = CHARS[Math.floor(Math.random() * CHARS.length)];
179-
const alpha = Math.random() * 0.5 + 0.05;
180-
ctx.fillStyle = `rgba(88, 166, 255, ${alpha})`;
181-
ctx.fillText(char, i * FONT_SIZE, y * FONT_SIZE);
182-
if (y * FONT_SIZE > canvas.height && Math.random() > 0.975) drops[i] = 0;
183-
drops[i]++;
184-
});
185-
}, 40);
186-
187-
return () => {
188-
clearInterval(interval);
189-
window.removeEventListener('resize', resize);
190-
};
191-
}, []);
192-
193-
useEffect(() => {
194-
const CODE =
195-
`class NexoryOrg:
196-
def __init__(self, org_name):
197-
self.org = org_name
198-
self.people = []
199-
200-
def join(self, new_user):
201-
self.people.append(new_user)
202-
print(f"Success, {new_user} joined")
203-
204-
def run(self):
205-
print(f"Welcome to {self.org}!")
206-
207-
if __name__ == "__main__":
208-
org = NexoryOrg("Nexory.Org")
209-
org.join("Your Name")
210-
org.run()`;
211-
212-
const TYPE_SPEED = 58;
213-
const WAIT_MS = 20000;
214-
let timeout;
215-
216-
function startTyping() {
217-
outputRef.current.textContent = '';
218-
let i = 0;
219-
function type() {
220-
if (i < CODE.length) {
221-
outputRef.current.textContent = CODE.slice(0, i + 1);
222-
i++;
223-
timeout = setTimeout(type, TYPE_SPEED);
224-
} else {
225-
timeout = setTimeout(startTyping, WAIT_MS);
226-
}
227-
}
228-
type();
229-
}
230-
startTyping();
231-
232-
return () => clearTimeout(timeout);
233-
}, []);
234-
235-
return (
236-
<section className="hero">
237-
<canvas ref={canvasRef} id="code-canvas"></canvas>
238-
239-
<div className="hero-content">
240-
<div className="info">
241-
<h1>Nexory.Org</h1>
242-
<p>Open source projects · Python, JavaScript, PHP and more</p>
243-
</div>
244-
245-
<div className="terminal">
246-
<div className="terminal-header">
247-
<span className="dot red"></span>
248-
<span className="dot yellow"></span>
249-
<span className="dot green"></span>
250-
<span className="terminal-title">nexory.py</span>
251-
</div>
252-
<div className="terminal-body">
253-
<pre ref={outputRef} id="code-output"></pre>
254-
<span className="cursor"></span>
255-
</div>
256-
</div>
257-
</div>
258-
</section>
259-
);
260-
}
261-
262-
/* -- App -- */
263-
function App() {
264-
const [loaded, setLoaded] = useState(false);
265-
266-
return (
267-
<>
268-
{!loaded && <Preloader onDone={() => setLoaded(true)} />}
269-
<Hero />
270-
</>
271-
);
272-
}
273-
274-
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
144+
}

‎public/init.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
header('Strict-Transport-Security: max-age=63072000; includeSubDomains; preload');
1313
}
1414

15-
$csp = "default-src 'self'; base-uri 'self'; frame-ancestors 'none'; img-src 'self' data: blob:; script-src 'self' https://cdnjs.cloudflare.com https://unpkg.com 'unsafe-inline' blob:; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' data: https://fonts.gstatic.com https://cdnjs.cloudflare.com; connect-src 'self' https://cdnjs.cloudflare.com;";
15+
$csp = "default-src 'self'; base-uri 'self'; frame-ancestors 'none'; img-src 'self' data: blob:; script-src 'self' https://cdnjs.cloudflare.com https://unpkg.com 'unsafe-inline' blob:; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' data: https://fonts.gstatic.com https://cdnjs.cloudflare.com; connect-src 'self' https://cdnjs.cloudflare.com https://unpkg.com;";
1616
header("Content-Security-Policy: $csp");
1717

1818
$secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || ($_SERVER['SERVER_PORT'] ?? '') == 443;

0 commit comments

Comments
 (0)