Update index.html

optimierungen
This commit is contained in:
2024-09-17 19:38:56 +02:00
committed by GitHub
parent dedf708c3b
commit c2de96bc28
+215 -37
View File
@@ -1,4 +1,50 @@
<?php <?php
// Funktion zur sicheren Umleitung
function safeRedirect($url) {
if (!headers_sent()) {
header("HTTP/1.1 301 Moved Permanently");
header("Location: " . $url);
} else {
echo '<script>window.location.href="' . $url . '";</script>';
}
exit();
}
// Hauptlogik
$oldDomains = [
'www.aurora-wetter-lifecam.ch',
'www.aurora-wetter-livecam.ch'
];
$newDomain = 'www.aurora-weather-livecam.com';
if (in_array($_SERVER['HTTP_HOST'], $oldDomains)) {
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
$newUrl = $protocol . '://' . $newDomain . $_SERVER['REQUEST_URI'];
// Logging für Debugging
error_log("Umleitung von {$_SERVER['HTTP_HOST']} nach $newUrl");
if (!headers_sent()) {
header("HTTP/1.1 301 Moved Permanently");
header("Location: " . $newUrl);
} else {
echo '<script>window.location.href="' . $newUrl . '";</script>';
}
exit();
}
session_start(); session_start();
error_reporting(E_ALL); error_reporting(E_ALL);
ini_set('display_errors', 1); ini_set('display_errors', 1);
@@ -22,7 +68,8 @@ class WebcamManager {
public function captureSnapshot() { public function captureSnapshot() {
$outputFile = 'snapshot_' . date('YmdHis') . '.jpg'; $outputFile = 'snapshot_' . date('YmdHis') . '.jpg';
$command = "ffmpeg -i {$this->videoSrc} -i {$this->logoPath} -filter_complex 'overlay=10:10' -vframes 1 -q:v 2 {$outputFile}"; $command = "ffmpeg -i {$this->videoSrc} -i {$this->logoPath} -filter_complex 'overlay=main_w-overlay_w-10:10' -vframes 1 -q:v 2 {$outputFile}";
exec($command, $output, $returnVar); exec($command, $output, $returnVar);
@@ -408,7 +455,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aurora Wetter Lifecam - Einzigartige Live-Webcam und Wetter></title> <title>Aurora Livecam - Einzigartige Live-Webcam und Wetter></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<style> <style>
@@ -507,7 +554,7 @@ header {
.title-section { .title-section {
background-image: url('main.jpg');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -665,6 +712,31 @@ footer {
#language-switch {
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
}
.lang-button {
background: none;
border: none;
cursor: pointer;
padding: 5px;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.lang-button:hover, .lang-button.active {
opacity: 1;
}
.flag-icon {
width: 30px;
height: 20px;
object-fit: cover;
}
@@ -701,6 +773,27 @@ footer {
.flag-title-container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px; /* Abstand zwischen Flaggen und Titel */
}
.flag-image {
width: 50px; /* Passen Sie die Größe nach Bedarf an */
height: auto;
}
@media (max-width: 768px) {
.flag-title-container {
flex-direction: column;
}
.flag-image {
width: 30px; /* Kleinere Flaggen auf mobilen Geräten */
}
}
@@ -766,6 +859,20 @@ footer {
.title-section h1,
.title-section p {
color: #fff; /* Ändert die Textfarbe auf Weiß */
text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Fügt einen Textschatten hinzu für bessere Lesbarkeit */
}
.title-section h1 {
font-size: 2.5em; /* Vergrößert die Überschrift */
margin-bottom: 10px;
}
.title-section p {
font-size: 1.2em; /* Vergrößert den Paragraphentext */
}
.title-section { .title-section {
@@ -1005,11 +1112,6 @@ footer {
margin-bottom: 20px; margin-bottom: 20px;
} }
/* Rest des CSS bleibt unverändert */
@@ -1018,6 +1120,14 @@ footer {
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
</head> </head>
<body> <body>
<div id="language-switch">
<button id="lang-de" class="lang-button active" aria-label="Deutsch">
<img src="images/swiss-flag.ico" alt="Schweizer Flagge" class="flag-icon">
</button>
<button id="lang-en" class="lang-button" aria-label="English">
<img src="images/uk-flag.ico" alt="UK Flagge" class="flag-icon">
</button>
</div>
<header> <header>
<div class="container"> <div class="container">
@@ -1028,12 +1138,12 @@ footer {
<nav> <nav>
<ul> <ul>
<li><a href="#webcams">Webcam</a></li> <li><a href="#webcams" data-en="Webcam" data-de="Webcam">Webcam</a></li>
<li><a href="#guestbook">Gästebuch</a></li> <li><a href="#guestbook" data-en="Guestbook" data-de="Gästebuch">Gästebuch</a></li>
<li><a href="#kontakt">Kontakt</a></li> <li><a href="#kontakt" data-en="Contact" data-de="Kontakt">Kontakt</a></li>
<li><a href="#gallery">Galerie</a></li> <li><a href="#gallery" data-en="Gallery" data-de="Galerie">Galerie</a></li>
<?php if ($adminManager->isAdmin()): ?> <?php if ($adminManager->isAdmin()): ?>
<li><a href="#admin">Admin</a></li> <li><a href="#admin" data-en="Admin" data-de="Admin">Admin</a></li>
<?php endif; ?> <?php endif; ?>
</ul> </ul>
</nav> </nav>
@@ -1042,19 +1152,25 @@ footer {
<div class="main-content"> <div class="main-content">
<section class="title-section"> <section class="title-section">
<div class="container"> <div class="container">
<div id="welcome-title">Willkommen bei Aurora Wetter Lifecam</div> <div class="flag-title-container">
<div id="welcome-subtitle">Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!</div> <img src="swiss-flag.jpg" alt="Schweizer Flagge" class="flag-image">
<h1 data-en="Welcome to Aurora Weather Livecam" data-de="Willkommen bei Aurora Wetter Livecam">Willkommen bei Aurora Wetter Livecam</h1>
<img src="local-flag.jpg" alt="Ortsflagge" class="flag-image">
</div> </div>
</section> <p data-en="Experience fascinating views of the Zurich region - in real time!" data-de="Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!">Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!</p>
</div>
</section>
<div class="banner-container"> <div class="banner-container">
<div class="recommendation-banner"> <div class="recommendation-banner">
<h2>Unsere Empfehlungen</h2> <h2> <data-de="Unsere Empfehlungen" data-en="our recommendations"> </h2>
<div class="sponsor-logos"> <div class="sponsor-logos">
<?php <?php
$advertisements = [ $advertisements = [
['name' => 'Gartencenter Meier', 'url' => 'https://www.gartencenter-meier.ch', 'img' => 'meier.png'],
['name' => 'Restaurant Schweizerhof', 'url' => 'https://schweizerhof-duernten.ch/', 'img' => 'schweiz.png'], ['name' => 'Restaurant Schweizerhof', 'url' => 'https://schweizerhof-duernten.ch/', 'img' => 'schweiz.png'],
['name' => 'AWZ Uster', 'url' => 'https://www.azw.info/', 'img' => 'awz.png'],
['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'], ['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'],
['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'], ['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'],
['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'], ['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'],
@@ -1104,17 +1220,28 @@ footer {
</div> </div>
<div class="webcam-controls"> <div class="webcam-controls" style="text-align: center";>
<a href="?action=snapshot" class="button">Snapshot speichern</a>
<a href="?action=sequence" class="button">Videoclip speichern</a> <a href="?action=snapshot" class="button" data-en="Save Snapshot" data-de="Snapshot speichern">Snapshot speichern</a>
<a href="#" class="button" id="timelapse-button">Tagesablauf im Zeitraffer</a> <a href="?action=sequence" class="button" data-en="Save Video Clip" data-de="Videoclip speichern">Videoclip speichern</a>
<a href="#" class="button" id="sunny-timelapse-button">Sonnige Momente anzeigen</a> <a href="#" class="button" id="timelapse-button" data-en="Daily Timelapse" data-de="Tagesablauf im Zeitraffer">Tagesablauf im Zeitraffer</a>
<a href="#" class="button" id="sunny-timelapse-button" data-en="Show Sunny Moments" data-de="Sonnige Momente anzeigen">Sonnige Momente anzeigen</a>
</div> </div>
<section class="community-info" style="text-align: center; max-width: 600px; margin: 0 auto;">
<h2 data-en="Join Our Community" data-de="Werden Sie Teil unserer Community">Werden Sie Teil unserer Community</h2>
<p data-en="Use our platform to start your own webcam broadcast and share your view of the Zurich landscape with others." data-de="Nutzen Sie unsere Plattform, um Ihre eigene Webcam-Übertragung zu starten und Ihre Sicht auf die Züricher Landschaft mit anderen zu teilen.">Nutzen Sie unsere Plattform, um Ihre eigene Webcam-Übertragung zu starten und Ihre Sicht auf die Züricher Landschaft mit anderen zu teilen.</p>
<p data-en="Become part of our community of weather and nature enthusiasts by contributing your personal livestreams." data-de="Werden Sie Teil unserer Community von Wetter- und Naturbegeisterten, indem Sie Ihre persönlichen Livestreams einbringen.">Werden Sie Teil unserer Community von Wetter- und Naturbegeisterten, indem Sie Ihre persönlichen Livestreams einbringen.</p>
</section>
</div> </div>
</div> </div>
</section> </section>
@@ -1125,9 +1252,17 @@ footer {
<section id="qr-code" class="section"> <section id="qr-code" class="section">
<div class="container" style="text-align: center;"> <div class="container" style="text-align: center;">
<h1>Folge uns und kopiere den Code und sende es deinen Freunden in Tiktok, Facebook, Instagram usw</h1>
<h1>
<p data-en="Follow us and copy the code to send it to your friends on TikTok, Facebook, Instagram, etc."
data-de="Folge uns und kopiere den Code und sende es deinen Freunden in Tiktok, Facebook, Instagram usw.">
Folge uns und kopiere den Code und sende es deinen Freunden in Tiktok, Facebook, Instagram usw.</p>
</h1>
<div id="qrcode" data-url="https://www.aurora-wetter-lifecam.ch/qr.php"></div> <div id="qrcode" data-url="https://www.aurora-wetter-lifecam.ch/qr.php"></div>
<p>Klicke auf den QR-Code, um die URL zu kopieren</p> <p><data-de="Klicke auf den QR-Code, um die URL zu kopieren" data-en="Click on the QR code to copy the URL"></p>
</div> </div>
</section> </section>
@@ -1143,7 +1278,7 @@ footer {
<section id="guestbook" class="section"> <section id="guestbook" class="section">
<div class="container"> <div class="container">
<h2>Gästebuch</h2> <h2 data-en="Guestbook" data-de="Gästebuch">Gästebuch</h2>
<?php <?php
if (isset($_SESSION['message'])) { if (isset($_SESSION['message'])) {
echo "<p class='success'>{$_SESSION['message']}</p>"; echo "<p class='success'>{$_SESSION['message']}</p>";
@@ -1162,14 +1297,25 @@ footer {
<section id="kontakt" class="section"> <section id="kontakt" class="section">
<div class="container"> <div class="container">
<h2>Kontakt</h2> <p>Haben Sie Fragen, Anregungen oder möchten uns unterstützen? Wir freuen uns auf Ihre Nachricht!</p>
<h2 data-en="Contact" data-de="Kontakt">Kontakt</h2>
<p data-en="Do you have questions, suggestions, or would you like to support us? We look forward to hearing from you!" data-de="Haben Sie Fragen, Anregungen oder möchten uns unterstützen? Wir freuen uns auf Ihre Nachricht!">Haben Sie Fragen, Anregungen oder möchten uns unterstützen? Wir freuen uns auf Ihre Nachricht!</p>
<?php echo $contactManager->displayForm(); ?> <?php echo $contactManager->displayForm(); ?>
</div> </div>
</section> </section>
<section id="gallery" class="section"> <section id="gallery" class="section">
<div class="container"> <div class="container">
<h2>Bildergalerie</h2> <h2 data-en="Image Gallery" data-de="Bildergalerie"> </h2>
<div id="gallery-images"> <div id="gallery-images">
<?php echo $adminManager->displayGalleryImages(); ?> <?php echo $adminManager->displayGalleryImages(); ?>
@@ -1177,14 +1323,24 @@ footer {
</div> </div>
</section> </section>
<section id="ueber-uns" class="section"> <section id="ueber-uns" class="section">
<div class="container"> <div class="container">
<h2>Über unser Projekt</h2> <h2 data-en="About Our Project" data-de="Über unser Projekt" ></h2>
<div class="about-grid"> <div class="about-grid">
<div class="about-item"> <div class="about-item">
<p>Aurora Wetter Lifecam ist ein Herzensprojekt von Wetterbegeisterten. Wir möchten Ihnen die Schönheit der Natur und Faszination des Wetters näher bringen.</p> <p data-en="Aurora Weather Livecam is a passion project by weather enthusiasts. We want to bring you closer to the beauty of nature and the fascination of weather." data-de="Aurora Wetter Livecam ist ein Herzensprojekt von Wetterbegeisterten. Wir möchten Ihnen die Schönheit der Natur und Faszination des Wetters näher bringen.">Aurora Wetter Livecam ist ein Herzensprojekt von Wetterbegeisterten. Wir möchten Ihnen die Schönheit der Natur und Faszination des Wetters näher bringen.</p>
<p>Dazu betreiben wir seit 2010 rund um die Uhr hochauflösende Webcams. Besonders stolz sind wir auf einzigartige Einblicke, wie z.B. die Trainingsflüge der Patrouille Suisse jeden Montagmorgen.</p> <p data-en="For this purpose, we have been operating high-resolution webcams around the clock since 2010. We are particularly proud of unique insights, such as the training flights of the Patrouille Suisse every Monday morning." data-de="Dazu betreiben wir seit 2010 rund um die Uhr hochauflösende Webcams. Besonders stolz sind wir auf einzigartige Einblicke, wie z.B. die Trainingsflüge der Patrouille Suisse jeden Montagmorgen.">Dazu betreiben wir seit 2010 rund um die Uhr hochauflösende Webcams. Besonders stolz sind wir auf einzigartige Einblicke, wie z.B. die Trainingsflüge der Patrouille Suisse jeden Montagmorgen.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<?php if ($adminManager->isAdmin()): ?> <?php if ($adminManager->isAdmin()): ?>
@@ -1570,17 +1726,39 @@ document.addEventListener('DOMContentLoaded', function() {
<section id="impressum" class="section"> <section id="impressum" class="section">
<div class="container"> <div class="container">
<h2>Impressum</h2> <h2>Impressum</h2>
<p>Aurora Wetter Lifecam</p> <p>Aurora Wetter Livecam</p>
<p>Musterstraße 123</p> <p>M. Kessler</p>
<p>12345 Musterstadt</p> <p>Hanflandstrasse</p>
<p>8635 Dürnten</p>
<p>Schweiz</p> <p>Schweiz</p>
<p>E-Mail: info@aurora-wetter-lifecam.ch</p> <p>Anfragen per Kontaktformular</p>
<p>Telefon: +41 123 456 789</p> <p>Verantwortlich für den Inhalt: M. Kessler</p>
<p>Verantwortlich für den Inhalt: Max Mustermann</p>
</div> </div>
</section> </section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const langButtons = document.querySelectorAll('.lang-button');
langButtons.forEach(button => {
button.addEventListener('click', function() {
const lang = this.id.split('-')[1]; // 'de' oder 'en'
setLanguage(lang);
// Aktiven Button markieren
langButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
});
});
});
function setLanguage(lang) {
document.querySelectorAll('[data-en], [data-de]').forEach(elem => {
elem.textContent = elem.getAttribute(`data-${lang}`);
});
}
</script>
</body> </body>
</html> </html>