Files
tytdcompanion/wwwroot/components/shell.sbnhtml
T
2026-03-15 22:15:34 -05:00

78 lines
2.5 KiB
Plaintext

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TYTD Companion - {{title}}</title>
<link rel="stylesheet" href="/beer.min.css">
<link rel="stylesheet" href="/theme.css">
<script src="/htmx.min.js" defer></script>
<script type="module" src="/beer.min.js" defer></script>
</head>
<body hx-indicator="#loading-indicator">
<dialog class="left" id="leftpane">
<header>
<nav>
<img class="circle large" src="/tytd-128.png">
<h6 class="max">TYTD Companion</h6>
<button hx-on:click="ui('#leftpane')" class="transparent circle large">
<i>close</i>
</button>
</nav>
</header>
<div class="space"></div>
<ul class="list">
{{for item in pages}}
<li class="wave round" hx-target="body" hx-push-url="true" hx-get="{{item.url}}">
<i>{{item.icon}}</i>
<span class="max">{{item.title}}</span>
<b>{{item.badge}}</b>
</li>
{{end}}
</ul>
</dialog>
<header class="fixed primary-container">
<nav>
<button hx-on:click="ui('#leftpane')" class="circle transparent">
<i>menu</i>
</button>
<div class="max"></div>
<div>
<button class="circle transparent">
<i>more_vert</i>
</button>
<menu class="left no-wrap">
<li hx-target="body" hx-push-url="true" hx-get="/settings">Settings</li>
<li hx-target="body" hx-push-url="true" hx-get="/log">Log</li>
</menu>
</div>
</nav>
<div class="small-padding">
<h5>TYTD Companion</h5>
</div>
</header>
<main class="responsive">
{{body}}
</main>
<div class="htmx-indicator shape loading-indicator extra" id="loading-indicator">
<img class="responsive" src="/tytd.svg">
</div>
<div class="overlay blur"></div>
<dialog style="width: 80vw;" id="search-dialog">
<h5>Search</h5>
<div id="search-dialog-results">
</div>
<nav class="right-align no-space">
<button hx-on:click="ui('#search-dialog')" class="transparent link">Cancel</button>
</nav>
</dialog>
<script>
function searchDialogSubmit(id)
{
document.getElementById('url').value = `https://www.youtube.com/watch?v=${id}`;
ui('#search-dialog');
}
</script>
</body>
</html>