CYBER WEEK AFRICA 2025 HACKATHON

/* ===== CYBERWEEK CTF — Header CSS (Compact White + Subtle CMatrix) ===== */ :root{ --cw-ink:#0b0e11; --cw-muted:#5f6d79; --cw-accent1:#00b8a9; /* teal */ --cw-accent2:#4dabf7; /* blue */ --cw-accent3:#94d82d; /* green */ } /* Compact hero wrapper */ #cw-landing.cw-compact{ position: relative; color: var(--cw-ink); min-height: 60vh; /* shorter hero */ padding-top: 6vh !important; /* trimmed spacing */ padding-bottom: 4vh !important; isolation: isolate; /* keep canvas blend contained */ } /* Matrix canvas anchored to the hero only */ #cw-landing .cw-matrix-host{ position:absolute; inset:0; z-index:0; pointer-events:none; } #cw-landing .cw-matrix{ width:100%; height:100%; display:block; opacity:.06; /* subtle */ mix-blend-mode:multiply; /* soft color on white */ } /* Content sits above canvas */ #cw-landing .position-relative{ z-index:1; } /* Visuals */ .cw-logo{ max-width: 260px; width: 55%; border-radius: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.08); } .cw-title{ font-weight: 800; letter-spacing: .2px; font-size: clamp(24px, 4vw, 42px); } .cw-desc{ max-width: 720px; margin: 0 auto; color: var(--cw-muted); font-size: 0.98rem; line-height: 1.45; } /* Accessibility: respect reduced motion */ @media (prefers-reduced-motion: reduce){ #cw-landing .cw-matrix{ display:none; } } /* ===== /CYBERWEEK CTF — Header CSS ===== */

Register
Login
- English
- Deutsch
- Polski
- Español
- اَلْعَرَبِيَّةُ
- 简体中文
- 繁體中文
- Français
- 한국어
- русский язык
- Português do Brasil
- Slovenský jazyk
- 日本語
- Italiano
- tiếng Việt
- Català
- Ελληνικά
- Suomi
- Română
- Slovenščina
- Svenska
- עברית
- oʻzbekcha

  <h1 class="cw-title mb-1">CYBER WEEK AFRICA 2025 HACKATHON</h1>

  <div class="mb-1">
    <span id="cw-badge" class="badge rounded-pill text-bg-light border me-2">Loading…</span>
    <span id="cw-countdown" class="text-muted" aria-live="polite"></span>
  </div>

  <p class="cw-desc mb-3">Cyber Week Africa 2025 Hackathon

Date : 27th October 2025

Its the best environment where ideas are born</p>

  <div class="d-inline-flex gap-2 mb-2">
    <a href="/register" class="btn btn-dark btn-sm">Register</a>
    <a href="/login" class="btn btn-outline-dark btn-sm">Log In</a>
    <a href="/challenges" class="btn btn-outline-dark btn-sm">Challenges</a>
  </div>

  <div class="mt-1 small">
    <a href="https://twitter.com/ctfdio" class="me-2" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
    <a href="https://facebook.com/ctfdio" class="me-2" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
    <a href="https://github.com/ctfd" aria-label="GitHub"><i class="fab fa-github"></i></a>
  </div>

  <p class="mt-2"><a href="/admin" class="text-muted">Admin</a></p>
</div>

// ===== CYBERWEEK CTF — Footer JS (Compact White + Subtle CMatrix) ===== (function(){ const root = document.getElementById('cw-landing'); if (!root) return; // Only run on the landing page // ---- Read safe page variables from data-* ---- const v = document.getElementById('cw-vars'); const START = v?.dataset.start && v.dataset.start !== 'None' ? new Date(v.dataset.start) : null; const END = v?.dataset.end && v.dataset.end !== 'None' ? new Date(v.dataset.end) : null; // ---- Subtle matrix canvas (mounted inside hero only) ---- const host = document.createElement('div'); host.className = 'cw-matrix-host'; host.innerHTML = '

'; root.prepend(host); const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!prefersReduced){ const cvs = host.querySelector('.cw-matrix'); const ctx = cvs.getContext('2d'); const palette = ['#00b8a9','#4dabf7','#94d82d','#8e9aaf']; // gentle campus-friendly colors const glyphs = '0123456789アイウエオカキクケコ'; // simple set, legible on white let w,h,fs,cols,drops, raf; function size(){ const rect = root.getBoundingClientRect(); cvs.width = w = Math.ceil(rect.width); cvs.height = h = Math.ceil(rect.height); fs = Math.max(12, Math.floor(Math.min(w,h)/65)); // smaller glyphs for compact hero cols = Math.max(1, Math.floor(w / fs)); drops= Array.from({length: cols}, () => Math.floor(Math.random()*-24)); ctx.font = `${fs}px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace`; } function frame(){ // Light trail to keep it airy ctx.fillStyle = 'rgba(255,255,255,0.10)'; ctx.fillRect(0,0,w,h); for (let i=0;ih && Math.random()>0.978) ? (Math.random()*-18)|0 : drops[i]+1; } raf = requestAnimationFrame(frame); } const ro = new ResizeObserver(size); ro.observe(root); size(); frame(); // Clean up on navigation window.addEventListener('beforeunload', ()=>{ cancelAnimationFrame(raf); ro.disconnect(); }, {once:true}); } // ---- Phase & Countdown (reads {{ ctf_start }} / {{ ctf_end }}) ---- const badge = document.getElementById('cw-badge'); const timer = document.getElementById('cw-countdown'); function fmt(ms){ const s = Math.max(0, Math.floor(ms/1000)); const d = Math.floor(s/86400); const h = Math.floor((s%86400)/3600); const m = Math.floor((s%3600)/60); const ss= s%60; return `${d}d ${h}h ${m}m ${ss}s`; } function tick(){ const now = new Date(); if (!START){ badge.textContent='CTF'; timer.textContent='Dates not set yet.'; return; } if (now < START){ badge.textContent='Upcoming'; timer.textContent='Starts in ' + fmt(START - now); } else if (END && now <= END){ badge.textContent='Live'; timer.textContent='Ends in ' + fmt(END - now); } else { badge.textContent='Ended'; timer.textContent= END ? ('Ended on ' + END.toUTCString()) : 'Event finished.'; } } tick(); setInterval(tick, 1000); })(); // ===== /CYBERWEEK CTF — Footer JS =====