Diese Woche am beliebtesten

Vertiefendes Material

Crypto Whale Tracker

Analysiere den Crypto Markt wie ein Institutioneller. Unser Script Crypto Whale Tracker ist ein PHP Dashboard zur Überwachung globaler Marktliquidität und Crypto Wal Aktivitäten. Durch die native Anbindung an die CoinGecko API liefert das Script Echtzeit Daten der Top Assets in einem Interface inklusive interaktivem Google Maps Radar. Optimal um Finanz Webseiten aufzupimpen.

Den Code abspeichern als Setup.php, einmal aufrufen und alle einzel Dateien werden aus der Datei heraus erstellt. Der Installer löscht sich im Anschluss von selbst.

<?php
$google_key = "DEIN_GOOGLE_MAPS_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');
\$url = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=12&page=1&sparkline=false&price_change_percentage=24h";
\$ch = curl_init(\$url);
curl_setopt(\$ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt(\$ch, CURLOPT_USERAGENT, 'WhaleWatchTerminal/1.0');
curl_setopt(\$ch, CURLOPT_TIMEOUT, 15);
\$response = curl_exec(\$ch);
echo \$response ?: json_encode(['error' => 'API Timeout']);
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-face { font-family: 'Outfit'; src: url('fonts/outfit-bold.woff2') format('woff2'); font-weight: 900; font-style: normal; }
: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: flex-end; margin-bottom: 3rem; }
.brand-box h1 { font-size: 2.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; }
.subtitle { color: #666; text-transform: uppercase; letter-spacing: 2px; font-size: 0.7rem; margin-top: 0.5rem; }
.main-grid { display: grid; grid-template-columns: 1fr 480px; gap: 2rem; height: 650px; 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.92) contrast(1.1); }
.feed { overflow-y: auto; padding-right: 15px; }
.feed::-webkit-scrollbar { width: 3px; }
.feed::-webkit-scrollbar-thumb { background: var(--accent); }
.coin-card { background: var(--glass); border: 1px solid var(--border); border-radius: 20px; padding: 1.2rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; transform: translateY(20px); }
.coin-card.show { opacity: 1; transform: translateY(0); }
.coin-card:hover { border-color: var(--accent); background: rgba(255,255,255,0.06); }
.coin-img { width: 35px; height: 35px; margin-right: 15px; }
.price-val { font-size: 1.4rem; font-weight: 900; color: var(--accent); }
.whale-alert { font-size: 8px; color: #000; background: var(--accent); padding: 2px 6px; border-radius: 4px; font-weight: 900; margin-left: 8px; text-transform: uppercase; }
footer { padding: 2.5rem 0; border-top: 1px solid var(--border); text-align: center; }
.footer-link { color: #555; text-decoration: none; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; }
.footer-link span { font-weight: 900; color: #777; transition: 0.3s; }
.footer-link:hover span { color: var(--accent); }
.install-ui { height: 85vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.timer-circle { width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 900; color: var(--accent); margin: 2rem 0; position: relative; }
.timer-circle::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; 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, markers = [];
const $ = id => document.getElementById(id);
async function initMap() {
    map = new google.maps.Map($("map"), { 
        zoom: 3, center: { lat: 20, lng: 0 }, disableDefaultUI: true,
        styles: [{elementType:"geometry",stylers:[{color:"#1d1d1d"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#000000"}]}]
    });
    fetchData();
    setInterval(fetchData, 60000);
}
async function fetchData() {
    try {
        const r = await fetch('api.php');
        const data = await r.json();
        render(data);
    } catch(e) { console.error("API Error"); }
}
function render(coins) {
    const list = $("coin-feed"); list.innerHTML = "";
    markers.forEach(m => m.setMap(null)); markers = [];
    coins.forEach((c, i) => {
        const isWhale = c.market_cap > 50000000000;
        const card = document.createElement('div');
        card.className = 'coin-card';
        card.innerHTML = `
            <div style="display:flex;align-items:center;">
                <img src="\${c.image}" class="coin-img">
                <div>
                    <div style="font-weight:900;font-size:1.1rem">\${c.name} \${isWhale ? '<span class="whale-alert">Whale</span>' : ''}</div>
                    <div style="font-size:0.7rem;color:#555;text-transform:uppercase">\${c.symbol} / USD</div>
                </div>
            </div>
            <div style="text-align:right">
                <div class="price-val">$\${c.current_price.toLocaleString()}</div>
                <div style="font-size:0.7rem;color:\${c.price_change_percentage_24h >= 0 ? '#0f0' : '#f00'}">\${c.price_change_percentage_24h.toFixed(2)}%</div>
            </div>`;
        list.appendChild(card);
        setTimeout(() => card.classList.add('show'), i * 100);
        
        const m = new google.maps.Marker({
            position: {lat: (Math.random()*120)-60, lng: (Math.random()*240)-120},
            map, icon: { path: google.maps.SymbolPath.CIRCLE, scale: isWhale ? 10 : 5, fillColor: isWhale ? '#d4af37' : '#fff', fillOpacity: 0.8, strokeWeight: 0 }
        });
        markers.push(m);
    });
}
EOD;
file_put_contents('script.js', $js_content);

$index_content = <<<EOD
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Whale Watch Terminal Pro | Real-Time Crypto Tracker</title>
    <meta name="description" content="Überwache Krypto-Wal-Aktivitäten und Liquidität in Echtzeit. Hochmodernes Dashboard mit CoinGecko-API-Anbindung.">
    <meta name="keywords" content="Crypto Whale Tracker, Bitcoin Tracker, PHP Dashboard, Financial Intelligence">
    <link rel="stylesheet" href="style.css">
    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Whale Watch Terminal Pro",
  "operatingSystem": "Web (PHP 8.x)",
  "applicationCategory": "FinancialApplication",
  "offers": {
    "@type": "Offer",
    "price": "0.00",
    "priceCurrency": "EUR"
  },
  "author": {
    "@type": "Organization",
    "name": "Dreamcodes"
  },
  "description": "Ein Echtzeit-Dashboard zur Verfolgung von Krypto Wal Aktivitäten und globaler Marktliquidität.",
  "featureList": [
    "Real-time CoinGecko API Integration",
    "Interactive Google Maps Radar",
  ],
}
    </script>
</head>
<body>
<div class="container">
    <header>
        <div class="brand-box">
            <h1>Whale Watch Terminal Pro</h1>
            <div class="subtitle">Echtzeit-Analyse globaler Krypto-Liquidität</div>
        </div>
    </header>
    <div class="main-grid">
        <div class="glass-panel"><div id="map"></div></div>
        <div class="feed" id="coin-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;">TERMINAL AKTIVIERT</h1>
        <p style="color: #666; letter-spacing: 2px;">CRYPTO-RADAR BEREIT. WEITERLEITUNG IN...</p>
        <div class="timer-circle" id="timer">10</div>
    </div>
    <script>
        let timeLeft = 10;
        setInterval(() => {
            timeLeft--;
            document.getElementById('timer').innerText = timeLeft;
            if(timeLeft <= 0) window.location.href = 'index.php';
        }, 1000);
    </script>
</body>
</html>
Dreamcodes Redaktion
Dreamcodes Redaktion
Jeder Inhalt auf Dreamcodes entsteht mit einem klaren Anspruch: geprüfte Praxis statt schneller Theorie. Was hier veröffentlicht wird, basiert auf Best Practices, echten Projekterfahrungen und technischem Verständnis, das über das Offensichtliche hinausgeht. Unser Ziel ist ein Fundament, auf dem du aufbauen kannst, nicht eines, das beim ersten produktiven Einsatz bricht. Wie du die Inhalte integrierst, absicherst und in deinen Kontext überträgst, liegt bei dir. Die fachliche Grundlage liefern wir, die Verantwortung für den Einsatz bleibt deine.
Vorheriges Tutorial
Nächstes Tutorial

Vielleicht einen Blick WERT?