Rolf
4ae515bbab
Version is set via APP_VERSION in .env, defaulting to 1.0.0. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
92 lines
3.9 KiB
HTML
92 lines
3.9 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Profile – Skins & Pins{% endblock %}
|
||
|
||
{% block extra_head %}
|
||
<link rel="stylesheet" href="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.css">
|
||
<script src="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.js"></script>
|
||
<script src="/static/avatar-crop.js"></script>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="page">
|
||
<div class="page-header">
|
||
<h1>Profile</h1>
|
||
</div>
|
||
|
||
{% if success %}<div class="alert alert-success">{{ success }}</div>{% endif %}
|
||
|
||
<div x-data="avatarUpload('/profile', '/profile')"
|
||
x-init="tab = '{{ 'upload' if user.avatar and user.avatar.startswith('/') else 'emoji' }}';
|
||
previewUrl = '{{ user.avatar if user.avatar and user.avatar.startswith('/') else '' }}' || null;">
|
||
<form action="/profile" method="post" enctype="multipart/form-data"
|
||
@submit="submitForm($event)">
|
||
<div class="card">
|
||
<div class="form-group">
|
||
<label for="name">Name</label>
|
||
{% if errors and errors.name %}<div class="alert alert-error">{{ errors.name }}</div>{% endif %}
|
||
<input type="text" id="name" name="name" value="{{ user.name or '' }}" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="handicap">Handicap (0–54)</label>
|
||
{% if errors and errors.handicap %}<div class="alert alert-error">{{ errors.handicap }}</div>{% endif %}
|
||
<input type="number" id="handicap" name="handicap" min="0" max="54" step="0.1"
|
||
value="{{ user.handicap or '' }}" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Avatar</label>
|
||
{% if errors and errors.avatar %}<div class="alert alert-error">{{ errors.avatar }}</div>{% endif %}
|
||
|
||
<div class="avatar-tabs">
|
||
<button type="button" class="avatar-tab" :class="{ active: tab === 'emoji' }" @click="tab = 'emoji'">Emoji</button>
|
||
<button type="button" class="avatar-tab" :class="{ active: tab === 'upload' }" @click="tab = 'upload'">Photo</button>
|
||
</div>
|
||
|
||
<div x-show="tab === 'emoji'">
|
||
<div class="avatar-grid" style="margin-top: 0.75rem;">
|
||
{% for a in avatars %}
|
||
<div class="avatar-option">
|
||
<input type="radio" name="avatar_emoji" id="avatar_{{ loop.index }}" value="{{ a }}"
|
||
{% if user.avatar == a %}checked{% endif %}>
|
||
<label for="avatar_{{ loop.index }}">{{ a }}</label>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<div x-show="tab === 'upload'" style="margin-top: 0.75rem;">
|
||
<div x-show="previewUrl" style="margin-bottom: 0.75rem; display:flex; align-items:center; gap:1rem;">
|
||
<img :src="previewUrl" class="avatar-preview">
|
||
<span style="color:var(--text-muted); font-size:0.85rem;">Tap to change</span>
|
||
</div>
|
||
<label class="file-input-label">
|
||
<span x-text="previewUrl ? 'Choose different photo' : 'Choose photo'"></span>
|
||
<input type="file" name="avatar_file" accept="image/jpeg,image/png,image/webp,image/gif"
|
||
style="display:none" @change="openFile($event)">
|
||
</label>
|
||
<p style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.4rem;">JPEG, PNG, WebP or GIF · max 2 MB</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||
</form>
|
||
|
||
{% include "partials/crop_modal.html" %}
|
||
</div>
|
||
|
||
<div class="card" style="margin-top:1.5rem;">
|
||
<h2 style="font-size:0.95rem; color:var(--text-muted); margin-bottom:0.75rem;">About</h2>
|
||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
||
<span style="font-weight:500;">Skins & Pins</span>
|
||
<span style="color:var(--text-muted); font-size:0.85rem; font-family:monospace;">v{{ app_version }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 1.5rem;">
|
||
<a href="/logout" class="btn btn-ghost">Log out</a>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|