diff --git a/AGENTS.md b/AGENTS.md index 078d6de..bfd1ddf 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -2,7 +2,7 @@ ## Project purpose -This repository contains the public website for the Napper application ecosystem. It includes the main `napper.au` landing site, the Hudra product site, and shared legal, privacy, support and ecosystem content. Lildra and Pendra product pages are planned but do not yet exist. +This repository contains the public website for the Napper application ecosystem. It includes the main `napper.au` landing site, the Hudra and Lildra product sites, and shared legal, privacy, support and ecosystem content. Pendra is planned but does not yet have a product page. ## Source of truth @@ -17,7 +17,7 @@ When an important architectural, deployment, naming or development decision is m ## Product distinction - Hudra is primarily a presentation and slide-viewing system that turns complete QLearn lesson pages into a classroom presentation experience. Do not describe Hudra as a general-purpose editor. -- Lildra is the product focused on removing the surrounding QLearn interface and showing lesson-page content cleanly. +- Lildra is a distraction-free reading extension that hides the surrounding Canvas/QLearn interface while preserving the lesson DOM, content and styling. It is not a presentation system. - Pendra is planned as a simpler path for bringing completed presentation slides into QLearn. Keep product wording within these boundaries and do not reuse Lildra's clutter-removal positioning as Hudra's primary message. @@ -44,7 +44,7 @@ The site is a dependency-free static site using HTML, CSS and small browser Java └── terms/index.html ``` -The Hudra header, footer and foundational styling are currently repeated. Establish shared-component and shared-style conventions before duplicating Hudra's structure for Lildra or Pendra. Do not introduce those abstractions incidentally during an unrelated focused change. +Hudra provides the established foundational product-page and legal-page styling. Lildra reuses that stable foundation through its own theme stylesheets and keeps Lildra-specific colours and visuals isolated there. Reassess this CSS layering before adding Pendra rather than creating another product-to-product dependency. ## Deployment assumptions @@ -63,6 +63,7 @@ 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 releases: `https://git.napper.au/napper/hudra/releases` +- Lildra releases: `https://git.napper.au/napper/lildra/releases` ## Working principles diff --git a/README.md b/README.md index ac1fc7d..86b86e0 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@ Static source for the Napper application ecosystem website, deployed at . It turns complete QLearn lesson pages into a presentation or slide-style classroom teaching experience. -- **Lildra** is in development. It is focused on removing the surrounding QLearn interface and showing lesson-page content cleanly. A `/lildra` page has not yet been added. -- **Pendra** is planned after Lildra. A `/pendra` page has not yet been added. +- **Lildra** is available at . It gives supported Canvas and QLearn lesson pages a distraction-free reading view while preserving their original content and styling. +- **Pendra** is planned. A `/pendra` page has not yet been added. ## Site structure @@ -32,12 +32,15 @@ The site uses static HTML, CSS and JavaScript without a framework, package manag The HTML uses root-relative asset and navigation paths. Opening pages directly with `file://` or serving the repository beneath a URL subpath will not reproduce production routing. Local previews should use a static server configured with this repository as its web root and with directory-index handling enabled. +Lildra mirrors Hudra's product structure under `lildra/`, with its landing page plus `support/`, `privacy/` and `terms/` directory pages. Its product JavaScript and theme styles live in `js/lildra.js`, `css/lildra.css` and `css/lildra-legal.css`. + ## URLs and external services - Production site: - Canonical QLearn URL: - Canonical Gitea organisation: - Hudra releases: +- Lildra releases: Production supports clean directory URLs. For example, `/hudra/privacy` serves `hudra/privacy/index.html` without requiring `index.html` in the public URL. diff --git a/TODO.md b/TODO.md index 8331bc5..49b8178 100644 --- a/TODO.md +++ b/TODO.md @@ -7,7 +7,7 @@ ## Next -- Add Lildra +- Submit Lildra to the Chrome Web Store and add its listing link when approved - Add Pendra - Shared CSS - Shared navigation @@ -16,4 +16,4 @@ - Automatic deployment - Preview deployments -- Analytics \ No newline at end of file +- Analytics diff --git a/css/lildra-legal.css b/css/lildra-legal.css new file mode 100644 index 0000000..6b1cbfd --- /dev/null +++ b/css/lildra-legal.css @@ -0,0 +1 @@ +@import url("/css/hudra-legal.css"); diff --git a/css/lildra.css b/css/lildra.css new file mode 100644 index 0000000..f3e7a02 --- /dev/null +++ b/css/lildra.css @@ -0,0 +1,29 @@ +@import url("/css/hudra.css"); + +:root { + --blue-950: #281052; + --blue-900: #5425a8; + --blue-800: #5425a8; + --blue-700: #6d35d8; + --blue-50: #f8f3ff; + --soft: #f8f3ff; + --line: #eadfff; +} + +.lildra-reading-window { transform: rotate(1deg); } +.reading-shell { min-height: 430px; background: #f3eefb; } +.reading-title { padding: 13px 24px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #5425a8, #281052); font-size: .8rem; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; } +.reading-page { width: min(72%, 620px); margin: 30px auto; padding: 30px; border-radius: 10px; background: #fff; box-shadow: 0 14px 35px rgba(40,16,82,.1); } +.reading-page h2 { width: 67%; height: 18px; margin: 0 0 24px; border-radius: 6px; background: #281052; } +.reading-page p { height: 8px; margin: 12px 0; border-radius: 5px; background: #d7ccec; } +.reading-page p:nth-child(3) { width: 86%; } +.reading-page p:nth-child(4) { width: 70%; } +.reading-media { height: 110px; margin-top: 24px; border-radius: 10px; background: linear-gradient(135deg, #eadfff, #cdb4ff); } +.reading-version { padding: 10px 14px; color: #6d35d8; font-size: .68rem; font-weight: 800; text-align: right; } +.feature-card-accent, .cta-card { background: radial-gradient(circle at 80% 20%, #8250e8 0, transparent 34%), linear-gradient(135deg, #6d35d8, #281052); } +.site-footer { background: #1d0b3d; } + +@media (max-width: 760px) { + .lildra-reading-window { transform: none; } + .reading-page { width: calc(100% - 34px); padding: 22px; } +} diff --git a/docs/architecture.md b/docs/architecture.md index e69de29..743c7d8 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -0,0 +1,3 @@ +## Product page styling + +Hudra remains the current foundation for product and legal-page layout. Lildra loads that stable foundation through its own theme stylesheets, then overrides product colour tokens and adds only Lildra-specific visuals. This is an intentional transitional convention for the two current products. Before Pendra is added, extract genuinely shared product foundations into neutral shared styles rather than introducing another product-to-product dependency. diff --git a/img/LildraLogo128.png b/img/LildraLogo128.png new file mode 100644 index 0000000..32317b7 Binary files /dev/null and b/img/LildraLogo128.png differ diff --git a/img/LildraLogo16.png b/img/LildraLogo16.png new file mode 100644 index 0000000..b860853 Binary files /dev/null and b/img/LildraLogo16.png differ diff --git a/img/LildraLogo32.png b/img/LildraLogo32.png new file mode 100644 index 0000000..f888c9f Binary files /dev/null and b/img/LildraLogo32.png differ diff --git a/img/LildraLogo48.png b/img/LildraLogo48.png new file mode 100644 index 0000000..5528b4f Binary files /dev/null and b/img/LildraLogo48.png differ diff --git a/img/LildraLogoHiRes.png b/img/LildraLogoHiRes.png new file mode 100644 index 0000000..6f92ead Binary files /dev/null and b/img/LildraLogoHiRes.png differ diff --git a/index.html b/index.html index 41df095..631d5bd 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@ Products Approach Source - Explore Hudra + Explore products @@ -55,8 +55,8 @@
Available

