football2801
6c891d6fad
- Collapse orientation to landscape/portrait (ribbon left = portrait standard) - Add OrientationPicker component and wire settings sheet in HomeView - Add password confirmation field to registration form (RepeatedType) - Build frontend SPA to public/build/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
82 lines
4.6 KiB
Twig
82 lines
4.6 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Name your frame — pictureFrame</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: system-ui, sans-serif; min-height: 100dvh; background: #fdf6ee; color: #3a2e22;
|
|
display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; }
|
|
.card { width: 100%; max-width: 400px; }
|
|
h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: .25rem; }
|
|
.subtitle { font-size: .875rem; color: #8a7060; margin-bottom: 1.5rem; }
|
|
.field { margin-bottom: 1.25rem; }
|
|
label { display: block; font-size: .8125rem; font-weight: 600; color: #8a7060; margin-bottom: .375rem; }
|
|
input[type="text"], select {
|
|
width: 100%; min-height: 44px; padding: 0 .875rem; border: 1px solid #e8d9c4;
|
|
border-radius: 10px; background: #fff; font-size: 1rem; color: #3a2e22; }
|
|
select { padding-right: 2rem; appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7060' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat; background-position: right .875rem center; }
|
|
.field-error { margin-top: .375rem; font-size: .8125rem; color: #c0392b; }
|
|
.hint { margin-top: .375rem; font-size: .8125rem; color: #8a7060; }
|
|
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
|
|
margin-top: 1.5rem; background: #c97c3a; color: #fff; border: none; border-radius: 9999px;
|
|
font-size: 1rem; font-weight: 700; cursor: pointer; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>Name your frame</h1>
|
|
<p class="subtitle">You can always change these settings later.</p>
|
|
|
|
{% if error %}
|
|
<p class="field-error" role="alert" style="margin-bottom:1rem">{{ error }}</p>
|
|
{% endif %}
|
|
|
|
<form method="post" novalidate>
|
|
<div class="field">
|
|
<label for="name">Frame name</label>
|
|
<input type="text" id="name" name="name"
|
|
value="{{ device.name }}"
|
|
placeholder="e.g. Living room frame"
|
|
maxlength="100" required autofocus>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="orientation">Display orientation</label>
|
|
<select id="orientation" name="orientation">
|
|
<option value="landscape" {% if device.orientation.value == 'landscape' %}selected{% endif %}>Landscape — ribbon at bottom</option>
|
|
<option value="portrait" {% if device.orientation.value == 'portrait' %}selected{% endif %}>Portrait — ribbon on left</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="rotation_interval_hours">Rotation frequency</label>
|
|
<select id="rotation_interval_hours" name="rotation_interval_hours">
|
|
<option value="6" {% if device.rotationIntervalHours == 6 %}selected{% endif %}>Every 6 hours</option>
|
|
<option value="12" {% if device.rotationIntervalHours == 12 %}selected{% endif %}>Every 12 hours</option>
|
|
<option value="24" {% if device.rotationIntervalHours == 24 %}selected{% endif %}>Daily (every 24 hours)</option>
|
|
<option value="48" {% if device.rotationIntervalHours == 48 %}selected{% endif %}>Every 2 days</option>
|
|
<option value="168" {% if device.rotationIntervalHours == 168 %}selected{% endif %}>Weekly</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="uniqueness_window">Uniqueness window</label>
|
|
<select id="uniqueness_window" name="uniqueness_window">
|
|
<option value="5" {% if device.uniquenessWindow == 5 %}selected{% endif %}>5 cycles</option>
|
|
<option value="10" {% if device.uniquenessWindow == 10 %}selected{% endif %}>10 cycles (default)</option>
|
|
<option value="20" {% if device.uniquenessWindow == 20 %}selected{% endif %}>20 cycles</option>
|
|
<option value="50" {% if device.uniquenessWindow == 50 %}selected{% endif %}>50 cycles</option>
|
|
</select>
|
|
<p class="hint">Images won't repeat until this many other photos have been shown.</p>
|
|
</div>
|
|
|
|
<button type="submit" class="btn">Save & finish setup</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|