index.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="UITS_Dev_Lab - Production Ready Developer Environment Setup, Standardized Workflows, and Code Vault Resources.">
  <title>UITS_Dev_Lab | Developer Workstation &amp; Vault</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ==========================================
       Header & Navigation Bar
       ========================================== -->
  <header class="site-header">
    <div class="container header-inner">
      <a href="#home" class="brand-logo" id="brand-logo-link">
        <span>UITS_Dev_Lab</span>
        <span class="brand-badge">v1.0</span>
      </a>

      <!-- Desktop Navigation -->
      <nav class="nav-desktop" aria-label="Main Navigation">
        <ul class="nav-links">
          <li><a href="#home" class="nav-link active">Home</a></li>
          <li><a href="#setup-guides" class="nav-link">Setup Guides</a></li>
          <li><a href="#vault-resources" class="nav-link">Vault Resources</a></li>
          <li><a href="#grindset" class="nav-link">Grindset</a></li>
          <li><a href="#join-us" class="nav-link">Join Us</a></li>
          <li><a href="#about-us" class="nav-link">About Us</a></li>
        </ul>
        <div class="header-controls">
          <button type="button" class="theme-toggle-btn" id="theme-toggle-btn" aria-label="Toggle Theme">
            <span id="theme-toggle-text">Light Mode</span>
          </button>
        </div>
      </nav>

      <!-- Mobile Controls -->
      <div class="header-controls" style="display: flex; gap: 0.5rem; align-items: center;">
        <button type="button" class="mobile-hamburger" id="mobile-hamburger-btn" aria-label="Open Mobile Menu">
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
        </button>
      </div>
    </div>
  </header>

  <!-- Mobile Slide-out Sidebar Drawer -->
  <div class="mobile-sidebar-overlay" id="mobile-sidebar-overlay" aria-hidden="true"></div>
  <aside class="mobile-sidebar" id="mobile-sidebar">
    <div class="mobile-sidebar-header">
      <span class="brand-logo">UITS_Dev_Lab</span>
      <button type="button" class="mobile-close-btn" id="mobile-close-btn" aria-label="Close Menu">X</button>
    </div>
    <ul class="mobile-nav-links">
      <li><a href="#home" class="mobile-nav-link active">Home</a></li>
      <li><a href="#setup-guides" class="mobile-nav-link">Setup Guides</a></li>
      <li><a href="#vault-resources" class="mobile-nav-link">Vault Resources</a></li>
      <li><a href="#grindset" class="mobile-nav-link">Grindset</a></li>
      <li><a href="#join-us" class="mobile-nav-link">Join Us</a></li>
      <li><a href="#about-us" class="mobile-nav-link">About Us</a></li>
    </ul>
    <div style="margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color);">
      <p style="font-size: 0.8rem; color: var(--text-muted); text-align: center;">UITS Technical Community</p>
    </div>
  </aside>

  <!-- ==========================================
       Main Viewport Content Area (SPA Navigation)
       ========================================== -->
  <main class="container">

    <!-- SECTION 1: HOME -->
    <section id="home" class="page-section active">
      <div class="hero-wrapper">
        <span class="hero-tag">Standardized Developer Workstation</span>
        <h1 class="hero-title">UITS Dev Lab Hub</h1>
        <p class="hero-motto">
          Stop wrestling with environment errors. Start building what matters.
        </p>
      </div>

      <div class="section-heading-block">
        <h2 class="section-title">Developer Onboarding Roadmap</h2>
        <p class="section-subtitle">Click any step in the visual diagram below to view detailed objectives and resources.</p>
      </div>

      <!-- 4-Step Interactive Visual Roadmap Block Diagram -->
      <div class="roadmap-grid" id="roadmap-container">
        <!-- Rendered dynamically by render.js -->
      </div>
    </section>

    <!-- SECTION 2: SETUP GUIDES -->
    <section id="setup-guides" class="page-section">
      <div class="section-heading-block">
        <h1 class="section-title">Environment Setup Guides</h1>
        <p class="section-subtitle">Step by step technical walkthroughs for local toolchain configuration.</p>
      </div>

      <!-- Controls & Filter Bar -->
      <div class="controls-bar">
        <div class="filter-group" id="guides-filter-group">
          <button type="button" class="filter-btn active" data-category="All">All Guides</button>
          <button type="button" class="filter-btn" data-category="CLI">CLI</button>
          <button type="button" class="filter-btn" data-category="Git">Git</button>
          <button type="button" class="filter-btn" data-category="Scaffold">Scaffold</button>
          <button type="button" class="filter-btn" data-category="OS &amp; Tools">OS &amp; Tools</button>
        </div>
        <div class="search-box">
          <input type="text" id="guides-search-input" class="search-input" placeholder="Search guides or prerequisites...">
        </div>
      </div>

      <!-- Setup Guides Grid -->
      <div class="guides-grid" id="guides-container">
        <!-- Rendered dynamically by render.js -->
      </div>
    </section>

    <!-- SECTION 3: VAULT RESOURCES -->
    <section id="vault-resources" class="page-section">
      <div class="section-heading-block">
        <h1 class="section-title">Vault Resources Dashboard</h1>
        <p class="section-subtitle">Curated automation scripts, template repositories, and technical standards.</p>
      </div>

      <!-- Controls & Filter Bar -->
      <div class="controls-bar">
        <div class="filter-group" id="resources-filter-group">
          <button type="button" class="filter-btn active" data-category="All">All Resources</button>
          <button type="button" class="filter-btn" data-category="Scripts">Scripts</button>
          <button type="button" class="filter-btn" data-category="Templates">Templates</button>
          <button type="button" class="filter-btn" data-category="Docs">Docs</button>
          <button type="button" class="filter-btn" data-category="Tools">Tools</button>
        </div>
        <div class="search-box">
          <input type="text" id="resources-search-input" class="search-input" placeholder="Search resources or tags...">
        </div>
      </div>

      <!-- Vault Resources Grid -->
      <div class="resources-grid" id="resources-container">
        <!-- Rendered dynamically by render.js -->
      </div>
    </section>

    <!-- SECTION 4: GRINDSET LEADERBOARD -->
    <section id="grindset" class="page-section">
      <div class="section-heading-block">
        <h1 class="section-title">Grindset Activity Leaderboard</h1>
        <p class="section-subtitle">Community member rankings based on GitHub activity, commit streaks, and build output.</p>
      </div>
      <div id="leaderboard-container">
        <!-- Rendered dynamically by render.js -->
      </div>
    </section>

    <!-- SECTION 5: JOIN US -->
    <section id="join-us" class="page-section">
      <div class="section-heading-block">
        <h1 class="section-title">Join Technical Community</h1>
        <p class="section-subtitle">Follow our two step verification process to access community channels and maintainer support.</p>
      </div>

      <div class="onboarding-flow">
        <!-- Step 1 Card -->
        <article class="step-card">
          <div class="step-number-tag">Step 01</div>
          <h2 class="step-card-title">Student Identification Verification</h2>
          <p class="step-card-body">
            Reach out directly to community maintainers with your official Student ID for verification. This ensures our channels remain secure and reserved exclusively for active campus developers.
          </p>
        </article>

        <!-- Step 2 Card -->
        <article class="step-card">
          <div class="step-number-tag">Step 02</div>
          <h2 class="step-card-title">Contact Authorization &amp; Group Access</h2>
          <p class="step-card-body">
            Save contact details for mutual contact WhatsApp chat history access or use direct channel invite links issued upon verification.
          </p>
        </article>
      </div>

      <div class="community-links-block">
        <h2 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;">Community Channels &amp; Hub</h2>
        <p style="color: var(--text-muted); font-size: 0.95rem;">Select an official communication hub below:</p>
        <div class="community-btn-group">
          <a href="https://ou1ts.netlify.app/" target="_blank" rel="noopener noreferrer" class="btn-primary" style="max-width: 220px; text-decoration: none; display: inline-block;">
            WhatsApp &amp; Discord Chat
          </a>
          <a href="https://ou1ts.netlify.app/" target="_blank" rel="noopener noreferrer" class="btn-secondary" style="max-width: 220px;">
            Facebook Technical Group
          </a>
        </div>
      </div>
    </section>

    <!-- SECTION 6: ABOUT US -->
    <section id="about-us" class="page-section">
      <div class="section-heading-block">
        <h1 class="section-title">About UITS_Dev_Lab</h1>
        <p class="section-subtitle">Addressing technical setup friction and fostering open source excellence.</p>
      </div>

      <div class="about-grid">
        <!-- Rationale Card -->
        <article class="about-card">
          <h2 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem;">Setup Hurdles Rationale</h2>
          <p style="color: var(--text-muted); margin-bottom: 1rem;">
            New developers often spend days troubleshooting operating system incompatibilities, broken package dependencies, and mismatched software versions instead of writing actual project code.
          </p>
          <p style="color: var(--text-muted);">
            UITS_Dev_Lab provides verified configurations, zero-friction setup guides, and shared tools to eliminate configuration roadblocks from day one.
          </p>
        </article>

        <!-- Direct Backlink Card -->
        <article class="about-card hub-backlink-card">
          <h2 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem;">Parent Community Hub</h2>
          <p style="color: var(--text-muted); margin-bottom: 1rem;">
            This dev lab is an official sub-initiative maintained by the primary community platform. Access additional projects, event updates, and news on the main portal.
          </p>
          <a href="https://ou1ts.netlify.app/" target="_blank" rel="noopener noreferrer" class="backlink-anchor">
            Visit Parent Hub (ou1ts.netlify.app) &rarr;
          </a>
        </article>
      </div>
    </section>

  </main>

  <!-- ==========================================
       Centralized Modal Overlay Window
       ========================================== -->
  <div class="modal-overlay" id="app-modal" aria-hidden="true" role="dialog" aria-modal="true">
    <div class="modal-container">
      <div class="modal-header">
        <h2 class="modal-title" id="modal-title-elem">Modal Title</h2>
        <button type="button" class="modal-close-btn" id="modal-close-btn" aria-label="Close Modal">X</button>
      </div>
      <div class="modal-body" id="modal-body-elem">
        <!-- Dynamic Modal Content populated by RenderModule -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-primary" onclick="RenderModule.closeModal()" style="max-width: 120px;">Close</button>
      </div>
    </div>
  </div>

  <!-- Site Footer -->
  <footer class="site-footer">
    <div class="container">
      <p>UITS_Dev_Lab SPA | Built with Vanilla HTML5, CSS3 &amp; ES6 JavaScript.</p>
    </div>
  </footer>

  <!-- Application Scripts -->
  <script src="render.js"></script>
  <script src="app.js"></script>
</body>
</html>