inital checkin
This commit is contained in:
27
templates/users/address_form.html
Normal file
27
templates/users/address_form.html
Normal file
@@ -0,0 +1,27 @@
|
||||
{% extends 'base/layout.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container" style="max-width: 600px; margin: 0 auto; padding-top: 2rem;">
|
||||
<div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
<h2 style="margin-top: 0;">Add Address</h2>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<div style="display: grid; gap: 1rem;">
|
||||
{% for field in form %}
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
<label for="{{ field.id_for_label }}" style="font-weight: 500;">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
{% if field.errors %}
|
||||
<span style="color: #ef4444; font-size: 0.875rem;">{{ field.errors.0 }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div style="margin-top: 2rem; display: flex; gap: 1rem;">
|
||||
<button type="submit" class="btn">Save Address</button>
|
||||
<a href="{% url 'users:profile' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color);">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
30
templates/users/payment_form.html
Normal file
30
templates/users/payment_form.html
Normal file
@@ -0,0 +1,30 @@
|
||||
{% extends 'base/layout.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container" style="max-width: 600px; margin: 0 auto; padding-top: 2rem;">
|
||||
<div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
<h2 style="margin-top: 0;">Add Payment Method</h2>
|
||||
<div style="background: #3b82f620; border: 1px solid #3b82f6; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
|
||||
<p style="margin: 0; color: #60a5fa; font-size: 0.875rem;"><strong>Note:</strong> This is a demo. Do not enter real credit card information.</p>
|
||||
</div>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<div style="display: grid; gap: 1rem;">
|
||||
{% for field in form %}
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
<label for="{{ field.id_for_label }}" style="font-weight: 500;">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
{% if field.errors %}
|
||||
<span style="color: #ef4444; font-size: 0.875rem;">{{ field.errors.0 }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div style="margin-top: 2rem; display: flex; gap: 1rem;">
|
||||
<button type="submit" class="btn">Save Payment Method</button>
|
||||
<a href="{% url 'users:profile' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color);">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
141
templates/users/profile.html
Normal file
141
templates/users/profile.html
Normal file
@@ -0,0 +1,141 @@
|
||||
{% extends 'base/layout.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="card-grid" style="grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start;">
|
||||
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
||||
<!-- User Info Card -->
|
||||
<div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
<h2>{{ user.username }}</h2>
|
||||
<span
|
||||
style="background: {% if user.profile.is_pro %}{{ 'linear-gradient(to right, #f59e0b, #d97706)' }}{% else %}#475569{% endif %};
|
||||
color: white; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600;">
|
||||
{% if user.profile.is_pro %}PRO MEMBER{% else %}BASIC MEMBER{% endif %}
|
||||
</span>
|
||||
|
||||
<div style="margin-top: 2rem;">
|
||||
<p><strong>Email:</strong> {{ user.email }}</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<p><strong>Theme Preference:</strong></p>
|
||||
<div style="display: flex; gap: 0.5rem;">
|
||||
{{ form.theme_preference }}
|
||||
<button type="submit" class="btn" style="padding: 0.25rem 0.75rem;">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if not user.profile.is_pro %}
|
||||
<div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color);">
|
||||
<h3>Upgrade to Pro</h3>
|
||||
<p>Get access to Deck Builder and exclusive analytics.</p>
|
||||
<form action="{% url 'users:upgrade_account' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn" style="width: 100%;">Upgrade Now ($5/mo)</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Addresses Card -->
|
||||
<div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
||||
<h3 style="margin: 0;">Addresses</h3>
|
||||
<a href="{% url 'users:add_address' %}" class="btn" style="font-size: 0.75rem; padding: 0.25rem 0.5rem;">+ Add</a>
|
||||
</div>
|
||||
{% if addresses %}
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
{% for address in addresses %}
|
||||
<div style="border: 1px solid var(--border-color); padding: 0.75rem; border-radius: 0.375rem; position: relative;">
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span style="font-weight: 600; font-size: 0.875rem;">{{ address.get_address_type_display }} {% if address.is_default %}(Default){% endif %}</span>
|
||||
<form action="{% url 'users:delete_address' address.pk %}" method="post" onsubmit="return confirm('Are you sure?');">
|
||||
{% csrf_token %}
|
||||
<button type="submit" style="background: none; border: none; color: #ef4444; cursor: pointer;">×</button>
|
||||
</form>
|
||||
</div>
|
||||
<p style="margin: 0.25rem 0; font-size: 0.875rem;">{{ address.street }}<br>{{ address.city }}, {{ address.state }} {{ address.zip_code }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p style="color: #94a3b8; font-size: 0.875rem;">No addresses saved.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Payment Methods Card -->
|
||||
<div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
||||
<h3 style="margin: 0;">Payment Methods</h3>
|
||||
<a href="{% url 'users:add_payment_method' %}" class="btn" style="font-size: 0.75rem; padding: 0.25rem 0.5rem;">+ Add</a>
|
||||
</div>
|
||||
{% if payment_methods %}
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
{% for pm in payment_methods %}
|
||||
<div style="border: 1px solid var(--border-color); padding: 0.75rem; border-radius: 0.375rem; position: relative;">
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span style="font-weight: 600; font-size: 0.875rem;">{{ pm.brand }} •••• {{ pm.last4 }}</span>
|
||||
<form action="{% url 'users:delete_payment_method' pm.pk %}" method="post" onsubmit="return confirm('Are you sure?');">
|
||||
{% csrf_token %}
|
||||
<button type="submit" style="background: none; border: none; color: #ef4444; cursor: pointer;">×</button>
|
||||
</form>
|
||||
</div>
|
||||
<p style="margin: 0.25rem 0; font-size: 0.875rem; color: #94a3b8;">Expires {{ pm.exp_month }}/{{ pm.exp_year }}</p>
|
||||
{% if pm.is_default %}<span style="font-size: 0.75rem; color: var(--primary-color);">Default</span>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p style="color: #94a3b8; font-size: 0.875rem;">No payment methods saved.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
||||
<h2 style="margin: 0;">Recent Orders</h2>
|
||||
<form method="get" style="display: flex; gap: 0.5rem;">
|
||||
<input type="date" name="date" value="{{ date_query }}" style="background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-color); padding: 0.25rem 0.5rem; border-radius: 0.25rem;">
|
||||
<button type="submit" class="btn" style="padding: 0.25rem 0.75rem;">Filter</button>
|
||||
{% if date_query %}
|
||||
<a href="{% url 'users:profile' %}" class="btn" style="background: var(--card-bg); border: 1px solid var(--border-color); padding: 0.25rem 0.75rem;">Clear</a>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if orders %}
|
||||
<div style="display: grid; gap: 1rem;">
|
||||
{% for order in orders %}
|
||||
<a href="{% url 'store:order_detail' order.id %}" style="text-decoration: none; color: inherit;">
|
||||
<div
|
||||
style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; transition: transform 0.2s;"
|
||||
onmouseover="this.style.transform='translateY(-2px)'; this.style.borderColor='var(--accent-color)'"
|
||||
onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border-color)'">
|
||||
<div>
|
||||
<h4 style="margin: 0;">Order #{{ order.id }}</h4>
|
||||
<p style="margin: 0.5rem 0 0; color: #94a3b8; font-size: 0.875rem;">{{ order.created_at|date }}</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<span style="display: block; font-weight: 600; font-size: 1.125rem;">${{ order.total_price }}</span>
|
||||
<span
|
||||
style="display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; background: #334155; margin-top: 0.5rem;">
|
||||
{{ order.get_status_display }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div
|
||||
style="text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem; color: #94a3b8;">
|
||||
<p>No orders found.</p>
|
||||
<a href="{% url 'store:card_list' %}" class="btn" style="margin-top: 1rem;">Start Shopping</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
16
templates/users/register.html
Normal file
16
templates/users/register.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{% extends 'base/layout.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div
|
||||
style="max-width: 400px; margin: 4rem auto; background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
<h2 style="margin-top: 0;">Create Account</h2>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p }}
|
||||
<button type="submit" class="btn" style="width: 100%;">Register</button>
|
||||
</form>
|
||||
<p style="margin-top: 1rem; text-align: center;">
|
||||
Already have an account? <a href="{% url 'login' %}" style="color: var(--primary-color);">Login here</a>.
|
||||
</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
72
templates/users/vault.html
Normal file
72
templates/users/vault.html
Normal file
@@ -0,0 +1,72 @@
|
||||
{% extends 'base/layout.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container" style="max-width: 1000px; margin: 0 auto; padding-top: 2rem;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
|
||||
<h1>My Card Vault</h1>
|
||||
<div style="background: var(--card-bg); padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
Total Cards: <strong>{{ total_cards }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div style="margin-bottom: 2rem; background: var(--card-bg); padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
<form method="get" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
|
||||
<div>
|
||||
<label for="set" style="margin-right: 0.5rem; font-size: 0.875rem;">Set:</label>
|
||||
<select name="set" id="set" style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
|
||||
<option value="">All Sets</option>
|
||||
{% for set in available_sets %}
|
||||
<option value="{{ set.id }}" {% if current_set == set.id %}selected{% endif %}>{{ set.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="rarity" style="margin-right: 0.5rem; font-size: 0.875rem;">Rarity:</label>
|
||||
<select name="rarity" id="rarity" style="padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
|
||||
<option value="">All Rarities</option>
|
||||
{% for rarity in available_rarities %}
|
||||
<option value="{{ rarity }}" {% if current_rarity == rarity %}selected{% endif %}>{{ rarity|title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn" style="padding: 0.25rem 0.75rem;">Filter</button>
|
||||
<a href="{% url 'users:vault' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color); padding: 0.25rem 0.75rem;">Clear</a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if vault_items %}
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem;">
|
||||
{% for item in vault_items %}
|
||||
<div style="background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden; display: flex; flex-direction: column;">
|
||||
<div style="position: relative; aspect-ratio: 2.5/3.5;">
|
||||
{% if item.card.image_url %}
|
||||
<img src="{{ item.card.image_url }}" alt="{{ item.card.name }}" style="width: 100%; height: 100%; object-fit: cover;">
|
||||
{% else %}
|
||||
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #1e293b; color: #94a3b8;">No Image</div>
|
||||
{% endif %}
|
||||
<div style="position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 0.25rem 0.5rem; border-top-left-radius: 0.5rem;">
|
||||
x{{ item.quantity }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<div>
|
||||
<h3 style="margin: 0; font-size: 1rem;">{{ item.card.name }}</h3>
|
||||
<p style="color: #94a3b8; font-size: 0.875rem; margin: 0.25rem 0;">{{ item.card.set.name }}</p>
|
||||
<p style="color: #94a3b8; font-size: 0.75rem; margin: 0;">{{ item.card.rarity|title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
||||
<p style="font-size: 1.25rem; color: #94a3b8; margin-bottom: 1rem;">No cards found.</p>
|
||||
<div style="display: flex; gap: 1rem; justify-content: center; margin-top: 2rem;">
|
||||
<a href="{% url 'store:card_list' %}" class="btn">Browse Cards</a>
|
||||
<a href="{% url 'users:vault' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color);">Clear Filters</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user