Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Off-grid calculator</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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=Inter:wght@300;400;600;800&family=Outfit:wght@400;700&display=swap" | |
| rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Off-grid calculator</h1> | |
| <div class="nav-buttons"> | |
| <button class="nav-btn">Range Calculator</button> | |
| <button class="nav-btn active">Off-Grid Calculator</button> | |
| </div> | |
| </header> | |
| <p class="subtitle">Estimates are based on a single charge with a full fuel tank. Actual results will vary by | |
| usage and conditions.</p> | |
| <main class="dashboard-grid"> | |
| <!-- Configuration Column --> | |
| <section class="config-column"> | |
| <div class="card"> | |
| <h2>Number of Travellers</h2> | |
| <div class="input-grid"> | |
| <div class="input-group"> | |
| <label>Expert Adults</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="num_expert" min="0" value="0"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>Typical Adults</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="num_typical" min="0" value="1"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>Glamper Adults</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="num_glamper" min="0" value="0"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>Children</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="num_children" min="0" value="0"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2>Tank Capacities (Gallons)</h2> | |
| <div class="input-grid"> | |
| <div class="input-group"> | |
| <label>Fresh Tank</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="fresh_cap" min="0" value="50"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>Grey Tank</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="grey_cap" min="0" value="40"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>Black Tank</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="black_cap" min="0" value="30"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2>Current Levels (Gallons)</h2> | |
| <div class="input-grid"> | |
| <div class="input-group"> | |
| <label>Current Fresh</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="fresh_level" min="0" value="50"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>Current Grey</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="grey_level" min="0" value="0"> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>Current Black</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="black_level" min="0" value="0"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2>Environment</h2> | |
| <div class="input-grid"> | |
| <div class="input-group"> | |
| <label>Climate Multiplier</label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="climate_mult" min="0.1" step="0.1" value="1.0"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="calculate-btn">Calculate Survival Status</button> | |
| </section> | |
| <!-- Visuals/Results Column --> | |
| <section class="visuals-column"> | |
| <div class="card"> | |
| <div class="usage-bars"> | |
| <div class="bar-item"> | |
| <div class="bar-info"> | |
| <span>FRESH WATER USAGE</span> | |
| <span id="val-fresh">0.00 gal</span> | |
| </div> | |
| <div class="bar-track"> | |
| <div id="fill-fresh" class="bar-fill"></div> | |
| </div> | |
| </div> | |
| <div class="bar-item"> | |
| <div class="bar-info"> | |
| <span>GREY WATER ADDED</span> | |
| <span id="val-grey">0.00 gal</span> | |
| </div> | |
| <div class="bar-track"> | |
| <div id="fill-grey" class="bar-fill"></div> | |
| </div> | |
| </div> | |
| <div class="bar-item"> | |
| <div class="bar-info"> | |
| <span>BLACK WATER ADDED</span> | |
| <span id="val-black">0.00 gal</span> | |
| </div> | |
| <div class="bar-track"> | |
| <div id="fill-black" class="bar-fill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="projection-section"> | |
| <h2>Tank Projection</h2> | |
| <table class="projection-table"> | |
| <thead> | |
| <tr> | |
| <th>Resource</th> | |
| <th>Capacity</th> | |
| <th>Current Level</th> | |
| <th>Daily Change</th> | |
| <th>Days Off-Grid</th> | |
| </tr> | |
| </thead> | |
| <tbody id="projection-body"> | |
| <!-- Populated via JS --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="summary-visual"> | |
| <!-- Standard high-quality placeholder if generation failed --> | |
| <img src="https://images.unsplash.com/photo-1523987355523-c7b5b0dd90a7?auto=format&fit=crop&q=80&w=1200" | |
| alt="Expedition Vehicle"> | |
| <div class="summary-overlay"> | |
| <div class="overall-stat"> | |
| <div class="stat-box"> | |
| <h4>Daily Power Usage</h4> | |
| <p>0.0 <span style="font-size: 0.8rem; color: var(--text-dim);">kWh</span></p> | |
| </div> | |
| <div class="stat-box"> | |
| <h4>Daily Water Usage</h4> | |
| <p id="daily-water-total">0.0 <span | |
| style="font-size: 0.8rem; color: var(--text-dim);">gallons</span></p> | |
| </div> | |
| </div> | |
| <div class="survival-big"> | |
| <h3>Off-Grid Duration</h3> | |
| <span id="overall-days-big">--</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer style="margin-top: 4rem; text-align: center; color: var(--text-dim); font-size: 0.8rem;"> | |
| © 2026 Water Intelligence Systems • Smart Resource Management | |
| </footer> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |