113 lines
6.0 KiB
HTML
113 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}RSTAT Dashboard{% endblock %}</title>
|
|
|
|
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon-96x96.png') }}" sizes="96x96" />
|
|
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
<link rel="shortcut icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}" />
|
|
<link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<style>
|
|
/* This sets the custom font as the default for the page */
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
[class*="text-"]>a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease-in-out;
|
|
}
|
|
|
|
|
|
[class*="text-"]>a:hover {
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-slate-900 text-slate-200 min-h-screen">
|
|
|
|
{% if not is_image_mode %}
|
|
<header class="p-4 sm:p-6 w-full">
|
|
<nav
|
|
class="w-full max-w-7xl mx-auto bg-slate-800/50 ring-1 ring-slate-700 rounded-xl p-4 flex flex-col sm:flex-row items-center gap-4">
|
|
<div class="flex items-center gap-4">
|
|
<!-- Home Link -->
|
|
<a href="/"
|
|
class="font-bold {% if not subreddit_name %}text-white{% else %}text-slate-400 hover:text-white{% endif %} transition-colors">Home</a>
|
|
|
|
<!-- Alpine.js Dropdown Component -->
|
|
<div x-data="{ isOpen: false }" class="relative">
|
|
<!-- The Button that toggles the 'isOpen' state -->
|
|
<button @click="isOpen = !isOpen"
|
|
class="font-bold flex items-center gap-1 cursor-pointer {% if subreddit_name %}text-white{% else %}text-slate-400 hover:text-white{% endif %} transition-colors">
|
|
<span>Subreddits</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
|
|
class="transition-transform duration-200" :class="{'rotate-180': isOpen}">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- The Dropdown Menu, controlled by Alpine.js -->
|
|
<div x-show="isOpen" @click.outside="isOpen = false"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
|
|
class="absolute left-0 mt-2 bg-slate-800 ring-1 ring-slate-700 shadow-lg rounded-lg py-1 w-48 z-10"
|
|
style="display: none;">
|
|
{% for sub in all_subreddits %}
|
|
<a href="/subreddit/{{ sub }}"
|
|
class="block px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 hover:text-white">{{ sub
|
|
}}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 sm:ml-auto">
|
|
<a href="?view=daily"
|
|
class="px-3 py-1 rounded-md text-sm font-semibold {% if view_type == 'daily' %}bg-sky-500 text-white{% else %}bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white{% endif %} transition-all">Daily</a>
|
|
<a href="?view=weekly"
|
|
class="px-3 py-1 rounded-md text-sm font-semibold {% if view_type == 'weekly' %}bg-sky-500 text-white{% else %}bg-slate-700/50 text-slate-300 hover:bg-slate-700 hover:text-white{% endif %} transition-all">Weekly</a>
|
|
<a href="/about" title="About this Project"
|
|
class="p-2 rounded-md text-slate-400 hover:bg-slate-700 hover:text-white transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
|
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
{% endif %}
|
|
|
|
<main class="w-full p-4 sm:p-6">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
{% if not is_image_mode %}
|
|
<footer class="mt-auto p-6 text-center">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<img src="{{ url_for('static', filename='dogecoin_logo.png') }}" alt="Doge" class="w-5 h-5">
|
|
<span class="text-sm text-slate-500">Support this service with Dogecoin: <code
|
|
class="text-xs bg-slate-800 p-1 rounded">DRTLo2BsBijY4MrLmNNHzmjZ5tVvpTebFE</code></span>
|
|
</div>
|
|
</footer>
|
|
{% endif %}
|
|
</body>
|
|
|
|
</html> |