Spaces:
Running
Running
:root { | |
--primary-color: #4a90e2; | |
--secondary-color: #f39c12; | |
--accent-color: #38cb96; | |
--background-color: #f0f4f8; | |
--card-bg-color: #ffffff; | |
--text-color: #333333; | |
--border-color: #e0e0e0; | |
--shadow-color: rgba(0, 0, 0, 0.1); | |
--hover-shadow-color: rgba(74, 144, 226, 0.3); | |
--hover-bg-color: #1e9b6e; | |
--active-bg-color: #1a855d; | |
--tooltip-bg-color: #333; | |
--tooltip-text-color: #fff; | |
} | |
body { | |
font-family: 'Roboto', sans-serif; | |
background: linear-gradient(135deg, var(--background-color) 0%, #dfe9f3 100%); | |
color: var(--text-color); | |
margin: 0; | |
padding: 0; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
min-height: 100vh; | |
} | |
.container { | |
width: 90%; | |
max-width: 800px; | |
} | |
.voice-assistant-card { | |
background: linear-gradient(135deg, var(--card-bg-color) 0%, #f9f9f9 100%); | |
border-radius: 20px; | |
box-shadow: 0 10px 30px var(--shadow-color); | |
padding: 40px; | |
text-align: center; | |
position: relative; | |
overflow: hidden; | |
} | |
.voice-assistant-card::before { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(255, 255, 255, 0.1); | |
border-radius: 20px; | |
z-index: -1; | |
filter: blur(10px); | |
} | |
.title { | |
font-size: 2.5rem; | |
font-weight: 700; | |
margin-bottom: 20px; | |
color: var(--primary-color); | |
position: relative; | |
z-index: 1; | |
} | |
#responseTime { | |
font-size: 0.9rem; | |
color: #777; | |
margin-bottom: 20px; | |
position: relative; | |
z-index: 1; | |
} | |
.indicator-wrapper { | |
display: flex; | |
justify-content: space-around; | |
margin-bottom: 30px; | |
position: relative; | |
z-index: 1; | |
} | |
.indicator { | |
display: flex; | |
align-items: center; | |
padding: 10px 20px; | |
border-radius: 50px; | |
font-size: 1rem; | |
color: #fff; | |
transition: all 0.3s ease; | |
position: relative; | |
z-index: 1; | |
} | |
.indicator svg { | |
margin-right: 8px; | |
} | |
#userIndicator { | |
background: linear-gradient(135deg, var(--primary-color) 0%, #6fb1f2 100%); | |
} | |
#aiIndicator { | |
background: linear-gradient(135deg, var(--secondary-color) 0%, #ffaf5c 100%); | |
} | |
#startStopButton { | |
background: linear-gradient(135deg, var(--accent-color) 0%, #28b475 100%); | |
color: #fff; | |
border: none; | |
padding: 15px 30px; | |
font-size: 1.2rem; | |
border-radius: 50px; | |
cursor: pointer; | |
transition: all 0.3s ease; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
margin: 0 auto 30px; | |
position: relative; | |
z-index: 1; | |
} | |
#startStopButton:hover { | |
background: linear-gradient(135deg, var(--hover-bg-color) 0%, #28b475 100%); | |
transform: translateY(-2px); | |
box-shadow: 0 5px 15px var(--hover-shadow-color); | |
} | |
#startStopButton:active { | |
background: linear-gradient(135deg, var(--active-bg-color) 0%, #28b475 100%); | |
transform: translateY(0); | |
box-shadow: 0 2px 10px var(--shadow-color); | |
} | |
#startStopButton svg { | |
margin-right: 10px; | |
} | |
.settings { | |
display: grid; | |
grid-template-columns: 1fr 1fr 1.5fr; | |
gap: 20px; | |
margin-bottom: 30px; | |
position: relative; | |
z-index: 1; | |
} | |
.setting { | |
text-align: left; | |
position: relative; | |
/* Added for tooltip positioning */ | |
} | |
.setting label { | |
display: block; | |
margin-bottom: 5px; | |
font-weight: 700; | |
color: var(--text-color); | |
} | |
select, | |
input[type="password"] { | |
width: 100%; | |
padding: 10px; | |
border: 1px solid var(--border-color); | |
border-radius: 5px; | |
font-size: 1rem; | |
background-color: #fff; | |
color: var(--text-color); | |
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | |
transition: all 0.3s ease; | |
} | |
select:hover, | |
input[type="password"]:hover { | |
border-color: var(--primary-color); | |
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
} | |
.tooltip { | |
display: none; | |
position: absolute; | |
background-color: var(--tooltip-bg-color); | |
color: var(--tooltip-text-color); | |
padding: 5px; | |
border-radius: 5px; | |
font-size: 0.8rem; | |
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
} | |
.setting:hover .tooltip { | |
display: block; | |
/* Show tooltip on hover */ | |
} | |
#transcript { | |
background: linear-gradient(135deg, #f9f9f9 0%, #e6e6e6 100%); | |
border-radius: 10px; | |
padding: 20px; | |
margin-top: 30px; | |
text-align: left; | |
font-family: 'Courier New', monospace; | |
white-space: pre-wrap; | |
max-height: 200px; | |
overflow-y: auto; | |
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | |
position: relative; | |
z-index: 1; | |
} | |
@media (max-width: 600px) { | |
.settings { | |
grid-template-columns: 1fr; | |
} | |
} |