extras:codikon:p5js:wireframe-ideen-generator
Differences
This shows you the differences between two versions of the page.
| extras:codikon:p5js:wireframe-ideen-generator [2026/10/26 08:26] – created Leonie Winkelmann | extras:codikon:p5js:wireframe-ideen-generator [2026/10/26 08:30] (current) – Leonie Winkelmann | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | <!doctype html> | + | <HTML> |
| - | <html lang=" | + | |
| - | < | + | |
| - | <meta charset=" | + | |
| - | <meta name=" | + | |
| - | < | + | |
| < | < | ||
| - | :root { | + | # |
| - | --k: #111111; --o: #FF6A13; --b: #2B5BFF; | + | font: 16px/1.4 Arial, Helvetica, sans-serif; box-sizing: border-box; color-scheme: |
| - | | + | |
| - | color-scheme: | + | # |
| - | | + | #wfgen .wf-title { font-size: 22px; font-weight: bold; margin: 0 0 4px; line-height: |
| - | * { box-sizing: border-box; } | + | # |
| - | body { margin: 0; background: | + | # |
| - | #app { max-width: 1000px; margin: 0 auto; padding: 16px; } | + | # |
| - | h1 { font-size: 22px; margin: 0 0 4px; } | + | # |
| - | .hint { margin: 0 0 14px; color: var(--g3); font-size: 14px; } | + | # |
| - | .bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: | + | # |
| - | .grp { display: flex; align-items: | + | border: 2px solid var(--k); border-radius: |
| - | .grp > span { font-size: 13px; font-weight: | + | |
| - | .seg { display: inline-flex; | + | # |
| - | button { | + | # |
| - | | + | # |
| - | border: 2px solid var(--k); border-radius: | + | # |
| - | } | + | # |
| - | button: | + | # |
| - | button: | + | # |
| - | .seg button { border-radius: | + | # |
| - | .seg button: | + | #wfgen .wf-stage { width: 100%; } |
| - | .seg button: | + | #wfgen canvas { display: block; max-width: none; margin: 0; padding: 0; border: 0; } |
| - | .seg button[aria-pressed=" | + | #wfgen svg { display: block; } |
| - | button.primary { background: var(--o); border-color: | + | # |
| - | button.primary: | + | # |
| - | #stage { width: 100%; } | + | #wfgen .wf-brief { margin: 0; padding: 0; white-space: |
| - | #stage canvas { display: block; } | + | #wfgen button.wf-iconbtn { position: absolute; top: 6px; right: 11px; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 0; |
| - | .panel { border: 2px solid var(--k); border-radius: | + | |
| - | .panel h2 { margin: 0 0 8px; font-size: 13px; color: var(--g3); text-transform: | + | #wfgen button.wf-iconbtn: |
| - | #brief { margin: 0; white-space: | + | # |
| - | .panel { position: relative; } | + | #wfgen .wf-time { font-size: 40px; font-weight: |
| - | .iconbtn { position: absolute; top: 6px; right: 11px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; | + | #wfgen .wf-time.done { color: var(--o); } |
| - | color: var(--k); display: flex; align-items: | + | @media (max-width: 480px) { #wfgen { padding: 12px; } #wfgen .wf-time { font-size: 32px; min-width: 96px; } } |
| - | .iconbtn: | + | |
| - | .timer { display: flex; align-items: | + | |
| - | #time { font-size: 40px; font-weight: | + | |
| - | #time.done { color: var(--o); } | + | |
| - | .note { color: var(--b); font-size: 14px; font-weight: | + | |
| - | @media (max-width: 480px) { #app { padding: 12px; } #time { font-size: 32px; min-width: 96px; } } | + | |
| </ | </ | ||
| - | </ | + | <div id="wfgen"> |
| - | < | + | <div class=" |
| - | <div id="app"> | + | <div class=" |
| - | <h1> | + | |
| - | <p class=" | + | |
| - | <div class=" | + | <div class=" |
| - | <button class=" | + | < |
| - | <div class=" | + | <div class=" |
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| <button type=" | <button type=" | ||
| <button type=" | <button type=" | ||
| </ | </ | ||
| </ | </ | ||
| - | <div class=" | + | <div class=" |
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| <button type=" | <button type=" | ||
| <button type=" | <button type=" | ||
| Line 72: | Line 59: | ||
| </ | </ | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <h2>Dein Briefing</ | + | <div class=" |
| - | <button type=" | + | <button type=" |
| - | < | + | < |
| - | | + | < |
| - | | + | |
| - | < | + | |
| - | | + | |
| - | | + | |
| </ | </ | ||
| - | <pre id=" | + | <div class=" |
| </ | </ | ||
| - | <div class=" | + | <div class=" |
| - | <h2> | + | <div class=" |
| - | <div class=" | + | <div class=" |
| - | < | + | < |
| - | <button type=" | + | <button type=" |
| - | <button type=" | + | <button type=" |
| - | <div class=" | + | <div class=" |
| <button type=" | <button type=" | ||
| <button type=" | <button type=" | ||
| Line 100: | Line 83: | ||
| </ | </ | ||
| </ | </ | ||
| - | + | <script src=" | |
| - | <script src=" | + | |
| - | onerror=" | + | |
| < | < | ||
| - | /* ---------- Farben | + | (function () { |
| - | const K = '#111111', O = '#FF6A13', B = '#2B5BFF', G1 = '#F3F3F3', G2 = '#D4D4D4', G3 = '#5D5D5D'; | + | 'use strict'; |
| + | var root = document.getElementById('wfgen'); | ||
| + | if (!root) return; | ||
| + | var q = function (s) { return root.querySelector(s); | ||
| + | var qa = function (s) { return root.querySelectorAll(s); | ||
| + | var w = function (n) { return q('[data-wf=" | ||
| + | var host = w('stage'); | ||
| + | if (typeof p5 === 'undefined') { host.textContent | ||
| - | /* ---------- | + | |
| - | const POOLS = [ | + | const K = '#111111', O = '#FF6A13', |
| - | { name: 'Produkt', | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | ]}, | + | |
| - | { name: 'Kundin', | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | ]}, | + | |
| - | { name: ' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | ['Die Kunst des Zuspätkommens', | + | |
| - | [' | + | |
| - | ]}, | + | |
| - | { name: ' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | ['Sehr kleines Display (ca. 120 × 120)', 3, 120, 120], [' | + | |
| - | ]}, | + | |
| - | { name: ' | + | |
| - | [' | + | |
| - | ['Eine Nachricht senden', | + | |
| - | ['Eine Ausrede abschicken', | + | |
| - | [' | + | |
| - | ['Den Alarm auslösen', | + | |
| - | ['Das Universum neu starten', | + | |
| - | ]}, | + | |
| - | { name: ' | + | |
| - | ['Nur 3 Elemente pro Screen', | + | |
| - | ['Die Nutzerin hat nur eine Hand frei', 1], [' | + | |
| - | [' | + | |
| - | [' | + | |
| - | ['Die Nutzerin ist wütend', | + | |
| - | ['Alle Inhalte in einer einzigen Liste', | + | |
| - | [' | + | |
| - | ['Die Nutzerin liest nur jedes zweite Wort', 3], [' | + | |
| - | ]} | + | |
| - | ]; | + | |
| - | /* ---------- | + | |
| - | const S = { sel: [0,0,0,0,0,0], locked: [false,false,false,false,false,false], until: [0,0,0,0,0,0], level: 3, n: 6 }; | + | const POOLS = [ |
| - | let hoverIdx = -1, hoverLock = false, host; | + | |
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | ]}, | ||
| + | { name: ' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | ]}, | ||
| + | { name: ' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | ['Die Kunst des Zuspätkommens', | ||
| + | [' | ||
| + | ]}, | ||
| + | { name: ' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | [' | ||
| + | ['Sehr kleines Display (ca. 120 × 120)', | ||
| + | ]}, | ||
| + | { name: ' | ||
| + | [' | ||
| + | ['Eine Nachricht senden', | ||
| + | ['Eine Ausrede abschicken', | ||
| + | [' | ||
| + | ['Den Alarm auslösen', | ||
| + | ['Das Universum neu starten', | ||
| + | ]}, | ||
| + | { name: ' | ||
| + | ['Nur 3 Elemente pro Screen', | ||
| + | ['Die Nutzerin hat nur eine Hand frei', 1], [' | ||
| + | [' | ||
| + | [' | ||
| + | ['Die Nutzerin ist wütend', | ||
| + | ['Alle Inhalte in einer einzigen Liste', | ||
| + | [' | ||
| + | ['Die Nutzerin liest nur jedes zweite Wort', 3], [' | ||
| + | ]} | ||
| + | ]; | ||
| - | /* ---------- | + | |
| - | function pickIndex(pi) { | + | const S = { sel: [0, 0, 0, 0, 0, 0], locked: [false, false, false, false, false, false], until: [0, 0, 0, 0, 0, 0], level: 3, n: 6 }; |
| - | const items = POOLS[pi].items; | + | let hoverIdx |
| - | let cands = []; | + | |
| - | items.forEach((it, | + | |
| - | if (cands.length > 1) cands = cands.filter(c => c[0] !== S.sel[pi]); | + | |
| - | const total = cands.reduce((a, c) => a + c[1], 0); | + | |
| - | let r = Math.random() * total; | + | |
| - | for (const c of cands) { r -= c[1]; if (r <= 0) return c[0]; } | + | |
| - | return cands[0][0]; | + | |
| - | } | + | |
| - | function rollCard(i, order) { | + | |
| - | if (S.locked[i]) return; | + | |
| - | S.sel[i] = pickIndex(i); | + | |
| - | S.until[i] = millis() + 450 + (order || 0) * 120; | + | |
| - | | + | |
| - | } | + | |
| - | function rollAll() { for (let i = 0; i < S.n; i++) rollCard(i, i); updateBrief(); | + | |
| - | /* ---------- | + | |
| - | function | + | function |
| - | const w = width, cols = w >= 720 ? 3 : (w >= 460 ? 2 : 1), gap = 14; | + | const items = POOLS[pi].items; |
| - | const cw = (w - gap * (cols - 1)) / cols, ch = cols === 3 ? 172 : (cols === 2 ? 164 : 144); | + | let cands = []; |
| - | const rects = [], rows = Math.ceil(S.n / cols); | + | items.forEach(function |
| - | | + | |
| - | | + | |
| + | let r = Math.random() * total; | ||
| + | for (const c of cands) { r -= c[1]; if (r <= 0) return c[0]; } | ||
| + | return cands[0][0]; | ||
| } | } | ||
| - | | + | |
| - | } | + | if (S.locked[i]) return; |
| - | function applyLayout() { | + | |
| - | const w = Math.max(280, host.clientWidth); | + | |
| - | | + | |
| - | | + | |
| - | } | + | function rollAll() { for (let i = 0; i < S.n; i++) rollCard(i, i); updateBrief(); } |
| - | /* ---------- | + | |
| - | function | + | function |
| - | const words = str.split(' | + | const out = []; |
| - | for (const wd of words) { | + | for (let i = 0; i < S.n; i++) out.push(POOLS[i].name |
| - | const t = cur ? cur + ' ' + wd : wd; | + | |
| - | | + | |
| } | } | ||
| - | if (cur) lines.push(cur); | + | |
| - | return lines; | + | |
| - | } | + | /* ---------- p5-Sketch (Instanzmodus, |
| - | function fit(str, | + | const sketch = function (p) { |
| - | textStyle(BOLD); | + | sk = p; |
| - | for (let s = 28; s >= 14; s--) { | + | let cnv; |
| - | textSize(s); | + | |
| - | const ls = wrapLines(str, | + | function layout() { |
| - | if (ls.length * s * 1.2 <= h && ls.every(l | + | const W = p.width, cols = W >= 720 ? 3 : (W >= 460 ? 2 : 1), gap = 14; |
| - | } | + | const cw = (W - gap * (cols - 1)) / cols, ch = cols === 3 ? 172 : (cols === 2 ? 164 : 144); |
| - | textSize(14); | + | const rects = [], rows = Math.ceil(S.n / cols); |
| - | return { s: 14, ls: wrapLines(str, | + | for (let i = 0; i < S.n; i++) rects.push({ x: (i % cols) * (cw + gap), y: Math.floor(i / cols) * (ch + gap), w: cw, h: ch }); |
| - | } | + | return { rects: rects, H: rows * ch + (rows - 1) * gap }; |
| - | function drawIcon(kind, | + | } |
| - | noFill(); stroke(K); strokeWeight(2 / 0.75); // wirkt nach scale(0.75) wie 2 px, wie die Kästchen | + | function applyLayout() { |
| - | if (kind === ' | + | const W = Math.max(280, |
| - | rect(x, y + 4, 44, 34, 4); line(x, y + 13, x + 44, y + 13); | + | p.resizeCanvas(W, |
| - | noStroke(); fill(O); circle(x + 7, y + 8.5, 4); | + | p.resizeCanvas(W, |
| - | } else if (kind === ' | + | } |
| - | circle(x + 22, y + 13, 16); arc(x + 22, y + 44, 34, 30, PI, TWO_PI); | + | function wrapLines(str, |
| - | } else if (kind === ' | + | const words = str.split(' |
| - | rect(x, y + 6, 44, 32, 3); line(x, y + 6, x + 44, y + 38); line(x + 44, y + 6, x, y + 38); | + | for (const wd of words) { |
| - | } else if (kind === ' | + | const t = cur ? cur + ' ' + wd : wd; |
| - | const sc = Math.min(40 / item[2], 40 / item[3]), | + | |
| - | rect(x + 22 - w / 2, y + 22 - h / 2, w, h, 3); | + | } |
| - | } else if (kind === ' | + | if (cur) lines.push(cur); |
| - | noStroke(); fill(O); rect(x, y + 10, 44, 24, 7); | + | |
| - | } else if (kind === ' | + | } |
| - | noStroke(); fill(B); push(); translate(x + 22, y + 22); rotate(PI / 4); rect(-13, -13, 26, 26, 3); pop(); | + | function fit(str, |
| - | } | + | p.textStyle(p.BOLD); |
| - | } | + | for (let s = 28; s >= 14; s--) { |
| - | function drawLock(x, y, locked) { | + | p.textSize(s); |
| - | const c = locked ? B : G3; | + | const ls = wrapLines(str, |
| - | stroke(c); strokeWeight(2); | + | if (ls.length * s * 1.2 <= maxH && ls.every(function |
| - | arc(x + 9, y + (locked ? 8 : 4), 12, 14, PI, TWO_PI); | + | } |
| - | fill(locked ? B : 255); rect(x, y + 8, 18, 13, 3); | + | p.textSize(14); |
| - | } | + | return { s: 14, ls: wrapLines(str, |
| - | function drawCard(i, r, item, rolling) { | + | } |
| - | const p = POOLS[i]; | + | function drawIcon(kind, |
| - | // 2 px Kontur, 14 px Radius, 1 px nach innen versetzt: | + | p.noFill(); |
| - | stroke(hoverIdx === i ? O : K); strokeWeight(2); | + | if (kind === ' |
| - | noStroke(); fill(G3); textStyle(BOLD); | + | p.rect(x, y + 4, 44, 34, 4); p.line(x, y + 13, x + 44, y + 13); |
| - | text(p.label, r.x + 20, r.y + 16); | + | p.noStroke(); |
| - | push(); translate(r.x + r.w - 20 - 33, r.y + 14); scale(0.75); | + | } else if (kind === ' |
| - | const zone = { x: r.x + 20, y: r.y + 52, w: r.w - 40, h: r.h - 52 - 40 }; | + | p.circle(x + 22, y + 13, 16); p.arc(x + 22, y + 44, 34, 30, p.PI, p.TWO_PI); |
| - | const f = fit(item[0], | + | } else if (kind === ' |
| - | textSize(f.s); | + | p.rect(x, y + 6, 44, 32, 3); p.line(x, y + 6, x + 44, y + 38); p.line(x + 44, y + 6, x, y + 38); |
| - | f.ls.forEach((l, | + | } else if (kind === ' |
| - | // unten: neu würfeln + Schloss | + | const sc = Math.min(40 / item[2], 40 / item[3]), |
| - | | + | p.rect(x + 22 - dw / 2, y + 22 - dh / 2, dw, dh, 3); |
| - | noStroke(); fill(G3); textSize(12); | + | } else if (kind === ' |
| - | text(' | + | p.noStroke(); |
| - | drawLock(r.x + r.w - 20 - 18, r.y + r.h - 16 - 21, S.locked[i]); | + | } else if (kind === ' |
| - | } | + | p.noStroke(); |
| - | function setup() { | + | } |
| - | host = document.getElementById(' | + | } |
| - | const c = createCanvas(Math.max(280, | + | function drawLock(x, y, locked) { |
| - | c.parent(host); | + | |
| - | const el = c.elt; | + | p.arc(x + 9, y + (locked ? 8 : 4), 12, 14, p.PI, p.TWO_PI); |
| - | el.addEventListener(' | + | p.fill(locked ? B : 255); p.rect(x, y + 8, 18, 13, 3); |
| - | | + | } |
| - | if (h.lock) { S.locked[h.i] = !S.locked[h.i]; | + | function drawCard(i, r, item, rolling) { |
| - | }); | + | const pool = POOLS[i]; |
| - | el.addEventListener(' | + | // 2 px Kontur, 14 px Radius, 1 px nach innen versetzt: wie das Kaestchen |
| - | | + | p.stroke(hoverIdx === i ? O : K); p.strokeWeight(2); |
| - | if (h.i !== hoverIdx || h.lock !== hoverLock) { hoverIdx = h.i; hoverLock = h.lock; el.style.cursor = h.i >= 0 ? ' | + | p.noStroke(); |
| - | }); | + | p.text(pool.label, r.x + 20, r.y + 16); |
| - | el.addEventListener(' | + | p.push(); |
| - | window.addEventListener(' | + | const zone = { x: r.x + 20, y: r.y + 52, w: r.w - 40, h: r.h - 52 - 40 }; |
| - | initFromHash(); | + | const f = fit(item[0], |
| - | } | + | p.textSize(f.s); |
| - | function draw() { | + | f.ls.forEach(function |
| - | background(255); | + | p.noFill(); |
| - | const L = layout(), now = millis(); let busy = false; | + | p.noStroke(); |
| - | for (let i = 0; i < S.n; i++) { | + | p.text(' |
| - | const rolling = now < S.until[i]; if (rolling) busy = true; | + | drawLock(r.x + r.w - 20 - 18, r.y + r.h - 16 - 21, S.locked[i]); |
| - | const items = POOLS[i].items; | + | } |
| - | const idx = rolling ? Math.floor(Math.abs(Math.sin(Math.floor(now / 70) * 12.9898 + i * 78.233)) * 10000) % items.length : S.sel[i]; | + | function hit(mx, my) { |
| - | drawCard(i, L.rects[i], items[idx], rolling); | + | const L = layout(); |
| - | } | + | for (let i = 0; i < S.n; i++) { |
| - | if (!busy) noLoop(); | + | const r = L.rects[i]; |
| - | } | + | if (mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h) return { i: i, lock: mx > r.x + r.w - 56 && my > r.y + r.h - 50 }; |
| - | function hit(mx, my) { | + | } |
| - | const L = layout(); | + | return { i: -1, lock: false }; |
| - | for (let i = 0; i < S.n; i++) { | + | |
| - | const r = L.rects[i]; | + | |
| - | if (mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h) { | + | |
| - | | + | |
| } | } | ||
| - | } | ||
| - | return { i: -1, lock: false }; | ||
| - | } | ||
| - | /* ---------- Briefing, Teilen ---------- */ | + | p.setup = function () { |
| - | function | + | cnv = p.createCanvas(Math.max(280, |
| - | const out = []; | + | p.textFont(' |
| - | | + | |
| - | return out.join(' | + | |
| - | } | + | const h = hit(e.offsetX, |
| - | function | + | if (h.lock) { S.locked[h.i] = !S.locked[h.i]; p.redraw(); } else { rollCard(h.i, 0); updateBrief(); } |
| - | function | + | }); |
| - | let ok = false; | + | |
| - | try { | + | const h = hit(e.offsetX, e.offsetY); |
| - | const m = location.hash.replace('#', | + | if (h.i !== hoverIdx || h.lock !== hoverLock) { hoverIdx = h.i; hoverLock |
| - | | + | }); |
| - | | + | el.addEventListener(' |
| - | | + | |
| - | sel.every((v, i) => Number.isInteger(v) && v >= 0 && v < POOLS[i].items.length)) { | + | syncSeg(); applyLayout(); |
| - | S.n = n; S.level = l; S.sel = sel; ok = true; | + | |
| + | p.draw = function () { | ||
| + | | ||
| + | const L = layout(), now = p.millis(); let busy = false; | ||
| + | | ||
| + | const rolling | ||
| + | const items = POOLS[i].items; | ||
| + | const idx = rolling ? Math.floor(Math.abs(Math.sin(Math.floor(now / 70) * 12.9898 + i * 78.233)) * 10000) % items.length | ||
| + | drawCard(i, L.rects[i], items[idx], rolling); | ||
| } | } | ||
| + | if (!busy) p.noLoop(); | ||
| + | }; | ||
| + | sk.applyLayout = applyLayout; | ||
| + | }; | ||
| + | |||
| + | /* ---------- Bedienelemente ---------- */ | ||
| + | function syncSeg() { | ||
| + | qa(' | ||
| + | qa(' | ||
| + | } | ||
| + | w(' | ||
| + | qa(' | ||
| + | S.n = +b.dataset.n; | ||
| + | }); }); | ||
| + | qa(' | ||
| + | S.level = +b.dataset.l; | ||
| + | }); }); | ||
| + | |||
| + | async function copyText(text) { | ||
| + | try { await navigator.clipboard.writeText(text); | ||
| + | catch (e) { | ||
| + | const ta = document.createElement(' | ||
| + | try { document.execCommand(' | ||
| + | ta.remove(); | ||
| } | } | ||
| - | } catch (e) {} | + | } |
| - | | + | w(' |
| - | | + | await copyText(briefText()); |
| - | } | + | const a = w(' |
| + | a.style.display = ' | ||
| + | setTimeout(function | ||
| + | }); | ||
| - | /* ---------- | + | |
| - | function syncSeg() { | + | |
| - | | + | |
| - | | + | function fmt(s) { return |
| - | } | + | |
| - | document.getElementById('rollAll').addEventListener('click', rollAll); | + | function tick() { |
| - | document.querySelectorAll(' | + | |
| - | | + | if (tLeft <= 0) { clearInterval(tTimer); tTimer = null; startBtn.textContent = 'Start'; } |
| - | })); | + | } |
| - | document.querySelectorAll('[data-l]').forEach(b => b.addEventListener(' | + | startBtn.addEventListener(' |
| - | | + | |
| - | })); | + | |
| - | async function copyText(text) { | + | |
| - | try { await navigator.clipboard.writeText(text); } | + | }); |
| - | | + | function resetTimer() { |
| - | | + | |
| - | | + | |
| - | | + | |
| } | } | ||
| - | } | + | w('tReset' |
| - | document.getElementById('copyTxt' | + | |
| - | await copyText(briefText()); | + | |
| - | | + | qa(' |
| - | | + | |
| - | | + | }); }); |
| - | }); | + | |
| - | /* ---------- Timer ---------- */ | + | new p5(sketch, host); |
| - | let tTotal = 600, tLeft = 600, tEnd = 0, tTimer = null; | + | })(); |
| - | const timeEl = document.getElementById(' | + | |
| - | function fmt(s) { return String(Math.floor(s / 60)).padStart(2, | + | |
| - | function showTime() { | + | |
| - | timeEl.textContent = tLeft > 0 ? fmt(tLeft) : ' | + | |
| - | timeEl.classList.toggle(' | + | |
| - | } | + | |
| - | function tick() { | + | |
| - | tLeft = Math.max(0, Math.ceil((tEnd - Date.now()) / 1000)); showTime(); | + | |
| - | if (tLeft <= 0) { clearInterval(tTimer); | + | |
| - | } | + | |
| - | startBtn.addEventListener(' | + | |
| - | if (tTimer) { clearInterval(tTimer); | + | |
| - | if (tLeft <= 0) tLeft = tTotal; | + | |
| - | tEnd = Date.now() + tLeft * 1000; tTimer = setInterval(tick, | + | |
| - | }); | + | |
| - | function resetTimer() { | + | |
| - | if (tTimer) { clearInterval(tTimer); | + | |
| - | tLeft = tTotal; startBtn.textContent = ' | + | |
| - | } | + | |
| - | document.getElementById(' | + | |
| - | document.querySelectorAll(' | + | |
| - | tTotal = +b.dataset.min * 60; | + | |
| - | document.querySelectorAll(' | + | |
| - | resetTimer(); | + | |
| - | })); | + | |
| </ | </ | ||
| - | </body> | + | </HTML> |
| - | </html> | + | |
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/pages/extras/codikon/p5js/wireframe-ideen-generator.txt · Last modified: by Leonie Winkelmann