Initial commit

static/style.css

@@ -0,0 +1,107 @@
+:root {
+  --green: #2ecc40;
+  --blue: #0074d9;
+  --yellow: #ffdc00;
+  --red: #ff4136;
+  --black: #000;
+  --white: #fff;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: #444;
+  color: #eee;
+  font-family: system-ui, sans-serif;
+}
+
+main {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 1rem;
+  text-align: center;
+}
+
+h1 { letter-spacing: 0.3em; }
+
+section { margin: 1.5rem 0; }
+
+#countdown {
+  font-family: ui-monospace, monospace;
+  font-size: clamp(2rem, 9vw, 4rem);
+  font-weight: bold;
+  background: none !important;
+  border: none !important;
+}
+
+#zone-label { text-transform: uppercase; letter-spacing: 0.2em; }
+
+#zone-bar {
+  position: relative;
+  display: flex;
+  height: 14px;
+  margin: 0.75rem auto;
+  border: 1px solid #222;
+}
+#zone-bar span { flex: 1 1 0; }
+#zone-marker {
+  position: absolute;
+  top: -6px;
+  width: 3px;
+  height: 26px;
+  background: #f0f;
+  transition: left 0.2s linear;
+}
+
+#the-button {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  font-size: 1.6rem;
+  font-weight: bold;
+  cursor: pointer;
+  border: 6px solid #222;
+  box-shadow: 0 8px 0 #222;
+  transition: transform 0.05s;
+}
+#the-button:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 #222; }
+#the-button:disabled { cursor: not-allowed; opacity: 0.5; }
+
+.zone-green  { background: var(--green);  color: #000; }
+.zone-blue   { background: var(--blue);   color: #fff; }
+.zone-yellow { background: var(--yellow); color: #000; }
+.zone-red    { background: var(--red);    color: #fff; }
+.zone-black  { background: var(--black);  color: #fff; border-color: #888 !important; }
+.zone-white  { background: var(--white);  color: #000; }
+
+#countdown.zone-green  { color: var(--green); }
+#countdown.zone-blue   { color: var(--blue); }
+#countdown.zone-yellow { color: var(--yellow); }
+#countdown.zone-red    { color: var(--red); }
+#countdown.zone-black  { color: var(--black); }
+#countdown.zone-white  { color: var(--white); }
+
+.swatch {
+  display: inline-block;
+  padding: 0 0.4em;
+  margin: 0 0.15em;
+  border: 1px solid #222;
+  border-radius: 3px;
+}
+
+table {
+  margin: 0.5rem auto;
+  border-collapse: collapse;
+  min-width: 60%;
+}
+th, td { padding: 0.3rem 0.6rem; border-bottom: 1px solid #555; }
+
+input, form button {
+  font-size: 1rem;
+  padding: 0.4rem 0.8rem;
+}
+
+.error { color: var(--red); }
+
+#rules { text-align: left; font-size: 0.9rem; color: #ccc; }