From ba8bc3e431d756487b020bd5ac8df30a98a7b7f2 Mon Sep 17 00:00:00 2001 From: Kaden Napper Date: Tue, 28 Jul 2026 18:22:28 +1000 Subject: [PATCH] Improve product discovery and showcase extensions --- AGENTS.md | 4 + README.md | 4 + VISION.md | 4 +- css/hudra.css | 41 +++++++++- css/napper.css | 16 ++++ hudra/index.html | 89 +++++++++++++++++---- hudra/privacy/index.html | 6 +- hudra/support/index.html | 8 +- hudra/terms/index.html | 6 +- img/microsoft-edge-addons-badge.png | Bin 0 -> 76926 bytes img/screenshots/hudra-audience-screen.png | Bin 0 -> 142229 bytes img/screenshots/hudra-duplicate-screen.png | Bin 0 -> 145048 bytes img/screenshots/hudra-presenter-screen.png | Bin 0 -> 495526 bytes img/screenshots/lesson-original.png | Bin 0 -> 437982 bytes img/screenshots/lildra-focused-view.png | Bin 0 -> 350908 bytes index.html | 32 +++++--- lildra/index.html | 13 +-- lildra/privacy/index.html | 8 +- lildra/support/index.html | 8 +- lildra/terms/index.html | 6 +- 20 files changed, 187 insertions(+), 58 deletions(-) create mode 100644 img/microsoft-edge-addons-badge.png create mode 100644 img/screenshots/hudra-audience-screen.png create mode 100644 img/screenshots/hudra-duplicate-screen.png create mode 100644 img/screenshots/hudra-presenter-screen.png create mode 100644 img/screenshots/lesson-original.png create mode 100644 img/screenshots/lildra-focused-view.png diff --git a/AGENTS.md b/AGENTS.md index bfd1ddf..dc44e16 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -62,6 +62,10 @@ Do not expose webhook secrets, credentials or other server-specific private data - QLearn: `https://qlearn.eq.edu.au` - Gitea organisation: `https://git.napper.au/napper` +- Hudra Chrome Web Store: `https://chromewebstore.google.com/detail/hudra/bjggdeecklhnpebgmjiaedaadmpdoddm` +- Hudra Microsoft Edge Add-ons: `https://microsoftedge.microsoft.com/addons/detail/hudra/aogdgaofdldbpmkjknklojbhcbcfandb` +- Lildra Chrome Web Store: `https://chromewebstore.google.com/detail/lildra/plgcccpjkfeimphghbpojjmibmajgocp` +- Lildra Microsoft Edge Add-ons: `https://microsoftedge.microsoft.com/addons/detail/lildra/lecbknefoekmfockhhkjopjgkoepdbnh` - Hudra releases: `https://git.napper.au/napper/hudra/releases` - Lildra releases: `https://git.napper.au/napper/lildra/releases` diff --git a/README.md b/README.md index 86b86e0..69251e4 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,10 @@ Lildra mirrors Hudra's product structure under `lildra/`, with its landing page - Production site: - Canonical QLearn URL: - Canonical Gitea organisation: +- Hudra on the Chrome Web Store: +- Hudra on Microsoft Edge Add-ons: +- Lildra on the Chrome Web Store: +- Lildra on Microsoft Edge Add-ons: - Hudra releases: - Lildra releases: diff --git a/VISION.md b/VISION.md index 689a818..25b9913 100644 --- a/VISION.md +++ b/VISION.md @@ -6,6 +6,6 @@ Simplicity is preferred over features. Accessibility is preferred over visual novelty. -The repository—not conversations—is the canonical source of project knowledge. +The repository - not conversations - is the canonical source of project knowledge. -AI assistants are expected to update documentation alongside code. \ No newline at end of file +AI assistants are expected to update documentation alongside code. diff --git a/css/hudra.css b/css/hudra.css index ab4a8e0..3ffce4c 100644 --- a/css/hudra.css +++ b/css/hudra.css @@ -48,6 +48,10 @@ button, input { font: inherit; } } .header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--blue-950); text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; } +.header-brand-group { display: flex; align-items: center; gap: 11px; } +.ecosystem-link { color: #5c667d; text-decoration: none; font-size: .9rem; font-weight: 750; } +.ecosystem-link:hover { color: var(--blue-700); } +.brand-separator { color: #a8b0c0; } .brand img { border-radius: 11px; box-shadow: 0 8px 24px rgba(11, 69, 216, .18); } .site-nav { display: flex; align-items: center; gap: 28px; } .site-nav a { color: #344057; text-decoration: none; font-weight: 650; font-size: .95rem; } @@ -68,7 +72,7 @@ button, input { font: inherit; } .store-options { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .store-badge { display: inline-block; border-radius: 6px; transition: transform .18s ease; } .store-badge:hover { transform: translateY(-2px); } -.store-badge img { width: 170px; height: 48px; } +.store-badge img { width: auto; max-width: none; height: 48px; } .store-coming-soon { min-width: 170px; height: 48px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 4px 16px; color: #526078; border: 1px dashed #aeb9cc; border-radius: 6px; background: #f4f6f9; line-height: 1.25; } .store-coming-soon strong { font-size: .82rem; } .store-coming-soon span { font-size: .72rem; } @@ -150,6 +154,34 @@ button, input { font: inherit; } .steps p { margin-bottom: 0; color: var(--muted); } .step-arrow { color: #9cabc9; font-size: 1.8rem; } +.showcase-section { overflow: hidden; border-bottom: 1px solid var(--line); } +.showcase-story { margin-top: 30px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(160deg, #fff, var(--blue-50)); box-shadow: 0 18px 48px rgba(8,35,108,.08); } +.showcase-story + .showcase-story { margin-top: 28px; } +.showcase-story-heading { display: grid; grid-template-columns: 44px 1fr; gap: 17px; align-items: start; max-width: 820px; margin-bottom: 30px; } +.showcase-story-heading h3 { margin: 0; color: var(--blue-950); font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.035em; } +.showcase-story-heading p { margin: 7px 0 0; color: var(--muted); } +.showcase-number { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: 12px; background: var(--blue-700); font-size: .75rem; font-weight: 900; } +.transformation-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 16px; align-items: center; } +.screenshot-figure, .device { min-width: 0; margin: 0; } +.screenshot-link { display: block; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(8,35,108,.14); transition: transform .18s ease, box-shadow .18s ease; } +.screenshot-link:hover { transform: translateY(-3px); box-shadow: 0 20px 45px rgba(8,35,108,.2); } +.screenshot-figure .screenshot-link { aspect-ratio: 8 / 5; border: 1px solid #d7dfef; } +.screenshot-figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; } +.screenshot-figure figcaption { margin-top: 12px; color: var(--blue-950); font-size: .88rem; font-weight: 800; text-align: center; } +.transformation-arrow { width: 38px; height: 38px; display: grid; place-items: center; justify-self: center; color: #fff; border-radius: 50%; background: var(--blue-700); box-shadow: 0 9px 20px rgba(11,69,216,.22); font-size: 1.2rem; font-weight: 900; } +.dual-screen-story { background: radial-gradient(circle at 82% 15%, #dce7ff 0, transparent 30%), linear-gradient(160deg, #fff, #eef3ff); } +.dual-screen-stage { display: grid; grid-template-columns: minmax(0, 1.04fr) 60px minmax(0, .96fr); gap: 18px; align-items: center; padding: clamp(22px, 5vw, 54px); border-radius: 24px; background: linear-gradient(145deg, #08183f, #130d2d); } +.device-label { margin-bottom: 12px; color: #dce6ff; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-align: center; text-transform: uppercase; } +.device-screen { border: 7px solid #20293b; border-radius: 14px; background: #070b14; } +.device-screen img { width: 100%; height: auto; } +.laptop-base { width: 112%; height: 12px; margin-left: -6%; border-radius: 2px 2px 12px 12px; background: linear-gradient(#71809b, #30394a); clip-path: polygon(4% 0,96% 0,100% 100%,0 100%); } +.display-stand { position: relative; width: 34%; height: 30px; margin: 0 auto; border-bottom: 8px solid #566178; } +.display-stand::before { content: ""; position: absolute; left: calc(50% - 4px); top: 0; width: 8px; height: 24px; background: #566178; } +.screen-connection { display: flex; align-items: center; color: #8297cb; } +.screen-connection::before, .screen-connection::after { content: ""; flex: 1; height: 2px; background: currentColor; } +.screen-connection span { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; } +.lildra-comparison .screenshot-link { aspect-ratio: 32 / 19; } + .privacy-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 80px; align-items: center; } .privacy-lead { max-width: 650px; margin: 24px 0; color: var(--muted); font-size: 1.12rem; } .text-link { color: var(--blue-700); text-decoration: none; font-weight: 800; } @@ -230,6 +262,11 @@ button, input { font: inherit; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } .footer-bottom span:last-child { text-align: left; } + .transformation-grid { grid-template-columns: 1fr; } + .transformation-arrow { transform: rotate(90deg); } + .dual-screen-stage { grid-template-columns: 1fr; } + .screen-connection { width: 60px; margin: 0 auto; transform: rotate(90deg); } + .device-display { width: 92%; justify-self: center; } } @media (prefers-reduced-motion: reduce) { @@ -282,9 +319,11 @@ button, input { font: inherit; } .section[id], .cta-section[id] { scroll-margin-top: 96px; } .site-nav a:focus-visible, +.ecosystem-link:focus-visible, .menu-button:focus-visible, .button:focus-visible, .store-badge:focus-visible, +.screenshot-link:focus-visible, .text-link:focus-visible, .product-card a:focus-visible, .faq-list summary:focus-visible, diff --git a/css/napper.css b/css/napper.css index be2c00a..010c4cb 100644 --- a/css/napper.css +++ b/css/napper.css @@ -8,6 +8,22 @@ .product-glyph-lildra{background:linear-gradient(145deg,var(--lildra-600),var(--lildra-950))} .product-glyph-pendra{background:linear-gradient(145deg,var(--pendra-600),var(--pendra-950))} +.products-menu{position:relative} +.products-popup{position:absolute;right:0;top:calc(100% + 10px);width:265px;display:grid;gap:5px;padding:9px;visibility:hidden;opacity:0;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 18px 44px rgba(8,35,108,.16);transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease} +.products-popup::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} +.products-popup>a{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:center;padding:10px;border-radius:11px} +.products-popup>a:hover{color:var(--blue-700);background:var(--blue-50)} +.products-popup img{border-radius:9px} +.products-popup span{display:grid;line-height:1.25} +.products-popup strong{color:var(--blue-950);font-size:.9rem} +.products-popup small{color:var(--muted);font-size:.72rem;font-weight:600} +.products-menu:hover .products-popup,.products-menu:focus-within .products-popup{visibility:visible;opacity:1;transform:none} +.stack-card[href]{color:inherit;text-decoration:none} +.product-name-link{color:inherit;text-decoration:none} +.inline-product-link{color:inherit;text-decoration:none} +.product-identity-link{display:inline-block;border-radius:22px} +.products-popup>a:focus-visible,.stack-card[href]:focus-visible,.product-name-link:focus-visible,.product-identity-link:focus-visible,.inline-product-link:focus-visible{outline:3px solid #6f96ff;outline-offset:4px} +@media(max-width:760px){.products-popup{position:static;width:100%;margin-top:8px;display:none;visibility:visible;opacity:1;box-shadow:none;transform:none}.products-menu:focus-within .products-popup{display:grid}} .product-card.product-lildra{border-color:var(--lildra-100);background:linear-gradient(155deg,#fff,var(--lildra-50))} .product-card.product-pendra{border-color:var(--pendra-100);background:linear-gradient(155deg,#fff,var(--pendra-50))} .product-lildra .product-tagline{color:var(--lildra-800)!important} diff --git a/hudra/index.html b/hudra/index.html index 18431c6..277f8b7 100644 --- a/hudra/index.html +++ b/hudra/index.html @@ -6,7 +6,7 @@ - Hudra — Present QLearn and Canvas lessons beautifully + Hudra - Present QLearn and Canvas lessons beautifully @@ -18,10 +18,14 @@ @@ -50,14 +56,14 @@
- - +
Planned

