denshooter/ttt-site
1
0
Fork 0
mirror of https://github.com/denshooter/ttt-site.git synced 2026-01-21 12:43:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
denshooter
2025-08-29 18:05:57 +02:00
committed by GitHub
parent ee790ac2ab
commit 9fd5e3810c
1 changed files with 115 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
loading/index.html
View File

@@ -4,110 +4,105 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="Cache-Control" content="no-store" /> <meta http-equiv="Cache-Control" content="no-store" />
<meta name="color-scheme" content="dark light" />
<title>Verbinde …</title> <title>Verbinde …</title>
<style> <style>
:root{ :root{
--bg:#0b0f14; --bg2:#0d1420; --card:#0f1620; --card2:#0c121a; --bg:#0b0f14; --card:#0f1620; --muted:#8aa0b3; --accent:#73d7ff; --ok:#8affc1; --warn:#ffc46b;
--stroke:#1a2634; --muted:#8aa0b3; --text:#e8f0f7;
--accent:#73d7ff; --ok:#8affc1;
} }
*{box-sizing:border-box} html,body{height:100%} *{box-sizing:border-box} html,body{height:100%}
body{ body{
margin:0; color:var(--text); margin:0; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial; color:#e8f0f7; background:
background:
radial-gradient(1200px 800px at 80% -10%,#132033 0%,transparent 60%), radial-gradient(1200px 800px at 80% -10%,#132033 0%,transparent 60%),
linear-gradient(180deg,var(--bg),var(--bg) 60%,var(--bg2)); linear-gradient(180deg,#0b0f14,#0b0f14 60%,#0d1420);
} }
.container{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px} .container{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px}
.card{ .card{
width:min(980px,94vw); width:min(960px,94vw); background:linear-gradient(180deg,var(--card),#0c121a);
background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid #1a2634; border-radius:16px; padding:26px 28px; box-shadow:0 10px 30px rgba(0,0,0,.35)
border:1px solid var(--stroke); border-radius:16px; padding:26px 28px;
box-shadow:0 10px 30px rgba(0,0,0,.35)
} }
h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px} h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px}
.logo{font-weight:700; letter-spacing:.5px} .meta{display:flex; flex-wrap:wrap; gap:10px 18px; color:var(--muted); font-size:14px; margin-bottom:18px}
.meta{display:flex; flex-wrap:wrap; gap:10px 12px; color:var(--muted); font-size:14px; margin-bottom:12px} .badge{border:1px solid #243447; padding:6px 10px; border-radius:999px; background:#111926}
.badge{border:1px solid var(--stroke); padding:6px 10px; border-radius:999px; background:#111926}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:18px} .grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:760px){.grid{grid-template-columns:1fr}} .box{border:1px solid #1a2634; border-radius:14px; padding:16px; background:#0c131c}
.box{border:1px solid var(--stroke); border-radius:14px; padding:16px; background:var(--card2)}
.box strong{display:block; margin-bottom:6px}
a{color:var(--accent); text-decoration:none} a{color:var(--accent); text-decoration:none}
.logo{font-weight:700; letter-spacing:.5px}
/* Phasen-Chips */ /* Stepper */
.phases{list-style:none;padding:0;margin:10px 0 12px;display:flex;gap:8px;flex-wrap:wrap} .stepper{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.phases li{padding:6px 10px;border:1px solid var(--stroke);border-radius:999px;background:var(--card2);opacity:.55;transition:opacity .25s ease, box-shadow .25s ease} .step{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px}
.phases li.on{opacity:1; box-shadow:0 0 0 9999px inset rgba(115,215,255,.07)} .dot{width:14px; height:14px; border-radius:50%; background:#1a2534; border:1px solid #253247}
.step.active .dot{background:var(--accent); box-shadow:0 0 0 4px rgba(115,215,255,.18)}
.step.done .dot{background:var(--ok)}
.line{height:2px; flex:1; background:#1a2534}
/* Fortschrittsbalken */ /* Bars (indeterminate) */
.row{display:grid; gap:12px} .bar{height:10px; background:#0b1420; border-radius:999px; overflow:hidden; position:relative; margin-top:8px}
.label{display:flex; justify-content:space-between; gap:12px; font-size:14px; color:#cfe7ff} .fill{height:100%; width:35%; background:linear-gradient(90deg,var(--accent),var(--ok))}
.bar.indet .fill{animation:indetMove 1.15s linear infinite}
@keyframes indetMove{0%{transform:translateX(-120%)}100%{transform:translateX(300%)}}
/* states & text */
.row{display:grid; gap:10px}
.label{display:flex; justify-content:space-between; gap:12px; font-size:14px; color:#cfe3f5}
.sub{color:var(--muted); font-size:12px; margin-top:4px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden} .sub{color:var(--muted); font-size:12px; margin-top:4px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.bar{height:10px; background:#0b1420; border-radius:999px; overflow:hidden; position:relative}
.fill{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--ok)); transition:width .15s ease-in-out}
.bar.indet::before{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 35%, transparent 70%);
animation:flow 1.2s linear infinite;
}
@keyframes flow{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.kbd{border:1px solid #2a3a4f; background:#0b1320; border-radius:6px; padding:2px 6px} .kbd{border:1px solid #2a3a4f; background:#0b1320; border-radius:6px; padding:2px 6px}
.tip{opacity:.95; font-size:14px} .tip{opacity:.95; font-size:14px}
.footer{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:13px} .footer{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; color:var(--muted); font-size:13px}
.small{font-size:12px; color:#9fb3c9} .small{font-size:12px; color:#9fb3c9}
/* freeze animation when done */
.bar.done .fill{animation:none; width:100%}
</style> </style>
</head> </head>
<body> <body>
<noscript><div style="padding:12px;background:#300;border-bottom:1px solid #633;color:#fff;font:14px/1.3 monospace">
Dieses Overlay benötigt JavaScript, um Server/Map/Modus und Fortschritt zu zeigen.</div></noscript>
<div class="container"><div class="card"> <div class="container"><div class="card">
<!-- Kopfzeile -->
<div class="meta"> <div class="meta">
<span class="badge">Server: <span id="sv">…</span></span> <span class="badge">Server: <span id="sv">…</span></span>
<span class="badge">Map: <span id="map">…</span></span> <span class="badge">Map: <span id="map">…</span></span>
<span class="badge">Modus: <span id="gm">…</span></span> <span class="badge">Modus: <span id="gm">…</span></span>
<span class="badge">Du: <span id="me">…</span></span> <span class="badge">Du: <span id="me">…</span></span>
</div> </div>
<h1 class="logo">Willkommen auf <span id="sv2">deinem Server</span> 👋</h1> <h1 class="logo">Willkommen auf <span id="sv2">deinem Server</span> 👋</h1>
<!-- Phasen --> <!-- Stepper -->
<ul class="phases"> <div class="stepper">
<li id="ph-work" class="on">Workshop prüfen</li> <div class="step active" id="st-work"><div class="dot"></div>Workshop</div>
<li id="ph-srv">Server-Content</li> <div class="line"></div>
<li id="ph-init">Initialisierung</li> <div class="step" id="st-srv"><div class="dot"></div>Server-Content</div>
</ul> <div class="line"></div>
<div class="step" id="st-init"><div class="dot"></div>Initialisierung</div>
</div>
<div class="grid"> <div class="grid">
<!-- Fortschritt -->
<div class="box"> <div class="box">
<strong>Fortschritt</strong> <strong>Fortschritt</strong>
<div class="row" style="margin-top:6px"> <div class="row" style="margin-top:6px">
<!-- Workshop -->
<div> <div>
<div class="label"><span>Workshop</span><span id="w-pct">0%</span></div> <div class="label"><span>Workshop-Downloads</span><span id="w-right">lädt …</span></div>
<div class="bar" id="w-bar"><div class="fill" id="w-fill"></div></div> <div class="bar indet" id="w-bar"><div class="fill"></div></div>
<div class="sub" id="w-sub">Warte auf Daten …</div> <div class="sub" id="w-sub">Warte auf Workshop …</div>
</div> </div>
<!-- Server -->
<div> <div>
<div class="label"><span>Server-Content</span><span id="s-pct">0%</span></div> <div class="label"><span>Server-Content</span><span id="s-right">lädt …</span></div>
<div class="bar" id="s-bar"><div class="fill" id="s-fill"></div></div> <div class="bar indet" id="s-bar"><div class="fill"></div></div>
<div class="sub" id="s-sub">Warte auf Daten …</div> <div class="sub" id="s-sub">Warte auf Server-Dateien …</div>
</div> </div>
<!-- Init -->
<div> <div>
<div class="label"><span>Initialisierung</span><span id="i-pct">…</span></div> <div class="label"><span>Initialisierung</span><span id="i-right">wartet …</span></div>
<div class="bar indet" id="i-bar"></div> <div class="bar indet" id="i-bar"><div class="fill"></div></div>
<div class="sub" id="i-sub">Warte auf Client-Info …</div> <div class="sub" id="i-sub">Warte auf Client-Info …</div>
</div> </div>
</div> </div>
<div class="small" style="margin-top:10px">Datei: <span id="file">–</span></div> <div class="small" style="margin-top:10px">Datei: <span id="file">–</span></div>
</div> </div>
<!-- Tipps / Links -->
<div class="box"> <div class="box">
<strong>Tipps</strong> <strong>Tipps</strong>
<ul class="tip" style="margin:10px 0 0 18px"> <ul class="tip" style="margin:10px 0 0 18px">
@@ -116,7 +111,7 @@ Dieses Overlay benötigt JavaScript, um Server/Map/Modus und Fortschritt zu zeig
<li><span class="kbd">Tab</span> zeigt die Rollen-Übersicht.</li> <li><span class="kbd">Tab</span> zeigt die Rollen-Übersicht.</li>
</ul> </ul>
<div class="footer"> <div class="footer">
<span>Website: <a href="https://ttt.dk0.dev" target="_blank" rel="noreferrer">ttt.dk0.dev</a></span> <span>Website: <a href="https://ttt.dk0.dev">ttt.dk0.dev</a></span>
</div> </div>
</div> </div>
</div> </div>
@@ -127,103 +122,88 @@ Dieses Overlay benötigt JavaScript, um Server/Map/Modus und Fortschritt zu zeig
(() => { (() => {
const $ = id => document.getElementById(id); const $ = id => document.getElementById(id);
// Elemente // Spielername aus Query (bevorzugt), sonst SteamID
const ph = { work:$('ph-work'), srv:$('ph-srv'), init:$('ph-init') }; const qp = new URLSearchParams(location.search);
const work = { fill:$('w-fill'), pct:$('w-pct'), sub:$('w-sub'), total:0, need:0, last:0, done:false }; const qpName = decodeURIComponent((qp.get('name')||qp.get('nick')||qp.get('player')||qp.get('n')||'').replace(/\+/g,' ')).trim();
const srv = { fill:$('s-fill'), pct:$('s-pct'), sub:$('s-sub'), total:0, need:0, last:0, done:false };
const init = { pct:$('i-pct'), sub:$('i-sub') };
let phase = 'work';
function setPhase(next){ // Grunddaten aus URL für sofortige Anzeige
phase = next; $('map').textContent = qp.get('map') || 'Unbekannt';
// Chips visuell updaten $('me').textContent = qpName || qp.get('sid') || '—';
[ph.work, ph.srv, ph.init].forEach(el => el.classList.remove('on'));
if (next === 'work') ph.work.classList.add('on'); // Step/Phase-Helpers
if (next === 'srv') ph.srv.classList.add('on'); const steps = {
if (next === 'init') ph.init.classList.add('on'); work: { stepEl: $('st-work'), bar: $('w-bar'), right: $('w-right'), sub: $('w-sub') },
srv: { stepEl: $('st-srv'), bar: $('s-bar'), right: $('s-right'), sub: $('s-sub') },
init: { stepEl: $('st-init'), bar: $('i-bar'), right: $('i-right'), sub: $('i-sub') }
};
let active = 'work';
function setActive(key){
['work','srv','init'].forEach(k=>{
const c = steps[k].stepEl.classList;
c.remove('active');
});
steps[key].stepEl.classList.add('active');
active = key;
} }
function setPct(obj, v){ function markDone(key, text){
v = Math.max(obj.last || 0, Math.min(100, Math.round(v))); steps[key].stepEl.classList.add('done');
obj.last = v; steps[key].bar.classList.remove('indet');
obj.fill.style.width = v + '%'; steps[key].bar.classList.add('done');
obj.pct.textContent = v + '%'; steps[key].right.textContent = text || 'fertig';
} }
function updateBars(){ // ===== GMod Callbacks =====
// Workshop window.GameDetails = function(serverName, serverUrl, mapName, maxPlayers, steamID, gamemode){
if (work.total > 0){
const done = Math.max(0, work.total - (work.need||0));
setPct(work, (done / work.total) * 100);
work.sub.textContent = `${done} / ${work.total} Dateien`;
if (!work.done && done >= work.total){ work.done = true; setPhase('srv'); }
}
// Server
if (srv.total > 0){
const done = Math.max(0, srv.total - (srv.need||0));
setPct(srv, (done / srv.total) * 100);
srv.sub.textContent = `${done} / ${srv.total} Dateien`;
if (!srv.done && done >= srv.total){ srv.done = true; setPhase('init'); }
}
}
// ===== von GMod aufgerufene Funktionen =====
window.GameDetails = function(serverName, serverURL, mapName, maxPlayers, steamID, gamemode){
$('sv').textContent = serverName || 'Unbekannt'; $('sv').textContent = serverName || 'Unbekannt';
$('sv2').textContent = serverName || 'deinem Server'; $('sv2').textContent = serverName || 'deinem Server';
$('map').textContent = mapName || 'Unbekannt';
$('gm').textContent = gamemode || 'TTT2'; $('gm').textContent = gamemode || 'TTT2';
$('me').textContent = steamID || '—'; if (mapName) $('map').textContent = mapName;
// Name bevorzugen, sonst SteamID
$('me').textContent = qpName || steamID || '—';
}; };
// GMod ruft diese zweimal in „Wellen“ auf: erst Workshop, dann Server-DLs. // Wir ignorieren die Prozent-Callbacks absichtlich (falsch/inkonsistent).
window.SetFilesTotal = function(total){ window.SetFilesTotal = function(){ /* noop (indeterminierte Balken) */ };
total = Number(total) || 0; window.SetFilesNeeded = function(){ /* noop (indeterminierte Balken) */ };
// Heuristik: Wenn im Workshop die Gesamtzahl plötzlich kleiner wird, dann startet Server-Content
if (phase === 'work' && work.total && total && total < work.total && (work.last >= 95 || work.done)){
work.done = true; setPhase('srv');
}
if (phase === 'work'){ work.total = total; }
else if (phase === 'srv'){ srv.total = total; }
updateBars();
};
window.SetFilesNeeded = function(need){
need = Number(need) || 0;
if (phase === 'work'){ work.need = need; }
else if (phase === 'srv'){ srv.need = need; }
updateBars();
};
window.DownloadingFile = function(path){ window.DownloadingFile = function(path){
$('file').textContent = (path||'').split('/').slice(-3).join('/'); $('file').textContent = (path||'').split('/').slice(-3).join('/');
// Kleiner UX-Touch: zeige Datei unter der aktuell aktiven Phase
if (active === 'work') steps.work.sub.textContent = 'Lade: ' + $('file').textContent;
else if (active === 'srv') steps.srv.sub.textContent = 'Lade: ' + $('file').textContent;
}; };
window.SetStatusChanged = function(status){ window.SetStatusChanged = function(status){
const s = (status||'').toLowerCase(); const s = (status||'').toLowerCase();
// Phasenwechsel anhand Status // rudimentäres Phasen-Mapping nur für Optik
if (s.includes('workshop')) setPhase('work'); if (s.includes('workshop')) { setActive('work'); steps.work.sub.textContent = status; }
if (s.includes('download') || s.includes('materials') || s.includes('models') || s.includes('.bsp')) setPhase('srv'); else if (s.includes('download') || s.includes('materials') || s.includes('models') || s.includes('.bsp') || s.includes('file')) {
if (s.includes('sending client info') || s.includes('precaching') || s.includes('client info') || s.includes('spawn')) steps.work.stepEl.classList.add('done'); setActive('srv'); steps.srv.sub.textContent = status;
setPhase('init'); }
else if (s.includes('sending client info') || s.includes('precaching') || s.includes('client info') || s.includes('parsing')) {
steps.work.stepEl.classList.add('done'); steps.srv.stepEl.classList.add('done');
setActive('init'); steps.init.sub.textContent = status;
// wenn wir hier sind, frieren wir die Balken hübsch ein
markDone('work'); markDone('srv'); markDone('init','bereit');
}
// Untertitel je nach Phase // falls ein „complete“ kommt, markiere die aktuelle Phase als done
if (phase === 'work') work.sub.textContent = status || ''; if (s.includes('complete')) {
if (phase === 'srv') srv.sub.textContent = status || ''; if (active === 'work') { markDone('work'); setActive('srv'); }
if (phase === 'init'){ init.sub.textContent = status || 'Initialisiere …'; init.pct.textContent = '…'; } else if (active === 'srv') { markDone('srv'); setActive('init'); }
}
}; };
// Kleiner Fallback fürs Testen im normalen Browser (kein Muss) // Fallback, falls GMod gar nichts ruft (nur für Browser-Preview)
if (!('GameDetails' in window)) { if (document.visibilityState !== 'hidden') {
// Dummy-Werte // steppt automatisch durch, rein für Demo/Preview
window.GameDetails('Gaming Mäuse - TTT', '', 'ttt_lego', 16, 'STEAM_0:1:123456', 'terrortown'); setTimeout(()=>{ setActive('srv'); }, 2000);
// Fake-Progress setTimeout(()=>{ setActive('init'); }, 4000);
let a=0,b=0; const fake = setInterval(()=>{ setTimeout(()=>{ markDone('work'); markDone('srv'); markDone('init','bereit'); }, 6000);
if (a < 100){ work.total=100; work.need=100-a; a+=7; updateBars(); }
else if (b < 100){ setPhase('srv'); srv.total=100; srv.need=100-b; b+=12; updateBars(); }
else { setPhase('init'); clearInterval(fake); }
}, 500);
} }
})(); })();
</script> </script>