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

Update Index.html

Browse Source 
add survey
This commit is contained in:
raulsagrado
2026-03-05 19:33:40 -04:00
committed by GitHub
parent 5de7763326
commit b3d40fd7e4
1 changed files with 177 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/Index.html
+147 -323
View File
@@ -25,117 +25,89 @@
} }
body { body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
margin: 0; margin: 0;
padding: 0;
background: #f5f7fa; background: #f5f7fa;
color: #111827; color: #111827;
line-height: 1.6; line-height: 1.6;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
a { a {
color: inherit; color: inherit;
} }
a:focus-visible {
outline: 3px solid #111827;
outline-offset: 3px;
border-radius: 8px;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: #fff;
color: #111827;
padding: 0.75rem 1rem;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
z-index: 1000;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
outline: 3px solid #111827;
outline-offset: 2px;
}
header { header {
background: #111827; background: #111827;
color: #fff; color: white;
padding: 3.25rem 1.5rem 2.5rem; padding: 3rem 1.5rem;
text-align: center; text-align: center;
} }
header h1 { header h1 {
margin: 0; margin: 0;
font-size: clamp(2rem, 4vw, 2.9rem); font-size: 2.25rem;
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
header p { header p {
margin: 0.75rem auto 0; margin-top: 0.75rem;
opacity: 0.9;
max-width: 70ch; max-width: 70ch;
opacity: 0.93; margin-left: auto;
} margin-right: auto;
.hero-actions {
margin-top: 1.25rem;
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
} }
main { main {
max-width: 980px; max-width: 1100px;
margin: 2rem auto; margin: 0 auto;
padding: 0 1.5rem; padding: 1.25rem 1rem 3rem;
} }
.grid { .grid {
display: grid; display: grid;
gap: 1.25rem; grid-template-columns: repeat(12, 1fr);
} gap: 1rem;
align-items: stretch;
@media (min-width: 860px) {
.grid-2 {
grid-template-columns: 1fr 1fr;
}
.grid-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.grid-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
} }
.card { .card {
background: #fff; background: #fff;
padding: 1.5rem;
border-radius: 14px; border-radius: 14px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); padding: 1.25rem;
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
border: 1px solid rgba(17, 24, 39, 0.06);
}
.hero {
grid-column: span 12;
}
.two {
grid-column: span 12;
}
@media (min-width: 860px) {
.two {
grid-column: span 6;
}
} }
h2 { h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem 0;
font-size: 1.3rem; font-size: 1.25rem;
letter-spacing: -0.01em;
} }
h3 { h3 {
margin: 0 0 0.25rem; margin: 0.75rem 0 0.4rem 0;
font-size: 1.05rem; font-size: 1.05rem;
letter-spacing: -0.01em;
} }
ul { .muted {
margin: 0.75rem 0 0; color: rgba(17, 24, 39, 0.75);
padding-left: 1.2rem;
} }
.pill-row { .pill-row {
@@ -146,155 +118,131 @@
} }
.pill { .pill {
display: inline-flex; padding: 0.35rem 0.6rem;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.65rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid #e5e7eb; background: rgba(37, 99, 235, 0.08);
background: #f9fafb; border: 1px solid rgba(37, 99, 235, 0.18);
font-size: 0.92rem; color: #1d4ed8;
color: #111827; font-weight: 600;
font-size: 0.9rem;
} }
.btn { .btn {
display: inline-block; display: inline-flex;
padding: 0.8rem 1.1rem; align-items: center;
background: #1d4ed8; justify-content: center;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
border-radius: 10px;
background: #2563eb;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
border-radius: 10px; font-weight: 700;
font-weight: 800; border: 1px solid rgba(17, 24, 39, 0.08);
border: 2px solid transparent; transition: transform 0.08s ease, background 0.15s ease;
} white-space: nowrap;
.btn.disabled {
background: #9ca3af;
cursor: not-allowed;
pointer-events: none;
opacity: 0.7;
} }
.btn:hover { .btn:hover {
background: #1e40af; background: #1d4ed8;
transform: translateY(-1px);
} }
.btn:focus-visible { .btn:focus-visible {
outline: 3px solid #fff; outline: 3px solid rgba(37, 99, 235, 0.35);
outline-offset: 3px; outline-offset: 2px;
border-color: #111827;
} }
.btn.secondary { .btn.secondary {
background: transparent; background: rgba(17, 24, 39, 0.06);
color: #fff; color: #111827;
border-color: rgba(255, 255, 255, 0.55);
font-weight: 800;
} }
.btn.secondary:hover { .btn.secondary:hover {
background: rgba(255, 255, 255, 0.08); background: rgba(17, 24, 39, 0.1);
} }
.muted { .btn.disabled {
color: #374151; background: rgba(17, 24, 39, 0.08);
} color: rgba(17, 24, 39, 0.45);
cursor: not-allowed;
.callout { pointer-events: none;
border-left: 6px solid #1d4ed8; border: 1px dashed rgba(17, 24, 39, 0.12);
padding-left: 1rem;
background: #ffffff;
}
.kpi {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 1rem;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
border: 1px solid #eef2ff;
}
.kpi strong {
font-size: 1.3rem;
letter-spacing: -0.01em;
}
.kpi span {
color: #374151;
font-size: 0.95rem;
} }
footer { footer {
text-align: center; text-align: center;
padding: 2rem 1rem; padding: 2.25rem 1rem 3rem;
color: rgba(17, 24, 39, 0.65);
font-size: 0.95rem; font-size: 0.95rem;
color: #374151;
} }
code { .kpi {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; display: grid;
font-size: 0.92em; grid-template-columns: repeat(3, minmax(0, 1fr));
background: #f3f4f6; gap: 0.75rem;
padding: 0.1rem 0.3rem; margin-top: 1rem;
border-radius: 6px;
} }
@media (prefers-reduced-motion: reduce) { .kpi .box {
* { background: rgba(17, 24, 39, 0.03);
scroll-behavior: auto !important; border: 1px solid rgba(17, 24, 39, 0.06);
transition: none !important; border-radius: 12px;
animation: none !important; padding: 0.85rem;
}
.kpi .box b {
display: block;
font-size: 1.15rem;
margin-bottom: 0.15rem;
}
@media (max-width: 520px) {
.kpi {
grid-template-columns: 1fr;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<a class="skip-link" href="#main">Skip to content</a> <header>
<header role="banner" aria-label="Project header">
<h1>WIN — Student Goal Tracker and Reporting</h1> <h1>WIN — Student Goal Tracker and Reporting</h1>
<p> <p>
A privacy-minded system for tracking student goals, documenting services and notes, Track goals, document services, and log critical incidents with auditable workflows designed for student support
and logging critical incidents with clear audit trails and role-based access. programs.
</p> </p>
<div class="hero-actions" role="group" aria-label="Primary actions">
<a href="https://github.com/opelly27/WinStudentGoalTracker" class="btn" target="_blank" rel="noopener noreferrer"
aria-label="Open the WIN Student Goal Tracker repository on GitHub (opens in a new tab)">
View Repository
</a>
<a href="#getting-started" class="btn secondary" aria-label="Jump to getting started section">
Getting Started
</a>
</div>
</header> </header>
<main id="main" role="main"> <main>
<section class="grid grid-3" aria-label="Project highlights"> <div class="grid">
<div class="kpi" aria-label="Goal tracking highlight"> <section class="card hero" aria-labelledby="overview">
<strong>Goal Tracking</strong> <h2 id="overview">Project Overview</h2>
<span>Define goals, categories, status, and progress over time.</span> <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 aims to reduce manual paperwork, standardize
documentation, and improve visibility for program staff.
</p>
<div class="kpi" aria-label="Project highlights">
<div class="box">
<b>Goal Tracking</b>
<span class="muted">Create, track, and update student goals over time.</span>
</div> </div>
<div class="kpi" aria-label="Incident logging highlight"> <div class="box">
<strong>Incident Logging</strong> <b>Documentation</b>
<span>Capture critical events with consistent workflows and escalation.</span> <span class="muted">Case notes and services documented consistently.</span>
</div>
<div class="box">
<b>Incident Logging</b>
<span class="muted">Record incidents with structured fields and history.</span>
</div> </div>
<div class="kpi" aria-label="Auditability highlight">
<strong>Auditability</strong>
<span>Record who did what and when for sensitive actions.</span>
</div> </div>
</section> </section>
<section class="grid grid-2" style="margin-top:1.25rem;" aria-label="Overview and intended users"> <section class="card two" aria-labelledby="modules">
<section class="card" aria-labelledby="about"> <h2 id="modules">Core Modules</h2>
<h2 id="about">What WIN Is</h2>
<p class="muted"> <p class="muted">
WIN supports student success programs by providing a single place to manage student profiles, Student goals, case notes, services provided, and critical incident reports—designed around
goals, case notes, services provided, and critical incident reports—designed around
day-to-day workflows for advisors, mentors, and case managers. day-to-day workflows for advisors, mentors, and case managers.
</p> </p>
<div class="pill-row" aria-label="Core modules"> <div class="pill-row" aria-label="Core modules">
@@ -307,138 +255,18 @@
</div> </div>
</section> </section>
<section class="card" aria-labelledby="users"> <section class="card two" aria-labelledby="users">
<h2 id="users">Who Uses It</h2> <h2 id="users">Who Uses It</h2>
<ul> <ul class="muted">
<li><strong>Case Managers / Advisors:</strong> track goals, document interactions, and follow up.</li> <li>Advisors and mentors supporting student development</li>
<li><strong>Program Administrators:</strong> monitor outcomes and compliance-ready reporting.</li> <li>Program coordinators and case managers</li>
<li><strong>Supervisors:</strong> review incidents, approve actions, and ensure accountability.</li> <li>Supervisors reviewing progress, documentation, and outcomes</li>
</ul>
<p class="muted" style="margin-top:0.75rem;">
WIN is built for least-privilege access and consistent documentation.
</p>
</section>
</section>
<section class="card callout" style="margin-top:1.25rem;" aria-labelledby="workflow">
<h2 id="workflow">Typical Workflow</h2>
<ol style="margin:0.5rem 0 0; padding-left:1.25rem;">
<li>Select a student and review current goals and status.</li>
<li>Select a goal.</li>
<li>Record progres events for that goal.</li>
<li>If needed, log a critical incident with severity and follow-up actions.</li>
<li>Generate reports for program outcomes and internal review.</li>
</ol>
</section>
<section class="grid grid-2" style="margin-top:1.25rem;" aria-label="Capabilities">
<section class="card" aria-labelledby="features">
<h2 id="features">Core Features</h2>
<ul>
<li><strong>Student profiles:</strong> basic demographics and program context.</li>
<li><strong>Goal management:</strong> sub-goals, statuses, and progress visibility.</li>
<li><strong>Case documentation:</strong> notes and service tracking aligned to program needs.</li>
<li><strong>Critical incidents:</strong> consistent logging, review, and escalation support.</li>
<li><strong>Search &amp; filters:</strong> quickly locate students and prioritize follow-ups.</li>
<li><strong>Reporting:</strong> outcomes and activity summaries for administrators.</li>
</ul>
</section>
<section class="card" aria-labelledby="compliance">
<h2 id="compliance">Privacy &amp; Compliance Design</h2>
<p class="muted">
WIN is intended for environments where student records require careful handling.
The design emphasizes confidentiality, integrity, auditability, and controlled access.
</p>
<ul>
<li><strong>Role-based access control:</strong> permissions enforced server-side.</li>
<li><strong>Audit logs:</strong> track create/update/delete for sensitive records.</li>
<li><strong>Data minimization:</strong> collect only what’s necessary for the workflow.</li>
<li><strong>Secure defaults:</strong> least privilege and predictable access patterns.</li>
</ul>
<p class="muted" style="margin-top:0.75rem;">
See <code>SECURITY.md</code> in the repo for reporting and expectations.
</p>
</section>
</section>
<section class="grid grid-2" style="margin-top:1.25rem;" aria-label="Engineering">
<section class="card" aria-labelledby="architecture">
<h2 id="architecture">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 and code</li>
<li><code>SECURITY.md</code> — security reporting and practices</li>
<li><code>README.md</code> — build/run instructions and overview</li>
</ul>
<p class="muted" style="margin-top:0.75rem;">
This landing page is intended for GitHub Pages and project communication.
</p>
</section>
<section class="card" id="getting-started" aria-labelledby="getting-started-title">
<h2 id="getting-started-title">Getting Started</h2>
<ol style="margin:0.5rem 0 0; padding-left:1.25rem;">
<li>Open the repository and review <code>README.md</code>.</li>
<li>Set up the API environment (local config, database connection, secrets).</li>
<li>Run the UI and validate core flows: student list → goals → incident logging.</li>
</ol>
<p class="muted" style="margin-top:0.75rem;">
Want to contribute? Open a PR with a clear description, screenshots (if UI),
and notes on security/privacy impacts.
</p>
<a href="https://github.com/opelly27/WinStudentGoalTracker" class="btn" target="_blank"
rel="noopener noreferrer" aria-label="Open repository on GitHub (opens in a new tab)">
Go to GitHub
</a>
</section>
</section>
<section class="card" style="margin-top:1.25rem;" aria-labelledby="roadmap">
<h2 id="roadmap">Roadmap (High-Level)</h2>
<div class="grid grid-3" style="margin-top:0.75rem;">
<div class="card" style="box-shadow:none; border:1px solid #e5e7eb;">
<h3>MVP</h3>
<ul>
<li>Student list + profile</li>
<li>Goal create/update</li>
<li>Incident logging</li>
</ul> </ul>
<div class="pill-row" aria-label="Key roles">
<span class="pill">Instructor</span>
<span class="pill">Coordinator</span>
<span class="pill">Supervisor</span>
</div> </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 &amp; access review</li>
<li>Stronger incident classification</li>
</ul>
</div>
</div>
<p class="muted" style="margin-top:0.75rem;">
Roadmap items should be validated against requirements and stakeholder workflows.
</p>
</section>
<section class="card" style="margin-top:1.25rem;">
<!-- <div class="card"> -->
<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>
<!-- </div> -->
</section> </section>
<section class="card" style="margin-top:1.25rem;" aria-labelledby="documentation"> <section class="card" style="margin-top:1.25rem;" aria-labelledby="documentation">
@@ -460,6 +288,11 @@
<a href="um.html" class="btn" aria-label="View User Manual documentation"> <a href="um.html" class="btn" aria-label="View User Manual documentation">
User Manual Documentation User Manual Documentation
</a> </a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSd4waAGdgDC9SpA2uvelWQtpJt7sGqsFgc-PCBOMoT99LmLHA/viewform"
class="btn" target="_blank" rel="noopener noreferrer"
aria-label="Open prototype evaluation survey (opens in a new tab)">
Prototype Evaluation Survey
</a>
<!-- <span class="btn disabled" class="btn" aria-labeled="View API Documentation" title="Coming soon"> <!-- <span class="btn disabled" class="btn" aria-labeled="View API Documentation" title="Coming soon">
API Documentation API Documentation
</span> --> </span> -->
@@ -473,33 +306,24 @@
</section> </section>
<section class="card" style="margin-top:1.25rem;" aria-labelledby="lighthouse"> <section class="card" style="margin-top:1.25rem;" aria-labelledby="lighthouse">
<h2 id="lighthouse">Lighthouse Scores</h2> <h2 id="lighthouse">Lighthouse</h2>
<p class="muted">This page achieved the following Lighthouse scores:</p> <p class="muted">
<div class="grid grid-4" style="margin-top:0.75rem;"> This site is designed to be Lighthouse-friendly: semantic HTML, responsive layout, accessible contrast, and
<div class="kpi" style="text-align:center;"> descriptive labels. Use Lighthouse in Chrome DevTools to verify performance, accessibility, best practices, and
<strong>100</strong> SEO.
<span>Performance</span> </p>
<div class="pill-row">
<a class="btn secondary" href="https://developer.chrome.com/docs/lighthouse/overview/" target="_blank"
rel="noopener noreferrer" aria-label="Learn about Lighthouse (opens in a new tab)">
Lighthouse Overview
</a>
</div> </div>
<div class="kpi" style="text-align:center;">
<strong>100</strong>
<span>Accessibility</span>
</div>
<div class="kpi" style="text-align:center;">
<strong>100</strong>
<span>Best Practices</span>
</div>
<div class="kpi" style="text-align:center;">
<strong>100</strong>
<span>SEO</span>
</div>
</div>
<small style="display:block;text-align:center;margin-top:8px;">Tested in a Chrome Incognito window. YMMV.</small>
</section> </section>
</div>
</main> </main>
<footer role="contentinfo"> <footer>
<small>© 2026 WIN Student Goal Tracker — Built for student support, documentation, and accountability.</small> WIN Student Goal Tracker — Documentation Hub
</footer> </footer>
</body> </body>