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

Initial commit

Browse Source
This commit is contained in:
Ignacio Rivero
2025-08-12 22:28:56 -03:00
commit 7d7770b7f9
7 changed files with 493 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/base.html Normal file
View 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
View 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
View 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 %}