feat: complete UI redesign with DaisyUI + Tailwind CSS v4
Design system overhaul using DaisyUI v5 on Tailwind CSS v4: - Custom 'ohmstream' dark theme with orange primary (#FF9F1C), magenta secondary, gold accent matching existing palette - Tailwind CSS-first config (input.css source, style.css built output) - DaisyUI components: navbar, drawer, cards, badges, alerts, tables, progress bars, tabs, toggles, stats, form controls, tooltips - Mobile-first responsive layout with drawer navigation - Eliminated ~500+ lines of embedded CSS across 15+ template files - Removed all inline style spam from admin_panel and settings_section - Preserved all HTMX triggers, Alpine.js state, and Jinja2 logic - Updated auth-ui.js for DaisyUI tab-active class compatibility Build: npm run build:css (minified) / npm run watch:css (dev)
This commit is contained in:
root
+42
-149
@@ -1,157 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<html lang="fr" data-theme="ohmstream">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ filename }} - Ohm Stream Player</title>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: #15171A;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
color: #F2F2F2;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 10px;
|
||||
color: #FFBF69;
|
||||
}
|
||||
|
||||
.video-info {
|
||||
background: #202327;
|
||||
padding: 15px 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #2a2d32;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.video-info .filename {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.video-info .filesize {
|
||||
color: #8a8f98;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plyr {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
background: #202327;
|
||||
border: 1px solid #2a2d32;
|
||||
color: #F2F2F2;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #2a2d32;
|
||||
border-color: #FFBF69;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #FF9F1C;
|
||||
border: 1px solid #FF9F1C;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #e08a15;
|
||||
border-color: #e08a15;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(230, 57, 70, 0.1);
|
||||
border: 1px solid #e63946;
|
||||
color: #e63946;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.video-info { flex-direction: column; align-items: flex-start; }
|
||||
.controls { flex-direction: column; }
|
||||
.btn { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1><i class="fa-solid fa-film"></i> Ohm Stream Player</h1>
|
||||
</div>
|
||||
<div class="min-h-screen bg-base-100 p-4 md:p-8">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-6">
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-primary">
|
||||
<i class="fa-solid fa-film"></i> Ohm Stream Player
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="video-info">
|
||||
<span class="filename">{{ filename }}</span>
|
||||
<span class="filesize">{{ "%.2f"|format(file_size / 1024 / 1024) }} MB</span>
|
||||
</div>
|
||||
<!-- Video Info Bar -->
|
||||
<div class="flex justify-between items-center bg-base-200 rounded-box border border-base-300 p-4 mb-4 flex-wrap gap-2">
|
||||
<span class="font-medium text-base-content">{{ filename }}</span>
|
||||
<span class="badge badge-ghost">{{ "%.2f"|format(file_size / 1024 / 1024) }} MB</span>
|
||||
</div>
|
||||
|
||||
<div class="video-wrapper">
|
||||
<video id="player" playsinline controls preload="metadata">
|
||||
<source src="/stream/{{ filename }}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!-- Video Wrapper -->
|
||||
<div class="bg-black rounded-box overflow-hidden">
|
||||
<video id="player" playsinline controls preload="metadata">
|
||||
<source src="/stream/{{ filename }}" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<a href="/web" class="btn">← Retour à l'accueil</a>
|
||||
<a href="/stream/{{ filename }}" class="btn btn-primary" download><i class="fa-solid fa-download"></i> Télécharger</a>
|
||||
<!-- Controls -->
|
||||
<div class="flex justify-center gap-3 mt-4 flex-wrap">
|
||||
<a href="/web" class="btn btn-ghost">
|
||||
<i class="fa-solid fa-arrow-left"></i> Retour
|
||||
</a>
|
||||
<a href="/stream/{{ filename }}" class="btn btn-primary" download>
|
||||
<i class="fa-solid fa-download"></i> Télécharger
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -165,12 +53,17 @@
|
||||
// Error handling
|
||||
player.on('error', (error) => {
|
||||
console.error('Plyr error:', error);
|
||||
const wrapper = document.querySelector('.video-wrapper');
|
||||
const wrapper = document.querySelector('.bg-black');
|
||||
wrapper.innerHTML = `
|
||||
<div class="error-message">
|
||||
Erreur lors de la lecture du flux vidéo.<br>
|
||||
<a href="/video/{{ task_id }}" style="color: #FF9F1C; text-decoration: underline;">Réessayer</a> ou
|
||||
<a href="/stream/{{ filename }}" style="color: #FF9F1C; text-decoration: underline;" download>Télécharger</a>
|
||||
<div class="alert alert-error m-4">
|
||||
<i class="fa-solid fa-circle-exclamation"></i>
|
||||
<div>
|
||||
<p>Erreur lors de la lecture du flux vidéo.</p>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<a href="/video/{{ task_id }}" class="btn btn-sm btn-primary">Réessayer</a>
|
||||
<a href="/stream/{{ filename }}" download class="btn btn-sm btn-ghost">Télécharger</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user