This commit is contained in:
2026-03-29 18:34:52 -07:00
parent 92a643c5ea
commit 947d87b1bc
+417
View File
@@ -0,0 +1,417 @@
<!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 &amp; 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 &amp; filters</li>
<li>Reports &amp; 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 &amp; Product Strategy</li>
<li><b>Ivan Pelly</b> — Full Stack Development Lead</li>
<li><b>Oliver Pelly</b> — Backend Systems &amp; Security Engineer</li>
<li><b>Raul Rosado</b> — Infrastructure &amp; Governance Lead</li>
<li><b>Vraj Patel</b> — Front-End Development &amp; 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>
</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>