426 lines
12 KiB
HTML
426 lines
12 KiB
HTML
{% 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 %}
|