napper/site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve product discovery and showcase extensions

Browse Source
This commit is contained in:
git
2026-07-28 18:22:28 +10:00
parent b2f2b65111
commit ba8bc3e431
20 changed files with 187 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hudra/index.html
+74 -15
View File
@@ -6,7 +6,7 @@
<meta name="theme-color" content="#0b45d8">
<meta name="description" content="Hudra turns structured QLearn and Canvas lesson pages into polished classroom presentations with presenter and audience views, previews, elapsed time and keyboard navigation.">
<title>Hudra — Present QLearn and Canvas lessons beautifully</title>
<title>Hudra - Present QLearn and Canvas lessons beautifully</title>
<link rel="icon" type="image/png" sizes="16x16" href="/img/HudraLogo16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/HudraLogo32.png">
@@ -18,10 +18,14 @@
<header class="site-header" id="top">
<div class="container header-inner">
<a class="brand" href="/hudra" aria-label="Hudra home">
<img src="/img/HudraLogo48.png" width="48" height="48" alt="">
<span>Hudra</span>
</a>
<div class="header-brand-group">
<a class="ecosystem-link" href="/">Napper</a>
<span class="brand-separator" aria-hidden="true">/</span>
<a class="brand" href="/hudra" aria-label="Hudra home">
<img src="/img/HudraLogo48.png" width="48" height="48" alt="">
<span>Hudra</span>
</a>
</div>
<button class="menu-button" type="button" aria-expanded="false" aria-controls="site-nav">
<span class="sr-only">Open navigation</span>
@@ -49,7 +53,7 @@
<div class="eyebrow"><span></span> Classroom presentation system</div>
<h1>Turn QLearn and Canvas lessons into <em>presentations.</em></h1>
<p class="hero-lead">
Hudra transforms structured QLearn and Canvas lesson pages into a clean, classroom-ready slide experience—complete with presenter controls, previews, elapsed presentation time and dual-screen support.
Hudra transforms structured QLearn and Canvas lesson pages into a clean, classroom-ready slide experience - complete with presenter controls, previews, elapsed presentation time and dual-screen support.
</p>
<div class="hero-actions" id="install">
@@ -57,10 +61,9 @@
<a class="store-badge" href="https://chromewebstore.google.com/detail/hudra/bjggdeecklhnpebgmjiaedaadmpdoddm" aria-label="Install Hudra from the Chrome Web Store">
<img src="/img/chrome-web-store-badge.png" width="170" height="48" alt="Available in the Chrome Web Store">
</a>
<div class="store-coming-soon" aria-label="Hudra for Microsoft Edge coming soon">
<strong>Microsoft Edge</strong>
<span>Coming soon</span>
</div>
<a class="store-badge" href="https://microsoftedge.microsoft.com/addons/detail/hudra/aogdgaofdldbpmkjknklojbhcbcfandb" aria-label="Install Hudra from Microsoft Edge Add-ons">
<img src="/img/microsoft-edge-addons-badge.png" width="181" height="48" alt="Get it from Microsoft Edge">
</a>
</div>
<a class="button button-secondary" href="#features">See what it does</a>
</div>
@@ -218,6 +221,62 @@
</div>
</section>
<section class="section showcase-section" id="showcase">
<div class="container">
<div class="section-heading">
<div class="eyebrow"><span></span> See Hudra in action</div>
<h2>One lesson. Two ways to present.</h2>
<p>Hudra turns the lesson page you already built into a classroom presentation, whether your displays are duplicated or you use a separate audience screen.</p>
</div>
<article class="showcase-story">
<div class="showcase-story-heading">
<span class="showcase-number">01</span>
<div><h3>From lesson page to presentation</h3><p>Your original lesson becomes a focused, slide-style presentation without rebuilding the content.</p></div>
</div>
<div class="transformation-grid">
<figure class="screenshot-figure">
<a class="screenshot-link" href="/img/screenshots/lesson-original.png" target="_blank" rel="noopener" aria-label="Open the original lesson screenshot at full size">
<img src="/img/screenshots/lesson-original.png" width="1920" height="1140" loading="lazy" alt="A lesson open in the full QLearn interface">
</a>
<figcaption>Original lesson page</figcaption>
</figure>
<div class="transformation-arrow" aria-hidden="true">→</div>
<figure class="screenshot-figure">
<a class="screenshot-link" href="/img/screenshots/hudra-duplicate-screen.png" target="_blank" rel="noopener" aria-label="Open the Hudra duplicate-screen presentation screenshot at full size">
<img src="/img/screenshots/hudra-duplicate-screen.png" width="1920" height="1200" loading="lazy" alt="The same lesson displayed as a Hudra presentation for duplicated screens">
</a>
<figcaption>Duplicate-screen presentation</figcaption>
</figure>
</div>
</article>
<article class="showcase-story dual-screen-story">
<div class="showcase-story-heading">
<span class="showcase-number">02</span>
<div><h3>Presenter controls for you, lesson content for the class</h3><p>With two displays, Hudra separates the presenter dashboard from the clean audience view.</p></div>
</div>
<div class="dual-screen-stage">
<figure class="device device-laptop">
<div class="device-label">Presenter screen</div>
<a class="device-screen screenshot-link" href="/img/screenshots/hudra-presenter-screen.png" target="_blank" rel="noopener" aria-label="Open the Hudra presenter-screen screenshot at full size">
<img src="/img/screenshots/hudra-presenter-screen.png" width="1920" height="1200" loading="lazy" alt="Hudra presenter dashboard showing the current and next slides with presentation controls">
</a>
<div class="laptop-base" aria-hidden="true"></div>
</figure>
<div class="screen-connection" aria-hidden="true"><span></span></div>
<figure class="device device-display">
<div class="device-label">Audience screen</div>
<a class="device-screen screenshot-link" href="/img/screenshots/hudra-audience-screen.png" target="_blank" rel="noopener" aria-label="Open the Hudra audience-screen screenshot at full size">
<img src="/img/screenshots/hudra-audience-screen.png" width="1920" height="1080" loading="lazy" alt="Clean Hudra audience presentation displayed for the class">
</a>
<div class="display-stand" aria-hidden="true"></div>
</figure>
</div>
</article>
</div>
</section>
<section class="section" id="privacy">
<div class="container privacy-grid">
<div>
@@ -270,7 +329,7 @@
</details>
<details>
<summary>Where can I download Hudra?</summary>
<p>Hudra is available from the Chrome Web Store. A Microsoft Edge Add-ons listing is coming soon.</p>
<p>Hudra is available from the Chrome Web Store and Microsoft Edge Add-ons.</p>
</details>
</div>
</div>
@@ -287,10 +346,9 @@
<a class="store-badge" href="https://chromewebstore.google.com/detail/hudra/bjggdeecklhnpebgmjiaedaadmpdoddm" aria-label="Install Hudra from the Chrome Web Store">
<img src="/img/chrome-web-store-badge.png" width="170" height="48" alt="Available in the Chrome Web Store">
</a>
<div class="store-coming-soon" aria-label="Hudra for Microsoft Edge coming soon">
<strong>Microsoft Edge</strong>
<span>Coming soon</span>
</div>
<a class="store-badge" href="https://microsoftedge.microsoft.com/addons/detail/hudra/aogdgaofdldbpmkjknklojbhcbcfandb" aria-label="Install Hudra from Microsoft Edge Add-ons">
<img src="/img/microsoft-edge-addons-badge.png" width="181" height="48" alt="Get it from Microsoft Edge">
</a>
</div>
</div>
</section>
@@ -313,6 +371,7 @@
<a href="#features">Features</a>
<a href="#how-it-works">How it works</a>
<a href="https://chromewebstore.google.com/detail/hudra/bjggdeecklhnpebgmjiaedaadmpdoddm">Chrome Web Store</a>
<a href="https://microsoftedge.microsoft.com/addons/detail/hudra/aogdgaofdldbpmkjknklojbhcbcfandb">Microsoft Edge Add-ons</a>
</div>
<div>
<strong>Support</strong>