729 lines
19 KiB
HTML
729 lines
19 KiB
HTML
<?php
|
|
session_start();
|
|
error_reporting(E_ALL);
|
|
ini_set('display_errors', 1);
|
|
|
|
class WebcamManager {
|
|
private $videoSrc = 'test_video.m3u8';
|
|
|
|
public function displayWebcam() {
|
|
return '<video id="webcam-player" controls autoplay muted></video>';
|
|
}
|
|
|
|
public function captureSnapshot() {
|
|
$outputFile = 'snapshot_' . date('YmdHis') . '.jpg';
|
|
$command = "ffmpeg -i {$this->videoSrc} -vframes 1 -q:v 2 {$outputFile}";
|
|
|
|
exec($command, $output, $returnVar);
|
|
|
|
if ($returnVar !== 0) {
|
|
return "Fehler beim Erstellen des Snapshots.";
|
|
}
|
|
|
|
header('Content-Type: application/octet-stream');
|
|
header('Content-Disposition: attachment; filename="' . $outputFile . '"');
|
|
readfile($outputFile);
|
|
unlink($outputFile);
|
|
exit;
|
|
}
|
|
|
|
public function captureVideoSequence($duration = 10) {
|
|
$outputFile = 'sequence_' . date('YmdHis') . '.mp4';
|
|
$command = "ffmpeg -i {$this->videoSrc} -t {$duration} -c copy {$outputFile}";
|
|
|
|
exec($command, $output, $returnVar);
|
|
|
|
if ($returnVar !== 0) {
|
|
return "Fehler beim Erstellen der Video-Sequenz.";
|
|
}
|
|
|
|
header('Content-Type: video/mp4');
|
|
header('Content-Disposition: attachment; filename="' . $outputFile . '"');
|
|
readfile($outputFile);
|
|
unlink($outputFile);
|
|
exit;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public function getJavaScript() {
|
|
return "
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var video = document.getElementById('webcam-player');
|
|
var videoSrc = '{$this->videoSrc}';
|
|
if (Hls.isSupported()) {
|
|
var hls = new Hls();
|
|
hls.loadSource(videoSrc);
|
|
hls.attachMedia(video);
|
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
video.play();
|
|
});
|
|
}
|
|
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
video.src = videoSrc;
|
|
video.addEventListener('loadedmetadata', function () {
|
|
video.play();
|
|
});
|
|
}
|
|
});
|
|
";
|
|
}
|
|
|
|
public function setVideoSrc($src) {
|
|
$this->videoSrc = $src;
|
|
}
|
|
}
|
|
|
|
class GuestbookManager {
|
|
private $entries = [];
|
|
private $dbFile = 'guestbook.json';
|
|
|
|
public function __construct() {
|
|
if (file_exists($this->dbFile)) {
|
|
$this->entries = json_decode(file_get_contents($this->dbFile), true);
|
|
}
|
|
}
|
|
|
|
public function handleFormSubmission() {
|
|
if (isset($_POST['guestbook'], $_POST['guest-name'], $_POST['guest-message'])) {
|
|
$this->addEntry($_POST['guest-name'], $_POST['guest-message']);
|
|
$this->saveEntries();
|
|
}
|
|
}
|
|
|
|
private function addEntry($name, $message) {
|
|
$this->entries[] = [
|
|
'name' => $name,
|
|
'message' => $message,
|
|
'date' => date('Y-m-d H:i:s')
|
|
];
|
|
}
|
|
|
|
private function saveEntries() {
|
|
file_put_contents($this->dbFile, json_encode($this->entries));
|
|
}
|
|
|
|
public function displayForm() {
|
|
return '
|
|
<form method="post">
|
|
<input type="hidden" name="guestbook" value="1">
|
|
<label for="guest-name">Name:</label>
|
|
<input type="text" id="guest-name" name="guest-name" required>
|
|
<label for="guest-message">Nachricht:</label>
|
|
<textarea id="guest-message" name="guest-message" required></textarea>
|
|
<button type="submit">Eintrag hinzufügen</button>
|
|
</form>';
|
|
}
|
|
|
|
public function displayEntries() {
|
|
$output = '<div id="guestbook-entries">';
|
|
foreach ($this->entries as $entry) {
|
|
$output .= "
|
|
<div class='guestbook-entry'>
|
|
<h4>{$entry['name']}</h4>
|
|
<p>{$entry['message']}</p>
|
|
<small>{$entry['date']}</small>
|
|
</div>";
|
|
}
|
|
$output .= '</div>';
|
|
return $output;
|
|
}
|
|
}
|
|
|
|
class ContactManager {
|
|
public function displayForm() {
|
|
return '
|
|
<form method="post">
|
|
<input type="hidden" name="contact" value="1">
|
|
<label for="name">Name:</label>
|
|
<input type="text" id="name" name="name" required>
|
|
<label for="email">E-Mail:</label>
|
|
<input type="email" id="email" name="email" required>
|
|
<label for="message">Nachricht:</label>
|
|
<textarea id="message" name="message" required></textarea>
|
|
<button type="submit">Nachricht senden</button>
|
|
</form>';
|
|
}
|
|
|
|
public function handleSubmission($name, $email, $message) {
|
|
$feedback = [
|
|
'name' => $name,
|
|
'email' => $email,
|
|
'message' => $message,
|
|
'date' => date('Y-m-d H:i:s')
|
|
];
|
|
$feedbacks = json_decode(file_get_contents('feedbacks.json') ?: '[]', true);
|
|
$feedbacks[] = $feedback;
|
|
file_put_contents('feedbacks.json', json_encode($feedbacks));
|
|
}
|
|
}
|
|
|
|
class AdminManager {
|
|
public function isAdmin() {
|
|
return isset($_SESSION['admin']) && $_SESSION['admin'] === true;
|
|
}
|
|
public function handleLogin($username, $password) {
|
|
echo "Login-Versuch: Username = $username, Passwort = $password"; // Debugging
|
|
if ($username === 'admin' && $password === 'sonne4000') {
|
|
$_SESSION['admin'] = true;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
public function handleImageUpload($file) {
|
|
if (!$this->isAdmin()) {
|
|
return false; // Nur Admins dürfen Bilder hochladen
|
|
}
|
|
|
|
// Überprüfen Sie, ob eine Datei hochgeladen wurde
|
|
if (!isset($file['tmp_name']) || empty($file['tmp_name'])) {
|
|
echo "Keine Datei hochgeladen.";
|
|
return false;
|
|
}
|
|
|
|
$target_dir = "uploads/";
|
|
if (!file_exists($target_dir)) {
|
|
mkdir($target_dir, 0777, true);
|
|
}
|
|
|
|
$target_file = $target_dir . basename($file["name"]);
|
|
$uploadOk = 1;
|
|
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
|
|
|
|
|
|
$check = @getimagesize($file["tmp_name"]);
|
|
if($check === false) {
|
|
echo "Die Datei ist kein Bild.";
|
|
return false;
|
|
}
|
|
|
|
|
|
if ($file["size"] > 5000000) { // 5MB Limit
|
|
echo "Die Datei ist zu groß.";
|
|
return false;
|
|
}
|
|
|
|
// Erlauben Sie nur bestimmte Dateiformate
|
|
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
|
|
&& $imageFileType != "gif" ) {
|
|
echo "Nur JPG, JPEG, PNG & GIF Dateien sind erlaubt.";
|
|
return false;
|
|
}
|
|
|
|
// Wenn alles in Ordnung ist, versuchen Sie, die Datei hochzuladen
|
|
if (move_uploaded_file($file["tmp_name"], $target_file)) {
|
|
echo "Die Datei ". basename( $file["name"]). " wurde hochgeladen.";
|
|
return true;
|
|
} else {
|
|
echo "Es gab einen Fehler beim Hochladen der Datei.";
|
|
return false;
|
|
}
|
|
}
|
|
|
|
|
|
public function displayLoginForm() {
|
|
return '
|
|
<form id="login-form" method="post">
|
|
<input type="hidden" name="admin-login" value="1">
|
|
<label for="username">Benutzername:</label>
|
|
<input type="text" id="username" name="username" required>
|
|
<label for="password">Passwort:</label>
|
|
<input type="password" id="password" name="password" required>
|
|
<button type="submit">Einloggen</button>
|
|
</form>';
|
|
}
|
|
|
|
public function displayAdminContent() {
|
|
$feedbacks = json_decode(file_get_contents('feedbacks.json') ?: '[]', true);
|
|
$output = '<h3>Admin-Bereich</h3><div id="message-list">';
|
|
foreach ($feedbacks as $feedback) {
|
|
$output .= "<div>";
|
|
$output .= "<h4>{$feedback['name']} ({$feedback['email']})</h4>";
|
|
$output .= "<p>{$feedback['message']}</p>";
|
|
$output .= "<small>{$feedback['date']}</small>";
|
|
$output .= "</div>";
|
|
}
|
|
$output .= '</div>';
|
|
|
|
$output .= '
|
|
<h3>Social Media Links verwalten</h3>
|
|
<form id="social-media-form" method="post">
|
|
<input type="hidden" name="update-social-media" value="1">
|
|
<select name="social-platform" required>
|
|
<option value="facebook">Facebook</option>
|
|
<option value="instagram">Instagram</option>
|
|
<option value="tiktok">TikTok</option>
|
|
</select>
|
|
<input type="url" name="social-url" placeholder="Profil URL" required>
|
|
<button type="submit">Aktualisieren</button>
|
|
</form>';
|
|
$output .= '
|
|
<h3>Bild hochladen</h3>
|
|
<form action="" method="post" enctype="multipart/form-data">
|
|
<input type="file" name="fileToUpload" id="fileToUpload">
|
|
<input type="submit" value="Bild hochladen" name="submit">
|
|
</form>';
|
|
return $output;
|
|
}
|
|
|
|
public function displayGalleryImages() {
|
|
$output = '';
|
|
$files = glob("uploads/*.*");
|
|
foreach($files as $file) {
|
|
$output .= '<img src="'.$file.'" style="width:200px; height:auto; margin:10px;">';
|
|
}
|
|
return $output;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public function handleSocialMediaUpdate($platform, $url) {
|
|
$socialLinks = json_decode(file_get_contents('social_links.json') ?: '{}', true);
|
|
$socialLinks[$platform] = $url;
|
|
file_put_contents('social_links.json', json_encode($socialLinks));
|
|
}
|
|
}
|
|
|
|
$webcamManager = new WebcamManager();
|
|
$guestbookManager = new GuestbookManager();
|
|
$contactManager = new ContactManager();
|
|
$adminManager = new AdminManager();
|
|
|
|
if (isset($_GET['action'])) {
|
|
switch ($_GET['action']) {
|
|
case 'snapshot':
|
|
$webcamManager->captureSnapshot();
|
|
break;
|
|
case 'sequence':
|
|
$webcamManager->captureVideoSequence();
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
if (isset($_POST['guestbook'])) {
|
|
$guestbookManager->handleFormSubmission();
|
|
} elseif (isset($_POST['contact'])) {
|
|
$contactManager->handleSubmission($_POST['name'], $_POST['email'], $_POST['message']);
|
|
} elseif (isset($_POST['admin-login'])) {
|
|
$adminManager->handleLogin($_POST['username'], $_POST['password']);
|
|
} elseif (isset($_POST['update-social-media'])) {
|
|
$adminManager->handleSocialMediaUpdate($_POST['social-platform'], $_POST['social-url']);
|
|
} elseif (isset($_FILES["fileToUpload"]) && $adminManager->isAdmin()) {
|
|
$adminManager->handleImageUpload($_FILES["fileToUpload"]);
|
|
}}
|
|
?>
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<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>
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
background-image: url('main.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
header {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
padding: 10px 0;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
|
|
|
|
#webcam-player {
|
|
max-width: 100%;
|
|
height: auto;
|
|
max-height: 70vh; /* Begrenzt die Höhe auf 70% der Bildschirmhöhe */
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.video-container {
|
|
position: relative;
|
|
padding-bottom: 56.25%; /* 16:9 Seitenverhältnis */
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-container #webcam-player {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.logo img {
|
|
height: 50px;
|
|
}
|
|
nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
}
|
|
nav ul li {
|
|
margin: 5px 10px;
|
|
}
|
|
nav ul li a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
.section {
|
|
padding: 80px 0;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
#qrcode {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
#qrcode img {
|
|
border: 10px solid white;
|
|
}
|
|
|
|
|
|
.section h2 {
|
|
font-size: 36px;
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
form {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
input, textarea, button[type="submit"] {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
button[type="submit"] {
|
|
background-color: #ff5e3a;
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
button[type="submit"]:hover {
|
|
background-color: #ff3b1a;
|
|
}
|
|
footer {
|
|
background-color: rgba(51, 51, 51, 0.8);
|
|
color: #fff;
|
|
padding: 40px 0;
|
|
text-align: center;
|
|
}
|
|
.footer-links a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
margin: 0 10px;
|
|
}
|
|
#guestbook-entries {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.guestbook-entry {
|
|
border-bottom: 1px solid #ddd;
|
|
padding: 10px 0;
|
|
}
|
|
#social-media-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#social-media-links a {
|
|
margin: 0 10px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 0 10px;
|
|
}
|
|
.section {
|
|
padding: 40px 0;
|
|
}
|
|
nav ul {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
nav ul li {
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
|
|
<div class="logo">
|
|
<img src="logo.png" alt="Aurora Wetter Livecam">
|
|
</div>
|
|
|
|
|
|
<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>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<section id="webcams" class="section">
|
|
<div class="container">
|
|
<h2>Unsere Webcam</h2>
|
|
<div class="video-container">
|
|
<?php echo $webcamManager->displayWebcam(); ?>
|
|
</div>
|
|
<div class="webcam-controls">
|
|
<a href="?action=snapshot" class="button">Snapshot herunterladen</a>
|
|
<a href="?action=sequence" class="button">Video-Sequenz herunterladen</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section id="qr-code" class="section">
|
|
<div class="container">
|
|
<h2>Folge uns, kopiere den Code und sende es deinen Freunden in Tiktok,Facebook, Instagram usw </h2>
|
|
<div id="qrcode"></div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section id="guestbook" class="section">
|
|
<div class="container">
|
|
<h2>Gästebuch</h2>
|
|
<?php
|
|
echo $guestbookManager->displayForm();
|
|
echo $guestbookManager->displayEntries();
|
|
?>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="kontakt" class="section">
|
|
<div class="container">
|
|
<h2>Kontakt</h2>
|
|
<?php echo $contactManager->displayForm(); ?>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="gallery" class="section">
|
|
<div class="container">
|
|
<h2>Bildergalerie</h2>
|
|
<div id="gallery-images">
|
|
<?php echo $adminManager->displayGalleryImages(); ?>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php if ($adminManager->isAdmin()): ?>
|
|
<section id="admin" class="section">
|
|
<div class="container">
|
|
<h2>Admin-Bereich</h2>
|
|
<?php echo $adminManager->displayAdminContent(); ?>
|
|
</div>
|
|
</section>
|
|
<?php else: ?>
|
|
<section id="admin-login" class="section">
|
|
<div class="container">
|
|
<h2>Admin Login</h2>
|
|
<?php echo $adminManager->displayLoginForm(); ?>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-links">
|
|
<a href="#webcams">Webcam</a>
|
|
<a href="#guestbook">Gästebuch</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
<a href="#gallery">Galerie</a>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2024 Aurora Wetter Lifecam</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
|
|
<script src="https://www.youtube.com/iframe_api"></script>
|
|
<script>
|
|
// Webcam-Player-Logik
|
|
<?php echo $webcamManager->getJavaScript(); ?>
|
|
|
|
// Social Media Manager
|
|
function updateSocialMediaLinks() {
|
|
fetch('social_links.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const socialLinksContainer = document.getElementById('social-media-links');
|
|
socialLinksContainer.innerHTML = '';
|
|
for (const [platform, url] of Object.entries(data)) {
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.target = '_blank';
|
|
link.textContent = platform.charAt(0).toUpperCase() + platform.slice(1);
|
|
socialLinksContainer.appendChild(link);
|
|
}
|
|
})
|
|
.catch(error => console.error('Error loading social media links:', error));
|
|
}
|
|
|
|
// YouTube Audio Player
|
|
var player;
|
|
function onYouTubeIframeAPIReady() {
|
|
player = new YT.Player('audioPlayer', {
|
|
height: '0',
|
|
width: '0',
|
|
videoId: 'WtToep39d2g',
|
|
playerVars: {
|
|
'autoplay': 1,
|
|
'controls': 0,
|
|
'showinfo': 0,
|
|
'modestbranding': 1,
|
|
'loop': 1,
|
|
'playlist': 'WtToep39d2g',
|
|
'fs': 0,
|
|
'cc_load_policy': 0,
|
|
'iv_load_policy': 3,
|
|
'autohide': 0
|
|
},
|
|
events: {
|
|
'onReady': onPlayerReady
|
|
}
|
|
});
|
|
}
|
|
|
|
// QR-Code Generator
|
|
function generateQRCode() {
|
|
var qr = qrcode(0, 'M');
|
|
qr.addData(window.location.href);
|
|
qr.make();
|
|
document.getElementById('qrcode').innerHTML = qr.createImgTag(5);
|
|
}
|
|
|
|
|
|
function onPlayerReady(event) {
|
|
event.target.playVideo();
|
|
document.getElementById('playButton').addEventListener('click', function() {
|
|
player.playVideo();
|
|
});
|
|
document.getElementById('pauseButton').addEventListener('click', function() {
|
|
player.pauseVideo();
|
|
});
|
|
}
|
|
|
|
// Initialisierung
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateSocialMediaLinks();
|
|
generateQRCode();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|