Files

164 lines
8.8 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="Napper builds focused browser tools for teachers, beginning with Hudra and Lildra for cleaner QLearn lessons and classroom presentation.">
<title>Napper - Focused tools for better lessons</title>
<link rel="icon" type="image/png" sizes="16x16" href="/img/NapperLogo16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/NapperLogo32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/NapperLogo180.png">
<link rel="stylesheet" href="/css/napper.css">
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header" id="top">
<div class="container header-inner">
<a class="brand" href="/" aria-label="Napper home">
<img class="brand-logo" src="/img/NapperLogo48.png" width="42" height="42" alt="">
<span>Napper</span>
</a>
<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="#products">Products</a>
<a href="#approach">Approach</a>
<a href="https://git.napper.au/napper">Source</a>
<div class="products-menu">
<a class="nav-button" href="#products">Explore products</a>
<div class="products-popup" aria-label="Explore products">
<a href="/hudra"><img src="/img/HudraLogo48.png" width="34" height="34" alt=""><span><strong>Hudra</strong><small>Classroom presentations</small></span></a>
<a href="/lildra"><img src="/img/LildraLogo48.png" width="34" height="34" alt=""><span><strong>Lildra</strong><small>Distraction-free reading</small></span></a>
</div>
</div>
</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> Built by an Australian educator</div>
<h1>Small tools that make digital lessons <em>feel better.</em></h1>
<p class="hero-lead">Napper creates focused browser tools that remove clutter, improve presentation and help teachers get more from the lesson content they already have.</p>
<div class="hero-actions">
<a class="button button-primary" href="/hudra">Meet Hudra</a>
<a class="button button-secondary" href="#products">View the roadmap</a>
</div>
<p class="microcopy">Independent · Practical · Privacy-conscious</p>
</div>
<div class="hero-visual" aria-label="Napper product family preview">
<div class="product-stack">
<a class="stack-card stack-hudra" href="/hudra" aria-label="Explore Hudra">
<img src="/img/HudraLogo128.png" width="66" height="66" alt="Hudra logo">
<div><span class="status status-live">Available</span><h2>Hudra</h2><p>Turn lesson pages into a classroom presentation system.</p></div>
</a>
<a class="stack-card stack-lildra product-lildra" href="/lildra" aria-label="Explore Lildra">
<img src="/img/LildraLogo128.png" width="66" height="66" alt="Lildra logo">
<div><span class="status status-live">Available</span><h2>Lildra</h2><p>Keep the lesson page and hide the surrounding QLearn clutter.</p></div>
</a>
</div>
</div>
</div>
</section>
<section class="trust-strip" aria-label="Napper principles">
<div class="container trust-grid">
<div><strong>One clear purpose</strong><span>Each product solves one real problem</span></div>
<div><strong>Works with existing lessons</strong><span>No unnecessary platform replacement</span></div>
<div><strong>Teacher-built</strong><span>Created from classroom needs</span></div>
<div><strong>Lightweight</strong><span>Useful without becoming another system</span></div>
</div>
</section>
<section class="section" id="products">
<div class="container">
<div class="section-heading">
<div class="eyebrow"><span></span> Products</div>
<h2>A growing family of focused lesson tools.</h2>
<p><a class="inline-product-link" href="/hudra">Hudra</a> and <a class="inline-product-link" href="/lildra">Lildra</a> are available now.</p>
</div>
<div class="product-grid">
<article class="product-card product-card-featured">
<div class="product-card-top">
<a class="product-identity-link" href="/hudra" aria-label="Explore Hudra"><img src="/img/HudraLogo128.png" width="84" height="84" alt="Hudra logo"></a>
<span class="status status-live">Available now</span>
</div>
<h3><a class="product-name-link" href="/hudra">Hudra</a></h3>
<p class="product-tagline">Present QLearn lessons beautifully.</p>
<p>Hudra turns existing lesson pages into a clean slide experience with presenter controls, previews, timers and dual-screen support.</p>
<div class="card-actions">
<a class="button button-primary" href="/hudra">Explore Hudra</a>
<a class="text-link" href="https://chromewebstore.google.com/detail/hudra/bjggdeecklhnpebgmjiaedaadmpdoddm">Chrome Web Store <span></span></a>
</div>
</article>
<article class="product-card product-lildra">
<div class="product-card-top">
<a class="product-identity-link" href="/lildra" aria-label="Explore Lildra"><img src="/img/LildraLogo128.png" width="84" height="84" alt="Lildra logo"></a>
<span class="status status-live">Available now</span>
</div>
<h3><a class="product-name-link" href="/lildra">Lildra</a></h3>
<p class="product-tagline">QLearn content, without the QLearn clutter.</p>
<p>Lildra hides the surrounding Canvas and QLearn interface while preserving the lesson's original content and styling in a calm reading view.</p>
<div class="card-actions"><a class="button button-primary" href="/lildra">Explore Lildra</a><a class="text-link" href="https://chromewebstore.google.com/detail/lildra/plgcccpjkfeimphghbpojjmibmajgocp">Chrome Web Store <span></span></a></div>
</article>
</div>
</div>
</section>
<section class="section section-soft" id="approach">
<div class="container approach-grid">
<div>
<div class="eyebrow"><span></span> The approach</div>
<h2>Keep the lesson. Improve the experience.</h2>
<p class="approach-lead">Napper products are designed around a simple idea: teachers should not have to rebuild good content just to make it easier to use.</p>
</div>
<div class="principles">
<article><span>01</span><div><h3>Focused</h3><p>A narrow purpose is a feature, not a limitation.</p></div></article>
<article><span>02</span><div><h3>Familiar</h3><p>Products work alongside the tools educators already use.</p></div></article>
<article><span>03</span><div><h3>Transparent</h3><p>Clear behaviour, clear privacy information and accessible releases.</p></div></article>
</div>
</div>
</section>
<section class="cta-section">
<div class="container">
<div class="cta-card">
<div><div class="eyebrow light"><span></span> Available now</div><h2>Start with Hudra.</h2><p>Turn an existing QLearn lesson page into a cleaner classroom presentation.</p></div>
<a class="button button-light" href="/hudra">Explore Hudra</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-grid">
<div class="footer-brand">
<a class="brand" href="/"><img class="brand-logo" src="/img/NapperLogo48.png" width="42" height="42" alt=""><span>Napper</span></a>
<p>Focused browser tools for better digital lessons.</p>
</div>
<div class="footer-links">
<div><strong>Products</strong><a href="/hudra">Hudra</a><a href="/lildra">Lildra</a></div>
<div><strong>Resources</strong><a href="https://git.napper.au/napper">Source</a><a href="/hudra/support">Hudra support</a><a href="/lildra/support">Lildra support</a></div>
</div>
</div>
<div class="container footer-bottom"><span>© <span id="year"></span> Napper.</span><span>Independent software created on the Gold Coast, Australia.</span></div>
</footer>
<script src="/js/napper.js" defer></script>
</body>
</html>
<!-- Deployment test: 27 July 2026 -->