Heading 1
Heading 2
Heading 3
Lead paragraph in muted text, for page introductions.
Body text with a link, small print, inline code and tabular numbers: 1,234,567 0.00 8.88.
Every component with fake data. Switch light and dark with the half-moon button in the header, or add ?theme=dark to the URL.
Template names, blocks and context are a semi-public API (TD-25): server owners override them.
Change them in static/il2ks/site.css section 1. The accent comes from the admin (Site settings).
Military palette (olive, khaki, gunmetal, muted amber), squared corners, a condensed display face for headings and big numbers.
The camo tile (img/pattern/camo.svg) and the aircraft silhouette (img/brand/logo-mark.svg) appear only in the header band, the hero and empty or error states, never behind data.
Used on the home page. Dark in both themes, with the camo tile at very low contrast.
All placeholders under static/il2ks/img/, inlined so they follow the text colour. A designer replaces the files and keeps the names.
Server owners can override any of them in custom/static/il2ks/img/.
{% verbatim %}{% icon "stat/sorties" %} {% icon "stat/sorties" "my-class" %} {% aircraft_icon sortie.aircraft %} {% stat_tile v l icon="stat/deaths" %}{% endverbatim %}
Lead paragraph in muted text, for page introductions.
Body text with a link, small print, inline code and tabular numbers: 1,234,567 0.00 8.88.
{% verbatim %}<div class="stat-tiles">
{% stat_tile player.kills_air|num _("Air kills") sub=player.kills_air|ratio:player.deaths %}
</div>
{% kv_list rows %}{% endverbatim %}
Inline SVG drawn on the server (il2ks.web.charts), coloured by the --il2-chart-* tokens. A legend appears from two plotted series; every bar has a tooltip; the numbers are in the table under each chart. A ChartSeries(plotted=False) is table-only.
{% verbatim %}spec = ChartSpec("chart-id", title, desc, categories, (ChartSeries("Kills", (3, 5, 2)),))
{% bar_chart spec %}{% endverbatim %}
{% verbatim %}{% coalition_badge sortie.country %} {% outcome_badge sortie.outcome %} {% fate_badge sortie.pilot_fate %}
{% status_badge sortie.pilot_status %} {% role_badge sortie.combat_role %} {% badge "Custom" "teal" %}{% endverbatim %}
{% coalition_badge 501 %} {% coalition_badge 601 %} {% coalition_badge 999 %}
{% for value in outcomes %}{% outcome_badge value %} {% endfor %}
{% for value in fates %}{% fate_badge value %} {% endfor %}
{% for value in statuses %}{% status_badge value %} {% endfor %}
{% for value in aircraft_statuses %}{% aircraft_badge value %} {% endfor %}
{% for value in roles %}{% role_badge value %} {% endfor %}
{% include "il2ks/components/stat_mark.html" with band="top25" unit="sortie_tour" %}{% include "il2ks/components/stat_mark.html" with band="top10" unit="sortie_tour" %}{% include "il2ks/components/stat_mark.html" with band="top5" unit="sortie_tour" %}{% include "il2ks/components/stat_mark.html" with band="top1" unit="sortie_all" %}
{% badge "green" "green" %} {% badge "amber" "amber" %} {% badge "orange" "orange" %} {% badge "red" "red" %} {% badge "blue" "blue" %} {% badge "teal" "teal" %} {% badge "purple" "purple" %} {% badge "grey" "grey" %}
{% verbatim %}{% notice "hidden" %}{% endnotice %}
{% notice "changing" %}{% endnotice %}
{% notice "info" title=_("Heads up") %}Own text.{% endnotice %}
{% breadcrumbs crumbs %} {# crumbs = [(label, url), ..., (label, None)] #}{% endverbatim %}
{% breadcrumbs crumbs %}
{% notice "hidden" %}{% endnotice %}
{% notice "changing" %}{% endnotice %}
{% notice "info" title="Heads up" %}Notices take their own text when the default does not fit.{% endnotice %}
{% notice "warning" %}Something needs attention.{% endnotice %}
Live demo: sort headers, dropdown filters, search and page links all work with and without JavaScript.
{% verbatim %}{% results_region %}
{% filter_bar %}
{% filter_select "aircraft" _("Aircraft") aircraft_options all_label=_("All aircraft") %}
{% filter_text "q" _("Callsign") live=True %}
{% endfilter_bar %}
<div class="table-wrap"><table class="data-table">
<thead><tr>{% sort_th "callsign" _("Callsign") %}{% sort_th "kills" _("Kills") numeric=True %}</tr></thead>
<tbody>{% for row in rows %}...{% empty %}{% empty_row 2 %}{% endfor %}</tbody>
</table></div>
{% pagination page_obj %}
{% endresults_region %}{% endverbatim %}
{% results_region %}
{% filter_bar %}
{% filter_select "aircraft" "Aircraft" aircraft_options all_label="All aircraft" %}
{% filter_select "side" "Side" side_options all_label="Both sides" %}
{% filter_text "q" "Callsign" placeholder="Search..." live=True %}
{% endfilter_bar %}
| Side | {% sort_th "aircraft" "Aircraft" %}Last outcome | {% sort_th "sorties" "Sorties" numeric=True %} {% sort_th "kills" "Kills" numeric=True %} {% sort_th "deaths" "Deaths" numeric=True %}K/D | {% sort_th "flight_time_s" "Flight time" numeric=True %}Last seen | ||||||
|---|---|---|---|---|---|---|---|---|---|
| {{ row.callsign }} | {% coalition_badge row.country %} | {{ row.aircraft }} | {% outcome_badge row.outcome %} | {{ row.sorties|num }} | {{ row.kills|num }} | {{ row.deaths|num }} | {{ row.kills|ratio:row.deaths }} | {{ row.flight_time_s|duration }} | {{ row.last_seen|local_time }} |
stretched-link)Put the class on the row's main link. A click almost anywhere in the row opens it (no JavaScript); ctrl/middle-click, the status-bar URL and keyboard focus behave like a real link. Other links in the row (a pilot's name, say) stay clickable. The rows of the demo table above use it; the callsign is the target. Do not use it in a row with no single obvious target (a kills table), or twice in one row.
{% verbatim %}<tr>
<td><a class="stretched-link" href="{% url 'web:sortie-detail' s.pk %}">{{ s.spawned_at|utc }}</a></td>
<td><a href="{% url 'web:player-detail' s.player_id %}">{{ s.name_at_time }}</a></td> {# still its own link #}
</tr>{% endverbatim %}
| Callsign | Kills | Deaths |
|---|---|---|
| Total | 0 | 0 |
{% verbatim %}{% flavor "top_pilot" mission.pk %} {# several variants per spot, stable per seed #}
{% sortie_flavor sortie as quip %}{% if quip %}...{% endif %}{% endverbatim %}
A short quip at a few highlight spots only (hall of shame, notable sortie outcomes, the last mission's top pilots). The variant is chosen by hashing the spot name and the seed (an object id), so a page never changes on reload. Variants live in il2ks/web/flavor.py; keep them kind, light and free of politics.
{% flavor "top_pilot" 1 %}
{% verbatim %}{{ sortie.flight_time_s|duration }} {{ mission.started_at|utc }} {{ n|num }} {{ kills|ratio:deaths }}
{{ kills|per_hour:flight_time_s }} {{ landed|percent:sorties }} {% side sortie.country %}{% endverbatim %}
| Filter | Input | Output |
|---|---|---|
| duration | {{ seconds }} | {{ seconds|duration }} |
| utc | datetime | {{ sample_when|utc }} |
| num | 1234567 | {{ 1234567|num }} |
| ratio | 482 / 205 | {{ 482|ratio:205 }} |
| ratio | 5 / 0 | {{ 5|ratio:0 }} |
| per_hour | 12 kills / 18000 s | {{ 12|per_hour:18000 }} |
| percent | 87 / 100 | {{ 87|percent:100 }} |
| side | 501 | {% side 501 %} |