|
|
| Line 1: |
Line 1: |
| <!DOCTYPE html> | | <div id="dvd-logo" class="mw-parser-output"> |
| <html lang="en">
| | <a href="#" title="click">DVD</a> |
| <head>
| | </div> |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>DVD Audio Player - Wikimedia Style</title>
| |
| <style>
| |
| body {
| |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
| |
| line-height: 1.6;
| |
| margin: 0;
| |
| padding: 0;
| |
| background-color: #f8f9fa;
| |
| color: #202122;
| |
| }
| |
| .container {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| padding: 20px;
| |
| }
| |
| header {
| |
| background-color: #eaecf0;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| padding: 20px 0;
| |
| }
| |
| h1 {
| |
| font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| font-size: 28px;
| |
| font-weight: normal;
| |
| margin: 0 0 20px 0;
| |
| padding-bottom: 10px;
| |
| }
| |
| .dvd-player {
| |
| background-color: #333;
| |
| border-radius: 10px;
| |
| padding: 20px;
| |
| margin-bottom: 20px;
| |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1);
| |
| }
| |
| .screen {
| |
| background-color: #000;
| |
| height: 300px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| color: #fff;
| |
| font-size: 24px;
| |
| margin-bottom: 20px;
| |
| position: relative;
| |
| overflow: hidden;
| |
| }
| |
| .dvd-logo {
| |
| position: absolute;
| |
| width: 100px;
| |
| height: 50px;
| |
| background-color: #fff;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-weight: bold;
| |
| font-size: 18px;
| |
| color: #000;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
| .controls {
| |
| display: flex;
| |
| justify-content: center;
| |
| gap: 10px;
| |
| }
| |
| button {
| |
| background-color: #36c;
| |
| color: #fff;
| |
| border: none;
| |
| padding: 10px 20px;
| |
| border-radius: 5px;
| |
| cursor: pointer;
| |
| font-size: 16px;
| |
| }
| |
| button:hover {
| |
| background-color: #447ff5;
| |
| }
| |
| .audio-player {
| |
| margin-top: 20px;
| |
| }
| |
| audio {
| |
| width: 100%;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <header>
| |
| <div class="container">
| |
| <h1>DVD Audio Player</h1>
| |
| </div>
| |
| </header>
| |
| <main class="container">
| |
| <div class="dvd-player">
| |
| <div class="screen" id="dvd-screen">
| |
| <div class="dvd-logo" id="dvd-logo">DVD</div>
| |
| </div>
| |
| <div class="controls">
| |
| <button id="play-pause">Play/Pause</button>
| |
| <button id="stop">Stop</button>
| |
| </div>
| |
| </div>
| |
| <div class="audio-player">
| |
| <audio id="main-audio" controls>
| |
| <source src="/api/placeholder/audio/main" type="audio/mpeg">
| |
| Your browser does not support the audio element.
| |
| </audio>
| |
| </div>
| |
| <audio id="logo-audio">
| |
| <source src="/api/placeholder/audio/logo" type="audio/mpeg">
| |
| Your browser does not support the audio element.
| |
| </audio>
| |
| </main>
| |
| | |
| <script>
| |
| const dvdLogo = document.getElementById('dvd-logo');
| |
| const screen = document.getElementById('dvd-screen');
| |
| const playPauseBtn = document.getElementById('play-pause');
| |
| const stopBtn = document.getElementById('stop');
| |
| const mainAudio = document.getElementById('main-audio');
| |
| const logoAudio = document.getElementById('{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/f/f2/WanChaiStation.mp3
| |
| |style=width:100%}}');
| |
| | |
| let x = 0;
| |
| let y = 0;
| |
| let xSpeed = 2;
| |
| let ySpeed = 2;
| |
| | |
| function moveLogo() {
| |
| x += xSpeed;
| |
| y += ySpeed;
| |
| | |
| if (x + dvdLogo.offsetWidth > screen.offsetWidth || x < 0) {
| |
| xSpeed = -xSpeed;
| |
| changeLogoColor();
| |
| }
| |
| if (y + dvdLogo.offsetHeight > screen.offsetHeight || y < 0) {
| |
| ySpeed = -ySpeed;
| |
| changeLogoColor();
| |
| }
| |
| | |
| dvdLogo.style.left = x + 'px';
| |
| dvdLogo.style.top = y + 'px';
| |
| | |
| requestAnimationFrame(moveLogo);
| |
| }
| |
| | |
| function changeLogoColor() {
| |
| const randomColor = Math.floor(Math.random()*16777215).toString(16);
| |
| dvdLogo.style.backgroundColor = "#" + randomColor;
| |
| }
| |
| | |
| playPauseBtn.addEventListener('click', () => {
| |
| if (mainAudio.paused) {
| |
| mainAudio.play();
| |
| } else {
| |
| mainAudio.pause();
| |
| }
| |
| });
| |
| | |
| stopBtn.addEventListener('click', () => {
| |
| mainAudio.pause();
| |
| mainAudio.currentTime = 0;
| |
| });
| |
| | |
| dvdLogo.addEventListener('click', () => {
| |
| logoAudio.currentTime = 0; // Reset audio to start
| |
| logoAudio.play();
| |
| });
| |
| | |
| moveLogo();
| |
| </script>
| |
| </body>
| |
| </html>
| |
