Voeg 28 herkenbare kleurplaten en creatieve niveaus toe (v0.4.66-beta) #4
3 changed files with 28 additions and 11 deletions
|
|
@ -37,7 +37,7 @@
|
|||
.logo .l4{color:var(--blue); transform:rotate(5deg) translateY(-1px);}
|
||||
.logo .l5{color:var(--purple); transform:rotate(-4deg);}
|
||||
.logo .crayon{font-size:24px; margin-left:6px; transform:rotate(10deg);}
|
||||
#verTag{font-size:10.5px; font-weight:700; color:var(--muted); align-self:flex-end; margin-left:4px; transform:none;}
|
||||
#verTag{font-size:10.5px; font-weight:700; color:var(--muted);}
|
||||
#verTag.beta{color:#fff; background:var(--orange); padding:1px 7px; border-radius:8px;}
|
||||
.logo:hover span:not(.crayon){animation:bounce .5s;}
|
||||
.logo .l2{animation-delay:.05s;} .logo .l3{animation-delay:.1s;}
|
||||
|
|
@ -431,6 +431,11 @@
|
|||
#settingsModal .am-h3:first-of-type{margin-top:0;}
|
||||
#settingsModal .am-reset .lrow{margin:0;}
|
||||
#settingsModal .am-reset .guestnote{margin-top:2px;}
|
||||
.st-footer{
|
||||
display:flex; justify-content:space-between; align-items:center; gap:8px;
|
||||
margin-top:16px; padding-top:12px; border-top:1.5px solid #e3eaf3;
|
||||
font-size:11px; color:var(--muted);
|
||||
}
|
||||
#settingsModal .am-name{font-size:16px;}
|
||||
/* =========================================================
|
||||
Letter game widget
|
||||
|
|
@ -812,7 +817,7 @@
|
|||
body.hc .lg-ed-form input[type=text],body.hc .ed-pictorow input{border-color:#000; color:#000;}
|
||||
body.hc .np-result{background:#0047ab;}
|
||||
body.hc .np-row label,body.hc .thint,body.hc .guestnote,body.hc .ed-credit,
|
||||
body.hc .bp-hint,body.hc .gcard .gd{color:#222;}
|
||||
body.hc .bp-hint,body.hc .gcard .gd,body.hc .st-footer{color:#222;}
|
||||
body.hc .gcard{border-color:#000; background:#fff;}
|
||||
body.hc .gcat-title{color:#000;}
|
||||
body.hc .tbtn.ghost{background:#fff; border:2px solid #000; color:#000;}
|
||||
|
|
@ -1059,7 +1064,6 @@ body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:#fff
|
|||
#toolbar{padding:0 8px; gap:6px;}
|
||||
.logo{font-size:22px;}
|
||||
.logo .crayon{font-size:18px; margin-left:4px;}
|
||||
#verTag{font-size:9px; margin-left:2px;}
|
||||
.tbtn{padding:8px 10px; font-size:13px;}
|
||||
#boardsPanel{top:60px; max-height:min(66vh,480px);}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
<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>
|
||||
<span id="verTag"></span>
|
||||
</div>
|
||||
<button class="tbtn ghost" id="btnMute">🔊</button>
|
||||
<button class="tbtn ghost" id="btnHC">👁</button>
|
||||
|
|
@ -23,8 +22,7 @@
|
|||
<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="btnAdmin" style="display:none;">👥</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>
|
||||
|
|
@ -124,6 +122,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="am-h3" id="stAdminLbl" data-i18n="beheer" style="display:none;"></div>
|
||||
<div class="am-reset" id="adminBlock" style="display:none;">
|
||||
<div class="lrow">
|
||||
<button class="tbtn ghost" id="btnAdmin">👥 <span data-i18n="openAdmin"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="am-h3" data-i18n="stSession"></div>
|
||||
<div class="am-reset">
|
||||
<div class="lrow">
|
||||
|
|
@ -131,6 +136,11 @@
|
|||
</div>
|
||||
<div class="guestnote" data-i18n="storedNote"></div>
|
||||
</div>
|
||||
|
||||
<div class="st-footer">
|
||||
<span id="verTag"></span>
|
||||
<span id="copyright"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modalwrap" id="adminWrap">
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ const VERSION = "0.2.10";
|
|||
})
|
||||
.catch(()=>{});
|
||||
})();
|
||||
document.getElementById("copyright").textContent = "© "+new Date().getFullYear()+" Ramon Besselink";
|
||||
/* =========================================================
|
||||
i18n
|
||||
==========================================================*/
|
||||
|
|
@ -112,7 +113,7 @@ const I18N = {
|
|||
tmHint:"Sleep aan de rode schijf om de tijd in te stellen.",
|
||||
login:"Inloggen", loginBtn:"Inloggen", registerBtn:"Account maken", logout:"Uitloggen",
|
||||
settingsTitle:"Instellingen", tabLogin:"Inloggen", tabLinkCode:"Koppelcode", busy:"Bezig…",
|
||||
stAccount:"Account", stPassword:"Wachtwoord", stSession:"Sessie",
|
||||
stAccount:"Account", stPassword:"Wachtwoord", stSession:"Sessie", openAdmin:"Beheerpaneel",
|
||||
pwChanged:"Wachtwoord gewijzigd ✓",
|
||||
namePh:"naam", passPh:"wachtwoord",
|
||||
guestNote:"Zonder inloggen wordt niets bewaard. Log in met je schoolaccount om alles op de server te bewaren.",
|
||||
|
|
@ -238,7 +239,7 @@ const I18N = {
|
|||
tmHint:"Drag the red disc to set the time.",
|
||||
login:"Log in", loginBtn:"Log in", registerBtn:"Create account", logout:"Log out",
|
||||
settingsTitle:"Settings", tabLogin:"Log in", tabLinkCode:"Link code", busy:"Please wait…",
|
||||
stAccount:"Account", stPassword:"Password", stSession:"Session",
|
||||
stAccount:"Account", stPassword:"Password", stSession:"Session", openAdmin:"Admin panel",
|
||||
pwChanged:"Password changed ✓",
|
||||
namePh:"name", passPh:"password",
|
||||
guestNote:"Without logging in nothing is saved. Log in with your school account to keep everything on the server.",
|
||||
|
|
@ -375,9 +376,9 @@ const roleKey = r => r==="super" ? "roleSuper" : r==="admin" ? "roleAdmin" : r==
|
|||
function updateUserUI(){
|
||||
document.getElementById("userLbl").textContent = currentUser ? currentUser.displayName : T("login");
|
||||
document.getElementById("btnUser").classList.toggle("on", !!currentUser);
|
||||
const adminBtn = document.getElementById("btnAdmin");
|
||||
adminBtn.style.display = can("admin.access") ? "" : "none";
|
||||
adminBtn.title = T("beheer");
|
||||
const showAdmin = can("admin.access");
|
||||
document.getElementById("stAdminLbl").style.display = showAdmin ? "" : "none";
|
||||
document.getElementById("adminBlock").style.display = showAdmin ? "flex" : "none";
|
||||
if(currentUser){
|
||||
document.getElementById("helloName").textContent = currentUser.displayName;
|
||||
document.getElementById("helloRole").textContent = T(roleKey(currentUser.role));
|
||||
|
|
@ -413,6 +414,8 @@ document.getElementById("btnUser").addEventListener("click", ()=>{
|
|||
loginWrap.classList.add("open");
|
||||
});
|
||||
document.getElementById("btnSettingsClose").addEventListener("click", ()=>settingsWrap.classList.remove("open"));
|
||||
/* Beheer wordt vanuit Instellingen geopend: dat scherm zelf dicht zodat er geen twee modals over elkaar staan */
|
||||
document.getElementById("btnAdmin").addEventListener("click", ()=>settingsWrap.classList.remove("open"));
|
||||
loginWrap.addEventListener("click", e=>{ if(e.target===loginWrap) loginWrap.classList.remove("open"); });
|
||||
settingsWrap.addEventListener("click", e=>{ if(e.target===settingsWrap) settingsWrap.classList.remove("open"); });
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue