<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>MeTube</title>
<meta name="description" content="MeTube — watch, upload and follow independent video channels.">
<meta name="color-scheme" content="dark light">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],500;12..96,600;12..96,700;12..96,800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<a class="skip-link" href="#view">Skip to content</a>
<header class="topbar">
<div class="topbar__left">
<button class="iconbtn" id="nav-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
</button>
<a class="wordmark" href="/" aria-label="MeTube home">
<span class="wordmark__mark" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="wordmark__text">MeTube</span>
</a>
</div>
<form class="search" id="search-form" role="search">
<svg class="search__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input class="search__input" id="search-input" type="search" name="q" placeholder="Search videos and channels" aria-label="Search videos and channels" autocomplete="off">
<button class="search__clear" id="search-clear" type="button" aria-label="Clear search" hidden>×</button>
</form>
<div class="topbar__right">
<button class="iconbtn" id="theme-toggle" type="button" aria-label="Switch to light theme">
<svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z"/></svg>
<svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.4 5.4l1.5 1.5M17.1 17.1l1.5 1.5M18.6 5.4l-1.5 1.5M6.9 17.1l-1.5 1.5"/></svg>
</button>
<a class="btn btn--ghost upload-link" href="/upload">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4M7.5 8.5 12 4l4.5 4.5M4 16v2.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V16"/></svg>
<span>Upload</span>
</a>
<div id="account-slot"></div>
</div>
</header>
<div class="shell">
<nav class="sidebar" id="sidebar" aria-label="Main"></nav>
<div class="sidebar-scrim" id="sidebar-scrim" hidden></div>
<main class="main" id="view" tabindex="-1"></main>
</div>
<div class="toasts" id="toasts" role="status" aria-live="polite"></div>
<div class="modal-root" id="modal-root"></div>
<script type="module" src="/js/app.js"></script>
</body>
</html>