TelegramIndex-Fork/app/templates/header.html

53 lines
1.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.4/dist/tailwind-dark.min.css" href_="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.4/dist/tailwind.min.css" rel="stylesheet"/>
<script type="text/javascript">
{% include "./js/fluidplayer.min.js" %}
</script>
<script>
(function(){
var Doc = document.documentElement;
Doc.className = 'light';
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
Doc.className = 'dark';
} else {
Doc.className = 'light';
};
})();
</script>
<style>
* {
font-family: 'Roboto', 'Liberation Sans', 'Noto Sans', sans-serif;
}
</style>
<title>
{% if title %} {{title}} {% else %} Telegram Index {% endif %}
</title>
</head>
<body class="bg-white text-black dark:bg-black dark:text-white" style="overflow-x: hidden;">
<header class="bg-blue-300 dark:bg-red-500 text-white mb-2 p-2 w-full shadow">
<div class="flex mx-auto justify-between items-center max-w-screen-xl">
<a href="/" id="title-a" class="text-left font-bold text-xl lg:text-2xl xl:text-3xl"> Telegram Index </a>
<div class="space-x-1">
<span style="vertical-align: super; white-space: pre;">[<a
href="https://github.com/octospacc/TelegramIndex-Fork" class="font-bold underline"
>Source Code</a>]</span>
<button onclick="toggleTheme()" class="rounded-full bg-white">
<img src="https://s3.imgcdn.dev/nW9YV.png" class="h-8" alt="Theme"/>
</button>
{% if authenticated %}
<button class="rounded-full bg-white"><a href="/logout">
<img src="https://s3.imgcdn.dev/ndsjh.png" class="h-8" alt="Logout">
</a></button>
{% else %} {% endif %}
</div>
</div>
</header>
<div class="m-auto w-full max-w-screen-xl">