<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AGROGUARD | Smart Agriculture</title>
  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.4.0/model-viewer.min.js"></script>
  <script type="module" crossorigin src="/assets/index-CqFkdaff.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-Cwfrw3LJ.css">
</head>
<body>

<header>
  <div class="container">
    <nav>
      <a class="logo" href="#home">✳ AGROGUARD</a>

      <div class="navlinks" id="navlinks">
        <a href="#mission" data-i18n="nav.mission">Mission</a>
        <a href="#system" data-i18n="nav.system">System</a>
        <a href="#solar" data-i18n="nav.solar">Solar</a>
        <a href="#passport" data-i18n="nav.passport">Plant Passport</a>
        <a href="#demo" data-i18n="nav.demo">Dashboard</a>
        <a href="#roadmap" data-i18n="nav.roadmap">Roadmap</a>
      </div>

      <button id="lang-toggle" class="btn" data-i18n="nav.lang">English</button>
      <button class="menu" id="menu" aria-label="Open menu">☰</button>
    </nav>
  </div>
</header>

<main id="home">

<section class="hero" id="hero">
  <div class="container hero-grid">

    <div>
      <div class="eyebrow" data-i18n="hero.eyebrow">YIP INVENTION SHOWCASE · CONCEPT STAGE</div>

      <h1 data-i18n-html="hero.h1">Every plant deserves a <em>watchful eye.</em></h1>

      <p class="lead" data-i18n="hero.lead">
        AGROGUARD is a proposed smart agriculture system that combines
        a mobile crop-monitoring rover, a fixed sensor station and
        useful alerts to help farmers monitor field conditions.
      </p>

      <div class="actions">
        <a class="btn primary" href="#system" data-i18n="hero.ctaExplore">Explore AGROGUARD ↓</a>
        <a class="btn" href="#demo" data-i18n="hero.ctaDemo">Try the demo ↗</a>
      </div>

      <div class="meta">
        <span data-i18n="hero.meta1">✓ Scheduled crop patrols</span><br>
        <span data-i18n="hero.meta2">✓ Solar-assisted charging concept</span><br>
        <span data-i18n="hero.meta3">✓ Location-based observation history</span>
      </div>
    </div>

    <div class="scene">
      <div class="rover-viewer">
        <model-viewer id="rover"
          src="/agroguard-rover.glb"
          poster="/agroguard-rover-preview.png"
          alt="AGROGUARD four-wheel crop monitoring rover with solar panel, camera mast, antenna, front sensors, and soil probe"
          camera-controls
          auto-rotate
          interaction-prompt="none"
          camera-orbit="30deg 60deg 2.6m"
          min-camera-orbit="auto 20deg auto"
          max-camera-orbit="auto 120deg auto"
          field-of-view="34deg"
          shadow-intensity="1"
          environment-image="neutral"
          loading="eager">
        </model-viewer>
      </div>

      <div class="hud one">
        <b data-i18n="hero.hud1Title">● FIELD MONITORING</b>
        <span data-i18n="hero.hud1Sub">Sensor station concept</span>
      </div>

      <div class="hud two">
        <b data-i18n="hero.hud2Title">☀ SOLAR ASSISTED</b>
        <span data-i18n="hero.hud2Sub">Charging dock in development</span>
      </div>
    </div>

  </div>
</section>

<section id="mission">
  <div class="container">
    <div class="section-head">
      <div class="kicker" data-i18n="mission.kicker">01 / THE MISSION</div>
      <h2 data-i18n="mission.h2">Less guesswork. Better field information.</h2>
      <p data-i18n="mission.p">
        Help farmers notice changing crop conditions by combining
        sensor readings, scheduled inspections and organised records.
      </p>
    </div>

    <div class="grid3">
      <article class="card">
        <div class="icon">🌱</div>
        <h3 data-i18n="mission.card1Title">Monitor conditions</h3>
        <p data-i18n="mission.card1P">
          Collect soil moisture, temperature and humidity readings
          using suitable sensors.
        </p>
      </article>

      <article class="card">
        <div class="icon">🛞</div>
        <h3 data-i18n="mission.card2Title">Patrol the field</h3>
        <p data-i18n="mission.card2P">
          A rover could follow defined crop paths, inspect selected
          locations and capture plant images.
        </p>
      </article>

      <article class="card">
        <div class="icon">🔔</div>
        <h3 data-i18n="mission.card3Title">Receive useful alerts</h3>
        <p data-i18n="mission.card3P">
          Highlight unusual readings and suggest what the farmer
          should check next.
        </p>
      </article>
    </div>
  </div>
