394 lines
20 KiB
HTML
394 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="en-AU">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<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>
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/img/HudraLogo16.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/img/HudraLogo32.png">
|
|
<link rel="apple-touch-icon" href="/img/HudraLogo128.png">
|
|
<link rel="stylesheet" href="/css/hudra.css">
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main">Skip to content</a>
|
|
|
|
<header class="site-header" id="top">
|
|
<div class="container header-inner">
|
|
<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>
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
|
|
<nav class="site-nav" id="site-nav" aria-label="Primary navigation">
|
|
<a href="#features">Features</a>
|
|
<a href="#how-it-works">How it works</a>
|
|
<a href="/hudra/privacy">Privacy</a>
|
|
<a href="/hudra/support">Help</a>
|
|
<a href="#faq">FAQ</a>
|
|
<a class="nav-button" href="https://chromewebstore.google.com/detail/hudra/bjggdeecklhnpebgmjiaedaadmpdoddm">Get Hudra</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section class="hero">
|
|
<div class="hero-glow hero-glow-one"></div>
|
|
<div class="hero-glow hero-glow-two"></div>
|
|
|
|
<div class="container hero-grid">
|
|
<div class="hero-copy">
|
|
<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.
|
|
</p>
|
|
|
|
<div class="hero-actions" id="install">
|
|
<div class="store-options" aria-label="Install Hudra">
|
|
<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>
|
|
<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>
|
|
|
|
<p class="microcopy">Hudra 0.10 Beta 1 · Designed for supported structured QLearn and Canvas lesson pages · Review presentations before classroom use</p>
|
|
|
|
<p class="microcopy">Free to use · Chromium browsers · Built by an Australian educator</p>
|
|
</div>
|
|
|
|
<div class="hero-visual" aria-label="Hudra presenter dashboard preview">
|
|
<div class="browser-window presentation-window">
|
|
<div class="browser-bar">
|
|
<div class="browser-dots"><span></span><span></span><span></span></div>
|
|
<div class="address-bar">https://qlearn.eq.edu.au</div>
|
|
<img src="/img/HudraLogo32.png" width="32" height="32" alt="Hudra">
|
|
</div>
|
|
<div class="presenter-dashboard">
|
|
<div class="dashboard-topbar">
|
|
<div class="dashboard-brand">
|
|
<img src="/img/HudraLogo32.png" width="26" height="26" alt="">
|
|
<strong>Hudra Presenter</strong>
|
|
</div>
|
|
<div class="dashboard-clock">10:42</div>
|
|
</div>
|
|
|
|
<div class="dashboard-main">
|
|
<section class="current-slide">
|
|
<span class="preview-label">Current slide</span>
|
|
<div class="slide-screen">
|
|
<div class="slide-kicker">TODAY'S LESSON</div>
|
|
<div class="slide-heading"></div>
|
|
<div class="slide-copy wide"></div>
|
|
<div class="slide-copy"></div>
|
|
<div class="slide-image-row"><span></span><span></span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="presenter-sidebar">
|
|
<div class="next-preview">
|
|
<span class="preview-label">Next slide</span>
|
|
<div class="next-screen"><span></span><span></span><span></span></div>
|
|
</div>
|
|
<div class="timer-card">
|
|
<span>Elapsed</span>
|
|
<strong>00:25</strong>
|
|
</div>
|
|
<div class="control-row" aria-hidden="true">
|
|
<span class="control-button">←</span>
|
|
<span>4 / 12</span>
|
|
<span class="control-button">→</span>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="floating-card card-fast"><strong>Presenter view</strong><span>Current and next slide previews</span></div>
|
|
<div class="floating-card card-clean"><strong>Dual screen</strong><span>Controls for you, slides for the class</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="trust-strip" aria-label="Hudra highlights">
|
|
<div class="container trust-grid">
|
|
<div><strong>Presentation-first</strong><span>Turns lessons into slides</span></div>
|
|
<div><strong>Presenter dashboard</strong><span>See what is current and next</span></div>
|
|
<div><strong>Classroom-ready</strong><span>Clock, elapsed time and controls</span></div>
|
|
<div><strong>Independent</strong><span>Created by an educator</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="features">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<div class="eyebrow"><span></span> What Hudra does</div>
|
|
<h2>Your lesson page becomes the slide deck.</h2>
|
|
<p>Keep your lesson content in a supported structured QLearn or Canvas lesson page, then use Hudra to present it as a focused, navigable classroom experience.</p>
|
|
</div>
|
|
|
|
<div class="feature-grid">
|
|
<article class="feature-card feature-card-large">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 4h18v13H3V4Zm2 2v9h14V6H5Zm4 13h6v2H9v-2Z"/></svg>
|
|
</div>
|
|
<h3>Presenter dashboard</h3>
|
|
<p>Control the lesson from a dedicated dashboard with current and next slide previews, slide position, a clock and elapsed presentation time.</p>
|
|
<div class="mini-ui presentation-mini-ui">
|
|
<span><b>Current</b> Lesson introduction</span>
|
|
<span><b>Next</b> Learning intention</span>
|
|
<span><b>Elapsed</b> 00:25</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h8v12H3V5Zm10 2h8v12h-8V7ZM5 7v8h4V7H5Zm10 2v8h4V9h-4Z"/></svg>
|
|
</div>
|
|
<h3>Dual-screen support</h3>
|
|
<p>Keep presenter controls on your screen while students see a clean, distraction-free presentation.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8.6 16.6-4.6-4.6 4.6-4.6L10 8.8 6.8 12l3.2 3.2-1.4 1.4Zm6.8 0L14 15.2l3.2-3.2L14 8.8l1.4-1.4L20 12l-4.6 4.6Z"/></svg>
|
|
</div>
|
|
<h3>Keyboard navigation</h3>
|
|
<p>Move through a lesson quickly using familiar keyboard controls while keeping your attention on the class.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4V4Zm2 2v8.2l3.2-3.2 2.8 2.8 2-2 4 4V6H6Zm0 12h10.6l-4.6-4.6-2 2-2.8-2.8L6 13.8V18Z"/></svg>
|
|
</div>
|
|
<h3>Image-slide optimisation</h3>
|
|
<p>Image-only slides are recognised and displayed to make better use of the presentation area.</p>
|
|
</article>
|
|
|
|
<article class="feature-card feature-card-accent">
|
|
<img src="/img/HudraLogo128.png" width="88" height="88" alt="">
|
|
<div>
|
|
<h3>Present what you already built</h3>
|
|
<p>Hudra does not replace QLearn with another editor. It gives your existing lesson content a purpose-built presentation mode.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-soft" id="how-it-works">
|
|
<div class="container">
|
|
<div class="section-heading centered">
|
|
<div class="eyebrow"><span></span> How it works</div>
|
|
<h2>From lesson page to presentation.</h2>
|
|
<p>Hudra works with the content you already have instead of asking you to rebuild it in a separate slide platform.</p>
|
|
</div>
|
|
|
|
<div class="steps">
|
|
<article>
|
|
<div class="step-number">01</div>
|
|
<h3>Install Hudra</h3>
|
|
<p>Install Hudra from your browser's official extension store.</p>
|
|
</article>
|
|
<div class="step-arrow" aria-hidden="true">→</div>
|
|
<article>
|
|
<div class="step-number">02</div>
|
|
<h3>Open your lesson</h3>
|
|
<p>Navigate to the supported structured QLearn or Canvas lesson page you want to present.</p>
|
|
</article>
|
|
<div class="step-arrow" aria-hidden="true">→</div>
|
|
<article>
|
|
<div class="step-number">03</div>
|
|
<h3>Launch presentation mode</h3>
|
|
<p>Use Hudra's dashboard to present, navigate and manage the lesson in class.</p>
|
|
</article>
|
|
</div>
|
|
</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>
|
|
<div class="eyebrow"><span></span> Privacy by design</div>
|
|
<h2>Your lesson content stays yours.</h2>
|
|
<p class="privacy-lead">Hudra is designed as a presentation tool for content already open in your browser. It does not exist to collect, sell or monetise your teaching content.</p>
|
|
<a class="text-link" href="/hudra/privacy">Read Hudra's privacy policy <span>→</span></a>
|
|
</div>
|
|
<div class="privacy-card">
|
|
<div class="privacy-item">
|
|
<span class="check">✓</span>
|
|
<div><strong>No advertising</strong><p>Hudra is not supported by behavioural advertising.</p></div>
|
|
</div>
|
|
<div class="privacy-item">
|
|
<span class="check">✓</span>
|
|
<div><strong>No sale of user data</strong><p>Your information is not a product.</p></div>
|
|
</div>
|
|
<div class="privacy-item">
|
|
<span class="check">✓</span>
|
|
<div><strong>Focused permissions</strong><p>Hudra requests only the access needed to provide its presentation features.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-soft" id="faq">
|
|
<div class="container faq-layout">
|
|
<div class="section-heading">
|
|
<div class="eyebrow"><span></span> Questions</div>
|
|
<h2>Frequently asked.</h2>
|
|
<p>The essentials about Hudra and how it fits into a QLearn or Canvas workflow.</p>
|
|
</div>
|
|
|
|
<div class="faq-list">
|
|
<details>
|
|
<summary>What is Hudra?</summary>
|
|
<p>Hudra is a browser extension that turns structured QLearn and Canvas lesson pages into classroom presentations. It includes presenter and audience views, current and next slide previews, a clock, elapsed presentation time, keyboard navigation and dual-screen support.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Is Hudra a QLearn page editor?</summary>
|
|
<p>No. Hudra is focused on presenting lesson content you have already created. It adds a classroom presentation system rather than replacing QLearn's editor.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Is Hudra an official Queensland Department of Education product?</summary>
|
|
<p>No. Hudra is an independent project and is not endorsed by or affiliated with the Queensland Department of Education or Instructure.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Which browsers does Hudra support?</summary>
|
|
<p>Hudra currently targets Chromium-based browsers such as Google Chrome and Microsoft Edge.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Where can I download Hudra?</summary>
|
|
<p>Hudra is available from the Chrome Web Store and Microsoft Edge Add-ons.</p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta-section">
|
|
<div class="container cta-card">
|
|
<div>
|
|
<div class="eyebrow light"><span></span> Present directly from your lesson</div>
|
|
<h2>Turn a complete QLearn or Canvas lesson into a slide-style teaching experience.</h2>
|
|
<p>Turn the lesson you already made into a polished classroom presentation.</p>
|
|
</div>
|
|
<div class="store-options store-options-on-dark" aria-label="Install Hudra">
|
|
<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>
|
|
<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>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container footer-grid">
|
|
<div class="footer-brand">
|
|
<a class="brand" href="/hudra">
|
|
<img src="/img/HudraLogo48.png" width="44" height="44" alt="">
|
|
<span>Hudra</span>
|
|
</a>
|
|
<p>A classroom presentation system for structured QLearn and Canvas lesson pages.</p>
|
|
<small>Part of <a href="/">napper.au</a></small>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<div>
|
|
<strong>Hudra</strong>
|
|
<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>
|
|
<a href="https://git.napper.au/napper/hudra">Source code</a>
|
|
</div>
|
|
<div>
|
|
<strong>Support</strong>
|
|
<a href="/hudra/support">Help and feedback</a>
|
|
<a href="/hudra/privacy">Privacy</a>
|
|
<a href="/hudra/terms">Terms</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container footer-bottom">
|
|
<span>© <span id="year"></span> Napper.au</span>
|
|
<span>Hudra is independent and is not affiliated with Instructure or the Queensland Department of Education.</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/js/hudra.js" defer></script>
|
|
</body>
|
|
</html>
|