Logistics Intelligence Pro

Verwandle deine Paket Tracking Nummern in ein visuelles Erlebnis. Unser PHP Script Logistics Intelligence Terminal ist keine einfache Liste, es ist deine Kommandozentrale für deine Pakete. Mit einer Integration der Ship24 API und Google Maps behältst du den weltweiten Status bzw. Sendeverlauf all deiner Brief, Paket, sowie weiteren Sendungen im Blick.

Kern Features & Funktionen

• Multi Carrier Fähig: Automatische Erkennung und Tracking von über 1.500 Versandanbietern ( darunter zB. DHL, UPS, FedEx, Hermes, Royal Mail u.v.m.) über eine zentrale Schnittstelle.
• Echtzeit Radar: Integrierte Google Maps Visualisierung, die den letzten bekannten Standort deiner Pakets auf einer Maps Karte darstellt.
• Dynamische Webmaske: Füge neue Sendungen direkt über das Dashboard hinzu.
• Visualisierung: Der Fortschrittsbalken zeigt präzise den aktuellen Zustellungsgrad.
• Smart Installer: Vollautomatisches Setup Script, das Verzeichnisse erstellt, Google Fonts DSGVO konform lokal speichert und sich nach der Installation aus Sicherheitsgründen selbst löscht. Script bitte als setup.php abspeichern.
• API Struktur: Ein integrierter PHP Proxy schützt deine API Keys vor neugierigen Blicken im Frontend.

<?php
$google_key = "DEIN_GOOGLE_MAPS_API_KEY";
$ship24_key = "DEIN_SHIP24_API_KEY";

