Presenter dashboard
+Control the lesson from a dedicated dashboard with current and next slide previews, slide position, a clock and a classroom timer.
+diff --git a/docs/.gitignore b/.gitignore similarity index 100% rename from docs/.gitignore rename to .gitignore diff --git a/css/hudra-legal.css b/css/hudra-legal.css new file mode 100644 index 0000000..f867c4c --- /dev/null +++ b/css/hudra-legal.css @@ -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; } +} diff --git a/css/hudra.css b/css/hudra.css new file mode 100644 index 0000000..fe78f30 --- /dev/null +++ b/css/hudra.css @@ -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; } +} diff --git a/css/napper.css b/css/napper.css new file mode 100644 index 0000000..fe3f9c7 --- /dev/null +++ b/css/napper.css @@ -0,0 +1,5 @@ +:root{--blue-950:#071b4f;--blue-900:#0a286f;--blue-800:#0b399e;--blue-700:#0b45d8;--blue-600:#2462ee;--blue-100:#dce8ff;--blue-50:#f2f6ff;--ink:#10182b;--muted:#61708e;--line:#dce3ef;--soft:#f6f8fc;--white:#fff;--container:1180px;--radius-lg:24px;--radius-xl:34px;--shadow:0 24px 70px rgba(8,35,108,.13)} +*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}.container{width:min(calc(100% - 42px),var(--container));margin-inline:auto}.skip-link{position:absolute;left:-9999px;top:10px;z-index:999;padding:10px 14px;background:#fff}.skip-link:focus{left:10px}.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}.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(220,227,239,.85);background:rgba(255,255,255,.88);backdrop-filter:blur(16px)}.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--blue-950);font-size:1.18rem;font-weight:900;text-decoration:none;letter-spacing:-.03em}.brand-mark{width:42px;height:42px;display:grid;place-items:center;color:#fff;border-radius:13px;background:linear-gradient(145deg,var(--blue-600),var(--blue-950));box-shadow:0 10px 24px rgba(11,69,216,.22)}.site-nav{display:flex;align-items:center;gap:28px}.site-nav a{color:#3b4966;font-size:.93rem;font-weight:750;text-decoration:none}.site-nav a:hover{color:var(--blue-700)}.nav-button{padding:10px 17px;color:#fff!important;border-radius:11px;background:var(--blue-700)}.menu-button{display:none;width:44px;height:44px;padding:10px;border:0;background:transparent}.menu-button span:not(.sr-only){display:block;height:2px;margin:5px 0;background:var(--blue-950)}.hero{position:relative;overflow:hidden;padding:105px 0 96px;background:linear-gradient(180deg,#fff 0%,#f7f9ff 100%)}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:75px;align-items:center}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--blue-700);font-size:.76rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.eyebrow>span{width:26px;height:2px;background:currentColor}.hero h1,.section-heading h2,.approach-grid h2,.cta-card h2{margin:18px 0 0;color:var(--blue-950);font-size:clamp(3.5rem,6.7vw,6.4rem);line-height:.98;letter-spacing:-.065em}.hero h1 em{color:var(--blue-700);font-style:normal}.hero-lead{max-width:680px;margin:27px 0 0;color:var(--muted);font-size:1.16rem}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:13px;font-weight:850;text-decoration:none}.button-primary{color:#fff;background:var(--blue-700);box-shadow:0 14px 30px rgba(11,69,216,.2)}.button-primary:hover{background:var(--blue-800)}.button-secondary{color:var(--blue-900);border-color:#ccd7ef;background:#fff}.microcopy{margin-top:19px;color:#8490a9;font-size:.82rem}.hero-visual{position:relative;min-height:500px}.product-stack{position:relative;height:500px}.stack-card{position:absolute;width:min(100%,480px);display:grid;grid-template-columns:auto 1fr;gap:19px;align-items:center;padding:25px;border:1px solid #d9e1f0;border-radius:25px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.stack-card h2{margin:3px 0 0;color:var(--blue-950);font-size:1.55rem;letter-spacing:-.04em}.stack-card p{margin:4px 0 0;color:var(--muted);font-size:.9rem}.stack-card img{border-radius:18px}.stack-hudra{right:15px;top:15px;z-index:3;transform:rotate(1.8deg)}.stack-lildra{left:0;top:178px;z-index:2;transform:rotate(-2deg)}.stack-pendra{right:20px;top:342px;z-index:1;opacity:.82;transform:rotate(1deg)}.product-glyph{width:66px;height:66px;display:grid;place-items:center;color:#fff;border-radius:18px;background:linear-gradient(145deg,#7558e8,#34206e);font-size:1.15rem;font-weight:950}.product-glyph.muted{background:linear-gradient(145deg,#4d8aa8,#24445d)}.product-glyph.large{width:84px;height:84px;border-radius:22px;font-size:1.4rem}.status{display:inline-flex;padding:4px 9px;color:#66738d;border:1px solid #d9e0eb;border-radius:999px;background:#f7f8fb;font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.status-live{color:#086c45;border-color:#b8e3d1;background:#eaf9f2}.status-next{color:#5738a4;border-color:#d8cef7;background:#f2efff}.hero-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.22}.hero-glow-one{width:370px;height:370px;right:-100px;top:20px;background:#2d68ff}.hero-glow-two{width:280px;height:280px;left:38%;bottom:-160px;background:#8e75ff}.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:.94rem}.trust-grid span{color:var(--muted);font-size:.79rem}.section{padding:108px 0}.section-soft{background:var(--soft)}.section-heading{max-width:760px;margin-bottom:50px}.section-heading h2,.approach-grid h2,.cta-card h2{font-size:clamp(2.5rem,4.9vw,4.5rem)}.section-heading p,.approach-lead{margin:22px 0 0;color:var(--muted);font-size:1.08rem}.product-grid{display:grid;grid-template-columns:1.12fr .94fr .94fr;gap:20px}.product-card{min-height:520px;padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:0 14px 36px rgba(19,37,81,.06)}.product-card-featured{background:linear-gradient(155deg,#fff,#eff4ff)}.product-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.product-card h3{margin:34px 0 0;color:var(--blue-950);font-size:2.1rem;letter-spacing:-.05em}.product-card p{color:var(--muted)}.product-tagline{margin:3px 0 22px!important;color:var(--blue-800)!important;font-size:1.05rem;font-weight:850}.availability{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:.85rem;font-weight:750}.card-actions{display:flex;align-items:center;gap:20px;margin-top:35px}.text-link{color:var(--blue-700);font-weight:850;text-decoration:none}.approach-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}.principles{display:grid;gap:16px}.principles article{display:grid;grid-template-columns:54px 1fr;gap:19px;padding:25px;border:1px solid var(--line);border-radius:18px;background:#fff}.principles article>span{width:44px;height:44px;display:grid;place-items:center;color:var(--blue-700);border-radius:13px;background:var(--blue-50);font-size:.78rem;font-weight:950}.principles h3{margin:0;color:var(--blue-950);font-size:1.2rem}.principles p{margin:4px 0 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{color:#fff}.cta-card p{margin:16px 0 0;color:rgba(255,255,255,.78)}.eyebrow.light{color:#bcd0ff}.button-light{color:var(--blue-900);background:#fff}.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-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 span{color:#7482a3}.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} +@media(max-width:980px){.hero-grid,.approach-grid{grid-template-columns:1fr}.hero-copy{max-width:800px}.hero-visual{max-width:760px}.product-grid{grid-template-columns:1fr 1fr}.product-card-featured{grid-column:span 2}.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:64px 0}.hero h1{font-size:clamp(3rem,15vw,4.8rem)}.hero-visual,.product-stack{min-height:620px;height:620px}.stack-card{width:94%;transform:none}.stack-hudra{right:0}.stack-lildra{left:0;top:210px}.stack-pendra{right:0;top:405px}.trust-grid,.product-grid{grid-template-columns:1fr}.trust-grid>div{border-right:0;border-bottom:1px solid var(--line)}.product-card-featured{grid-column:auto}.product-card{min-height:auto}.section{padding:78px 0}.cta-card{align-items:flex-start;flex-direction:column;padding:38px 28px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.card-actions{align-items:flex-start;flex-direction:column}} +@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}} diff --git a/hudra/index.html b/hudra/index.html new file mode 100644 index 0000000..38ede23 --- /dev/null +++ b/hudra/index.html @@ -0,0 +1,318 @@ + + +
+ + + + + ++ Hudra transforms HTML and QLearn lesson pages into a clean, classroom-ready slide experience—complete with presenter controls, previews, timers and dual-screen support. +
+ + + +Free to use · Chromium browsers · Built by an Australian educator
+Keep your lesson content in QLearn or HTML, then use Hudra to present it as a focused, navigable classroom experience.
+Control the lesson from a dedicated dashboard with current and next slide previews, slide position, a clock and a classroom timer.
+Keep presenter controls on your screen while students see a clean, distraction-free presentation.
+Move through a lesson quickly using familiar keyboard controls while keeping your attention on the class.
+Image-only slides are recognised and displayed to make better use of the presentation area.
+
+ Hudra does not replace QLearn with another editor. It gives your existing lesson content a purpose-built presentation mode.
+Hudra works with the content you already have instead of asking you to rebuild it in a separate slide platform.
+Download the latest release and load the extension in a Chromium-based browser.
+Navigate to the QLearn or HTML lesson you want to present.
+Use Hudra's dashboard to present, navigate and manage the lesson in class.
+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.
+ Read Hudra's privacy policy → +Hudra is not supported by behavioural advertising.
Your information is not a product.
Hudra should only request access needed to provide its presentation features.
The essentials about Hudra and how it fits into a QLearn workflow.
+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.
+No. Hudra is focused on presenting lesson content you have already created. It adds a classroom presentation system rather than replacing QLearn's editor.
+No. Hudra is an independent project and is not endorsed by or affiliated with the Queensland Department of Education or Instructure.
+Hudra currently targets Chromium-based browsers such as Google Chrome and Microsoft Edge.
+The latest packaged release and installation instructions are available from the Hudra releases page.
+Turn the lesson you already made into a polished classroom presentation.
+This policy explains what Hudra accesses when it turns a lesson page into a classroom presentation.
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.
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.
| Information | Purpose |
|---|---|
| Visible lesson content and page structure | To divide the lesson into slides and display it in presentation and presenter views. |
| Page address and site context | To recognise a supported page on qlearn.edu.au.au and activate Hudra only where appropriate. |
| Extension preferences | To remember supported presentation settings on your device. |
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.
Hudra does not seek access to passwords, payment information, authentication cookies, private messages or unrelated browsing history.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Privacy questions, deletion requests and security reports can be sent to:
support@napper.au
Napper.au, Queensland, Australia
General troubleshooting is available on the Hudra support page →.
Install Hudra, prepare a QLearn lesson for presentation, troubleshoot common issues or report a bug.
+Hudra is not an official Queensland Department of Education or Instructure product. Use it only where your organisation permits browser extensions.
The latest Hudra package and release notes are published on the official releases page.
Hudra currently targets Chromium-based browsers such as Google Chrome and Microsoft Edge.
Hudra presents the lesson content already on the page. It is not a replacement for the QLearn page editor.
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.
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.
Hudra should request only the permissions needed for its presentation purpose. See the privacy policy → for further information.
Removing Hudra also removes its locally stored extension data according to your browser's behaviour.
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”.
These terms apply when you download, install or use Hudra.
Hudra automatically interprets page structure. You remain responsible for checking slide order, readability, accessibility, media, links and suitability before showing a lesson to students.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
These terms are governed by the laws of Queensland, Australia, and applicable Commonwealth laws. Questions can be sent to:
support@napper.au
Napper.au, Queensland, Australia
Napper creates focused browser tools that remove clutter, improve presentation and help teachers get more from the lesson content they already have.
+Independent · Practical · Privacy-conscious
+
+ Turn lesson pages into a classroom presentation system.
Strip away QLearn clutter and show only the lesson page content.
Bring completed slide decks into QLearn more easily.
Hudra is available now. Lildra is the next product in development, with Pendra planned after it.
+
+ Available now
+ Present QLearn lessons beautifully.
+Hudra turns existing lesson pages into a clean slide experience with presenter controls, previews, timers and dual-screen support.
+QLearn content, without the QLearn clutter.
+Lildra is a cut-down companion to Hudra. It removes the surrounding QLearn interface and keeps the lesson page content front and centre.
+Product page and release details coming next.
+A simpler path from slides to QLearn.
+Pendra is planned as a tool for bringing completed presentation slides into QLearn pages without rebuilding them one image at a time.
+Planned after Lildra.
+Napper products are designed around a simple idea: teachers should not have to rebuild good content just to make it easier to use.
+A narrow purpose is a feature, not a limitation.
Products work alongside the tools educators already use.
Clear behaviour, clear privacy information and accessible releases.
Turn an existing QLearn lesson page into a cleaner classroom presentation.