feat: initial commit of markovspeed p5.js presidential speech engine

2026-11-07 12:28:46 +01:00
commit a04c3f11bc
4 changed files with 640 additions and 0 deletions
@@ -0,0 +1,194 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #05080c;
+  color: #e0e8f0;
+  font-family: "IBM Plex Mono", "Terminus", "Courier New", monospace;
+  overflow: hidden;
+  height: 100vh;
+  width: 100vw;
+  user-select: none;
+}
+
+#container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+}
+
+#header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 18px;
+  background: #090e14;
+  border-bottom: 2px solid #1a2634;
+  z-index: 10;
+}
+
+.title-group h1 {
+  font-size: 1.15rem;
+  letter-spacing: 2px;
+  color: #ffcc11;
+  font-weight: 700;
+}
+
+.title-group .badge {
+  font-size: 0.7rem;
+  background: #1e2d3d;
+  color: #00d4ff;
+  padding: 2px 6px;
+  border-radius: 3px;
+  margin-left: 8px;
+  vertical-align: middle;
+}
+
+.subtitle {
+  font-size: 0.68rem;
+  color: #7b93a8;
+  letter-spacing: 1px;
+  margin-top: 2px;
+}
+
+.controls-top {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  background: #0d1520;
+  border: 1px solid #2a3b4c;
+  color: #8da4be;
+  font-family: inherit;
+  font-size: 0.75rem;
+  padding: 6px 14px;
+  cursor: pointer;
+  letter-spacing: 1px;
+  transition: all 0.15s ease;
+}
+
+.btn:hover {
+  background: #182535;
+  color: #ffffff;
+  border-color: #ffcc11;
+}
+
+.btn.active {
+  background: #122822;
+  border-color: #33ff88;
+  color: #33ff88;
+}
+
+.btn.burst {
+  background: #2b220d;
+  border-color: #ffaa00;
+  color: #ffcc11;
+}
+
+.btn.burst:active {
+  background: #ffcc11;
+  color: #05080c;
+}
+
+#canvas-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: #05080c;
+}
+
+#canvas-container canvas {
+  display: block;
+}
+
+#footer {
+  background: #090e14;
+  border-top: 2px solid #1a2634;
+  padding: 10px 18px;
+  z-index: 10;
+}
+
+#hud-top {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+  font-size: 0.75rem;
+  padding-bottom: 8px;
+  border-bottom: 1px dashed #1a2634;
+}
+
+.metric {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.metric .label {
+  color: #61788d;
+}
+
+.metric .highlight {
+  color: #33ff88;
+  font-weight: bold;
+}
+
+.metric .token-tag {
+  color: #ffcc11;
+  font-weight: bold;
+  background: #1f1d10;
+  padding: 1px 8px;
+  border: 1px solid #ffcc1144;
+}
+
+#speed-slider {
+  accent-color: #ffcc11;
+  width: 110px;
+  cursor: pointer;
+}
+
+#speed-val {
+  color: #ffcc11;
+  min-width: 48px;
+}
+
+#ticker {
+  margin-top: 8px;
+}
+
+.ticker-header {
+  font-size: 0.65rem;
+  color: #ffaa00;
+  letter-spacing: 1.5px;
+  margin-bottom: 4px;
+}
+
+.ticker-content {
+  font-size: 0.95rem;
+  line-height: 1.45;
+  color: #d8e8f8;
+  min-height: 48px;
+  max-height: 68px;
+  overflow-y: auto;
+  word-break: break-word;
+  background: #040608;
+  padding: 6px 10px;
+  border-left: 3px solid #ffcc11;
+}
+
+.ticker-content::after {
+  content: "█";
+  color: #ffcc11;
+  animation: blink 0.8s infinite;
+  margin-left: 4px;
+}
+
+@keyframes blink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}