Update makima FE to add initial listening system

1 files changed, 390 insertions, 0 deletions

diff --git a/makima/frontend/src/index.css b/makima/frontend/src/index.css
new file mode 100644
index 0000000..178fb9b
--- /dev/null
+++ b/makima/frontend/src/index.css
@@ -0,0 +1,390 @@
+@import "tailwindcss";
+
+@theme {
+  --color-bg-primary: #02040a;
+  --color-bg-panel: rgba(9, 13, 20, 0.92);
+  --color-bg-masthead: #08162e;
+  --color-bg-nav: #0c1729;
+  --color-bg-input: #0f1c2f;
+  --color-bg-button: #0d1b2d;
+  --color-bg-terminal: #0f3c78;
+
+  --color-blue-primary: #0f3c78;
+  --color-blue-accent: #3f6fb3;
+  --color-blue-glow: #75aafc;
+
+  --color-text-primary: #dbe7ff;
+  --color-text-secondary: #9bc3ff;
+  --color-text-muted: #e4edff;
+
+  --color-border-primary: #2f476d;
+  --color-border-accent: #3f6fb3;
+
+  --font-body: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", "MS Mincho", "Noto Serif JP", serif;
+  --font-mono: "MS Gothic", "Osaka-mono", Consolas, "Courier New", monospace;
+}
+
+html {
+  background-color: var(--color-bg-primary);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--color-text-primary);
+  min-height: 100vh;
+  background-color: var(--color-bg-primary);
+  background-image: linear-gradient(
+      rgba(8, 22, 46, 0.65),
+      rgba(8, 22, 46, 0.65)
+    ),
+    url("/02cdkj.jpeg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  font-family: var(--font-body);
+  line-height: 1.7;
+  letter-spacing: 0.03em;
+  text-rendering: optimizeLegibility;
+  position: relative;
+  overflow-x: hidden;
+}
+
+::selection {
+  background: rgba(117, 170, 252, 0.35);
+}
+
+/* Grid overlay */
+.grid-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.grid-overlay::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+      90deg,
+      rgba(117, 170, 252, 0.22) 1px,
+      rgba(255, 255, 255, 0.08) 1px
+    ),
+    linear-gradient(
+      0deg,
+      rgba(117, 170, 252, 0.22) 1px,
+      rgba(255, 255, 255, 0.08) 1px
+    );
+  background-size: 28px 28px;
+  mix-blend-mode: screen;
+  opacity: 0.8;
+}
+
+.grid-overlay::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(3, 17, 40, 0.8) 0%,
+    rgba(7, 15, 29, 0.5) 45%,
+    rgba(3, 17, 40, 0.8) 100%
+  );
+}
+
+/* Logo animations */
+@keyframes sweep-out {
+  0% {
+    opacity: 0.45;
+    transform: scale(0.55);
+  }
+  40% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.35);
+  }
+}
+
+@keyframes ring-scan {
+  0% {
+    stroke: #0f3c78;
+    opacity: 0.9;
+    stroke-dasharray: 400 0;
+    stroke-linecap: butt;
+  }
+  25% {
+    stroke: #6fa0ff;
+    opacity: 1;
+    stroke-dasharray: 18 14;
+    stroke-linecap: round;
+  }
+  55% {
+    stroke: #1e4c94;
+    opacity: 0.88;
+    stroke-dasharray: 10 18;
+  }
+  70% {
+    stroke: #0f3c78;
+    opacity: 0.9;
+    stroke-dasharray: 6 22;
+  }
+  90% {
+    stroke: #aac6ff;
+    opacity: 0.82;
+    stroke-dasharray: 4 26;
+  }
+  100% {
+    stroke: #0f3c78;
+    opacity: 0.9;
+    stroke-dasharray: 400 0;
+    stroke-linecap: butt;
+  }
+}
+
+@keyframes idle-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes glow-pulse {
+  0% {
+    opacity: 0.16;
+    transform: scale(1.02);
+  }
+  50% {
+    opacity: 0.28;
+    transform: scale(1.12);
+  }
+  100% {
+    opacity: 0.16;
+    transform: scale(1.02);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+}
+
+@keyframes ticker {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+/* Logo shell */
+.logo-shell {
+  border-radius: 50%;
+  border: 1px solid rgba(63, 111, 179, 0.6);
+  background: #070f1d;
+  display: grid;
+  place-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.logo-shell::before {
+  content: "";
+  position: absolute;
+  inset: 10px;
+  border-radius: 50%;
+  border: 1px solid rgba(15, 60, 120, 0.35);
+  box-shadow: 0 0 0 rgba(15, 60, 120, 0.1);
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.45s ease, transform 0.6s ease;
+}
+
+.logo-shell::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  background: repeating-conic-gradient(
+    from 0deg,
+    rgba(15, 60, 120, 0.08) 0deg 6deg,
+    rgba(117, 170, 252, 0.1) 6deg 12deg
+  );
+  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 80%);
+  opacity: 0.7;
+}
+
+.logo-shell.listening .ring-outer,
+.logo-shell:not(.no-hover-animation):hover .ring-outer {
+  animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+  animation-delay: 0.7s;
+}
+
+.logo-shell.listening .ring-middle,
+.logo-shell:not(.no-hover-animation):hover .ring-middle {
+  animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+  animation-delay: 0.35s;
+}
+
+.logo-shell.listening .ring-inner,
+.logo-shell:not(.no-hover-animation):hover .ring-inner {
+  animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+  animation-delay: 0s;
+}
+
+.logo-shell.listening::before,
+.logo-shell:not(.no-hover-animation):hover::before {
+  opacity: 1;
+  transform: scale(1.08);
+  animation: glow-pulse 1.6s ease-in-out infinite;
+}
+
+.logo-shell.listening .scan-sweep,
+.logo-shell:not(.no-hover-animation):hover .scan-sweep {
+  opacity: 0.7;
+  animation: sweep-out 2.4s ease-out infinite;
+}
+
+.logo-shell.listening .logo-svg,
+.logo-shell:not(.no-hover-animation):hover .logo-svg {
+  filter: drop-shadow(0 0 10px rgba(15, 60, 120, 0.35));
+}
+
+.scan-sweep {
+  position: absolute;
+  inset: 10%;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(117, 170, 252, 0.25) 0%,
+    rgba(117, 170, 252, 0.12) 38%,
+    rgba(15, 60, 120, 0.06) 64%,
+    transparent 85%
+  );
+  opacity: 0;
+  mix-blend-mode: screen;
+  filter: blur(0.8px);
+  z-index: 1;
+  transform: scale(0.65);
+}
+
+.scan-sweep.sweep-2 {
+  animation-delay: 1.2s;
+}
+
+.logo-svg {
+  z-index: 2;
+  transition: filter 0.4s ease;
+}
+
+.logo-svg .ring {
+  fill: none;
+  stroke: #0f3c78;
+  stroke-dasharray: 400 0;
+  stroke-linecap: butt;
+  transition: stroke 0.35s ease, opacity 0.35s ease;
+}
+
+.logo-svg .core {
+  fill: #0f3c78;
+}
+
+.halo {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px dashed rgba(15, 60, 120, 0.5);
+  animation: idle-rotate 28s linear infinite;
+}
+
+.logo-shell.listening + .halo,
+.logo-shell:not(.no-hover-animation):hover + .halo {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* Ticker */
+.ticker-content {
+  display: inline-block;
+  padding-left: 2px;
+  animation: ticker 22s linear infinite;
+  white-space: nowrap;
+}
+
+/* Rewrite link scramble effect */
+.rewrite-link {
+  position: relative;
+  display: inline-block;
+  padding: 4px 8px;
+  border: 1px dashed rgba(117, 170, 252, 0.5);
+  background: #0f1c2f;
+  text-decoration: none;
+  color: #eef5ff;
+  font-family: var(--font-mono);
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+
+.rewrite-link:hover {
+  border-color: rgba(117, 170, 252, 0.8);
+}
+
+.rewrite-link[aria-disabled="true"] {
+  color: #9aa9c6;
+  border-color: rgba(117, 170, 252, 0.25);
+  cursor: not-allowed;
+  pointer-events: none;
+  background: #0b1423;
+}
+
+/* Panel styles */
+.panel {
+  background: var(--color-bg-panel);
+  border: 1px solid var(--color-border-primary);
+  position: relative;
+}
+
+.panel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px dashed rgba(89, 122, 170, 0.25);
+  pointer-events: none;
+}
+
+/* Double border top decoration */
+.border-top-double {
+  border-top: 4px double #050d1f;
+}
+
+/* Stripe decoration for frame top */
+.stripe-top::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  background: repeating-linear-gradient(
+    90deg,
+    #0f3c78 0px,
+    #0f3c78 40px,
+    #3f6fb3 40px,
+    #3f6fb3 44px
+  );
+  opacity: 0.7;
+}