Hudra

Turn lesson pages into a classroom presentation system.

- -
Up next

Lildra

Strip away QLearn clutter and show only the lesson page content.

+ Lildra logo +
Available

Lildra

Keep the lesson page and hide the surrounding QLearn clutter.

@@ -81,7 +81,7 @@
Products

A growing family of focused lesson tools.

-

Hudra is available now. Lildra is the next product in development, with Pendra planned after it.

+

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

@@ -101,13 +101,13 @@
- - In development + Lildra logo + Available now

Lildra

QLearn content, without the QLearn clutter.

-

Lildra is a cut-down companion to Hudra. It removes the surrounding QLearn interface and keeps the lesson page content front and centre.

-

Product page and release details coming next.

+

Lildra hides the surrounding Canvas and QLearn interface while preserving the lesson's original content and styling in a calm reading view.

+
Explore LildraReleases →
@@ -156,8 +156,8 @@

Focused browser tools for better digital lessons.

-
ProductsHudraLildra — in developmentPendra — planned
- +
ProductsHudraLildraPendra — planned
+
© Napper.Independent software created on the Gold Coast, Australia.
diff --git a/js/lildra.js b/js/lildra.js new file mode 100644 index 0000000..74e30e6 --- /dev/null +++ b/js/lildra.js @@ -0,0 +1,22 @@ +const menuButton = document.querySelector('.menu-button'); +const siteNav = document.querySelector('.site-nav'); + +if (menuButton && siteNav) { + const menuLabel = menuButton.querySelector('.sr-only'); + const desktopViewport = window.matchMedia('(min-width: 761px)'); + const setMenuState = (isOpen) => { + siteNav.classList.toggle('open', isOpen); + menuButton.setAttribute('aria-expanded', String(isOpen)); + if (menuLabel) menuLabel.textContent = isOpen ? 'Close navigation' : 'Open navigation'; + }; + menuButton.addEventListener('click', () => setMenuState(!siteNav.classList.contains('open'))); + siteNav.querySelectorAll('a').forEach((link) => link.addEventListener('click', () => setMenuState(false))); + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' && siteNav.classList.contains('open')) { setMenuState(false); menuButton.focus(); } + }); + desktopViewport.addEventListener('change', (event) => { if (event.matches) setMenuState(false); }); + setMenuState(false); +} + +const year = document.getElementById('year'); +if (year) year.textContent = new Date().getFullYear(); diff --git a/lildra/index.html b/lildra/index.html new file mode 100644 index 0000000..e28ecbb --- /dev/null +++ b/lildra/index.html @@ -0,0 +1,13 @@ + +Lildra — QLearn content, without the QLearn clutter + +
Lildra
+
+
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.

+
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
+
diff --git a/lildra/privacy/index.html b/lildra/privacy/index.html new file mode 100644 index 0000000..24998e2 --- /dev/null +++ b/lildra/privacy/index.html @@ -0,0 +1,17 @@ +Privacy Policy — Lildra +
Lildra
+
Your data, clearly explained

Privacy Policy

This policy explains what Lildra accesses when you request a distraction-free reading view.

Effective: 27 July 2026Applies to: Lildra extension and website
+
Plain-language promise

Lildra does not collect, store, sell or transmit your lesson content or browsing activity. It runs locally only after you activate it.

+

1. Summary

Lildra is a browser extension that temporarily hides surrounding Canvas and QLearn navigation on supported lesson pages. It requires no Lildra account and includes no analytics, telemetry, advertising or remote code.

+

2. Information Lildra may access

Information Lildra may access and its purpose
InformationPurpose
Current tab address and Canvas page structureTo confirm the page is a supported HTTPS Canvas course page or wiki lesson before activating.
Visible page titleTo show and update the compact Lildra title bar.
Existing page elementsTo identify the Canvas interface elements that should be temporarily hidden and preserve the lesson content.

Lildra does not seek passwords, authentication cookies, browsing history, payment information, private messages or unrelated tabs.

+

3. How information is used

Information available in the selected tab is used only to validate the page, apply the requested focused layout, display the current title and restore the normal page when Lildra is turned off.

+

4. Storage, retention and transmission

Lildra processes the selected page locally in your browser. It does not transmit lesson content, page titles, addresses or usage information to Napper.au or another service. Lildra does not request the browser storage permission and does not retain settings or lesson data.

Lesson pages and embedded resources continue to be loaded from their existing providers. Support email you send voluntarily is handled by the relevant email services and retained only as reasonably needed to respond, maintain security or meet legal obligations.

+

5. Sharing and sale of data

Lildra does not sell user data or share lesson content with advertisers, data brokers or unrelated third parties. Information voluntarily included in support correspondence may be processed by email and hosting providers or disclosed where required by law.

+

6. Chrome Web Store Limited Use

Lildra's use of information received from Chrome APIs complies with the Chrome Web Store User Data Policy, including Limited Use requirements. Chrome API data is used only to provide Lildra's single user-facing focused-reading purpose. It is not transferred for advertising, creditworthiness, lending or unrelated purposes, and humans do not read it.

+

7. Lildra website

The public website may receive ordinary server information needed to deliver pages, such as IP address, browser type, requested page and request time. This may appear in short-term operational or security logs. The website has no access to your Canvas or QLearn lesson content.

+

8. Security

Lildra minimises access through activeTab, validates supported routes and page structure, and packages all executable code with the extension. Install only from an authorised listing or the official release location and keep Lildra and your browser updated.

+

9. Your choices and deletion

Lildra accesses a tab only after you click its button or use its shortcut. Toggle it off, disable it or uninstall it at any time. Because Lildra stores no lesson data or preferences, there is no separate extension dataset to delete. Contact support to request deletion of information you voluntarily sent by email.

+

10. Children and educational information

Lildra is a general educational utility and is not designed to collect personal information from children. Users remain responsible for organisational policies, permissions and applicable privacy requirements when accessing educational content.

+

11. Changes to this policy

This policy may be updated if Lildra's features, permissions or data practices change. The effective date will be revised and material changes communicated through appropriate release, website, listing or extension channels.

+

12. Contact

Privacy questions, deletion requests and security reports can be sent to:

support@napper.au
Napper.au, Queensland, Australia

General help is available on the Lildra support page →.

+
Lildra

A distraction-free reading view for Canvas and QLearn lessons.

Part of napper.au
© Napper.auLildra is independent and is not affiliated with Instructure or the Queensland Department of Education.
diff --git a/lildra/support/index.html b/lildra/support/index.html new file mode 100644 index 0000000..a70689c --- /dev/null +++ b/lildra/support/index.html @@ -0,0 +1,12 @@ +Help and Support — Lildra +
Lildra
+
Help when you need it

Lildra support

Install Lildra, start a focused reading view, troubleshoot common issues or report a problem.

+
Lildra is an independent project

Lildra is not an official Queensland Department of Education or Instructure product. Use it only where your organisation permits browser extensions.

+

1. Install Lildra

The latest package and release notes are available from the official releases page.

Open Lildra releases

  1. Download and extract the latest Lildra ZIP release.
  2. Open chrome://extensions in Chrome or edge://extensions in Edge.
  3. Enable Developer mode, choose Load unpacked, and select the extracted Lildra folder.
  4. Pin Lildra to the toolbar if you want its button to remain visible.

Lildra 0.3.0 targets current Chrome and Edge. Store installation instructions will be added if a store listing becomes available.

+

2. Use Lildra

  1. Open a supported HTTPS Canvas or QLearn course page or wiki lesson.
  2. Click the Lildra toolbar icon or press Alt+L.
  3. Click the icon or press the shortcut again to restore the normal page.

Your browser or operating system may reserve the shortcut. Use the browser's extension shortcut page to review or change it.

+

3. Quick troubleshooting

Lildra does not activate

  • Confirm the extension is enabled and refresh the lesson page after installing or updating it.
  • Check that the page uses HTTPS and is a Canvas course page or wiki content route.
  • Confirm you are viewing the lesson itself, not a dashboard, module list, assignment, discussion or quiz.
  • Try the toolbar button if Alt+L is reserved by your browser.

The title is missing or incorrect

  • Wait for Canvas to finish loading the page title.
  • Toggle Lildra off and on, or refresh the page.
  • Update to the latest Lildra release and stable browser version.

The page layout looks wrong

  • Toggle Lildra off to restore the normal page.
  • Test with other layout-changing extensions temporarily disabled.
  • Report the affected page type without including private lesson content.
+

4. Report a problem

Include the Lildra version, browser and version, page type, steps to reproduce, expected result and actual result. Remove student names, personal information and private course content from screenshots.

Create a bug report email

+

5. Why Lildra needs browser permissions

  • activeTab provides temporary access to the tab only after you click Lildra or use its shortcut.
  • scripting lets Lildra apply and remove its focused layout in that tab.

Lildra does not request storage, browsing-history or persistent host permissions. See the privacy policy →.

+

6. Disable or uninstall Lildra

  1. Open your browser's extensions page.
  2. Find Lildra.
  3. Turn it off temporarily or choose Remove to uninstall it.

Lildra does not keep settings or lesson data to delete separately.

+

7. Contact and security reports

Email supportsupport@napper.auSuggest an improvementShare a focused-reading workflow Lildra could improve

Do not send passwords, authentication details, student records or private lesson content. Report suspected vulnerabilities privately with the subject “Lildra security report”.

+
Lildra

A distraction-free reading view for Canvas and QLearn lessons.

Part of napper.au
© Napper.auLildra is independent and is not affiliated with Instructure or the Queensland Department of Education.
diff --git a/lildra/terms/index.html b/lildra/terms/index.html new file mode 100644 index 0000000..c21b28a --- /dev/null +++ b/lildra/terms/index.html @@ -0,0 +1,18 @@ +Terms of Use — Lildra +
Lildra
+
The rules for using Lildra

Terms of Use

These terms apply when you download, install or use Lildra.

Effective: 27 July 2026Governing location: Queensland, Australia
+
Check the page while using Lildra

Lildra temporarily hides parts of the Canvas interface. You remain responsible for confirming that controls, notices and content you need are visible before relying on the focused view.

+

1. Acceptance

By downloading, installing or using Lildra, you agree to these Terms of Use and the Lildra Privacy Policy. If you do not agree, do not use Lildra.

+

2. The Lildra service

Lildra is an independently developed browser extension that gives supported Canvas and QLearn lesson and wiki pages a distraction-free reading layout. It hides surrounding navigation, centres the existing lesson content and adds a compact title and version label. Features may change.

+

3. Authorised and acceptable use

Use Lildra only where you are authorised to access the website and content. You must not use it to access restricted content without permission, circumvent security or organisational controls, interfere with services, violate laws or rights, or misrepresent Lildra as an official institutional product.

+

4. Your lesson content

You retain ownership of content you create or are entitled to use. Lildra obtains no ownership by applying a temporary reading layout. You remain responsible for permissions, copyright, privacy, accuracy and appropriate use.

+

5. Your responsibilities

Check that lesson content, links, media, accessibility features, warnings and required Canvas controls remain suitable for your task. Toggle Lildra off whenever you need the normal Canvas interface.

+

6. Availability and compatibility

Lildra is provided on an “as available” basis. Canvas, QLearn, browsers, networks and institutional configurations may change without notice. Compatibility and uninterrupted operation are not guaranteed.

+

7. Disclaimers

To the maximum extent permitted by law, Lildra is provided without warranties of accuracy, fitness for purpose, non-infringement, compatibility or error-free operation. Nothing excludes rights that cannot lawfully be excluded, including under the Australian Consumer Law.

+

8. Limitation of liability

To the maximum extent permitted by law, Napper.au will not be liable for indirect, incidental, special or consequential loss arising from Lildra. Where liability cannot be excluded, it is limited to the minimum remedy permitted by law.

+

9. Third-party platforms and names

Canvas and QLearn have their own terms, policies and availability. Lildra is independent and is not affiliated with, endorsed by or sponsored by Instructure, Google, the Queensland Department of Education or any educational institution. Third-party marks belong to their owners.

+

10. Updates and distribution

Use an authorised release and review release notes. Lildra may be updated, replaced, suspended or discontinued. You are responsible for determining whether extensions are permitted on your device or network.

+

11. Ending use

You may stop using Lildra at any time by toggling it off, disabling it or uninstalling it.

+

12. Changes to these terms

These terms may be updated as Lildra develops. The effective date will be revised when changes are published.

+

13. Governing law and contact

These terms are governed by Queensland law and applicable Commonwealth law. Questions can be sent to:

support@napper.au
Napper.au, Queensland, Australia

+
Lildra

A distraction-free reading view for Canvas and QLearn lessons.

Part of napper.au
© Napper.auLildra is independent and is not affiliated with Instructure or the Queensland Department of Education.