codegirl007
/
kiddos
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

change css

drawing-pad
Stephanie Gredell 1 month ago
parent
9ca4ce960a
commit
8d4a02b1bc
5 changed files with 291 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      frontend/src/App.css
  2. 6
      frontend/src/components/Navbar/Navbar.css
  3. 1
      frontend/src/components/WordGroupManager/WordGroupManager.css
  4. 52
      frontend/src/pages/LandingPage.css
  5. 337
      frontend/src/pages/SpeechSoundsApp.css

40
frontend/src/App.css
Unescape View File

@ -1,17 +1,27 @@ @@ -1,17 +1,27 @@
:root {
--color-bg: #f6f8fb;
/* Playful, gender-neutral color palette */
--color-bg: #f0f4ff;
--color-surface: #ffffff;
--color-surface-alt: #f0f4ff;
--color-surface-muted: #e9f2ff;
--color-primary: #2f80ed;
--color-primary-dark: #1f5fb7;
--color-secondary: #3ab5a8;
--color-secondary-dark: #2d8c82;
--color-accent: #f4c95d;
--color-muted: #5a6473;
--color-text: #1f2a37;
--color-border: #d4deef;
--color-shadow: rgba(35, 74, 134, 0.16);
--color-surface-alt: #fff8e1;
--color-surface-muted: #e8f5e9;
--color-primary: #7c3aed;
--color-primary-dark: #6d28d9;
--color-secondary: #f59e0b;
--color-secondary-dark: #d97706;
--color-accent: #10b981;
--color-accent-alt: #ef4444;
--color-muted: #6b7280;
--color-text: #1f2937;
--color-border: #e5e7eb;
--color-shadow: rgba(124, 58, 237, 0.15);
/* Subtle gradients for text effects only */
--gradient-primary-text: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
--gradient-secondary-text: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
/* Playful fonts */
--font-playful: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', 'Nunito', sans-serif;
--font-body: 'Nunito', 'Roboto', sans-serif;
}
* {
@ -21,10 +31,10 @@ @@ -21,10 +31,10 @@
}
body {
font-family: 'Roboto', 'Arial', sans-serif;
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: linear-gradient(180deg, var(--color-bg), #e7edf7);
background: var(--color-bg);
color: var(--color-text);
}
@ -63,7 +73,7 @@ body { @@ -63,7 +73,7 @@ body {
.error-container button {
padding: 10px 20px;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
background: var(--color-primary);
color: white;
border: none;
border-radius: 999px;

6
frontend/src/components/Navbar/Navbar.css
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
.navbar {
background: linear-gradient(120deg, var(--color-surface), var(--color-surface-alt));
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
@ -67,7 +67,7 @@ @@ -67,7 +67,7 @@
}
.navbar-button {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
background: var(--color-primary);
color: white;
border: none;
padding: 10px 20px;
@ -125,7 +125,7 @@ @@ -125,7 +125,7 @@
.navbar-search-button {
padding: 10px 18px;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
background: var(--color-primary);
border: none;
border-radius: 999px;
cursor: pointer;

1
frontend/src/components/WordGroupManager/WordGroupManager.css
Unescape View File

@ -249,6 +249,7 @@ @@ -249,6 +249,7 @@
.practice-area {
.word-text {
font-size: 48px;
text-transform: none;
}
}
.word-text {

52
frontend/src/pages/LandingPage.css
Unescape View File

@ -14,11 +14,19 @@ @@ -14,11 +14,19 @@
.menu-header h1 {
font-size: 2.5rem;
margin: 12px 0;
font-family: var(--font-playful);
font-weight: 800;
background: var(--gradient-primary-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.menu-header p {
color: var(--color-muted);
margin: 0;
font-weight: 600;
font-size: 1.1rem;
}
.eyebrow {
@ -36,13 +44,20 @@ @@ -36,13 +44,20 @@
.app-card {
border-radius: 24px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--color-border);
padding: 24px;
box-shadow: 0 20px 45px rgba(31, 59, 115, 0.12);
background: var(--color-surface);
border: 3px solid var(--color-primary);
padding: 28px;
box-shadow: 0 8px 24px var(--color-shadow);
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-card:hover:not(.disabled) {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 12px 32px rgba(124, 58, 237, 0.25);
border-color: var(--color-secondary);
}
.app-card header {
@ -54,7 +69,13 @@ @@ -54,7 +69,13 @@
.app-card h2 {
margin: 0;
font-size: 1.4rem;
font-size: 1.5rem;
font-family: var(--font-playful);
font-weight: 800;
background: var(--gradient-primary-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.app-card p {
@ -80,20 +101,23 @@ @@ -80,20 +101,23 @@
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 999px;
font-weight: 600;
padding: 12px 24px;
border-radius: 25px;
font-weight: 700;
font-family: var(--font-playful);
text-decoration: none;
border: none;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
border: 3px solid var(--color-primary);
background: var(--color-primary);
color: white;
box-shadow: 0 12px 24px rgba(31, 59, 115, 0.2);
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 12px var(--color-shadow);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-actions a:hover,
.app-actions button:hover {
transform: translateY(-2px);
.app-actions button:hover:not(:disabled) {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
border-color: var(--color-secondary);
}
.app-card.disabled {

337
frontend/src/pages/SpeechSoundsApp.css
Unescape View File

@ -1,8 +1,8 @@ @@ -1,8 +1,8 @@
.speech-sounds-app {
min-height: calc(100vh - 60px);
background-color: #f9f9f9;
background: var(--color-bg);
padding: 24px;
max-width: 800px;
max-width: 900px;
margin: 0 auto;
}
@ -12,32 +12,44 @@ @@ -12,32 +12,44 @@
}
.app-header h1 {
margin: 0 0 8px 0;
font-size: 32px;
font-weight: 500;
color: #030303;
margin: 0 0 12px 0;
font-size: 42px;
font-weight: 800;
background: var(--gradient-primary-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-playful);
}
.app-header p {
margin: 0;
font-size: 16px;
color: #606060;
font-size: 18px;
color: var(--color-text);
font-weight: 600;
opacity: 0.8;
}
.back-to-groups-button {
margin-bottom: 16px;
padding: 8px 16px;
background: transparent;
border: 1px solid #e5e5e5;
border-radius: 6px;
color: #030303;
font-size: 14px;
padding: 12px 24px;
background: var(--color-surface);
border: 3px solid var(--color-primary);
border-radius: 20px;
color: var(--color-primary);
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s;
transition: all 0.3s;
box-shadow: 0 4px 8px var(--color-shadow);
font-family: var(--font-playful);
}
.back-to-groups-button:hover {
background-color: #f5f5f5;
background: var(--color-primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(124, 58, 237, 0.3);
}
.groups-grid {
@ -48,85 +60,138 @@ @@ -48,85 +60,138 @@
}
.group-card {
background: white;
border: 2px solid #e5e5e5;
border-radius: 12px;
background: var(--color-surface);
border: 4px solid var(--color-primary);
border-radius: 24px;
padding: 32px 24px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
text-decoration: none;
color: #030303;
color: var(--color-text);
box-shadow: 0 8px 16px var(--color-shadow);
position: relative;
overflow: hidden;
}
.group-card::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(124, 58, 237, 0.1) 0%,
transparent 70%
);
opacity: 0;
transition: opacity 0.3s;
}
.group-card:hover {
border-color: #065fd4;
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transform: translateY(-8px) scale(1.05);
box-shadow: 0 12px 32px rgba(124, 58, 237, 0.3);
border-color: var(--color-secondary);
}
.group-card:hover::before {
opacity: 1;
}
.group-card-name {
margin: 0 0 8px 0;
font-size: 24px;
font-weight: 600;
color: #030303;
font-size: 28px;
font-weight: 800;
background: var(--gradient-primary-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-playful);
position: relative;
z-index: 1;
}
.group-card-count {
margin: 0;
font-size: 16px;
color: #606060;
font-size: 18px;
color: var(--color-muted);
font-weight: 700;
position: relative;
z-index: 1;
}
.practice-area {
background: white;
border-radius: 12px;
padding: 32px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: var(--color-surface);
border-radius: 32px;
padding: 40px;
box-shadow: 0 8px 32px var(--color-shadow);
border: 4px solid var(--color-primary);
}
.word-display {
text-align: center;
margin-bottom: 32px;
margin-bottom: 40px;
}
.word-text {
font-size: 64px;
font-weight: 700;
color: #030303;
margin: 0 0 16px 0;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 72px;
font-weight: 900;
background: var(--gradient-primary-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 20px 0;
letter-spacing: 4px;
font-family: var(--font-playful);
animation: wordBounce 0.5s ease-out;
}
@keyframes wordBounce {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.practice-stats {
display: flex;
justify-content: center;
gap: 24px;
margin-top: 16px;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.stat-item {
font-size: 16px;
font-weight: 500;
padding: 8px 16px;
border-radius: 20px;
background: #f5f5f5;
font-size: 18px;
font-weight: 700;
padding: 12px 20px;
border-radius: 25px;
box-shadow: 0 4px 8px var(--color-shadow);
border: 3px solid;
font-family: var(--font-playful);
}
.stat-pass {
color: #166534;
background: #f0fdf4;
background: var(--color-accent);
border-color: var(--color-accent);
color: white;
}
.stat-fail {
color: #991b1b;
background: #fef2f2;
background: var(--color-accent-alt);
border-color: var(--color-accent-alt);
color: white;
}
.stat-total {
color: #030303;
background: var(--color-secondary);
border-color: var(--color-secondary);
color: white;
}
.practice-container {
@ -135,17 +200,17 @@ @@ -135,17 +200,17 @@
.practice-label {
text-align: center;
font-size: 16px;
font-weight: 500;
color: #030303;
margin-bottom: 20px;
font-size: 20px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 24px;
font-family: var(--font-playful);
}
.practice-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
max-width: 645px;
margin: 0 auto;
}
@ -154,75 +219,96 @@ @@ -154,75 +219,96 @@
flex-direction: column;
align-items: center;
gap: 12px;
padding: 16px;
border: 2px solid #e5e5e5;
border-radius: 8px;
background: white;
padding: 20px 16px;
border: 3px solid var(--color-border);
border-radius: 20px;
background: var(--color-surface);
transition: all 0.3s;
}
.practice-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px var(--color-shadow);
border-color: var(--color-primary);
}
.practice-number {
font-size: 14px;
font-weight: 600;
color: #606060;
width: 32px;
height: 32px;
font-size: 16px;
font-weight: 700;
color: white;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f5f5f5;
background: var(--color-primary);
box-shadow: 0 4px 8px var(--color-shadow);
}
.practice-buttons {
display: flex;
gap: 8px;
gap: 10px;
}
.practice-button {
width: 36px;
height: 36px;
border: 2px solid #e5e5e5;
border-radius: 6px;
width: 44px;
height: 44px;
border: 3px solid;
border-radius: 12px;
background: white;
font-size: 20px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.practice-button:hover {
transform: scale(1.15);
}
.pass-button {
color: #166534;
border-color: #86efac;
color: #065f46;
border-color: #10b981;
}
.pass-button:hover {
background: #f0fdf4;
border-color: #4ade80;
background: var(--color-accent);
border-color: var(--color-accent);
color: white;
box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3);
}
.pass-button.active {
background: #22c55e;
background: var(--color-accent);
color: white;
border-color: #22c55e;
border-color: var(--color-accent);
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}
.fail-button {
color: #991b1b;
border-color: #fecaca;
border-color: #ef4444;
}
.fail-button:hover {
background: #fef2f2;
border-color: #f87171;
background: var(--color-accent-alt);
border-color: var(--color-accent-alt);
color: white;
box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
}
.fail-button.active {
background: #dc2626;
background: var(--color-accent-alt);
color: white;
border-color: #dc2626;
border-color: var(--color-accent-alt);
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}
.word-navigation {
@ -231,34 +317,45 @@ @@ -231,34 +317,45 @@
align-items: center;
margin-bottom: 24px;
padding-top: 24px;
border-top: 1px solid #e5e5e5;
border-top: 3px dashed #e0e0e0;
}
.nav-button {
padding: 12px 24px;
background: #065fd4;
padding: 16px 32px;
background: var(--color-primary);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
border: 3px solid var(--color-primary);
border-radius: 25px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 12px var(--color-shadow);
font-family: var(--font-playful);
}
.nav-button:hover:not(:disabled) {
background: #0556c4;
transform: translateY(-4px) scale(1.05);
box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
border-color: var(--color-secondary);
}
.nav-button:disabled {
opacity: 0.5;
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
.word-counter {
font-size: 16px;
color: #606060;
font-weight: 500;
font-size: 20px;
color: white;
font-weight: 700;
font-family: var(--font-playful);
padding: 12px 24px;
background: var(--color-secondary);
border-radius: 20px;
border: 3px solid var(--color-secondary);
box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}
.word-actions {
@ -266,20 +363,24 @@ @@ -266,20 +363,24 @@
}
.reset-button {
padding: 10px 20px;
background: transparent;
color: #d00;
border: 1px solid #d00;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
padding: 12px 24px;
background: var(--color-surface);
color: var(--color-accent-alt);
border: 3px solid var(--color-accent-alt);
border-radius: 20px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
transition: all 0.3s;
box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
font-family: var(--font-playful);
}
.reset-button:hover {
background: #d00;
background: var(--color-accent-alt);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
}
.loading-state,
@ -287,20 +388,30 @@ @@ -287,20 +388,30 @@
.empty-state {
text-align: center;
padding: 48px 24px;
background: white;
border-radius: 12px;
background: var(--color-surface);
border-radius: 24px;
margin-top: 32px;
border: 4px solid var(--color-primary);
box-shadow: 0 8px 16px var(--color-shadow);
}
.empty-state h2 {
margin: 0 0 8px 0;
font-size: 24px;
color: #030303;
margin: 0 0 12px 0;
font-size: 32px;
color: var(--color-text);
font-family: var(--font-playful);
font-weight: 800;
background: var(--gradient-primary-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.empty-state p {
margin: 0;
color: #606060;
color: var(--color-muted);
font-size: 18px;
font-weight: 600;
}
@media (max-width: 768px) {

Write Preview
Loading…
Cancel
Save