206 lines
No EOL
11 KiB
HTML
206 lines
No EOL
11 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 'settings' as settings_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="https://cdn.jsdelivr.net/npm/choices.js@11.0.6/public/assets/styles/choices.min.css" />
|
|
<script async src="https://cdn.jsdelivr.net/npm/choices.js@11.0.6/public/assets/scripts/choices.min.js"></script>
|
|
<!-- Tailwind CSS and Base stylesheet -->
|
|
{% tailwind_css %}
|
|
<link rel="stylesheet" href="{% static 'css/base.css' %}">
|
|
|
|
<!-- Floating UI -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.6.9"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.13"></script>
|
|
|
|
<!-- Gravatar -->
|
|
<!-- Import the hovercard styles -->
|
|
<link rel="stylesheet" href="https://unpkg.com/@gravatar-com/hovercards@0.10.8/dist/style.css">
|
|
|
|
<!-- Import the hovercards library -->
|
|
<script src="https://unpkg.com/@gravatar-com/hovercards@0.10.8"></script>
|
|
|
|
<script src="{% static 'js/base.js' %}"></script>
|
|
|
|
{% block css %}{% endblock %}
|
|
|
|
{% block javascript_head %}{% endblock %}
|
|
</head>
|
|
<body class="min-h-screen bg-base-200" id="body">
|
|
<!-- Header and Navigation -->
|
|
<div class="navbar bg-base-100 shadow-sm">
|
|
<div class="navbar-start">
|
|
<div class="dropdown">
|
|
<div tabindex="0" role="button" class="btn btn-ghost hidden sm:flex md:hidden">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
|
|
<li><a href="{% url 'home' %}">Home</a></li>
|
|
<li><a href="{% url 'cards:card_list' %}">Cards</a></li>
|
|
<li>
|
|
<a>Trades</a>
|
|
<ul class="p-2">
|
|
<li><a href="{% url 'trade_offer_list' %}">All Offers</a></li>
|
|
<li><a href="{% url 'trade_offer_my_list' %}">My Trades</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a 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 md: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>
|
|
<details>
|
|
<summary>Trades</summary>
|
|
<ul class="p-2 w-32 z-10">
|
|
<li><a href="{% url 'trade_offer_list' %}">All Offers</a></li>
|
|
<li><a href="{% url 'trade_offer_my_list' %}">My Trades</a></li>
|
|
</ul>
|
|
</details>
|
|
</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="dropdown dropdown-end hidden sm:block">
|
|
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
|
|
<div class="w-10 rounded-full">
|
|
{{ user.email|gravatar_no_hover:40 }}
|
|
</div>
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-32 p-2 shadow">
|
|
<li>
|
|
<a class="justify-between" href="{% url 'settings' %}">
|
|
Settings
|
|
</a>
|
|
</li>
|
|
<li><a href="{% url 'account_logout' %}">Sign Out</a></li>
|
|
</ul>
|
|
</div>
|
|
{% else %}
|
|
<div class="flex gap-2">
|
|
<a class="btn btn-primary" href="{% url 'account_login' %}">Login</a>
|
|
<a class="btn btn-secondary" href="{% url 'account_signup' %}">Sign Up</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto p-4 sm:w-4/5 md:w-full xl:w-256">
|
|
{% include '_messages.html' %}
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-base-200 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 = '{{ settings_url }}'" class="{% if 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: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">Settings</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Alpine Plugins -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.14.8/dist/cdn.min.js"></script>
|
|
|
|
<!-- Alpine Core -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
|
|
|
<script defer src="{% static 'js/tooltip.js' %}"></script>
|
|
|
|
<!-- Gravatar -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof Gravatar !== 'undefined' && typeof Gravatar.Hovercards !== 'undefined') {
|
|
const hovercards = new Gravatar.Hovercards({
|
|
myHash: '{{ user.email|gravatar_hash }}',
|
|
});
|
|
hovercards.attach( document.body, { ignoreSelector: 'img[src*="gravatar.com/avatar/"].ignore' } );
|
|
}
|
|
});
|
|
// i18n: {
|
|
// 'Edit your profile →': 'Modifier votre profil →',
|
|
// 'View profile →': 'Voir le profil →',
|
|
// 'Contact': 'Contact',
|
|
// 'Send money': 'Envoyer de l\'argent',
|
|
// 'Sorry, we are unable to load this Gravatar profile.': 'Désolé, nous ne pouvons pas charger ce profil Gravatar.',
|
|
// 'Profile not found.': 'Profil non trouvé.',
|
|
// 'Too Many Requests.': 'Trop de demandes.',
|
|
// 'Internal Server Error.': 'Erreur interne du serveur.',
|
|
// }
|
|
</script>
|
|
|
|
|
|
{% block javascript %}{% endblock %}
|
|
</body>
|
|
</html> |