igna/countdowngen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Spanish; new URL encoding scheme

Browse Source
This commit is contained in:
Ignacio Rivero
2025-08-13 14:43:56 -03:00
parent 7d7770b7f9
commit 59d9a7b482
8 changed files with 361 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
templates/countdown.html
View File

@@ -2,27 +2,32 @@
{% extends "base.html" %}
{% block content %}
<section class="card {{ 'shadow-' + shadow if shadow != 'none' else '' }}">
<div class="language-selector">
<a href="{{ request.query_string.decode('utf-8')|url_with_lang('en') }}" class="{{ 'active' if lang == 'en' else '' }}">EN</a>
<a href="{{ request.query_string.decode('utf-8')|url_with_lang('es') }}" class="{{ 'active' if lang == 'es' else '' }}">ES</a>
</div>
<h1 class="title">{{ title }}</h1>
<p class="subtitle">
Target: <code id="targetText"></code>
{{ t('countdown.target_label') }} <code id="targetText"></code>
</p>
<div id="countdown"
class="countdown"
data-target="{{ target }}"
data-show-millis="{{ millis }}"
data-rounded-unit="{{ rounded_unit }}">
data-rounded-unit="{{ rounded_unit }}"
data-lang="{{ lang }}">
<!-- JS populates these -->
<div class="unit"><span id="d">--</span><label>days</label></div>
<div class="unit"><span id="h">--</span><label>hours</label></div>
<div class="unit"><span id="m">--</span><label>minutes</label></div>
<div class="unit"><span id="s">--</span><label>seconds</label></div>
<div class="unit millis" id="millisWrap" hidden><span id="ms">---</span><label>ms</label></div>
<div class="unit"><span id="d">--</span><label id="daysLabel">{{ t('countdown.days') }}</label></div>
<div class="unit"><span id="h">--</span><label id="hoursLabel">{{ t('countdown.hours') }}</label></div>
<div class="unit"><span id="m">--</span><label id="minutesLabel">{{ t('countdown.minutes') }}</label></div>
<div class="unit"><span id="s">--</span><label id="secondsLabel">{{ t('countdown.seconds') }}</label></div>
<div class="unit millis" id="millisWrap" hidden><span id="ms">---</span><label id="msLabel">{{ t('countdown.ms') }}</label></div>
</div>
<div class="share">
<button id="copyLink">Copy sharable link</button>
<a id="editLink" href="{{ url_for('index') }}?{{ request.query_string.decode('utf-8') }}">Edit</a>
<button id="copyLink">{{ t('countdown.copy_link') }}</button>
<a id="editLink" href="{{ url_for('index') }}?{{ request.query_string.decode('utf-8') }}">{{ t('countdown.edit') }}</a>
</div>
<p id="status" class="muted"></p>

62
templates/index.html
View File

@@ -2,77 +2,81 @@
{% extends "base.html" %}
{% block content %}
<section class="card">
<h1>Countdown Generator</h1>
<div class="language-selector">
<a href="{{ request.query_string.decode('utf-8')|url_with_lang('en') }}" class="{{ 'active' if lang == 'en' else '' }}">EN</a>
<a href="{{ request.query_string.decode('utf-8')|url_with_lang('es') }}" class="{{ 'active' if lang == 'es' else '' }}">ES</a>
</div>
<h1>{{ t('app_title') }}</h1>
<form method="post" action="{{ url_for('preview') }}" class="grid">
<input type="hidden" name="lang" value="{{ lang }}">
<div class="field">
<label>Countdown title</label>
<input type="text" name="title" placeholder="My Event" value="{{ title }}">
<label>{{ t('form.countdown_title_label') }}</label>
<input type="text" name="title" placeholder="{{ t('form.countdown_title_placeholder') }}" value="{{ title }}">
</div>
<div class="field">
<label>Target date/time (ISO 8601)</label>
<label>{{ t('form.target_date_label') }}</label>
<input type="datetime-local" name="target" value="{{ target }}">
</div>
<div class="field">
<label>Color scheme</label>
<label>{{ t('form.color_scheme_label') }}</label>
<select name="scheme">
<option value="dark" {{ 'selected' if scheme=='dark' else '' }}>Dark</option>
<option value="light" {{ 'selected' if scheme=='light' else '' }}>Light</option>
<option value="dark" {{ 'selected' if scheme=='dark' else '' }}>{{ t('form.scheme_dark') }}</option>
<option value="light" {{ 'selected' if scheme=='light' else '' }}>{{ t('form.scheme_light') }}</option>
</select>
</div>
<div class="field">
<label>Accent color</label>
<label>{{ t('form.accent_color_label') }}</label>
<input type="color" name="accent" value="{{ accent }}">
</div>
<div class="field">
<label>Foreground text color</label>
<label>{{ t('form.foreground_color_label') }}</label>
<input type="color" name="fg" value="{{ fg }}">
</div>
<div class="field">
<label>Background color</label>
<label>{{ t('form.background_color_label') }}</label>
<input type="color" name="bg" value="{{ bg }}">
</div>
<div class="field">
<label>Corner radius (px)</label>
<label>{{ t('form.corner_radius_label') }}</label>
<input type="number" name="radius" min="0" max="48" step="1" value="{{ radius }}">
</div>
<div class="field">
<label>Shadow strength</label>
<label>{{ t('form.shadow_strength_label') }}</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>
<option value="none" {{ 'selected' if shadow=='none' else '' }}>{{ t('form.shadow_none') }}</option>
<option value="sm" {{ 'selected' if shadow=='sm' else '' }}>{{ t('form.shadow_small') }}</option>
<option value="md" {{ 'selected' if shadow=='md' else '' }}>{{ t('form.shadow_medium') }}</option>
<option value="lg" {{ 'selected' if shadow=='lg' else '' }}>{{ t('form.shadow_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">
<label>{{ t('form.font_label') }}</label>
<input type="text" name="font" value="{{ font }}" placeholder="{{ t('form.font_placeholder') }}">
</div>
<div class="field">
<label>Show milliseconds</label>
<label>{{ t('form.show_milliseconds_label') }}</label>
<select name="millis">
<option value="0" {{ '' if show_millis else 'selected' }}>No</option>
<option value="1" {{ 'selected' if show_millis else '' }}>Yes</option>
<option value="0" {{ '' if show_millis else 'selected' }}>{{ t('form.no') }}</option>
<option value="1" {{ 'selected' if show_millis else '' }}>{{ t('form.yes') }}</option>
</select>
</div>
<div class="field">
<label>Round to nearest</label>
<label>{{ t('form.round_to_nearest_label') }}</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>
<option value="none" {{ 'selected' if rounded_unit=='none' else '' }}>{{ t('form.round_none') }}</option>
<option value="minutes" {{ 'selected' if rounded_unit=='minutes' else '' }}>{{ t('form.round_minutes') }}</option>
<option value="hours" {{ 'selected' if rounded_unit=='hours' else '' }}>{{ t('form.round_hours') }}</option>
<option value="days" {{ 'selected' if rounded_unit=='days' else '' }}>{{ t('form.round_days') }}</option>
</select>
</div>
<div class="actions">
<button type="submit">Generate Countdown →</button>
<button type="submit">{{ t('form.generate_button') }}</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.
{{ t('info.description') }}
</p>
</section>
{% endblock %}