Update index.html
timelapse
This commit is contained in:
GitHub
+193
-13
@@ -3,6 +3,17 @@ session_start();
|
||||
error_reporting(E_ALL);
|
||||
ini_set('display_errors', 1);
|
||||
|
||||
|
||||
|
||||
$imageDir = "./image"; // Angepasst an das Ausgabeverzeichnis des Bash-Skripts
|
||||
$imageFiles = glob("$imageDir/screenshot_*.jpg");
|
||||
rsort($imageFiles); // Sortiert die Dateien in umgekehrter Reihenfolge (neueste zuerst)
|
||||
$imageFilesJson = json_encode($imageFiles);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class WebcamManager {
|
||||
private $videoSrc = 'test_video.m3u8';
|
||||
private $logoPath = 'logo.png';
|
||||
@@ -25,6 +36,10 @@ class WebcamManager {
|
||||
unlink($outputFile);
|
||||
exit;
|
||||
}
|
||||
public function getImageFiles() {
|
||||
$imageFiles = glob("image/*.{jpg,jpeg,png,gif}", GLOB_BRACE);
|
||||
return json_encode($imageFiles);
|
||||
}
|
||||
|
||||
public function captureVideoSequence($duration = 10) {
|
||||
$outputFile = 'sequence_' . date('YmdHis') . '.mp4';
|
||||
@@ -325,6 +340,7 @@ class AdminManager {
|
||||
}
|
||||
|
||||
$webcamManager = new WebcamManager();
|
||||
$imageFilesJson = $webcamManager->getImageFiles();
|
||||
$guestbookManager = new GuestbookManager();
|
||||
$contactManager = new ContactManager();
|
||||
$adminManager = new AdminManager();
|
||||
@@ -650,6 +666,86 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
.recommendation-banner {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sponsor-logos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ad-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ad-item {
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ad-item img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ad-item p {
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.timelapse-container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#timelapse {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
background-color: #000;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#playPauseButton {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
#timeSlider {
|
||||
flex-grow: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
#currentTime {
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -687,24 +783,40 @@ footer {
|
||||
|
||||
|
||||
<?php
|
||||
// Fügen Sie diesen Code direkt nach dem öffnenden <body> Tag ein
|
||||
|
||||
echo '<div class="recommendation-banner">
|
||||
<h2>Unsere Empfehlungen</h2>
|
||||
<div class="sponsor-logos">
|
||||
<p> Gartencenter Meier </p>
|
||||
<a href="www.gartencenter-meier.ch" target="_blank">
|
||||
<div class="sponsor-logos">';
|
||||
|
||||
<img src="meier.png" alt="Gartencenter Meier">
|
||||
$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' => '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']
|
||||
];
|
||||
|
||||
// Werbungen in 5er-Gruppen
|
||||
$grouped_ads = array_chunk($advertisements, 5);
|
||||
|
||||
foreach ($grouped_ads as $group) {
|
||||
echo '<div class="ad-row">';
|
||||
foreach ($group as $ad) {
|
||||
echo '<div class="ad-item">
|
||||
<p>' . $ad['name'] . '</p>
|
||||
<a href="' . $ad['url'] . '" target="_blank">
|
||||
<img src="' . $ad['img'] . '" alt="' . $ad['name'] . '">
|
||||
</a>
|
||||
<p> Raketen und Vulkane</p>
|
||||
<a href="https://www.rheinmetall.com/de" target="_blank">
|
||||
</div>';
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
<img src="bum.png" alt="Lustige Waffen">
|
||||
</a>
|
||||
echo '</div></div>';
|
||||
|
||||
</div>
|
||||
</div>';
|
||||
?>
|
||||
|
||||
|
||||
@@ -726,10 +838,19 @@ echo '<div class="recommendation-banner">
|
||||
|
||||
<div class="video-container">
|
||||
<?php echo $webcamManager->displayWebcam(); ?>
|
||||
<div id="timelapse-viewer" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
||||
<img id="timelapse-image" src="" alt="Timelapse Image" style="width: 100%; height: 100%; object-fit: cover;">
|
||||
</div>
|
||||
<div class="webcam-controls">
|
||||
</div>
|
||||
<div class="webcam-controls">
|
||||
<a href="?action=snapshot" class="button">Snapshot herunterladen</a>
|
||||
<a href="?action=sequence" class="button">Video-Sequenz herunterladen</a>
|
||||
<a href="#" class="button" id="timelapse-button">Tageszeitraffer anzeigen</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -741,7 +862,7 @@ echo '<div class="recommendation-banner">
|
||||
<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>
|
||||
<div id="qrcode" data-url="https://your-website.com"></div>
|
||||
<div id="qrcode" data-url="https://www.aurora-wetter-lifecam.ch"></div>
|
||||
<p>Klicke auf den QR-Code, um die URL zu kopieren</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -936,6 +1057,65 @@ function generateQRCode() {
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var timelapseButton = document.getElementById('timelapse-button');
|
||||
var timelapseViewer = document.getElementById('timelapse-viewer');
|
||||
var timelapseImage = document.getElementById('timelapse-image');
|
||||
var webcamPlayer = document.getElementById('webcam-player');
|
||||
|
||||
var imageFiles = <?php echo $imageFilesJson; ?>;
|
||||
var currentImageIndex = 0;
|
||||
var timelapseInterval;
|
||||
|
||||
timelapseButton.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
if (timelapseViewer.style.display === 'none') {
|
||||
timelapseViewer.style.display = 'block';
|
||||
webcamPlayer.style.display = 'none';
|
||||
startTimelapse();
|
||||
timelapseButton.textContent = 'Zurück zur Live-Webcam';
|
||||
} else {
|
||||
stopTimelapse();
|
||||
timelapseViewer.style.display = 'none';
|
||||
webcamPlayer.style.display = 'block';
|
||||
timelapseButton.textContent = 'Tageszeitraffer anzeigen';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function startTimelapse() {
|
||||
if (imageFiles.length === 0) {
|
||||
console.log("Keine Bilder gefunden");
|
||||
return;
|
||||
}
|
||||
|
||||
timelapseInterval = setInterval(function() {
|
||||
if (currentImageIndex >= imageFiles.length) {
|
||||
currentImageIndex = 0;
|
||||
}
|
||||
// Hier verwenden wir direkt den Pfad aus dem imageFiles-Array
|
||||
timelapseImage.src = imageFiles[currentImageIndex];
|
||||
currentImageIndex++;
|
||||
}, 500); // Jedes Bild wird eine halbe Sekunde angezeigt
|
||||
}
|
||||
|
||||
function stopTimelapse() {
|
||||
clearInterval(timelapseInterval);
|
||||
currentImageIndex = 0;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var qrCodeElement = document.getElementById('qrcode');
|
||||
|
||||
Reference in New Issue
Block a user