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
Unified 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 @@
:root { :root {
--color-bg: #f6f8fb; /* Playful, gender-neutral color palette */
--color-bg: #f0f4ff;
--color-surface: #ffffff; --color-surface: #ffffff;
--color-surface-alt: #f0f4ff; --color-surface-alt: #fff8e1;
--color-surface-muted: #e9f2ff; --color-surface-muted: #e8f5e9;
--color-primary: #2f80ed; --color-primary: #7c3aed;
--color-primary-dark: #1f5fb7; --color-primary-dark: #6d28d9;
--color-secondary: #3ab5a8; --color-secondary: #f59e0b;
--color-secondary-dark: #2d8c82; --color-secondary-dark: #d97706;
--color-accent: #f4c95d; --color-accent: #10b981;
--color-muted: #5a6473; --color-accent-alt: #ef4444;
--color-text: #1f2a37; --color-muted: #6b7280;
--color-border: #d4deef; --color-text: #1f2937;
--color-shadow: rgba(35, 74, 134, 0.16); --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 @@
} }
body { body {
font-family: 'Roboto', 'Arial', sans-serif; font-family: var(--font-body);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background: linear-gradient(180deg, var(--color-bg), #e7edf7); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
} }
@ -63,7 +73,7 @@ body {
.error-container button { .error-container button {
padding: 10px 20px; padding: 10px 20px;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); background: var(--color-primary);
color: white; color: white;
border: none; border: none;
border-radius: 999px; border-radius: 999px;

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save