From 0ce7927d36aa567a2eaf790866abafc13ef874b7 Mon Sep 17 00:00:00 2001
From: sesh <sesh@kernel.rip>
Date: Sun, 3 May 2026 23:12:56 +0200
Subject: [PATCH] Delete index.html

---
 index.html | 575 -----------------------------------------------------
 1 file changed, 575 deletions(-)
 delete mode 100644 index.html
diff --git a/index.html b/index.html
deleted file mode 100644
index 1976037..0000000
--- a/index.html
+++ /dev/null
@@ -1,575 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>squid.conf · proxy + wpad configurator</title>
-<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=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&display=swap" rel="stylesheet">
-<style>
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  html, body { height: 100%; }
-  body {
-    background: #0a0908;
-    color: #e8e4dc;
-    font-family: 'IBM Plex Sans', system-ui, sans-serif;
-    -webkit-font-smoothing: antialiased;
-  }
-  .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
-  .display { font-family: 'IBM Plex Sans Condensed', sans-serif; letter-spacing: -0.01em; }
-
-  header {
-    border-bottom: 1px solid #2a2724;
-    padding: 20px 32px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .logo {
-    width: 36px; height: 36px;
-    border: 1px solid #ff8a00;
-    display: flex; align-items: center; justify-content: center;
-    color: #ff8a00;
-  }
-  .title { font-size: 22px; font-weight: 600; line-height: 1; }
-  .subtitle { font-size: 11px; color: #8a857d; margin-top: 4px; }
-
-  .layout {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
-    min-height: calc(100vh - 78px);
-  }
-  @media (max-width: 900px) {
-    .layout { grid-template-columns: 1fr; }
-    .left { border-right: none !important; border-bottom: 1px solid #2a2724; }
-  }
-  .left {
-    padding: 32px;
-    border-right: 1px solid #2a2724;
-    display: flex; flex-direction: column; gap: 32px;
-  }
-  .right {
-    padding: 32px;
-    display: flex; flex-direction: column; gap: 20px;
-  }
-
-  .section-head {
-    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
-  }
-  .section-icon { color: #ff8a00; flex-shrink: 0; }
-  .section-title {
-    font-size: 12px; font-weight: 500; color: #e8e4dc;
-    letter-spacing: 0.02em;
-  }
-  .section-sub {
-    font-size: 10px; color: #8a857d; margin-top: 2px;
-  }
-
-  .chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
-  .chip {
-    display: inline-flex; align-items: center; gap: 6px;
-    padding: 5px 10px;
-    background: #161513;
-    border: 1px solid #2a2724;
-    font-size: 11px;
-    transition: border-color 120ms ease;
-  }
-  .chip:hover { border-color: #ff8a00; }
-  .chip-x {
-    background: transparent; border: none; color: #ff8a00;
-    cursor: pointer; padding: 0; display: flex; align-items: center;
-    opacity: 0; transition: opacity 120ms ease;
-  }
-  .chip:hover .chip-x { opacity: 1; }
-  .chip-empty { font-size: 11px; color: #5a5751; padding: 8px 0; }
-
-  .input-row { display: flex; gap: 6px; }
-  .field {
-    background: #0a0908;
-    border: 1px solid #2a2724;
-    color: #e8e4dc;
-    padding: 8px 12px;
-    font-size: 12px;
-    font-family: 'IBM Plex Mono', monospace;
-    transition: border-color 120ms ease;
-    width: 100%;
-  }
-  .field:focus { outline: none; border-color: #ff8a00; }
-  .field-label {
-    font-size: 9px; color: #5a5751; text-transform: uppercase;
-    letter-spacing: 0.1em; margin-bottom: 4px;
-  }
-  .field-grid { display: grid; grid-template-columns: 1fr 100px; gap: 8px; }
-
-  .btn {
-    background: transparent;
-    color: #8a857d;
-    border: 1px solid #2a2724;
-    padding: 8px 14px;
-    font-size: 11px;
-    font-family: 'IBM Plex Mono', monospace;
-    cursor: pointer;
-    display: inline-flex; align-items: center; gap: 6px;
-    transition: all 120ms ease;
-  }
-  .btn:hover:not(:disabled) { background: #1f1d1a; border-color: #ff8a00; color: #e8e4dc; }
-  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
-  .btn-primary { color: #ff8a00; border-color: #ff8a00; }
-  .btn-primary:hover:not(:disabled) { background: #ff8a00; color: #0a0908; }
-  .btn-success { color: #4ade80; border-color: #4ade80; }
-  .btn-danger { color: #f87171; border-color: #f87171; }
-
-  .actions { display: flex; gap: 8px; align-items: center; }
-
-  .footnote {
-    font-size: 10px; color: #5a5751;
-    border-top: 1px solid #2a2724;
-    padding-top: 16px;
-    margin-top: auto;
-    line-height: 1.7;
-    font-family: 'IBM Plex Mono', monospace;
-  }
-
-  .out-card {
-    background: #0f0e0c;
-    border: 1px solid #2a2724;
-  }
-  .out-head {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 16px; border-bottom: 1px solid #2a2724; gap: 8px;
-  }
-  .out-name {
-    font-size: 12px; font-weight: 500; color: #e8e4dc;
-    font-family: 'IBM Plex Mono', monospace;
-  }
-  .out-path {
-    font-size: 10px; color: #5a5751; margin-top: 1px;
-    font-family: 'IBM Plex Mono', monospace;
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  }
-  .out-actions { display: flex; gap: 4px; flex-shrink: 0; }
-  .out-actions .btn { padding: 6px 10px; font-size: 10px; }
-  .out-code {
-    margin: 0; padding: 16px;
-    font-size: 11px; line-height: 1.7;
-    color: #c8c4bc;
-    font-family: 'IBM Plex Mono', monospace;
-    overflow: auto; max-height: 320px;
-    background: #0a0908;
-    white-space: pre;
-  }
-  .out-code::-webkit-scrollbar { height: 6px; width: 6px; }
-  .out-code::-webkit-scrollbar-thumb { background: #2a2724; border-radius: 3px; }
-  .out-code::-webkit-scrollbar-thumb:hover { background: #ff8a00; }
-
-  .right-head {
-    display: flex; justify-content: space-between; align-items: flex-end;
-    margin-bottom: 4px; gap: 16px;
-  }
-  .gen-label {
-    font-size: 10px; color: #ff8a00;
-    letter-spacing: 0.1em; margin-bottom: 4px;
-    font-family: 'IBM Plex Mono', monospace;
-  }
-  .gen-title { font-size: 18px; font-weight: 600; }
-
-  .toast {
-    position: fixed; bottom: 24px; right: 24px;
-    background: #161513; border: 1px solid #2a2724;
-    padding: 12px 16px; font-size: 11px;
-    font-family: 'IBM Plex Mono', monospace;
-    display: flex; align-items: center; gap: 8px;
-    transform: translateY(100px); opacity: 0;
-    transition: all 200ms ease;
-    z-index: 100;
-  }
-  .toast.show { transform: translateY(0); opacity: 1; }
-  .toast.ok { border-color: #4ade80; color: #4ade80; }
-  .toast.warn { border-color: #facc15; color: #facc15; }
-  .toast.err { border-color: #f87171; color: #f87171; }
-
-  .dirty-dot {
-    width: 6px; height: 6px; border-radius: 50%;
-    background: #ff8a00;
-    display: inline-block;
-  }
-
-  .loading {
-    display: flex; align-items: center; justify-content: center;
-    height: 100vh; color: #8a857d; font-family: 'IBM Plex Mono', monospace;
-    font-size: 12px;
-  }
-</style>
-</head>
-<body>
-<div id="root"><div class="loading">loading...</div></div>
-
-<script type="module">
-import { h, render } from 'https://esm.sh/preact@10.24.3';
-import { useState, useEffect, useCallback } from 'https://esm.sh/preact@10.24.3/hooks';
-import htm from 'https://esm.sh/htm@3.1.1';
-const html = htm.bind(h);
-
-// --- Inline SVG icons (no external icon lib for size) ---
-const Icon = (paths, size = 14) => () => html`
-  <svg width=${size} height=${size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
-       stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    ${paths.map((d) => html`<path d=${d} />`)}
-  </svg>
-`;
-const NetworkIcon = Icon(["M9 2L9 7","M15 2L15 7","M9 17L9 22","M15 17L15 22","M2 9L7 9","M2 15L7 15","M17 9L22 9","M17 15L22 15","M7 7L17 7L17 17L7 17Z"]);
-const GlobeIcon = Icon(["M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z","M2 12h20","M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"]);
-const ServerIcon = Icon(["M2 4h20v6H2z","M2 14h20v6H2z","M6 7h.01","M6 17h.01"]);
-const TerminalIcon = Icon(["M4 17l6-6-6-6","M12 19h8"]);
-const FileIcon = Icon(["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z","M14 2v6h6","M16 13H8","M16 17H8","M10 9H8"]);
-const CodeIcon = Icon(["M16 18l6-6-6-6","M8 6l-6 6 6 6"]);
-const PlusIcon = Icon(["M12 5v14","M5 12h14"]);
-const XIcon = Icon(["M18 6L6 18","M6 6l12 12"], 11);
-const CopyIcon = Icon(["M16 3H4a2 2 0 0 0-2 2v12","M8 7h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"], 11);
-const DownloadIcon = Icon(["M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4","M7 10l5 5 5-5","M12 15V3"], 11);
-const CheckIcon = Icon(["M20 6L9 17l-5-5"], 11);
-const ResetIcon = Icon(["M3 12a9 9 0 1 0 9-9","M3 4v5h5"], 12);
-const SaveIcon = Icon(["M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z","M17 21v-8H7v8","M7 3v5h8"]);
-const RefreshIcon = Icon(["M23 4v6h-6","M1 20v-6h6","M3.51 9a9 9 0 0 1 14.85-3.36L23 10","M1 14l4.64 4.36A9 9 0 0 0 20.49 15"], 12);
-
-// --- API ---
-async function apiGet(url) {
-  const r = await fetch(url);
-  if (!r.ok) throw new Error((await r.json()).error || r.statusText);
-  return r.json();
-}
-async function apiPost(url, body) {
-  const r = await fetch(url, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: body ? JSON.stringify(body) : undefined,
-  });
-  const data = await r.json();
-  if (!r.ok) throw new Error(data.error || r.statusText);
-  return data;
-}
-
-// --- Generators (mirror server, for live preview) ---
-function genSquid(s) {
-  return `http_port 3128
-
-# Erlaubte Subnetze
-${s.networks.map(n => `acl localnet src ${n}`).join('\n')}
-
-http_access allow localnet
-http_access deny all
-
-# Domain-Whitelist
-acl vpn_domains dstdomain "/etc/squid/vpn_domains.txt"
-
-# Upstream zu Gluetun
-cache_peer ${s.upstreamHost} parent ${s.upstreamPort} 0 no-query default name=gluetun
-never_direct allow vpn_domains
-cache_peer_access gluetun allow vpn_domains
-cache_peer_access gluetun deny all
-
-never_direct deny all
-forwarded_for delete
-
-access_log /var/log/squid/access.log
-cache_log /var/log/squid/cache.log
-`;
-}
-function genDomains(s) {
-  return s.domains.map(d => d.startsWith('*.') ? '.' + d.slice(2) : d).join('\n') + '\n';
-}
-function genWpad(s) {
-  return `function FindProxyForURL(url, host) {
-    var vpn_domains = [
-${s.domains.map(d => `        "${d}"`).join(',\n')}
-    ];
-
-    for (var i = 0; i < vpn_domains.length; i++) {
-        if (shExpMatch(host, vpn_domains[i])) {
-            return "PROXY ${s.proxyHost}:${s.proxyPort}";
-        }
-    }
-
-    return "DIRECT";
-}
-`;
-}
-
-// --- Components ---
-function App() {
-  const [state, setState] = useState(null);
-  const [savedState, setSavedState] = useState(null);
-  const [newNet, setNewNet] = useState('');
-  const [newDom, setNewDom] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [toast, setToast] = useState(null);
-  const [copied, setCopied] = useState(null);
-
-  useEffect(() => {
-    apiGet('/api/config')
-      .then((cfg) => { setState(cfg); setSavedState(JSON.stringify(cfg)); })
-      .catch((e) => showToast('err', `load failed: ${e.message}`));
-  }, []);
-
-  const showToast = (kind, msg, ms = 2500) => {
-    setToast({ kind, msg });
-    setTimeout(() => setToast(null), ms);
-  };
-
-  const update = (patch) => setState((s) => ({ ...s, ...patch }));
-  const dirty = state && JSON.stringify(state) !== savedState;
-
-  const save = async () => {
-    if (!state) return;
-    setBusy(true);
-    try {
-      const r = await apiPost('/api/config', state);
-      setSavedState(JSON.stringify(state));
-      if (r.reloaded) showToast('ok', 'saved & squid reloaded');
-      else showToast('warn', `saved, reload failed: ${r.reloadError ?? 'unknown'}`, 4000);
-    } catch (e) {
-      showToast('err', e.message, 4000);
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const reload = async () => {
-    setBusy(true);
-    try {
-      await apiPost('/api/reload');
-      showToast('ok', 'squid reloaded');
-    } catch (e) {
-      showToast('err', e.message, 4000);
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const reset = async () => {
-    if (!confirm('Auf Defaults zurücksetzen? Wird erst beim Speichern persistiert.')) return;
-    try {
-      // Reset to defaults but don't save yet
-      const defaults = {
-        networks: ['192.168.0.0/24', '192.168.1.0/24', '192.168.2.0/24'],
-        domains: ['*.netflix.com', '*.spotify.com'],
-        upstreamHost: 'gluetun', upstreamPort: '8888',
-        proxyHost: 'cerberus.lan', proxyPort: '3128',
-      };
-      setState(defaults);
-    } catch (e) {
-      showToast('err', e.message);
-    }
-  };
-
-  const addNet = () => {
-    const v = newNet.trim();
-    if (v && !state.networks.includes(v)) {
-      update({ networks: [...state.networks, v] });
-      setNewNet('');
-    }
-  };
-  const addDom = () => {
-    const v = newDom.trim();
-    if (v && !state.domains.includes(v)) {
-      update({ domains: [...state.domains, v] });
-      setNewDom('');
-    }
-  };
-
-  const copyText = async (key, text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch {
-      const ta = document.createElement('textarea');
-      ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px';
-      document.body.appendChild(ta); ta.select(); document.execCommand('copy');
-      document.body.removeChild(ta);
-    }
-    setCopied(key);
-    setTimeout(() => setCopied(null), 1500);
-  };
-
-  const downloadFile = (name, content) => {
-    const blob = new Blob([content], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url; a.download = name;
-    document.body.appendChild(a); a.click(); document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  if (!state) return html`<div class="loading">loading...</div>`;
-
-  const outputs = [
-    { key: 'squid', name: 'squid.conf', path: '/opt/squid/config/squid.conf', content: genSquid(state), Icon: TerminalIcon },
-    { key: 'domains', name: 'vpn_domains.txt', path: '/opt/squid/config/vpn_domains.txt', content: genDomains(state), Icon: FileIcon },
-    { key: 'wpad', name: 'wpad.dat', path: '/opt/squid/wpad/wpad.dat', content: genWpad(state), Icon: CodeIcon },
-  ];
-
-  return html`
-    <header>
-      <div style="display:flex; align-items:center; gap:16px;">
-        <div class="logo">${h(NetworkIcon, { size: 18 })}</div>
-        <div>
-          <div class="display title">squid<span style="color:#ff8a00;">.</span>conf</div>
-          <div class="subtitle mono">proxy + wpad configurator</div>
-        </div>
-      </div>
-      <div class="actions">
-        <button class="btn" onClick=${reset} disabled=${busy}>
-          ${h(ResetIcon, {})} reset
-        </button>
-        <button class="btn" onClick=${reload} disabled=${busy}>
-          ${h(RefreshIcon, {})} reload squid
-        </button>
-        <button class=${`btn ${dirty ? 'btn-primary' : ''}`}
-                onClick=${save} disabled=${!dirty || busy}>
-          ${h(SaveIcon, { size: 12 })} ${busy ? 'saving...' : 'save & apply'}
-          ${dirty && !busy ? html`<span class="dirty-dot"></span>` : ''}
-        </button>
-      </div>
-    </header>
-
-    <div class="layout">
-      <div class="left">
-        <${Section} icon=${NetworkIcon} title="allowed networks" subtitle="subnets that may use this proxy">
-          <div class="chip-list">
-            ${state.networks.map((n) => html`
-              <div class="chip mono" key=${n}>
-                <span>${n}</span>
-                <button class="chip-x" onClick=${() => update({ networks: state.networks.filter(x => x !== n) })}>
-                  ${h(XIcon, {})}
-                </button>
-              </div>
-            `)}
-            ${state.networks.length === 0 && html`<div class="chip-empty mono">no networks — proxy will deny all</div>`}
-          </div>
-          <${InputRow} value=${newNet} onChange=${setNewNet} onSubmit=${addNet} placeholder="192.168.3.0/24" />
-        <//>
-
-        <${Section} icon=${GlobeIcon} title="proxied domains" subtitle="whitelist routed through gluetun">
-          <div class="chip-list">
-            ${state.domains.map((d) => html`
-              <div class="chip mono" key=${d}>
-                <span>${d}</span>
-                <button class="chip-x" onClick=${() => update({ domains: state.domains.filter(x => x !== d) })}>
-                  ${h(XIcon, {})}
-                </button>
-              </div>
-            `)}
-            ${state.domains.length === 0 && html`<div class="chip-empty mono">no domains — nothing will be proxied</div>`}
-          </div>
-          <${InputRow} value=${newDom} onChange=${setNewDom} onSubmit=${addDom} placeholder="*.example.com" />
-          <div class="mono" style="font-size:10px; color:#5a5751; margin-top:8px;">
-            wildcards work in PAC. for squid, leading dot is auto-added.
-          </div>
-        <//>
-
-        <${Section} icon=${ServerIcon} title="upstream proxy (gluetun)" subtitle="where matched traffic is forwarded">
-          <div class="field-grid">
-            <${Field} label="host" value=${state.upstreamHost} onChange=${(v) => update({ upstreamHost: v })} placeholder="gluetun" />
-            <${Field} label="port" value=${state.upstreamPort} onChange=${(v) => update({ upstreamPort: v })} placeholder="8888" />
-          </div>
-        <//>
-
-        <${Section} icon=${TerminalIcon} title="squid address (for PAC)" subtitle="how clients reach this squid instance">
-          <div class="field-grid">
-            <${Field} label="host" value=${state.proxyHost} onChange=${(v) => update({ proxyHost: v })} placeholder="cerberus.lan" />
-            <${Field} label="port" value=${state.proxyPort} onChange=${(v) => update({ proxyPort: v })} placeholder="3128" />
-          </div>
-        <//>
-
-        <div class="footnote">
-          changes apply on save · backend writes files atomically · squid reloads via docker exec
-        </div>
-      </div>
-
-      <div class="right">
-        <div class="right-head">
-          <div>
-            <div class="gen-label">GENERATED OUTPUT</div>
-            <div class="gen-title display">${dirty ? 'Live-Vorschau (ungespeichert)' : 'Aktuelle Konfiguration'}</div>
-          </div>
-        </div>
-
-        ${outputs.map((o) => html`
-          <div class="out-card" key=${o.key}>
-            <div class="out-head">
-              <div style="display:flex; align-items:center; gap:10px; min-width:0;">
-                ${h(o.Icon, { size: 13 })}
-                <div style="min-width:0;">
-                  <div class="out-name">${o.name}</div>
-                  <div class="out-path">${o.path}</div>
-                </div>
-              </div>
-              <div class="out-actions">
-                <button class=${`btn ${copied === o.key ? 'btn-success' : ''}`}
-                        onClick=${() => copyText(o.key, o.content)}>
-                  ${copied === o.key ? h(CheckIcon, {}) : h(CopyIcon, {})}
-                  ${copied === o.key ? 'copied' : 'copy'}
-                </button>
-                <button class="btn" onClick=${() => downloadFile(o.name, o.content)}>
-                  ${h(DownloadIcon, {})} save
-                </button>
-              </div>
-            </div>
-            <pre class="out-code">${o.content}</pre>
-          </div>
-        `)}
-      </div>
-    </div>
-
-    ${toast && html`
-      <div class=${`toast show ${toast.kind}`}>
-        ${toast.kind === 'ok' ? h(CheckIcon, {}) : '⚠'} ${toast.msg}
-      </div>
-    `}
-  `;
-}
-
-function Section({ icon, title, subtitle, children }) {
-  return html`
-    <section>
-      <div class="section-head">
-        <div class="section-icon">${h(icon, {})}</div>
-        <div>
-          <div class="section-title mono">${title}</div>
-          <div class="section-sub mono">${subtitle}</div>
-        </div>
-      </div>
-      ${children}
-    </section>
-  `;
-}
-
-function InputRow({ value, onChange, onSubmit, placeholder }) {
-  return html`
-    <div class="input-row">
-      <input class="field" type="text" value=${value}
-             placeholder=${placeholder}
-             onInput=${(e) => onChange(e.target.value)}
-             onKeyDown=${(e) => e.key === 'Enter' && onSubmit()} />
-      <button class="btn btn-primary" onClick=${onSubmit}>
-        ${h(PlusIcon, { size: 12 })} add
-      </button>
-    </div>
-  `;
-}
-
-function Field({ label, value, onChange, placeholder }) {
-  return html`
-    <div>
-      <div class="field-label mono">${label}</div>
-      <input class="field" type="text" value=${value}
-             placeholder=${placeholder}
-             onInput=${(e) => onChange(e.target.value)} />
-    </div>
-  `;
-}
-
-render(html`<${App}/>`, document.getElementById('root'));
-</script>
-</body>
-</html>
