Inicio Explorar Axuda
Rexistro Iniciar sesión
lee
/
donut-bingo
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Rama: master
Ramas Etiquetas
donut-bingo
/
views
/
build.html

build.html 6.2 KB
Permalink Histórico Raw

123 
  1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Donut Bingo</title> <style>:root{--bg0:#0b1020;--bg1:#0f1730;--panel: rgba(255,255,255,.06);--panel2: rgba(255,255,255,.1);--border: rgba(255,255,255,.14);--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.7);--accent:#d4af37;--accent2:#3a5a85;--shadow: 0 14px 40px rgba(0,0,0,.35);--r: 16px;--r2: 12px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%;overflow:hidden}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text);background:radial-gradient(1200px 600px at 18% 10%,rgba(212,175,55,.22),transparent 60%),radial-gradient(900px 520px at 92% 18%,rgba(58,90,133,.26),transparent 58%),linear-gradient(180deg,var(--bg0),var(--bg1));display:flex;flex-direction:column;align-items:center;justify-content:flex-start}h1{height:clamp(38px,6vh,54px);display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.2px;font-size:clamp(20px,2.6vh,34px);line-height:1;padding:6px 10px 0;text-shadow:0 6px 18px rgba(0,0,0,.35)}#start{height:clamp(34px,5vh,44px);margin:6px 0 10px;padding:0 16px;font-size:clamp(12px,1.8vh,16px)}.contents{position:relative;width:min(1200px,100vw);flex:1 1 auto;overflow:hidden;display:grid;grid-template-columns:300px 1fr;gap:14px;padding:10px 12px 14px;min-height:0;min-width:0}#inputs{position:static;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:12px;box-shadow:var(--shadow);backdrop-filter:blur(10px);min-height:0}#inputs h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}#saveInputs{height:36px;font-size:13px;width:100%}#inputs input{height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#00000042;color:var(--text);padding:0 10px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;min-width:0}#inputs input:focus{border-color:#d4af37a6;box-shadow:0 0 0 3px #d4af3729;background:#0003}button{appearance:none;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,#ffffff1f,#ffffff0f);color:var(--text);border-radius:12px;font-weight:800;letter-spacing:.2px;cursor:pointer;box-shadow:0 10px 24px #00000040;transition:transform .08s ease,box-shadow .15s ease,border-color .15s ease,filter .15s ease}button:hover{border-color:#ffffff42;filter:brightness(1.04)}button:active{transform:translateY(1px);box-shadow:0 6px 16px #00000038}#start{border-color:#d4af3759;background:linear-gradient(180deg,#d4af374d,#d4af371f)}.bingo{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:10px;box-shadow:var(--shadow);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden}table{border-collapse:separate;border-spacing:8px;table-layout:fixed;width:min(100%,calc((100vh - 110px)*.98));height:min(100%,calc((100vh - 110px)*.98))}td{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:var(--r2);background:#00000038;overflow:hidden;text-align:center;vertical-align:middle;padding:6px;cursor:pointer;box-shadow:0 10px 22px #0000002e;transition:transform .1s ease,box-shadow .15s ease,border-color .15s ease,background-color .15s ease}td:hover{transform:translateY(-1px);border-color:#d4af3759;background:#0000002e;box-shadow:0 14px 30px #00000038}td p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-size:clamp(11px,1.6vh,18px);line-height:1.1;font-weight:800;letter-spacing:.15px;user-select:none}.cross{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.95;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}.cross path{stroke:#ff4040d9;stroke-width:2.6}@media(max-width:880px){.contents{grid-template-columns:1fr;grid-template-rows:auto 1fr}#inputs{padding:10px}table{width:min(100%,calc((100vh - 140px)*.98));height:min(100%,calc((100vh - 140px)*.98))}}@media(max-height:720px){h1{height:40px;font-size:22px;padding-top:4px}#start{height:34px;margin:4px 0 8px}.contents{gap:10px;padding:8px 10px 12px}table{border-spacing:6px}#inputs input{height:28px}}
    2. 

  2. </style> </head> <body> <h1>Donut Bingo</h1> <button id="start">Start</button> <div class="contents"> <div id="inputs"> <button id="saveInputs">Save</button> <h2>Card Values</h2> </div> <div class="bingo"> <table> <tbody id="tbody"></tbody> </table> </div> </div> <svg class="cross" id="cross" style="display:none" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"> <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#ff0000" stroke-opacity="0.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> <script>(()=>{var d=document.getElementById("inputs"),s=document.getElementById("tbody"),o=[],i=localStorage.getItem("inputs");i?i=i.split(","):i=[];for(let e=0;e<25;e++){let t=document.createElement("input");t.type="text",i[e]&&(t.value=i[e]),d.appendChild(t)}for(let e=0;e<5;e++){let t=document.createElement("tr");for(let n=0;n<5;n++){let l=document.createElement("td");t.appendChild(l),o.push(l)}s.appendChild(t)}var u=e=>{for(let t=e.length-1;t>0;t--){let n=Math.floor(Math.random()*(t+1));[e[t],e[n]]=[e[n],e[t]]}};document.getElementById("saveInputs").addEventListener("click",()=>{let e=document.querySelectorAll("#inputs input"),t="";for(let n=0;n<e.length;n++)e[n].value!==""&&(t+=`${e[n].value},`);t[t.length-1]===","&&(t=t.slice(0,-1)),localStorage.setItem("inputs",t)});document.getElementById("start").addEventListener("click",()=>{let e=document.querySelectorAll("#inputs input"),t=[];for(let l=0;l<e.length;l++)t.push(e[l].value);u(t);let n=document.querySelectorAll("#tbody td");for(let l=0;l<n.length;l++){let c=document.createElement("p");for(c.textContent=t[l];n[l].children.length>0;)n[l].removeChild(n[l].firstChild);n[l].appendChild(c)}});for(let e=0;e<o.length;e++)o[e].addEventListener("click",()=>{let t=o[e].querySelector("svg");if(t)o[e].removeChild(t);else{let n=document.getElementById("cross");n=n.cloneNode(!0),n.removeAttribute("id"),n.style.display="block",o[e].appendChild(n)}});})();
    3. 

  3. </script> </body> </html> 
    4.