prepper-disk.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title data-i18n="pd_title">Schematrix | HAS_PrepperDisk</title>
  <meta name="description" content="An open-source offline knowledge archive on a Raspberry Pi 5: Wikipedia, maps, medical and survival library served over its own Wi-Fi hotspot." data-i18n-content="pd_meta" />
  <meta name="theme-color" content="#F2F0EB" />
  <link rel="stylesheet" href="./style.css?v=20261028-4" />
</head>
<body>

  <header>
    <div class="header-content">
      <div class="nav-top">
        <a href="./index.html" class="logo">Schematrix</a>
        <nav>
          <a href="./index.html" data-i18n="nav_home">Home</a>
          <a href="./projects.html" class="active" data-i18n="nav_projects">Projects</a>
          <a href="./whoami.html" data-i18n="nav_whoami">Who am I</a>
          <div class="nav-separator"></div>
          <a href="https://instagram.com/schematrix.io" target="_blank" class="social-link">Instagram</a>
          <a href="https://www.youtube.com/@schematrix" target="_blank" class="social-link">YouTube</a>
          <div class="nav-separator"></div>
          <div class="lang-switch" role="group" aria-label="Language">
            <button type="button" data-set-lang="en" aria-label="English">EN</button>
            <button type="button" data-set-lang="tr" aria-label="Türkçe">TR</button>
          </div>
        </nav>
        <button id="mobileToggle" class="mobile-toggle" type="button" aria-label="Menu" aria-expanded="false">Menu</button>
      </div>
    </div>
  </header>

  <div class="color-strip"></div>

  <!-- PROJECT DETAIL -->
  <section class="page">
    <div class="container project-detail">

      <div class="section-label fade-up" data-i18n="pd_label">Offline Knowledge</div>
      <h2 class="section-title fade-up" data-i18n="pd_heading">HAS_PrepperDisk</h2>
      <p class="section-subtitle fade-up" data-i18n="pd_sub">A Raspberry Pi 5 that carries Wikipedia, maps, medical references and survival books, and serves them over its own Wi-Fi. No internet, no cloud, no account.</p>

      <div class="project-detail-grid">
        <div class="project-gallery project-gallery-single reveal">
          <video data-hover-play muted playsinline preload="auto" disablepictureinpicture controlslist="nodownload noplaybackrate nofullscreen" poster="./images/prepper_disk_poster.jpg">
            <source src="./images/prepper_disk_product.mp4" type="video/mp4" />
          </video>
        </div>

        <aside class="project-summary reveal">
          <h3 data-i18n="pd_sum_title">Offline Library</h3>
          <p data-i18n="pd_sum_p1">Built on Internet-in-a-Box and Kiwix, HAS_PrepperDisk keeps around 170 GB of knowledge on a 256 GB NVMe SSD: the full English and Turkish Wikipedia with images, street-level maps of Europe and the Middle East, and a curated library on water, food, first aid, repair and off-grid living.</p>
          <p data-i18n="pd_sum_p2">The Pi broadcasts its own password-protected Wi-Fi network. Join it from any phone or laptop and the homepage opens by itself, no app needed. Setup scripts, the content list and the homepage are all on GitHub.</p>
          <div class="project-status" data-i18n="status_open_source">Open Source Project</div>
          <div class="project-links">
            <a href="https://github.com/schematrix/HAS_Prepper_Disk" class="btn btn-primary" target="_blank" style="width:100%;" data-i18n="btn_view_github">View on GitHub</a>
            <a href="https://www.youtube.com/watch?v=x_PDrT4Kya0&t=26s" class="btn btn-accent" target="_blank" style="width:100%;" data-i18n="btn_watch_youtube">Watch on YouTube</a>
            <a href="./projects.html" class="btn btn-secondary" style="width:100%;" data-i18n="btn_back_projects">Back to Projects</a>
          </div>
        </aside>
      </div>

      <!-- TECH SPECS -->
      <div class="reveal" style="margin-top: 24px;">
        <div class="section-label" data-i18n="tech_label">Technical</div>
        <h3 style="font-family:'Clash Display',sans-serif; font-size:24px; font-weight:700; letter-spacing:-0.5px; margin-bottom:8px;" data-i18n="pd_tech_heading">Hardware & Software</h3>
        <p style="font-size:15px; color:var(--text-sub); line-height:1.7; max-width:580px; margin-bottom:8px;" data-i18n="pd_tech_body">A Raspberry Pi 5 with an M.2 HAT and an NVMe SSD. The operating system runs from the SD card, all content lives on the SSD. Kiwix serves Wikipedia and the rest of the library, OpenStreetMap tiles serve the maps, and a hotspot with a captive portal turns the Pi into a self-contained network.</p>

        <div class="spec-grid">
          <div class="spec-item">
            <div class="spec-label" data-i18n="spec_board">Board</div>
            <div class="spec-value">Raspberry Pi 5 (8GB)</div>
          </div>
          <div class="spec-item">
            <div class="spec-label" data-i18n="pd_spec_storage">Storage</div>
            <div class="spec-value">256 GB NVMe SSD</div>
          </div>
          <div class="spec-item">
            <div class="spec-label" data-i18n="pd_spec_platform">Platform</div>
            <div class="spec-value">Internet-in-a-Box + Kiwix</div>
          </div>
          <div class="spec-item">
            <div class="spec-label" data-i18n="pd_spec_wiki">Encyclopedia</div>
            <div class="spec-value" data-i18n="pd_spec_wiki_v">Wikipedia EN + TR, with images</div>
          </div>
          <div class="spec-item">
            <div class="spec-label" data-i18n="pd_spec_maps">Maps</div>
            <div class="spec-value" data-i18n="pd_spec_maps_v">OpenStreetMap, Europe & Middle East to zoom 14</div>
          </div>
          <div class="spec-item">
            <div class="spec-label" data-i18n="pd_spec_library">Library</div>
            <div class="spec-value" data-i18n="pd_spec_library_v">20+ survival, medical & repair collections</div>
          </div>
          <div class="spec-item">
            <div class="spec-label" data-i18n="pd_spec_access">Access</div>
            <div class="spec-value" data-i18n="pd_spec_access_v">Own Wi-Fi hotspot + captive portal</div>
          </div>
          <div class="spec-item">
            <div class="spec-label" data-i18n="pd_spec_internet">Internet</div>
            <div class="spec-value" data-i18n="pd_spec_internet_v">Not required</div>
          </div>
          <div class="spec-item">
            <div class="spec-label" data-i18n="spec_built_by">Built by</div>
            <div class="spec-value">Schematrix</div>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- BANNER -->
  <section class="banner-navy">
    <div class="container">
      <h2 class="reveal" data-i18n="pd_banner_h">When the Internet Goes Down, the Knowledge Stays.</h2>
      <p class="reveal" data-i18n="pd_banner_p">Earthquake, flood, power cut or just a cabin far from any signal: everything on HAS_PrepperDisk works with no connection at all. Plug it into a power bank and every phone nearby gets an encyclopedia, a map and a first aid manual.</p>
    </div>
  </section>

  <!-- USE CASES -->
  <section class="page">
    <div class="container project-detail">
      <div class="section-label reveal" data-i18n="poss_label">Possibilities</div>
      <h3 class="section-title reveal" style="font-size:clamp(24px,3vw,34px);" data-i18n="pd_uc_heading">What's Inside</h3>
      <p class="section-subtitle reveal" data-i18n="pd_uc_sub">One small box, six shelves:</p>

      <div class="usecase-grid stagger">
        <div class="usecase-item reveal">
          <span class="uc-icon">01</span>
          <h4 data-i18n="pd_uc1_h">Encyclopedia</h4>
          <p data-i18n="pd_uc1_p">The full English and Turkish Wikipedia with images, searchable without a connection.</p>
        </div>
        <div class="usecase-item reveal">
          <span class="uc-icon">02</span>
          <h4 data-i18n="pd_uc2_h">Maps</h4>
          <p data-i18n="pd_uc2_p">Street-level OpenStreetMap for Europe and the Middle East, the rest of the world at city level.</p>
        </div>
        <div class="usecase-item reveal">
          <span class="uc-icon">03</span>
          <h4 data-i18n="pd_uc3_h">First Aid & Medicine</h4>
          <p data-i18n="pd_uc3_p">WikEM, MDWiki, WikiMed, military field medicine and an A to Z guide to medicines.</p>
        </div>
        <div class="usecase-item reveal">
          <span class="uc-icon">04</span>
          <h4 data-i18n="pd_uc4_h">Water & Food</h4>
          <p data-i18n="pd_uc4_p">Guides on water treatment, food preparation and long-term storage.</p>
        </div>
        <div class="usecase-item reveal">
          <span class="uc-icon">05</span>
          <h4 data-i18n="pd_uc5_h">Repair & Skills</h4>
          <p data-i18n="pd_uc5_p">iFixit guides plus Q&A archives on home repair, gardening, ham radio and vehicle repair.</p>
        </div>
        <div class="usecase-item reveal">
          <span class="uc-icon">06</span>
          <h4 data-i18n="pd_uc6_h">Zero-Setup Access</h4>
          <p data-i18n="pd_uc6_p">Join the Wi-Fi and the homepage opens on its own. Works on any phone, no app needed.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- VIDEO -->
  <section class="page">
    <div class="container project-detail">
      <div class="section-label reveal" data-i18n="watch_label">Watch</div>
      <h3 class="section-title reveal" style="font-size:clamp(24px,3vw,34px);" data-i18n="pd_video_heading">See How It Works</h3>
      <p class="section-subtitle reveal" data-i18n="pd_video_sub">The full build, from the parts on the desk to a phone opening Wikipedia with no internet.</p>

      <div class="video-embed reveal">
        <iframe src="https://www.youtube.com/embed/x_PDrT4Kya0?start=26" title="HAS_PrepperDisk video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <div class="footer-inner">
        <p data-i18n="footer_copy">© 2026 Schematrix — Independent Technology Studio</p>
        <div class="footer-social">
          <a href="https://instagram.com/schematrix.io" target="_blank">Instagram</a>
          <span>·</span>
          <a href="mailto:theindustriesofengineering@gmail.com">theindustriesofengineering@gmail.com</a>
        </div>
      </div>
    </div>
  </footer>

  <script src="./i18n.js?v=20261031-1"></script>
  <script src="./script.js?v=20261028-1"></script>
  <script src="./hover-video.js?v=20261028-6"></script>
</body>
</html>