web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="title" content="tachyon" />
    <meta name="description" content="the best trainer in the community. a subsidiary of Radium Technologies, LLC." />

    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://tach.radium.wtf/" />
    <meta property="og:title" content="tachyon" />
    <meta property="og:description" content="the best trainer in the community. a subsidiary of Radium Technologies, LLC." />
    <meta property="og:image" content="https://tach.radium.wtf/assets/banner.png" />

    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://tach.radium.wtf/" />
    <meta property="twitter:title" content="tachyon" />
    <meta property="twitter:description" content="the best trainer in the community. a subsidiary of Radium Technologies, LLC." />
    <meta property="twitter:image" content="https://tach.radium.wtf/assets/banner.png" />

    <title>tachyon</title>
    <link rel="stylesheet" href="./style.css" />
</head>
<body class="is-loading">

<div class="loading-screen" aria-live="polite" aria-busy="true">
  <div class="loading-bar-shell">
    <div class="loading-bar-row">
      <span class="loading-label">initializing tachyon</span>
      <span class="loading-status">please wait</span>
    </div>
    <div class="loading-track" aria-hidden="true">
      <div class="loading-fill"></div>
    </div>
  </div>
</div>

<div class="navigation-bar imgui-window">
  <div class="imgui-content">
    <div class="navigation-logo">
        <img class="navigation-logo" src="./assets/logo.png" />
    </div>
    <span class="nav-spacer">tachyon</span>
    <span class="nav-date">placeholder date</span>
    <div class="nav-border"></div>
    <div class="nav-links">
      <a href="#" class="nav-link">documentation</a>
      <div class="nav-border"></div>
      <a href="#" class="nav-link">panel</a>
      <a href="#" class="nav-link">register</a>
    </div>
  </div>
</div>

<div class="page-container">
  <div class="sections-container">
    <div class="left-section">
      <div class="imgui-window">
        <div class="imgui-content">
          <div class="imgui-heading">news</div>
          <div class="list-box" id="news-list">
            <!-- populated by fetchNews() — this placeholder shows only if the fetch fails -->
            <div class="item-card"><p class="item-content">Loading news…</p></div>
          </div>
        </div>
      </div>

      <div class="imgui-window">
        <div class="imgui-content">
          <div class="imgui-heading">services</div>
          <div class="services-strip">
            <div class="service-chip"><div class="dot"></div>service one</div>
            <div class="service-chip"><div class="dot"></div>service two</div>
            <div class="service-chip"><div class="dot"></div>service three</div>
            <div class="service-chip"><div class="dot"></div>service four</div>
            <div class="service-chip"><div class="dot"></div>service five</div>
          </div>
        </div>
      </div>

      <div class="imgui-window">
        <div class="imgui-content">
          <div class="imgui-heading">overview</div>
          <div class="stat-columns">

            <div>
              <div class="stat-col-title">current users</div>
              <div id="current-users"><div class="stat-row"><span>Loading…</span><span class="val"></span></div></div>
            </div>

            <div>
              <div class="stat-col-title">recent activity</div>
              <div id="recent-activity"><div class="stat-row"><span>Loading…</span><span class="val"></span></div></div>
            </div>

            <div>
              <div class="stat-col-title">general statistics</div>
              <div id="general-stats">
                <div class="stat-card"><h4>loading…</h4></div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>

    <!-- RIGHT COLUMN -->
    <div class="right-section">
      <div class="imgui-window">
        <div class="imgui-content">
          <div class="imgui-heading">media</div>
          <div class="media-grid" id="media-grid">
            <div class="media-item"><p class="media-title">loading media…</p></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<div class="footer imgui-window">
  <div class="imgui-content">
    <span class="footer-tagline">server powered by a somali guy on a bike</span>
    <div class="footer-links">
      <a href="#" class="footer-link">powered by radium technologies</a>
    </div>
  </div>
</div>

<script src="./main.js"></script>

</body>
</html>