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 {
width: 200px;
height: 200px;
width: 5cm;
height: 5cm;
border-radius: 50%;
border: 4px solid white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
object-fit: cover;
animation: popIn 0.4s ease;
}
@ -45,14 +44,14 @@ body {
background: rgba(255, 255, 255, 0.9);
border: 1px solid #d1d5db;
border-radius: 1.5rem;
padding: 1.5rem;
padding: 1rem;
margin-top: 1.5rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out;
}
.dialogue-text {
font-size: 18pt;
font-size: 16pt;
color: #374151;
margin-bottom: 1rem;
}
@ -73,7 +72,7 @@ body {
font-weight: 700;
color: white;
width: 8cm;
height: 3cm;
height: 2cm;
border: none;
border-radius: 9999px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
@ -92,30 +91,6 @@ body {
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 {
from {