Nick
d8ebfcda13
- Add reduced_styles config to switch between Tailwind CDN and inline CSS - Restore liquid wave animations in full-styles mode - Add score decrement endpoint and staged hold-to-reset (decrement/arm/reset) - Improve start.sh: prefer .venv, cleanup stale processes, X display fallback - Scope inline utility classes to body.reduced-styles
131 lines
4.4 KiB
HTML
131 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>CuteBoard — Display {{ display_id }}</title>
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
|
|
|
|
{% if not reduced_styles %}
|
|
<script src="{{ url_for('static', filename='js/tailwind.js') }}"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
playfair: ['"Playfair Display"', 'serif'],
|
|
orbitron: ['Orbitron', 'sans-serif'],
|
|
cinzel: ['Cinzel', 'serif'],
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
{% endif %}
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
<body{% if reduced_styles %} class="reduced-styles"{% endif %}>
|
|
|
|
<div class="scoreboard flex flex-col h-screen w-screen" data-content-padding-top="{{ content_padding_top }}">
|
|
|
|
{% if header %}
|
|
<div class="header-row text-center pt-6 pointer-events-none" style="position: absolute; inset-inline: 0; top: 0; z-index: 20;"
|
|
data-header-font-size="{{ header_font_size }}">
|
|
<span class="font-cinzel tracking-widest uppercase whitespace-nowrap" style="color: white;">{{ header }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="sides-row flex flex-1">
|
|
<!-- ====== LEFT SIDE ====== -->
|
|
<div class="side side-left flex-1 flex flex-col items-center justify-center relative"
|
|
style="--team-color: {{ left_color }};"
|
|
data-side="left">
|
|
|
|
<div class="hw-bar"></div>
|
|
|
|
<div class="side-glow"
|
|
style="background: linear-gradient(90deg, {{ left_color }}18 0%, transparent 50%);">
|
|
</div>
|
|
|
|
<div class="side-content flex flex-col items-center justify-center" style="gap: {{ content_gap }}rem;">
|
|
<div class="score font-orbitron leading-none font-black whitespace-nowrap"
|
|
id="score-left"
|
|
data-score-font-size="{{ left_score_font_size }}"
|
|
style="color: {{ left_color }};">
|
|
{{ left_score }}
|
|
</div>
|
|
<div class="team-info text-center">
|
|
<div class="team-name font-playfair font-bold italic whitespace-nowrap"
|
|
data-name-font-size="{{ left_name_font_size }}">
|
|
{{ left_name }}
|
|
</div>
|
|
{% if left_subtitle %}
|
|
<div class="team-subtitle font-cinzel whitespace-nowrap" data-subtitle-font-size="{{ left_subtitle_font_size }}">{{ left_subtitle }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sweep-overlay" id="sweep-left">
|
|
<div class="sweep-gradient"></div>
|
|
{% if not reduced_styles %}
|
|
<div class="wave-container">
|
|
<div class="wave wave-front"></div>
|
|
<div class="wave wave-back"></div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== RIGHT SIDE ====== -->
|
|
<div class="side side-right flex-1 flex flex-col items-center justify-center relative"
|
|
style="--team-color: {{ right_color }};"
|
|
data-side="right">
|
|
|
|
<div class="hw-bar"></div>
|
|
|
|
<div class="side-glow"
|
|
style="background: linear-gradient(270deg, {{ right_color }}18 0%, transparent 50%);">
|
|
</div>
|
|
|
|
<div class="side-content flex flex-col items-center justify-center" style="gap: {{ content_gap }}rem;">
|
|
<div class="score font-orbitron leading-none font-black whitespace-nowrap"
|
|
id="score-right"
|
|
data-score-font-size="{{ right_score_font_size }}"
|
|
style="color: {{ right_color }};">
|
|
{{ right_score }}
|
|
</div>
|
|
<div class="team-info text-center">
|
|
<div class="team-name font-playfair font-bold italic whitespace-nowrap"
|
|
data-name-font-size="{{ right_name_font_size }}">
|
|
{{ right_name }}
|
|
</div>
|
|
{% if right_subtitle %}
|
|
<div class="team-subtitle font-cinzel whitespace-nowrap" data-subtitle-font-size="{{ right_subtitle_font_size }}">{{ right_subtitle }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sweep-overlay" id="sweep-right">
|
|
<div class="sweep-gradient"></div>
|
|
{% if not reduced_styles %}
|
|
<div class="wave-container">
|
|
<div class="wave wave-front"></div>
|
|
<div class="wave wave-back"></div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div> <!-- /sides-row -->
|
|
|
|
</div>
|
|
|
|
<div id="reset-confirm">
|
|
<span>Reset Scores?</span>
|
|
<div class="confirm-bar"></div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
</body>
|
|
</html>
|