mirror of
https://github.com/denshooter/ttt-site.git
synced 2026-01-21 20:53:04 +01:00
120 lines
5.0 KiB
HTML
120 lines
5.0 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<meta http-equiv="Cache-Control" content="no-store" />
|
||
<title>Verbinde …</title>
|
||
<style>
|
||
:root{--bg:#0b0f14;--card:#0f1620;--muted:#8aa0b3;--accent:#73d7ff;--ok:#8affc1}
|
||
*{box-sizing:border-box} html,body{height:100%}
|
||
body{
|
||
margin:0; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
|
||
color:#e8f0f7; background:
|
||
radial-gradient(1200px 800px at 80% -10%,#132033 0%,transparent 60%),
|
||
linear-gradient(180deg,#0b0f14,#0b0f14 60%,#0d1420);
|
||
}
|
||
.container{min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px}
|
||
.card{
|
||
width:min(820px,94vw); background:linear-gradient(180deg,var(--card),#0c121a);
|
||
border:1px solid #1a2634; 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}
|
||
.meta{display:flex; flex-wrap:wrap; gap:10px 18px; color:var(--muted); font-size:14px; margin-bottom:18px}
|
||
.badge{border:1px solid #243447; padding:6px 10px; border-radius:999px; background:#111926}
|
||
.logo{font-weight:700; letter-spacing:.5px}
|
||
|
||
.bar{position:relative; height:12px; background:#0b1420; border-radius:999px; overflow:hidden; margin:14px 0 6px}
|
||
.runner{
|
||
position:absolute; top:0; bottom:0; width:35%; left:-35%;
|
||
background:linear-gradient(90deg, rgba(115,215,255,.18), rgba(138,255,193,.3), rgba(115,215,255,.18));
|
||
border-radius:999px; filter:saturate(140%);
|
||
animation:run 1.5s linear infinite;
|
||
}
|
||
@keyframes run{0%{transform:translateX(0)}100%{transform:translateX(260%)}}
|
||
|
||
.sub{color:var(--muted); font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
|
||
.kbd{border:1px solid #2a3a4f; background:#0b1320; border-radius:6px; padding:2px 6px}
|
||
.tip{opacity:.95; font-size:14px; margin:10px 0 0 18px}
|
||
.footer{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; color:var(--muted); font-size:13px}
|
||
.small{font-size:12px; color:#9fb3c9}
|
||
.box{border:1px solid #1a2634; border-radius:14px; padding:16px; background:#0c131c; margin-top:12px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container"><div class="card">
|
||
|
||
<div class="meta">
|
||
<span class="badge">Server: <span id="sv">…</span></span>
|
||
<span class="badge">Map: <span id="map">…</span></span>
|
||
<span class="badge">Modus: <span id="gm">…</span></span>
|
||
<span class="badge">Du: <span id="me">…</span></span>
|
||
</div>
|
||
|
||
<h1 class="logo">Willkommen auf <span id="sv2">deinem Server</span> 👋</h1>
|
||
|
||
<div class="bar"><div class="runner"></div></div>
|
||
<div class="sub" id="status">Verbinde …</div>
|
||
<div class="small" style="margin-top:8px">Datei: <span id="file">–</span></div>
|
||
|
||
<div class="box">
|
||
<strong>Tipps</strong>
|
||
<ul class="tip">
|
||
<li>Drücke <span class="kbd">F1</span> für Hilfe/Regeln.</li>
|
||
<li><span class="kbd">F2</span> öffnet den TTT2-Shop.</li>
|
||
<li><span class="kbd">Tab</span> zeigt die Rollen-Übersicht.</li>
|
||
</ul>
|
||
<div class="footer">
|
||
<span>Website: <a href="https://ttt.dk0.dev">ttt.dk0.dev</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
</div></div>
|
||
|
||
<script>
|
||
(()=> {
|
||
const $ = id => document.getElementById(id);
|
||
const p = new URLSearchParams(location.search);
|
||
|
||
// Grunddaten: Name bevorzugt aus ?name=/?.nick, sonst aus GameDetails (SteamID)
|
||
$('map').textContent = p.get('map') || 'Unbekannt';
|
||
const urlName = p.get('name') || p.get('nick');
|
||
if (urlName) $('me').textContent = urlName;
|
||
|
||
// Kürzerer Dateiname: letzte 2–3 Segmente, vorne ggf. ellipsen
|
||
function shortPath(path){
|
||
if (!path) return '–';
|
||
const parts = path.split('/').filter(Boolean);
|
||
const tail = parts.slice(-3).join('/');
|
||
return tail.length > 48 ? '…' + tail.slice(-48) : tail;
|
||
}
|
||
|
||
// ===== GMod Callbacks =====
|
||
window.GameDetails = function(serverName, serverUrl, mapName, maxPlayers, steamID, gamemode){
|
||
$('sv').textContent = serverName || 'Unbekannt';
|
||
$('sv2').textContent = serverName || 'deinem Server';
|
||
$('gm').textContent = gamemode || 'TTT2';
|
||
if (mapName) $('map').textContent = mapName;
|
||
if (!urlName && steamID) $('me').textContent = steamID;
|
||
};
|
||
window.SetStatusChanged = function(status){
|
||
$('status').textContent = status || '…';
|
||
};
|
||
window.DownloadingFile = function(path){
|
||
$('file').textContent = shortPath(path||'');
|
||
};
|
||
window.SetFilesTotal = function(){}; // bewusst ignoriert
|
||
window.SetFilesNeeded = function(){}; // bewusst ignoriert
|
||
|
||
// Fallback im normalen Browser (zum Testen)
|
||
if (document.visibilityState !== 'hidden' && !/gmod/i.test(navigator.userAgent||'')) {
|
||
$('sv').textContent='Gaming Mäuse - TTT'; $('gm').textContent='TTT2'; $('me').textContent='DemoUser';
|
||
let i=0; const demo = [
|
||
'Checking workshop subscriptions…',
|
||
'Mounting addons…',
|
||
'Downloading materials/…',
|
||
'Sending client info…'
|
||
];
|
||
setInterval(()=>{$('status').textContent=demo[i++%demo.length]},1500);
|
||
setInterval(()=>{$('file
|