Skip to content

Fixes 100vh hero mobile WCAG/APCA #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdm227 merged 1 commit into from
Jun 12, 2026
Merged

Fixes 100vh hero mobile WCAG/APCA #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 21 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@

Sicilian agricultural value-chain optimizer powered by **Fabric IQ**, **Foundry IQ**, and **Work IQ** — with GitHub Copilot MCP contract generation.

## Intro Video
## Submission Demo Video (Agents League)

**2-min judge walkthrough:** [youtu.be/o8KqG8foLfM](https://youtu.be/o8KqG8foLfM)

Recorded from the live teleprompter at [demo.html](https://cdm227.github.io/AgriValue-Tracker/demo.html) (Fabric / Foundry / Vision / agent memory / Work IQ story).

## Intro Video (README)

<video src="public/media/agrivalue-iq-intro.mp4" controls width="100%" poster="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1200&q=80"></video>

Expand Down Expand Up @@ -92,12 +98,12 @@ npm run agent:action -- contract --crop "Olive Oil" --qty 15 --buyer "Cooperativ

## Challenge Requirements

| Requirement | Documentation |
|-------------|---------------|
| GitHub Copilot usage | [docs/COPILOT.md](docs/COPILOT.md) |
| Microsoft IQ (×3) | [docs/MICROSOFT_IQ.md](docs/MICROSOFT_IQ.md) |
| Azure deployment | [docs/AZURE_DEPLOY.md](docs/AZURE_DEPLOY.md) |
| 2-min demo video script | [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md) |
| Requirement | Status | Documentation |
|-------------|--------|---------------|
| GitHub Copilot + MCP | Done | [docs/COPILOT.md](docs/COPILOT.md) |
| Microsoft IQ (×3) | Demo + docs | [docs/MICROSOFT_IQ.md](docs/MICROSOFT_IQ.md) |
| Azure deployment | Workflow ready | [docs/AZURE_DEPLOY.md](docs/AZURE_DEPLOY.md) |
| Submission demo video | [YouTube](https://youtu.be/o8KqG8foLfM) | [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md) |

## UI Features (v3)

Expand All @@ -123,16 +129,16 @@ infra/ # Bicep + Fabric SQL schema
.github/workflows/ # Azure + GitHub Pages deploy
```

## Record Your 2-Min Submission Video

Full step-by-step: [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md)
## Agents League Submission

### Quick checklist
| Item | Link |
|------|------|
| **Demo video** | https://youtu.be/o8KqG8foLfM |
| **Live app** | https://cdm227.github.io/AgriValue-Tracker/demo.html |
| **Register** (required for badge/prizes) | https://aka.ms/agentsleague/register |
| **Submit issue** (official) | [microsoft/agentsleague — Project Submission](https://github.com/microsoft/agentsleague/issues/new?template=project.yml) |

1. **Demo page:** [demo.html](https://cdm227.github.io/AgriValue-Tracker/demo.html) → **Start 2-Min Judge Demo** (teleprompter + narration)
2. **Copilot MCP:** Open this repo in VS Code → Copilot Chat → `@agrivalue-iq generate_supply_contract ...` (see script)
3. **Record:** OBS, Win+G (Xbox Game Bar), or Loom — capture demo page + VS Code split or cut
4. **Upload:** YouTube (unlisted) or Loom → paste link at [aka.ms/agentsleague/aisf](https://aka.ms/agentsleague/aisf)
Recording notes: [docs/DEMO_SCRIPT.md](docs/DEMO_SCRIPT.md)

### Fix default branch & auto-deploy (one-time)

Expand Down
134 changes: 126 additions & 8 deletions public/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,107 @@
color-scheme: dark;
}

html {
height: 100%;
min-height: 100vh;
min-height: 100dvh;
}

body.h-full {
min-height: 100vh;
min-height: 100dvh;
height: 100%;
}

.welcome-hero-media {
position: relative;
isolation: isolate;
min-height: clamp(160px, 28vh, 220px);
}

.welcome-hero-img {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
}

.welcome-hero-scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.28);
pointer-events: none;
}

.welcome-hero-caption {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 8px;
padding: clamp(16px, 4vw, 24px);
text-align: left;
}

.welcome-hero-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #a7f3d0;
}

.welcome-hero-title {
font-size: clamp(1.25rem, 4vw, 1.65rem);
font-weight: 800;
line-height: 1.15;
color: #ffffff;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
max-width: 22ch;
}

.welcome-hero-btn-dettagli {
margin-top: 4px;
border: 2px solid #f8fafc;
border-radius: 10px;
padding: 9px 16px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #0c0a09;
background: #f8fafc;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.welcome-hero-btn-dettagli:hover {
background: #ffffff;
color: #052e16;
transform: translateY(-1px);
}

.welcome-hero-btn-dettagli:focus-visible {
outline: 3px solid #6ee7b7;
outline-offset: 2px;
}

.welcome-hero-details {
margin-top: 12px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid rgba(52, 211, 153, 0.22);
background: rgba(2, 6, 23, 0.55);
}

.welcome-hero-details.is-open {
display: block !important;
}

body {
background:
radial-gradient(circle at top left, rgba(16, 185, 129, 0.08), transparent 28rem),
Expand Down Expand Up @@ -614,17 +715,17 @@ body[data-theme="light"] .upload-photo-btn:hover {
@media (max-width: 1024px) {
html,
body {
height: auto;
min-height: 100%;
min-height: 100vh;
min-height: 100dvh;
height: 100%;
}

body {
overflow: auto !important;
overflow: hidden !important;
}

body.h-full.overflow-hidden {
overflow-x: hidden;
overflow-y: auto;
overflow: hidden;
}

.iq-pills-mobile {
Expand Down Expand Up @@ -668,7 +769,11 @@ body[data-theme="light"] .upload-photo-btn:hover {
main {
display: flex !important;
flex-direction: column;
overflow: visible !important;
flex: 1;
min-height: 0;
overflow-y: auto !important;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}

main > section,
Expand Down Expand Up @@ -784,8 +889,21 @@ body[data-theme="light"] .upload-photo-btn:hover {
font-size: 26px;
}

#welcome-pane .max-w-3xl {
height: 128px;
.welcome-hero-media {
min-height: clamp(148px, 30vh, 200px);
}

.welcome-hero-caption {
align-items: stretch;
}

.welcome-hero-btn-dettagli {
width: 100%;
text-align: center;
}

.welcome-hero-summary {
display: none;
}

#added-value-amt {
Expand Down
Loading
Loading