104 lines
3.8 KiB
HTML
104 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MercyV - Loading</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Pacifico&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- Clock (oben links) -->
|
|
<div class="clock" id="clock">00:00</div>
|
|
|
|
<!-- Background Video -->
|
|
<div class="video-background">
|
|
<video id="bg-video" autoplay muted loop playsinline>
|
|
<source src="assets/background.mp4" type="video/mp4">
|
|
</video>
|
|
<div class="video-overlay"></div>
|
|
<canvas id="particles" class="particle-canvas"></canvas>
|
|
</div>
|
|
|
|
<!-- Main Container -->
|
|
<div class="container">
|
|
<!-- Ambient Glow -->
|
|
<div class="ambient-glow"></div>
|
|
|
|
<!-- Logo -->
|
|
<div class="logo">
|
|
<img src="assets/logo.png" alt="MercyV">
|
|
</div>
|
|
|
|
<!-- Loading Section -->
|
|
<div class="loading-section">
|
|
<div class="loading-info">
|
|
<span class="loading-text">Laden...</span>
|
|
<span class="loading-percent">0%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<p class="loading-status" id="loading-status">Verbinde mit Server...</p>
|
|
<p class="player-status"><span class="pulse-dot"></span> <span class="player-count">0/128 Spieler Online</span></p>
|
|
</div>
|
|
|
|
<!-- Social Buttons -->
|
|
<div class="social-buttons">
|
|
<a href="https://discord.gg/mercyv" target="_blank" class="btn btn-discord" onclick="openUrl('https://discord.gg/mercyv'); return false;">
|
|
<i class="fab fa-discord"></i>
|
|
<span>Discord</span>
|
|
</a>
|
|
<a href="https://mercyv.de" target="_blank" class="btn btn-website" onclick="openUrl('https://mercyv.de'); return false;">
|
|
<i class="fas fa-globe"></i>
|
|
<span>Website</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Changelog (links mittig) -->
|
|
<div class="changelog-panel">
|
|
<span class="changelog-badge">NEU</span>
|
|
<span class="changelog-text">Neues Fahrzeugsystem & Tuning-Update</span>
|
|
</div>
|
|
|
|
<!-- Music Player -->
|
|
<div class="music-player">
|
|
<div class="music-info">
|
|
<div class="audio-visualizer">
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
</div>
|
|
<span id="track-name">Modjo - Lady (Hear Me Tonight)</span>
|
|
</div>
|
|
<div class="music-controls">
|
|
<button class="music-btn" id="prev-btn">
|
|
<i class="fas fa-backward"></i>
|
|
</button>
|
|
<button class="music-btn play-btn" id="play-btn">
|
|
<i class="fas fa-play" id="play-icon"></i>
|
|
</button>
|
|
<button class="music-btn" id="next-btn">
|
|
<i class="fas fa-forward"></i>
|
|
</button>
|
|
<div class="volume-control">
|
|
<button class="music-btn" id="volume-btn">
|
|
<i class="fas fa-volume-up" id="volume-icon"></i>
|
|
</button>
|
|
<input type="range" min="0" max="100" value="50" class="volume-slider" id="volume-slider">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Element -->
|
|
<audio id="background-music" src="assets/music.mp3" autoplay="true" loop="true"></audio>
|
|
|
|
<script src="config.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|