270739da09
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 12s
- Lengte-check voor ankerwoorden was strenger dan het invoerveld zelf toestond ({2,12} vs maxLength 24): woorden als "kledingwinkel" werden nooit opgezocht terwijl ARASAAC er prima plaatjes voor heeft
- Geen ankersymbool meer als terugval wanneer ARASAAC geen match heeft (bv. "contant"); de cel blijft leeg en is klikbaar als snelkoppeling naar een nieuwe, herbruikbare plaatjeskiezer (nieuw: public/js/picker.js, hergebruikt dezelfde emoji-lijst/ARASAAC-zoekfunctie/CSS als de bestaande woordkaart-editor)
- Elk ankerraster synchroniseert zijn woorden-met-plaatje voortaan naar een eigen thema in THEMES, zodat ankerwoorden ook beheerbaar zijn via de bestaande woordkaart-editor (Letterblokken-widget) - geen wijziging aan letters.js nodig, het bestaande thema-systeem pakt dit vanzelf op
- Oudere borden met het letterlijke ankersymbool als opgeslagen "plaatje" migreren automatisch naar de nieuwe lege staat
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
172 lines
6.8 KiB
HTML
172 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="nl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>teach</title>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%233b7dd8'/%3E%3Ctext x='32' y='46' font-size='40' font-weight='900' font-family='Arial Rounded MT Bold,Arial,sans-serif' text-anchor='middle' fill='%23fff'%3Et%3C/text%3E%3Ccircle cx='47' cy='17' r='7' fill='%23f7c948'/%3E%3C/svg%3E">
|
||
<link rel="stylesheet" href="css/teach.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div id="toolbar">
|
||
<div class="logo" title="teach">
|
||
<span class="l1">t</span><span class="l2">e</span><span class="l3">a</span><span class="l4">c</span><span class="l5">h</span>
|
||
<span class="crayon">🖍️</span>
|
||
</div>
|
||
<button class="tbtn ghost" id="btnMute">🔊</button>
|
||
<button class="tbtn ghost" id="btnHC">👁</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>
|
||
<div id="langToggle">
|
||
<button data-lang="nl">NL</button>
|
||
<button data-lang="en">EN</button>
|
||
</div>
|
||
<button class="tbtn ghost" id="btnFs" title="Fullscreen">⛶</button>
|
||
</div>
|
||
|
||
<div id="board"></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="wp-group pen-tools"></div>
|
||
<div class="wp-group pen-colors"></div>
|
||
<div class="wp-group pen-sizes"></div>
|
||
<div class="wp-group pen-bgs"></div>
|
||
<div class="wp-group pen-extras"></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">
|
||
<div class="modal">
|
||
<h2 data-i18n="chooseWidget"></h2>
|
||
<div id="gallery"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modalwrap" id="loginWrap">
|
||
<div class="modal" id="loginModal">
|
||
<h2 data-i18n="login"></h2>
|
||
<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>
|
||
</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="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="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="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/board.js"></script>
|
||
<script src="js/admin.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|