139 lines
No EOL
8.6 KiB
HTML
139 lines
No EOL
8.6 KiB
HTML
{% load static tailwind_tags gravatar %}
|
|
{% url 'home' as home_url %}
|
|
{% url 'trade_offer_list' as trade_offer_list_url %}
|
|
{% url 'cards:card_list' as cards_list_url %}
|
|
{% url 'dashboard' as dashboard_url %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
{% include 'meta/meta.html' %}
|
|
|
|
<!-- Inline script to set the theme before rendering -->
|
|
<script>
|
|
(function () {
|
|
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
|
document.documentElement.classList.toggle(
|
|
"dark",
|
|
localStorage.getItem("theme") === "dark" ||
|
|
(!(localStorage.getItem("theme")) && window.matchMedia("(prefers-color-scheme: dark)").matches)
|
|
);
|
|
if (localStorage.getItem("theme")) {
|
|
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
|
|
} else {
|
|
document.documentElement.setAttribute("data-theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<title>[PᴋMɴ Trade Club] {% block title %}{% endblock title %}</title>
|
|
|
|
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}">
|
|
<!-- Choices.js -->
|
|
<link rel="stylesheet" href="{% static 'css/choices.min.css' %}" />
|
|
<script async src="{% static 'js/choices.min.js' %}"></script>
|
|
<!-- Tailwind CSS and Base stylesheet -->
|
|
{% tailwind_css %}
|
|
<link rel="stylesheet" href="{% static 'css/base.css' %}">
|
|
|
|
<!-- Floating UI -->
|
|
<script src="{% static 'js/floating-ui_core@1.6.9.9.min.js' %}"></script>
|
|
<script src="{% static 'js/floating-ui_dom@1.6.13.13.min.js' %}"></script>
|
|
|
|
<script src="{% static 'js/base.js' %}"></script>
|
|
|
|
{% block css %}{% endblock %}
|
|
|
|
{% block javascript_head %}{% endblock %}
|
|
</head>
|
|
<body class="min-h-screen bg-base-200 dark:bg-base-300" id="body">
|
|
<!-- Header and Navigation -->
|
|
<div class="navbar bg-base-100 shadow-sm">
|
|
<div class="navbar-start">
|
|
<a id="navbar-logo" class="btn btn-ghost text-xl" href="{% url 'home' %}">
|
|
<span class="inline leading-none" aria-hidden="true">
|
|
<span class="inline-block relative align-text-top">P</span><span class="inline-block relative align-text-bottom">K</span><span class="inline-block relative align-text-top">M</span><span class="inline-block relative align-text-bottom">N</span>
|
|
<span class="inline-block relative">Trade Club</span>
|
|
</span>
|
|
<span aria-hidden="false" class="sr-only">PKMN Trade Club</span>
|
|
</a>
|
|
</div>
|
|
<div class="navbar-center hidden sm:flex">
|
|
<ul class="menu menu-horizontal px-1">
|
|
<li><a href="{% url 'home' %}">Home</a></li>
|
|
<li><a href="{% url 'cards:card_list' %}">Cards</a></li>
|
|
<li><a href="{% url 'trade_offer_list' %}">Trades</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-end">
|
|
|
|
<button id="theme-toggle-btn" class="btn btn-ghost btn-circle me-2" title="Toggle Theme">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 dark:hidden">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 hidden dark:block">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
|
|
</svg>
|
|
</button>
|
|
{% if user.is_authenticated %}
|
|
<div class="hidden sm:block">
|
|
<div class="btn btn-ghost btn-circle avatar">
|
|
<div class="w-10 rounded-full">
|
|
<a tabindex="0" role="button" href="{% url 'dashboard' %}">{{ user.email|gravatar_no_hover:40 }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex gap-2">
|
|
<a tabindex="0" role="button" class="btn btn-primary" href="{% url 'account_login' %}">Login</a>
|
|
<a tabindex="1" role="button" class="btn btn-secondary" href="{% url 'account_signup' %}">Sign Up</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto p-4 w-full xl:w-256">
|
|
{% include '_messages.html' %}
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-base-200 dark:bg-base-300 text-base-content p-4">
|
|
<div class="container mx-auto text-center text-sm">
|
|
<p>© {% now "Y" %} PKMNTrade.Club. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Dock -->
|
|
<div x-data class="dock bg-neutral text-neutral-content sm:hidden">
|
|
<button @click="window.location.href = '{{ home_url }}'" class="{% if request.path == home_url %}dock-active{% endif %}">
|
|
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
|
|
<span class="dock-label">Home</span>
|
|
</button>
|
|
<button @click="window.location.href = '{{ cards_list_url }}'" class="{% if request.path == cards_list_url %}dock-active{% endif %}">
|
|
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6" /></svg>
|
|
<span class="dock-label">Cards</span>
|
|
</button>
|
|
<button @click="window.location.href = '{{ trade_offer_list_url }}'" class="{% if request.path == trade_offer_list_url %}dock-active{% endif %}">
|
|
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" /></svg>
|
|
<span class="dock-label">Trades</span>
|
|
</button>
|
|
<button @click="window.location.href = '{{ dashboard_url }}'" class="{% if request.path == dashboard_url or request.path == settings_url %}dock-active{% endif %}">
|
|
{% if user.is_authenticated %}<div tabindex="0" role="button" class="avatar"><div class="w-6 rounded-full">{{ user.email|gravatar_no_hover:40 }}</div></div>{% else %}<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>{% endif %}
|
|
<span class="dock-label">Dashboard</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Alpine Plugins -->
|
|
<script defer src="{% static 'js/alpinejs.collapse@3.14.8.min.js' %}"></script>
|
|
|
|
<!-- Alpine Core -->
|
|
<script defer src="{% static 'js/alpinejs@3.14.8.min.js' %}"></script>
|
|
|
|
<script defer src="{% static 'js/tooltip.js' %}"></script>
|
|
|
|
{% block javascript %}{% endblock %}
|
|
</body>
|
|
</html> |