|
|
|
|
|
body, html { |
|
|
background: url('/assets/background.jpg') no-repeat center center fixed; |
|
|
background-color: #1a202c; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
font-family: 'Inter', Arial, sans-serif; |
|
|
} |
|
|
|
|
|
.h-full { |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.bg-gray-900 { |
|
|
background-color: #1a202c; |
|
|
} |
|
|
|
|
|
.text-gray-200 { |
|
|
color: #e2e8f0; |
|
|
} |
|
|
|
|
|
.flex { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.flex-col { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.justify-between { |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.items-center { |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.p-4 { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.border-b { |
|
|
border-bottom: 1px solid #4a5568; |
|
|
} |
|
|
|
|
|
.bg-gray-800 { |
|
|
background-color: #2d3748; |
|
|
} |
|
|
|
|
|
.text-lg { |
|
|
font-size: 1.125rem; |
|
|
} |
|
|
|
|
|
.font-semibold { |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.tracking-wide { |
|
|
letter-spacing: 0.05em; |
|
|
} |
|
|
|
|
|
.text-white { |
|
|
color: #fff; |
|
|
} |
|
|
|
|
|
.gap-4 { |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.home-btn, .btn-start, .btn-stop { |
|
|
background: none; |
|
|
border: none; |
|
|
color: #fff; |
|
|
font-size: 1rem; |
|
|
padding: 0.5rem 1.2rem; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
transition: background 0.2s; |
|
|
} |
|
|
|
|
|
.home-btn:hover, .btn-start:hover, .btn-stop:hover { |
|
|
background: #2b6cb0; |
|
|
} |
|
|
|
|
|
.max-w-4xl { |
|
|
max-width: 56rem; |
|
|
} |
|
|
|
|
|
.mx-auto { |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
} |
|
|
|
|
|
.space-y-6 > * + * { |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
|
|
|
.bg-gray-800 { |
|
|
background-color: #2d3748; |
|
|
} |
|
|
|
|
|
.border { |
|
|
border: 1px solid #4a5568; |
|
|
} |
|
|
|
|
|
.rounded-xl { |
|
|
border-radius: 1rem; |
|
|
} |
|
|
|
|
|
.shadow-md { |
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.12); |
|
|
} |
|
|
|
|
|
.text-sm { |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
.text-gray-400 { |
|
|
color: #a0aec0; |
|
|
} |
|
|
|
|
|
.mb-2 { |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.text-lg { |
|
|
font-size: 1.125rem; |
|
|
} |
|
|
|
|
|
.font-semibold { |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.text-gray-200 { |
|
|
color: #e2e8f0; |
|
|
} |
|
|
|
|
|
.mb-4 { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.flex { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.items-center { |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.justify-between { |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
padding: 4px 8px; |
|
|
border-radius: 9999px; |
|
|
font-size: 12px; |
|
|
letter-spacing: 0.5px; |
|
|
background: #2d3748; |
|
|
color: #fff; |
|
|
margin-right: 8px; |
|
|
} |
|
|
|
|
|
.badge.bg-blue-600 { |
|
|
background: #3182ce; |
|
|
} |
|
|
.badge.bg-green-600 { |
|
|
background: #38a169; |
|
|
} |
|
|
.badge.bg-yellow-600 { |
|
|
background: #ecc94b; |
|
|
color: #222; |
|
|
} |
|
|
|
|
|
.mic { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background: #4a5568; |
|
|
box-shadow: 0 0 0 0 rgba(31, 130, 68, 0.7); |
|
|
transition: box-shadow 0.25s ease; |
|
|
margin-right: 8px; |
|
|
} |
|
|
.mic.bg-green-600 { |
|
|
background: #2f855a; |
|
|
box-shadow: 0 0 8px 2px rgba(31, 130, 68, 0.7); |
|
|
} |
|
|
|
|
|
.recog { |
|
|
font-size: 12px; |
|
|
padding: 4px 10px; |
|
|
border-radius: 6px; |
|
|
border: 1px dashed #3a3f47; |
|
|
opacity: 0.8; |
|
|
background: #2d3748; |
|
|
color: #fff; |
|
|
} |
|
|
.recog.bg-blue-600 { |
|
|
border-style: solid; |
|
|
border-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.text-xs { |
|
|
font-size: 0.75rem; |
|
|
} |
|
|
.text-gray-500 { |
|
|
color: #718096; |
|
|
} |
|
|
.flex-1 { |
|
|
flex: 1; |
|
|
} |
|
|
.mt-2 { |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
.space-x-6 > * + * { |
|
|
margin-left: 1.5rem; |
|
|
} |
|
|
.w-full { |
|
|
width: 100%; |
|
|
} |
|
|
.bg-gray-700 { |
|
|
background-color: #4a5568; |
|
|
} |
|
|
.rounded-xl { |
|
|
border-radius: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.stylish-font { |
|
|
font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif; |
|
|
letter-spacing: 2px; |
|
|
text-shadow: 0 0 8px #38bdf8, 0 2px 8px #22222244; |
|
|
transition: color 0.3s, text-shadow 0.3s; |
|
|
} |
|
|
|
|
|
.main-flex-layout { |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
justify-content: space-between; |
|
|
align-items: flex-start; |
|
|
width: 100%; |
|
|
height: 80vh; |
|
|
gap: 48px; |
|
|
} |
|
|
|
|
|
.question-section { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
justify-content: flex-start; |
|
|
min-width: 420px; |
|
|
max-width: 700px; |
|
|
padding: 32px 24px 32px 32px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.big-question { |
|
|
background: #f0f4ff; |
|
|
border-radius: 18px; |
|
|
box-shadow: 0 2px 16px #2563eb22; |
|
|
padding: 32px 28px; |
|
|
color: #23272b; |
|
|
font-size: 2.2rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 24px; |
|
|
min-height: 100px; |
|
|
max-width: 700px; |
|
|
word-break: break-word; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.big-question-animated { |
|
|
animation: questionFadeIn 0.7s, pulseText 1.2s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulseText { |
|
|
0% { text-shadow: 0 0 8px #38bdf8, 0 2px 8px #22222244; } |
|
|
100% { text-shadow: 0 0 32px #38bdf8, 0 2px 24px #22222288; } |
|
|
} |
|
|
|
|
|
@keyframes questionFadeIn { |
|
|
from { opacity: 0; transform: translateY(24px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.video-section { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: flex-start; |
|
|
min-width: 400px; |
|
|
max-width: 100vw; |
|
|
padding: 32px 32px 32px 0; |
|
|
} |
|
|
|
|
|
.camera-video { |
|
|
border-radius: 18px; |
|
|
border: 4px solid #38bdf8; |
|
|
box-shadow: 0 0 24px #38bdf844, 0 0 8px #1e293b88; |
|
|
background: #222; |
|
|
object-fit: cover; |
|
|
margin-bottom: 18px; |
|
|
transition: box-shadow 0.4s, border 0.4s; |
|
|
} |
|
|
|
|
|
.camera-video-large { |
|
|
width: 60vw; |
|
|
max-width: 800px; |
|
|
height: 40vh; |
|
|
max-height: 60vh; |
|
|
} |
|
|
|
|
|
|
|
|
.home-btn, .btn-start, .btn-stop, .btn-resume, .btn-submit, .back-btn { |
|
|
font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif; |
|
|
font-size: 1.05rem; |
|
|
font-weight: 700; |
|
|
letter-spacing: 2px; |
|
|
background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%); |
|
|
color: #e3f6ff; |
|
|
box-shadow: 0 2px 16px #38bdf888; |
|
|
border: none; |
|
|
border-radius: 12px; |
|
|
padding: 0.55rem 1.3rem; |
|
|
margin: 0 0.3rem; |
|
|
cursor: pointer; |
|
|
transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
animation: buttonPulse 1.2s infinite alternate; |
|
|
} |
|
|
|
|
|
.btn-start { |
|
|
background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%); |
|
|
color: #fff; |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
padding: 0.7rem 2.2rem; |
|
|
border-radius: 999px; |
|
|
box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44; |
|
|
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; |
|
|
border: none; |
|
|
outline: none; |
|
|
letter-spacing: 2px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
animation: buttonPulse 1.2s infinite alternate; |
|
|
} |
|
|
|
|
|
.btn-start:hover { |
|
|
background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%); |
|
|
color: #e0e7ff; |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 6px 32px #6366f1cc; |
|
|
} |
|
|
|
|
|
.btn-submit { |
|
|
position: fixed; |
|
|
right: 32px; |
|
|
bottom: 32px; |
|
|
z-index: 1000; |
|
|
font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif; |
|
|
font-size: 1.05rem; |
|
|
font-weight: 700; |
|
|
letter-spacing: 2px; |
|
|
background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%); |
|
|
color: #e3f6ff; |
|
|
box-shadow: 0 2px 16px #38bdf888; |
|
|
border: none; |
|
|
border-radius: 12px; |
|
|
padding: 0.55rem 1.3rem; |
|
|
margin: 0 0.3rem; |
|
|
cursor: pointer; |
|
|
transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s; |
|
|
overflow: hidden; |
|
|
animation: buttonPulse 1.2s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes buttonPulse { |
|
|
0% { box-shadow: 0 2px 16px #38bdf888; transform: scale(1); } |
|
|
100% { box-shadow: 0 2px 32px #bae6fd88; transform: scale(1.07); } |
|
|
} |
|
|
|
|
|
.home-btn:hover, .btn-start:hover, .btn-stop:hover, .btn-resume:hover, .btn-submit:hover, .back-btn:hover { |
|
|
background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%); |
|
|
color: #bae6fd; |
|
|
box-shadow: 0 2px 24px #bae6fd88; |
|
|
animation: buttonPulse 0.7s; |
|
|
} |
|
|
|
|
|
.fade-out { |
|
|
opacity: 0.4; |
|
|
pointer-events: none; |
|
|
transition: opacity 0.5s; |
|
|
} |
|
|
|
|
|
.global-bottom-left-btn { |
|
|
position: fixed; |
|
|
left: 24px; |
|
|
bottom: 24px; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
|
|
|
.site-header { |
|
|
background: #011329; |
|
|
box-shadow: 0 2px 12px #38bdf844; |
|
|
margin-bottom: 0; |
|
|
position: relative; |
|
|
z-index: 10; |
|
|
padding-bottom: 0; |
|
|
} |
|
|
|
|
|
.header-inner { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: flex-start; |
|
|
padding: 18px 32px 0 32px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.logo-cluster { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 18px; |
|
|
} |
|
|
|
|
|
.logo-img-header { |
|
|
width: 54px; |
|
|
height: 54px; |
|
|
border-radius: 50%; |
|
|
background: #fff; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.18); |
|
|
padding: 4px; |
|
|
margin-top: -6px; |
|
|
margin-bottom: 1vh; |
|
|
} |
|
|
|
|
|
.py-detect-title-header { |
|
|
font-size: 2.1rem; |
|
|
font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif; |
|
|
font-weight: 900; |
|
|
letter-spacing: 6px; |
|
|
color: #38bdf8; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 2px; |
|
|
margin-bottom: 1.5vh; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.p { |
|
|
color: #e3f6ff; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.y { |
|
|
color: #38bdf8; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-shape { |
|
|
color: #e3f6ff; |
|
|
background: #e3f6ff; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff; |
|
|
border: 2px solid #23272b; |
|
|
width: 18px; |
|
|
height: 4px; |
|
|
display: inline-block; |
|
|
margin: 0 8px; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.d { |
|
|
color: #e3f6ff; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.e { |
|
|
color: #38bdf8; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.t { |
|
|
color: #e3f6ff; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.e2 { |
|
|
color: #38bdf8; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.c { |
|
|
color: #e3f6ff; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
} |
|
|
|
|
|
.py-detect-title-header .py-letter.t2 { |
|
|
color: #38bdf8; |
|
|
text-shadow: 0 0 6px #38bdf8; |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
background: linear-gradient(to right, #011022, #01030a); |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
padding: 10px 0px; |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.left-panel { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
padding: 32px 24px 32px 32px; |
|
|
min-width: 420px; |
|
|
max-width: 700px; |
|
|
} |
|
|
.case-meta { |
|
|
margin-bottom: 24px; |
|
|
font-size: 1.1rem; |
|
|
color: #6366f1; |
|
|
} |
|
|
.case-id-value { |
|
|
color: #fbbf24; |
|
|
font-weight: bold; |
|
|
} |
|
|
.officer-value { |
|
|
color: #38bdf8; |
|
|
font-weight: bold; |
|
|
} |
|
|
.progress-label { |
|
|
color: #38bdf8; |
|
|
} |
|
|
.progress-value { |
|
|
color: #fff; |
|
|
background: #2563eb; |
|
|
border-radius: 6px; |
|
|
padding: 2px 8px; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
|
|
|
.question-card { |
|
|
background: #f0f4ff; |
|
|
border-radius: 18px; |
|
|
box-shadow: 0 2px 16px #2563eb22; |
|
|
padding: 32px 28px; |
|
|
margin-bottom: 18px; |
|
|
min-height: 120px; |
|
|
width: 100%; |
|
|
position: relative; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
} |
|
|
.question-typewriter { |
|
|
font-size: 2.1rem; |
|
|
font-weight: 700; |
|
|
color: #23272b; |
|
|
min-height: 48px; |
|
|
width: 100%; |
|
|
animation: typewriter 2.2s steps(40, end) 1; |
|
|
white-space: pre-line; |
|
|
overflow: hidden; |
|
|
border-right: 2px solid #2563eb; |
|
|
} |
|
|
@keyframes typewriter { |
|
|
from { width: 0; } |
|
|
to { width: 100%; } |
|
|
} |
|
|
|
|
|
|
|
|
.audio-status { |
|
|
margin-top: 18px; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 18px; |
|
|
} |
|
|
.recording-text { |
|
|
color: #38bdf8; |
|
|
font-weight: 700; |
|
|
font-size: 1.1rem; |
|
|
letter-spacing: 1px; |
|
|
animation: pulseRecording 1.2s infinite alternate; |
|
|
} |
|
|
.processing-text { |
|
|
color: #fbbf24; |
|
|
font-weight: 700; |
|
|
font-size: 1.1rem; |
|
|
letter-spacing: 1px; |
|
|
animation: pulseProcessing 1.2s infinite alternate; |
|
|
} |
|
|
@keyframes pulseRecording { |
|
|
0% { opacity: 0.7; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
@keyframes pulseProcessing { |
|
|
0% { opacity: 0.7; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
.waveform-animation { |
|
|
width: 48px; |
|
|
height: 24px; |
|
|
display: inline-block; |
|
|
background: none; |
|
|
position: relative; |
|
|
} |
|
|
.waveform-animation::before { |
|
|
content: ''; |
|
|
display: block; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: url('data:image/svg+xml;utf8,<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="10" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect><rect x="18" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="26" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect><rect x="34" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="42" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect></svg>') no-repeat center center; |
|
|
} |
|
|
|
|
|
|
|
|
.controls-row { |
|
|
display: flex; |
|
|
gap: 18px; |
|
|
margin-top: 18px; |
|
|
} |
|
|
.btn-start-gradient { |
|
|
background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%); |
|
|
color: #fff; |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
padding: 0.7rem 2.2rem; |
|
|
border-radius: 999px; |
|
|
box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44; |
|
|
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; |
|
|
border: none; |
|
|
outline: none; |
|
|
letter-spacing: 2px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
animation: buttonPulse 1.2s infinite alternate; |
|
|
} |
|
|
.btn-start-gradient:hover { |
|
|
background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%); |
|
|
color: #e0e7ff; |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 6px 32px #6366f1cc; |
|
|
} |
|
|
.btn-pause { |
|
|
background: #fbbf24; |
|
|
color: #23272b; |
|
|
font-weight: 700; |
|
|
border-radius: 999px; |
|
|
padding: 0.7rem 1.5rem; |
|
|
border: none; |
|
|
font-size: 1.1rem; |
|
|
box-shadow: 0 2px 8px #fbbf2444; |
|
|
transition: background 0.2s, color 0.2s; |
|
|
} |
|
|
.btn-skip { |
|
|
background: #e0e7ff; |
|
|
color: #6366f1; |
|
|
font-weight: 700; |
|
|
border-radius: 999px; |
|
|
padding: 0.7rem 1.5rem; |
|
|
border: none; |
|
|
font-size: 1.1rem; |
|
|
box-shadow: 0 2px 8px #6366f144; |
|
|
transition: background 0.2s, color 0.2s; |
|
|
} |
|
|
|
|
|
|
|
|
.right-panel { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
padding: 32px 32px 32px 0; |
|
|
min-width: 400px; |
|
|
max-width: 100vw; |
|
|
} |
|
|
.video-preview { |
|
|
margin-bottom: 18px; |
|
|
margin-left: 48px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
min-height: 285px; |
|
|
background: #374151; |
|
|
border: 2px dashed #64748b; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 2px 16px #23272b44; |
|
|
padding: 32px 0; |
|
|
width: 100%; |
|
|
max-width: 995px; |
|
|
} |
|
|
.camera-video { |
|
|
border-radius: 18px; |
|
|
border: 4px solid #38bdf8; |
|
|
box-shadow: 0 0 24px #38bdf844, 0 0 8px #1e293b88; |
|
|
background: #222; |
|
|
object-fit: cover; |
|
|
margin-bottom: 18px; |
|
|
transition: box-shadow 0.4s, border 0.4s; |
|
|
} |
|
|
.camera-video-large { |
|
|
width: 60vw; |
|
|
max-width: 800px; |
|
|
height: 40vh; |
|
|
max-height: 60vh; |
|
|
} |
|
|
.camera-inactive-block { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
min-height: 260px; |
|
|
color: #a0aec0; |
|
|
} |
|
|
.camera-inactive-icon { |
|
|
font-size: 4rem; |
|
|
color: #64748b; |
|
|
margin-bottom: 18px; |
|
|
} |
|
|
.camera-inactive-title { |
|
|
font-size: 1.4rem; |
|
|
font-weight: 600; |
|
|
color: #cbd5e1; |
|
|
margin-bottom: 6px; |
|
|
} |
|
|
.camera-inactive-sub { |
|
|
font-size: 1.05rem; |
|
|
color: #94a3b8; |
|
|
} |
|
|
|
|
|
|
|
|
.transcript-panel { |
|
|
margin-left: 48px; |
|
|
background: #fff; |
|
|
border-radius: 14px; |
|
|
box-shadow: 0 2px 12px #6366f122; |
|
|
padding: 18px 18px 18px 18px; |
|
|
width: 100%; |
|
|
max-width: 962px; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
.transcript-title { |
|
|
font-weight: 700; |
|
|
color: #6366f1; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
.transcript-scrollable { |
|
|
overflow-y: auto; |
|
|
max-height: 180px; |
|
|
padding-right: 8px; |
|
|
} |
|
|
.transcript-line { |
|
|
font-size: 1.05rem; |
|
|
color: #23272b; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
|
|
|
.summary-modal { |
|
|
position: fixed; |
|
|
top: 0; left: 0; right: 0; bottom: 0; |
|
|
background: rgba(30,41,59,0.85); |
|
|
z-index: 9999; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
.summary-modal-content { |
|
|
background: #fff; |
|
|
border-radius: 18px; |
|
|
box-shadow: 0 2px 32px #6366f1cc; |
|
|
padding: 32px 40px; |
|
|
min-width: 420px; |
|
|
max-width: 700px; |
|
|
} |
|
|
.summary-qa-row { |
|
|
margin-bottom: 18px; |
|
|
} |
|
|
.summary-question { |
|
|
font-weight: 700; |
|
|
color: #2563eb; |
|
|
} |
|
|
.summary-answer { |
|
|
color: #23272b; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
.summary-duration { |
|
|
color: #6366f1; |
|
|
font-size: 0.98em; |
|
|
} |
|
|
.btn-close-summary { |
|
|
background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%); |
|
|
color: #fff; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 700; |
|
|
padding: 0.7rem 2.2rem; |
|
|
border-radius: 999px; |
|
|
box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44; |
|
|
border: none; |
|
|
outline: none; |
|
|
letter-spacing: 2px; |
|
|
margin-top: 18px; |
|
|
cursor: pointer; |
|
|
} |
|
|
.btn-close-summary:hover { |
|
|
background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%); |
|
|
color: #e0e7ff; |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 6px 32px #6366f1cc; |
|
|
} |
|
|
|
|
|
|
|
|
.info-card { |
|
|
background: linear-gradient(135deg, #232b3e 60%, #232b3e 100%); |
|
|
border: 2px solid #38bdf8; |
|
|
border-radius: 14px; |
|
|
box-shadow: 0 2px 16px #38bdf822; |
|
|
padding: 32px 24px; |
|
|
margin-bottom: 32px; |
|
|
max-width: 520px; |
|
|
text-align: center; |
|
|
color: #fff; |
|
|
} |
|
|
.info-title { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
.info-desc { |
|
|
font-size: 1.15rem; |
|
|
color: #e2e8f0; |
|
|
} |
|
|
|
|
|
|
|
|
.camera-inactive-card { |
|
|
background: linear-gradient(135deg, #232b3e 60%, #232b3e 100%); |
|
|
border: 2px dashed #a0aec0; |
|
|
border-radius: 14px; |
|
|
box-shadow: 0 2px 16px #38bdf822; |
|
|
padding: 48px 24px 32px 24px; |
|
|
margin-bottom: 32px; |
|
|
max-width: 600px; |
|
|
min-height: 320px; |
|
|
text-align: center; |
|
|
color: #e2e8f0; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
.camera-icon { |
|
|
margin-bottom: 18px; |
|
|
color: #a0aec0; |
|
|
} |
|
|
|
|
|
.button-bar { |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
justify-content: flex-end; |
|
|
align-items: center; |
|
|
gap: 18px; |
|
|
padding: 18px 32px 18px 32px; |
|
|
box-shadow: 0 2px 12px #38bdf844; |
|
|
border-bottom: 1px solid #23272b; |
|
|
} |
|
|
.header-btn { |
|
|
font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif; |
|
|
font-size: 1.05rem; |
|
|
font-weight: 700; |
|
|
letter-spacing: 2px; |
|
|
background: #fff; |
|
|
color: #2563eb; |
|
|
border: 2px solid #2563eb; |
|
|
border-radius: 12px; |
|
|
padding: 0.55rem 1.3rem; |
|
|
margin: 0 0.3rem; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 2px 16px #38bdf888; |
|
|
transition: background 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s; |
|
|
} |
|
|
.header-btn.active, .header-btn:focus, .header-btn:hover { |
|
|
background: #2563eb; |
|
|
color: #fff; |
|
|
border-color: #38bdf8; |
|
|
box-shadow: 0 2px 24px #bae6fd88; |
|
|
} |
|
|
.home-btn { |
|
|
background: #2563eb; |
|
|
color: #fff; |
|
|
border-color: #38bdf8; |
|
|
box-shadow: 0 2px 24px #bae6fd88; |
|
|
} |
|
|
.home-btn:focus, .home-btn:hover { |
|
|
background: #38bdf8; |
|
|
color: #fff; |
|
|
} |
|
|
.start-btn { |
|
|
background: #fff; |
|
|
color: #2563eb; |
|
|
} |
|
|
.camera-btn, .voice-btn, .tts-btn { |
|
|
background: #e0e7ff; |
|
|
color: #2563eb; |
|
|
border-color: #2563eb; |
|
|
} |
|
|
.tts-btn.active { |
|
|
background: #2563eb; |
|
|
color: #fff; |
|
|
} |
|
|
|
