bruno
66f1da1d72
Le header était en grid-cols-[auto_1fr_auto] avec une barre de recherche non-wrappable (7 chips + input + 2 boutons, aucun min-w-0) : ~1000px de largeur intrinsèque dans un viewport de 375px. Toutes les routes débordaient horizontalement et les boutons Connexion/Inscription partaient hors écran. Socle - --header-h / --header-offset / --app-vh centralisent la métrique du header : supprime les top-16 codés en dur (channel-tabs était en top-0 et glissait sous le header au scroll). - Safe-area iOS, viewport-fit=cover, color-scheme/theme-color. - dvh partout (100vh > hauteur visible sur iOS), overflow-x: clip au lieu de hidden (hidden cassait silencieusement tous les sticky). - Cible tactile 44px sur pointeur grossier, skip link, focus-ring clavier, scroll-rail pour les tab strips. Header - Barre mobile (burger, logo, recherche, menu ⋮) + barre desktop inchangée. - Le menu ⋮ expose ce qui disparaissait : bande des thèmes, préférences, historique, favoris, téléchargements, thème, connexion/inscription. - Recherche en feuille sous le header avec focus automatique. - Échap / clic extérieur / navigation ferment les panneaux transitoires. Drawer - Partait à inset-y-0 : les 56 premiers px du menu étaient derrière le header. Descend sous le header, bouton fermer intégré, verrouille le scroll, se ferme à Échap. Barre de recherche - Chips masquées sous lg, remplacées par un bouton résumé qui ouvre le sélecteur de fournisseurs. Suggestions en dvh, menu Ctrl+K plein écran sur mobile. Pages - Shorts : cadre 9:16 contraint par dvh ET vw (il débordait en paysage), Préc./Suiv. qui étaient hors du conteneur height-capped. - Watch : barre d'actions qui wrappe, mode cinéma en opacity-0 group-hover donc invisible au doigt, thumbnails fluides, playsinline sur les iframes. - Historique, thèmes, chaîne, playlists, préférences, sessions : rails swipables, min-w-0, truncate, en-têtes qui wrappent. Vérifié : audit navigateur (CDP) sur 17 routes x 7 largeurs (320→1440), zéro débordement horizontal ; 19 tests d'interaction mobile ; suites de tests du dépôt vertes (api 40/40, transcript 27/27, search, suggest, playlists, preferences, subscriptions, highlight, telemetry).
79 lines
3.2 KiB
HTML
79 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="color-scheme" content="dark light" />
|
|
<meta name="theme-color" content="#0f172a" />
|
|
<meta name="format-detection" content="telephone=no" />
|
|
<title>NewTube</title>
|
|
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<meta name="apple-mobile-web-app-title" content="NewTube" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
|
|
<script>
|
|
try {
|
|
var t = localStorage.getItem('newtube.theme') || 'system';
|
|
document.documentElement.setAttribute('data-theme', t);
|
|
} catch (e) {}
|
|
</script>
|
|
<script src="https://cdn.tailwindcss.com?plugins=line-clamp"></script>
|
|
<style>
|
|
/* Custom scrollbar for a better look */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #1e1e2e;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #45475a;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #6c7086;
|
|
}
|
|
|
|
/* Shift the fixed header below the iOS status bar when in standalone mode. */
|
|
@supports (padding: env(safe-area-inset-top)) {
|
|
html {
|
|
--safe-top: env(safe-area-inset-top);
|
|
--safe-bottom: env(safe-area-inset-bottom);
|
|
--safe-left: env(safe-area-inset-left);
|
|
--safe-right: env(safe-area-inset-right);
|
|
}
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"rxjs": "https://aistudiocdn.com/rxjs@^7.8.2?conditions=es2015",
|
|
"rxjs/operators": "https://aistudiocdn.com/rxjs@^7.8.2/operators?conditions=es2015",
|
|
"rxjs/ajax": "https://aistudiocdn.com/rxjs@^7.8.2/ajax?conditions=es2015",
|
|
"rxjs/webSocket": "https://aistudiocdn.com/rxjs@^7.8.2/webSocket?conditions=es2015",
|
|
"rxjs/testing": "https://aistudiocdn.com/rxjs@^7.8.2/testing?conditions=es2015",
|
|
"rxjs/fetch": "https://aistudiocdn.com/rxjs@^7.8.2/fetch?conditions=es2015",
|
|
"@angular/compiler": "https://next.esm.sh/@angular/compiler@^20.1.6-0?external=rxjs",
|
|
"@angular/platform-browser": "https://next.esm.sh/@angular/platform-browser@^20.1.6-0?external=rxjs",
|
|
"@angular/router": "https://next.esm.sh/@angular/router@^20.1.6-0?external=rxjs",
|
|
"@angular/common/http": "https://next.esm.sh/@angular/common@^20.1.6-0/http?external=rxjs",
|
|
"@angular/core": "https://next.esm.sh/@angular/core@^20.1.6-0?external=rxjs",
|
|
"@angular/common": "https://next.esm.sh/@angular/common@^20.1.6-0?external=rxjs",
|
|
"@google/genai": "https://esm.run/@google/genai"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/index.css">
|
|
<!-- Local, non-versioned config (define YOUTUBE_API_KEY, GEMINI_API_KEY, etc.) -->
|
|
<script src="assets/config.local.js"></script>
|
|
<!-- Dynamically generated config from environment variables -->
|
|
<script src="assets/config.js"></script>
|
|
</head>
|
|
<body class="bg-slate-900 text-slate-200 antialiased">
|
|
<app-root></app-root>
|
|
<script type="module" src="/main.js"></script>
|
|
</body>
|
|
</html> |