Pendra

Bring completed slide decks into QLearn more easily.

@@ -81,16 +87,16 @@
Products

A growing family of focused lesson tools.

-

Hudra and Lildra are available now, with Pendra planned next.

+

Hudra and Lildra are available now, with Pendra planned next.

diff --git a/lildra/index.html b/lildra/index.html index e28ecbb..b630e19 100644 --- a/lildra/index.html +++ b/lildra/index.html @@ -1,13 +1,14 @@ -Lildra — QLearn content, without the QLearn clutter +Lildra - QLearn content, without the QLearn clutter - +
-
Distraction-free lesson reading

QLearn content, without the QLearn clutter.

Lildra hides the surrounding Canvas and QLearn navigation while leaving the lesson itself unchanged—giving teachers and students a cleaner, calmer reading view.

Lildra 0.3.0 · Chrome and Edge · No analytics or persistent site access

Free to use · Activated only when you choose · Built by an Australian educator

https://qlearn.eq.edu.au
Lildra
Introduction to today's lesson

Lildra v0.3.0
Same lessonOriginal content and styling preserved
Less distractionNavigation stays out of the way
+
Distraction-free lesson reading

QLearn content, without the QLearn clutter.

Lildra hides the surrounding Canvas and QLearn navigation while leaving the lesson itself unchanged - giving teachers and students a cleaner, calmer reading view.

