feat: import existing Napper website
This commit is contained in:
@@ -0,0 +1,127 @@
|
||||
.legal-hero {
|
||||
padding: 82px 0 58px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: linear-gradient(180deg, #fff 0%, #f4f7ff 100%);
|
||||
}
|
||||
.legal-hero .container { max-width: 920px; }
|
||||
.legal-hero h1 {
|
||||
max-width: 780px;
|
||||
margin: 0;
|
||||
color: var(--blue-950);
|
||||
font-size: clamp(2.7rem, 7vw, 4.8rem);
|
||||
line-height: 1;
|
||||
letter-spacing: -.055em;
|
||||
}
|
||||
.legal-hero p {
|
||||
max-width: 720px;
|
||||
margin: 22px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 1.08rem;
|
||||
}
|
||||
.legal-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 22px;
|
||||
margin-top: 26px;
|
||||
color: #71809d;
|
||||
font-size: .86rem;
|
||||
}
|
||||
.legal-page { padding: 72px 0 105px; }
|
||||
.legal-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 230px minmax(0, 1fr);
|
||||
gap: 70px;
|
||||
align-items: start;
|
||||
}
|
||||
.legal-nav {
|
||||
position: sticky;
|
||||
top: 105px;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 34px rgba(19, 37, 81, .06);
|
||||
}
|
||||
.legal-nav strong { padding: 8px 10px; color: var(--blue-950); }
|
||||
.legal-nav a {
|
||||
padding: 8px 10px;
|
||||
color: var(--muted);
|
||||
border-radius: 9px;
|
||||
text-decoration: none;
|
||||
font-size: .9rem;
|
||||
}
|
||||
.legal-nav a:hover { color: var(--blue-800); background: var(--blue-50); }
|
||||
.legal-content { max-width: 760px; }
|
||||
.legal-content section { scroll-margin-top: 110px; margin-bottom: 52px; }
|
||||
.legal-content h2 {
|
||||
margin: 0 0 16px;
|
||||
color: var(--blue-950);
|
||||
font-size: clamp(1.65rem, 3vw, 2.25rem);
|
||||
line-height: 1.15;
|
||||
letter-spacing: -.035em;
|
||||
}
|
||||
.legal-content h3 { margin: 28px 0 10px; color: var(--blue-950); }
|
||||
.legal-content p, .legal-content li { color: #4d596f; }
|
||||
.legal-content ul { padding-left: 1.25rem; }
|
||||
.legal-content li + li { margin-top: 8px; }
|
||||
.notice-card, .support-card {
|
||||
margin: 0 0 36px;
|
||||
padding: 25px 27px;
|
||||
border: 1px solid #cbd8fb;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(145deg, #f8faff, #edf3ff);
|
||||
}
|
||||
.notice-card strong, .support-card strong { color: var(--blue-950); }
|
||||
.notice-card p, .support-card p { margin: 8px 0 0; }
|
||||
.data-table {
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.data-table th, .data-table td {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
.data-table th { color: var(--blue-950); background: var(--blue-50); font-size: .88rem; }
|
||||
.data-table tr:last-child td { border-bottom: 0; }
|
||||
.contact-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 28px 0 40px; }
|
||||
.contact-card {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 12px 34px rgba(19, 37, 81, .06);
|
||||
}
|
||||
.contact-card:hover { border-color: #b7c8fa; transform: translateY(-2px); }
|
||||
.contact-card strong { display: block; color: var(--blue-950); font-size: 1.05rem; }
|
||||
.contact-card span { display: block; margin-top: 6px; color: var(--muted); font-size: .9rem; }
|
||||
.code-note {
|
||||
padding: 15px 17px;
|
||||
border-radius: 12px;
|
||||
color: #273552;
|
||||
background: #f2f5fa;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: .88rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.legal-layout { grid-template-columns: 1fr; gap: 38px; }
|
||||
.legal-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.legal-nav strong { grid-column: 1 / -1; }
|
||||
}
|
||||
@media (max-width: 580px) {
|
||||
.legal-hero { padding-top: 58px; }
|
||||
.legal-page { padding-top: 48px; }
|
||||
.contact-options { grid-template-columns: 1fr; }
|
||||
.data-table { display: block; overflow-x: auto; }
|
||||
.legal-nav { grid-template-columns: 1fr; }
|
||||
}
|
||||
+270
@@ -0,0 +1,270 @@
|
||||
:root {
|
||||
--blue-950: #06184f;
|
||||
--blue-900: #082477;
|
||||
--blue-800: #0a35ad;
|
||||
--blue-700: #0b45d8;
|
||||
--blue-600: #1358f2;
|
||||
--blue-500: #2e6dff;
|
||||
--blue-100: #dfe9ff;
|
||||
--blue-50: #f2f6ff;
|
||||
--ink: #10182c;
|
||||
--muted: #5c667d;
|
||||
--line: #dfe4ef;
|
||||
--surface: #ffffff;
|
||||
--soft: #f6f8fc;
|
||||
--shadow: 0 24px 70px rgba(8, 35, 108, .16);
|
||||
--radius-xl: 32px;
|
||||
--radius-lg: 22px;
|
||||
--radius-md: 15px;
|
||||
--container: 1180px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
background: var(--surface);
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; }
|
||||
button, input { font: inherit; }
|
||||
|
||||
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
|
||||
.skip-link { position: fixed; z-index: 9999; left: 16px; top: -60px; padding: 10px 14px; background: #fff; color: var(--blue-800); border-radius: 10px; box-shadow: var(--shadow); }
|
||||
.skip-link:focus { top: 16px; }
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid rgba(223, 228, 239, .75);
|
||||
background: rgba(255, 255, 255, .88);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.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; }
|
||||
.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; }
|
||||
.site-nav a:hover { color: var(--blue-700); }
|
||||
.nav-button { padding: 10px 16px; color: #fff !important; background: var(--blue-700); border-radius: 11px; box-shadow: 0 8px 18px rgba(11, 69, 216, .22); }
|
||||
.menu-button { display: none; width: 42px; height: 42px; padding: 9px; border: 1px solid var(--line); background: #fff; border-radius: 12px; }
|
||||
.menu-button span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: var(--ink); border-radius: 3px; }
|
||||
|
||||
.hero { position: relative; overflow: hidden; padding: 96px 0 88px; background: linear-gradient(180deg, #fff 0%, #f7f9ff 100%); }
|
||||
.hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(#95afff 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 72%); }
|
||||
.hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 68px; align-items: center; }
|
||||
.hero-copy h1, .section-heading h2, .privacy-grid h2, .cta-card h2 { margin: 0; font-size: clamp(2.7rem, 6vw, 5.35rem); line-height: .98; letter-spacing: -.06em; }
|
||||
.hero-copy h1 em { display: block; color: var(--blue-700); font-style: normal; }
|
||||
.hero-lead { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: clamp(1.07rem, 1.7vw, 1.27rem); }
|
||||
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--blue-700); font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
|
||||
.eyebrow span { width: 28px; height: 3px; background: currentColor; border-radius: 99px; }
|
||||
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
|
||||
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 21px; border-radius: 14px; text-decoration: none; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
|
||||
.button:hover { transform: translateY(-2px); }
|
||||
.button svg { width: 21px; fill: currentColor; }
|
||||
.button-primary { color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); box-shadow: 0 14px 28px rgba(11, 69, 216, .27); }
|
||||
.button-secondary { color: var(--blue-900); border: 1px solid #cbd8fb; background: #fff; }
|
||||
.button-light { color: var(--blue-900); background: #fff; box-shadow: 0 14px 28px rgba(0,0,0,.12); }
|
||||
.microcopy { margin: 17px 0 0; color: #7a8498; font-size: .86rem; }
|
||||
|
||||
.hero-visual { position: relative; min-height: 535px; display: flex; align-items: center; }
|
||||
.browser-window { position: relative; z-index: 2; width: 100%; overflow: hidden; border: 1px solid rgba(154, 174, 228, .6); border-radius: 24px; background: #fff; box-shadow: var(--shadow); transform: rotate(1.2deg); }
|
||||
.browser-bar { height: 60px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 0 17px; border-bottom: 1px solid var(--line); background: #f8f9fd; }
|
||||
.browser-dots { display: flex; gap: 6px; }
|
||||
.browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: #c8ceda; }
|
||||
.address-bar { height: 32px; display: flex; align-items: center; padding: 0 14px; border: 1px solid #e1e5ee; border-radius: 9px; color: #8992a3; background: #fff; font-size: .78rem; }
|
||||
.browser-bar img { border-radius: 8px; }
|
||||
.browser-content { min-height: 420px; display: grid; grid-template-columns: 145px 1fr; }
|
||||
.canvas-sidebar { padding: 25px 18px; background: #f6f7fb; border-right: 1px solid var(--line); }
|
||||
.skeleton { height: 10px; margin-bottom: 16px; border-radius: 10px; background: #dbe0ea; }
|
||||
.skeleton.short { width: 62%; margin-bottom: 28px; background: #b9c8f2; }
|
||||
.canvas-page { position: relative; padding: 27px 28px; }
|
||||
.page-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 26px; }
|
||||
.toolbar-pill { padding: 6px 11px; border-radius: 8px; color: #667188; background: #eef1f6; font-size: .72rem; font-weight: 750; }
|
||||
.toolbar-pill.active { color: #fff; background: var(--blue-700); }
|
||||
.page-title { width: 53%; height: 22px; border-radius: 10px; background: #202b43; }
|
||||
.page-line { width: 66%; height: 9px; margin-top: 17px; border-radius: 10px; background: #d7dce7; }
|
||||
.page-line.wide { width: 88%; margin-top: 22px; }
|
||||
.page-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
|
||||
.page-card { height: 108px; border: 1px solid #dde3ef; border-radius: 14px; background: linear-gradient(145deg, #f8faff, #eef3ff); }
|
||||
.hudra-panel { position: absolute; right: 22px; bottom: 23px; width: 215px; padding: 16px; border: 1px solid #cdd9fb; border-radius: 16px; background: #fff; box-shadow: 0 20px 45px rgba(8, 35, 108, .18); }
|
||||
.panel-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--blue-950); }
|
||||
.panel-heading img { border-radius: 8px; }
|
||||
.hudra-panel button { width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid #d7e0f8; border-radius: 9px; color: #29406f; background: #f5f8ff; font-size: .72rem; text-align: left; }
|
||||
.floating-card { position: absolute; z-index: 3; display: grid; gap: 1px; min-width: 165px; padding: 14px 17px; border: 1px solid #dbe3f7; border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 16px 35px rgba(8,35,108,.16); backdrop-filter: blur(10px); }
|
||||
.floating-card strong { color: var(--blue-800); }
|
||||
.floating-card span { color: var(--muted); font-size: .78rem; }
|
||||
.card-fast { left: -35px; bottom: 38px; }
|
||||
.card-clean { right: -25px; top: 32px; }
|
||||
.hero-glow { position: absolute; border-radius: 50%; filter: blur(20px); opacity: .26; }
|
||||
.hero-glow-one { width: 340px; height: 340px; right: -90px; top: 35px; background: #2d68ff; }
|
||||
.hero-glow-two { width: 250px; height: 250px; left: 36%; bottom: -130px; background: #8eb0ff; }
|
||||
|
||||
.trust-strip { border-block: 1px solid var(--line); background: #fff; }
|
||||
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
|
||||
.trust-grid > div { display: grid; gap: 2px; padding: 25px 26px; border-right: 1px solid var(--line); }
|
||||
.trust-grid > div:last-child { border-right: 0; }
|
||||
.trust-grid strong { color: var(--blue-950); font-size: .95rem; }
|
||||
.trust-grid span { color: var(--muted); font-size: .8rem; }
|
||||
|
||||
.section { padding: 108px 0; }
|
||||
.section-soft { background: var(--soft); }
|
||||
.section-heading { max-width: 690px; margin-bottom: 50px; }
|
||||
.section-heading.centered { margin-inline: auto; text-align: center; }
|
||||
.section-heading.centered .eyebrow { justify-content: center; }
|
||||
.section-heading h2, .privacy-grid h2, .cta-card h2 { font-size: clamp(2.35rem, 4.7vw, 4.2rem); }
|
||||
.section-heading p { margin: 22px 0 0; color: var(--muted); font-size: 1.08rem; }
|
||||
|
||||
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||||
.feature-card { min-height: 280px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 12px 34px rgba(19, 37, 81, .06); }
|
||||
.feature-card-large { grid-row: span 2; min-height: 580px; background: linear-gradient(165deg, #fff 0%, #f1f5ff 100%); }
|
||||
.feature-card-accent { grid-column: span 2; min-height: 210px; display: flex; align-items: center; gap: 30px; color: #fff; border: 0; background: linear-gradient(135deg, var(--blue-700), var(--blue-950)); }
|
||||
.feature-card-accent img { flex: 0 0 auto; filter: drop-shadow(0 12px 20px rgba(0,0,0,.2)); }
|
||||
.feature-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 25px; color: var(--blue-700); border-radius: 15px; background: var(--blue-50); }
|
||||
.feature-icon svg { width: 27px; fill: currentColor; }
|
||||
.feature-card h3 { margin: 0; font-size: 1.36rem; letter-spacing: -.025em; }
|
||||
.feature-card p { margin: 13px 0 0; color: var(--muted); }
|
||||
.feature-card-accent p { color: rgba(255,255,255,.78); }
|
||||
.mini-ui { display: grid; gap: 12px; margin-top: 70px; }
|
||||
.mini-ui span { padding: 15px 16px; color: var(--blue-900); border: 1px solid #cfdbfb; border-radius: 12px; background: #fff; font-weight: 750; box-shadow: 0 10px 25px rgba(8,35,108,.08); }
|
||||
|
||||
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 24px; align-items: center; }
|
||||
.steps article { min-height: 230px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
|
||||
.step-number { margin-bottom: 45px; color: var(--blue-700); font-size: .8rem; font-weight: 900; letter-spacing: .16em; }
|
||||
.steps h3 { margin: 0; font-size: 1.4rem; }
|
||||
.steps p { margin-bottom: 0; color: var(--muted); }
|
||||
.step-arrow { color: #9cabc9; font-size: 1.8rem; }
|
||||
|
||||
.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; }
|
||||
.text-link span { display: inline-block; transition: transform .18s ease; }
|
||||
.text-link:hover span { transform: translateX(4px); }
|
||||
.privacy-card { padding: 33px; border: 1px solid #ccd8fa; border-radius: var(--radius-xl); background: linear-gradient(160deg, #f8faff, #edf3ff); }
|
||||
.privacy-item { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid #d6def1; }
|
||||
.privacy-item:first-child { padding-top: 0; }
|
||||
.privacy-item:last-child { padding-bottom: 0; border-bottom: 0; }
|
||||
.check { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue-700); font-weight: 900; }
|
||||
.privacy-item strong { color: var(--blue-950); }
|
||||
.privacy-item p { margin: 3px 0 0; color: var(--muted); font-size: .9rem; }
|
||||
|
||||
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; }
|
||||
.faq-list details { border-bottom: 1px solid #dbe0e9; }
|
||||
.faq-list summary { position: relative; padding: 24px 42px 24px 0; cursor: pointer; list-style: none; font-size: 1.08rem; font-weight: 780; }
|
||||
.faq-list summary::-webkit-details-marker { display: none; }
|
||||
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 20px; color: var(--blue-700); font-size: 1.6rem; font-weight: 400; }
|
||||
.faq-list details[open] summary::after { content: "−"; }
|
||||
.faq-list details p { margin: -8px 45px 24px 0; color: var(--muted); }
|
||||
|
||||
.cta-section { padding: 42px 0 110px; background: var(--soft); }
|
||||
.cta-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 52px 56px; color: #fff; border-radius: var(--radius-xl); background: radial-gradient(circle at 80% 20%, #396dff 0, transparent 34%), linear-gradient(135deg, var(--blue-700), var(--blue-950)); box-shadow: 0 28px 60px rgba(8,35,108,.22); }
|
||||
.cta-card h2 { max-width: 780px; font-size: clamp(2.2rem, 4vw, 3.7rem); }
|
||||
.cta-card p { margin: 16px 0 0; color: rgba(255,255,255,.78); }
|
||||
.eyebrow.light { color: #bcd0ff; }
|
||||
|
||||
.site-footer { padding: 68px 0 25px; color: #c8d1e8; background: #07132f; }
|
||||
.footer-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; }
|
||||
.footer-brand .brand { color: #fff; }
|
||||
.footer-brand p { max-width: 420px; color: #98a6c5; }
|
||||
.footer-brand small a { color: #fff; }
|
||||
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
|
||||
.footer-links div { display: grid; align-content: start; gap: 11px; }
|
||||
.footer-links strong { margin-bottom: 8px; color: #fff; }
|
||||
.footer-links a { color: #aeb9d1; text-decoration: none; }
|
||||
.footer-links a:hover { color: #fff; }
|
||||
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 55px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); color: #7f8eaf; font-size: .78rem; }
|
||||
.footer-bottom span:last-child { max-width: 670px; text-align: right; }
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.hero-grid, .privacy-grid, .faq-layout { grid-template-columns: 1fr; }
|
||||
.hero { padding-top: 70px; }
|
||||
.hero-copy { max-width: 760px; }
|
||||
.hero-visual { max-width: 760px; min-height: 500px; }
|
||||
.feature-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.feature-card-large { grid-row: auto; min-height: 360px; }
|
||||
.feature-card-accent { grid-column: span 2; }
|
||||
.steps { grid-template-columns: 1fr; }
|
||||
.step-arrow { transform: rotate(90deg); justify-self: center; }
|
||||
.trust-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.trust-grid > div:nth-child(2) { border-right: 0; }
|
||||
.trust-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.container { width: min(calc(100% - 28px), var(--container)); }
|
||||
.site-nav { position: absolute; left: 14px; right: 14px; top: 68px; display: none; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 20px 45px rgba(8,35,108,.14); }
|
||||
.site-nav.open { display: grid; }
|
||||
.menu-button { display: block; }
|
||||
.hero { padding: 58px 0 66px; }
|
||||
.hero-copy h1 { font-size: clamp(2.85rem, 14vw, 4.5rem); }
|
||||
.hero-visual { min-height: auto; padding-top: 38px; }
|
||||
.browser-content { grid-template-columns: 84px 1fr; }
|
||||
.canvas-sidebar { padding-inline: 10px; }
|
||||
.canvas-page { padding: 20px 16px; }
|
||||
.hudra-panel { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 20px; }
|
||||
.floating-card { display: none; }
|
||||
.feature-grid { grid-template-columns: 1fr; }
|
||||
.feature-card, .feature-card-large { min-height: auto; }
|
||||
.feature-card-accent { grid-column: auto; flex-direction: column; align-items: flex-start; }
|
||||
.mini-ui { margin-top: 35px; }
|
||||
.section { padding: 78px 0; }
|
||||
.trust-grid { grid-template-columns: 1fr; }
|
||||
.trust-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
|
||||
.trust-grid > div:last-child { border-bottom: 0; }
|
||||
.cta-card { align-items: flex-start; flex-direction: column; padding: 38px 28px; }
|
||||
.footer-grid { grid-template-columns: 1fr; }
|
||||
.footer-bottom { flex-direction: column; }
|
||||
.footer-bottom span:last-child { text-align: left; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
|
||||
}
|
||||
|
||||
/* Hudra presenter dashboard preview */
|
||||
.presentation-window { transform: rotate(1deg); }
|
||||
.presenter-dashboard { min-height: 430px; padding: 16px; background: #eaf0fb; }
|
||||
.dashboard-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 10px 12px; color: #fff; border-radius: 12px; background: linear-gradient(135deg, var(--blue-800), var(--blue-950)); }
|
||||
.dashboard-brand { display: flex; align-items: center; gap: 9px; font-size: .82rem; }
|
||||
.dashboard-brand img { border-radius: 7px; }
|
||||
.dashboard-clock { font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 850; }
|
||||
.dashboard-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(145px, .65fr); gap: 13px; }
|
||||
.current-slide, .next-preview, .timer-card, .control-row { border: 1px solid #d2dcf2; border-radius: 13px; background: #fff; }
|
||||
.current-slide { padding: 12px; }
|
||||
.preview-label { display: block; margin-bottom: 8px; color: #65769b; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.slide-screen { aspect-ratio: 16 / 9; padding: 22px; overflow: hidden; border-radius: 9px; background: linear-gradient(145deg, #fff, #edf3ff); box-shadow: inset 0 0 0 1px #dce4f5; }
|
||||
.slide-kicker { color: var(--blue-700); font-size: .48rem; font-weight: 900; letter-spacing: .12em; }
|
||||
.slide-heading { width: 72%; height: 13px; margin-top: 13px; border-radius: 5px; background: var(--blue-950); }
|
||||
.slide-copy { width: 58%; height: 5px; margin-top: 8px; border-radius: 4px; background: #aab8d4; }
|
||||
.slide-copy.wide { width: 87%; margin-top: 14px; }
|
||||
.slide-image-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
|
||||
.slide-image-row span { aspect-ratio: 16 / 8; border-radius: 7px; background: linear-gradient(135deg, #bcd0ff, #dce7ff); }
|
||||
.presenter-sidebar { display: grid; gap: 10px; align-content: start; }
|
||||
.next-preview { padding: 10px; }
|
||||
.next-screen { aspect-ratio: 16 / 9; padding: 12px; border-radius: 8px; background: #f2f6ff; box-shadow: inset 0 0 0 1px #dce4f5; }
|
||||
.next-screen span { display: block; height: 5px; margin-bottom: 7px; border-radius: 4px; background: #afbedb; }
|
||||
.next-screen span:first-child { width: 70%; height: 8px; background: var(--blue-900); }
|
||||
.next-screen span:last-child { width: 55%; }
|
||||
.timer-card { display: flex; align-items: end; justify-content: space-between; padding: 13px; }
|
||||
.timer-card span { color: #65769b; font-size: .65rem; font-weight: 750; }
|
||||
.timer-card strong { color: var(--blue-800); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
|
||||
.control-row { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 7px; padding: 8px; }
|
||||
.control-row button { height: 30px; color: #fff; border: 0; border-radius: 8px; background: var(--blue-700); font-weight: 900; }
|
||||
.control-row span { color: #65769b; font-size: .7rem; font-weight: 800; text-align: center; }
|
||||
.presentation-mini-ui span { display: flex; justify-content: space-between; gap: 18px; }
|
||||
.presentation-mini-ui b { color: var(--blue-700); }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.presentation-window { transform: none; }
|
||||
.presenter-dashboard { min-height: 350px; padding: 10px; }
|
||||
.dashboard-main { grid-template-columns: 1fr; }
|
||||
.presenter-sidebar { grid-template-columns: 1fr 1fr; }
|
||||
.control-row { grid-column: 1 / -1; }
|
||||
.slide-screen { padding: 16px; }
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,318 @@
|
||||
<!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 HTML and QLearn lessons into polished classroom presentations with a presenter dashboard, dual-screen support, previews, timers and keyboard navigation.">
|
||||
|
||||
<title>Hudra — Present QLearn 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">
|
||||
<a class="brand" href="/hudra" aria-label="Hudra home">
|
||||
<img src="/img/HudraLogo48.png" width="48" height="48" alt="">
|
||||
<span>Hudra</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="#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://git.napper.au/mrnapper/hudra/releases">Download 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 lessons into <em>presentations.</em></h1>
|
||||
<p class="hero-lead">
|
||||
Hudra transforms HTML and QLearn lesson pages into a clean, classroom-ready slide experience—complete with presenter controls, previews, timers and dual-screen support.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions" id="install">
|
||||
<a class="button button-primary" href="https://git.napper.au/mrnapper/hudra/releases">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a1 1 0 0 1 1 1v9.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.42l2.3 2.3V4a1 1 0 0 1 1-1ZM5 19a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Z"/></svg>
|
||||
Download Hudra
|
||||
</a>
|
||||
<a class="button button-secondary" href="#features">See what it does</a>
|
||||
</div>
|
||||
|
||||
<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">qlearn.edu.au.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>Timer</span>
|
||||
<strong>08:35</strong>
|
||||
</div>
|
||||
<div class="control-row" aria-hidden="true">
|
||||
<button type="button">←</button>
|
||||
<span>4 / 12</span>
|
||||
<button type="button">→</button>
|
||||
</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>Timers, clock 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 QLearn or HTML, 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 a classroom timer.</p>
|
||||
<div class="mini-ui presentation-mini-ui">
|
||||
<span><b>Current</b> Lesson introduction</span>
|
||||
<span><b>Next</b> Learning intention</span>
|
||||
<span><b>Timer</b> 08:35</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>Download the latest release and load the extension in a Chromium-based browser.</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 QLearn or HTML lesson 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" 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 should only request 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 workflow.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-list">
|
||||
<details>
|
||||
<summary>What is Hudra?</summary>
|
||||
<p>Hudra is a browser extension that turns HTML and QLearn lessons into classroom presentations. It includes a presenter dashboard, current and next slide previews, timers, 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>The latest packaged release and installation instructions are available from the Hudra releases page.</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>QLearn content, without the QLearn clutter.</h2>
|
||||
<p>Turn the lesson you already made into a polished classroom presentation.</p>
|
||||
</div>
|
||||
<a class="button button-light" href="https://git.napper.au/mrnapper/hudra/releases">Download Hudra</a>
|
||||
</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 HTML and QLearn lessons.</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://git.napper.au/mrnapper/hudra/releases">Downloads</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>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!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="Privacy policy for the Hudra classroom presentation browser extension.">
|
||||
<title>Privacy Policy — Hudra</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="stylesheet" href="/css/hudra.css"><link rel="stylesheet" href="/css/hudra-legal.css">
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
<header class="site-header"><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><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="/hudra">Home</a><a href="/hudra/support">Help</a><a href="/hudra/terms">Terms</a><a class="nav-button" href="https://git.napper.au/mrnapper/hudra/releases">Download Hudra</a></nav></div></header>
|
||||
<main id="main">
|
||||
<section class="legal-hero"><div class="container"><div class="eyebrow"><span></span> Your data, clearly explained</div><h1>Privacy Policy</h1><p>This policy explains what Hudra accesses when it turns a lesson page into a classroom presentation.</p><div class="legal-meta"><span>Effective: 24 July 2026</span><span>Applies to: Hudra extension and website</span></div></div></section>
|
||||
<section class="legal-page"><div class="container legal-layout">
|
||||
<aside class="legal-nav" aria-label="Privacy policy contents"><strong>On this page</strong><a href="#summary">Summary</a><a href="#data">Data accessed</a><a href="#use">How data is used</a><a href="#storage">Storage and transmission</a><a href="#sharing">Sharing</a><a href="#limited-use">Limited Use</a><a href="#website">Website</a><a href="#security">Security</a><a href="#choices">Your choices</a><a href="#contact">Contact</a></aside>
|
||||
<article class="legal-content">
|
||||
<div class="notice-card"><strong>Plain-language promise</strong><p>Hudra's purpose is to turn a lesson already open in your browser into a classroom presentation. It does not sell user data, use lesson content for advertising, or build advertising profiles.</p></div>
|
||||
<section id="summary"><h2>1. Summary</h2><p>Hudra is a browser extension for presenting HTML and supported QLearn lesson pages. To provide that feature, it may process website content and page information visible in the supported tab. Hudra does not require a Hudra account.</p></section>
|
||||
<section id="data"><h2>2. Information Hudra may access</h2><table class="data-table"><thead><tr><th>Information</th><th>Purpose</th></tr></thead><tbody><tr><td>Visible lesson content and page structure</td><td>To divide the lesson into slides and display it in presentation and presenter views.</td></tr><tr><td>Page address and site context</td><td>To recognise a supported page on qlearn.edu.au.au and activate Hudra only where appropriate.</td></tr><tr><td>Extension preferences</td><td>To remember supported presentation settings on your device.</td></tr></tbody></table><p>Because QLearn pages can contain user-generated or student-related material, the page content Hudra processes may include personal information placed there by an authorised user. Hudra does not need that information for any purpose other than displaying the requested presentation.</p><p>Hudra does not seek access to passwords, payment information, authentication cookies, private messages or unrelated browsing history.</p></section>
|
||||
<section id="use"><h2>3. How information is used</h2><p>Information accessed by Hudra is used only to provide and support its disclosed presentation purpose, including recognising supported pages, generating slides, operating presenter controls, remembering local preferences, troubleshooting and protecting the extension's security.</p></section>
|
||||
<section id="storage"><h2>4. Storage, retention and transmission</h2><p>Hudra is designed to process lesson content locally in the browser. Hudra does not intentionally upload or retain lesson page content on Napper.au servers. Presentation preferences may be stored locally by the browser for as long as Hudra remains installed or until the data is cleared.</p><p>Email sent voluntarily to support@napper.au is transmitted through the sender's and recipient's email services and retained only as reasonably needed to respond, troubleshoot, maintain security or meet legal obligations. Do not include student records, passwords or private course content in support messages.</p></section>
|
||||
<section id="sharing"><h2>5. Sharing and sale of data</h2><p>Hudra does not sell user data. Hudra does not share lesson content with advertisers, data brokers or unrelated third parties. Information voluntarily included in a support request may be processed by the email and hosting providers needed to deliver and respond to that request, or disclosed where required by law.</p></section>
|
||||
<section id="limited-use"><h2>6. Chrome Web Store Limited Use</h2><p>Hudra's use of information received from Chrome APIs will comply with the Chrome Web Store User Data Policy, including the Limited Use requirements. Data is used only as necessary to provide Hudra's single, user-facing classroom presentation purpose and related security or support functions.</p></section>
|
||||
<section id="website"><h2>7. Hudra website</h2><p>The public Hudra website may receive ordinary server information needed to deliver a web page, such as an IP address, browser type, requested page and request time. This information may be present in short-term security or server logs. The website does not use that information to inspect QLearn lesson content.</p></section>
|
||||
<section id="security"><h2>8. Security</h2><p>Hudra uses a local-first design to minimise unnecessary transmission of lesson content. Users should install Hudra only from the official release location, keep their browser and Hudra updated, and report suspected security issues privately.</p></section>
|
||||
<section id="choices"><h2>9. Your choices and deletion</h2><p>You can prevent Hudra from accessing pages by disabling or uninstalling the extension. You may also clear extension data through your browser. To request deletion of information contained in a support email, contact support@napper.au and identify the relevant correspondence.</p></section>
|
||||
<section id="children"><h2>10. Children and educational information</h2><p>Hudra is intended for educators and other authorised users. It is not designed to collect information directly from children. Users remain responsible for complying with their organisation's policies, permissions and applicable privacy requirements when presenting educational content.</p></section>
|
||||
<section id="changes"><h2>11. Changes to this policy</h2><p>This policy may be updated when Hudra's features, permissions or data practices change. The effective date will be revised and material changes will be communicated through the website, release information, extension listing or extension interface where appropriate.</p></section>
|
||||
<section id="contact"><h2>12. Contact</h2><p>Privacy questions, deletion requests and security reports can be sent to:</p><p class="code-note"><a href="mailto:support@napper.au?subject=Hudra%20privacy%20enquiry">support@napper.au</a><br>Napper.au, Queensland, Australia</p><p>General troubleshooting is available on the <a class="text-link" href="/hudra/support">Hudra support page <span>→</span></a>.</p></section>
|
||||
</article></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 HTML and QLearn lessons.</p><small>Part of <a href="/">napper.au</a></small></div><div class="footer-links"><div><strong>Hudra</strong><a href="/hudra">Home</a><a href="/hudra/support">Help</a><a href="https://git.napper.au/mrnapper/hudra/releases">Releases</a></div><div><strong>Legal</strong><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>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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="Installation help, presentation guidance, troubleshooting and support for the Hudra browser extension.">
|
||||
<title>Help and Support — Hudra</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="stylesheet" href="/css/hudra.css">
|
||||
<link rel="stylesheet" href="/css/hudra-legal.css">
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
<header class="site-header"><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>
|
||||
<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="/hudra">Home</a><a href="/hudra/privacy">Privacy</a><a href="/hudra/terms">Terms</a><a class="nav-button" href="https://git.napper.au/mrnapper/hudra/releases">Download Hudra</a></nav>
|
||||
</div></header>
|
||||
|
||||
<main id="main">
|
||||
<section class="legal-hero"><div class="container">
|
||||
<div class="eyebrow"><span></span> Help when you need it</div>
|
||||
<h1>Hudra support</h1>
|
||||
<p>Install Hudra, prepare a QLearn lesson for presentation, troubleshoot common issues or report a bug.</p>
|
||||
</div></section>
|
||||
|
||||
<section class="legal-page"><div class="container legal-layout">
|
||||
<aside class="legal-nav" aria-label="Support contents"><strong>On this page</strong><a href="#install">Install</a><a href="#present">Start presenting</a><a href="#troubleshooting">Troubleshooting</a><a href="#report">Report a problem</a><a href="#permissions">Permissions</a><a href="#remove">Uninstall</a><a href="#contact">Contact</a></aside>
|
||||
<article class="legal-content">
|
||||
<div class="notice-card"><strong>Hudra is an independent project</strong><p>Hudra is not an official Queensland Department of Education or Instructure product. Use it only where your organisation permits browser extensions.</p></div>
|
||||
|
||||
<section id="install"><h2>1. Install Hudra</h2><p>The latest Hudra package and release notes are published on the official releases page.</p><p><a class="button button-primary" href="https://git.napper.au/mrnapper/hudra/releases">Open Hudra releases</a></p><ol><li>Download the latest Hudra release.</li><li>Follow the installation instructions included with that release.</li><li>Confirm Hudra is enabled on your browser's extensions page.</li><li>Open or refresh the QLearn lesson you want to present.</li></ol><p>Hudra currently targets Chromium-based browsers such as Google Chrome and Microsoft Edge.</p></section>
|
||||
|
||||
<section id="present"><h2>2. Start a presentation</h2><ol><li>Open the lesson page on <strong>qlearn.edu.au.au</strong>.</li><li>Launch Hudra from its extension control or the presentation option provided on the page.</li><li>Choose the presentation or presenter view.</li><li>Move through the lesson using Hudra's on-screen controls or supported keyboard controls.</li><li>Use dual-screen mode when you want presenter controls on your screen and clean slides on the classroom display.</li></ol><p>Hudra presents the lesson content already on the page. It is not a replacement for the QLearn page editor.</p></section>
|
||||
|
||||
<section id="troubleshooting"><h2>3. Quick troubleshooting</h2><h3>Hudra does not appear</h3><ul><li>Check that the extension is enabled.</li><li>Refresh the QLearn page after installing or updating Hudra.</li><li>Confirm the page is on the supported QLearn site.</li><li>Try closing and reopening the browser.</li></ul><h3>The presentation opens incorrectly</h3><ul><li>Check that the lesson uses clear heading-based sections or the structure expected by Hudra.</li><li>Reload the lesson and launch Hudra again.</li><li>Test with other browser extensions temporarily disabled.</li><li>Update to the latest Hudra release and the latest stable version of your browser.</li></ul><h3>Dual-screen view is not working</h3><ul><li>Confirm the second display is connected and set to extend rather than duplicate.</li><li>Allow any presentation window or pop-up requested directly by Hudra.</li><li>Move the audience presentation window to the classroom display and keep the presenter dashboard on your main screen.</li></ul></section>
|
||||
|
||||
<section id="report"><h2>4. Report a problem</h2><p>A useful bug report includes the Hudra version, browser name and version, page type, steps to reproduce the issue, and what you expected to happen. Screenshots are helpful, but remove student names, personal information and private course content first.</p><p><a class="button button-primary" href="mailto:support@napper.au?subject=Hudra%20bug%20report&body=Hudra%20version%3A%0ABrowser%20and%20version%3A%0AQLearn%20page%20type%3A%0ASteps%20to%20reproduce%3A%0AExpected%20result%3A%0AActual%20result%3A">Create a bug report email</a></p></section>
|
||||
|
||||
<section id="permissions"><h2>5. Why Hudra needs browser permissions</h2><p>Hudra needs access to supported QLearn pages so it can read the visible lesson structure and turn that content into a presentation when you ask it to. Browser permission wording can sound broad because Chrome groups related page-access capabilities together.</p><p>Hudra should request only the permissions needed for its presentation purpose. See the <a class="text-link" href="/hudra/privacy">privacy policy <span>→</span></a> for further information.</p></section>
|
||||
|
||||
<section id="remove"><h2>6. Disable or uninstall Hudra</h2><ol><li>Open your browser's extensions page.</li><li>Find Hudra.</li><li>Turn it off to disable it temporarily, or choose <strong>Remove</strong> to uninstall it.</li></ol><p>Removing Hudra also removes its locally stored extension data according to your browser's behaviour.</p></section>
|
||||
|
||||
<section id="contact"><h2>7. Contact and security reports</h2><div class="contact-options"><a class="contact-card" href="mailto:support@napper.au?subject=Hudra%20support"><strong>Email support</strong><span>support@napper.au</span></a><a class="contact-card" href="mailto:support@napper.au?subject=Hudra%20feature%20suggestion"><strong>Suggest a feature</strong><span>Share a presentation workflow Hudra could improve</span></a></div><p>Do not send passwords, authentication details, student records or private lesson content. Suspected security vulnerabilities should be reported privately with the subject “Hudra security report”.</p></section>
|
||||
</article>
|
||||
</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 HTML and QLearn lessons.</p><small>Part of <a href="/">napper.au</a></small></div><div class="footer-links"><div><strong>Hudra</strong><a href="/hudra">Home</a><a href="/hudra/support">Help</a><a href="https://git.napper.au/mrnapper/hudra/releases">Releases</a></div><div><strong>Legal</strong><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>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!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="Terms of use for the Hudra classroom presentation browser extension.">
|
||||
<title>Terms of Use — Hudra</title>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/HudraLogo32.png"><link rel="stylesheet" href="/css/hudra.css"><link rel="stylesheet" href="/css/hudra-legal.css">
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
<header class="site-header"><div class="container header-inner"><a class="brand" href="/hudra"><img src="/img/HudraLogo48.png" width="48" height="48" alt=""><span>Hudra</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="/hudra">Home</a><a href="/hudra/support">Help</a><a href="/hudra/privacy">Privacy</a><a class="nav-button" href="https://git.napper.au/mrnapper/hudra/releases">Download Hudra</a></nav></div></header>
|
||||
<main id="main">
|
||||
<section class="legal-hero"><div class="container"><div class="eyebrow"><span></span> The rules for using Hudra</div><h1>Terms of Use</h1><p>These terms apply when you download, install or use Hudra.</p><div class="legal-meta"><span>Effective: 24 July 2026</span><span>Governing location: Queensland, Australia</span></div></div></section>
|
||||
<section class="legal-page"><div class="container legal-layout">
|
||||
<aside class="legal-nav" aria-label="Terms contents"><strong>On this page</strong><a href="#acceptance">Acceptance</a><a href="#service">Hudra</a><a href="#authorised-use">Acceptable use</a><a href="#content">Lesson content</a><a href="#review">Presentation review</a><a href="#availability">Availability</a><a href="#warranty">Disclaimers</a><a href="#liability">Liability</a><a href="#third-parties">Third parties</a><a href="#termination">Termination</a><a href="#contact">Contact</a></aside>
|
||||
<article class="legal-content">
|
||||
<div class="notice-card"><strong>Review before presenting</strong><p>Hudra automatically interprets page structure. You remain responsible for checking slide order, readability, accessibility, media, links and suitability before showing a lesson to students.</p></div>
|
||||
<section id="acceptance"><h2>1. Acceptance</h2><p>By downloading, installing or using Hudra, you agree to these Terms of Use and the Hudra Privacy Policy. If you do not agree, do not use Hudra.</p></section>
|
||||
<section id="service"><h2>2. The Hudra service</h2><p>Hudra is an independently developed browser extension that turns supported HTML and QLearn lesson pages into classroom presentations. It may provide a presenter dashboard, current and next slide previews, navigation controls, timing tools and dual-screen presentation features. Features may change between releases.</p></section>
|
||||
<section id="authorised-use"><h2>3. Authorised and acceptable use</h2><p>You may use Hudra only where you are authorised to access and present the relevant website and content. You must not use Hudra to:</p><ul><li>access another person's account or restricted content without permission;</li><li>circumvent security, permissions or organisational controls;</li><li>introduce malicious code or interfere with a browser, website or service;</li><li>violate law, privacy obligations, intellectual-property rights or organisational policies;</li><li>present content you are not authorised to display; or</li><li>misrepresent Hudra as an official product of Instructure, the Queensland Department of Education or an educational institution.</li></ul></section>
|
||||
<section id="content"><h2>4. Your lesson content</h2><p>You retain ownership of content you create or are otherwise entitled to use. Hudra does not obtain ownership of lesson materials merely because it processes them for presentation. You are responsible for permissions, copyright, privacy, accuracy and the appropriateness of all content you present.</p></section>
|
||||
<section id="review"><h2>5. Your presentation responsibilities</h2><p>Automatic conversion may not perfectly interpret every page. Before presenting, check slide boundaries, hidden material, embedded media, links, image scaling, contrast, accessibility and any personal or student information visible on screen. Maintain appropriate source copies or backups of important lesson content.</p></section>
|
||||
<section id="availability"><h2>6. Availability and compatibility</h2><p>Hudra is provided on an “as available” basis. QLearn, Canvas, browsers, school networks and institutional configurations may change without notice and may affect Hudra. Compatibility, support and uninterrupted operation are not guaranteed.</p></section>
|
||||
<section id="warranty"><h2>7. Disclaimers</h2><p>To the maximum extent permitted by law, Hudra is provided without warranties of accuracy, fitness for a particular purpose, non-infringement, compatibility or error-free operation. Nothing in these terms excludes rights or guarantees that cannot lawfully be excluded, including rights that may apply under the Australian Consumer Law.</p></section>
|
||||
<section id="liability"><h2>8. Limitation of liability</h2><p>To the maximum extent permitted by law, Napper.au will not be liable for indirect, incidental, special or consequential loss arising from Hudra, including loss of data, lesson access, presentation time, opportunity or productivity. Where liability cannot be excluded, it is limited to the minimum remedy permitted by applicable law.</p></section>
|
||||
<section id="third-parties"><h2>9. Third-party platforms and names</h2><p>Hudra interacts with third-party services, including QLearn and Canvas. Those services are governed by their own terms, policies and availability. Hudra 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 names and marks belong to their respective owners.</p></section>
|
||||
<section id="updates"><h2>10. Updates and distribution</h2><p>Use an authorised Hudra release and review release notes before updating. Hudra may be updated, replaced, suspended or discontinued. You are responsible for determining whether installation of a browser extension is permitted on your device or network.</p></section>
|
||||
<section id="termination"><h2>11. Ending use</h2><p>You may stop using Hudra at any time by disabling or uninstalling it. Distribution or access may be suspended where reasonably necessary to protect security, comply with law, address misuse or discontinue the project.</p></section>
|
||||
<section id="changes"><h2>12. Changes to these terms</h2><p>These terms may be updated as Hudra develops. The effective date will be revised when changes are published. Continued use after revised terms become effective constitutes acceptance to the extent permitted by law.</p></section>
|
||||
<section id="contact"><h2>13. Governing law and contact</h2><p>These terms are governed by the laws of Queensland, Australia, and applicable Commonwealth laws. Questions can be sent to:</p><p class="code-note"><a href="mailto:support@napper.au?subject=Hudra%20terms%20enquiry">support@napper.au</a><br>Napper.au, Queensland, Australia</p></section>
|
||||
</article></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 HTML and QLearn lessons.</p><small>Part of <a href="/">napper.au</a></small></div><div class="footer-links"><div><strong>Hudra</strong><a href="/hudra">Home</a><a href="/hudra/support">Help</a><a href="https://git.napper.au/mrnapper/hudra/releases">Releases</a></div><div><strong>Legal</strong><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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
+168
@@ -0,0 +1,168 @@
|
||||
<!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="32x32" href="/img/HudraLogo32.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">
|
||||
<span class="brand-mark" aria-hidden="true">N</span>
|
||||
<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/mrnapper">Source</a>
|
||||
<a class="nav-button" href="/hudra">Explore 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> 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">
|
||||
<article class="stack-card stack-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>
|
||||
</article>
|
||||
<article class="stack-card stack-lildra">
|
||||
<div class="product-glyph" aria-hidden="true">Li</div>
|
||||
<div><span class="status status-next">Up next</span><h2>Lildra</h2><p>Strip away QLearn clutter and show only the lesson page content.</p></div>
|
||||
</article>
|
||||
<article class="stack-card stack-pendra">
|
||||
<div class="product-glyph" aria-hidden="true">Pe</div>
|
||||
<div><span class="status">Planned</span><h2>Pendra</h2><p>Bring completed slide decks into QLearn more easily.</p></div>
|
||||
</article>
|
||||
</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>Hudra is available now. Lildra is the next product in development, with Pendra planned after it.</p>
|
||||
</div>
|
||||
|
||||
<div class="product-grid">
|
||||
<article class="product-card product-card-featured">
|
||||
<div class="product-card-top">
|
||||
<img src="/img/HudraLogo128.png" width="84" height="84" alt="Hudra logo">
|
||||
<span class="status status-live">Available now</span>
|
||||
</div>
|
||||
<h3>Hudra</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://git.napper.au/mrnapper/hudra/releases">Releases <span>→</span></a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card">
|
||||
<div class="product-card-top">
|
||||
<div class="product-glyph large" aria-hidden="true">Li</div>
|
||||
<span class="status status-next">In development</span>
|
||||
</div>
|
||||
<h3>Lildra</h3>
|
||||
<p class="product-tagline">QLearn content, without the QLearn clutter.</p>
|
||||
<p>Lildra is a cut-down companion to Hudra. It removes the surrounding QLearn interface and keeps the lesson page content front and centre.</p>
|
||||
<p class="availability">Product page and release details coming next.</p>
|
||||
</article>
|
||||
|
||||
<article class="product-card">
|
||||
<div class="product-card-top">
|
||||
<div class="product-glyph large muted" aria-hidden="true">Pe</div>
|
||||
<span class="status">Planned</span>
|
||||
</div>
|
||||
<h3>Pendra</h3>
|
||||
<p class="product-tagline">A simpler path from slides to QLearn.</p>
|
||||
<p>Pendra is planned as a tool for bringing completed presentation slides into QLearn pages without rebuilding them one image at a time.</p>
|
||||
<p class="availability">Planned after Lildra.</p>
|
||||
</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="/"><span class="brand-mark" aria-hidden="true">N</span><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><span>Lildra — in development</span><span>Pendra — planned</span></div>
|
||||
<div><strong>Resources</strong><a href="https://git.napper.au/mrnapper">Source</a><a href="/hudra/support">Hudra support</a><a href="/hudra/privacy">Hudra privacy</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>
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
const menuButton = document.querySelector('.menu-button');
|
||||
const siteNav = document.querySelector('.site-nav');
|
||||
|
||||
if (menuButton && siteNav) {
|
||||
menuButton.addEventListener('click', () => {
|
||||
const isOpen = siteNav.classList.toggle('open');
|
||||
menuButton.setAttribute('aria-expanded', String(isOpen));
|
||||
});
|
||||
|
||||
siteNav.querySelectorAll('a').forEach((link) => {
|
||||
link.addEventListener('click', () => {
|
||||
siteNav.classList.remove('open');
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const year = document.getElementById('year');
|
||||
if (year) year.textContent = new Date().getFullYear();
|
||||
@@ -0,0 +1,19 @@
|
||||
const menuButton = document.querySelector('.menu-button');
|
||||
const navigation = document.querySelector('#site-nav');
|
||||
|
||||
if (menuButton && navigation) {
|
||||
menuButton.addEventListener('click', () => {
|
||||
const isOpen = navigation.classList.toggle('open');
|
||||
menuButton.setAttribute('aria-expanded', String(isOpen));
|
||||
});
|
||||
|
||||
navigation.querySelectorAll('a').forEach((link) => {
|
||||
link.addEventListener('click', () => {
|
||||
navigation.classList.remove('open');
|
||||
menuButton.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const year = document.querySelector('#year');
|
||||
if (year) year.textContent = new Date().getFullYear();
|
||||
Reference in New Issue
Block a user