first commit
This commit is contained in:
364
public_web/templates/character/create_class.html
Normal file
364
public_web/templates/character/create_class.html
Normal file
@@ -0,0 +1,364 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Choose Your Class - Code of Conquest{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="creation-container">
|
||||
<!-- Progress Indicator -->
|
||||
<div class="creation-progress">
|
||||
<div class="progress-step completed">
|
||||
<div class="step-number">✓</div>
|
||||
<div class="step-label">Origin</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step active">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-label">Class</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-label">Customize</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-label">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Header -->
|
||||
<h1 class="page-title">Choose Your Class</h1>
|
||||
<p class="page-subtitle">Select your fighting style and role in combat</p>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
<!-- Class Selection Form -->
|
||||
<form method="POST" action="{{ url_for('character_views.create_class') }}" id="class-form">
|
||||
<div class="class-grid">
|
||||
{% for player_class in classes %}
|
||||
<div class="class-card" data-class-id="{{ player_class.class_id }}">
|
||||
<input
|
||||
type="radio"
|
||||
name="class_id"
|
||||
value="{{ player_class.class_id }}"
|
||||
id="class-{{ player_class.class_id }}"
|
||||
class="class-radio"
|
||||
required
|
||||
>
|
||||
<label for="class-{{ player_class.class_id }}" class="class-label">
|
||||
<div class="class-header">
|
||||
<h3 class="class-title">{{ player_class.name }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="class-description">
|
||||
<p>{{ player_class.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Base Stats -->
|
||||
<div class="class-stats">
|
||||
<div class="stats-label">Base Stats</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">STR</span>
|
||||
<span class="stat-value">{{ player_class.base_stats.strength }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">DEX</span>
|
||||
<span class="stat-value">{{ player_class.base_stats.dexterity }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">CON</span>
|
||||
<span class="stat-value">{{ player_class.base_stats.constitution }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">INT</span>
|
||||
<span class="stat-value">{{ player_class.base_stats.intelligence }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">WIS</span>
|
||||
<span class="stat-value">{{ player_class.base_stats.wisdom }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">CHA</span>
|
||||
<span class="stat-value">{{ player_class.base_stats.charisma }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Trees -->
|
||||
<div class="class-trees">
|
||||
<div class="trees-label">Available Specializations</div>
|
||||
<p class="trees-hint">You'll choose your path as you level up</p>
|
||||
<div class="tree-list">
|
||||
{% for tree in player_class.skill_trees %}
|
||||
<div class="tree-item">
|
||||
<span class="tree-icon">🌲</span>
|
||||
<span class="tree-name">{{ tree }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<div class="creation-nav">
|
||||
<a href="{{ url_for('character_views.create_origin') }}" class="btn btn-secondary">
|
||||
← Back to Origin
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Next: Customize →
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ===== PROGRESS INDICATOR ===== */
|
||||
.creation-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-number {
|
||||
background: var(--accent-gold);
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.progress-step.active .step-number {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--accent-gold);
|
||||
box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-step.active .step-label {
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: var(--border-primary);
|
||||
margin: 0 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.progress-step.completed ~ .progress-line {
|
||||
background: var(--accent-gold);
|
||||
}
|
||||
|
||||
/* ===== CLASS GRID ===== */
|
||||
.class-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* ===== CLASS CARDS ===== */
|
||||
.class-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.class-radio {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.class-label {
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.class-label:hover {
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.class-radio:checked + .class-label {
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: var(--shadow-glow);
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(243, 156, 18, 0.1) 100%);
|
||||
}
|
||||
|
||||
.class-header {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.class-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.class-description {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===== STATS SECTION ===== */
|
||||
.class-stats {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-input);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.stat-name {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== SKILL TREES SECTION ===== */
|
||||
.class-trees {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.trees-label {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.trees-hint {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tree-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--bg-input);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.tree-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.class-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
597
public_web/templates/character/create_confirm.html
Normal file
597
public_web/templates/character/create_confirm.html
Normal file
@@ -0,0 +1,597 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Confirm Your Character - Code of Conquest{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="creation-container">
|
||||
<!-- Progress Indicator -->
|
||||
<div class="creation-progress">
|
||||
<div class="progress-step completed">
|
||||
<div class="step-number">✓</div>
|
||||
<div class="step-label">Origin</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step completed">
|
||||
<div class="step-number">✓</div>
|
||||
<div class="step-label">Class</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step completed">
|
||||
<div class="step-number">✓</div>
|
||||
<div class="step-label">Customize</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step active">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-label">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Header -->
|
||||
<h1 class="page-title">Your Hero Awaits</h1>
|
||||
<p class="page-subtitle">Review your character and begin your adventure</p>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
<!-- Character Summary Card -->
|
||||
<div class="confirm-card">
|
||||
<!-- Character Header -->
|
||||
<div class="character-header">
|
||||
<div class="character-name-display">
|
||||
<span class="name-label">Hero Name:</span>
|
||||
<h2 class="character-name">{{ character_name }}</h2>
|
||||
</div>
|
||||
<div class="character-class-origin">
|
||||
<span class="class-badge">{{ player_class.name }}</span>
|
||||
<span class="origin-badge">{{ origin.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
<!-- Two Column Layout -->
|
||||
<div class="confirm-content">
|
||||
<!-- Left Column: Character Details -->
|
||||
<div class="details-column">
|
||||
<!-- Origin Story -->
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">Your Origin</h3>
|
||||
<p class="origin-story">{{ origin.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Starting Location -->
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">Starting Location</h3>
|
||||
<div class="location-info">
|
||||
<div class="location-name">{{ origin.starting_location.name }}</div>
|
||||
<p class="location-description">{{ origin.starting_location.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Starting Bonus -->
|
||||
{% if origin.starting_bonus %}
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">Starting Bonus</h3>
|
||||
<div class="bonus-item">
|
||||
<span class="bonus-icon">✨</span>
|
||||
<div>
|
||||
<div class="bonus-text"><strong>{{ origin.starting_bonus.trait }}</strong></div>
|
||||
<div class="bonus-description">{{ origin.starting_bonus.description }}</div>
|
||||
<div class="bonus-effect">Effect: {{ origin.starting_bonus.effect }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Class & Stats -->
|
||||
<div class="stats-column">
|
||||
<!-- Class Info -->
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">{{ player_class.name }}</h3>
|
||||
<p class="class-description">{{ player_class.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Base Stats -->
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">Base Attributes</h3>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-box">
|
||||
<div class="stat-name">Strength</div>
|
||||
<div class="stat-value">{{ player_class.base_stats.strength }}</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-name">Dexterity</div>
|
||||
<div class="stat-value">{{ player_class.base_stats.dexterity }}</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-name">Constitution</div>
|
||||
<div class="stat-value">{{ player_class.base_stats.constitution }}</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-name">Intelligence</div>
|
||||
<div class="stat-value">{{ player_class.base_stats.intelligence }}</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-name">Wisdom</div>
|
||||
<div class="stat-value">{{ player_class.base_stats.wisdom }}</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-name">Charisma</div>
|
||||
<div class="stat-value">{{ player_class.base_stats.charisma }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Trees -->
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">Available Specializations</h3>
|
||||
<p class="spec-note">Choose your path as you level up</p>
|
||||
<div class="tree-list">
|
||||
{% for tree in player_class.skill_trees %}
|
||||
<div class="tree-preview">
|
||||
<div class="tree-header">
|
||||
<span class="tree-icon">🌲</span>
|
||||
<span class="tree-name">{{ tree.name if tree is mapping else tree }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Starting Equipment -->
|
||||
{% if player_class.starting_equipment %}
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">Starting Equipment</h3>
|
||||
<div class="gear-list">
|
||||
{% for item_id in player_class.starting_equipment %}
|
||||
<div class="gear-item">⚔️ {{ item_id|replace('_', ' ')|title }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
<!-- Final Confirmation -->
|
||||
<div class="confirmation-section">
|
||||
<div class="warning-box">
|
||||
<div class="warning-icon">⚠️</div>
|
||||
<div class="warning-content">
|
||||
<strong>Ready to begin?</strong>
|
||||
<p>Once created, your character's class and origin cannot be changed. You can create additional characters based on your subscription tier.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('character_views.create_confirm') }}" id="confirm-form">
|
||||
<!-- Navigation Buttons -->
|
||||
<div class="creation-nav">
|
||||
<a href="{{ url_for('character_views.create_customize') }}" class="btn btn-secondary">
|
||||
← Back to Customize
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary btn-create">
|
||||
Create Character & Begin Adventure ⚔️
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ===== PROGRESS INDICATOR ===== */
|
||||
.creation-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-number {
|
||||
background: var(--accent-gold);
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.progress-step.active .step-number {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--accent-gold);
|
||||
box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-step.active .step-label {
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: var(--border-primary);
|
||||
margin: 0 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.progress-step.completed ~ .progress-line {
|
||||
background: var(--accent-gold);
|
||||
}
|
||||
|
||||
/* ===== CONFIRM CARD ===== */
|
||||
.confirm-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-ornate);
|
||||
border-radius: 8px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Ornate corners */
|
||||
.confirm-card::before,
|
||||
.confirm-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid var(--accent-gold);
|
||||
}
|
||||
|
||||
.confirm-card::before {
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.confirm-card::after {
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* ===== CHARACTER HEADER ===== */
|
||||
.character-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.character-name-display {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.name-label {
|
||||
display: block;
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-4xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.character-class-origin {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.class-badge,
|
||||
.origin-badge {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 20px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.class-badge {
|
||||
background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-hover) 100%);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.origin-badge {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== CONFIRM CONTENT LAYOUT ===== */
|
||||
.confirm-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* ===== DETAIL SECTIONS ===== */
|
||||
.detail-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.detail-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
/* ===== ORIGIN STORY ===== */
|
||||
.origin-story {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ===== LOCATION INFO ===== */
|
||||
.location-name {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.location-description {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ===== BONUS LIST ===== */
|
||||
.bonus-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bonus-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-input);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bonus-icon {
|
||||
font-size: var(--text-xl);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bonus-text {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.bonus-description {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.bonus-effect {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-xs);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ===== CLASS INFO ===== */
|
||||
.class-description {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ===== STATS GRID ===== */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
padding: 1rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-name {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--accent-gold);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ===== SKILL TREES ===== */
|
||||
.spec-note {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tree-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.tree-preview {
|
||||
padding: 1rem;
|
||||
background: var(--bg-input);
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid var(--accent-gold);
|
||||
}
|
||||
|
||||
.tree-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.tree-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tree-description {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===== STARTING GEAR ===== */
|
||||
.gear-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gear-item {
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-input);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== WARNING BOX ===== */
|
||||
.confirmation-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(243, 156, 18, 0.1);
|
||||
border: 2px solid var(--accent-gold);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: var(--text-3xl);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.warning-content {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.warning-content strong {
|
||||
display: block;
|
||||
font-size: var(--text-base);
|
||||
color: var(--accent-gold);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== CREATE BUTTON ===== */
|
||||
.btn-create {
|
||||
font-size: var(--text-lg);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.confirm-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
.confirm-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.character-class-origin {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
425
public_web/templates/character/create_customize.html
Normal file
425
public_web/templates/character/create_customize.html
Normal file
@@ -0,0 +1,425 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Customize Your Character - Code of Conquest{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="creation-container">
|
||||
<!-- Progress Indicator -->
|
||||
<div class="creation-progress">
|
||||
<div class="progress-step completed">
|
||||
<div class="step-number">✓</div>
|
||||
<div class="step-label">Origin</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step completed">
|
||||
<div class="step-number">✓</div>
|
||||
<div class="step-label">Class</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step active">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-label">Customize</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-label">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Header -->
|
||||
<h1 class="page-title">Name Your Hero</h1>
|
||||
<p class="page-subtitle">What shall they call you in the halls of legend?</p>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
<!-- Customization Form -->
|
||||
<form method="POST" action="{{ url_for('character_views.create_customize') }}" id="customize-form">
|
||||
<div class="customize-content">
|
||||
<!-- Character Summary Panel -->
|
||||
<div class="summary-panel">
|
||||
<h3 class="panel-title">Your Character So Far</h3>
|
||||
|
||||
<div class="summary-section">
|
||||
<div class="summary-label">Origin</div>
|
||||
<div class="summary-value">{{ origin.name }}</div>
|
||||
<p class="summary-description">{{ origin.description[:100] }}...</p>
|
||||
</div>
|
||||
|
||||
<div class="summary-section">
|
||||
<div class="summary-label">Class</div>
|
||||
<div class="summary-value">{{ player_class.name }}</div>
|
||||
<p class="summary-description">{{ player_class.description[:100] }}...</p>
|
||||
</div>
|
||||
|
||||
<div class="summary-section">
|
||||
<div class="summary-label">Starting Location</div>
|
||||
<div class="summary-value">{{ origin.starting_location.name }}</div>
|
||||
<p class="summary-description">{{ origin.starting_location.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="summary-section">
|
||||
<div class="summary-label">Base Stats</div>
|
||||
<div class="stats-compact">
|
||||
<span class="stat-compact">STR {{ player_class.base_stats.strength }}</span>
|
||||
<span class="stat-compact">DEX {{ player_class.base_stats.dexterity }}</span>
|
||||
<span class="stat-compact">CON {{ player_class.base_stats.constitution }}</span>
|
||||
<span class="stat-compact">INT {{ player_class.base_stats.intelligence }}</span>
|
||||
<span class="stat-compact">WIS {{ player_class.base_stats.wisdom }}</span>
|
||||
<span class="stat-compact">CHA {{ player_class.base_stats.charisma }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Name Input Panel -->
|
||||
<div class="name-panel">
|
||||
<h3 class="panel-title">Choose Your Name</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="character-name">Character Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="character-name"
|
||||
name="name"
|
||||
class="form-input"
|
||||
placeholder="Enter your character's name"
|
||||
minlength="3"
|
||||
maxlength="30"
|
||||
required
|
||||
autofocus
|
||||
>
|
||||
<span class="form-help">3-30 characters</span>
|
||||
</div>
|
||||
|
||||
<div class="name-suggestions">
|
||||
<p class="suggestions-label">Need inspiration? Try these:</p>
|
||||
<div class="suggestion-buttons">
|
||||
<button type="button" class="suggestion-btn" onclick="setName('Aldric the Brave')">Aldric the Brave</button>
|
||||
<button type="button" class="suggestion-btn" onclick="setName('Lyra Shadowstep')">Lyra Shadowstep</button>
|
||||
<button type="button" class="suggestion-btn" onclick="setName('Theron Ironheart')">Theron Ironheart</button>
|
||||
<button type="button" class="suggestion-btn" onclick="setName('Mira Stormborn')">Mira Stormborn</button>
|
||||
<button type="button" class="suggestion-btn" onclick="setName('Kael Nightwhisper')">Kael Nightwhisper</button>
|
||||
<button type="button" class="suggestion-btn" onclick="setName('Aria Firehand')">Aria Firehand</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-icon">ℹ️</div>
|
||||
<div class="info-content">
|
||||
<strong>Character Creation Tips:</strong>
|
||||
<ul>
|
||||
<li>Your name will be visible to other players</li>
|
||||
<li>Choose a name that fits the fantasy RPG setting</li>
|
||||
<li>You can always create more characters later</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<div class="creation-nav">
|
||||
<a href="{{ url_for('character_views.create_class') }}" class="btn btn-secondary">
|
||||
← Back to Class
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Next: Confirm →
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ===== PROGRESS INDICATOR ===== */
|
||||
.creation-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-number {
|
||||
background: var(--accent-gold);
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.progress-step.active .step-number {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--accent-gold);
|
||||
box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-step.active .step-label {
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: var(--border-primary);
|
||||
margin: 0 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.progress-step.completed ~ .progress-line {
|
||||
background: var(--accent-gold);
|
||||
}
|
||||
|
||||
/* ===== CUSTOMIZE CONTENT LAYOUT ===== */
|
||||
.customize-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* ===== PANELS ===== */
|
||||
.summary-panel,
|
||||
.name-panel {
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-ornate);
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
/* ===== SUMMARY SECTIONS ===== */
|
||||
.summary-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.summary-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.summary-description {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===== COMPACT STATS ===== */
|
||||
.stats-compact {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-compact {
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== NAME INPUT ===== */
|
||||
.form-group {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: 0 0 10px rgba(243, 156, 18, 0.2);
|
||||
}
|
||||
|
||||
.form-help {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ===== NAME SUGGESTIONS ===== */
|
||||
.name-suggestions {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.suggestions-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.suggestion-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.suggestion-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.suggestion-btn:hover {
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--accent-gold);
|
||||
background: rgba(243, 156, 18, 0.1);
|
||||
}
|
||||
|
||||
/* ===== INFO BOX ===== */
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
border-left: 4px solid var(--accent-blue);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: var(--text-2xl);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-content strong {
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.info-content ul {
|
||||
margin: 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.info-content li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.customize-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.suggestion-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-compact {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-compact {
|
||||
font-size: var(--text-xs);
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function setName(name) {
|
||||
document.getElementById('character-name').value = name;
|
||||
document.getElementById('character-name').focus();
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
387
public_web/templates/character/create_origin.html
Normal file
387
public_web/templates/character/create_origin.html
Normal file
@@ -0,0 +1,387 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Choose Your Origin - Code of Conquest{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="creation-container">
|
||||
<!-- Progress Indicator -->
|
||||
<div class="creation-progress">
|
||||
<div class="progress-step active">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-label">Origin</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-label">Class</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-label">Customize</div>
|
||||
</div>
|
||||
<div class="progress-line"></div>
|
||||
<div class="progress-step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-label">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Header -->
|
||||
<h1 class="page-title">Choose Your Origin</h1>
|
||||
<p class="page-subtitle">Every hero has a beginning. Where does your story start?</p>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
<!-- Origin Selection Form -->
|
||||
<form method="POST" action="{{ url_for('character_views.create_origin') }}" id="origin-form">
|
||||
<div class="origin-grid">
|
||||
{% for origin in origins %}
|
||||
<div class="origin-card" data-origin-id="{{ origin.id }}">
|
||||
<input
|
||||
type="radio"
|
||||
name="origin_id"
|
||||
value="{{ origin.id }}"
|
||||
id="origin-{{ origin.id }}"
|
||||
class="origin-radio"
|
||||
required
|
||||
>
|
||||
<label for="origin-{{ origin.id }}" class="origin-label">
|
||||
<div class="origin-header">
|
||||
<h3 class="origin-title">{{ origin.name }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="origin-description">
|
||||
<p class="description-preview">
|
||||
{{ origin.description[:180] }}{% if origin.description|length > 180 %}...{% endif %}
|
||||
</p>
|
||||
{% if origin.description|length > 180 %}
|
||||
<div class="description-full" style="display: none;">
|
||||
<p>{{ origin.description }}</p>
|
||||
</div>
|
||||
<button type="button" class="expand-btn" onclick="toggleDescription(this)">
|
||||
<span class="expand-text">Read More</span>
|
||||
<span class="expand-icon">▼</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="origin-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Starting Location:</span>
|
||||
<span class="detail-value">{{ origin.starting_location.name }}</span>
|
||||
</div>
|
||||
|
||||
{% if origin.starting_bonus %}
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Starting Bonus:</span>
|
||||
<div class="bonus-display">
|
||||
<strong>{{ origin.starting_bonus.trait }}</strong>
|
||||
<p class="bonus-description">{{ origin.starting_bonus.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Navigation Buttons -->
|
||||
<div class="creation-nav">
|
||||
<a href="{{ url_for('character_views.list_characters') }}" class="btn btn-secondary">
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Next: Choose Class →
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ===== CHARACTER CREATION CONTAINER ===== */
|
||||
.creation-container {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* ===== PROGRESS INDICATOR ===== */
|
||||
.creation-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 3rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-input);
|
||||
border: 2px solid var(--border-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-step.active .step-number {
|
||||
background: var(--accent-gold);
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--bg-primary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.progress-step.active .step-label {
|
||||
color: var(--accent-gold);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress-step.completed .step-number {
|
||||
background: var(--accent-green);
|
||||
border-color: var(--accent-green);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.progress-step.completed .step-label {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: var(--border-primary);
|
||||
}
|
||||
|
||||
/* ===== ORIGIN GRID ===== */
|
||||
.origin-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* ===== ORIGIN CARDS ===== */
|
||||
.origin-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.origin-radio {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.origin-label {
|
||||
display: block;
|
||||
padding: 2rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.origin-label:hover {
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.origin-radio:checked + .origin-label {
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: var(--shadow-glow);
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(243, 156, 18, 0.1) 100%);
|
||||
}
|
||||
|
||||
.origin-header {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.origin-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.origin-description {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.description-preview {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.description-full {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.description-full p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent-gold);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
color: var(--accent-gold-hover);
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: var(--text-xs);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.expand-btn.expanded .expand-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.origin-details {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bonus-display {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-input);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bonus-display strong {
|
||||
color: var(--accent-gold);
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.bonus-description {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
/* ===== CREATION NAVIGATION ===== */
|
||||
.creation-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.creation-nav .btn {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.creation-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.origin-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.creation-progress {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.creation-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.creation-nav .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function toggleDescription(button) {
|
||||
const card = button.closest('.origin-card');
|
||||
const preview = card.querySelector('.description-preview');
|
||||
const full = card.querySelector('.description-full');
|
||||
const expandText = button.querySelector('.expand-text');
|
||||
|
||||
if (full.style.display === 'none') {
|
||||
// Expand
|
||||
preview.style.display = 'none';
|
||||
full.style.display = 'block';
|
||||
expandText.textContent = 'Read Less';
|
||||
button.classList.add('expanded');
|
||||
} else {
|
||||
// Collapse
|
||||
preview.style.display = 'block';
|
||||
full.style.display = 'none';
|
||||
expandText.textContent = 'Read More';
|
||||
button.classList.remove('expanded');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
485
public_web/templates/character/detail.html
Normal file
485
public_web/templates/character/detail.html
Normal file
@@ -0,0 +1,485 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ character.name }} - Code of Conquest{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="character-detail-container">
|
||||
<!-- Header -->
|
||||
<div class="detail-header">
|
||||
<div class="header-left">
|
||||
<h1 class="character-name">{{ character.name }}</h1>
|
||||
<p class="character-subtitle">
|
||||
Level {{ character.level }} {{ character.player_class.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<a href="{{ url_for('character_views.list_characters') }}" class="btn btn-secondary">
|
||||
← Back to Characters
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<div class="detail-grid">
|
||||
<!-- Left Column: Stats & Info -->
|
||||
<div class="detail-section">
|
||||
<h2 class="section-title">Character Information</h2>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Class:</span>
|
||||
<span class="info-value">{{ character.player_class.name }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Origin:</span>
|
||||
<span class="info-value">{{ character.origin_name }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Level:</span>
|
||||
<span class="info-value">{{ character.level }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Experience:</span>
|
||||
<span class="info-value">{{ character.experience }} XP</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Gold:</span>
|
||||
<span class="info-value gold">{{ character.gold }} 💰</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Skill Points:</span>
|
||||
<span class="info-value">{{ character.available_skill_points }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Base Stats -->
|
||||
<h3 class="subsection-title">Base Statistics</h3>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">STR</span>
|
||||
<span class="stat-value">{{ character.base_stats.strength }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">DEX</span>
|
||||
<span class="stat-value">{{ character.base_stats.dexterity }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">CON</span>
|
||||
<span class="stat-value">{{ character.base_stats.constitution }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">INT</span>
|
||||
<span class="stat-value">{{ character.base_stats.intelligence }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">WIS</span>
|
||||
<span class="stat-value">{{ character.base_stats.wisdom }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-name">CHA</span>
|
||||
<span class="stat-value">{{ character.base_stats.charisma }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Derived Stats -->
|
||||
<h3 class="subsection-title">Derived Statistics</h3>
|
||||
<div class="info-card">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Hit Points:</span>
|
||||
<span class="info-value">{{ character.current_hp }} / {{ character.max_hp }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Mana Points:</span>
|
||||
<span class="info-value">{{ character.base_stats.mana_points }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Defense:</span>
|
||||
<span class="info-value">{{ character.base_stats.defense }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Resistance:</span>
|
||||
<span class="info-value">{{ character.base_stats.resistance }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Skills, Inventory, etc -->
|
||||
<div class="detail-section">
|
||||
<!-- Unlocked Skills -->
|
||||
<h2 class="section-title">Unlocked Skills</h2>
|
||||
{% if character.unlocked_skills %}
|
||||
<div class="skills-list">
|
||||
{% for skill_id in character.unlocked_skills %}
|
||||
<div class="skill-badge">{{ skill_id }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-text">No skills unlocked yet.</p>
|
||||
{% endif %}
|
||||
|
||||
<a href="{{ url_for('character_views.view_skills', character_id=character.character_id) }}" class="btn btn-primary btn-block">
|
||||
Manage Skills
|
||||
</a>
|
||||
|
||||
<!-- Equipment -->
|
||||
<h2 class="section-title">Equipment</h2>
|
||||
{% if character.equipped %}
|
||||
<div class="equipment-list">
|
||||
{% for slot, item in character.equipped.items() %}
|
||||
<div class="equipment-item">
|
||||
<span class="equipment-slot">{{ slot|title }}:</span>
|
||||
<span class="equipment-name">{{ item.name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-text">No equipment equipped.</p>
|
||||
{% endif %}
|
||||
|
||||
<!-- Inventory -->
|
||||
<h2 class="section-title">Inventory</h2>
|
||||
{% if character.inventory %}
|
||||
<div class="inventory-list">
|
||||
{% for item in character.inventory %}
|
||||
<div class="inventory-item">
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
<span class="item-type">{{ item.item_type }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-text">Inventory is empty.</p>
|
||||
{% endif %}
|
||||
|
||||
<!-- Active Quests -->
|
||||
<h2 class="section-title">Active Quests</h2>
|
||||
{% if character.active_quests %}
|
||||
<div class="quests-list">
|
||||
{% for quest_id in character.active_quests %}
|
||||
<div class="quest-item">{{ quest_id }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-text">No active quests.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Origin Story -->
|
||||
<div class="origin-story-section">
|
||||
<h2 class="section-title">Origin: {{ character.origin.name }}</h2>
|
||||
<p class="origin-description">{{ character.origin.description }}</p>
|
||||
|
||||
<div class="starting-location">
|
||||
<h3 class="subsection-title">Starting Location</h3>
|
||||
<p><strong>{{ character.origin.starting_location.name }}</strong> ({{ character.origin.starting_location.region }})</p>
|
||||
<p class="location-description">{{ character.origin.starting_location.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="character-actions">
|
||||
<form method="POST" action="{{ url_for('character_views.delete_character', character_id=character.character_id) }}"
|
||||
onsubmit="return confirm('Are you sure you want to delete {{ character.name }}? This cannot be undone.');">
|
||||
<button type="submit" class="btn btn-danger">
|
||||
Delete Character
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ===== CHARACTER DETAIL CONTAINER ===== */
|
||||
.character-detail-container {
|
||||
max-width: 1400px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-3xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.character-subtitle {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== GRID LAYOUT ===== */
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* ===== SECTION TITLES ===== */
|
||||
.section-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin: 0 0 1rem 0;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.subsection-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-primary);
|
||||
margin: 1.5rem 0 1rem 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ===== INFO CARD ===== */
|
||||
.info-card {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--bg-secondary);
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.info-value.gold {
|
||||
color: var(--accent-gold);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== STATS GRID ===== */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-name {
|
||||
display: block;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--accent-gold);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ===== SKILLS ===== */
|
||||
.skills-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skill-badge {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--accent-gold);
|
||||
border-radius: 12px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== EQUIPMENT & INVENTORY ===== */
|
||||
.equipment-list,
|
||||
.inventory-list {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.equipment-item,
|
||||
.inventory-item {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-slot,
|
||||
.item-type {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.equipment-name,
|
||||
.item-name {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== QUESTS ===== */
|
||||
.quests-list {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.quest-item {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== ORIGIN STORY ===== */
|
||||
.origin-story-section {
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.origin-description {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.narrative-hooks {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.narrative-hooks li {
|
||||
background: var(--bg-input);
|
||||
border-left: 3px solid var(--accent-gold);
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.starting-location {
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.location-description {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
/* ===== EMPTY STATE ===== */
|
||||
.empty-text {
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.character-actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: transparent;
|
||||
border: 2px solid var(--accent-red);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--accent-red);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.character-detail-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
455
public_web/templates/character/list.html
Normal file
455
public_web/templates/character/list.html
Normal file
@@ -0,0 +1,455 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Your Characters - Code of Conquest{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="characters-container">
|
||||
<div class="characters-header">
|
||||
<div class="header-left">
|
||||
<h1 class="page-title">Your Characters</h1>
|
||||
<p class="page-subtitle">
|
||||
{{ characters|length }} of {{ max_characters }} characters
|
||||
<span class="tier-badge">{{ current_tier|upper }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
{% if can_create %}
|
||||
<a href="{{ url_for('character_views.create_origin') }}" class="btn btn-primary">
|
||||
⚔️ Create New Character
|
||||
</a>
|
||||
{% else %}
|
||||
<button class="btn btn-primary" disabled title="Character limit reached for {{ current_tier }} tier">
|
||||
Character Limit Reached
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="decorative-line"></div>
|
||||
|
||||
{% if characters %}
|
||||
<div class="characters-grid">
|
||||
{% for character in characters %}
|
||||
<div class="character-card">
|
||||
<div class="character-card-header">
|
||||
<h3 class="character-name">{{ character.name }}</h3>
|
||||
<span class="character-level">Level {{ character.level }}</span>
|
||||
</div>
|
||||
|
||||
<div class="character-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Class:</span>
|
||||
<span class="info-value">{{ character.class_name or character.class|title }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Origin:</span>
|
||||
<span class="info-value">{{ character.origin|replace('_', ' ')|title }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Gold:</span>
|
||||
<span class="info-value gold">{{ character.gold }} 💰</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Experience:</span>
|
||||
<span class="info-value">{{ character.experience }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Sessions Section #}
|
||||
<div class="character-sessions">
|
||||
{% if character.sessions %}
|
||||
<div class="sessions-header">
|
||||
<span class="sessions-label">Active Sessions:</span>
|
||||
</div>
|
||||
<div class="sessions-list">
|
||||
{% for sess in character.sessions[:3] %}
|
||||
<a href="{{ url_for('game.play_session', session_id=sess.session_id) }}" class="session-link">
|
||||
<span class="session-turn">Turn {{ sess.turn_number or 0 }}</span>
|
||||
<span class="session-status {{ sess.status or 'active' }}">{{ sess.status or 'active' }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% if character.sessions|length > 3 %}
|
||||
<span class="sessions-more">+{{ character.sessions|length - 3 }} more</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="character-actions">
|
||||
{# Primary Play Action #}
|
||||
{% if character.sessions %}
|
||||
<a href="{{ url_for('game.play_session', session_id=character.sessions[0].session_id) }}" class="btn btn-primary btn-sm">
|
||||
Continue Playing
|
||||
</a>
|
||||
<form method="POST" action="{{ url_for('character_views.create_session', character_id=character.character_id) }}" style="display: inline;">
|
||||
<button type="submit" class="btn btn-secondary btn-sm" title="Start a new adventure">
|
||||
New Session
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form method="POST" action="{{ url_for('character_views.create_session', character_id=character.character_id) }}" style="display: inline;">
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
Start Adventure
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
{# Secondary Actions #}
|
||||
<a href="{{ url_for('character_views.view_character', character_id=character.character_id) }}" class="btn btn-secondary btn-sm">
|
||||
Details
|
||||
</a>
|
||||
<a href="{{ url_for('character_views.view_skills', character_id=character.character_id) }}" class="btn btn-secondary btn-sm">
|
||||
Skills
|
||||
</a>
|
||||
<form method="POST" action="{{ url_for('character_views.delete_character', character_id=character.character_id) }}" onsubmit="return confirm('Are you sure you want to delete {{ character.name }}? This cannot be undone.');" style="display: inline;">
|
||||
<button type="submit" class="btn btn-danger btn-sm">
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">⚔️</div>
|
||||
<h2 class="empty-title">No Characters Yet</h2>
|
||||
<p class="empty-message">Begin your adventure by creating your first character!</p>
|
||||
<a href="{{ url_for('character_views.create_origin') }}" class="btn btn-primary btn-lg">
|
||||
Create Your First Character
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ===== CHARACTERS CONTAINER ===== */
|
||||
.characters-container {
|
||||
max-width: 1400px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
.characters-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.tier-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: var(--accent-gold);
|
||||
color: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ===== CHARACTERS GRID ===== */
|
||||
.characters-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* ===== CHARACTER CARDS ===== */
|
||||
.character-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.character-card:hover {
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.character-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.character-level {
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 12px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== CHARACTER INFO ===== */
|
||||
.character-info {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--bg-input);
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.info-value.gold {
|
||||
color: var(--accent-gold);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== STATS COMPACT ===== */
|
||||
.character-stats-compact {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-input);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.stat-mini {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
.stat-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.stat-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--accent-red-light) 0%, var(--accent-green) 100%);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-text {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ===== CHARACTER SESSIONS ===== */
|
||||
.character-sessions {
|
||||
margin-bottom: 1rem;
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.sessions-header {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sessions-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sessions-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.session-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.session-link:hover {
|
||||
border-color: var(--accent-gold);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.session-turn {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.session-status {
|
||||
font-size: var(--text-xs);
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.session-status.active {
|
||||
background: var(--accent-green);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.session-status.paused {
|
||||
background: var(--accent-gold);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.session-status.ended {
|
||||
background: var(--text-muted);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.sessions-more {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
padding: 0.35rem 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== CHARACTER ACTIONS ===== */
|
||||
.character-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: transparent;
|
||||
border: 2px solid var(--accent-red);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--accent-red);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== EMPTY STATE ===== */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px dashed var(--border-primary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 1rem 2rem;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 768px) {
|
||||
.characters-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.characters-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-right .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.characters-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.character-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.character-actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user