|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CASL 2 - Speech Therapy Assessment</title> |
| <style> |
| :root { |
| --primary: #4a6fa5; |
| --secondary: #6b96c3; |
| --accent: #ff7e5f; |
| --light: #f9f9f9; |
| --dark: #333; |
| --success: #4caf50; |
| --warning: #ff9800; |
| --error: #f44336; |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background-color: var(--light); |
| color: var(--dark); |
| line-height: 1.6; |
| } |
| |
| .app-container { |
| display: flex; |
| min-height: 100vh; |
| } |
| |
| .sidebar { |
| width: 240px; |
| background-color: var(--primary); |
| color: white; |
| padding: 1rem; |
| } |
| |
| .sidebar-header { |
| display: flex; |
| align-items: center; |
| margin-bottom: 2rem; |
| } |
| |
| .sidebar-header h1 { |
| font-size: 1.5rem; |
| margin-left: 0.5rem; |
| } |
| |
| .nav-list { |
| list-style: none; |
| } |
| |
| .nav-item { |
| padding: 0.75rem 1rem; |
| border-radius: 8px; |
| margin-bottom: 0.5rem; |
| cursor: pointer; |
| transition: background-color 0.2s; |
| } |
| |
| .nav-item:hover { |
| background-color: rgba(255, 255, 255, 0.1); |
| } |
| |
| .nav-item.active { |
| background-color: rgba(255, 255, 255, 0.2); |
| font-weight: 500; |
| } |
| |
| .main-content { |
| flex: 1; |
| padding: 2rem; |
| overflow-y: auto; |
| } |
| |
| .content-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 2rem; |
| } |
| |
| .content-header h1 { |
| font-size: 2rem; |
| color: var(--primary); |
| } |
| |
| .btn { |
| padding: 0.75rem 1.5rem; |
| border: none; |
| border-radius: 8px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: background-color 0.2s; |
| } |
| |
| .btn-primary { |
| background-color: var(--primary); |
| color: white; |
| } |
| |
| .btn-primary:hover { |
| background-color: var(--secondary); |
| } |
| |
| .card { |
| background-color: white; |
| border-radius: 12px; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); |
| padding: 1.5rem; |
| margin-bottom: 2rem; |
| } |
| |
| .card-header { |
| margin-bottom: 1.5rem; |
| } |
| |
| .assessment-list { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .assessment-card { |
| background-color: white; |
| border-radius: 12px; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); |
| overflow: hidden; |
| transition: transform 0.2s; |
| cursor: pointer; |
| } |
| |
| .assessment-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .assessment-card-header { |
| padding: 1.5rem; |
| color: white; |
| background-color: var(--primary); |
| } |
| |
| .assessment-card-body { |
| padding: 1.5rem; |
| } |
| |
| .assessment-card-footer { |
| padding: 1rem 1.5rem; |
| background-color: #f5f5f5; |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .patient-selector { |
| margin-bottom: 2rem; |
| } |
| |
| .patient-selector select { |
| padding: 0.75rem; |
| border-radius: 8px; |
| border: 1px solid #ddd; |
| min-width: 300px; |
| font-size: 1rem; |
| } |
| |
| .badge { |
| display: inline-block; |
| padding: 0.25rem 0.75rem; |
| border-radius: 16px; |
| font-size: 0.85rem; |
| font-weight: 500; |
| } |
| |
| .badge-success { |
| background-color: rgba(76, 175, 80, 0.15); |
| color: var(--success); |
| } |
| |
| .badge-warning { |
| background-color: rgba(255, 152, 0, 0.15); |
| color: var(--warning); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="app-container"> |
| |
| <aside class="sidebar"> |
| <div class="sidebar-header"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> |
| </svg> |
| <h1>CASL 2 Therapy</h1> |
| </div> |
| <nav> |
| <ul class="nav-list"> |
| <li class="nav-item">Dashboard</li> |
| <li class="nav-item active">Assessments</li> |
| <li class="nav-item">Therapy Exercises</li> |
| <li class="nav-item">Sessions</li> |
| <li class="nav-item">Progress Reports</li> |
| <li class="nav-item">Patient Management</li> |
| <li class="nav-item">Settings</li> |
| </ul> |
| </nav> |
| </aside> |
|
|
| |
| <main class="main-content"> |
| <div class="content-header"> |
| <h1>Speech Assessments</h1> |
| <button class="btn btn-primary">Create New Assessment</button> |
| </div> |
|
|
| <div class="patient-selector"> |
| <select> |
| <option>Select Patient</option> |
| <option>Adam Smith - Age 8</option> |
| <option>Emma Johnson - Age 6</option> |
| <option>Ryan Davis - Age 10</option> |
| <option>Sofia Martinez - Age 7</option> |
| </select> |
| </div> |
|
|
| <div class="card"> |
| <div class="card-header"> |
| <h2>Available Assessments</h2> |
| <p>Select an assessment type to begin evaluation</p> |
| </div> |
| |
| <div class="assessment-list"> |
| |
| <div class="assessment-card"> |
| <div class="assessment-card-header"> |
| <h3>Articulation Assessment</h3> |
| </div> |
| <div class="assessment-card-body"> |
| <p>Evaluate production of speech sounds in various positions within words.</p> |
| <ul style="margin-top: 1rem; margin-left: 1.5rem;"> |
| <li>Initial, medial, final positions</li> |
| <li>Consonant blends</li> |
| <li>Intelligibility rating</li> |
| </ul> |
| </div> |
| <div class="assessment-card-footer"> |
| <span class="badge badge-success">15-20 min</span> |
| <span>40 items</span> |
| </div> |
| </div> |
| |
| |
| <div class="assessment-card"> |
| <div class="assessment-card-header"> |
| <h3>Language Assessment</h3> |
| </div> |
| <div class="assessment-card-body"> |
| <p>Evaluate receptive and expressive language skills including vocabulary and grammar.</p> |
| <ul style="margin-top: 1rem; margin-left: 1.5rem;"> |
| <li>Vocabulary comprehension</li> |
| <li>Following directions</li> |
| <li>Sentence formation</li> |
| </ul> |
| </div> |
| <div class="assessment-card-footer"> |
| <span class="badge badge-warning">25-30 min</span> |
| <span>35 items</span> |
| </div> |
| </div> |
| |
| |
| <div class="assessment-card"> |
| <div class="assessment-card-header"> |
| <h3>Fluency Assessment</h3> |
| </div> |
| <div class="assessment-card-body"> |
| <p>Evaluate speech fluency including rate, rhythm, and presence of disfluencies.</p> |
| <ul style="margin-top: 1rem; margin-left: 1.5rem;"> |
| <li>Reading tasks</li> |
| <li>Conversation sample</li> |
| <li>Picture description</li> |
| </ul> |
| </div> |
| <div class="assessment-card-footer"> |
| <span class="badge badge-warning">20-25 min</span> |
| <span>3 activities</span> |
| </div> |
| </div> |
| |
| |
| <div class="assessment-card"> |
| <div class="assessment-card-header"> |
| <h3>Voice Assessment</h3> |
| </div> |
| <div class="assessment-card-body"> |
| <p>Evaluate voice quality, pitch, loudness, and resonance during various speaking tasks.</p> |
| <ul style="margin-top: 1rem; margin-left: 1.5rem;"> |
| <li>Sustained phonation</li> |
| <li>Pitch range</li> |
| <li>Connected speech</li> |
| </ul> |
| </div> |
| <div class="assessment-card-footer"> |
| <span class="badge badge-success">15-20 min</span> |
| <span>4 activities</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </body> |
| </html> |
|
|
|
|
