<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Advanced Media Player</title>
<link rel=manifest href=manifest.json>
<meta name=theme-color content=#2196F3>
<link rel=apple-touch-icon href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'%3E%3Ccircle cx='96' cy='96' r='88' fill='%232196F3'/%3E%3Cpath d='M80 60v72l48-36z' fill='white'/%3E%3C/svg%3E">
<style>:root{--primary-color:#2196F3;--secondary-color:#1976D2;--background-color:#f0f0f0;--text-color:#333}body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:20px;background-color:var(--background-color);color:var(--text-color)}.container{max-width:800px;margin:0 auto;background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.controls{margin:15px 0;display:flex;gap:10px;flex-wrap:wrap}button{padding:10px 20px;border:none;border-radius:6px;background:var(--primary-color);color:#fff;cursor:pointer;transition:background .3s ease;font-weight:500;display:flex;align-items:center;gap:8px}button:hover{background:var(--secondary-color)}.media-player{width:100%;max-width:100%;margin:15px 0;background:#000;border-radius:8px;overflow:hidden;min-height:300px}video{width:100%;height:100%;background:#000}.settings{display:flex;gap:20px;margin:15px 0;flex-wrap:wrap}.settings>div{display:flex;align-items:center;gap:10px}input[type=range],select{padding:5px;border-radius:4px;border:1px solid #ddd}.playlist{margin-top:20px;border-top:1px solid #eee;padding-top:20px}.playlist-item{padding:10px;margin:5px 0;background:#f8f8f8;border-radius:4px;cursor:pointer}.playlist-item:hover{background:#eee}.material-icons{font-family:'Material Icons';font-size:24px}@media (max-width:600px){.container{padding:15px}.controls{flex-direction:column}button{width:100%}}</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel=stylesheet>
</head>
<body>
<div class=container>
<h1>Advanced Media Player</h1>
<div class=controls>
<button id=openFile>
<span class=material-icons>folder_open</span>
Open File(s)
</button>
<button id=fullscreen>
<span class=material-icons>fullscreen</span>
Fullscreen
</button>
<button id=rotate>
<span class=material-icons>rotate_right</span>
Rotate
</button>
</div>
<div id=player class=media-player>
<video id=videoPlayer controls>
Your browser doesn't support video playback.
</video>
</div>
<div class=settings>
<div>
<label for=playbackSpeed>Playback Speed:</label>
<select id=playbackSpeed>
<option value=0.5>0.5x</option>
<option value=1 selected>1x</option>
<option value=1.5>1.5x</option>
<option value=2>2x</option>
</select>
</div>
<div>
<label for=volume>Volume:</label>
<input type=range id=volume min=0 max=100 value=100>
<span id=volumeValue>100%</span>
</div>
</div>
<div id=fileInfo>No file selected</div>
<div class=supported-formats>
<p><strong>Supported formats:</strong></p>
<p>Video: MP4, WebM, MKV, AVI, MOV, FLV</p>
<p>Audio: MP3, WAV, OGG, AAC, FLAC</p>
</div>
<div class=playlist id=playlist>
<h2>Playlist</h2>
</div>
</div>
<script>"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("/sw.js").then((e=>{console.log("ServiceWorker registered:",e)})).catch((e=>{console.log("ServiceWorker registration failed:",e)}))})),document.addEventListener("DOMContentLoaded",(()=>{const e=document.getElementById("videoPlayer"),t=document.getElementById("openFile"),n=document.getElementById("fullscreen"),o=document.getElementById("rotate"),l=document.getElementById("playbackSpeed"),c=document.getElementById("volume"),r=document.getElementById("volumeValue"),d=document.getElementById("fileInfo"),a=document.getElementById("playlist");let i=0;function s(t){const n=URL.createObjectURL(t);e.src=n,e.play(),d.textContent=`Playing: ${t.name}`}t.addEventListener("click",(()=>{const e=document.createElement("input");e.type="file",e.accept="video/*,audio/*",e.multiple=!0,e.click(),e.onchange=e=>{const t=Array.from(e.target.files);t.length>0&&(s(t[0]),function(e){a.innerHTML="<h2>Playlist</h2>",e.forEach(((e,t)=>{const n=document.createElement("div");n.className="playlist-item",n.textContent=e.name,n.onclick=()=>s(e),a.appendChild(n)}))}(t))}})),n.addEventListener("click",(()=>{document.fullscreenElement?document.exitFullscreen():e.requestFullscreen()})),o.addEventListener("click",(()=>{i=(i+90)%360,e.style.transform=`rotate(${i}deg)`})),l.addEventListener("change",(t=>{e.playbackRate=parseFloat(t.target.value)})),c.addEventListener("input",(t=>{const n=t.target.value;e.volume=n/100,r.textContent=`${n}%`})),e.addEventListener("error",(()=>{d.textContent="Error: Could not load media file"}))}))</script>
</body>
</html>