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

Update index.html

Browse Source 
iphone like
This commit is contained in:
metacube2
2024-06-28 11:20:22 +02:00
committed by GitHub
parent e0473550c7
commit fe4abc7f80
1 changed files with 136 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+132 -37
View File
@@ -200,20 +200,59 @@
/* Responsive Styles */ /* Responsive Styles */
@media (max-width: 768px) { @media (max-width: 768px) {
.container {
padding: 0 10px;
text-align: center;
}
.section {
padding: 40px 0;
}
.hero-section {
height: auto;
padding: 60px 0;
}
.hero-content h1 { .hero-content h1 {
font-size: 36px; font-size: 32px;
} }
.hero-content p { .hero-content p {
font-size: 18px; font-size: 18px;
} }
.cta-button {
display: inline-block;
margin-top: 20px;
}
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px 0;
}
.webcam-item video {
max-width: 100%;
height: auto;
}
.section h2 { .section h2 {
font-size: 28px; font-size: 28px;
} }
.webcam-item { form {
width: 100%; width: 100%;
max-width: 400px;
margin: 0 auto;
}
input, textarea {
font-size: 16px; /* Verhindert Zoom auf iOS */
} }
} }
@@ -226,13 +265,14 @@
font-size: 16px; font-size: 16px;
} }
.cta-button { .section h2 {
font-size: 16px; font-size: 24px;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Der Rest des Body-Bereichs bleibt unverändert -->
<header> <header>
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
@@ -339,6 +379,7 @@
</footer> </footer>
<script> <script>
// Der gesamte JavaScript-Code bleibt unverändert
// HLS Player Initialisierung // HLS Player Initialisierung
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var video = document.getElementById('webcam-player'); var video = document.getElementById('webcam-player');
@@ -419,23 +460,15 @@
} }
// Admin-Link zum Footer hinzufügen // Admin-Link zum Footer hinzufügen
var footerLinks = document.querySelector('.footer-links'); var footerLinks = document.querySelector('.footer-links');
var adminLink = document.createElement('a'); var adminLink = document.createElement('a');
adminLink.href = '#admin-login'; adminLink.href = '#admin-login';
adminLink.textContent = 'Admin'; adminLink.textContent = 'Admin';
adminLink.addEventListener('click', function(e) { adminLink.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
document.getElementById('admin-login').style.display = 'block'; document.getElementById('admin-login').style.display = 'block';
}); });
footerLinks.appendChild(adminLink); footerLinks.appendChild(adminLink);
// Encoder-Steuerung // Encoder-Steuerung
function startEncoder() { function startEncoder() {
@@ -446,8 +479,15 @@ function startEncoder() {
}, },
body: 'action=start' body: 'action=start'
}) })
.then(response => response.json()) .then(response => response.text())
.then(data => console.log('Encoder started:', data)); .then(data => {
console.log('Encoder gestartet:', data);
alert('Encoder wurde gestartet.');
})
.catch((error) => {
console.error('Fehler beim Starten des Encoders:', error);
alert('Fehler beim Starten des Encoders.');
});
} }
function stopEncoder() { function stopEncoder() {
@@ -458,32 +498,87 @@ function stopEncoder() {
}, },
body: 'action=stop' body: 'action=stop'
}) })
.then(response => response.json()) .then(response => response.text())
.then(data => console.log('Encoder stopped:', data)); .then(data => {
console.log('Encoder gestoppt:', data);
alert('Encoder wurde gestoppt.');
})
.catch((error) => {
console.error('Fehler beim Stoppen des Encoders:', error);
alert('Fehler beim Stoppen des Encoders.');
});
} }
// Starten Sie den Encoder, wenn die Seite geladen wird // Event-Listener für Start- und Stop-Buttons
document.addEventListener('DOMContentLoaded', startEncoder); document.getElementById('start-encoder').addEventListener('click', startEncoder);
document.getElementById('stop-encoder').addEventListener('click', stopEncoder);
// Stoppen Sie den Encoder, wenn der Benutzer die Seite verlässt // Smooth Scrolling für Navigation-Links
window.addEventListener('beforeunload', stopEncoder); document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// Heartbeat, um zu prüfen, ob der Benutzer noch aktiv ist document.querySelector(this.getAttribute('href')).scrollIntoView({
setInterval(() => { behavior: 'smooth'
fetch('stream_control.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'action=start'
}); });
}, 60000); // Alle 60 Sekunden });
});
// Lazy Loading für Bilder
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback für Browser ohne Intersection Observer
let active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
}
});
</script> </script>
</body> </body>
</html> </html>