79 lines
3.1 KiB
HTML
79 lines
3.1 KiB
HTML
|
|
{% extends "base.html" %}
|
|
{% block content %}
|
|
<section class="card">
|
|
<h1>Countdown Generator</h1>
|
|
<form method="post" action="{{ url_for('preview') }}" class="grid">
|
|
<div class="field">
|
|
<label>Countdown title</label>
|
|
<input type="text" name="title" placeholder="My Event" value="{{ title }}">
|
|
</div>
|
|
<div class="field">
|
|
<label>Target date/time (ISO 8601)</label>
|
|
<input type="datetime-local" name="target" value="{{ target }}">
|
|
|
|
</div>
|
|
<div class="field">
|
|
<label>Color scheme</label>
|
|
<select name="scheme">
|
|
<option value="dark" {{ 'selected' if scheme=='dark' else '' }}>Dark</option>
|
|
<option value="light" {{ 'selected' if scheme=='light' else '' }}>Light</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Accent color</label>
|
|
<input type="color" name="accent" value="{{ accent }}">
|
|
</div>
|
|
<div class="field">
|
|
<label>Foreground text color</label>
|
|
<input type="color" name="fg" value="{{ fg }}">
|
|
</div>
|
|
<div class="field">
|
|
<label>Background color</label>
|
|
<input type="color" name="bg" value="{{ bg }}">
|
|
</div>
|
|
<div class="field">
|
|
<label>Corner radius (px)</label>
|
|
<input type="number" name="radius" min="0" max="48" step="1" value="{{ radius }}">
|
|
</div>
|
|
<div class="field">
|
|
<label>Shadow strength</label>
|
|
<select name="shadow">
|
|
<option value="none" {{ 'selected' if shadow=='none' else '' }}>None</option>
|
|
<option value="sm" {{ 'selected' if shadow=='sm' else '' }}>Small</option>
|
|
<option value="md" {{ 'selected' if shadow=='md' else '' }}>Medium</option>
|
|
<option value="lg" {{ 'selected' if shadow=='lg' else '' }}>Large</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Font (CSS font-family)</label>
|
|
<input type="text" name="font" value="{{ font }}" placeholder="system-ui, 'Segoe UI', sans-serif">
|
|
</div>
|
|
<div class="field">
|
|
<label>Show milliseconds</label>
|
|
<select name="millis">
|
|
<option value="0" {{ '' if show_millis else 'selected' }}>No</option>
|
|
<option value="1" {{ 'selected' if show_millis else '' }}>Yes</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>Round to nearest</label>
|
|
<select name="rounded_unit">
|
|
<option value="none" {{ 'selected' if rounded_unit=='none' else '' }}>None</option>
|
|
<option value="minutes" {{ 'selected' if rounded_unit=='minutes' else '' }}>Minutes</option>
|
|
<option value="hours" {{ 'selected' if rounded_unit=='hours' else '' }}>Hours</option>
|
|
<option value="days" {{ 'selected' if rounded_unit=='days' else '' }}>Days</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button type="submit">Generate Countdown →</button>
|
|
</div>
|
|
</form>
|
|
<p class="muted">
|
|
You'll get a shareable URL with all your settings embedded as query parameters.
|
|
You can also hit this page with query params to prefill the form.
|
|
</p>
|
|
</section>
|
|
{% endblock %}
|