480 lines
13 KiB
HTML
480 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Über NinjaCross Timer</title>
|
|
<style>
|
|
html {
|
|
overflow-x: hidden;
|
|
min-height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "Arial", sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
color: white;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.back-btn {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border-radius: 25px;
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 3vh;
|
|
margin-top: 4vh;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
margin-bottom: 1vh;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.header p {
|
|
font-size: clamp(1rem, 2vw, 1.3rem);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.content-container {
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
padding: 0 2vw;
|
|
}
|
|
|
|
.content-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 20px;
|
|
padding: clamp(20px, 3vh, 30px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.content-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.content-card h2 {
|
|
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
|
|
margin-bottom: 1rem;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.content-card h3 {
|
|
font-size: clamp(1.1rem, 2vw, 1.4rem);
|
|
margin: 1.5rem 0 0.8rem 0;
|
|
color: #ffc107;
|
|
}
|
|
|
|
.content-card p {
|
|
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
|
|
line-height: 1.6;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.content-card ul {
|
|
margin: 1rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.content-card li {
|
|
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
|
|
line-height: 1.6;
|
|
margin-bottom: 0.5rem;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.feature-item {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 1.5rem;
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.feature-item h4 {
|
|
font-size: clamp(1rem, 2vw, 1.2rem);
|
|
margin-bottom: 0.8rem;
|
|
color: #3498db;
|
|
}
|
|
|
|
.feature-item p {
|
|
font-size: clamp(0.85rem, 1.6vw, 1rem);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.stat-item {
|
|
background: rgba(46, 204, 113, 0.2);
|
|
border: 2px solid #2ecc71;
|
|
padding: 1.5rem;
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: clamp(1.8rem, 3vw, 2.5rem);
|
|
font-weight: bold;
|
|
color: #2ecc71;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: clamp(0.8rem, 1.5vw, 1rem);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.team-section {
|
|
text-align: center;
|
|
}
|
|
|
|
.team-member {
|
|
background: rgba(155, 89, 182, 0.2);
|
|
border: 2px solid #9b59b6;
|
|
padding: 1.5rem;
|
|
border-radius: 15px;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.team-member h4 {
|
|
font-size: clamp(1.1rem, 2vw, 1.4rem);
|
|
color: #9b59b6;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.team-member p {
|
|
font-size: clamp(0.9rem, 1.6vw, 1rem);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.cta-section {
|
|
background: rgba(52, 152, 219, 0.2);
|
|
border: 2px solid #3498db;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
animation: shine 3s infinite;
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
|
50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
|
|
100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
|
|
}
|
|
|
|
.cta-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cta-btn {
|
|
display: inline-block;
|
|
background: #3498db;
|
|
color: white;
|
|
padding: 12px 30px;
|
|
border-radius: 25px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
transition: all 0.3s ease;
|
|
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
|
|
}
|
|
|
|
.cta-btn:hover {
|
|
background: #2980b9;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
.back-btn {
|
|
top: 10px;
|
|
right: 10px;
|
|
padding: 8px 15px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.content-container {
|
|
padding: 0 3vw;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.feature-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.logo {
|
|
width: 35px;
|
|
height: 35px;
|
|
top: 8px;
|
|
left: 8px;
|
|
}
|
|
|
|
.back-btn {
|
|
top: 8px;
|
|
right: 8px;
|
|
padding: 6px 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.content-container {
|
|
padding: 0 2vw;
|
|
}
|
|
|
|
body {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<a href="/" class="back-btn">
|
|
← Zurück zum Timer
|
|
</a>
|
|
|
|
<div class="header">
|
|
<h1>🏊♀️ Über NinjaCross Timer</h1>
|
|
<p>Der professionelle Zeitmesser für Ninjacross Wettkämpfe</p>
|
|
</div>
|
|
|
|
<div class="content-container">
|
|
<div class="content-card">
|
|
<h2>🎯 Was ist NinjaCross?</h2>
|
|
<p>
|
|
NinjaCross ist ein aufregender Wassersport, der Geschwindigkeit, Technik und Athletik kombiniert.
|
|
Teilnehmer durchqueren Schwimmbahnen mit verschiedenen Hindernissen und Herausforderungen,
|
|
wobei Zeit und Präzision entscheidend sind.
|
|
</p>
|
|
<p>
|
|
Unser Timer-System wurde speziell entwickelt, um professionelle Wettkämpfe zu unterstützen
|
|
und präzise Zeitmessungen für bis zu zwei Bahnen gleichzeitig zu ermöglichen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<h2>⚡ Funktionen</h2>
|
|
<div class="feature-grid">
|
|
<div class="feature-item">
|
|
<h4>🎲 Dual-Timer</h4>
|
|
<p>Gleichzeitige Zeitmessung für zwei Bahnen mit präziser Synchronisation</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>📱 Responsive Design</h4>
|
|
<p>Optimiert für alle Geräte - Desktop, Tablet und Smartphone</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>🏆 Bestzeiten</h4>
|
|
<p>Automatische Verfolgung und Anzeige der besten Tageszeiten</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>📚 Lernmodus</h4>
|
|
<p>Interaktiver Modus für Training und Schulungszwecke</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>⚙️ Einfache Bedienung</h4>
|
|
<p>Intuitive Benutzeroberfläche für schnelle und fehlerfreie Bedienung</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>🔄 Live-Sync</h4>
|
|
<p>Echtzeitaktualisierung aller Timer-Daten über Backend-Integration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<h2>📊 Technische Spezifikationen</h2>
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<span class="stat-number">0.01s</span>
|
|
<span class="stat-label">Präzision</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">2</span>
|
|
<span class="stat-label">Bahnen</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">50ms</span>
|
|
<span class="stat-label">Update-Rate</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">100%</span>
|
|
<span class="stat-label">Responsive</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>🔧 Technologie-Stack</h3>
|
|
<ul>
|
|
<li><strong>Frontend:</strong> HTML5, CSS3, Vanilla JavaScript</li>
|
|
<li><strong>Design:</strong> Responsive Grid Layout, Glassmorphism</li>
|
|
<li><strong>Performance:</strong> Optimierte Render-Zyklen, Smooth Animations</li>
|
|
<li><strong>Kompatibilität:</strong> Alle modernen Browser, Mobile-First</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="content-card team-section">
|
|
<h2>👥 Entwicklung</h2>
|
|
<div class="team-member">
|
|
<h4>🚀 Entwickelt mit ❤️ von Carsten Graf</h4>
|
|
<p>
|
|
Dieses Projekt wurde mit Leidenschaft für den NinjaCross-Sport entwickelt,
|
|
um Wettkämpfe professioneller und spannender zu gestalten.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card">
|
|
<h2>🎮 Bedienung</h2>
|
|
<h3>Grundfunktionen</h3>
|
|
<ul>
|
|
<li><strong>Timer starten:</strong> Automatische Synchronisation mit Backend-System</li>
|
|
<li><strong>Live-Anzeige:</strong> Echtzeitaktualisierung aller Zeiten und Status</li>
|
|
<li><strong>Bestzeiten:</strong> Automatische Speicherung der Tagesrekorde</li>
|
|
<li><strong>Lernmodus:</strong> Interaktive Anweisungen für neue Benutzer</li>
|
|
</ul>
|
|
|
|
<h3>Status-Anzeigen</h3>
|
|
<ul>
|
|
<li><strong>Bereit (Blau):</strong> Timer ist startbereit</li>
|
|
<li><strong>Läuft (Grün):</strong> Aktive Zeitmessung mit Pulsation</li>
|
|
<li><strong>Beendet (Rot):</strong> Zeitmessung abgeschlossen</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="content-card cta-section">
|
|
<div class="cta-content">
|
|
<h2>🏁 Bereit für den Wettkampf?</h2>
|
|
<p>
|
|
Starten Sie jetzt mit dem professionellen NinjaCross Timer
|
|
und erleben Sie präzise Zeitmessung auf höchstem Niveau!
|
|
</p>
|
|
<a href="/" class="cta-btn">Timer starten 🚀</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Smooth scroll animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Initialize animations
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const cards = document.querySelectorAll('.content-card');
|
|
cards.forEach(card => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(30px)';
|
|
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
|
observer.observe(card);
|
|
});
|
|
});
|
|
|
|
// Add click effects
|
|
document.querySelectorAll('.content-card').forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
this.style.transform = 'translateY(-5px) scale(1.02)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'translateY(-5px) scale(1)';
|
|
}, 150);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |