34 lines
2.1 KiB
HTML
34 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Media Flow - Demo</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: system-ui, sans-serif; background: #0f172a; color: #f1f5f9; min-height: 100vh; padding: 20px; }
|
|
.container { max-width: 1200px; margin: 0 auto; }
|
|
.header { background: linear-gradient(135deg, #dc2626, #ef4444); padding: 32px; border-radius: 16px; margin-bottom: 24px; }
|
|
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
|
.service { background: #1e293b; padding: 20px; border-radius: 12px; text-align: center; border-top: 4px solid; }
|
|
.service-icon { font-size: 40px; margin-bottom: 12px; }
|
|
.service-name { font-weight: 600; font-size: 18px; }
|
|
.service-bw { margin-top: 12px; font-weight: 700; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1 style="font-size: 32px; margin-bottom: 8px;">🎬 Media Flow</h1>
|
|
<p style="opacity: 0.9;">Real-time Streaming & Media Detection</p>
|
|
</div>
|
|
<div class="services">
|
|
<div class="service" style="border-color: #e50914;"><div class="service-icon">📺</div><div class="service-name">Netflix</div><div class="service-bw" style="color: #e50914;">45.2 MB/s</div></div>
|
|
<div class="service" style="border-color: #ff0000;"><div class="service-icon">▶️</div><div class="service-name">YouTube</div><div class="service-bw" style="color: #ff0000;">23.8 MB/s</div></div>
|
|
<div class="service" style="border-color: #1db954;"><div class="service-icon">🎵</div><div class="service-name">Spotify</div><div class="service-bw" style="color: #1db954;">1.2 MB/s</div></div>
|
|
<div class="service" style="border-color: #2d8cff;"><div class="service-icon">📹</div><div class="service-name">Zoom</div><div class="service-bw" style="color: #2d8cff;">3.4 MB/s</div></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|