diff --git a/README.md b/README.md index 086869a..5c0d820 100644 --- a/README.md +++ b/README.md @@ -1,151 +1,60 @@ -# GCI Student Launch Portal - -A lightweight student onboarding website for Genesee Career Institute Computer Science and technology courses. - -Students can use one URL to: - -- choose their course -- open required sign-in systems -- open their LMS -- access course tools -- review orientation expectations -- complete a setup check -- report problems -- start a first activity while others finish setup - -The site is built for GitHub Pages with only HTML, CSS, and vanilla JavaScript. - -## Project structure - -```text -/ -├── index.html -├── orientation.html -├── help.html -├── css/ -│ └── styles.css -├── js/ -│ ├── config.js -│ └── app.js -├── assets/ -│ └── README.md -└── README.md -``` - -## Preview locally - -Because this is a static site, you can preview it in either of these ways: - -1. Open `index.html` directly in a browser. -2. Or run a simple local server from the repository root: - -```bash -python3 -m http.server 8000 -``` - -Then open `http://localhost:8000/`. - -## Enable GitHub Pages - -1. Push the repository to GitHub. -2. Open **Settings → Pages**. -3. Under **Build and deployment**, choose **Deploy from a branch**. -4. Select the branch you want to publish and the `/ (root)` folder. -5. Save the settings. -6. Wait for GitHub Pages to publish the site. - -All site links use relative paths so the portal also works from GitHub Pages project URLs such as `https://username.github.io/gci-student-launch/`. +# GCI -## Course configuration +Tools Built for the Genesee Career Institute -All course data and editable external links live in: +## Project Hub (Recommended Start) -- `js/config.js` +- Open `index.html` in a browser to access all projects, guides, scripts, and tests from one page. -This includes: +## App status -- course names -- course descriptions -- LMS links -- tool links -- syllabus links -- orientation links -- setup check link -- help/reporting link -- first mission links +- Production + - `OOOReview` (Python Order of operations) — interactive practice app with badge cabinet, mastery tracking, and PNG export. Path: `OOOReview.html` + - `AgileReview` — instructor review tools + - `No_School_Viewer` — schedule viewer + - `wordguide1` — MOS Word Project 1 step-by-step guide. Path: `wordguide1.html` + - `wordguide2` — MOS Word Project 2 step-by-step guide. Path: `wordguide2.html` -## Change links + - `Lab Manual Generator` (Python) — Teacher edition DOCX generator (production). Script: `HArdware Lab Manual.py`. Output: `GCI_Computer_Hardware_Labs_Teacher_Edition_updated.docx` -Open `js/config.js` and update the URL strings. +- Alpha Testing + - `GCI_Communications` — communications utilities (Alpha) + +## In Development -Examples of values you will likely replace: +- `AgileVocab` — vocabulary practice (In Development) +- `GCI3Dorder` — 3D order demo (In Development) +- `mathquest` — interactive math exercises (In Development) +- `ProgReview` — programming review (In Development) -- `setupCheckUrl` -- `helpFormUrl` -- `firstMissionDefaultUrl` -- each course's `syllabusUrl` -- each course's `orientationUrl` -- each course's LMS and tool URLs +## Quick start (OOOReview) -Temporary links are intentionally labeled with obvious `REPLACE-WITH-...` placeholders. +- Open `OOOReview.html` in a browser to run the production app locally. -## Add another course +## Quick start (MOS Word Guides) -1. Open `js/config.js`. -2. Add a new item inside `SITE_CONFIG.courses`. -3. Give the new course a unique key. -4. Provide its name, description, LMS items, tool items, syllabus URL, orientation URL, and first mission URL. -5. Save the file and reload the site. +- Open `wordguide1.html` in a browser for Project 1 guided walkthrough +- Open `wordguide2.html` in a browser for Project 2 guided walkthrough +- Required project files are located in the `wordprojectfiles` folder +- Progress is automatically saved in your browser -The homepage course cards and dashboard content are generated from that configuration. +Contributions welcome — please open an issue describing proposed changes and test steps. -## Logo placement +## Quick start (Lab Manual Generator) -Put the official GCI logo in: +- Requirements: Python 3.8+ and the `python-docx` package. +- Install dependency (PowerShell): -- `assets/` - -A placeholder logo area is already built into the interface so the site still looks polished before the final logo is available. - -## Placeholder URLs still to update - -The following values are still placeholders by default: - -- district Canvas URL -- setup check form URL -- help/report problem form URL -- course syllabi URLs -- course orientation URLs -- first mission URLs -- district/internal course tools -- certification and hardware resource links -- student help desk URL - -Public services already use real public URLs where appropriate: - -- Gmail -- Google Drive -- Google Classroom -- GitHub -- CodeHS -- Google account sign-in - -## Privacy and security notes +```powershell +python -m pip install --user python-docx +``` -- The site does not collect student names. -- The site does not collect student email addresses. -- The site stores only course choice and step completion in local browser storage. -- No databases, authentication systems, API keys, or private credentials are used. -- Assume the site is publicly accessible when hosted on GitHub Pages. +- Generate the teacher edition (PowerShell): -## Before launch checklist +```powershell +python "c:\github\GCI\HArdware Lab Manual.py" +``` -- [ ] Replace every `REPLACE-WITH-...` URL in `js/config.js` -- [ ] Add the official GCI logo if available -- [ ] Verify each course shows the correct LMS buttons -- [ ] Verify each course shows the correct tools -- [ ] Test course selection and change course behavior -- [ ] Test onboarding progress save/reset behavior -- [ ] Test the setup check and help form destinations -- [ ] Test the site on a phone and a Chromebook -- [ ] Confirm all external links open safely in a new tab +- Notes: + - The script writes `GCI_Computer_Hardware_Labs_Teacher_Edition_updated.docx` by default to avoid write errors if an earlier document is open. Close any open copies of the DOCX to allow overwriting the primary filename. + - After opening the DOCX in Microsoft Word, update the Table of Contents by selecting the TOC page and pressing F9 (or References → Update Table) so page numbers and hyperlinks populate. diff --git a/assets/README.md b/assets/README.md deleted file mode 100644 index 446d01f..0000000 --- a/assets/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# Assets - -Place the official GCI logo in this folder when it is available. - -Suggested path: - -- `assets/gci-logo.svg` - -This project currently uses a styled placeholder area so the site still looks complete before the logo is added. diff --git a/css/styles.css b/css/styles.css deleted file mode 100644 index 079054e..0000000 --- a/css/styles.css +++ /dev/null @@ -1,586 +0,0 @@ -:root { - --primary-color: #1d4ed8; - --secondary-color: #0f172a; - --accent-color: #f59e0b; - --background-color: #f4f7fb; - --text-color: #0f172a; - --surface-color: #ffffff; - --border-color: #dbe4f0; - --muted-color: #526176; - --success-color: #12763d; - --warning-color: #9a5c00; - --danger-color: #9f1239; - --shadow: 0 12px 30px rgba(15, 23, 42, 0.08); - --shadow-strong: 0 20px 40px rgba(15, 23, 42, 0.12); - --radius: 1rem; - --radius-sm: 0.75rem; - --max-width: 1120px; -} - -* { - box-sizing: border-box; -} - -html { - color-scheme: light; -} - -body { - margin: 0; - font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; - color: var(--text-color); - background: linear-gradient(180deg, #eef4ff 0%, var(--background-color) 24rem); - line-height: 1.6; -} - -img { - max-width: 100%; - display: block; -} - -a { - color: var(--primary-color); -} - -button, -input, -textarea, -select { - font: inherit; -} - -button { - cursor: pointer; -} - -:focus-visible { - outline: 3px solid var(--accent-color); - outline-offset: 3px; -} - -[hidden] { - display: none !important; -} - -.skip-link { - position: absolute; - left: 1rem; - top: -4rem; - background: var(--secondary-color); - color: #fff; - padding: 0.75rem 1rem; - border-radius: var(--radius-sm); - z-index: 1000; - text-decoration: none; -} - -.skip-link:focus { - top: 1rem; -} - -.container { - width: min(calc(100% - 2rem), var(--max-width)); - margin: 0 auto; -} - -.stack-lg > * + * { - margin-top: 1.5rem; -} - -.stack-md > * + * { - margin-top: 1rem; -} - -.site-header { - position: sticky; - top: 0; - z-index: 100; - background: rgba(255, 255, 255, 0.94); - border-bottom: 1px solid rgba(219, 228, 240, 0.9); - backdrop-filter: blur(10px); -} - -.topbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - padding: 1rem 0; -} - -.brand { - display: inline-flex; - align-items: center; - gap: 0.875rem; - text-decoration: none; - color: inherit; -} - -.brand strong, -.brand small { - display: block; -} - -.brand strong { - font-size: 1rem; -} - -.brand small { - color: var(--muted-color); -} - -.brand-mark { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 3rem; - min-height: 3rem; - padding: 0.5rem; - border-radius: 0.9rem; - background: var(--secondary-color); - color: #fff; - font-weight: 800; - letter-spacing: 0.04em; -} - -.topbar-actions { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; -} - -.text-link { - text-decoration: none; - font-weight: 700; -} - -.text-link:hover, -.text-link:focus-visible { - text-decoration: underline; -} - -.hero { - padding: 3rem 0 2rem; -} - -.hero-layout { - display: grid; - grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); - gap: 1.5rem; - align-items: stretch; -} - -.hero-copy, -.logo-placeholder, -.card { - background: var(--surface-color); - border: 1px solid var(--border-color); - border-radius: 1.5rem; - box-shadow: var(--shadow); -} - -.hero-copy { - padding: 2rem; -} - -.eyebrow, -.section-label { - display: inline-block; - margin: 0 0 0.75rem; - font-size: 0.8rem; - font-weight: 800; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--primary-color); -} - -.hero h1, -.page-intro h1, -.daily-routine h2, -.section-heading h2, -.dashboard-header h2 { - margin: 0; - line-height: 1.05; - letter-spacing: -0.03em; -} - -.hero h1 { - font-size: clamp(2.5rem, 8vw, 4.5rem); -} - -.hero-text { - margin: 1rem 0 0; - font-size: clamp(1.125rem, 3vw, 1.6rem); - font-weight: 700; -} - -.hero-subtext, -.muted, -.section-heading p, -.page-intro p, -.card p, -.card li { - color: var(--muted-color); -} - -.hero-subtext { - max-width: 42rem; -} - -.logo-placeholder { - display: grid; - place-items: center; - padding: 2rem; - min-height: 14rem; - background: linear-gradient(135deg, var(--secondary-color), #1f3a7a); - color: #fff; - text-align: center; - font-weight: 700; -} - -.section { - padding: 0 0 5rem; -} - -.section-heading { - max-width: 40rem; -} - -.card { - padding: 1.5rem; -} - -.small { - font-size: 0.95rem; -} - -.course-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 1rem; -} - -.course-card { - width: 100%; - text-align: left; - padding: 1.5rem; - border: 2px solid var(--border-color); - border-radius: 1.25rem; - background: var(--surface-color); - box-shadow: var(--shadow); - transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; -} - -.course-card:hover, -.course-card:focus-visible { - transform: translateY(-2px); - border-color: var(--primary-color); - box-shadow: var(--shadow-strong); -} - -.course-card h3, -.step-card h3, -.progress-card h3, -.page-intro h1, -.card h2 { - margin: 0; -} - -.course-card p { - margin: 0.75rem 0 0; - color: var(--muted-color); -} - -.course-card .course-code { - margin-top: 1rem; - font-size: 0.9rem; - font-weight: 700; - color: var(--primary-color); -} - -.dashboard { - scroll-margin-top: 5rem; -} - -.dashboard-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 1rem; -} - -.dashboard-actions, -.button-row, -.link-grid, -.status-grid { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; -} - -.button, -.resource-link { - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 3.5rem; - padding: 0.9rem 1.2rem; - border-radius: 0.95rem; - border: 2px solid transparent; - font-weight: 800; - text-decoration: none; - text-align: center; - transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease; -} - -.button:hover, -.button:focus-visible, -.resource-link:hover, -.resource-link:focus-visible { - transform: translateY(-1px); -} - -.button-primary, -.resource-link { - background: var(--primary-color); - color: #fff; - box-shadow: var(--shadow); -} - -.button-secondary { - background: #eef4ff; - color: var(--secondary-color); - border-color: #c8dafb; -} - -.button-ghost { - background: transparent; - color: var(--primary-color); - border-color: var(--border-color); -} - -.button-large { - width: 100%; - max-width: 22rem; -} - -.button-uppercase { - text-transform: uppercase; - letter-spacing: 0.04em; -} - -.progress-header { - display: flex; - align-items: end; - justify-content: space-between; - gap: 1rem; - margin-bottom: 1rem; -} - -.progress-text { - margin: 0; - font-size: 1.1rem; - font-weight: 800; -} - -.progress-bar { - height: 1rem; - border-radius: 999px; - background: #dce8f8; - overflow: hidden; -} - -.progress-bar-fill { - width: 0; - height: 100%; - border-radius: inherit; - background: linear-gradient(90deg, var(--primary-color), #60a5fa); - transition: width 180ms ease; -} - -.steps-list { - display: grid; - gap: 1rem; -} - -.step-card { - padding: 1.5rem; -} - -.step-header { - display: flex; - align-items: start; - justify-content: space-between; - gap: 1rem; - margin-bottom: 1rem; -} - -.step-number { - display: inline-flex; - align-items: center; - justify-content: center; - width: 2.4rem; - height: 2.4rem; - border-radius: 999px; - background: #e8f0ff; - color: var(--primary-color); - font-weight: 800; -} - -.step-body > * + * { - margin-top: 1rem; -} - -.link-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); -} - -.resource-link { - min-height: 4rem; -} - -.note-box, -.inline-banner { - padding: 1rem; - border-radius: 1rem; - background: #f7f9fc; - border: 1px solid var(--border-color); -} - -.checklist, -.help-list, -.orientation-list, -.daily-routine ol { - padding-left: 1.25rem; -} - -.status-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); -} - -.status-card { - padding: 1rem; - border-radius: 1rem; - border: 1px solid var(--border-color); - background: #fff; -} - -.status-card strong { - display: block; - margin-bottom: 0.35rem; -} - -.status-emoji { - margin-right: 0.35rem; -} - -.status-ready strong { - color: var(--success-color); -} - -.status-almost strong { - color: var(--warning-color); -} - -.status-help strong { - color: var(--danger-color); -} - -.completion-control { - display: inline-flex; - align-items: center; - gap: 0.75rem; - padding: 0.85rem 1rem; - border: 1px solid var(--border-color); - border-radius: 1rem; - background: #f8fbff; - font-weight: 700; -} - -.completion-control input { - width: 1.2rem; - height: 1.2rem; -} - -.help-fab { - position: fixed; - right: 1rem; - bottom: 1rem; - z-index: 90; - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 3.5rem; - padding: 0.9rem 1.25rem; - border-radius: 999px; - background: var(--accent-color); - color: #1f1300; - text-decoration: none; - font-weight: 900; - box-shadow: var(--shadow-strong); -} - -@media (max-width: 780px) { - .topbar, - .dashboard-header, - .progress-header, - .step-header { - flex-direction: column; - align-items: stretch; - } - - .hero-layout { - grid-template-columns: 1fr; - } - - .button-large, - .dashboard-actions .button, - .button-row .button { - max-width: none; - width: 100%; - } -} - -@media (max-width: 560px) { - .container { - width: min(calc(100% - 1rem), var(--max-width)); - } - - .hero { - padding-top: 1.5rem; - } - - .hero-copy, - .logo-placeholder, - .card, - .course-card, - .step-card { - padding: 1.15rem; - border-radius: 1rem; - } - - .topbar-actions { - width: 100%; - } - - .text-link { - padding: 0.4rem 0; - } - - .help-fab { - left: 0.75rem; - right: 0.75rem; - bottom: 0.75rem; - } -} - -@media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } -} diff --git a/help.html b/help.html deleted file mode 100644 index 277ef5e..0000000 --- a/help.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - Need Help? — GCI Computer Science - - - - - - - - - -
-
- - - - GCI Computer Science - Student Launch Portal - - - -
-
- -
-
-
-

Need Help?

-

Keep going if you can.

-

After reporting the problem, continue with anything else you can complete.

- REPORT A PROBLEM -
- -
-

Try these steps first:

-
    -
  1. Read the error message.
    2. -
  2. Verify you are using your school account.
    3. -
  3. Ask someone at your table.
    4. -
  4. Refresh or sign in again.
    5. -
  5. If still stuck, report the problem.
    6. -
-
-
-
- - Back Home - - diff --git a/index.html b/index.html index 56742d1..be3a716 100644 --- a/index.html +++ b/index.html @@ -1,103 +1,539 @@ - + + - - - GCI Computer Science — Start Here - - - - - + + + + + + + + + + + + + + + + Genesee Learning Lab — Building the Future of CS in Genesee County + + + + + + - + + -
-
- - - - GCI Computer Science - Student Launch Portal - + +
- -
-
-
-
-
GCI Computer Science
-

START HERE

-

Welcome. Let's make sure you're ready.

-

Pick your course to open your onboarding dashboard, essential links, orientation steps, and first mission.

-
-