|
|
|
|
|
<!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> |
|
|
|
|
|
|
