87 lines
2.9 KiB
HTML
87 lines
2.9 KiB
HTML
{% extends group_config.template_base or "base_demo.html" %}
|
|
|
|
{% block title %}Settings{% endblock %}
|
|
|
|
{% block content %}
|
|
<main class="container">
|
|
<hgroup>
|
|
<h1>⚙️ Settings</h1>
|
|
<p>Customize your Crumbforest experience</p>
|
|
</hgroup>
|
|
|
|
<div class="grid">
|
|
<!-- Theme Selection -->
|
|
<article>
|
|
<header>
|
|
<h3>🎨 Appearance</h3>
|
|
</header>
|
|
|
|
<form action="/settings/theme" method="post">
|
|
<label for="theme">Theme</label>
|
|
<select name="theme" id="theme" onchange="this.form.submit()">
|
|
{% for variant_id, variant in theme_variants.items() %}
|
|
<option value="{{ variant_id }}" {% if user.theme==variant_id %}selected{% endif %}>
|
|
{{ variant.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
<small>
|
|
Current: <strong>{{ theme_variants[user.theme].name if user.theme in theme_variants else user.theme
|
|
}}</strong>
|
|
</small>
|
|
</form>
|
|
</article>
|
|
|
|
<!-- Accessibility Settings -->
|
|
<article>
|
|
<header>
|
|
<h3>♿ Accessibility</h3>
|
|
</header>
|
|
|
|
<form action="/settings/accessibility" method="post">
|
|
<label>
|
|
<input type="checkbox" name="high_contrast" {% if user.accessibility and
|
|
user.accessibility.high_contrast %}checked{% endif %}>
|
|
High Contrast Mode
|
|
</label>
|
|
|
|
<label>
|
|
<input type="checkbox" name="animation_reduced" {% if user.accessibility and
|
|
user.accessibility.animation_reduced %}checked{% endif %}>
|
|
Reduce Animations
|
|
</label>
|
|
|
|
<label for="font_size">Font Size</label>
|
|
<select name="font_size" id="font_size">
|
|
<option value="normal" {% if not user.accessibility or user.accessibility.font_size !='large'
|
|
%}selected{% endif %}>Normal</option>
|
|
<option value="large" {% if user.accessibility and user.accessibility.font_size=='large'
|
|
%}selected{% endif %}>Large</option>
|
|
</select>
|
|
|
|
<button type="submit" class="contrast">Save Accessibility Settings</button>
|
|
</form>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- Account Info (Read Only) -->
|
|
<article>
|
|
<header>
|
|
<h3>👤 Account Info</h3>
|
|
</header>
|
|
<dl>
|
|
<dt>Email</dt>
|
|
<dd>{{ user.email }}</dd>
|
|
|
|
<dt>Group</dt>
|
|
<dd>
|
|
<span class="badge">{{ group_config.name }}</span>
|
|
</dd>
|
|
|
|
<dt>Role</dt>
|
|
<dd>{{ user.role }}</dd>
|
|
</dl>
|
|
</article>
|
|
</main>
|
|
{% endblock %} |