<!doctype html>
<html lang="hu">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
      Tankolás
    </title>
    <style>
    :root {
      font-family:system-ui,-apple-system,Segoe UI,sans-serif;
      color:#183843;
      background:#edf3f2;
      font-synthesis:none
    }
    * {
      box-sizing:border-box
    }
    body {
      margin:0
    }
    main {
      max-width:480px;
      margin:auto;
      padding:28px 20px 36px
    }
    .top {
      display:flex;
      justify-content:space-between;
      align-items:center
    }
    .logo {
      background:#173d48;
      color:#fff;
      border-radius:15px;
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      font-size:24px
    }
    .badge {
      font-size:12px;
      background:#dcebe5;
      color:#315b4c;
      padding:7px 11px;
      border-radius:30px
    }
    h1 {
      font-size:32px;
      letter-spacing:-1px;
      margin:24px 0 6px
    }
    p {
      line-height:1.5
    }
    .sub {
      color:#5c7279;
      margin:0 0 22px;
      font-size:14px
    }
    .card {
      background:#fff;
      border:1px solid #dce5e3;
      padding:22px;
      border-radius:22px;
      box-shadow:0 6px 22px #173d4808
    }
    label {
      display:block;
      font-weight:650;
      font-size:14px;
      margin:0 0 8px
    }
    input,select,textarea {
      font:inherit;
      font-size:17px;
      width:100%;
      border:1px solid #cbd9d7;
      border-radius:11px;
      padding:13px 12px;
      background:white;
      color:#173d48;
      min-height:50px
    }
    input:focus,select:focus,textarea:focus {
      outline:3px solid #b4ddd2;
      border-color:#22775f
    }
    .field {
      margin-bottom:20px
    }
    .row {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px
    }
    .unit {
      position:relative
    }
    .unit input {
      padding-right:70px;
      font-variant-numeric:tabular-nums
    }
    .unit span {
      position:absolute;
      right:13px;
      top:16px;
      font-size:13px;
      color:#617a80;
      pointer-events:none
    }
    .help {
      display:block;
      font-size:12px;
      font-weight:400;
      color:#698087;
      margin-top:7px
    }
    .estimate {
      display:flex;
      justify-content:space-between;
      background:#f0f6f4;
      border-radius:12px;
      padding:14px;
      font-size:14px;
      margin:0 0 19px
    }
    .estimate strong {
      font-variant-numeric:tabular-nums;
      color:#1a6b54
    }
    .check {
      display:flex;
      align-items:center;
      gap:12px;
      font-size:15px;
      min-height:46px
    }
    .check input {
      width:23px;
      height:23px;
      min-height:0;
      accent-color:#237a61
    }
    .check small {
      display:block;
      font-weight:400;
      font-size:12px;
      color:#698087;
      margin-top:3px
    }
    details {
      border-top:1px solid #e4ece9;
      margin-top:15px;
      padding-top:17px
    }
    summary {
      cursor:pointer;
      font-size:14px;
      min-height:35px;
      color:#526d75
    }
    details>.row {
      margin-top:12px
    }
    .row>.field {
      min-width:0
    }
    .row input,.row select {
      height:50px
    }
    button {
      font:inherit;
      cursor:pointer;
      min-height:52px;
      border-radius:13px;
      border:0;
      font-weight:650
    }
    .save {
      width:100%;
      color:#fff;
      background:#17624f;
      margin-top:20px;
      font-size:17px
    }
    .save:disabled {
      opacity:.5;
      cursor:wait
    }
    .secondary {
      background:#e6eeeb;
      color:#245a49;
      padding:0 20px
    }
    .status {
      padding:14px;
      border-radius:12px;
      margin:16px 0 0;
      font-size:14px;
      line-height:1.5;
      white-space:pre-line
    }
    .status.error {
      background:#fff0ee;
      color:#9b352c
    }
    .status.success {
      background:#dcefe6;
      color:#185742
    }
    .foot {
      font-size:12px;
      color:#647d83;
      text-align:center;
      margin:19px 0
    }
    .demo {
      font-size:13px;
      padding:12px 15px;
      background:#fff3d9;
      color:#79531a;
      border-radius:12px;
      margin-bottom:18px
    }
    .hidden,[hidden] {
      display:none!important
    }
    fieldset {
      border:0;
      padding:0;
      margin:0;
      min-width:0
    }
    .newstation {
      background:#f5f8f6;
      padding:14px;
      border-radius:12px;
      margin-bottom:20px
    }
    a {
      color:#245a49
    }
    #done {
      padding:20px 0;
      text-align:center
    }
    #done h2 {
      font-size:24px
    }
    .tick {
      font-size:40px;
      color:#22785c
    }
    @media(max-width:360px) {
      main {
      padding:18px 12px
    }
    .card {
      padding:17px
    }
    .row {
      gap:8px
    }
    input,select {
      font-size:16px
    }
    
    }
    html,body {
      width:100%;
      height:100%;
      max-width:100%;
      min-height:0;
      margin:0;
      padding:0;
      background:#edf3f2;
      overflow:hidden;
      overscroll-behavior:none
    }
    .app-scroll {
      position:fixed;
      inset:0;
      overflow-x:hidden;
      overflow-y:auto;
      overscroll-behavior:none;
      background:#edf3f2;
      -webkit-overflow-scrolling:touch;
      scroll-padding-bottom:24px
    }
    main {
      width:100%;
      margin:0 auto
    }
    html {
      -webkit-text-size-adjust:100%;
      text-size-adjust:100%
    }
    .card,.field,details,form {
      min-width:0;
      max-width:100%
    }
    main {
      min-width:0;
      max-width:480px
    }
    input,select,textarea {
      min-width:0;
      max-width:100%
    }
    .row {
      grid-template-columns:minmax(0,1fr) minmax(0,1fr)
    }
    .check input {
      flex-shrink:0
    }
    .check span,.top .badge {
      min-width:0;
      overflow-wrap:anywhere
    }
    .top {
      gap:12px
    }
    .estimate {
      gap:10px;
      flex-wrap:wrap
    }
    .station-results {
      margin-top:8px;
      border:1px solid #d3e1da;
      border-radius:12px;
      overflow:hidden
    }
    .station-results button {
      display:block;
      width:100%;
      text-align:left;
      background:#f6faf8;
      border-radius:0;
      padding:12px;
      white-space:normal;
      overflow-wrap:anywhere;
      border-bottom:1px solid #e0e9e4
    }
    .station-results button:last-child {
      border-bottom:0
    }
    .station-results button:focus,.station-results button:hover {
      background:#dceee6
    }
    .station-results p {
      font-size:13px;
      padding:0 12px
    }
    .new-station-button {
      background:transparent;
      color:#256b55;
      padding:0 2px;
      min-height:42px;
      font-size:13px
    }
    input[type=date],input[type=time] {
      display:block;
      appearance:none;
      -webkit-appearance:none
    }
    @media(max-width:380px) {
      details>.row {
      grid-template-columns:minmax(0,1fr)
    }
    details>.row .field {
      margin-bottom:14px
    }
    
    }
    </style>
  </head>
  <body>
    <div class="app-scroll">
      <main>
        <div class="top">
          <div class="logo" aria-hidden="true">
            ⛽
          </div>
          <span class="badge" id="badge">
            Saját tankolási napló
          </span>
        </div>
        <h1>
          Új tankolás
        </h1>
        <p class="sub">
          Pár adat, és mehetsz tovább.
        </p>
        <div id="demo" class="demo" hidden>
          Előnézet · Mintaadatokkal próbálható. A mentés itt nem módosítja a Google Sheetet.
        </div>
        <div class="card">
          <form id="form">
            <fieldset id="fields" disabled>
              <div class="field">
                <label for="stationSearch">
                  Hol tankoltál?
                </label>
                <input id="stationSearch" type="search" autocomplete="off" placeholder="Kezdj el gépelni: márka vagy hely" aria-describedby="stationHelp" aria-controls="stationResults" aria-expanded="false">
                <select id="station" hidden>
                </select>
                <div id="stationResults" class="station-results" hidden>
                </div>
                <small id="stationHelp" class="help">
                  Keress márkára vagy helyre, majd válassz a találatokból.
                </small>
                <button id="addStation" class="new-station-button" type="button">
                  + Új benzinkút felvétele
                </button>
              </div>
              <div id="newstation" class="newstation" hidden>
                <div class="field">
                  <label for="brand">
                    Márka
                  </label>
                  <input id="brand" list="brands" maxlength="80" placeholder="Pl. MOL">
                  <datalist id="brands">
                  </datalist>
                </div>
                <label for="place">
                  Hely
                </label>
                <input id="place" list="places" maxlength="120" placeholder="Pl. Kerepes">
                <datalist id="places">
                </datalist>
              </div>
              <div class="field">
                <label for="odometer">
                  Km-óraállás
                </label>
                <div class="unit">
                  <input id="odometer" inputmode="numeric" autocomplete="off" required placeholder="0" maxlength="12">
                  <span>
                    km
                  </span>
                </div>
                <small id="lastKm" class="help">
                </small>
              </div>
              <div class="row">
                <div class="field">
                  <label for="unitPrice">
                    Literár
                  </label>
                  <div class="unit">
                    <input id="unitPrice" inputmode="decimal" autocomplete="off" required placeholder="0">
                    <span id="priceUnit">
                      Ft/l
                    </span>
                  </div>
                </div>
                <div class="field">
                  <label for="total">
                    Fizetett összeg
                  </label>
                  <div class="unit">
                    <input id="total" inputmode="decimal" autocomplete="off" required placeholder="0">
                    <span id="totalUnit">
                      Ft
                    </span>
                  </div>
                </div>
              </div>
              <div class="estimate">
                <span>
                  Tankolt mennyiség
                </span>
                <strong id="liters">
                  — liter
                </strong>
              </div>
              <label class="check" for="full">
                <input id="full" type="checkbox" checked>
                <span>
                  Teletankoltam
                  <small>
                    Vedd ki a pipát, ha nem töltötted tele a tankot.
                  </small>
                </span>
              </label>
              <details id="details">
                <summary>
                  Dátum, pénznem és további adatok
                </summary>
                <div class="row">
                  <div class="field">
                    <label for="date">
                      Dátum
                    </label>
                    <input id="date" type="date" required>
                  </div>
                  <div class="field">
                    <label for="currency">
                      Pénznem
                    </label>
                    <select id="currency">
                      <option>
                        HUF
                      </option>
                      <option>
                        EUR
                      </option>
                    </select>
                  </div>
                </div>
                <div class="field">
                  <label for="fuel">
                    Üzemanyag
                  </label>
                  <input id="fuel" list="fuels" maxlength="80" placeholder="Sima 95-ös (üres)">
                  <datalist id="fuels">
                  </datalist>
                  <small class="help">
                    Sima 95-ösnél hagyd üresen. Válassz a listából, vagy írj be új típust.
                  </small>
                </div>
                <div class="field">
                  <label for="time">
                    Idő
                    <span class="help">
                      Aktuális idő, módosítható
                    </span>
                  </label>
                  <input id="time" type="time">
                </div>
                <label class="check" for="eInvoice">
                  <input id="eInvoice" type="checkbox">
                  <span>E-számla</span>
                </label>
                <label for="note">
                  Megjegyzés
                  <span class="help">
                    Nem kötelező
                  </span>
                </label>
                <textarea id="note" rows="2" maxlength="500"></textarea>
              </details>
            </fieldset>
            <button type="submit" class="save" id="save" disabled>
              Betöltés…
            </button>
          </form>
          <section id="done" hidden>
            <div class="tick" aria-hidden="true">
              ✓
            </div>
            <h2 id="doneTitle">
              Elmentve
            </h2>
            <p id="receipt">
            </p>
            <button id="again" class="secondary">
              Új tankolás
            </button>
          </section>
          <div id="status" role="status" aria-live="polite" aria-atomic="true" hidden>
          </div>
          <button id="retryLoad" class="secondary" hidden>
            Betöltés újra
          </button>
        </div>
        <p class="foot" id="foot">
          A meglévő táblázatodba kerül. Internetkapcsolat szükséges.
        </p>
      </main>
    </div>
    <script>
    const $ = id => document.getElementById(id), demo = !(window.google && google.script && google.script.run);
    let initial, busy = false, loadFailed = false;
    const currencyNames = {
      HUF: 'Magyar forint', EUR: 'Euró', RON: 'Román lej', CZK: 'Cseh korona', PLN: 'Lengyel złoty', DKK: 'Dán korona', SEK: 'Svéd korona', CHF: 'Svájci frank'
    };
    const currencyLabels = {
      HUF: 'Ft', EUR: '€', RON: 'RON', CZK: 'CZK', PLN: 'PLN', DKK: 'DKK', SEK: 'SEK', CHF: 'CHF'
    };
    const defaultCurrencies = Object.keys(currencyNames);
    let demoLast = null;
    const draftKey = demo ? 'tankolas-preview-draft': 'tankolas-mobile-draft';
    const n = v => {
      const text = String(v ?? '').trim().replace(/[\s\u00a0\u202f]/g, '').replace(',', '.');
      return /^\d+(\.\d+)?$/.test(text) ? Number(text): NaN;
    };
    const fmt =(v, d = 0) => new Intl.NumberFormat('hu-HU',  {
      maximumFractionDigits: d
    }).format(v);
    function message(text, error = false) {
      $('status').hidden = ! text;
      $('status').textContent = text;
      $('status').className = 'status ' +(error ? 'error': 'success');
    }
    function options(id, values) {
      $(id).replaceChildren(... values.map(v => {
        const o = document.createElement('option'); o.value = v; o.textContent = v; return o;
      }));
    }
    function units() {
      const label = currencyLabels[$('currency').value] || $('currency').value;
      $('priceUnit').textContent = label + '/l';
      $('totalUnit').textContent = label;
      const p = n($('unitPrice').value), t = n($('total').value);
      $('liters').textContent = Number.isFinite(p) && Number.isFinite(t) && p > 0 && t > 0 ? fmt(t / p, 2) + ' liter': '— liter';
    }
    function stationLabel(s) {
      return s.brand + ' · ' + s.place;
    }
    function searchKey(s) {
      return s.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLocaleLowerCase('hu').trim();
    }
    function hideSuggestions() {
      $('stationResults').hidden = true;
      $('stationSearch').setAttribute('aria-expanded', 'false');
    }
    function syncStationSearch() {
      const v = $('station').value;
      $('stationSearch').value = v === 'new' ? 'Új benzinkút': v !== '' ? stationLabel(initial.stations[Number(v)]): '';
      hideSuggestions();
    }
    function showSuggestions() {
      if(! initial) return;
      const q = searchKey($('stationSearch').value);
      const results = $('stationResults');
      results.replaceChildren();
      if(! q) {
        hideSuggestions();
        return;
      }
      const tokens = q.split(/\s+/);
      const matches = initial.stations.map((s, i) =>( {
        s, i
      })).filter(( {
        s
      }) => tokens.every(t => searchKey(stationLabel(s)).includes(t)));
      matches.slice(0, 6).forEach(( {
        s, i
      }) => {
        const b = document.createElement('button'); b.type = 'button'; b.textContent = stationLabel(s); b.onclick =() => {
          $('station').value = String(i); stationChanged(); syncStationSearch(); remember();
        }; results.append(b);
      });
      if(! matches.length || matches.length > 6) {
        const p = document.createElement('p');
        p.textContent = matches.length ? 'További találatokhoz pontosítsd a keresést.': 'Nincs ilyen kút. Az alábbi gombbal felveheted.';
        results.append(p);
      }
      results.hidden = false;
      $('stationSearch').setAttribute('aria-expanded', 'true');
    }
    $('stationSearch').addEventListener('input', () => {
      $('station').value = ''; stationChanged(); showSuggestions();
    });
    $('stationSearch').addEventListener('focus', e => {
      e.target.select(); showSuggestions();
    });
    $('stationSearch').addEventListener('keydown', e => {
      if(e.key === 'Escape') hideSuggestions(); if(e.key === 'ArrowDown') {
        const b = $('stationResults').querySelector('button'); if(b) {
          e.preventDefault(); b.focus();
        }
      }
      if(e.key === 'Enter' && $('station').value === '') {
        e.preventDefault(); const b = $('stationResults').querySelector('button'); if(b) b.click();
      }
    });
    $('addStation').onclick =() => {
      $('station').value = 'new';
      stationChanged();
      syncStationSearch();
      $('brand').focus();
      remember();
    };
    document.addEventListener('click', e => {
      if(! e.target.closest('#stationResults') && e.target !== $('stationSearch')) hideSuggestions();
    });
    function stationChanged() {
      const isNew = $('station').value === 'new';
      $('newstation').hidden = ! isNew;
      $('brand').required = isNew;
      $('place').required = isNew;
    }
    function payload() {
      const station = $('station').value === 'new' ? {
        brand: $('brand').value, place: $('place').value
      }
      : $('station').value !== '' ? initial.stations[Number($('station').value)]:  {
      };
      return {
        ... station, date: $('date').value, odometer: $('odometer').value, unitPrice: $('unitPrice').value, total: $('total').value, currency: $('currency').value, full: $('full').checked, fuel: $('fuel').value, time: $('time').value, eInvoice: $('eInvoice').checked, note: $('note').value.trim()
      };
    }
    function remember() {
      if(! initial || busy) return;
      try {
        sessionStorage.setItem(draftKey, JSON.stringify(payload()));
      } catch {
      }
    }
    function restore() {
      try {
        const p = JSON.parse(sessionStorage.getItem(draftKey) || 'null');
        if(! p) return;
        ['date', 'odometer', 'unitPrice', 'total', 'fuel', 'time', 'note'].forEach(k => {
          if(p[k] != null) $(k).value = p[k];
        });
        if(Array.from($('currency').options).some(o => o.value === p.currency)) $('currency').value = p.currency;
        $('full').checked = p.full !== false;
        $('eInvoice').checked = p.eInvoice === true;
        $('note').value = $('note').value.trim();
        const i = initial.stations.findIndex(s => s.brand === p.brand && s.place === p.place);
        $('station').value = i >= 0 ? String(i): (p.brand || p.place) ? 'new': '';
        $('brand').value = p.brand || '';
        $('place').value = p.place || '';
        if((p.currency && p.currency !== 'HUF') || p.date !== initial.today) $('details').open = true;
      } catch {
      }
    }
    function ready(data) {
      initial = data;
      const codes =(Array.isArray(data.currencies) && data.currencies.length ? data.currencies: defaultCurrencies);
      options('currency', codes);
      Array.from($('currency').options).forEach(o => o.textContent = o.value + ' · ' +(currencyNames[o.value] || o.value));
      $('currency').value = codes.includes('HUF') ? 'HUF': codes[0];
      loadFailed = false;
      options('station', []);
      data.stations.forEach((s, i) => {
        const o = document.createElement('option'); o.value = String(i); o.textContent = s.brand + ' · ' + s.place; $('station').append(o);
      });
      const blank = document.createElement('option');
      blank.value = '';
      blank.textContent = 'Válassz benzinkutat';
      $('station').prepend(blank);
      $('station').value = '';
      const add = document.createElement('option');
      add.value = 'new';
      add.textContent = '+ Új benzinkút';
      $('station').append(add);
      options('brands', data.brands);
      options('places', data.places);
      options('fuels', data.fuels);
      $('time').value = data.time || new Intl.DateTimeFormat('hu-HU',  {
        timeZone: 'Europe/Budapest', hour: '2-digit', minute: '2-digit', hourCycle: 'h23'
      }).format(new Date());
      $('date').value = data.today;
      $('date').max = data.today;
      $('lastKm').textContent = '';
      if(data.last) {
        $('fuel').value = data.last.fuel || '';
        $('lastKm').textContent = 'Legutóbb: ' + fmt(data.last.odometer) + ' km · ' + data.last.date.replaceAll('-', '.');
      }
      restore();
      stationChanged();
      syncStationSearch();
      units();
      $('fields').disabled = false;
      $('save').disabled = false;
      $('save').textContent = demo ? 'Próbamentés': 'Tankolás mentése';
      $('retryLoad').hidden = true;
    }
    function load() {
      if(busy) return;
      loadFailed = true;
      $('fields').disabled = true;
      $('save').disabled = true;
      $('save').textContent = 'Betöltés…';
      message('');
      $('retryLoad').hidden = true;
      if(demo) {
        $('demo').hidden = false;
        $('badge').textContent = 'Kipróbálható előnézet';
        $('foot').textContent = 'Az előnézet nem kapcsolódik a táblázathoz.';
        ready( {
          today: new Date().toLocaleDateString('sv-SE',  {
            timeZone: 'Europe/Budapest'
          }), stations: [ {
            brand: 'MOL', place: 'Kerepes'
          },  {
            brand: 'OMV', place: 'Kistarcsa'
          },  {
            brand: 'Shell', place: 'M3 kivezető'
          }], brands: ['MOL', 'OMV', 'Shell'], places: ['Kerepes', 'Kistarcsa', 'M3 kivezető'], fuels: ['MOL EVO100', 'MaxxMotion 95', 'Shell V-Power 95'], last: demoLast || {
            odometer: 100000, date: '2026-09-05', fuel: 'MOL EVO100'
          }, currencies: defaultCurrencies
        });
      } else google.script.run.withSuccessHandler(ready).withFailureHandler(e => {
        loadFailed = true; message(e.message || 'Nem sikerült betölteni. Próbáld újra.', true); $('save').textContent = 'Nincs kapcsolat'; $('retryLoad').hidden = false;
      }).getInitialData();
    }
    function saved(r) {
      if(demo) {
        const p = payload();
        demoLast = {
          odometer: n(p.odometer), date: p.date, fuel: p.fuel
        };
      }
      busy = false;
      try {
        sessionStorage.removeItem(draftKey);
      } catch {
      }
      $('form').hidden = true;
      $('done').hidden = false;
      $('doneTitle').textContent = demo ? 'Próbamentés kész': r.alreadySaved ? 'Már szerepel a táblázatban': 'Tankolás elmentve';
      $('receipt').textContent = fmt(r.liters, 2) + ' liter' +(r.distance ? ' · ' + fmt(r.distance) + ' km': '') +(demo ? '\nEz csak előnézet volt.': '\nA ' + r.row + '. sorban találod.');
      message('');
    }
    function failed(e) {
      busy = false;
      $('fields').disabled = false;
      $('save').disabled = false;
      $('save').textContent = demo ? 'Próbamentés': 'Mentés újra';
      message((e.message || 'Nem kaptunk mentési visszaigazolást.') + '\nAz adatok megmaradtak. Újrapróbáláskor ellenőrizzük, szerepel-e már a bejegyzés.', true);
    }
    $('form').addEventListener('submit', e => {
      e.preventDefault(); if(busy || ! initial || loadFailed) return; message(''); const p = payload(); if($('station').value === '') {
        message('Válassz egy kutat a javaslatokból, vagy vedd fel új kútként.', true); $('stationSearch').focus(); return;
      }
      if(! Number.isSafeInteger(n(p.odometer)) || n(p.odometer) <=(initial.last?.odometer || 0)) {
        message('A km-óra legyen nagyobb az utolsó értéknél.', true); $('odometer').focus(); return;
      }
      if(!(Number.isFinite(n(p.unitPrice)) && Number.isFinite(n(p.total)) && n(p.unitPrice) > 0 && n(p.total) > 0)) {
        message('Ellenőrizd a literárat és a fizetett összeget.', true); return;
      }
      const liters = n(p.total) /n(p.unitPrice);if(liters<0.1||liters>200){message('A számított liter szokatlan. Ellenőrizd az árat és a végösszeget.',true);return;}if(!Array.from($('currency').options).some(o=>o.value===p.currency)){message('Válassz pénznemet.',true);return;}if(p.full&&/nem\s*(?:teli|tele)\s*tank/i.test(p.note)){ $('details').open=true;message('A megjegyzés nem tele tankot jelez: vedd ki a pipát.',true);$('full').focus();return;}remember();busy=true;$('fields').disabled=true;$('save').disabled=true;$('save').textContent='Mentés…';if(demo){setTimeout(()=>saved({liters:n(p.total)/ n(p.unitPrice), distance: n(p.odometer) - initial.last.odometer
    }), 350);
  } else google.script.run.withSuccessHandler(saved).withFailureHandler(failed).saveFuel(p);
}); $('form').addEventListener('input', () => {
  units(); remember();
}); $('station').addEventListener('change', () => {
  stationChanged(); remember();
}); $('currency').addEventListener('change', units); $('retryLoad').onclick = load; $('again').onclick =() => {
  $('form').reset(); $('form').hidden = false; $('done').hidden = true; $('fields').disabled = true; $('save').disabled = true; load();
}; load();
    </script>
  </body>
</html>