Lildra 0.3.0 · Chrome and Edge · No analytics or persistent site access

Free to use · Activated only when you choose · Built by an Australian educator

https://qlearn.eq.edu.au
Lildra
Introduction to today's lesson

Lildra v0.3.0
Same lessonOriginal content and styling preserved
Less distractionNavigation stays out of the way
Content-preservingNo lesson reconstruction
Calm reading widthCentred and responsive
Explicit activationToolbar button or Alt+L
Privacy-consciousNo analytics or remote code
What Lildra does

Keep the lesson. Hide the interface around it.

Lildra is deliberately focused: it changes the surrounding reading experience without turning your lesson into slides or another kind of document.

A focused reading view

Global navigation and course navigation are hidden, while the lesson remains centred at a comfortable, responsive reading width.

Title Always visibleLesson Original DOM preservedNavigation Hidden while active
L

Compact title bar

A sticky, single-line title follows dynamically rendered Canvas page titles without duplicating screen-reader announcements.

Toggle when needed

Click the extension toolbar button or press Alt+L to turn Lildra on or off for the current page.

Your content stays familiar

Typography, headings, images, tables, links, media and embeds remain part of the original lesson page.

Simple by design

No account, settings, popup, analytics, remote scripts, dependencies or persistent access to the sites you visit.

