diff --git a/README.md b/README.md index 5f669e5..1a8869f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ # Nexory.org -Website for this organisation, informations and more +Website for this organisation, informations and more \ No newline at end of file diff --git a/public/dashboard/home.css b/public/dashboard/home.css index f50441a..8879138 100644 --- a/public/dashboard/home.css +++ b/public/dashboard/home.css @@ -1,5 +1,34 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap'); +:root { + /* -- Background -- */ + --color-bg: #0d1117; + --color-bg-surface: #161b22; + --color-bg-surface-2: rgba(22, 27, 34, 0.92); + + /* -- Borders -- */ + --color-border: #30363d; + --color-border-subtle: #21262d; + + /* -- Accent (blue) -- */ + --color-accent: #58a6ff; + + /* -- Gradient stops -- */ + --color-grad-1: #7ee8fa; + --color-grad-2: #58a6ff; + --color-grad-3: #a78bfa; + --color-grad-4: #c084fc; + + /* -- Text -- */ + --color-text: #c9d1d9; + --color-text-muted: #6e7681; + + /* -- Dot colors -- */ + --color-dot-red: #ff5f57; + --color-dot-yellow: #ffbd2e; + --color-dot-green: #28c940; +} + *, *::before, *::after { box-sizing: border-box; } @@ -7,7 +36,7 @@ body { margin: 0; font-family: 'Fira Code', monospace; - background-color: #0d1117; + background-color: var(--color-bg); } /* -- Preloader -- */ @@ -25,7 +54,7 @@ body { position: fixed; inset: 0; z-index: 9999; - background: #0d1117; + background: var(--color-bg); display: flex; flex-direction: column; justify-content: center; @@ -42,7 +71,7 @@ body { .preloader-logo { font-size: 2rem; font-weight: 600; - background: linear-gradient(135deg, #7ee8fa 0%, #58a6ff 35%, #a78bfa 70%, #c084fc 100%); + background: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 35%, var(--color-grad-3) 70%, var(--color-grad-4) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -53,7 +82,7 @@ body { .preloader-bar { width: 200px; height: 3px; - background: #21262d; + background: var(--color-border-subtle); border-radius: 99px; overflow: hidden; } @@ -61,7 +90,7 @@ body { .preloader-bar-inner { height: 100%; width: 0%; - background: linear-gradient(90deg, #58a6ff, #a78bfa); + background: linear-gradient(90deg, var(--color-grad-2), var(--color-grad-3)); border-radius: 99px; animation: load-bar 1.2s ease forwards; } @@ -120,8 +149,8 @@ body { font-weight: 600; margin: 0 0 0.75rem; letter-spacing: -0.02em; - background: linear-gradient(135deg, #7ee8fa 0%, #58a6ff 35%, #a78bfa 70%, #c084fc 100%); - background-size: 200% auto; + 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%); + background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -134,7 +163,7 @@ body { .info p { font-size: clamp(0.8rem, 2vw, 0.95rem); - color: #6e7681; + color: var(--color-text-muted); margin: 0; letter-spacing: 0.04em; } @@ -142,8 +171,8 @@ body { /* -- Coding animation -- */ .terminal { width: 100%; - background: rgba(22, 27, 34, 0.92); - border: 1px solid #30363d; + background: var(--color-bg-surface-2); + border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; backdrop-filter: blur(8px); @@ -154,12 +183,12 @@ body { } .terminal-header { - background: #161b22; + background: var(--color-bg-surface); padding: 11px 16px; display: flex; align-items: center; gap: 8px; - border-bottom: 1px solid #21262d; + border-bottom: 1px solid var(--color-border-subtle); } .dot { @@ -167,12 +196,12 @@ body { height: 12px; border-radius: 50%; } -.dot.red { background: #ff5f57; box-shadow: 0 0 5px rgba(255,95,87,0.6); } -.dot.yellow { background: #ffbd2e; box-shadow: 0 0 5px rgba(255,189,46,0.6); } -.dot.green { background: #28c940; box-shadow: 0 0 5px rgba(40,201,64,0.6); } +.dot.red { background: var(--color-dot-red); box-shadow: 0 0 5px rgba(255,95,87,0.6); } +.dot.yellow { background: var(--color-dot-yellow); box-shadow: 0 0 5px rgba(255,189,46,0.6); } +.dot.green { background: var(--color-dot-green); box-shadow: 0 0 5px rgba(40,201,64,0.6); } .terminal-title { - color: #6e7681; + color: var(--color-text-muted); font-size: 0.76rem; margin-left: 6px; } @@ -183,7 +212,7 @@ body { } #code-output { - color: #c9d1d9; + color: var(--color-text); font-size: 0.875rem; line-height: 1.65; white-space: pre; @@ -196,7 +225,7 @@ body { display: inline-block; width: 2px; height: 0.9em; - background: #58a6ff; + background: var(--color-accent); margin-left: 1px; vertical-align: text-bottom; animation: blink 1s step-end infinite; diff --git a/public/dashboard/home.js b/public/dashboard/home.js index ae0a107..8feb888 100644 --- a/public/dashboard/home.js +++ b/public/dashboard/home.js @@ -39,7 +39,6 @@ function Preloader() { ReactDOM.createRoot(document.getElementById('preloader-root')).render(); /* -- start animation for home page after page loaded -- */ - function startAnimations() { const canvas = document.getElementById('code-canvas'); const ctx = canvas.getContext('2d'); @@ -48,6 +47,7 @@ function startAnimations() { const SPEED = 0.4; let particles = []; + function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; @@ -115,10 +115,7 @@ function startAnimations() { def join(self, new_user): self.people.append(new_user) - print(f"Success, {new_user} joined") - - def run(self): - print(f"Welcome to {self.org}!") + print(f"Welcome to {self.org}, {new_user}!") if __name__ == "__main__": org = NexoryOrg("Nexory.Org") @@ -144,131 +141,4 @@ if __name__ == "__main__": type(); } startTyping(); -} - -/* -- Hero Section with Canvas and Typewriter -- */ -function Hero() { - const canvasRef = useRef(null); - const outputRef = useRef(null); - - useEffect(() => { - const canvas = canvasRef.current; - const ctx = canvas.getContext('2d'); - const FONT_SIZE = 14; - const CHARS = 'abcdefghijklmnopqrstuvwxyz0123456789<>=+-*/[]{}();:#'.split(''); - let drops = []; - - function resize() { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - const cols = Math.floor(canvas.width / FONT_SIZE); - drops = Array.from({ length: cols }, () => - Math.floor(Math.random() * -(canvas.height / FONT_SIZE)) - ); - } - resize(); - window.addEventListener('resize', resize); - - const interval = setInterval(() => { - ctx.fillStyle = 'rgba(13, 17, 23, 0.07)'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.font = `${FONT_SIZE}px "Fira Code", monospace`; - - drops.forEach((y, i) => { - const char = CHARS[Math.floor(Math.random() * CHARS.length)]; - const alpha = Math.random() * 0.5 + 0.05; - ctx.fillStyle = `rgba(88, 166, 255, ${alpha})`; - ctx.fillText(char, i * FONT_SIZE, y * FONT_SIZE); - if (y * FONT_SIZE > canvas.height && Math.random() > 0.975) drops[i] = 0; - drops[i]++; - }); - }, 40); - - return () => { - clearInterval(interval); - window.removeEventListener('resize', resize); - }; - }, []); - - useEffect(() => { - const CODE = -`class NexoryOrg: - def __init__(self, org_name): - self.org = org_name - self.people = [] - - def join(self, new_user): - self.people.append(new_user) - print(f"Success, {new_user} joined") - - def run(self): - print(f"Welcome to {self.org}!") - -if __name__ == "__main__": - org = NexoryOrg("Nexory.Org") - org.join("Your Name") - org.run()`; - - const TYPE_SPEED = 58; - const WAIT_MS = 20000; - let timeout; - - function startTyping() { - outputRef.current.textContent = ''; - let i = 0; - function type() { - if (i < CODE.length) { - outputRef.current.textContent = CODE.slice(0, i + 1); - i++; - timeout = setTimeout(type, TYPE_SPEED); - } else { - timeout = setTimeout(startTyping, WAIT_MS); - } - } - type(); - } - startTyping(); - - return () => clearTimeout(timeout); - }, []); - - return ( -
- - -
-
-