if (!is_dir('fonts')) mkdir('fonts', 0755);
$font_sources = ['outfit-reg.woff2' => 'https://fonts.gstatic.com/s/outfit/v11/QGYsz_O5rkz2mS4_OTuSfA.woff2', 'outfit-bold.woff2' => 'https://fonts.gstatic.com/s/outfit/v11/QGYsz_O5rkz2mS4_ObeSfA.woff2'];
foreach ($font_sources as $name => $url) {
    if (!file_exists("fonts/$name")) {
        $ch = curl_init($url); $fp = fopen("fonts/$name", 'wb');
        curl_setopt($ch, CURLOPT_FILE, $fp); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
        curl_exec($ch); curl_close($ch); fclose($fp);
    }
}
$api_php = <<<EOD
<?php
header('Content-Type: application/json');
\$method = \$_SERVER['REQUEST_METHOD'];
if (\$method === 'POST') {
    \$data = json_decode(file_get_contents('php://input'), true);
    \$ch = curl_init("https://api.ship24.com/public/v1/trackers");
    curl_setopt(\$ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt(\$ch, CURLOPT_POST, true);
    curl_setopt(\$ch, CURLOPT_HTTPHEADER, ['Authorization: Bearer $ship24_key', 'Content-Type: application/json']);
    curl_setopt(\$ch, CURLOPT_POSTFIELDS, json_encode(['trackingNumber' => \$data['trackingNumber']]));
    echo curl_exec(\$ch); curl_close(\$ch);
} else {
    \$ch = curl_init("https://api.ship24.com/public/v1/trackers?limit=10");
    curl_setopt(\$ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt(\$ch, CURLOPT_HTTPHEADER, ['Authorization: Bearer $ship24_key']);
    echo curl_exec(\$ch); curl_close(\$ch);
}
?>
EOD;
file_put_contents('api.php', $api_php);
$css_content = <<<EOD
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-reg.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-bold.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
:root { --accent: #d4af37; --bg: #0a0a0b; --glass: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.08); }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Outfit', sans-serif; background: var(--bg); color: #fff; overflow-x: hidden; padding: 2rem; min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: 1400px; margin: 0 auto; width: 100%; flex: 1; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.brand-box h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: -1px; background: linear-gradient(135deg, #d4af37, #f9e29c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.input-group { background: var(--glass); border: 1px solid var(--border); padding: 5px; border-radius: 15px; display: flex; gap: 10px; width: 400px; }
input { background: transparent; border: none; color: #fff; padding: 10px 15px; flex: 1; font-family: 'Outfit'; outline: none; }
.btn-add { background: #fff; color: #000; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; font-size: 0.7rem; }
.main-grid { display: grid; grid-template-columns: 1fr 450px; gap: 2rem; height: 600px; margin-bottom: 2rem; }
.glass-panel { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; position: relative; }
#map { height: 100%; filter: grayscale(1) invert(0.9) contrast(1.1); }
.feed { overflow-y: auto; padding-right: 10px; }
.package-card { background: var(--glass); border: 1px solid var(--border); border-radius: 20px; padding: 1.5rem; margin-bottom: 1rem; }
footer { padding: 2rem 0; border-top: 1px solid var(--border); text-align: center; margin-top: auto; }
.footer-link { color: #555; text-decoration: none; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; transition: 0.3s; }
.footer-link:hover { color: var(--accent); }
.footer-link span { font-weight: 900; }
.install-ui { height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.timer-circle { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 900; color: var(--accent); margin: 2rem 0; position: relative; }
.timer-circle::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid var(--accent); border-radius: 50%; border-left-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
EOD;
file_put_contents('style.css', $css_content);
$js_content = <<<EOD
let map;
const $ = id => document.getElementById(id);
async function initMap() {
    map = new google.maps.Map($("map"), { zoom: 5, center: { lat: 51.16, lng: 10.45 }, disableDefaultUI: true, styles: [{elementType: "geometry", stylers: [{color: "#212121"}]}, {featureType: "road", elementType: "geometry", stylers: [{color: "#303030"}]}] });
    refresh();
}
async function addTracking() {
    const num = $("track-num").value; if(!num) return;
    await fetch('api.php', { method: 'POST', body: JSON.stringify({trackingNumber: num}) });
    $("track-num").value = ""; refresh();
}
async function refresh() {
    const r = await fetch('api.php'), d = await r.json();
    const list = $("feed"); list.innerHTML = "";
    if(d.data && d.data.trackers) {
        d.data.trackers.forEach(t => {
            const c = document.createElement('div'); c.className = 'package-card';
            c.innerHTML = `<div style="color:var(--accent);font-size:0.7rem;font-weight:900;text-transform:uppercase">\${t.courierCode || 'Logistics'}</div><div style="font-weight:800;font-size:1.1rem;margin:5px 0">ID: \${t.trackingNumber}</div>`;
            list.appendChild(c);
        });
    }
}
EOD;
file_put_contents('script.js', $js_content);
$index_content = <<<EOD
<!DOCTYPE html>
<html lang="de">
<head><meta charset="UTF-8"><title>Logistics Intelligence Pro</title><link rel="stylesheet" href="style.css"></head>
<body>
<div class="container">
    <header>
        <div class="brand-box"><h1>Logistics Intelligence</h1><div style="color:#666;font-size:0.7rem;letter-spacing:2px;text-transform:uppercase">Global Asset Tracking Terminal</div></div>
        <div class="input-group"><input type="text" id="track-num" placeholder="Tracking ID eingeben..."><button class="btn-add" onclick="addTracking()">Hinzufügen</button></div>
    </header>
    <div class="main-grid">
        <div class="glass-panel"><div id="map"></div></div>
        <div class="feed" id="feed"></div>
    </div>
</div>
<footer><a href="https://www.dreamcodes.net" target="_blank" class="footer-link">Powered by <span>Dreamcodes</span></a></footer>
<script src="https://maps.googleapis.com/maps/api/js?key=$google_key&callback=initMap" async defer></script><script src="script.js"></script>
</body>
</html>
EOD;
file_put_contents('index.php', $index_content);
unlink(__FILE__);
?>
<!DOCTYPE html>
<html lang="de">
<head><meta charset="UTF-8"><title>Setup abgeschlossen</title><link rel="stylesheet" href="style.css"></head>
<body>
    <div class="install-ui">
        <h1 style="color:var(--accent); font-size: 3rem; font-weight: 900;">RADAR AKTIVIERT</h1>
        <p style="color: #666; letter-spacing: 2px;">LOGISTIK-HUB IST BEREIT. WEITERLEITUNG IN...</p>
        <div class="timer-circle" id="timer">10</div>
    </div>
    <script>
        let timeLeft = 10;
        const timerEl = document.getElementById('timer');
        setInterval(() => {
            timeLeft--;
            timerEl.innerText = timeLeft;
            if(timeLeft <= 0) window.location.href = 'index.php';
        }, 1000);
    </script>
</body>
</html>