<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="Department of Computer Science — Stellenbosch University. Academic programmes, research groups, staff, publications and more.">
  <meta property="og:title" content="CS Department — Stellenbosch University">
  <meta property="og:description" content="Africa's leading CS department. Research, teaching, innovation.">
  <meta property="og:type" content="website">
  <title>Computer Science — Stellenbosch University</title>
  <meta name="theme-color" content="#0e0508">
  <meta name="color-scheme" content="dark light">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' fill='%2361223b'/><text y='24' x='4' font-size='24' fill='%23caa258'>S</text></svg>">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=VT323&family=Share+Tech+Mono&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap" rel="stylesheet">
  <script>!function(){try{var t=localStorage.getItem('MATIES-theme');document.documentElement.setAttribute('data-maties-theme',t==='light'?'light':'dark');}catch(e){document.documentElement.setAttribute('data-maties-theme','dark');}}();</script>
  <style>
    html[data-maties-theme="dark"]  body { background: #0e0508 !important; }
    html[data-maties-theme="light"] body { background: #f0e8d8 !important; }
  </style>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/mobile.css">
</head>
<body style="margin:0;padding:0;background:#0e0508;font-family:Raleway,Trebuchet MS,sans-serif;-webkit-font-smoothing:antialiased;">

<div id="MATIES-root">

  <div id="m-crest-bg">
    <img src="stellenbosch_logo.png" alt="" aria-hidden="true" loading="lazy" draggable="false">
  </div>
  <div id="m-scanlines"></div>
  <div id="m-crt-beam"></div>
  <div id="m-crt-page-beam"></div>
  <div id="m-shadowmask"></div>
  <div id="m-glitch"></div>
  <div id="m-noise"></div>
  <div id="m-kbd">[1–12] open page · [ESC] terminal · [?] help</div>

  <!-- Boot Screen -->
  <div id="m-boot">
    <div id="boot-logo-wrap">
      <img src="stellenbosch_logo.png" alt="SU Logo"
           style="width:100%;height:auto;object-fit:contain;"
           decoding="async" fetchpriority="high" draggable="false">
    </div>
    <div id="boot-su-name">STELLENBOSCH UNIVERSITY</div>
    <div id="boot-dept-name">DEPARTMENT OF COMPUTER SCIENCE</div>
    <div id="boot-box">
      <div class="box-top">
        <div class="box-title">MATIES-OS v4.3.0</div>
        <div class="box-sub">CS DEPT · MATIES-OS KERNEL</div>
      </div>
      <div class="box-line"><span class="label">SYSTEM</span><span class="val">MATIES-OS Academic Interface</span></div>
      <div class="box-line"><span class="label">DEPT</span><span class="val">Computer Science — SU</span></div>
      <div class="box-line"><span class="label">MOTTO</span><span class="val">Pursue. Discover. Together.</span></div>
    </div>
    <div id="boot-progress-wrap">
      <div id="boot-progress-bar"><div id="boot-progress-fill"></div></div>
      <div id="boot-progress-text">
        <span id="boot-progress-label">Initialising...</span>
        <span id="boot-progress-pct">0%</span>
      </div>
    </div>
    <div id="boot-msgs"></div>
  </div>

  <!-- Terminal -->
  <div id="m-terminal">
    <div id="m-term-bar">
      <div class="m-dots"><div class="m-dot"></div><div class="m-dot"></div><div class="m-dot"></div></div>
      <div id="m-term-title">maties@cs.sun.ac.za — MATIES-os — bash</div>
      <div id="m-term-bar-right">
        <div id="m-term-clock"></div>
        <button id="m-term-theme-btn" onclick="mToggleTheme()" title="Toggle light/dark">☀️ LIGHT</button>
      </div>
    </div>
    <div id="m-term-body"></div>
    <div id="m-prompt-area">
      <span id="m-prompt-label">cs@sun:~$&nbsp;</span>
      <input type="text" id="m-prompt-input" placeholder="type a number or 'help'…" autocomplete="off" spellcheck="false"/>
      <span id="m-autocomplete"></span>
    </div>
  </div>

  <!-- Page View -->
  <div id="m-page">
    <div id="m-topbar">
      <div class="m-logo-area">
        <a href="/" onclick="mClosePage();return false;" aria-label="Home">
          <img src="stellenbosch_logo.png"
               alt="Stellenbosch University"
               class="m-mini-crest m-logo-img"
               loading="eager" decoding="async" fetchpriority="high" draggable="false">
        </a>
        <div>
          <div class="m-uni-name">Stellenbosch University</div>
          <div class="m-uni-dept">Department of Computer Science</div>
          <div class="m-breadcrumb" id="m-breadcrumb"><span>/</span> home</div>
        </div>
      </div>
      <div id="m-topbar-right">
        <input type="text" id="m-search" placeholder="🔍 search…" autocomplete="off" spellcheck="false"/>
        <button class="m-topbar-btn" id="m-theme-btn" onclick="mToggleTheme()">☀️</button>
        <button id="m-back-btn" onclick="mClosePage()">◄ Terminal</button>
      </div>
    </div>
    <nav id="m-nav-bar" aria-label="Main navigation"></nav>
    <main id="m-content"></main>
  </div>

  <div id="m-modal" role="dialog" aria-modal="true" onclick="mCloseModal(event)">
    <div id="m-modal-box">
      <button id="m-modal-close" onclick="mCloseModal()">✕ Close</button>
      <div id="m-modal-content"></div>
    </div>
  </div>

  <div id="hackathon-overlay">
    <div class="hack-badge">🏆 ACHIEVEMENT UNLOCKED</div>
    <div class="hack-achievement">⚡ sudo hackathon ⚡</div>
    <div class="hack-sub">Stellenbosch University — CS Department Hackathon Mode</div>
    <div class="hack-stats" id="hack-stats-grid"></div>
    <div class="hack-dismiss" onclick="closeHackathon()">[ press any key or click to dismiss ]</div>
  </div>

  <div class="graph-node-tooltip" id="graph-tooltip"></div>

</div><!-- /#MATIES-root -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvas-confetti/1.9.2/confetti.browser.min.js"></script>
<script src="js/data.js"></script>
<script src="js/utils.js"></script>
<script src="js/pages.js"></script>
<script src="js/advisor.js"></script>
<script src="js/graph.js"></script>
<script src="js/shell.js"></script>
<script src="js/mobile.js"></script>

</body>
</html>
