Initial commit
This commit is contained in:
commit
7d7770b7f9
42
README.md
Normal file
42
README.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
|
||||||
|
# Countdown Generator (Flask + Jinja)
|
||||||
|
|
||||||
|
A tiny two-page app:
|
||||||
|
- `/` – a setup form to pick the target date/time and styles.
|
||||||
|
- `/countdown?…` – the shareable countdown page, configured entirely from query params.
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python3 -m venv .venv
|
||||||
|
source .venv/bin/activate
|
||||||
|
pip install flask
|
||||||
|
python app.py
|
||||||
|
# open http://127.0.0.1:5000/
|
||||||
|
```
|
||||||
|
|
||||||
|
## URL Parameters
|
||||||
|
|
||||||
|
- `target` — ISO-8601 local datetime (e.g. `2025-09-06T12:00`)
|
||||||
|
- `title` — heading text
|
||||||
|
- `scheme` — `dark` or `light`
|
||||||
|
- `accent` — CSS color (e.g. `#ff6b6b` or `hsl(260 90% 60%)`)
|
||||||
|
- `fg` / `bg` — text/background colors
|
||||||
|
- `radius` — number (px) for rounded corners
|
||||||
|
- `shadow` — `none|sm|md|lg`
|
||||||
|
- `font` — CSS font-family string
|
||||||
|
- `millis` — `1` to show milliseconds
|
||||||
|
- `rounded_unit` — `none|minutes|hours|days` (rounds to nearest)
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```
|
||||||
|
/countdown?title=Ignacio%27s%20Trip&target=2025-09-06T12:00&scheme=dark&accent=%238b5cf6&radius=20&shadow=lg&font=system-ui&millis=1
|
||||||
|
```
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- The generator reflects any params back into the form, so you can tweak and re-generate links.
|
||||||
|
- No external assets required. Everything is pure HTML/CSS/JS with Flask+Jinja.
|
||||||
|
- The countdown runs with `requestAnimationFrame` and updates at ~60Hz (with ms on if enabled).
|
||||||
|
- If no `target` is provided, `/countdown` redirects to `/`.
|
||||||
68
app.py
Normal file
68
app.py
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
|
||||||
|
from flask import Flask, render_template, request, redirect, url_for
|
||||||
|
from urllib.parse import urlencode
|
||||||
|
import datetime
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
def coerce_bool(val, default=False):
|
||||||
|
if val is None:
|
||||||
|
return default
|
||||||
|
s = str(val).lower()
|
||||||
|
return s in ("1","true","yes","y","on")
|
||||||
|
|
||||||
|
@app.template_filter("default_if_none")
|
||||||
|
def default_if_none(value, default):
|
||||||
|
return default if value is None or value == "" else value
|
||||||
|
|
||||||
|
@app.route("/")
|
||||||
|
def index():
|
||||||
|
# Prefill from query if present, so users can tweak and regenerate
|
||||||
|
q = request.args
|
||||||
|
context = {
|
||||||
|
"title": q.get("title", "Big Day"),
|
||||||
|
"target": q.get("target", ""),
|
||||||
|
"scheme": q.get("scheme", "dark"),
|
||||||
|
"accent": q.get("accent", "#8b5cf6"), # violet-500
|
||||||
|
"radius": q.get("radius", "16"),
|
||||||
|
"shadow": q.get("shadow", "lg"),
|
||||||
|
"font": q.get("font", "system-ui"),
|
||||||
|
"show_millis": coerce_bool(q.get("millis"), False),
|
||||||
|
"rounded_unit": q.get("rounded_unit", "none"), # none, minutes, hours, days
|
||||||
|
"bg": q.get("bg", "#0b0b10"),
|
||||||
|
"fg": q.get("fg", "#e5e7eb"),
|
||||||
|
}
|
||||||
|
return render_template("index.html", **context)
|
||||||
|
|
||||||
|
@app.route("/preview", methods=["POST"])
|
||||||
|
def preview():
|
||||||
|
data = request.form.to_dict(flat=True)
|
||||||
|
# sanitize minimal
|
||||||
|
# Build query string and redirect to /countdown
|
||||||
|
return redirect(url_for("countdown") + "?" + urlencode(data))
|
||||||
|
|
||||||
|
@app.route("/countdown")
|
||||||
|
def countdown():
|
||||||
|
q = request.args
|
||||||
|
# Provide sane defaults if not supplied
|
||||||
|
params = {
|
||||||
|
"title": q.get("title", "Big Day"),
|
||||||
|
"target": q.get("target", ""),
|
||||||
|
"scheme": q.get("scheme", "dark"),
|
||||||
|
"accent": q.get("accent", "#8b5cf6"),
|
||||||
|
"radius": q.get("radius", "16"),
|
||||||
|
"shadow": q.get("shadow", "lg"),
|
||||||
|
"font": q.get("font", "system-ui"),
|
||||||
|
"millis": q.get("millis", "0"),
|
||||||
|
"rounded_unit": q.get("rounded_unit", "none"),
|
||||||
|
"bg": q.get("bg", "#0b0b10"),
|
||||||
|
"fg": q.get("fg", "#e5e7eb"),
|
||||||
|
}
|
||||||
|
# If no target specified, bounce user to setup screen
|
||||||
|
if not params["target"]:
|
||||||
|
return redirect(url_for("index"))
|
||||||
|
return render_template("countdown.html", **params)
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
# Helpful for local dev
|
||||||
|
app.run(debug=True, host="0.0.0.0", port=5000)
|
||||||
150
static/css/styles.css
Normal file
150
static/css/styles.css
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
|
||||||
|
:root {
|
||||||
|
--accent: #8b5cf6;
|
||||||
|
--bg: #0b0b10;
|
||||||
|
--fg: #e5e7eb;
|
||||||
|
--radius: 16px;
|
||||||
|
--font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: var(--font);
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-scheme="dark"] body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-scheme="light"] body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
min-height: 100%;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: min(900px, 95vw);
|
||||||
|
background: color-mix(in oklab, var(--bg), white 7%);
|
||||||
|
border: 1px solid color-mix(in oklab, var(--bg), white 15%);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-sm { box-shadow: 0 2px 10px rgba(0,0,0,.15); }
|
||||||
|
.shadow-md { box-shadow: 0 10px 25px rgba(0,0,0,.2); }
|
||||||
|
.shadow-lg { box-shadow: 0 30px 60px rgba(0,0,0,.25); }
|
||||||
|
|
||||||
|
h1.title {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: clamp(2rem, 4vw + 1rem, 4rem);
|
||||||
|
line-height: 1.1;
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin-top: 0;
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: minmax(0, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown .unit {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: calc(var(--radius) - 6px);
|
||||||
|
border: 1px solid color-mix(in oklab, var(--bg), white 15%);
|
||||||
|
background: color-mix(in oklab, var(--bg), white 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown .unit span {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: clamp(1.8rem, 5vw + 0.5rem, 4rem);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown .unit label {
|
||||||
|
font-family: inherit;
|
||||||
|
opacity: .7;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 1rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input[type="text"],
|
||||||
|
.field input[type="datetime-local"],
|
||||||
|
.field input[type="number"],
|
||||||
|
.field select,
|
||||||
|
.field input[type="color"] {
|
||||||
|
padding: 0.6rem 0.75rem;
|
||||||
|
border-radius: calc(var(--radius) - 10px);
|
||||||
|
border: 1px solid color-mix(in oklab, var(--bg), white 20%);
|
||||||
|
background: color-mix(in oklab, var(--bg), white 7%);
|
||||||
|
color: inherit;
|
||||||
|
font-family: var(--font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, .actions button, .share a, .share button {
|
||||||
|
font-size: inherit;
|
||||||
|
appearance: none;
|
||||||
|
border: 0;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-radius: calc(var(--radius) - 8px);
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--fg);
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover, .share a:hover, .share button:hover {
|
||||||
|
filter: brightness(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
opacity: .8;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.grid { grid-template-columns: 1fr; }
|
||||||
|
.countdown { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||||
|
}
|
||||||
96
static/js/countdown.js
Normal file
96
static/js/countdown.js
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
|
||||||
|
(function() {
|
||||||
|
const $ = (sel) => document.querySelector(sel);
|
||||||
|
const qs = new URLSearchParams(location.search);
|
||||||
|
|
||||||
|
const targetISO = qs.get("target") || ($("#countdown")?.dataset.target || "");
|
||||||
|
const showMillis = (qs.get("millis") ?? ($("#countdown")?.dataset.showMillis || "0")) === "1";
|
||||||
|
const roundedUnit = qs.get("rounded_unit") || ($("#countdown")?.dataset.roundedUnit || "none");
|
||||||
|
|
||||||
|
const targetDate = targetISO ? new Date(targetISO) : null;
|
||||||
|
const targetText = $("#targetText");
|
||||||
|
const statusEl = $("#status");
|
||||||
|
const msWrap = $("#millisWrap");
|
||||||
|
|
||||||
|
// Reflect chosen colors into CSS variables if passed via query
|
||||||
|
const root = document.documentElement;
|
||||||
|
const setVar = (k, v) => { if (v) root.style.setProperty(k, v); };
|
||||||
|
setVar("--accent", qs.get("accent"));
|
||||||
|
setVar("--radius", (qs.get("radius") || "16") + "px");
|
||||||
|
setVar("--bg", qs.get("bg"));
|
||||||
|
setVar("--fg", qs.get("fg"));
|
||||||
|
const scheme = qs.get("scheme");
|
||||||
|
if (scheme) root.setAttribute("data-scheme", scheme);
|
||||||
|
const font = qs.get("font");
|
||||||
|
if (font) root.style.setProperty("--font", font.includes(" ") ? `"${font}"` : font);
|
||||||
|
|
||||||
|
if (!targetDate || isNaN(targetDate.valueOf())) {
|
||||||
|
statusEl.textContent = "Invalid or missing target date. Use the Edit link to set one.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
targetText.textContent = targetDate.toString();
|
||||||
|
|
||||||
|
msWrap.hidden = !showMillis;
|
||||||
|
if (!showMillis && msWrap.parentNode) { msWrap.parentNode.removeChild(msWrap); }
|
||||||
|
|
||||||
|
function roundToUnit(ms, unit) {
|
||||||
|
if (unit === "none") return ms;
|
||||||
|
const map = {
|
||||||
|
minutes: 60_000,
|
||||||
|
hours: 3_600_000,
|
||||||
|
days: 86_400_000,
|
||||||
|
};
|
||||||
|
const size = map[unit] || 1;
|
||||||
|
return Math.round(ms / size) * size;
|
||||||
|
}
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
const now = new Date();
|
||||||
|
let diff = targetDate - now;
|
||||||
|
if (roundedUnit !== "none") {
|
||||||
|
diff = roundToUnit(diff, roundedUnit);
|
||||||
|
}
|
||||||
|
if (diff <= 0) {
|
||||||
|
$("#d").textContent = "0";
|
||||||
|
$("#h").textContent = "0";
|
||||||
|
$("#m").textContent = "0";
|
||||||
|
$("#s").textContent = "0";
|
||||||
|
if (showMillis) $("#ms").textContent = "000";
|
||||||
|
statusEl.textContent = "🎉 It's time!";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalSeconds = Math.floor(diff / 1000);
|
||||||
|
const days = Math.floor(totalSeconds / (3600*24));
|
||||||
|
const hours = Math.floor((totalSeconds % (3600*24)) / 3600);
|
||||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||||
|
const seconds = totalSeconds % 60;
|
||||||
|
const millis = diff % 1000;
|
||||||
|
|
||||||
|
$("#d").textContent = String(days);
|
||||||
|
$("#h").textContent = String(hours).padStart(2, "0");
|
||||||
|
$("#m").textContent = String(minutes).padStart(2, "0");
|
||||||
|
$("#s").textContent = String(seconds).padStart(2, "0");
|
||||||
|
if (showMillis) $("#ms").textContent = String(millis).padStart(3, "0");
|
||||||
|
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shareable link
|
||||||
|
const copyBtn = $("#copyLink");
|
||||||
|
if (copyBtn) {
|
||||||
|
copyBtn.addEventListener("click", async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(location.href);
|
||||||
|
copyBtn.textContent = "Link copied!";
|
||||||
|
setTimeout(() => copyBtn.textContent = "Copy sharable link", 1500);
|
||||||
|
} catch (e) {
|
||||||
|
alert("Copy failed: " + e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
})();
|
||||||
26
templates/base.html
Normal file
26
templates/base.html
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" data-scheme="{{ scheme|default_if_none('dark') }}">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>{{ title|default_if_none("Big Day") }}</title>
|
||||||
|
<meta name="color-scheme" content="{{ 'dark' if scheme=='dark' else 'light' }}">
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--accent: {{ accent|default_if_none('#8b5cf6') }};
|
||||||
|
--radius: {{ radius|default_if_none('16') }}px;
|
||||||
|
--bg: {{ bg|default_if_none('#0b0b10') }};
|
||||||
|
--fg: {{ fg|default_if_none('#e5e7eb') }};
|
||||||
|
--font: {{ font|default_if_none('system-ui') }};
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</main>
|
||||||
|
{% block scripts %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
templates/countdown.html
Normal file
33
templates/countdown.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
|
||||||
|
{% extends "base.html" %}
|
||||||
|
{% block content %}
|
||||||
|
<section class="card {{ 'shadow-' + shadow if shadow != 'none' else '' }}">
|
||||||
|
<h1 class="title">{{ title }}</h1>
|
||||||
|
<p class="subtitle">
|
||||||
|
Target: <code id="targetText"></code>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="countdown"
|
||||||
|
class="countdown"
|
||||||
|
data-target="{{ target }}"
|
||||||
|
data-show-millis="{{ millis }}"
|
||||||
|
data-rounded-unit="{{ rounded_unit }}">
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="status" class="muted"></p>
|
||||||
|
</section>
|
||||||
|
{% endblock %}
|
||||||
|
{% block scripts %}
|
||||||
|
<script src="{{ url_for('static', filename='js/countdown.js') }}"></script>
|
||||||
|
{% endblock %}
|
||||||
78
templates/index.html
Normal file
78
templates/index.html
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
|
||||||
|
{% 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 %}
|
||||||
Loading…
Reference in New Issue
Block a user