diff --git a/.gitignore b/.gitignore index 1170717..e06d006 100644 --- a/.gitignore +++ b/.gitignore @@ -134,3 +134,4 @@ dist .yarn/build-state.yml .yarn/install-state.gz .pnp.* +Backend/test.py diff --git a/Backend/index.html b/Backend/index.html index 309364f..f4ff6a0 100644 --- a/Backend/index.html +++ b/Backend/index.html @@ -10,60 +10,113 @@ max-width: 800px; margin: 0 auto; padding: 20px; + background-color: #f9f9f9; } .conversation { - border: 1px solid #ccc; - border-radius: 8px; - padding: 15px; - height: 300px; + border: 1px solid #ddd; + border-radius: 12px; + padding: 20px; + height: 400px; overflow-y: auto; - margin-bottom: 15px; + margin-bottom: 20px; + background-color: white; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .message { - margin-bottom: 10px; - padding: 8px; - border-radius: 8px; + margin-bottom: 15px; + padding: 12px; + border-radius: 12px; + max-width: 80%; + line-height: 1.4; } .user { background-color: #e3f2fd; text-align: right; + margin-left: auto; + border-bottom-right-radius: 4px; } .ai { background-color: #f1f1f1; + margin-right: auto; + border-bottom-left-radius: 4px; + } + .system { + background-color: #f8f9fa; + font-style: italic; + text-align: center; + font-size: 0.9em; + color: #666; + padding: 8px; + margin: 10px auto; + max-width: 90%; } .controls { display: flex; - flex-direction: column; - gap: 10px; - } - .input-row { - display: flex; - gap: 10px; - } - input[type="text"] { - flex-grow: 1; - padding: 8px; - border-radius: 4px; - border: 1px solid #ccc; + gap: 15px; + justify-content: center; + align-items: center; } button { - padding: 8px 16px; - border-radius: 4px; + padding: 12px 24px; + border-radius: 24px; border: none; background-color: #4CAF50; color: white; cursor: pointer; + font-weight: bold; + transition: all 0.2s ease; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); } button:hover { background-color: #45a049; + box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .recording { background-color: #f44336; + animation: pulse 1.5s infinite; + } + .processing { + background-color: #FFA500; } select { - padding: 8px; - border-radius: 4px; - border: 1px solid #ccc; + padding: 10px; + border-radius: 24px; + border: 1px solid #ddd; + background-color: white; + } + .transcript { + font-style: italic; + color: #666; + margin-top: 5px; + } + @keyframes pulse { + 0% { opacity: 1; } + 50% { opacity: 0.7; } + 100% { opacity: 1; } + } + .status-indicator { + display: flex; + align-items: center; + justify-content: center; + margin-top: 10px; + gap: 5px; + } + .status-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #ccc; + } + .status-dot.active { + background-color: #4CAF50; + } + .status-text { + font-size: 0.9em; + color: #666; + } + audio { + width: 100%; + margin-top: 5px; } @@ -72,30 +125,25 @@