opelly/WinStudentGoalTracker
1
0
Fork 0
mirror of https://github.com/opelly27/WinStudentGoalTracker.git synced 2026-05-20 01:47:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated button color

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