teach/public/index.html
Ramon a20779e602
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 37s
v0.3.08-beta: breid widgetbibliotheek uit
- voeg acht educatieve en klaswidgets toe\n- verbeter galerij met zoeken, favorieten en lessjablonen\n- voeg dupliceren, vergrendelen en voorbeeldweergave toe\n- voeg geschiedenis en begrensde bordexport/import toe\n- verbeter responsiviteit, toegankelijkheid en vertalingen
2026-07-14 14:16:49 +02:00

254 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>teachus.today</title>
<link rel="icon" type="image/svg+xml" href="img/logo.svg">
<link rel="preload" href="fonts/quicksand.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="css/teach.css">
</head>
<body>
<div id="toolbar">
<div class="logo" title="teachus.today">
<img class="logo-owl" src="img/logo.svg" alt="teachus.today">
<span class="logo-word"><span class="lw-teach">teach</span><span class="lw-us">us</span><span class="lw-dot">.</span><span class="lw-today">today</span></span>
</div>
<button class="tbtn ghost" id="btnMute">🔊</button>
<button class="tbtn ghost" id="btnZoomOut">A</button>
<button class="tbtn ghost" id="zoomPct">100%</button>
<button class="tbtn ghost" id="btnZoomIn">A</button>
<div class="spacer"></div>
<button class="tbtn ghost" id="btnFolders">📁</button>
<button class="tbtn ghost" id="btnSave">💾 <span data-i18n="saveBoard"></span></button>
<button class="tbtn ghost" id="btnUser">⚙️ <span id="userLbl"></span></button>
<button class="tbtn ghost" id="btnFs" title="Fullscreen"></button>
</div>
<div id="board"></div>
<div id="pupilView"></div>
<button id="fab"></button>
<button id="fabBoardsBtn">🗂</button>
<div id="boardStrip"></div>
<div id="boardsPanel"></div>
<div id="fabmenu">
<button class="fab-item" data-f="widgets"><span class="fi">🧩</span><span class="fl"></span></button>
<button class="fab-item" data-f="draw"><span class="fi">✏️</span><span class="fl"></span></button>
<button class="fab-item" data-f="mind"><span class="fi">🕸️</span><span class="fl"></span></button>
<button class="fab-item" data-f="img"><span class="fi">🖼️</span><span class="fl"></span></button>
</div>
<div id="hud">
<div class="pen-grip"></div>
<button class="hud-btn hud-orient"></button>
<button class="hud-btn hud-min"></button>
<div id="penbar">
<div class="pen-picker" data-picker="tools">
<button class="pen-current" type="button" aria-expanded="false"><span class="pen-current-value">✏️</span><span class="pen-caret"></span></button>
<div class="wp-group pen-tools pen-popover"></div>
</div>
<div class="pen-picker" data-picker="colors">
<button class="pen-current" type="button" aria-expanded="false"><i class="pen-current-color"></i><span class="pen-caret"></span></button>
<div class="pen-popover pen-color-popover">
<div class="pen-pop-label pen-recent-label"></div>
<div class="wp-group pen-recent"></div>
<div class="pen-pop-label pen-palette-label"></div>
<div class="wp-group pen-colors"></div>
<label class="pen-custom"><span class="pen-custom-label"></span><input type="color" value="#26344a"></label>
</div>
</div>
<div class="pen-picker" data-picker="sizes">
<button class="pen-current" type="button" aria-expanded="false"><i class="pen-current-size"></i><span class="pen-caret"></span></button>
<div class="wp-group pen-sizes pen-popover"></div>
</div>
<div class="pen-picker" data-picker="backgrounds">
<button class="pen-current" type="button" aria-expanded="false"><i class="pen-current-bg"></i><span class="pen-caret"></span></button>
<div class="wp-group pen-bgs pen-popover"></div>
</div>
<div class="pen-picker" data-picker="extras">
<button class="pen-current" type="button" aria-expanded="false"><span class="pen-current-value">•••</span><span class="pen-caret"></span></button>
<div class="wp-group pen-extras pen-popover"></div>
</div>
<button class="wp-clear pen-clear">🗑</button>
<button class="wp-clear pen-close"></button>
</div>
<div class="hud-div"></div>
<div id="dock"></div>
</div>
<div class="modalwrap" id="galleryWrap" role="dialog" aria-modal="true" aria-labelledby="galleryTitle">
<div class="modal">
<div class="gallery-head"><h2 id="galleryTitle" data-i18n="chooseWidget"></h2><button class="wclose gallery-close" type="button"></button></div>
<div class="gallery-tools"><input id="gallerySearch" type="search" autocomplete="off"><button id="galleryFavOnly" class="tbtn ghost" type="button"></button></div>
<div id="galleryTemplates"></div>
<div class="gallery-data"><button id="boardUndo" class="tbtn ghost" type="button"></button><button id="boardRedo" class="tbtn ghost" type="button"></button><button id="boardExport" class="tbtn ghost" type="button"></button><button id="boardImport" class="tbtn ghost" type="button"></button></div>
<div id="gallery"></div>
</div>
</div>
<div class="modalwrap" id="loginWrap">
<div class="modal" id="loginModal">
<div class="login-logo">
<img class="logo-owl" src="img/logo.svg" alt="">
<span class="logo-word"><span class="lw-teach">teach</span><span class="lw-us">us</span><span class="lw-dot">.</span><span class="lw-today">today</span></span>
</div>
<div class="ed-tabs">
<button type="button" class="active" data-tab="login" data-i18n="tabLogin"></button>
<button type="button" data-tab="link" data-i18n="tabLinkCode"></button>
</div>
<div id="loginBox">
<select id="liSchool"></select>
<input type="text" id="liName" maxlength="30" autocomplete="username">
<input type="password" id="liPass" maxlength="64" autocomplete="current-password">
<div id="loginMsg" class="formMsg"></div>
<div class="lrow">
<button class="tbtn" id="btnLogin" data-i18n="loginBtn"></button>
</div>
</div>
<div id="linkBox" style="display:none;">
<div class="lisub" data-i18n="linkIntro"></div>
<input type="text" id="liCode" maxlength="9" style="text-transform:uppercase;">
<div class="lrow">
<input type="password" id="liPassNew" maxlength="64" autocomplete="new-password">
<button class="tbtn ghost pwtoggle" type="button" id="btnLiPassToggle" data-i18n="pwShow"></button>
</div>
<input type="password" id="liPassNew2" maxlength="64" autocomplete="new-password">
<div class="lrow">
<button class="tbtn ghost" id="btnLink" data-i18n="linkBtn"></button>
</div>
</div>
<div class="guestnote" data-i18n="guestNote"></div>
<button class="tbtn ghost" type="button" id="btnGuestView" style="margin-top:10px;">🎨 <span data-i18n="stView"></span></button>
</div>
</div>
<div class="modalwrap" id="settingsWrap">
<div class="modal" id="settingsModal">
<div class="am-head">
<h2 data-i18n="settingsTitle"></h2>
<button class="wclose" id="btnSettingsClose"></button>
</div>
<div class="ed-tabs" id="settingsTabs">
<button type="button" class="active" data-tab="account" data-i18n="stAccount"></button>
<button type="button" data-tab="view" data-i18n="stView"></button>
<button type="button" data-tab="admin" id="btnAdmin" style="display:none;" data-i18n="beheer"></button>
</div>
<div id="settingsAccountPanel">
<div class="am-reset">
<div class="am-name" id="helloName"></div>
<div class="am-role" id="helloRole"></div>
</div>
<div class="am-h3" data-i18n="stPassword"></div>
<div class="am-reset" id="ownPwBlock">
<div id="settingsMsg" class="formMsg"></div>
<div class="lrow">
<input type="password" id="ownPwCurrent" maxlength="64" autocomplete="current-password">
</div>
<div class="lrow">
<input type="password" id="ownPw" maxlength="64" autocomplete="new-password">
<button class="tbtn ghost pwtoggle" type="button" id="btnOwnPwToggle" data-i18n="pwShow"></button>
</div>
<div class="lrow">
<input type="password" id="ownPw2" maxlength="64" autocomplete="new-password">
<button class="tbtn ghost" id="btnOwnPw" data-i18n="pwChange"></button>
</div>
</div>
<div class="am-h3" data-i18n="stSession"></div>
<div class="am-reset">
<div class="lrow">
<button class="tbtn ghost" id="btnLogout" data-i18n="logout"></button>
</div>
<div class="guestnote" data-i18n="storedNote"></div>
</div>
</div>
<div id="settingsViewPanel" style="display:none;">
<div class="vw-row">
<span class="vw-lbl" data-i18n="vwTheme"></span>
<div class="seg" id="segTheme">
<button type="button" data-v="light" data-i18n="vwLight"></button>
<button type="button" data-v="dark" data-i18n="vwDark"></button>
<button type="button" data-v="auto" data-i18n="vwAuto"></button>
</div>
</div>
<div class="vw-row">
<span class="vw-lbl" data-i18n="vwContrast"></span>
<div class="seg" id="segHC">
<button type="button" data-v="off" data-i18n="vwOff"></button>
<button type="button" data-v="on" data-i18n="vwOn"></button>
</div>
</div>
<div class="vw-row">
<span class="vw-lbl" data-i18n="vwLang"></span>
<div class="seg" id="langToggle">
<button type="button" data-lang="nl">NL</button>
<button type="button" data-lang="en">EN</button>
</div>
</div>
<div class="vw-row">
<span class="vw-lbl" data-i18n="vwTbar"></span>
<div class="seg" id="segTbar">
<button type="button" data-v="top" data-i18n="vwTop"></button>
<button type="button" data-v="left" data-i18n="vwLeft"></button>
<button type="button" data-v="right" data-i18n="vwRight"></button>
</div>
</div>
<div class="vw-row">
<span class="vw-lbl" data-i18n="vwMotion"></span>
<div class="seg" id="segMotion">
<button type="button" data-v="on" data-i18n="vwOn"></button>
<button type="button" data-v="off" data-i18n="vwOff"></button>
</div>
</div>
<div class="vw-row">
<span class="vw-lbl" data-i18n="vwGlass"></span>
<div class="seg" id="segGlass">
<button type="button" data-v="on" data-i18n="vwOn"></button>
<button type="button" data-v="off" data-i18n="vwOff"></button>
</div>
</div>
<div class="guestnote" data-i18n="vwNote"></div>
</div>
<div id="settingsAdminPanel" style="display:none;">
<div id="adminModal"></div>
</div>
<div class="st-footer">
<span id="verTag"></span>
<span id="copyright"></span>
</div>
</div>
</div>
<script src="js/core.js"></script>
<script src="js/permissions.js"></script>
<script src="js/data.js"></script>
<script src="js/picker.js"></script>
<script src="js/widgets/letters.js"></script>
<script src="js/widgets/write.js"></script>
<script src="js/widgets/math.js"></script>
<script src="js/widgets/media.js"></script>
<script src="js/widgets/notes.js"></script>
<script src="js/widgets/timer.js"></script>
<script src="js/widgets/flits.js"></script>
<script src="js/widgets/hak.js"></script>
<script src="js/widgets/anchor.js"></script>
<script src="js/widgets/ball.js"></script>
<script src="js/widgets/dice.js"></script>
<script src="js/widgets/light.js"></script>
<script src="js/widgets/names.js"></script>
<script src="js/widgets/mind.js"></script>
<script src="js/widgets/birthday.js"></script>
<script src="js/widgets/numberline.js"></script>
<script src="js/widgets/sentence.js"></script>
<script src="js/widgets/learning.js"></script>
<script src="js/board.js"></script>
<script src="js/pupil.js"></script>
<script src="js/admin.js"></script>
<script src="js/app.js"></script>
</body>
</html>