/* CSS is how you can a<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Neocities Safe "Unblock" Hub</title>
  <style>
    :root{
      --bg:#071026;
      --panel:#081426;
      --accent:#7ef9a4;
      --accent2:#7ad7ff;
      --glass: rgba(255,255,255,0.03);
      --radius:14px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
      color-scheme: dark;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      background:
        radial-gradient(600px 300px at 10% 20%, rgba(122,215,255,0.03), transparent 10%),
        linear-gradient(180deg,var(--bg),#041025 90%);
      color:#eafaf0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px;
    }
    .card {
      width:100%;
      max-width:980px;
      background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
      border-radius:var(--radius);
      padding:22px;
      border:1px solid rgba(255,255,255,0.03);
      box-shadow: 0 20px 50px rgba(2,6,23,0.7);
      display:grid;
      grid-template-columns: 360px 1fr;
      gap:20px;
    }
    header h1{ margin:0; font-size:20px; color:var(--accent); letter-spacing:0.6px }
    header p{ margin:6px 0 14px 0; color:rgba(234,250,240,0.86); font-size:13px }

    .left {
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
      padding:16px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.02);
    }

    label{ display:block; font-size:13px; margin-bottom:6px; color:rgba(234,250,240,0.9) }
    input[type="text"], input[type="email"], textarea {
      width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04);
      background:var(--glass); color:inherit; font-size:14px; outline:none;
    }
    .row { display:flex; gap:8px; margin-top:8px }
    .btn {
      background:linear-gradient(180deg,var(--accent),#5fe09a);
      border:none; padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer;
      color:#01261a;
    }
    .btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--accent2) }

    .search-form { display:flex; gap:8px; margin-bottom:10px }
    .search-form input[type="search"]{ flex:1 }

    .right {
      padding:16px;
    }
    .section { margin-bottom:14px; background: rgba(255,255,255,0.01); padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.02) }
    .muted { font-size:13px; color:rgba(234,250,240,0.75) }

    pre { background: #02121b; padding:12px; border-radius:8px; overflow:auto; font-family:var(--mono); font-size:13px }

    footer { grid-column:1/-1; text-align:center; font-size:13px; color:rgba(234,250,240,0.6); margin-top:8px }

    @media (max-width:860px){
      .card{ grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="card" role="main" aria-label="Safe unblock hub">
    <div class="left">
      <header>
        <h1>🛡️ Safe Unblock Hub</h1>
        <p>Helps you request access properly and search safely. This does <strong>not</strong> bypass network filters.</p>
      </header>

      <div class="section">
        <label for="q">Quick DuckDuckGo Search</label>
        <form class="search-form" method="get" action="https://duckduckgo.com/" target="_blank" rel="noopener">
          <input type="search" id="q" name="q" placeholder="Search DuckDuckGo (opens in new tab)" />
          <button class="btn" type="submit">Search</button>
        </form>
        <div class="muted">Search opens in a new tab — works as long as your network doesn't block DuckDuckGo.</div>
      </div>

      <div class="section">
        <label for="url">URL you want unblocked</label>
        <input id="url" type="text" placeholder="https://example.com/article" />

        <label for="why" style="margin-top:10px">Why you need it (short)</label>
        <input id="why" type="text" placeholder="Research for class / reference / educational resource" />

        <div class="row" style="margin-top:10px">
          <button id="compose" class="btn">Compose unblock request</button>
          <button id="copyBtn" class="btn ghost">Copy request</button>
        </div>
        <div style="margin-top:8px" class="muted">Use the composed text to email or submit a ticket to your IT/admin team.</div>
      </div>

      <div class="section">
        <label>One-click: Email admin</label>
        <!-- Edit mailto address to your admin's email or leave it generic -->
        <input id="adminEmail" type="email" placeholder="admin@example.edu" />
        <div class="row" style="margin-top:8px">
          <button id="emailBtn" class="btn ghost">Send email (opens mail client)</button>
          <button id="downloadTxt" class="btn ghost">Download request (.txt)</button>
        </div>
      </div>

    </div>

    <div class="right">
      <div class="section">
        <h3 style="margin:0;color:var(--accent)">What to include when asking to unblock</h3>
        <ul style="margin:8px 0 0 18px" class="muted">
          <li>The <strong>exact URL</strong> (copy-paste the address bar).</li>
          <li>A short reason (class assignment, research, etc.).</li>
          <li>Approx. how long you need access (one-time / permanent).</li>
          <li>Any supervising teacher or staff supporting the request.</li>
        </ul>
      </div>

      <div class="section">
        <h4 style="margin:0 0 8px 0;color:var(--accent2)">Composed request</h4>
        <pre id="composed" aria-live="polite">No request composed yet. Enter URL + reason, then click "Compose unblock request".</pre>
      </div>

      <div class="section">
        <h4 style="margin:0 0 8px 0;color:var(--accent2)">Sample unblock request (editable)</h4>
        <pre>
To: IT/Filtering Team
Subject: Request to allow access to example.com for class research

Hello,

I am requesting that the following URL be unblocked for educational use:
https://example.com/article

Reason: Research for [class name] assignment on [topic]. The content is relevant because...

Requested duration: One semester / permanent (please advise).

If you need additional context or have concerns, I can provide more information or a supervising teacher's endorsement.

Thank you,
[Your Name], [Class / Grade / Contact Info]
        </pre>
      </div>

      <div class="section">
        <h4 style="margin:0 0 8px 0;color:var(--accent)">Resources</h4>
        <ul style="margin:0 0 0 18px" class="muted">
          <li>Ask your teacher/staff to support the request — it often speeds up approvals.</li>
          <li>Provide exact URLs (not just site names).</li>
          <li>Be polite & concise — admins handle many requests.</li>
        </ul>
      </div>
    </div>

    <footer>Made with ❤ on Neocities — This page does not and will not bypass network filters.</footer>
  </div>

<script>
  // Compose request text
  const urlInput = document.getElementById('url');
  const whyInput = document.getElementById('why');
  const composed = document.getElementById('composed');
  const composeBtn = document.getElementById('compose');
  const copyBtn = document.getElementById('copyBtn');
  const emailBtn = document.getElementById('emailBtn');
  const adminEmail = document.getElementById('adminEmail');
  const downloadTxt = document.getElementById('downloadTxt');

  function makeText(url, why) {
    if(!url) return "Please enter the URL you want unblocked.";
    const reason = why || "Research / educational use";
    return `To: IT/Filtering Team
Subject: Request to allow access to ${url}

Hello,

I am requesting that the following URL be unblocked for educational use:
${url}

Reason: ${reason}

Requested duration: One week / one semester / permanent — please advise.

If you need additional context or a supporting staff member, I can provide more details.

Thank you,
[Your Name], [Class / Grade / Contact Info]`;
  }

  composeBtn.addEventListener('click', () => {
    const txt = makeText(urlInput.value.trim(), whyInput.value.trim());
    composed.textContent = txt;
  });

  copyBtn.addEventListener('click', () => {
    const txt = composed.textContent;
    if(!navigator.clipboard) {
      alert("Clipboard not available — copy manually.");
      return;
    }
    navigator.clipboard.writeText(txt).then(()=> {
      alert("Composed request copied to clipboard.");
    }).catch(()=> alert("Unable to copy. Try selecting and copying manually."));
  });

  emailBtn.addEventListener('click', () => {
    const to = adminEmail.value.trim() || "";
    const txt = composed.textContent.includes("Please enter the URL") ? makeText(urlInput.value.trim(), whyInput.value.trim()) : composed.textContent;
    const subject = encodeURIComponent("Request to allow access to site");
    const body = encodeURIComponent(txt);
    // opens user's email client — does not bypass any filter
    window.location.href = `mailto:${to}?subject=${subject}&body=${body}`;
  });

  downloadTxt.addEventListener('click', () => {
    const blob = new Blob([composed.textContent], {type: 'text/plain'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'unblock-request.txt';
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
  });
</script>
</body>
</html>dd style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}