</section>

<section class="alt" id="system">
  <div class="container split">

    <div class="diagram">
      <div class="kicker" data-i18n="system.kicker">PROPOSED SYSTEM ARCHITECTURE</div>

      <div class="flow">
        <div>
          <span data-i18n="system.flow1Title">01 · FIELD SENSORS</span>
          <small data-i18n="system.flow1Sub">Soil moisture · Temperature · Humidity</small>
        </div>

        <div>
          <span data-i18n="system.flow2Title">02 · MOBILE ROVER</span>
          <small data-i18n="system.flow2Sub">Scheduled patrol · Images · Location records</small>
        </div>

        <div>
          <span data-i18n="system.flow3Title">03 · FIXED STATION</span>
          <small data-i18n="system.flow3Sub">Receives readings and stores events</small>
        </div>

        <div>
          <span data-i18n="system.flow4Title">04 · ALERT DASHBOARD</span>
          <small data-i18n="system.flow4Sub">Local warnings and phone alerts when connected</small>
        </div>
      </div>
    </div>

    <div>
      <div class="kicker">02 / HOW IT WORKS</div>
      <h2 data-i18n="system.h2">Two parts. One clearer view of the farm.</h2>

      <p class="lead" data-i18n="system.p">
        The station monitors connected sensors while the rover
        performs scheduled mobile inspections.
      </p>

      <div class="bullets">
        <div class="bullet">
          <span class="number">A</span>
          <div>
            <b data-i18n="system.bulletATitle">Fixed station</b>
            <p data-i18n="system.bulletAP">Collects readings and can raise a local warning.</p>
          </div>
        </div>

        <div class="bullet">
          <span class="number">B</span>
          <div>
            <b data-i18n="system.bulletBTitle">Mobile rover</b>
            <p data-i18n="system.bulletBP">Checks selected spots and can return to a dock when its battery is low.</p>
          </div>
        </div>

        <div class="bullet">
          <span class="number">C</span>
          <div>
            <b data-i18n="system.bulletCTitle">Farmer dashboard</b>
            <p data-i18n="system.bulletCP">Shows recorded readings and warnings. Remote access requires connectivity.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

<section id="solar">
  <div class="container split">

    <div>
      <div class="kicker" data-i18n="solar.kicker">03 / SOLAR POWER</div>
      <h2 data-i18n="solar.h2">Designed to explore solar-assisted operation.</h2>

      <p class="lead" data-i18n="solar.p">
        A solar panel, charge controller and protected battery could
        power the station or support rover charging.
      </p>

      <div class="bullets">
        <div class="bullet">
          <span class="number">1</span>
          <div>
            <b data-i18n="solar.bullet1Title">Harvest sunlight</b>
            <p data-i18n="solar.bullet1P">Use a suitable solar panel and charge controller.</p>
          </div>
        </div>

        <div class="bullet">
          <span class="number">2</span>
          <div>
            <b data-i18n="solar.bullet2Title">Monitor battery level</b>
            <p data-i18n="solar.bullet2P">Plan patrols around available energy.</p>
          </div>
        </div>

        <div class="bullet">
          <span class="number">3</span>
          <div>
            <b data-i18n="solar.bullet3Title">Explore automatic docking</b>
            <p data-i18n="solar.bullet3P">Test navigation, charging contacts and safe restart behaviour.</p>
          </div>
        </div>
      </div>

      <p class="disclaimer" data-i18n="solar.disclaimer">
        Solar power cannot guarantee continuous operation. Actual
        runtime depends on sunlight, battery capacity and power use.
      </p>
    </div>

    <div class="diagram">
      <div class="kicker" data-i18n="solar.energyFlowKicker">ENERGY FLOW</div>

      <div style="text-align:center;font-size:55px;margin:25px">
        ☀️
      </div>

      <div class="flow energy-flow">
        <div data-i18n="solar.energySolarPanel">Solar Panel</div>
        <div data-i18n="solar.energyChargeController">Charge Controller</div>
        <div data-i18n="solar.energyProtectedBattery">Protected Battery</div>
        <div data-i18n="solar.energyStationRover">Station / Rover</div>
      </div>
    </div>

  </div>
