mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 12:17:35 +00:00
ivan-pelly
407 lines
10 KiB
HTML
407 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta name="description"
|
|
content="WIN Student Goal Tracker — a student goal tracker and reporting system for tracking goals, documenting services, and logging critical incidents with auditability and privacy in mind.">
|
|
|
|
<meta name="theme-color" content="#111827">
|
|
|
|
<title>WIN — Student Goal Tracker and Reporting</title>
|
|
|
|
<meta property="og:title" content="WIN — Student Goal Tracker and Reporting">
|
|
<meta property="og:description"
|
|
content="Track goals, services, and critical incidents for students with secure, auditable workflows designed for student support programs.">
|
|
<meta property="og:type" content="website">
|
|
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
|
|
margin: 0;
|
|
background: #f5f7fa;
|
|
color: #111827;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
header {
|
|
background: #111827;
|
|
color: white;
|
|
padding: 3rem 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
header h1 {
|
|
margin: 0;
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
header p {
|
|
margin-top: .75rem;
|
|
opacity: .9;
|
|
max-width: 70ch;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
main {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 1.25rem 1rem 3rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 14px;
|
|
padding: 1.25rem;
|
|
box-shadow: 0 6px 18px rgba(17, 24, 39, .08);
|
|
border: 1px solid rgba(17, 24, 39, .06);
|
|
}
|
|
|
|
.hero {
|
|
grid-column: span 12;
|
|
}
|
|
|
|
.two {
|
|
grid-column: span 12;
|
|
}
|
|
|
|
@media (min-width:860px) {
|
|
.two {
|
|
grid-column: span 6;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 .5rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.muted {
|
|
color: rgba(17, 24, 39, .75);
|
|
}
|
|
|
|
.pill-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
margin-top: .75rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: .6rem .9rem;
|
|
border-radius: 10px;
|
|
background: #2563eb;
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
border: 1px solid rgba(17, 24, 39, .08);
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #1d4ed8;
|
|
}
|
|
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.grid-4 {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.kpi {
|
|
text-align: center;
|
|
}
|
|
|
|
.kpi strong {
|
|
display: block;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
code {
|
|
white-space: nowrap;
|
|
background: #eef2ff;
|
|
padding: 2px 6px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: rgba(17, 24, 39, .65);
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
|
|
<h1>WIN — Student Goal Tracker and Reporting</h1>
|
|
|
|
<p>
|
|
Track student goals, document services, and log critical incidents with auditable workflows designed for student
|
|
support programs.
|
|
</p>
|
|
|
|
<!-- Live prototype + survey -->
|
|
<div style="margin-top:1.5rem">
|
|
|
|
<a href="https://win.opelly.me/" class="btn" target="_blank" rel="noopener noreferrer"
|
|
style="margin-right:.5rem;">
|
|
Open Live Prototype
|
|
</a>
|
|
|
|
<a href="https://docs.google.com/forms/d/e/1FAIpQLSd4waAGdgDC9SpA2uvelWQtpJt7sGqsFgc-PCBOMoT99LmLHA/viewform"
|
|
class="btn" target="_blank" rel="noopener noreferrer" style="background:#16a34a;">
|
|
Take Evaluation Survey
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
<main>
|
|
|
|
<section class="grid">
|
|
|
|
<section class="card hero">
|
|
|
|
<h2>Project Overview</h2>
|
|
|
|
<p class="muted">
|
|
WIN Student Goal Tracker supports student goal tracking, services documentation,
|
|
and critical incident reporting with auditability and privacy in mind.
|
|
The system reduces manual paperwork and improves visibility into student progress.
|
|
</p>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="card two">
|
|
|
|
<h2>Typical Workflow</h2>
|
|
|
|
<ol>
|
|
<li>Select a student.</li>
|
|
<li>Select a goal.</li>
|
|
<li>Record progress events for that goal.</li>
|
|
<li>Record case notes and services provided.</li>
|
|
<li>If needed, log a critical incident.</li>
|
|
<li>Generate reports for program outcomes.</li>
|
|
</ol>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="card two">
|
|
|
|
<h2>Core Features</h2>
|
|
|
|
<ul>
|
|
<li>👤 <strong>Student profiles:</strong> demographics and program context.</li>
|
|
<li>🎯 <strong>Goal management:</strong> sub-goals, statuses, and progress tracking.</li>
|
|
<li>📝 <strong>Case documentation:</strong> notes and service tracking.</li>
|
|
<li>⚠️ <strong>Critical incidents:</strong> consistent logging and review.</li>
|
|
<li>🔎 <strong>Search & filters:</strong> quickly locate students.</li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="card two">
|
|
|
|
<h2>Project Structure</h2>
|
|
|
|
<ul>
|
|
<li><code>api/</code> — middle-tier services and data access</li>
|
|
<li><code>ui/</code> — front-end application</li>
|
|
<li><code>db/</code> — database structures</li>
|
|
<li><code>SECURITY.md</code> — security practices</li>
|
|
<li><code>README.md</code> — build instructions</li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="card two">
|
|
|
|
<h2>Getting Started</h2>
|
|
|
|
<ol>
|
|
<li>Open the <strong>live prototype</strong> to validate the core workflow.</li>
|
|
<li>Complete the 3 evaluation tasks on the prototype.</li>
|
|
<li>Submit feedback using the <strong>evaluation survey</strong>.</li>
|
|
</ol>
|
|
|
|
<a href="https://github.com/opelly27/WinStudentGoalTracker" class="btn" target="_blank"
|
|
rel="noopener noreferrer">
|
|
Go to GitHub
|
|
</a>
|
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="card" style="margin-top:1.25rem;">
|
|
|
|
<h2>Roadmap</h2>
|
|
|
|
<div class="grid-3">
|
|
|
|
<div class="card" style="box-shadow:none;border:1px solid #e5e7eb;">
|
|
<h3>MVP</h3>
|
|
<ul>
|
|
<li>Student profiles</li>
|
|
<li>Goal creation</li>
|
|
<li>Incident logging</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card" style="box-shadow:none;border:1px solid #e5e7eb;">
|
|
<h3>Operations</h3>
|
|
<ul>
|
|
<li>Search & filters</li>
|
|
<li>Reports & exports</li>
|
|
<li>Supervisor review workflow</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card" style="box-shadow:none;border:1px solid #e5e7eb;">
|
|
<h3>Compliance</h3>
|
|
<ul>
|
|
<li>Audit log viewer</li>
|
|
<li>Retention policy</li>
|
|
<li>Incident classification</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="card" style="margin-top:1.25rem;">
|
|
|
|
<h2>Team Members</h2>
|
|
|
|
<ul>
|
|
<li><b>Armin Abaye</b> — UX/UI Lead & Product Strategy</li>
|
|
<li><b>Ivan Pelly</b> — Full Stack Development Lead</li>
|
|
<li><b>Oliver Pelly</b> — Backend Systems & Security Engineer</li>
|
|
<li><b>Raul Rosado</b> — Infrastructure & Governance Lead</li>
|
|
<li><b>Vraj Patel</b> — Front-End Development & Integration Lead</li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="card" style="margin-top:1.25rem;" aria-labelledby="documentation">
|
|
|
|
<h2 id="documentation">Documentation</h2>
|
|
|
|
<p class="muted">
|
|
Stakeholders: open the live prototype, complete the tasks, then submit feedback using the survey.
|
|
</p>
|
|
|
|
<div class="pill-row">
|
|
|
|
<a href="prototype.html" class="btn">
|
|
Prototype Page (Tasks + Links)
|
|
</a>
|
|
|
|
<a href="https://win.opelly.me/" class="btn" target="_blank" rel="noopener noreferrer">
|
|
Live Prototype
|
|
</a>
|
|
|
|
<a href="https://docs.google.com/forms/d/e/1FAIpQLSd4waAGdgDC9SpA2uvelWQtpJt7sGqsFgc-PCBOMoT99LmLHA/viewform"
|
|
class="btn" target="_blank" rel="noopener noreferrer" style="background:#16a34a;">
|
|
Prototype Evaluation Survey
|
|
</a>
|
|
|
|
<a href="https://www.figma.com/design/VyuyyPsPWtZ4jU5O93TknM/C4G-WIN---Initial-Design?node-id=1-5" class="btn"
|
|
target="_blank" rel="noopener noreferrer">
|
|
Figma Design (Desktop)
|
|
</a>
|
|
|
|
<a href="https://www.figma.com/design/VyuyyPsPWtZ4jU5O93TknM/C4G-WIN---Initial-Design?node-id=1-4" class="btn"
|
|
target="_blank" rel="noopener noreferrer">
|
|
Figma Design (Mobile)
|
|
</a>
|
|
|
|
<a href="db.html" class="btn">Database Documentation</a>
|
|
<a href="api.html" class="btn">API Documentation</a>
|
|
<a href="ui.html" class="btn">UI Documentation</a>
|
|
<a href="um.html" class="btn">User Manual Documentation</a>
|
|
<a href="technical.html" class="btn">Technical Documentation</a>
|
|
<a href="p6video.html" class="btn" style="background:#7816e9;">🎬 P6 Presentation Video</a>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section class="card" style="margin-top:1.25rem;">
|
|
|
|
<h2>Lighthouse Scores</h2>
|
|
|
|
<div class="grid-4">
|
|
|
|
<div class="kpi">
|
|
<strong>100</strong>
|
|
<span>Performance</span>
|
|
</div>
|
|
|
|
<div class="kpi">
|
|
<strong>100</strong>
|
|
<span>Accessibility</span>
|
|
</div>
|
|
|
|
<div class="kpi">
|
|
<strong>100</strong>
|
|
<span>Best Practices</span>
|
|
</div>
|
|
|
|
<div class="kpi">
|
|
<strong>100</strong>
|
|
<span>SEO</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<small style="display:block;text-align:center;margin-top:8px;">
|
|
Tested in a Chrome Incognito window.
|
|
</small>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
|
|
<footer>
|
|
© 2026 WIN Student Goal Tracker — Built for student support and accountability.
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html> |