Nexory.Org

-

Open source projects ยท Python, JavaScript, PHP and more

-
- -
-
- - - - nexory.py -
-
- 

-                        
-                    

-                

-            

-        

-    );
-}
-
-/* -- App -- */
-function App() {
-    const [loaded, setLoaded] = useState(false);
-
-    return (
-        <>
-            {!loaded &&  setLoaded(true)} />}
-            
-        
-    );
-}
-
-ReactDOM.createRoot(document.getElementById('root')).render();
+}
\ No newline at end of file
diff --git a/public/init.php b/public/init.php
index 5392c39..b624490 100644
--- a/public/init.php
+++ b/public/init.php
@@ -12,7 +12,7 @@
     header('Strict-Transport-Security: max-age=63072000; includeSubDomains; preload');
 }
 
-$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;";
+$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;";
 header("Content-Security-Policy: $csp");
 
 $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || ($_SERVER['SERVER_PORT'] ?? '') == 443;
diff --git a/public/navebar/navebar.css b/public/navebar/navebar.css
index 8b13789..cd5098d 100644
--- a/public/navebar/navebar.css
+++ b/public/navebar/navebar.css
@@ -1 +1,220 @@
+:root {
+    /* -- Borders -- */
+    --color-border-nav:          #30363d;
+    --color-border-subtle-nav:   #21262d;
 
+    /* -- Accent (blue) -- */
+    --color-accent-nav:          #58a6ff;
+
+    /* -- Gradient stops -- */
+    --color-grad-1-nav:          #7ee8fa;
+    --color-grad-2-nav:          #58a6ff;
+    --color-grad-3-nav:          #a78bfa;
+    --color-grad-4-nav:          #c084fc;
+
+    /* -- Text -- */
+    --color-text-nav:            #c9d1d9;
+    --color-text-muted-nav:      #6e7681;
+}
+
+.navebar {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    background: transparent;
+    backdrop-filter: blur(0px);
+    color: var(--color-text-nav);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 40px;
+    z-index: 1000;
+    transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
+}
+
+.navebar.scrolled {
+    background: rgba(13, 17, 23, 0.88);
+    backdrop-filter: blur(12px);
+    padding: 10px 40px;
+    box-shadow: 0 1px 0 var(--color-border-nav);
+}
+
+.logo {
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--color-border-nav);
+}
+
+.navebar-menu {
+    display: flex;
+    list-style: none;
+    gap: 30px;
+    margin: 0;
+    padding: 0;
+}
+
+.navebar-menu li a {
+    text-decoration: none;
+    color: var(--color-text-muted-nav);
+    font-weight: 500;
+    position: relative;
+    padding: 8px 0;
+    transition: color 0.3s ease;
+}
+
+.navebar-menu li a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg, var(--color-grad-1-nav), var(--color-grad-2-nav), var(--color-grad-3-nav));
+    border-radius: 2px;
+    transition: width 0.3s ease;
+}
+
+.navebar-menu li a:hover,
+.navebar-menu li a.active {
+    color: var(--color-text-nav);
+}
+
+.navebar-menu li a:hover::after,
+.navebar-menu li a.active::after {
+    width: 100%;
+}
+
+.navebar-toggle {
+    display: none;
+}
+
+.language-switch {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.language-switch a {
+    text-decoration: none;
+    color: var(--color-text-muted-nav);
+    font-size: 0.85rem;
+    font-weight: 600;
+    border: 1px solid var(--color-border-nav);
+    border-radius: 999px;
+    padding: 4px 8px;
+    line-height: 1;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.language-switch a:hover,
+.language-switch a.active {
+    background: var(--color-accent-nav);
+    color: #0d1117;
+    border-color: var(--color-accent-nav);
+}
+
+@media (max-width: 768px) {
+
+    .navebar {
+        padding: 14px 20px;
+    }
+
+    .navebar.scrolled {
+        padding: 10px 20px;
+    }
+
+    .navebar-toggle {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        cursor: pointer;
+        z-index: 1100;
+        padding: 4px;
+    }
+
+    .navebar-toggle span {
+        width: 24px;
+        height: 2px;
+        border-radius: 2px;
+        background-color: var(--color-text-nav);
+        transition: transform 0.3s ease, opacity 0.3s ease;
+    }
+
+    .navebar-toggle.active span:nth-child(1) {
+        transform: rotate(45deg) translate(5px, 5px);
+    }
+
+    .navebar-toggle.active span:nth-child(2) {
+        opacity: 0;
+        transform: scaleX(0);
+    }
+
+    .navebar-toggle.active span:nth-child(3) {
+        opacity: 0;
+        transform: scaleX(0);
+    }
+
+    .navebar-toggle.active span:nth-child(4) {
+        transform: rotate(-45deg) translate(5px, -5px);
+    }
+
+    .navebar-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        background: rgba(13, 17, 23, 0.97);
+        backdrop-filter: blur(12px);
+        border-top: 1px solid var(--color-border-nav);
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.35s ease;
+        padding: 0;
+        margin: 0;
+        align-items: center;
+        text-align: center;
+    }
+
+    .navebar-menu.active {
+        max-height: 400px;
+    }
+
+    .navebar-menu li {
+        width: 100%;
+    }
+
+    .navebar-menu li a {
+        display: block;
+        width: 100%;
+        padding: 18px 0;
+        font-size: 1.05rem;
+        font-weight: 500;
+        letter-spacing: 0.3px;
+        border-bottom: 1px solid var(--color-border-subtle-nav);
+        transition: background 0.25s ease, color 0.25s ease;
+    }
+
+    .navebar-menu li:last-child a {
+        border-bottom: none;
+    }
+
+    .navebar-menu li a:hover {
+        background: rgba(88, 166, 255, 0.06);
+    }
+
+    .language-switch {
+        margin-right: 10px;
+    }
+
+    .language-switch a {
+        font-size: 0.75rem;
+        padding: 4px 7px;
+    }
+
+}
\ No newline at end of file
diff --git a/public/navebar/navebar.js b/public/navebar/navebar.js
index 8b13789..150ebf2 100644
--- a/public/navebar/navebar.js
+++ b/public/navebar/navebar.js
@@ -1 +1,18 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById('navebar-toggle');
+    const menu   = document.querySelector('.navebar-menu');
+    const nav    = document.querySelector('.navebar');
 
+    if (toggle && menu) {
+        toggle.addEventListener('click', () => {
+            menu.classList.toggle('active');
+            toggle.classList.toggle('active');
+        });
+    }
+
+    if (nav) {
+        window.addEventListener('scroll', () => {
+            nav.classList.toggle('scrolled', window.scrollY > 50);
+        }, { passive: true });
+    }
+});
\ No newline at end of file
diff --git a/public/navebar/navebar.php b/public/navebar/navebar.php
index 8b13789..812be1e 100644
--- a/public/navebar/navebar.php
+++ b/public/navebar/navebar.php
@@ -1 +1,23 @@
+
+