</section>

<section class="alt" id="passport">
  <div class="container">

    <div class="section-head">
      <div class="kicker" data-i18n="passport.kicker">04 / PROPOSED DIFFERENTIATOR</div>
      <h2 data-i18n="passport.h2">The Plant Passport.</h2>
      <p data-i18n="passport.p">
        Keep a history for each identified plant or field zone so
        changing conditions can be easier to notice.
      </p>
    </div>

    <div class="passport-grid">
      <div class="passport">
        <div class="kicker" data-i18n="passport.recordKicker">AGROGUARD / PLANT RECORD</div>
        <h3 style="margin-top:18px" data-i18n="passport.zoneTitle">Zone P-01</h3>

        <small data-i18n="passport.recordNote">
          Illustrative values for the website demo, not real measurements.
        </small>

        <div class="metrics">
          <div class="metric">
            <small data-i18n="passport.metricMoisture">Soil moisture</small>
            <strong>42%</strong>
          </div>

          <div class="metric">
            <small data-i18n="passport.metricLastCheck">Last check</small>
            <strong>09:40</strong>
          </div>

          <div class="metric">
            <small data-i18n="passport.metricTrend">Trend</small>
            <strong>Monitor</strong>
          </div>

          <div class="metric">
            <small data-i18n="passport.metricRecordId">Record ID</small>
            <strong>AG-001</strong>
          </div>
        </div>
      </div>

      <div class="history">
        <h3 data-i18n="passport.historyTitle">Observation history</h3>
        <p data-i18n="passport.historyP">Example entries for demonstration.</p>

        <div class="history-row">
          <b>09:40 · Today</b><br>
          Moisture reading recorded<br>
          <span>● Watch</span>
        </div>

        <div class="history-row">
          <b>07:20 · Today</b><br>
          Routine patrol logged<br>
          <span>● Recorded</span>
        </div>

        <div class="history-row">
          <b>Yesterday</b><br>
          Plant image captured for review<br>
          <span>● Recorded</span>
        </div>
      </div>
    </div>

    <p class="disclaimer" data-i18n="passport.disclaimer">
      The Plant Passport is a proposed feature. Its usefulness and
      distinctiveness must be evaluated through testing and farmer feedback.
    </p>
  </div>
</section>

<section id="demo">
  <div class="container">

    <div class="section-head">
      <div class="kicker" data-i18n="demo.kicker">05 / INTERACTIVE DEMO</div>
      <h2 data-i18n="demo.h2">Explore the sample dashboard.</h2>
      <p data-i18n="demo.p">
        Select a scenario to see how the interface could respond.
        These readings are simulated, not connected to real sensors.
      </p>
    </div>

    <div class="dashboard">
      <div class="dash-head">
        <div>
          <small data-i18n="demo.farmOverview">AGROGUARD / FARM OVERVIEW</small>
          <h3 data-i18n="demo.consoleTitle">Field monitoring console</h3>
        </div>

        <span class="demo-label" data-i18n="demo.simMode">● SIMULATION MODE</span>
      </div>

      <div class="dash-grid">
        <div class="stats">
          <div class="stat">
            <small data-i18n="demo.statMoisture">Soil moisture</small>
            <div class="value" id="moisture">42%</div>
            <div class="sub" id="moistureText">Example range</div>
          </div>

          <div class="stat">
            <small data-i18n="demo.statTemperature">Temperature</small>
            <div class="value" id="temperature">29°C</div>
            <div class="sub" id="temperatureText">Demo reading</div>
          </div>

          <div class="stat">
            <small data-i18n="demo.statRover">Rover status</small>
            <div class="value" id="rover">Patrol</div>
            <div class="sub" id="roverText">Route P-01</div>
          </div>

          <div class="stat">
            <small data-i18n="demo.statBattery">Battery</small>
            <div class="value" id="battery">76%</div>
            <div class="sub" id="batteryText">Demo status</div>
          </div>
        </div>

        <div>
          <h3 style="margin-bottom:12px" data-i18n="demo.systemMessages">System messages</h3>
          <div id="alerts">
            <div class="alert">
              <b>✓ Routine patrol logged</b>
              <p>Example route P-01 was checked in the demo.</p>
            </div>

            <div class="alert">
              <b>☀ Solar charging concept</b>
              <p>Docking and charging still require testing.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="controls">
        <button class="active" data-mode="normal" data-i18n="demo.btnNormal">Normal</button>
        <button data-mode="dry" data-i18n="demo.btnDry">Low moisture</button>
        <button data-mode="hot" data-i18n="demo.btnHot">High temperature</button>
        <button data-mode="low" data-i18n="demo.btnLow">Low battery</button>
      </div>

      <div class="charts">
        <div class="chart-card">
          <h3>Field Conditions (7-day trend)</h3>
          <canvas id="conditionsChart"></canvas>
        </div>
        <div class="chart-card">
          <h3>Battery Level</h3>
          <canvas id="batteryChart"></canvas>
        </div>
      </div>

      <p class="disclaimer" data-i18n="demo.disclaimer">
        Demonstration only. Thresholds must be selected for the actual
        crop and soil type.
      </p>
    </div>
  </div>
