techtransthai/ai-english-tutor-poc
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make items fit better on small screens
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Late Night Defender 2025-05-27 14:49:33 +07:00
parent 4757564e93
commit bc4ebeff8c
1 changed files with 5 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/App.css
View file

@ -32,12 +32,11 @@ body {
} }
.avatar { .avatar {
width: 200px; width: 5cm;
height: 200px; height: 5cm;
border-radius: 50%; border-radius: 50%;
border: 4px solid white; border: 4px solid white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
object-fit: cover;
animation: popIn 0.4s ease; animation: popIn 0.4s ease;
} }
@ -45,14 +44,14 @@ body {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 1.5rem; border-radius: 1.5rem;
padding: 1.5rem; padding: 1rem;
margin-top: 1.5rem; margin-top: 1.5rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out; animation: fadeIn 0.5s ease-in-out;
} }
.dialogue-text { .dialogue-text {
font-size: 18pt; font-size: 16pt;
color: #374151; color: #374151;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -73,7 +72,7 @@ body {
font-weight: 700; font-weight: 700;
color: white; color: white;
width: 8cm; width: 8cm;
height: 3cm; height: 2cm;
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
@ -92,30 +91,6 @@ body {
background-color: #2563eb; background-color: #2563eb;
} }
.recording-indicator {
color: red;
font-weight: bold;
margin-top: 1rem;
text-align: center;
animation: pulse 1s infinite;
}
.waveform-canvas {
width: 300px; /* same as element width */
height: 60px; /* same as element height */
background-color: #000;
border-radius: 8px;
margin: 10px auto;
display: block;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
@keyframes fadeIn { @keyframes fadeIn {
from { from {