<?php
// Webcam-Konfiguration
$webcamUrl = "https://ravensburg-ipwebcam.de/bilder/bilder/snap.jpg?";
$webcamOnline = @getimagesize($webcamUrl) ? true : false;

// Wetter-Konfiguration
$apiKey = "07713078182442da50c28df32f0970fc";
$city = "Ravensburg,de";
$weatherData = null;

$weatherUrl = "https://api.openweathermap.org/data/2.5/weather?q={$city}&units=metric&lang=de&appid={$apiKey}";
$response = @file_get_contents($weatherUrl);
if ($response) {
    $weatherData = json_decode($response, true);
    $temperature = round($weatherData['main']['temp']);
    $description = ucfirst($weatherData['weather'][0]['description']);
} else {
    $temperature = "N/A";
    $description = "Wetterdaten nicht verfügbar";
}
?>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Webcam mit Wetter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <!-- Styles & Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: #c1c1c1;
            color: #fff;
        }
        .webcam-container {
            position: relative;
            display: inline-block;
            width: 640px;
        }
        .overlay {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(0,0,0,0.6);
            padding: 10px;
            border-radius: 5px;
            font-size: 16px;
        }
        .status {
            position: absolute;
            top: 10px;
            left: 10px;
            background: <?= $webcamOnline ? 'rgba(0,128,0,0.7)' : 'rgba(128,0,0,0.7)' ?>;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        .bg-gradient-ravensburg {
  background: linear-gradient(135deg, rgba(30,144,255,0.9), rgba(64,224,208,0.9), rgba(50,205,50,0.9));
}

    </style>
</head>

<body>

<!-- Header -->
<header style="background-color: #00bcd4; color: #000;">
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-ravensburg py-4 shadow-sm fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand fs-3" href="index.php">
      <i class="bi bi-camera-video-fill text-light me-2"></i>Ravensburg Live
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">

        <!-- 🔽 Dropdown-Menü Downloads -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-white" href="#" id="downloadsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-download text-info me-1"></i>Downloads
          </a>
          <ul class="dropdown-menu dropdown-menu-end bg-dark" aria-labelledby="downloadsDropdown">
            <li><a class="dropdown-item text-white" href="/land/anzeige.php">📸 Gif-Zeitraffer</a></li>
            <li><a class="dropdown-item text-white" href="https://ravensburg-webcam.de/bilder/index.php">🕓 Cam History</a></li>
            <li><a class="dropdown-item text-white" href="/downloads/update.exe">🔄 Update</a></li>
          </ul>
        </li>

        <!-- Weitere Links -->
        <li class="nav-item"><a class="nav-link text-white" href="https://ravensburg-ipwebcam.de/land/index.php"><i class="bi bi-clock-history text-warning me-1"></i>Zeitraffer Webcam</a></li>
        <li class="nav-item"><a class="nav-link text-white" href="https://ravensburg-ipwebcam.de/rtsp.php"><i class="bi bi-camera-video text-warning me-1"></i>RTSP-Stream Webcam</a></li>
        <li class="nav-item"><a class="nav-link text-white" href="https://ravensburg-ipwebcam.de/unwetter.php"><i class="bi bi-cloud-lightning-rain-fill text-info me-1"></i>Unwetter</a></li>
        <li class="nav-item"><a class="nav-link text-white" href="https://ravensburg-ipwebcam.de/webcam.php"><i class="bi bi-camera-fill text-info me-1"></i>Webcam</a></li>
        <li class="nav-item"><a class="nav-link text-white" href="https://ravensburg-ipwebcam.de/bilder/webcam.php"><i class="bi bi-star-fill text-success me-1"></i>Handycam</a></li>
        <li class="nav-item"><a class="nav-link text-white" href="https://ravensburg-ipwebcam.de/impressum.php"><i class="bi bi-info-circle-fill text-light me-1"></i>Impressum</a></li>

      </ul>
    </div>
  </div>
</nav>
</header>
<main class="container center">
  <div class="p-3 bg-white rounded shadow-sm border" style="width: 1050px; margin: 140px auto 50px auto;">
    <div class="webcam-container mb-4">
      <img src="wettercam.php" width="1024" alt="Webcam mit Wetter">
      
    </div>
    <p class="text-dark">Das Bild enthält Wetterdaten und Status direkt eingebettet.</p>
  </div>
</main>
<!-- Main Content -->
<main class="container text-center">
<div class="p-3 bg-white rounded shadow-sm border" style="width: 1200px; margin: 140px auto 50px auto;">

    <div class="webcam-container mb-4">
        <img src="<?= $webcamOnline ? $webcamUrl : 'offline.jpg' ?>" width="640" alt="Webcam">
        <div class="status"><?= $webcamOnline ? 'Webcam Online' : 'Webcam Offline' ?></div>
        <div class="overlay">🌡️ <?= $temperature ?> °C – <?= $description ?></div>
    </div>

    <!-- Anleitung -->
    <div class="card bg-white text-black border-light mx-auto" style="max-width: 640px;">
        <div class="p-3 bg-white rounded shadow-sm border" style="width: 640px; ">
        <div class="card-body">
            <h5 class="card-title">📥 Anleitung zur Nutzung</h5>
            <p class="card-text">
                Dieses Skript zeigt ein Live-Webcam-Bild aus Ravensburg mit aktuellen Wetterdaten.
                Um es selbst zu nutzen, folge diesen Schritten:
            </p>
            <ul class="text-start">
                <li>🔧 Speichere den Code als <code>index.php</code> auf deinem Rechner.</li>
                <li>🖥️ Verwende einen Webserver mit PHP-Unterstützung (z. B. <strong>XAMPP</strong>, <strong>WAMP</strong> oder <strong>Apache/Nginx</strong>).</li>
                <li>🌐 Stelle sicher, dass du eine Internetverbindung hast – das Bild und die Wetterdaten werden live geladen.</li>
                <li>🔑 Der OpenWeatherMap API-Schlüssel ist bereits enthalten. Du kannst ihn bei Bedarf durch deinen eigenen ersetzen.</li>
                <li>📷 Die Webcam-URL ist voreingestellt. Du kannst sie durch deine eigene ersetzen, falls du eine andere Kamera verwenden möchtest.</li>
                <li>🖼️ Lege eine Datei namens <code>offline.jpg</code> im gleichen Verzeichnis ab, um ein Bild anzuzeigen, wenn die Webcam nicht erreichbar ist.</li>
            </ul>
            <p class="card-text">
                💡 Du kannst das Design mit Bootstrap ganz einfach erweitern oder anpassen. Viel Spaß beim Ausprobieren!
            </p>
        </div>
    </div>
</main>


<!-- Footer -->
<footer class="bg-dark text-white text-center py-3 mt-5">
    <div class="container">
        <small>&copy; <?= date("Y") ?> Webcam Ravensburg – Alle Rechte vorbehalten</small>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
