240 lines
13 KiB
HTML
240 lines
13 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en" data-theme="{% if user.is_authenticated %}{{ user.profile.theme_preference }}{% else %}dark{% endif %}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}TCGKof - Premium TCG Store{% endblock %}</title>
|
|
<meta name="description" content="{% block meta_description %}TCGKof is the premier marketplace for trading card games. Buy and sell Magic: The Gathering, Lorcana, and more.{% endblock %}">
|
|
<meta name="keywords" content="{% block meta_keywords %}TCG, Magic: The Gathering, Lorcana, cards, marketplace, buy cards, sell cards{% endblock %}">
|
|
<link rel="canonical" href="{% block canonical_url %}{{ request.build_absolute_uri }}{% endblock %}">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="{% block og_type %}website{% endblock %}">
|
|
<meta property="og:url" content="{{ request.build_absolute_uri }}">
|
|
<meta property="og:title" content="{% block og_title %}{{ self.title }}{% endblock %}">
|
|
<meta property="og:description" content="{% block og_description %}TCGKof is the premier marketplace for trading card games. Buy and sell Magic: The Gathering, Lorcana, and more.{% endblock %}">
|
|
<meta property="og:image" content="{% block og_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/og-default.jpg' %}{% endblock %}">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="{{ request.build_absolute_uri }}">
|
|
<meta property="twitter:title" content="{% block twitter_title %}{{ self.title }}{% endblock %}">
|
|
<meta property="twitter:description" content="{% block twitter_description %}TCGKof is the premier marketplace for trading card games. Buy and sell Magic: The Gathering, Lorcana, and more.{% endblock %}">
|
|
<meta property="twitter:image" content="{% block twitter_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/og-default.jpg' %}{% endblock %}">
|
|
|
|
<link rel="stylesheet" href="{% static 'css/style.css' %}">
|
|
{% if not debug %}
|
|
<script async defer src="https://tianji.aimloperations.com/tracker.js" data-website-id="cmklg5jenh4wx14nrurt5yqyl"></script>
|
|
{% endif %}
|
|
</head>
|
|
<body>
|
|
{% if FEATURE_DEMO_SITE %}
|
|
<div style="background: #f59e0b; color: #000; text-align: center; padding: 0.5rem; font-weight: 600; font-size: 0.875rem;">
|
|
DEMO SITE: This is an example application. No real products, payments, or purchases are processed.
|
|
</div>
|
|
{% endif %}
|
|
<nav>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
|
<a href="{% url 'home' %}" class="nav-brand">TCGKof</a>
|
|
<button class="mobile-menu-btn" aria-label="Toggle Navigation">
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
</button>
|
|
</div>
|
|
<div class="nav-links">
|
|
{% if user.is_authenticated %}
|
|
{% if user.seller_profile %}
|
|
{# Seller Navigation #}
|
|
<a href="{% url 'store:seller_dashboard' %}">Dashboard</a>
|
|
<a href="{% url 'store:seller_profile' user.seller_profile.slug %}">Store</a>
|
|
<a href="{% url 'store:manage_listings' %}">Inventory</a>
|
|
{% if debug %}
|
|
<a href="{% url 'store:bounty_list' %}">Bounties</a>
|
|
{% endif %}
|
|
<form action="{% url 'logout' %}" method="post" style="display:inline;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn" style="background:none; color:var(--text-color); margin-left:1rem;">Logout</button>
|
|
</form>
|
|
{% elif user.buyer_profile %}
|
|
{# Buyer Navigation #}
|
|
<a href="{% url 'store:card_list' %}">Browse</a>
|
|
{% if FEATURE_VIRTUAL_PACKS %}
|
|
<a href="{% url 'store:pack_list' %}">Packs</a>
|
|
{% endif %}
|
|
<a href="{% url 'decks:deck_list' %}">Decks</a>
|
|
<a href="{% url 'users:vault' %}">Vault</a>
|
|
{% if FEATURE_VIRTUAL_PACKS %}
|
|
<a href="{% url 'store:my_packs' %}">My Packs</a>
|
|
{% endif %}
|
|
<a href="{% url 'store:cart' %}">Cart ({{ user.buyer_profile.cart.items.count|default:0 }})</a>
|
|
<a href="{% url 'users:profile' %}">Profile</a>
|
|
<a href="{% url 'store:bounty_list' %}">Bounties</a>
|
|
<form action="{% url 'logout' %}" method="post" style="display:inline;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn" style="background:none; color:var(--text-color); margin-left:1rem;">Logout</button>
|
|
</form>
|
|
{% else %}
|
|
{# Fallback for incomplete profiles #}
|
|
<form action="{% url 'logout' %}" method="post" style="display:inline;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn" style="background:none; color:var(--text-color);">Logout (Invalid Account)</button>
|
|
</form>
|
|
{% endif %}
|
|
|
|
{% if user.is_staff %}
|
|
<a href="{% url 'store:admin_revenue_dashboard' %}" style="color: #f59e0b;">Platform Admin</a>
|
|
{% endif %}
|
|
{% else %}
|
|
{# Public Navigation #}
|
|
<a href="{% url 'store:card_list' %}">Browse</a>
|
|
{% if FEATURE_VIRTUAL_PACKS %}
|
|
<a href="{% url 'store:pack_list' %}">Packs</a>
|
|
{% endif %}
|
|
{% if debug %}
|
|
<a href="{% url 'store:bounty_list' %}">Bounties</a>
|
|
{% endif %}
|
|
|
|
<a href="{% url 'decks:deck_list' %}"
|
|
class="auth-required"
|
|
data-feature-title="Deck Builder"
|
|
data-feature-desc="Build and save custom decks, analyze mana curves, and prepare your strategies for battle. Create an account to start building!">Decks</a>
|
|
|
|
<a href="{% url 'users:vault' %}"
|
|
class="auth-required"
|
|
data-feature-title="Collection Vault"
|
|
data-feature-desc="Track your entire card collection, monitor value trends, and manage your inventory in one place. Log in to access your Vault.">Vault</a>
|
|
|
|
{% if FEATURE_VIRTUAL_PACKS %}
|
|
<a href="{% url 'store:my_packs' %}"
|
|
class="auth-required"
|
|
data-feature-title="My Packs"
|
|
data-feature-desc="Open virtual packs, collect rare cards, and grow your digital library. Sign up now to start cracking packs!">My Packs</a>
|
|
{% endif %}
|
|
|
|
<a href="{% url 'login' %}">Login</a>
|
|
<a href="{% url 'users:register' %}">Register</a>
|
|
<a href="{% url 'store:seller_register' %}">Seller?</a>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
{% if messages %}
|
|
<ul class="messages">
|
|
{% for message in messages %}
|
|
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
|
|
{% block content %}
|
|
{% endblock %}
|
|
</div>
|
|
|
|
<footer style="background-color: #1e293b; border-top: 1px solid #334155; padding: 3rem 1rem; margin-top: 4rem; color: #94a3b8;">
|
|
<div class="container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto;">
|
|
<div style="text-align: left;">
|
|
<h3 style="color: #f59e0b; font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem;">TCGKof</h3>
|
|
<p style="font-size: 0.875rem; line-height: 1.6;">The premier destination for trading card game buyers and sellers.</p>
|
|
<p style="font-size: 0.875rem;">© 2026 TCGKof Store.</p>
|
|
<p style="font-size: 0.875rem;">Operated by <a href="https://aimloperations.com" target="_blank" style="color: inherit; text-decoration: underline;">AI ML Operations, LLC</a></p>
|
|
</div>
|
|
<div style="text-align: left;">
|
|
<h4 style="color: #e2e8f0; font-weight: 600; margin-bottom: 1rem;">Sellers</h4>
|
|
<ul style="list-style: none; padding: 0;">
|
|
<li style="margin-bottom: 0.5rem;"><a href="{% url 'users:sell_on_tcgkof' %}" style="color: inherit; text-decoration: none; transition: color 0.2s;">Sell on TCGKof</a></li>
|
|
<li style="margin-bottom: 0.5rem;"><a href="{% url 'store:seller_register' %}" style="color: inherit; text-decoration: none; transition: color 0.2s;">Seller Registration</a></li>
|
|
</ul>
|
|
</div>
|
|
<div style="text-align: left;">
|
|
<h4 style="color: #e2e8f0; font-weight: 600; margin-bottom: 1rem;">Services</h4>
|
|
<ul style="list-style: none; padding: 0;">
|
|
{% if FEATURE_PLAYTEST_PROXY %}
|
|
<li style="margin-bottom: 0.5rem;"><a href="{% url 'proxy:info' %}" style="color: inherit; text-decoration: none; transition: color 0.2s;">Proxy Service</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
<div style="text-align: left;">
|
|
<h4 style="color: #e2e8f0; font-weight: 600; margin-bottom: 1rem;">Legal</h4>
|
|
<ul style="list-style: none; padding: 0;">
|
|
<li style="margin-bottom: 0.5rem;"><a href="{% url 'store:terms' %}" style="color: inherit; text-decoration: none; transition: color 0.2s;">Terms and Service</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
|
|
{% if not user.is_authenticated %}
|
|
<div id="authModal" class="modal-overlay">
|
|
<div class="auth-modal">
|
|
<button class="close-modal" aria-label="Close modal">×</button>
|
|
<h2 id="modalTitle">Login Required</h2>
|
|
<p id="modalDesc">Please log in to access this feature.</p>
|
|
<div class="auth-modal-actions">
|
|
<a href="{% url 'login' %}" class="btn">Log In</a>
|
|
<a href="{% url 'users:register' %}" class="btn btn-outline">Create Account</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mobile Menu Toggle
|
|
const mobileBtn = document.querySelector('.mobile-menu-btn');
|
|
const navLinks = document.querySelector('.nav-links');
|
|
|
|
if (mobileBtn) {
|
|
mobileBtn.addEventListener('click', function() {
|
|
navLinks.classList.toggle('active');
|
|
});
|
|
}
|
|
|
|
// Auth Modal Logic
|
|
const modal = document.getElementById('authModal');
|
|
if (modal) {
|
|
const closeBtn = document.querySelector('.close-modal');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalDesc = document.getElementById('modalDesc');
|
|
const authLinks = document.querySelectorAll('.auth-required');
|
|
|
|
function openModal(title, desc) {
|
|
modalTitle.textContent = title;
|
|
modalDesc.textContent = desc;
|
|
modal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeModal() {
|
|
modal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
authLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const title = this.dataset.featureTitle || 'Login Required';
|
|
const desc = this.dataset.featureDesc || 'Please log in to access this feature.';
|
|
openModal(title, desc);
|
|
});
|
|
});
|
|
|
|
closeBtn.addEventListener('click', closeModal);
|
|
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === modal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
|
closeModal();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
</body>
|
|
</html>
|