</section>

<section class="alt" id="roadmap">
  <div class="container">

    <div class="section-head">
      <div class="kicker" data-i18n="roadmap.kicker">06 / DEVELOPMENT ROADMAP</div>
      <h2 data-i18n="roadmap.h2">Build. Test. Improve. Validate.</h2>
      <p data-i18n="roadmap.p">
        The next step is to prove the concept using a real prototype
        and field testing.
      </p>
    </div>

    <div class="roadmap">
      <div class="phase">
        <small data-i18n="roadmap.phase1Small">PHASE 01</small>
        <h3 data-i18n="roadmap.phase1Title">Core prototype</h3>
        <p data-i18n="roadmap.phase1P">Test sensors, rover movement and communication.</p>
      </div>

      <div class="phase">
        <small data-i18n="roadmap.phase2Small">PHASE 02</small>
        <h3 data-i18n="roadmap.phase2Title">Alert system</h3>
        <p data-i18n="roadmap.phase2P">Build a dashboard and warning history.</p>
      </div>

      <div class="phase">
        <small data-i18n="roadmap.phase3Small">PHASE 03</small>
        <h3 data-i18n="roadmap.phase3Title">Solar + docking</h3>
        <p data-i18n="roadmap.phase3P">Measure battery runtime and docking reliability.</p>
      </div>

      <div class="phase">
        <small data-i18n="roadmap.phase4Small">PHASE 04</small>
        <h3 data-i18n="roadmap.phase4Title">Field testing</h3>
        <p data-i18n="roadmap.phase4P">Collect farmer feedback and test on real crop rows.</p>
      </div>
    </div>

  </div>
</section>

<section id="judge">
  <div class="container">
    <div class="judge">
      <div class="kicker" data-i18n="judge.kicker">YIP JUDGE SUMMARY</div>

      <h2 data-i18n="judge.h2">AGROGUARD turns field observations into organised decisions.</h2>

      <p data-i18n="judge.p">
        The proposed system combines scheduled mobile crop checks,
        fixed-station sensing, solar-assisted energy planning and
        location-based observation history. Prototype testing will
        determine its practical performance and usefulness to farmers.
      </p>

      <a class="btn" href="#home" data-i18n="judge.backToTop"
         style="margin-top:20px;background:#102419;color:white">
        Back to top ↑
      </a>
    </div>
  </div>
</section>

</main>

<footer>
  <div class="container">
    <div>
      <strong>AGROGUARD</strong><br>
      <span data-i18n="footer.tagline">Smarter crop monitoring, designed around farmers.</span>
    </div>

    <div data-i18n="footer.subtitle">Student YIP invention concept · Prototype under development</div>

    <div>© <span id="year"></span> <span data-i18n="footer.copyright">AGROGUARD</span></div>
  </div>
</footer>

</body>
</html>
