Revision as of 21:27, 16 September 2024

<!DOCTYPE html> <html lang="en"> <head>

   <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>

DVD Audio Player

   </header>
   <main class="container">

DVD

               <button id="play-pause">Play/Pause</button>
               <button id="stop">Stop</button>

           <audio id="main-audio" controls>
               <source src="/api/placeholder/audio/main" type="audio/mpeg">
               Your browser does not support the audio element.
           </audio>

       <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('

');

       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>