-
How it works

A calmer lesson in one click.

01

Install Lildra

Download the latest release and install it in Chrome or Edge.

02

Open a lesson

Visit a supported HTTPS Canvas or QLearn course page or wiki lesson.

03

Choose reading view

Click Lildra or press Alt+L. Repeat to return to the normal page.

+
How it works

A calmer lesson in one click.

01

Install Lildra

Install Lildra from your browser's official extension store.

02

Open a lesson

Visit a supported HTTPS Canvas or QLearn course page or wiki lesson.

03

Choose reading view

Click Lildra or press Alt+L. Repeat to return to the normal page.

+
See the difference

The same lesson, with less around it.

Lildra keeps the original lesson content and styling while hiding the surrounding Canvas and QLearn interface.

A lesson open in the full QLearn interface
Original lesson page
The same lesson in Lildra's focused reading view
Lildra focused reading view
Privacy by design

Your lesson stays in your browser.

Lildra processes the current lesson locally only after you activate it. It does not collect, store or transmit lesson content.

Read Lildra's privacy policy
No data collection

No analytics, telemetry or advertising profiles.

No persistent site access

activeTab grants temporary access after your click.

No remote code

Everything Lildra runs is packaged with the extension.

Questions

Frequently asked.

What pages does Lildra support?

Lildra activates on HTTPS Canvas course page and wiki content routes that contain the expected Canvas lesson structure, including compatible QLearn lessons.

Does Lildra change my lesson?

No. It does not edit, move, clone or reconstruct lesson content. Its changes are temporary presentation styles around the existing page.

How is Lildra different from Hudra?

Lildra keeps a lesson as a normal web page and removes interface distractions. Hudra turns supported structured lessons into a classroom presentation experience.

Is Lildra official?

No. Lildra is independent and is not affiliated with or endorsed by Instructure or the Queensland Department of Education.

Which browsers are supported?

Lildra targets current Chromium-based browsers, including Google Chrome and Microsoft Edge.

-
Read the lesson, not the interface

Make your next Canvas or QLearn lesson feel calmer.

Activate Lildra only when you want a focused reading view.

Download Lildra
-
+
Read the lesson, not the interface

Make your next Canvas or QLearn lesson feel calmer.

Activate Lildra only when you want a focused reading view.

Available in the Chrome Web StoreGet it from Microsoft Edge
+ diff --git a/lildra/privacy/index.html b/lildra/privacy/index.html index 24998e2..3a1e567 100644 --- a/lildra/privacy/index.html +++ b/lildra/privacy/index.html @@ -1,5 +1,5 @@ -Privacy Policy — Lildra - +Privacy Policy - Lildra +
+
diff --git a/lildra/support/index.html b/lildra/support/index.html index a70689c..349b479 100644 --- a/lildra/support/index.html +++ b/lildra/support/index.html @@ -1,12 +1,12 @@ -Help and Support — Lildra - +Help and Support - Lildra +
+
diff --git a/lildra/terms/index.html b/lildra/terms/index.html index c21b28a..ea7517a 100644 --- a/lildra/terms/index.html +++ b/lildra/terms/index.html @@ -1,5 +1,5 @@ -Terms of Use — Lildra - +Terms of Use - Lildra +
+