feat: initial voice detection

2026-05-09 18:34:23 +05:00
parent fc7fa489a9
commit b94f37d8dd
7 changed files with 1155 additions and 0 deletions
@@ -0,0 +1,107 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #1a1a2e;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  color: #fff;
+}
+
+.container {
+  text-align: center;
+}
+
+#duck-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+#duck-indicator {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 160px;
+  height: 160px;
+  transition: filter 0.3s ease;
+}
+
+.duck-icon {
+  width: 120px;
+  height: 120px;
+  position: relative;
+  z-index: 2;
+}
+
+#glow-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  z-index: 1;
+  pointer-events: none;
+}
+
+#duck-indicator.silent #glow-ring {
+  background: radial-gradient(circle, rgba(255, 50, 50, 0.3) 0%, transparent 70%);
+  box-shadow: 0 0 40px 10px rgba(255, 50, 50, 0.2), inset 0 0 40px 10px rgba(255, 50, 50, 0.05);
+}
+
+#duck-indicator.speaking #glow-ring {
+  background: radial-gradient(circle, rgba(50, 255, 50, 0.4) 0%, transparent 70%);
+  box-shadow: 0 0 60px 20px rgba(50, 255, 50, 0.3), inset 0 0 60px 20px rgba(50, 255, 50, 0.1);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.08); opacity: 0.85; }
+}
+
+#status-text {
+  margin-top: 20px;
+  font-size: 1.2rem;
+  opacity: 0.8;
+}
+
+.btn {
+  margin-top: 16px;
+  padding: 10px 28px;
+  font-size: 1rem;
+  border: none;
+  border-radius: 8px;
+  background: #16213e;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn:hover {
+  background: #0f3460;
+}
+
+.hint {
+  margin-top: 24px;
+  font-size: 0.85rem;
+  opacity: 0.5;
+}
+
+.error {
+  margin-top: 12px;
+  color: #ff6b6b;
+  font-size: 0.9rem;
+}
+
+.hidden {
+  display: none;
+}