Embed

<div id="asami-gate" style="max-width:420px;margin:2rem auto;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif">
  <h2 style="margin:0 0 .75rem">Panel ASAMI</h2>
  <p style="margin:.25rem 0 1rem;color:#555">Podaj login i hasło, aby wejść.</p>

  <form id="gate-form" style="display:grid;gap:.5rem">
    <label>
      <span style="display:block;font-size:.9rem;color:#333;margin-bottom:.25rem">Login</span>
      <input id="gate-user" type="text" autocomplete="username" inputmode="text"
             style="width:100%;padding:.6rem .7rem;border:1px solid #ccc;border-radius:.5rem" required>
    </label>
    <label>
      <span style="display:block;font-size:.9rem;color:#333;margin-bottom:.25rem">Hasło</span>
      <input id="gate-pass" type="password" autocomplete="current-password"
             style="width:100%;padding:.6rem .7rem;border:1px solid #ccc;border-radius:.5rem" required>
    </label>
    <button type="submit"
            style="padding:.7rem 1rem;border:none;border-radius:.5rem;background:#111;color:#fff;cursor:pointer">
      Zaloguj
    </button>
    <div id="gate-msg" style="min-height:1.25rem;color:#b00020;font-size:.9rem"></div>
  </form>

  
  <div id="gate-content" style="display:none;margin-top:1.25rem;padding:1rem;border:1px solid #e5e5e5;border-radius:.5rem;background:#fafafa">
    <h3 style="margin:.25rem 0 0.5rem">Witaj w Strefie Zespołu</h3>
    <p style="margin:.25rem 0 .75rem;color:#444">Poniżej znajdziesz link do wewnętrznych materiałów:</p>

    <style>
      /* Mobilne przyciski – lekkie i wygodne do klikania */
      #gate-content .quick-links {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem;            /* odstęp między przyciskami */
        margin-top: .25rem;
      }
      #gate-content .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .9rem 1rem;   /* duży obszar dotyku */
        min-height: 44px;      /* dostępność */
        border: 1px solid #e2e2e2;
        border-radius: .7rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        text-decoration: none;
        font-size: 16px;
        color: #111;
        transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
        -webkit-tap-highlight-color: transparent;
      }
      #gate-content .btn:hover,
      #gate-content .btn:focus-visible {
        background: #f6f6f6;
        box-shadow: 0 2px 6px rgba(0,0,0,.08);
        outline: none;
      }
      #gate-content .btn:active { transform: translateY(1px); }
      #gate-content .btn .ico { font-size: 1.1em; line-height: 1; }
      /* Na bardzo wąskich ekranach przyciski na pełną szerokość */
      @media (max-width: 380px) {
        #gate-content .btn { flex: 1 1 100%; }
      }
    </style>

    <div class="quick-links">
      <a class="btn" href="https://docs.google.com/forms/d/e/1FAIpQLSeOE2KllXiVXFn-TGFPKqQYFZZWbJDkLy0vvdn8M5umKTT4Yg/viewform?usp=dialog" target="_blank" rel="noopener" aria-label="Raport dzienny formularz">
        <span class="ico">📝</span> Raport dzienny (formularz)
      </a>

      <a class="btn" href="https://docs.google.com/spreadsheets/d/1USsI1QJfThz4IZzi_qSPMKNMLSXmM5Dd43GbCJXGUk8/preview" target="_blank" rel="noopener" aria-label="Kody do kas fiskalnych tylko odczyt">
        <span class="ico">🔐</span> Kody do kas (tylko odczyt)
      </a>

      <a class="btn" href="https://docs.google.com/spreadsheets/d/1USsI1QJfThz4IZzi_qSPMKNMLSXmM5Dd43GbCJXGUk8" target="_blank" rel="noopener" aria-label="Kody do kas fiskalnych edycja">
        <span class="ico">✏️</span> Kody do kas (edycja)
      </a>
    </div>
  </div>
</div>

<script>
(async () => {
  // SHA-256("Kosmetologia:stroze81") w hex:
  const EXPECTED_HEX = "bff7b1c3fdc1365c99bf9cda1a0fb321fc1aa4169f66f80638f5fb35f992932f";

  const toHex = buf => [...new Uint8Array(buf)].map(b => b.toString(16).padStart(2, "0")).join("");
  async function sha256Hex(text) {
    const enc = new TextEncoder().encode(text);
    const digest = await crypto.subtle.digest("SHA-256", enc);
    return toHex(digest);
  }

  const form = document.getElementById("gate-form");
  const user = document.getElementById("gate-user");
  const pass = document.getElementById("gate-pass");
  const msg  = document.getElementById("gate-msg");
  const content = document.getElementById("gate-content");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    msg.textContent = "";
    try {
      const hex = await sha256Hex(`${user.value}:${pass.value}`);
      if (hex === EXPECTED_HEX) {
        form.style.display = "none";
        content.style.display = "block";
        user.value = ""; pass.value = "";
      } else {
        msg.textContent = "Nieprawidłowy login lub hasło.";
      }
    } catch (err) {
      console.error(err);
      msg.textContent = "Błąd przeglądarki podczas weryfikacji.";
    }
  });
})();
</script>