1151c71049
- Nieuw public/js/explorer.js: generieke verkenner-modal met broodkruimelpad,
werkbalk (nieuwe map/nieuw item/hernoem/verwijder met bevestigingsstap),
raster van map- en itemtegels, dubbelklik om te openen en slepen om te
verplaatsen (pointer-events, werkt op touch; drop-doel licht op)
- Geneste mappen zonder datamigratie: nesting zit in de mapnaam als pad met
"/"-scheiding; server en toewijzingen (bord-id's) blijven onaangeroerd;
"/" wordt geweigerd in nieuwe namen
- Borden-adapter in board.js: bordtegels met boardThumb-preview, actief bord
gemarkeerd en gevolgd bij verplaatsen/hernoemen (prefix-rewrite), map
verwijderen alleen als leeg, laatste bord onverwijderbaar
- 📁-knop in de menubalk opent de verkenner; het oude mappenpaneel
(renderBoardsPanel + #boardsPanel + CSS) is vervangen; de boardStrip-
snelwissel blijft; curSlot() heelt lege actieve mappen zelf
271 lines
12 KiB
HTML
271 lines
12 KiB
HTML
<!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 class="modalwrap" id="explorerWrap" role="dialog" aria-modal="true" aria-labelledby="explorerTitle">
|
||
<div class="modal explorer">
|
||
<div class="gallery-head"><h2 id="explorerTitle"></h2><button class="wclose explorer-close" type="button">✕</button></div>
|
||
<div class="ex-bar">
|
||
<div class="ex-crumbs" id="exCrumbs"></div>
|
||
<div class="ex-tools" id="exTools"></div>
|
||
</div>
|
||
<div class="ex-msg" id="exMsg"></div>
|
||
<div class="ex-grid" id="exGrid"></div>
|
||
</div>
|
||
</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" id="backupsHead" data-i18n="stBackups"></div>
|
||
<div class="am-reset" id="backupsBlock">
|
||
<div id="backupsList"></div>
|
||
<div class="guestnote" data-i18n="backupsNote"></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/explorer.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>
|