Compare commits
25 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 admin
|
adf670a3ce | ||
|
admin
|
fcee0028b9 | ||
|
admin
|
99cbf9c75d | ||
|
admin
|
8c60e2c815 | ||
|
admin
|
8af4da543c | ||
|
admin
|
a31a6aac26 | ||
|
admin
|
aab7636b97 | ||
|
admin
|
f9618590c6 | ||
|
admin
|
fcf7aad80a | ||
|
admin
|
fbe9517588 | ||
|
admin
|
998c4888c7 | ||
|
admin
|
e6514ca53c | ||
|
admin
|
9b19a182bf | ||
|
admin
|
349f9a06cf | ||
|
admin
|
7a2646203b | ||
|
admin
|
3257e1e778 | ||
|
admin
|
366661f38f | ||
|
admin
|
2b5cd19012 | ||
|
admin
|
50852d6970 | ||
|
admin
|
7e8b0a2955 | ||
|
admin
|
7328420bad | ||
|
admin
|
5593d97e8e | ||
|
admin
|
2bbbf7a7ea | ||
|
admin
|
971ea73553 | ||
|
admin
|
994d16d744 |
+1780
File diff suppressed because one or more lines are too long
+1138
File diff suppressed because it is too large
Load Diff
+1218
File diff suppressed because it is too large
Load Diff
+722
@@ -0,0 +1,722 @@
|
|||||||
|
<?php
|
||||||
|
$host = $_GET['host'] ?? '';
|
||||||
|
$traceData = [];
|
||||||
|
$error = '';
|
||||||
|
$rawOutput = '';
|
||||||
|
|
||||||
|
if ($host !== '') {
|
||||||
|
$sanitizedHost = preg_replace('/[^A-Za-z0-9\-\.:]/', '', $host);
|
||||||
|
if ($sanitizedHost === '') {
|
||||||
|
$error = 'Bitte geben Sie einen gültigen Hostnamen oder eine IP-Adresse ein.';
|
||||||
|
} else {
|
||||||
|
$command = 'traceroute -n ' . escapeshellarg($sanitizedHost) . ' 2>&1';
|
||||||
|
$rawOutput = shell_exec($command);
|
||||||
|
if ($rawOutput === null) {
|
||||||
|
$error = 'Traceroute konnte nicht ausgeführt werden. Ist das Kommando verfügbar?';
|
||||||
|
} else {
|
||||||
|
$traceData = parseTraceroute($rawOutput);
|
||||||
|
if (empty($traceData)) {
|
||||||
|
$error = 'Keine Hops gefunden. Prüfen Sie den Hostnamen oder versuchen Sie es später erneut.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (empty($traceData)) {
|
||||||
|
$traceData = getSampleTrace();
|
||||||
|
if ($error === '') {
|
||||||
|
$error = 'Es werden Beispieldaten angezeigt. Starten Sie eine Abfrage, um echte Traceroute-Daten zu sehen.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$positions = generateGalaxyLayout(count($traceData));
|
||||||
|
$traceWithPositions = array_map(function ($hop, $index) use ($positions) {
|
||||||
|
return $hop + [
|
||||||
|
'position' => $positions[$index] ?? ['x' => 0, 'y' => 0, 'z' => 0],
|
||||||
|
];
|
||||||
|
}, $traceData, array_keys($traceData));
|
||||||
|
|
||||||
|
function parseTraceroute(string $raw): array
|
||||||
|
{
|
||||||
|
$lines = preg_split('/\r?\n/', trim($raw));
|
||||||
|
if (!$lines) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
$hops = [];
|
||||||
|
foreach ($lines as $line) {
|
||||||
|
if (!preg_match('/^\s*(\d+)\s+(.+)/', $line, $parts)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$hopNumber = (int) $parts[1];
|
||||||
|
$rest = $parts[2];
|
||||||
|
|
||||||
|
preg_match('/([0-9a-fA-F:\.\-]+|\*)/', $rest, $ipMatch);
|
||||||
|
$ip = $ipMatch[1] ?? '*';
|
||||||
|
$ip = $ip === '*' ? 'Zeitüberschreitung' : $ip;
|
||||||
|
|
||||||
|
preg_match_all('/(\d+\.\d+)\s+ms/', $rest, $latencyMatches);
|
||||||
|
$latencies = array_map('floatval', $latencyMatches[1] ?? []);
|
||||||
|
$avgLatency = !empty($latencies) ? round(array_sum($latencies) / count($latencies), 2) : null;
|
||||||
|
|
||||||
|
$hops[] = [
|
||||||
|
'hop' => $hopNumber,
|
||||||
|
'ip' => $ip,
|
||||||
|
'avgLatency' => $avgLatency,
|
||||||
|
'raw' => trim($line),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return $hops;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSampleTrace(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
['hop' => 1, 'ip' => '192.168.0.1', 'avgLatency' => 1.23, 'raw' => '1 192.168.0.1 1.12 ms 1.20 ms 1.38 ms'],
|
||||||
|
['hop' => 2, 'ip' => '10.12.34.1', 'avgLatency' => 9.87, 'raw' => '2 10.12.34.1 9.44 ms 9.90 ms 10.29 ms'],
|
||||||
|
['hop' => 3, 'ip' => '172.16.5.4', 'avgLatency' => 18.54, 'raw' => '3 172.16.5.4 18.12 ms 18.45 ms 18.71 ms'],
|
||||||
|
['hop' => 4, 'ip' => '198.51.100.12', 'avgLatency' => 27.42, 'raw' => '4 198.51.100.12 27.03 ms 27.54 ms 27.68 ms'],
|
||||||
|
['hop' => 5, 'ip' => '203.0.113.5', 'avgLatency' => 36.18, 'raw' => '5 203.0.113.5 35.82 ms 36.19 ms 36.52 ms'],
|
||||||
|
['hop' => 6, 'ip' => '93.184.216.34', 'avgLatency' => 48.91, 'raw' => '6 93.184.216.34 48.44 ms 48.90 ms 49.39 ms'],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateGalaxyLayout(int $count): array
|
||||||
|
{
|
||||||
|
$positions = [];
|
||||||
|
$radiusStep = 28;
|
||||||
|
$angleOffset = pi() * (3 - sqrt(5)); // Golden angle
|
||||||
|
$heightStep = 12;
|
||||||
|
|
||||||
|
for ($i = 0; $i < $count; $i++) {
|
||||||
|
$radius = ($i + 1) * 4 + ($i % 2 === 0 ? $radiusStep : $radiusStep * 0.6);
|
||||||
|
$angle = $i * $angleOffset;
|
||||||
|
$y = ($i - $count / 2) * $heightStep;
|
||||||
|
|
||||||
|
$positions[] = [
|
||||||
|
'x' => cos($angle) * $radius,
|
||||||
|
'y' => $y,
|
||||||
|
'z' => sin($angle) * $radius,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return $positions;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>HyperTracer 3D</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=Orbitron:wght@400;600&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bg-gradient: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.2), transparent 55%),
|
||||||
|
radial-gradient(circle at 80% 30%, rgba(129, 140, 248, 0.25), transparent 50%),
|
||||||
|
#020617;
|
||||||
|
--panel-bg: rgba(15, 23, 42, 0.86);
|
||||||
|
--accent: #22d3ee;
|
||||||
|
--accent-strong: #38bdf8;
|
||||||
|
--warning: #f87171;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: var(--bg-gradient);
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
padding: 1.5rem clamp(2rem, 3vw, 4rem);
|
||||||
|
background: linear-gradient(135deg, rgba(15, 118, 110, 0.9), rgba(8, 47, 73, 0.85));
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
border-bottom: 1px solid rgba(45, 212, 191, 0.35);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem);
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
header form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header input[type="text"] {
|
||||||
|
width: min(320px, 50vw);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.5);
|
||||||
|
background: rgba(15, 23, 42, 0.72);
|
||||||
|
color: inherit;
|
||||||
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header input[type="text"]:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
header button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: linear-gradient(135deg, var(--accent-strong), #2563eb);
|
||||||
|
color: #0f172a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header button:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(280px, 400px) 1fr;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
padding: clamp(1.5rem, 2.5vw, 2.75rem);
|
||||||
|
border-right: 1px solid rgba(148, 163, 184, 0.2);
|
||||||
|
background: var(--panel-bg);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(148, 197, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 1rem 1.2rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(37, 99, 235, 0.15);
|
||||||
|
border: 1px solid rgba(37, 99, 235, 0.35);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.error {
|
||||||
|
background: rgba(248, 113, 113, 0.14);
|
||||||
|
border-color: rgba(248, 113, 113, 0.45);
|
||||||
|
color: #fecaca;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-card {
|
||||||
|
padding: 1rem 1.1rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(30, 64, 175, 0.2);
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.35);
|
||||||
|
display: grid;
|
||||||
|
gap: 0.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-card:hover, .hop-card.active {
|
||||||
|
transform: translateX(4px);
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 10px 24px rgba(14, 116, 144, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-card span.label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-card strong {
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1.2rem 1.35rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(15, 23, 42, 0.72);
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: linear-gradient(135deg, var(--accent), rgba(37, 99, 235, 0.8));
|
||||||
|
box-shadow: 0 0 12px rgba(45, 212, 191, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item:nth-child(2)::before {
|
||||||
|
background: linear-gradient(135deg, rgba(248, 113, 113, 0.9), rgba(185, 28, 28, 0.6));
|
||||||
|
box-shadow: 0 0 12px rgba(248, 113, 113, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item:nth-child(3)::before {
|
||||||
|
width: 40px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.8), rgba(56, 189, 248, 0));
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-deck {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1.2rem 1.35rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(15, 23, 42, 0.7);
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-deck label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-deck input[type="range"] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-wrapper {
|
||||||
|
position: relative;
|
||||||
|
background: transparent;
|
||||||
|
display: grid;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scene-canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-hud {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-info {
|
||||||
|
align-self: end;
|
||||||
|
justify-self: end;
|
||||||
|
margin: clamp(1.5rem, 3vw, 3rem);
|
||||||
|
padding: 1rem 1.2rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(15, 23, 42, 0.55);
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.35);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-info strong {
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webgl-warning {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(15, 23, 42, 0.9);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webgl-warning.show {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
main {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-wrapper {
|
||||||
|
min-height: 420px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>HyperTracer 3D</h1>
|
||||||
|
<form method="get">
|
||||||
|
<label for="host" class="visually-hidden">Host</label>
|
||||||
|
<input type="text" id="host" name="host" placeholder="Hostname oder IP" value="<?php echo htmlspecialchars($host, ENT_QUOTES); ?>">
|
||||||
|
<button type="submit">Traceroute starten</button>
|
||||||
|
</form>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<aside>
|
||||||
|
<section>
|
||||||
|
<h2>Status</h2>
|
||||||
|
<div class="status <?php echo $error !== '' ? 'error' : ''; ?>">
|
||||||
|
<?php echo htmlspecialchars($error !== '' ? $error : 'Bereit für Hypertracing.'); ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Hops</h2>
|
||||||
|
<div class="hop-list" id="hop-list">
|
||||||
|
<?php foreach ($traceWithPositions as $hop): ?>
|
||||||
|
<article class="hop-card" data-hop="<?php echo (int) $hop['hop']; ?>">
|
||||||
|
<span class="label">Hop <?php echo (int) $hop['hop']; ?></span>
|
||||||
|
<strong><?php echo htmlspecialchars($hop['ip']); ?></strong>
|
||||||
|
<span><?php echo $hop['avgLatency'] !== null ? htmlspecialchars($hop['avgLatency'] . ' ms') : 'Latenz unbekannt'; ?></span>
|
||||||
|
</article>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="legend">
|
||||||
|
<h2>Legende</h2>
|
||||||
|
<div class="legend-item">Aktueller Hop</div>
|
||||||
|
<div class="legend-item">Paketverlust / Zeitüberschreitung</div>
|
||||||
|
<div class="legend-item">Pfadintensität ~ Latenz</div>
|
||||||
|
</section>
|
||||||
|
<section class="control-deck">
|
||||||
|
<h2>Steuerung</h2>
|
||||||
|
<label for="timeline">Zeitleiste</label>
|
||||||
|
<input type="range" min="0" max="<?php echo max(count($traceWithPositions) - 1, 0); ?>" value="0" id="timeline">
|
||||||
|
<label for="speed">Kamerageschwindigkeit</label>
|
||||||
|
<input type="range" min="1" max="50" value="14" id="speed">
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
<section class="scene-wrapper">
|
||||||
|
<canvas id="scene-canvas"></canvas>
|
||||||
|
<div class="overlay-hud">
|
||||||
|
<div class="hud-info" id="hud-info">Hop <strong>1</strong>: <span id="hud-ip"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="webgl-warning" id="webgl-warning">
|
||||||
|
WebGL konnte nicht initialisiert werden. Bitte verwenden Sie einen modernen Browser oder aktivieren Sie WebGL.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<script type="module">
|
||||||
|
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160/build/three.module.js';
|
||||||
|
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.160/examples/jsm/controls/OrbitControls.js';
|
||||||
|
import { Line2 } from 'https://cdn.jsdelivr.net/npm/three@0.160/examples/jsm/lines/Line2.js';
|
||||||
|
import { LineGeometry } from 'https://cdn.jsdelivr.net/npm/three@0.160/examples/jsm/lines/LineGeometry.js';
|
||||||
|
import { LineMaterial } from 'https://cdn.jsdelivr.net/npm/three@0.160/examples/jsm/lines/LineMaterial.js';
|
||||||
|
|
||||||
|
const rawTrace = <?php echo json_encode($traceWithPositions, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE); ?>;
|
||||||
|
|
||||||
|
const canvas = document.getElementById('scene-canvas');
|
||||||
|
const hudInfo = document.getElementById('hud-info');
|
||||||
|
const hudIp = document.getElementById('hud-ip');
|
||||||
|
const timeline = document.getElementById('timeline');
|
||||||
|
const speed = document.getElementById('speed');
|
||||||
|
const hopList = document.getElementById('hop-list');
|
||||||
|
const webglWarning = document.getElementById('webgl-warning');
|
||||||
|
|
||||||
|
let renderer, scene, camera, controls;
|
||||||
|
let routeCurve, routeMesh, glowMaterial;
|
||||||
|
let hopMeshes = [];
|
||||||
|
let activeIndex = 0;
|
||||||
|
let animationClock = new THREE.Clock();
|
||||||
|
let timelineProgress = 0;
|
||||||
|
|
||||||
|
try {
|
||||||
|
renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
|
||||||
|
} catch (err) {
|
||||||
|
webglWarning.classList.add('show');
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!renderer.capabilities.isWebGL2 && !renderer.capabilities.isWebGL) {
|
||||||
|
webglWarning.classList.add('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
const DPR = Math.min(window.devicePixelRatio || 1, 2.5);
|
||||||
|
renderer.setPixelRatio(DPR);
|
||||||
|
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
|
||||||
|
renderer.setClearColor(0x020617, 1);
|
||||||
|
|
||||||
|
scene = new THREE.Scene();
|
||||||
|
camera = new THREE.PerspectiveCamera(60, canvas.clientWidth / canvas.clientHeight, 0.1, 5000);
|
||||||
|
camera.position.set(60, 120, 160);
|
||||||
|
|
||||||
|
controls = new OrbitControls(camera, renderer.domElement);
|
||||||
|
controls.enableDamping = true;
|
||||||
|
controls.dampingFactor = 0.08;
|
||||||
|
controls.maxDistance = 800;
|
||||||
|
controls.minDistance = 20;
|
||||||
|
controls.autoRotate = true;
|
||||||
|
controls.autoRotateSpeed = 0.5;
|
||||||
|
|
||||||
|
const ambient = new THREE.AmbientLight(0x67e8f9, 0.4);
|
||||||
|
scene.add(ambient);
|
||||||
|
|
||||||
|
const keyLight = new THREE.SpotLight(0x60a5fa, 1.6, 0, Math.PI / 8, 0.25, 1.5);
|
||||||
|
keyLight.position.set(120, 260, 80);
|
||||||
|
scene.add(keyLight);
|
||||||
|
|
||||||
|
const fillLight = new THREE.DirectionalLight(0x22d3ee, 0.6);
|
||||||
|
fillLight.position.set(-120, -50, -140);
|
||||||
|
scene.add(fillLight);
|
||||||
|
|
||||||
|
const fogColor = new THREE.Color('#0b1120');
|
||||||
|
scene.fog = new THREE.FogExp2(fogColor, 0.0012);
|
||||||
|
|
||||||
|
// Starfield backdrop
|
||||||
|
const starGeometry = new THREE.BufferGeometry();
|
||||||
|
const starCount = 3200;
|
||||||
|
const starPositions = new Float32Array(starCount * 3);
|
||||||
|
for (let i = 0; i < starCount; i++) {
|
||||||
|
const radius = THREE.MathUtils.randFloat(260, 2200);
|
||||||
|
const theta = THREE.MathUtils.randFloatSpread(360);
|
||||||
|
const phi = THREE.MathUtils.randFloatSpread(360);
|
||||||
|
const x = radius * Math.sin(theta) * Math.cos(phi);
|
||||||
|
const y = radius * Math.sin(theta) * Math.sin(phi);
|
||||||
|
const z = radius * Math.cos(theta);
|
||||||
|
starPositions.set([x, y, z], i * 3);
|
||||||
|
}
|
||||||
|
starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
|
||||||
|
const starMaterial = new THREE.PointsMaterial({ color: 0x38bdf8, size: 2, sizeAttenuation: true, transparent: true, opacity: 0.65 });
|
||||||
|
const starField = new THREE.Points(starGeometry, starMaterial);
|
||||||
|
scene.add(starField);
|
||||||
|
|
||||||
|
const glowTexture = new THREE.TextureLoader().load('https://cdn.jsdelivr.net/gh/ykob/sketch-threejs@master/example/img/glow.png');
|
||||||
|
|
||||||
|
const hopPositions = rawTrace.map(hop => new THREE.Vector3(hop.position.x, hop.position.y, hop.position.z));
|
||||||
|
routeCurve = new THREE.CatmullRomCurve3(hopPositions, false, 'catmullrom', 0.1);
|
||||||
|
|
||||||
|
const points = routeCurve.getPoints(1024);
|
||||||
|
const linePositions = [];
|
||||||
|
const colors = [];
|
||||||
|
|
||||||
|
const latencyRange = (() => {
|
||||||
|
const latencies = rawTrace.map(h => h.avgLatency ?? 0);
|
||||||
|
return { min: Math.min(...latencies), max: Math.max(...latencies) };
|
||||||
|
})();
|
||||||
|
|
||||||
|
points.forEach((point, index) => {
|
||||||
|
linePositions.push(point.x, point.y, point.z);
|
||||||
|
const progress = index / points.length;
|
||||||
|
const color = new THREE.Color().setHSL(THREE.MathUtils.lerp(0.55, 0.08, progress), 0.9, 0.55);
|
||||||
|
colors.push(color.r, color.g, color.b);
|
||||||
|
});
|
||||||
|
|
||||||
|
const lineGeometry = new LineGeometry();
|
||||||
|
lineGeometry.setPositions(linePositions);
|
||||||
|
lineGeometry.setColors(colors);
|
||||||
|
|
||||||
|
const lineMaterial = new LineMaterial({
|
||||||
|
color: 0xffffff,
|
||||||
|
linewidth: 0.003,
|
||||||
|
vertexColors: true,
|
||||||
|
dashed: false,
|
||||||
|
transparent: true,
|
||||||
|
opacity: 0.9,
|
||||||
|
depthWrite: false
|
||||||
|
});
|
||||||
|
|
||||||
|
lineMaterial.resolution.set(canvas.clientWidth, canvas.clientHeight);
|
||||||
|
|
||||||
|
routeMesh = new Line2(lineGeometry, lineMaterial);
|
||||||
|
scene.add(routeMesh);
|
||||||
|
|
||||||
|
const hopGeometry = new THREE.SphereGeometry(3.2, 32, 32);
|
||||||
|
const hopMaterial = new THREE.MeshStandardMaterial({ color: 0x38bdf8, emissive: 0x164e63, metalness: 0.5, roughness: 0.35 });
|
||||||
|
|
||||||
|
const spriteMaterial = new THREE.SpriteMaterial({ map: glowTexture, color: 0x38bdf8, transparent: true, opacity: 0.6, depthWrite: false });
|
||||||
|
|
||||||
|
rawTrace.forEach((hop, index) => {
|
||||||
|
const mesh = new THREE.Mesh(hopGeometry, hopMaterial.clone());
|
||||||
|
mesh.position.copy(hopPositions[index]);
|
||||||
|
mesh.userData = { hop, index };
|
||||||
|
|
||||||
|
const sprite = new THREE.Sprite(spriteMaterial.clone());
|
||||||
|
sprite.scale.set(16, 16, 1);
|
||||||
|
mesh.add(sprite);
|
||||||
|
|
||||||
|
scene.add(mesh);
|
||||||
|
hopMeshes.push(mesh);
|
||||||
|
});
|
||||||
|
|
||||||
|
const pulseGeometry = new THREE.SphereGeometry(2, 24, 24);
|
||||||
|
glowMaterial = new THREE.ShaderMaterial({
|
||||||
|
uniforms: {
|
||||||
|
uTime: { value: 0 },
|
||||||
|
uColor: { value: new THREE.Color('#22d3ee') }
|
||||||
|
},
|
||||||
|
vertexShader: `varying float vIntensity;\nvoid main() {\n vec3 transformed = position;\n float radius = length(transformed);\n vIntensity = smoothstep(0.0, 1.0, radius / 2.0);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}`,
|
||||||
|
fragmentShader: `uniform float uTime;\nuniform vec3 uColor;\nvarying float vIntensity;\nvoid main() {\n float alpha = smoothstep(0.9, 0.0, vIntensity + sin(uTime * 4.0) * 0.2);\n gl_FragColor = vec4(uColor, alpha);\n}`,
|
||||||
|
transparent: true,
|
||||||
|
blending: THREE.AdditiveBlending,
|
||||||
|
depthWrite: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const pulseMesh = new THREE.Mesh(pulseGeometry, glowMaterial);
|
||||||
|
scene.add(pulseMesh);
|
||||||
|
|
||||||
|
const gridHelper = new THREE.PolarGridHelper(280, 16, 8, 64, 0x0ea5e9, 0x1e40af);
|
||||||
|
gridHelper.material.opacity = 0.3;
|
||||||
|
gridHelper.material.transparent = true;
|
||||||
|
gridHelper.rotation.x = Math.PI / 2;
|
||||||
|
scene.add(gridHelper);
|
||||||
|
|
||||||
|
function resizeRendererToDisplaySize() {
|
||||||
|
const width = canvas.clientWidth;
|
||||||
|
const height = canvas.clientHeight;
|
||||||
|
const needResize = canvas.width !== width * DPR || canvas.height !== height * DPR;
|
||||||
|
if (needResize) {
|
||||||
|
renderer.setSize(width, height, false);
|
||||||
|
camera.aspect = width / height || 1;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
lineMaterial.resolution.set(width, height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setActiveHop(index, centerCamera = false) {
|
||||||
|
activeIndex = THREE.MathUtils.clamp(index, 0, hopMeshes.length - 1);
|
||||||
|
hopMeshes.forEach((mesh, idx) => {
|
||||||
|
const isActive = idx === activeIndex;
|
||||||
|
mesh.material.emissiveIntensity = isActive ? 1.5 : 0.4;
|
||||||
|
mesh.scale.setScalar(isActive ? 1.6 : 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
const hop = rawTrace[activeIndex];
|
||||||
|
hudInfo.querySelector('strong').textContent = hop.hop;
|
||||||
|
hudIp.textContent = `${hop.ip} • ${hop.avgLatency !== null ? hop.avgLatency + ' ms' : 'Latenz unbekannt'}`;
|
||||||
|
|
||||||
|
document.querySelectorAll('.hop-card').forEach(card => {
|
||||||
|
card.classList.toggle('active', Number(card.dataset.hop) === hop.hop);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (centerCamera) {
|
||||||
|
const target = hopPositions[activeIndex];
|
||||||
|
controls.target.copy(target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
resizeRendererToDisplaySize();
|
||||||
|
|
||||||
|
const delta = animationClock.getDelta();
|
||||||
|
const elapsed = animationClock.getElapsedTime();
|
||||||
|
|
||||||
|
controls.update();
|
||||||
|
|
||||||
|
starField.rotation.y += delta * 0.01;
|
||||||
|
starField.rotation.x += delta * 0.005;
|
||||||
|
|
||||||
|
glowMaterial.uniforms.uTime.value = elapsed;
|
||||||
|
|
||||||
|
const speedValue = Number(speed.value) / 120;
|
||||||
|
timelineProgress += delta * speedValue;
|
||||||
|
const nextIndex = Math.floor(timelineProgress) % hopMeshes.length;
|
||||||
|
if (nextIndex !== activeIndex) {
|
||||||
|
setActiveHop(nextIndex);
|
||||||
|
timeline.value = nextIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentPoint = routeCurve.getPointAt((timelineProgress % hopMeshes.length) / hopMeshes.length);
|
||||||
|
if (currentPoint) {
|
||||||
|
pulseMesh.position.copy(currentPoint);
|
||||||
|
pulseMesh.scale.setScalar(1 + Math.sin(elapsed * 4) * 0.5 + 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderer.render(scene, camera);
|
||||||
|
}
|
||||||
|
|
||||||
|
setActiveHop(0, true);
|
||||||
|
animate();
|
||||||
|
|
||||||
|
timeline.addEventListener('input', (event) => {
|
||||||
|
timelineProgress = Number(event.target.value);
|
||||||
|
setActiveHop(Number(event.target.value), true);
|
||||||
|
});
|
||||||
|
|
||||||
|
speed.addEventListener('input', () => {
|
||||||
|
// speed adjusts automatically via animate loop
|
||||||
|
});
|
||||||
|
|
||||||
|
hopList.addEventListener('click', (event) => {
|
||||||
|
const card = event.target.closest('.hop-card');
|
||||||
|
if (!card) return;
|
||||||
|
const hopNumber = Number(card.dataset.hop);
|
||||||
|
const index = rawTrace.findIndex(h => h.hop === hopNumber);
|
||||||
|
if (index >= 0) {
|
||||||
|
timeline.value = index;
|
||||||
|
timelineProgress = index;
|
||||||
|
setActiveHop(index, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
|
||||||
|
camera.aspect = canvas.clientWidth / canvas.clientHeight;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
lineMaterial.resolution.set(canvas.clientWidth, canvas.clientHeight);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+673
@@ -0,0 +1,673 @@
|
|||||||
|
<?php
|
||||||
|
$host = $_GET['host'] ?? '';
|
||||||
|
$traceData = [];
|
||||||
|
$error = '';
|
||||||
|
$rawOutput = '';
|
||||||
|
|
||||||
|
if ($host !== '') {
|
||||||
|
$sanitizedHost = preg_replace('/[^A-Za-z0-9\-\.:]/', '', $host);
|
||||||
|
if ($sanitizedHost === '') {
|
||||||
|
$error = 'Bitte geben Sie einen gültigen Hostnamen oder eine IP-Adresse ein.';
|
||||||
|
} else {
|
||||||
|
$command = 'traceroute -n ' . escapeshellarg($sanitizedHost) . ' 2>&1';
|
||||||
|
$rawOutput = shell_exec($command);
|
||||||
|
if ($rawOutput === null) {
|
||||||
|
$error = 'Traceroute konnte nicht ausgeführt werden. Ist das Kommando verfügbar?';
|
||||||
|
} else {
|
||||||
|
$traceData = parseTraceroute($rawOutput);
|
||||||
|
if (empty($traceData)) {
|
||||||
|
$error = 'Keine Hops gefunden. Prüfen Sie den Hostnamen oder versuchen Sie es später erneut.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (empty($traceData)) {
|
||||||
|
$traceData = getSampleTrace();
|
||||||
|
if ($error === '') {
|
||||||
|
$error = 'Es werden Beispieldaten angezeigt. Starten Sie eine Abfrage, um echte Traceroute-Daten zu sehen.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$positions = generateHelixLayout(count($traceData));
|
||||||
|
$traceWithPositions = array_map(function ($hop, $index) use ($positions) {
|
||||||
|
return $hop + [
|
||||||
|
'position' => $positions[$index] ?? ['x' => 0, 'y' => 0, 'z' => 0],
|
||||||
|
];
|
||||||
|
}, $traceData, array_keys($traceData));
|
||||||
|
|
||||||
|
function parseTraceroute(string $raw): array
|
||||||
|
{
|
||||||
|
$lines = preg_split('/\r?\n/', trim($raw));
|
||||||
|
if (!$lines) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
$hops = [];
|
||||||
|
foreach ($lines as $line) {
|
||||||
|
if (!preg_match('/^\s*(\d+)\s+(.+)/', $line, $parts)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
$hopNumber = (int) $parts[1];
|
||||||
|
$rest = $parts[2];
|
||||||
|
|
||||||
|
preg_match('/([0-9a-fA-F:\.\-]+|\*)/', $rest, $ipMatch);
|
||||||
|
$ip = $ipMatch[1] ?? '*';
|
||||||
|
$ip = $ip === '*' ? 'Zeitüberschreitung' : $ip;
|
||||||
|
|
||||||
|
preg_match_all('/(\d+\.\d+)\s+ms/', $rest, $latencyMatches);
|
||||||
|
$latencies = array_map('floatval', $latencyMatches[1] ?? []);
|
||||||
|
$avgLatency = !empty($latencies) ? round(array_sum($latencies) / count($latencies), 2) : null;
|
||||||
|
|
||||||
|
$hops[] = [
|
||||||
|
'hop' => $hopNumber,
|
||||||
|
'ip' => $ip,
|
||||||
|
'avgLatency' => $avgLatency,
|
||||||
|
'raw' => trim($line),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return $hops;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSampleTrace(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
['hop' => 1, 'ip' => '192.168.0.1', 'avgLatency' => 1.23, 'raw' => '1 192.168.0.1 1.12 ms 1.20 ms 1.38 ms'],
|
||||||
|
['hop' => 2, 'ip' => '10.12.34.1', 'avgLatency' => 9.87, 'raw' => '2 10.12.34.1 9.44 ms 9.90 ms 10.29 ms'],
|
||||||
|
['hop' => 3, 'ip' => '172.16.5.4', 'avgLatency' => 18.54, 'raw' => '3 172.16.5.4 18.12 ms 18.45 ms 18.71 ms'],
|
||||||
|
['hop' => 4, 'ip' => '198.51.100.12', 'avgLatency' => 27.42, 'raw' => '4 198.51.100.12 27.03 ms 27.54 ms 27.68 ms'],
|
||||||
|
['hop' => 5, 'ip' => '203.0.113.5', 'avgLatency' => 36.18, 'raw' => '5 203.0.113.5 35.82 ms 36.19 ms 36.52 ms'],
|
||||||
|
['hop' => 6, 'ip' => '93.184.216.34', 'avgLatency' => 48.91, 'raw' => '6 93.184.216.34 48.44 ms 48.90 ms 49.39 ms'],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateHelixLayout(int $count): array
|
||||||
|
{
|
||||||
|
$positions = [];
|
||||||
|
$radius = 160;
|
||||||
|
$heightStep = 70;
|
||||||
|
$angleStep = pi() / 3;
|
||||||
|
|
||||||
|
for ($i = 0; $i < $count; $i++) {
|
||||||
|
$angle = $i * $angleStep;
|
||||||
|
$y = ($i - ($count - 1) / 2) * $heightStep;
|
||||||
|
$positions[] = [
|
||||||
|
'x' => cos($angle) * $radius,
|
||||||
|
'y' => $y,
|
||||||
|
'z' => sin($angle) * $radius,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return $positions;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>HyperTracer Canvas Edition</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=Orbitron:wght@500&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bg: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.22), transparent 55%),
|
||||||
|
radial-gradient(circle at 80% 25%, rgba(147, 51, 234, 0.28), transparent 50%),
|
||||||
|
#020617;
|
||||||
|
--panel-bg: rgba(15, 23, 42, 0.88);
|
||||||
|
--accent: #38bdf8;
|
||||||
|
--accent-strong: #f472b6;
|
||||||
|
--text: #e2e8f0;
|
||||||
|
--muted: #94a3b8;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(320px, 28vw) 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
background: var(--bg);
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
color: var(--text);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
padding: 1.5rem clamp(2rem, 4vw, 5rem);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
background: linear-gradient(135deg, rgba(2, 132, 199, 0.75), rgba(30, 64, 175, 0.7));
|
||||||
|
border-bottom: 1px solid rgba(125, 211, 252, 0.35);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: clamp(1.5rem, 1vw + 1.8rem, 2.6rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.8rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form input[type="text"] {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 240px;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||||
|
background: rgba(15, 23, 42, 0.55);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
form button {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: none;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
background: linear-gradient(135deg, #38bdf8, #3b82f6);
|
||||||
|
color: #0f172a;
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
form button:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 12px 30px rgba(14, 165, 233, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
grid-row: 2 / -1;
|
||||||
|
padding: clamp(1.5rem, 2vw, 2.5rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
background: var(--panel-bg);
|
||||||
|
border-right: 1px solid rgba(96, 165, 250, 0.2);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 1rem 1.2rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(56, 189, 248, 0.08);
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
border-color: rgba(248, 113, 113, 0.45);
|
||||||
|
color: #fecaca;
|
||||||
|
background: rgba(248, 113, 113, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.8rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-item {
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(15, 23, 42, 0.65);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.3rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.2s ease, transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-item:hover {
|
||||||
|
border-color: rgba(56, 189, 248, 0.35);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-item.active {
|
||||||
|
border-color: rgba(250, 204, 21, 0.75);
|
||||||
|
box-shadow: 0 12px 20px rgba(250, 204, 21, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hop-ip {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #bae6fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay .message {
|
||||||
|
padding: 1.5rem 2.5rem;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
background: rgba(15, 23, 42, 0.85);
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||||
|
text-align: center;
|
||||||
|
max-width: 420px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend span::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
body {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto auto 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
grid-row: 2 / 3;
|
||||||
|
max-height: 45vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
grid-row: 3 / 4;
|
||||||
|
min-height: 55vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>HyperTracer — Canvas Flight Deck</h1>
|
||||||
|
<form method="get">
|
||||||
|
<input type="text" name="host" value="<?= htmlspecialchars($host, ENT_QUOTES) ?>" placeholder="Zielhost oder IP-Adresse" aria-label="Traceroute Host">
|
||||||
|
<button type="submit">Traceroute starten</button>
|
||||||
|
</form>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<aside class="panel">
|
||||||
|
<div class="status<?= $error ? ' error' : '' ?>">
|
||||||
|
<?= htmlspecialchars($error ?: 'Bereit für den Start. Nutzen Sie die Steuerung, um die Route zu erforschen.') ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="controls">
|
||||||
|
<div class="control-group">
|
||||||
|
<label for="yaw">Rotation um Y-Achse</label>
|
||||||
|
<input type="range" id="yaw" min="-180" max="180" value="0">
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<label for="pitch">Blickwinkel</label>
|
||||||
|
<input type="range" id="pitch" min="-60" max="60" value="-15">
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<label for="speed">Animationsgeschwindigkeit</label>
|
||||||
|
<input type="range" id="speed" min="0" max="3" step="0.1" value="1.2">
|
||||||
|
</div>
|
||||||
|
<div class="legend">
|
||||||
|
<span style="color:#facc15">Aktiver Hop</span>
|
||||||
|
<span style="color:#38bdf8">Reguläre Hops</span>
|
||||||
|
<span style="color:#a855f7">Startrail</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<ol class="hop-list" id="hopList">
|
||||||
|
<?php foreach ($traceWithPositions as $hop): ?>
|
||||||
|
<li class="hop-item" data-hop="<?= (int) $hop['hop'] ?>">
|
||||||
|
<div class="hop-meta">
|
||||||
|
<span>Hop <?= (int) $hop['hop'] ?></span>
|
||||||
|
<span><?= $hop['avgLatency'] !== null ? $hop['avgLatency'] . ' ms' : '—' ?></span>
|
||||||
|
</div>
|
||||||
|
<div class="hop-ip"><?= htmlspecialchars($hop['ip']) ?></div>
|
||||||
|
<div class="hop-raw"><?= htmlspecialchars($hop['raw']) ?></div>
|
||||||
|
</li>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</ol>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<canvas id="galaxyCanvas"></canvas>
|
||||||
|
<div class="overlay" id="compatOverlay" hidden>
|
||||||
|
<div class="message">
|
||||||
|
<h2>Kein WebGL? Kein Problem.</h2>
|
||||||
|
<p>Diese Version nutzt ein Canvas-Emulator-Setup, das auch ohne WebGL läuft. Sollte das Canvas dennoch nicht unterstützt sein, aktualisieren Sie Ihren Browser.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(() => {
|
||||||
|
const data = <?= json_encode($traceWithPositions, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) ?>;
|
||||||
|
const canvas = document.getElementById('galaxyCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const overlay = document.getElementById('compatOverlay');
|
||||||
|
|
||||||
|
if (!ctx) {
|
||||||
|
overlay.hidden = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
let width = 0;
|
||||||
|
let height = 0;
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
yaw: 0,
|
||||||
|
pitch: -15 * Math.PI / 180,
|
||||||
|
rotationVelocity: 0.15,
|
||||||
|
autoRotate: true,
|
||||||
|
selectedHop: data.length ? data[0].hop : null,
|
||||||
|
time: 0,
|
||||||
|
speedFactor: 1.2,
|
||||||
|
};
|
||||||
|
|
||||||
|
const stars = new Array(240).fill(null).map(() => ({
|
||||||
|
x: (Math.random() - 0.5) * 1000,
|
||||||
|
y: (Math.random() - 0.5) * 800,
|
||||||
|
z: Math.random() * 900 + 200,
|
||||||
|
speed: Math.random() * 0.4 + 0.1,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const yawControl = document.getElementById('yaw');
|
||||||
|
const pitchControl = document.getElementById('pitch');
|
||||||
|
const speedControl = document.getElementById('speed');
|
||||||
|
const hopList = document.getElementById('hopList');
|
||||||
|
|
||||||
|
yawControl.addEventListener('input', () => {
|
||||||
|
state.yaw = yawControl.value * Math.PI / 180;
|
||||||
|
state.autoRotate = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
pitchControl.addEventListener('input', () => {
|
||||||
|
state.pitch = pitchControl.value * Math.PI / 180;
|
||||||
|
});
|
||||||
|
|
||||||
|
speedControl.addEventListener('input', () => {
|
||||||
|
state.speedFactor = Number(speedControl.value) || 0.1;
|
||||||
|
});
|
||||||
|
|
||||||
|
hopList.addEventListener('click', (event) => {
|
||||||
|
const item = event.target.closest('.hop-item');
|
||||||
|
if (!item) return;
|
||||||
|
state.selectedHop = Number(item.dataset.hop);
|
||||||
|
state.autoRotate = false;
|
||||||
|
highlightListItem();
|
||||||
|
});
|
||||||
|
|
||||||
|
function highlightListItem() {
|
||||||
|
hopList.querySelectorAll('.hop-item').forEach((item) => {
|
||||||
|
const isActive = Number(item.dataset.hop) === state.selectedHop;
|
||||||
|
item.classList.toggle('active', isActive);
|
||||||
|
if (isActive) {
|
||||||
|
item.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
width = rect.width * dpr;
|
||||||
|
height = rect.height * dpr;
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', resize);
|
||||||
|
resize();
|
||||||
|
highlightListItem();
|
||||||
|
|
||||||
|
function rotatePoint(point, yaw, pitch) {
|
||||||
|
const cosY = Math.cos(yaw);
|
||||||
|
const sinY = Math.sin(yaw);
|
||||||
|
const cosX = Math.cos(pitch);
|
||||||
|
const sinX = Math.sin(pitch);
|
||||||
|
|
||||||
|
// Rotation around Y axis
|
||||||
|
const x1 = point.x * cosY - point.z * sinY;
|
||||||
|
const z1 = point.x * sinY + point.z * cosY;
|
||||||
|
|
||||||
|
// Rotation around X axis (pitch)
|
||||||
|
const y2 = point.y * cosX - z1 * sinX;
|
||||||
|
const z2 = point.y * sinX + z1 * cosX;
|
||||||
|
|
||||||
|
return { x: x1, y: y2, z: z2 };
|
||||||
|
}
|
||||||
|
|
||||||
|
function project(point) {
|
||||||
|
const distance = 900;
|
||||||
|
const scale = distance / (distance + point.z);
|
||||||
|
return {
|
||||||
|
x: point.x * scale,
|
||||||
|
y: point.y * scale,
|
||||||
|
scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderBackground(delta) {
|
||||||
|
ctx.fillStyle = 'rgba(4, 6, 24, 0.75)';
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||||
|
|
||||||
|
stars.forEach((star) => {
|
||||||
|
star.z -= delta * state.speedFactor * star.speed * 40;
|
||||||
|
if (star.z < 60) {
|
||||||
|
star.z = 900;
|
||||||
|
}
|
||||||
|
const rotated = rotatePoint(star, state.yaw * 0.3, state.pitch * 0.3);
|
||||||
|
const { x, y, scale } = project(rotated);
|
||||||
|
const alpha = Math.min(1, 0.2 + (1 - scale) * 1.2);
|
||||||
|
const size = Math.max(0.5, 1.5 * (1 - scale));
|
||||||
|
ctx.fillStyle = `rgba(148, 163, 184, ${alpha})`;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, size, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderConnections(points) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||||
|
ctx.lineCap = 'round';
|
||||||
|
ctx.lineJoin = 'round';
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let i = 0; i < points.length - 1; i++) {
|
||||||
|
const current = points[i];
|
||||||
|
const next = points[i + 1];
|
||||||
|
ctx.moveTo(current.projected.x, current.projected.y);
|
||||||
|
ctx.lineTo(next.projected.x, next.projected.y);
|
||||||
|
}
|
||||||
|
ctx.lineWidth = 2.5;
|
||||||
|
ctx.strokeStyle = 'rgba(56, 189, 248, 0.35)';
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(points[0].projected.x, points[0].projected.y);
|
||||||
|
for (let i = 1; i < points.length; i++) {
|
||||||
|
const p = points[i];
|
||||||
|
ctx.lineTo(p.projected.x, p.projected.y);
|
||||||
|
}
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.strokeStyle = 'rgba(124, 58, 237, 0.25)';
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderNodes(points, delta) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||||
|
|
||||||
|
points.forEach((point) => {
|
||||||
|
const isActive = point.data.hop === state.selectedHop;
|
||||||
|
const baseRadius = isActive ? 14 : 8;
|
||||||
|
const pulse = Math.sin(state.time * (isActive ? 6 : 3) + point.data.hop) * 0.3 + 1;
|
||||||
|
const radius = baseRadius * point.projected.scale * 1.3 * pulse;
|
||||||
|
const gradient = ctx.createRadialGradient(
|
||||||
|
point.projected.x,
|
||||||
|
point.projected.y,
|
||||||
|
radius * 0.2,
|
||||||
|
point.projected.x,
|
||||||
|
point.projected.y,
|
||||||
|
radius
|
||||||
|
);
|
||||||
|
if (isActive) {
|
||||||
|
gradient.addColorStop(0, 'rgba(250, 204, 21, 0.9)');
|
||||||
|
gradient.addColorStop(1, 'rgba(250, 204, 21, 0.05)');
|
||||||
|
} else {
|
||||||
|
gradient.addColorStop(0, 'rgba(56, 189, 248, 0.9)');
|
||||||
|
gradient.addColorStop(1, 'rgba(56, 189, 248, 0.05)');
|
||||||
|
}
|
||||||
|
ctx.fillStyle = gradient;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(point.projected.x, point.projected.y, Math.max(radius, 4), 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
const label = `#${point.data.hop}`;
|
||||||
|
ctx.font = '12px Orbitron';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillStyle = isActive ? 'rgba(250, 204, 21, 0.9)' : 'rgba(191, 219, 254, 0.8)';
|
||||||
|
ctx.fillText(label, point.projected.x, point.projected.y - radius - 6);
|
||||||
|
});
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(delta) {
|
||||||
|
state.time += delta * state.speedFactor * 0.001;
|
||||||
|
if (state.autoRotate) {
|
||||||
|
state.yaw += delta * state.rotationVelocity * 0.0002 * state.speedFactor;
|
||||||
|
yawControl.value = ((state.yaw * 180 / Math.PI + 540) % 360) - 180;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderBackground(delta);
|
||||||
|
|
||||||
|
const preparedPoints = data.map((hop) => {
|
||||||
|
const rotated = rotatePoint(hop.position, state.yaw, state.pitch);
|
||||||
|
const projected = project(rotated);
|
||||||
|
return { data: hop, rotated, projected };
|
||||||
|
}).sort((a, b) => a.rotated.z - b.rotated.z);
|
||||||
|
|
||||||
|
renderConnections(preparedPoints);
|
||||||
|
renderNodes(preparedPoints, delta);
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
|
let lastTime = performance.now();
|
||||||
|
function step(now) {
|
||||||
|
const delta = now - lastTime;
|
||||||
|
lastTime = now;
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
render(delta);
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener('click', (event) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const x = (event.clientX - rect.left) * dpr - canvas.width / 2;
|
||||||
|
const y = (event.clientY - rect.top) * dpr - canvas.height / 2;
|
||||||
|
const threshold = 18 * dpr;
|
||||||
|
|
||||||
|
let closest = null;
|
||||||
|
let minDist = Infinity;
|
||||||
|
data.forEach((hop) => {
|
||||||
|
const rotated = rotatePoint(hop.position, state.yaw, state.pitch);
|
||||||
|
const projected = project(rotated);
|
||||||
|
const dx = projected.x * dpr - x;
|
||||||
|
const dy = projected.y * dpr - y;
|
||||||
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
if (dist < minDist && dist < threshold) {
|
||||||
|
closest = hop;
|
||||||
|
minDist = dist;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (closest) {
|
||||||
|
state.selectedHop = closest.hop;
|
||||||
|
state.autoRotate = false;
|
||||||
|
highlightListItem();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user