admin/marcel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update index.html

Browse Source 
timelapse
This commit is contained in:
metacube2
2024-08-06 10:44:57 +02:00
committed by GitHub
parent 4a8a8fbff0
commit e239b0e09c
1 changed files with 202 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+202 -22
View File
@@ -3,6 +3,17 @@ session_start();
error_reporting(E_ALL); error_reporting(E_ALL);
ini_set('display_errors', 1); 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 { class WebcamManager {
private $videoSrc = 'test_video.m3u8'; private $videoSrc = 'test_video.m3u8';
private $logoPath = 'logo.png'; private $logoPath = 'logo.png';
@@ -25,7 +36,11 @@ class WebcamManager {
unlink($outputFile); unlink($outputFile);
exit; exit;
} }
public function getImageFiles() {
$imageFiles = glob("image/*.{jpg,jpeg,png,gif}", GLOB_BRACE);
return json_encode($imageFiles);
}
public function captureVideoSequence($duration = 10) { public function captureVideoSequence($duration = 10) {
$outputFile = 'sequence_' . date('YmdHis') . '.mp4'; $outputFile = 'sequence_' . date('YmdHis') . '.mp4';
$command = "ffmpeg -i {$this->videoSrc} -i {$this->logoPath} -filter_complex 'overlay=10:10' -t {$duration} -c:v libx264 -preset fast -crf 23 {$outputFile}"; $command = "ffmpeg -i {$this->videoSrc} -i {$this->logoPath} -filter_complex 'overlay=10:10' -t {$duration} -c:v libx264 -preset fast -crf 23 {$outputFile}";
@@ -325,6 +340,7 @@ class AdminManager {
} }
$webcamManager = new WebcamManager(); $webcamManager = new WebcamManager();
$imageFilesJson = $webcamManager->getImageFiles();
$guestbookManager = new GuestbookManager(); $guestbookManager = new GuestbookManager();
$contactManager = new ContactManager(); $contactManager = new ContactManager();
$adminManager = new AdminManager(); $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> </style>
@@ -687,24 +783,40 @@ footer {
<?php <?php
// Fügen Sie diesen Code direkt nach dem öffnenden <body> Tag ein
echo '<div class="recommendation-banner"> echo '<div class="recommendation-banner">
<h2>Unsere Empfehlungen</h2> <h2>Unsere Empfehlungen</h2>
<div class="sponsor-logos"> <div class="sponsor-logos">';
<p> Gartencenter Meier </p>
<a href="www.gartencenter-meier.ch" target="_blank"> $advertisements = [
['name' => 'Gartencenter Meier', 'url' => 'https://www.gartencenter-meier.ch', 'img' => 'meier.png'],
<img src="meier.png" alt="Gartencenter Meier"> ['name' => 'Restaurant Schweizerhof', 'url' => 'https://schweizerhof-duernten.ch/', 'img' => 'schweiz.png'],
</a> ['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'],
<p> Raketen und Vulkane</p> ['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'],
<a href="https://www.rheinmetall.com/de" target="_blank"> ['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'],
<img src="bum.png" alt="Lustige Waffen"> ['name' => 'Deine Werbung bei uns', 'url' => 'https://www.aurora-wetter-lifecam.ch/', 'img' => 'werbung.png'],
</a> ['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>
</div>';
}
echo '</div>';
}
echo '</div></div>';
</div>
</div>';
?> ?>
@@ -724,12 +836,21 @@ echo '<div class="recommendation-banner">
<section id="webcams" class="section"> <section id="webcams" class="section">
<div class="container"> <div class="container">
<div class="video-container"> <div class="video-container">
<?php echo $webcamManager->displayWebcam(); ?> <?php echo $webcamManager->displayWebcam(); ?>
</div> <div id="timelapse-viewer" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<div class="webcam-controls"> <img id="timelapse-image" src="" alt="Timelapse Image" style="width: 100%; height: 100%; object-fit: cover;">
<a href="?action=snapshot" class="button">Snapshot herunterladen</a> </div>
<a href="?action=sequence" class="button">Video-Sequenz herunterladen</a> </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>
</div> </div>
</section> </section>
@@ -741,7 +862,7 @@ echo '<div class="recommendation-banner">
<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>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> <p>Klicke auf den QR-Code, um die URL zu kopieren</p>
</div> </div>
</section> </section>
@@ -936,6 +1057,65 @@ function generateQRCode() {
</script> </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> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var qrCodeElement = document.getElementById('qrcode'); var qrCodeElement = document.getElementById('qrcode');