Update index.html
optimierungen
This commit is contained in:
GitHub
+223
-45
@@ -1,4 +1,50 @@
|
||||
<?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();
|
||||
error_reporting(E_ALL);
|
||||
ini_set('display_errors', 1);
|
||||
@@ -22,7 +68,8 @@ class WebcamManager {
|
||||
public function captureSnapshot() {
|
||||
|
||||
$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);
|
||||
|
||||
@@ -408,7 +455,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<style>
|
||||
@@ -507,7 +554,7 @@ header {
|
||||
|
||||
|
||||
.title-section {
|
||||
background-image: url('main.jpg');
|
||||
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
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 {
|
||||
@@ -1004,12 +1111,7 @@ footer {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
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>
|
||||
</head>
|
||||
<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>
|
||||
<div class="container">
|
||||
|
||||
@@ -1027,34 +1137,40 @@ footer {
|
||||
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#webcams">Webcam</a></li>
|
||||
<li><a href="#guestbook">Gästebuch</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
<li><a href="#gallery">Galerie</a></li>
|
||||
<?php if ($adminManager->isAdmin()): ?>
|
||||
<li><a href="#admin">Admin</a></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="#webcams" data-en="Webcam" data-de="Webcam">Webcam</a></li>
|
||||
<li><a href="#guestbook" data-en="Guestbook" data-de="Gästebuch">Gästebuch</a></li>
|
||||
<li><a href="#kontakt" data-en="Contact" data-de="Kontakt">Kontakt</a></li>
|
||||
<li><a href="#gallery" data-en="Gallery" data-de="Galerie">Galerie</a></li>
|
||||
<?php if ($adminManager->isAdmin()): ?>
|
||||
<li><a href="#admin" data-en="Admin" data-de="Admin">Admin</a></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-content">
|
||||
<section class="title-section">
|
||||
<div class="container">
|
||||
<div id="welcome-title">Willkommen bei Aurora Wetter Lifecam</div>
|
||||
<div id="welcome-subtitle">Erleben Sie faszinierende Ausblicke der Züricher Region - in Echtzeit!</div>
|
||||
<div class="container">
|
||||
<div class="flag-title-container">
|
||||
<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>
|
||||
</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="recommendation-banner">
|
||||
<h2>Unsere Empfehlungen</h2>
|
||||
<h2> <data-de="Unsere Empfehlungen" data-en="our recommendations"> </h2>
|
||||
<div class="sponsor-logos">
|
||||
<?php
|
||||
$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' => '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'],
|
||||
@@ -1104,17 +1220,28 @@ footer {
|
||||
|
||||
|
||||
</div>
|
||||
<div class="webcam-controls">
|
||||
<a href="?action=snapshot" class="button">Snapshot speichern</a>
|
||||
<a href="?action=sequence" class="button">Videoclip speichern</a>
|
||||
<a href="#" class="button" id="timelapse-button">Tagesablauf im Zeitraffer</a>
|
||||
<a href="#" class="button" id="sunny-timelapse-button">Sonnige Momente anzeigen</a>
|
||||
<div class="webcam-controls" style="text-align: center";>
|
||||
|
||||
<a href="?action=snapshot" class="button" data-en="Save Snapshot" data-de="Snapshot speichern">Snapshot speichern</a>
|
||||
<a href="?action=sequence" class="button" data-en="Save Video Clip" data-de="Videoclip speichern">Videoclip speichern</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
</section>
|
||||
@@ -1125,9 +1252,17 @@ footer {
|
||||
|
||||
<section id="qr-code" class="section">
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
@@ -1143,7 +1278,7 @@ footer {
|
||||
|
||||
<section id="guestbook" class="section">
|
||||
<div class="container">
|
||||
<h2>Gästebuch</h2>
|
||||
<h2 data-en="Guestbook" data-de="Gästebuch">Gästebuch</h2>
|
||||
<?php
|
||||
if (isset($_SESSION['message'])) {
|
||||
echo "<p class='success'>{$_SESSION['message']}</p>";
|
||||
@@ -1162,14 +1297,25 @@ footer {
|
||||
|
||||
<section id="kontakt" class="section">
|
||||
<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(); ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="section">
|
||||
<div class="container">
|
||||
<h2>Bildergalerie</h2>
|
||||
<h2 data-en="Image Gallery" data-de="Bildergalerie"> </h2>
|
||||
|
||||
<div id="gallery-images">
|
||||
<?php echo $adminManager->displayGalleryImages(); ?>
|
||||
|
||||
@@ -1177,14 +1323,24 @@ footer {
|
||||
</div>
|
||||
</section>
|
||||
<section id="ueber-uns" class="section">
|
||||
<div class="container">
|
||||
<h2>Über unser Projekt</h2>
|
||||
|
||||
<div class="container">
|
||||
<h2 data-en="About Our Project" data-de="Über unser Projekt" ></h2>
|
||||
|
||||
<div class="about-grid">
|
||||
<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>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>
|
||||
<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 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>
|
||||
</section>
|
||||
<?php if ($adminManager->isAdmin()): ?>
|
||||
@@ -1570,17 +1726,39 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
<section id="impressum" class="section">
|
||||
<div class="container">
|
||||
<h2>Impressum</h2>
|
||||
<p>Aurora Wetter Lifecam</p>
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Musterstadt</p>
|
||||
<p>Aurora Wetter Livecam</p>
|
||||
<p>M. Kessler</p>
|
||||
<p>Hanflandstrasse</p>
|
||||
<p>8635 Dürnten</p>
|
||||
<p>Schweiz</p>
|
||||
<p>E-Mail: info@aurora-wetter-lifecam.ch</p>
|
||||
<p>Telefon: +41 123 456 789</p>
|
||||
<p>Verantwortlich für den Inhalt: Max Mustermann</p>
|
||||
<p>Anfragen per Kontaktformular</p>
|
||||
<p>Verantwortlich für den Inhalt: M. Kessler</p>
|
||||
</div>
|
||||
</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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user