Flowers on mesut · me https://mesut.me/flower/ Recent content in Flowers on mesut · me Hugo -- 0.161.1 en https://mesut.me/flower/bride/ Mon, 01 Jan 0001 00:00:00 +0000 https://mesut.me/flower/bride/ <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> <title>Ahsen Çiçek Atıyor!</title> <!-- ====================================================================== Paste the SAME Firebase config you used in participant.html. PASSCODE is only a light deterrent so a guest doesn't stumble onto this page — it is NOT real security. See README.md. ======================================================================= --> <script> const FIREBASE_CONFIG = { apiKey: "AIzaSyADvcKMNTQWDi6aEkeo4WIRCEQD6ELweEY", authDomain: "flower-thrower.firebaseapp.com", databaseURL: "https://flower-thrower-default-rtdb.europe-west1.firebasedatabase.app", projectId: "flower-thrower", }; const PASSCODE = "1234"; </script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700&family=Jost:wght@400;500;600&display=swap" rel="stylesheet"> <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-database-compat.js"></script> <style> :root { --ink-plum: #2B1620; --wine: #6B2737; --rose: #D98E9B; --gold: #C9A24B; --linen: #F6EDE4; --sage: #8A9A7E; --linen-dim: #EADFD2; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; font-family: 'Jost', sans-serif; background: var(--linen); color: var(--ink-plum); } h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; margin: 0; } button { font-family: 'Jost', sans-serif; cursor: pointer; border: none; } #app { position: fixed; inset: 0; width: 100vw; height: 100dvh; } .screen { position: absolute; inset: 0; display: none; flex-direction: column; } .screen.active { display: flex; } /* ---------- Passcode gate ---------- */ #screen-gate { align-items: center; justify-content: center; text-align: center; padding: 8vw; background: radial-gradient(circle at 50% 20%, var(--linen-dim), var(--linen) 70%); } #screen-gate h1 { color: var(--wine); font-size: clamp(24px, 6vw, 32px); margin-bottom: 18px; } #gateInput { font-size: 18px; padding: 14px 18px; border-radius: 999px; border: 1.5px solid #d8c3ae; text-align: center; letter-spacing: .3em; width: 180px; outline: none; } #gateBtn { display: block; margin: 16px auto 0; background: var(--wine); color: var(--linen); padding: 13px 28px; border-radius: 999px; font-size: 14px; } /* ---------- Control panel ---------- */ #screen-panel { background: var(--linen); } .panel-header { padding: 16px 18px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e3d3c1; } .panel-header .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wine); opacity: .8; } .panel-header h2 { font-size: 20px; } #resetBtn { background: none; color: var(--wine); font-size: 12px; text-decoration: underline; opacity: .7; padding: 6px; } .grid { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; align-content: start; } .chip { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .25); transition: transform .15s, opacity .2s; } .chip:active { transform: scale(.94); } .chip .dot { width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); } .chip .nm { font-size: 11.5px; text-align: center; line-height: 1.2; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip.eliminated { opacity: .4; } .chip.eliminated .dot::after { content: '✕'; } .chip .dot { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; } .empty-hint { color: #a68a75; font-size: 13px; text-align: center; padding: 40px 20px; grid-column: 1/-1; } .panel-footer { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #e3d3c1; display: flex; gap: 10px; } .count-pill { align-self: center; font-size: 12.5px; color: var(--sage); flex: 1; } #startTossBtn { background: var(--wine); color: var(--linen); padding: 15px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 500; } #startTossBtn:disabled { opacity: .4; } /* ---------- Toss / drag screen ---------- */ #screen-toss { background: radial-gradient(ellipse at 50% 30%, #3a1f2c, var(--ink-plum) 65%); touch-action: none; } #tossHeader { position: absolute; top: 0; left: 0; right: 0; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; z-index: 20; } #tossHeader .eyebrow { color: var(--rose); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } #cancelTossBtn { background: rgba(255, 255, 255, .1); color: var(--linen); padding: 8px 14px; border-radius: 999px; font-size: 12px; } #dropZone { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); width: 60vw; max-width: 260px; height: 14vh; max-height: 110px; border: 2px dashed var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; text-align: center; opacity: .75; transition: opacity .2s, background .2s; } #dropZone.armed { opacity: 1; background: rgba(201, 162, 75, .12); } #flowerWrap { position: absolute; width: 24vw; max-width: 120px; min-width: 70px; height: 24vw; max-height: 120px; min-height: 70px; transform: translate(-50%, -50%); left: 50%; top: 78%; filter: drop-shadow(0 0 18px rgba(201, 162, 75, .55)); cursor: grab; } #flowerWrap img{ width:100%; height:100%; object-fit:contain; pointer-events:none; } #flowerWrap.dragging { cursor: grabbing; } #tossFooter { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 16px calc(18px + env(safe-area-inset-bottom)); text-align: center; color: #d8c3ae; font-size: 12.5px; z-index: 20; } /* ---------- Result screen ---------- */ #screen-result { align-items: center; justify-content: center; text-align: center; padding: 8vw; background: radial-gradient(ellipse at 50% 30%, #3a1f2c, var(--ink-plum) 70%); } #screen-result .eyebrow { color: var(--rose); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } #screen-result h2 { color: var(--linen); font-size: clamp(22px, 6vw, 28px); margin: 10px 0 6px; } #resultName { color: var(--gold); font-style: italic; font-size: clamp(30px, 9vw, 40px); } #playAgainBtn { margin-top: 26px; background: var(--gold); color: var(--ink-plum); padding: 14px 26px; border-radius: 999px; font-size: 14px; font-weight: 600; } </style> </head> <body> <div id="app"> <div class="screen active" id="screen-gate"> <h1>Gelin Girişi</h1> <input id="gateInput" type="password" inputmode="numeric" maxlength="8" placeholder="••••"> <button id="gateBtn">Gir</button> </div> <div class="screen" id="screen-panel"> <div class="panel-header"> <div> <div class="eyebrow">Ahsen Çiçek Atıyor!</div> <h2>Kimler devam etsin?</h2> </div> <button id="resetBtn">En baştan başla</button> </div> <div class="grid" id="grid"></div> <div class="panel-footer"> <div class="count-pill" id="countPill">0 bekleyen</div> <button id="startTossBtn" disabled>Çiçeği Gönder →</button> </div> </div> <div class="screen" id="screen-toss"> <div id="tossHeader"> <div class="eyebrow">Çiçeği sürükle ve bırak</div> <button id="cancelTossBtn">Geri</button> </div> <div id="dropZone">Buraya bırak</div> <div id="flowerWrap"><img src="../bouqet.png" alt=""></div> <div id="tossFooter">Tüm katılımcılar çiçeği canlı olarak izleyecek.</div> </div> <div class="screen" id="screen-result"> <div class="eyebrow">Çiçeğin Talihlisi</div> <div id="resultName">—</div> <h2>Çiçeği aldı!</h2> <button id="playAgainBtn">Panele geri dön.</button> </div> </div> <svg width="0" height="0" style="position:absolute"> <defs> <g id="flowerShape"> <path d="M50 8 C60 8 66 20 60 30 C72 26 84 34 82 46 C90 52 90 64 80 68 C84 80 74 90 62 86 C60 96 48 100 40 92 C30 98 18 90 20 80 C8 82 2 70 10 60 C0 54 2 42 14 38 C10 26 20 14 32 18 C34 8 44 4 50 8 Z" opacity="0.95" /> <circle cx="50" cy="50" r="11" fill="#2B1620" opacity="0.35" /> </g> </defs> </svg> <script> firebase.initializeApp(FIREBASE_CONFIG); const db = firebase.database(); // ---------- passcode gate ---------- document.getElementById('gateBtn').addEventListener('click', tryGate); document.getElementById('gateInput').addEventListener('keydown', e => { if (e.key === 'Enter') tryGate(); }); function tryGate() { if (document.getElementById('gateInput').value === PASSCODE) { switchScreen('panel'); } else { document.getElementById('gateInput').value = ''; document.getElementById('gateInput').placeholder = 'Try again'; } } const screens = { gate: document.getElementById('screen-gate'), panel: document.getElementById('screen-panel'), toss: document.getElementById('screen-toss'), result: document.getElementById('screen-result'), }; function switchScreen(name) { Object.values(screens).forEach(s => s.classList.remove('active')); screens[name].classList.add('active'); } // ---------- participant grid ---------- let participants = {}; // id -> data const grid = document.getElementById('grid'); db.ref('participants').on('value', snap => { participants = snap.val() || {}; renderGrid(); }); function renderGrid() { const entries = Object.entries(participants).sort((a, b) => (a[1].joinedAt || 0) - (b[1].joinedAt || 0)); if (entries.length === 0) { grid.innerHTML = '<div class="empty-hint">Katılımcıların girişi bekleniyor…</div>'; } else { grid.innerHTML = entries.map(([id, p]) => ` <div class="chip ${p.status === 'eliminated' ? 'eliminated' : ''}" data-id="${id}"> <div class="dot" style="background:${p.color}"></div> <!--div class="nm">${escapeHtml(p.name)}</div--!> </div> `).join(''); } const waitingCount = entries.filter(([, p]) => p.status === 'waiting').length; document.getElementById('countPill').textContent = waitingCount + ' bekleyen kişi · ' + entries.length + ' toplam kişi'; document.getElementById('startTossBtn').disabled = waitingCount < 1; grid.querySelectorAll('.chip').forEach(chip => { chip.addEventListener('click', () => toggleEliminate(chip.dataset.id)); }); } function escapeHtml(s) { return s.replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m])); } function toggleEliminate(id) { const p = participants[id]; if (!p) return; const nextStatus = p.status === 'eliminated' ? 'waiting' : 'eliminated'; db.ref('participants/' + id + '/status').set(nextStatus); } // ---------- reset ---------- document.getElementById('resetBtn').addEventListener('click', async () => { if (!confirm('This permanently deletes everything in the database — every guest, colour, and result. Use this only to rehearse. Continue?')) return; await db.ref().remove(); // wipes the entire database, not just known fields await db.ref().set({ state: 'registration', meta: { nextColorIndex: 0 } }); // minimal state so the app is usable again switchScreen('panel'); }); // ---------- begin toss ---------- document.getElementById('startTossBtn').addEventListener('click', () => { db.ref('state').set('tossing'); db.ref('flower').set({ x: 50, y: 78, visible: true, dragging: false }); resetFlowerPosition(); switchScreen('toss'); }); document.getElementById('cancelTossBtn').addEventListener('click', () => { db.ref('state').set('registration'); switchScreen('panel'); }); // ---------- drag logic ---------- const flowerWrap = document.getElementById('flowerWrap'); const dropZone = document.getElementById('dropZone'); let dragging = false; let lastX = 50, lastY = 78; let rafPending = false; function pctFromEvent(e) { const point = e.touches ? e.touches[0] : e; const x = (point.clientX / window.innerWidth) * 100; const y = (point.clientY / window.innerHeight) * 100; return { x: Math.max(2, Math.min(98, x)), y: Math.max(2, Math.min(98, y)) }; } function inDropZone(x, y) { return y < 20; // top ~1/5 of the screen counts as the drop zone } function onDragStart(e) { dragging = true; flowerWrap.classList.add('dragging'); onDragMove(e); } function onDragMove(e) { if (!dragging) return; e.preventDefault(); const { x, y } = pctFromEvent(e); lastX = x; lastY = y; flowerWrap.style.left = x + '%'; flowerWrap.style.top = y + '%'; dropZone.classList.toggle('armed', inDropZone(x, y)); if (!rafPending) { rafPending = true; requestAnimationFrame(() => { db.ref('flower').update({ x: lastX, y: lastY, dragging: true }); rafPending = false; }); } } function onDragEnd() { if (!dragging) return; dragging = false; flowerWrap.classList.remove('dragging'); dropZone.classList.remove('armed'); if (inDropZone(lastX, lastY)) { selectWinner(); } else { resetFlowerPosition(); } } function resetFlowerPosition() { lastX = 50; lastY = 78; flowerWrap.style.left = '50%'; flowerWrap.style.top = '78%'; db.ref('flower').update({ x: 50, y: 78, dragging: false }); } flowerWrap.addEventListener('mousedown', onDragStart); window.addEventListener('mousemove', onDragMove); window.addEventListener('mouseup', onDragEnd); flowerWrap.addEventListener('touchstart', onDragStart, { passive: false }); window.addEventListener('touchmove', onDragMove, { passive: false }); window.addEventListener('touchend', onDragEnd); // ---------- winner selection ---------- function selectWinner() { const candidates = Object.entries(participants).filter(([, p]) => p.status === 'waiting'); if (candidates.length === 0) { alert('No one is left to receive the flower — eliminate fewer guests, or add more.'); resetFlowerPosition(); return; } const [winnerId, winnerData] = candidates[Math.floor(Math.random() * candidates.length)]; db.ref('flower/visible').set(false); db.ref('participants/' + winnerId + '/status').set('winner'); db.ref('winner').set({ id: winnerId, name: winnerData.name, color: winnerData.color }); db.ref('state').set('result'); document.getElementById('resultName').textContent = winnerData.name; switchScreen('result'); } document.getElementById('playAgainBtn').addEventListener('click', () => { switchScreen('panel'); }); </script> </body> </html> https://mesut.me/flower/participant/ Mon, 01 Jan 0001 00:00:00 +0000 https://mesut.me/flower/participant/ <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> <title>Ahsen Çiçek Atıyor!</title> <!-- ====================================================================== SETUP — fill these in before the wedding: 1. FIREBASE CONFIG below (from your Firebase project settings) 2. EVENT CONFIG below (couple's names, date, location for the certificate) See README.md for full setup steps. ======================================================================= --> <script> const FIREBASE_CONFIG = { apiKey: "AIzaSyADvcKMNTQWDi6aEkeo4WIRCEQD6ELweEY", authDomain: "flower-thrower.firebaseapp.com", databaseURL: "https://flower-thrower-default-rtdb.europe-west1.firebasedatabase.app", projectId: "flower-thrower", }; const EVENT_CONFIG = { coupleNames: "Ahsen & Mesut", date: "Ağustos 2026", location: "Aydın & İstanbul", }; const FLOWER_URL = "../bouqet.png"; </script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@400;500;600&display=swap" rel="stylesheet"> <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-database-compat.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <style> :root { --ink-plum: #2B1620; --wine: #6B2737; --rose: #D98E9B; --gold: #C9A24B; --linen: #F6EDE4; --sage: #8A9A7E; --linen-dim: #EADFD2; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; font-family: 'Jost', sans-serif; background: var(--linen); color: var(--ink-plum); -webkit-tap-highlight-color: transparent; } #app { position: fixed; inset: 0; width: 100vw; height: 100dvh; } .screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 8vw; opacity: 0; pointer-events: none; transition: opacity .5s ease; } .screen.active { opacity: 1; pointer-events: auto; } h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; margin: 0; } .eyebrow { font-family: 'Jost', sans-serif; letter-spacing: .25em; text-transform: uppercase; font-size: 16px; color: var(--wine); opacity: .75; margin-bottom: 14px; } p { line-height: 1.5; } /* ---------- Registration ---------- */ #screen-register { background: radial-gradient(circle at 50% 20%, var(--linen-dim), var(--linen) 70%); } .watermark-flower { position: absolute; opacity: .08; width: 70vw; max-width: 420px; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; object-fit:contain; } #screen-register h1 { font-size: clamp(28px, 7vw, 44px); color: var(--wine); position: relative; } #screen-register .sub { font-size: 18px; color: #5a4048; margin: 10px 0 32px; position: relative; } .name-form { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 340px; } input#nameInput { font-family: 'Jost', sans-serif; font-size: 17px; padding: 16px 18px; border-radius: 999px; border: 1.5px solid #d8c3ae; background: #fff; color: var(--ink-plum); text-align: center; outline: none; } input#nameInput:focus { border-color: var(--gold); } button { font-family: 'Jost', sans-serif; cursor: pointer; border: none; } .btn-primary { background: var(--wine); color: var(--linen); font-size: 15px; letter-spacing: .05em; padding: 16px 18px; border-radius: 999px; font-weight: 500; transition: transform .15s ease, background .2s; } .btn-primary:active { transform: scale(.97); } .btn-primary:disabled { opacity: .5; } /* ---------- Waiting ---------- */ #screen-waiting { background: var(--linen); } .color-orb { width: 132px; height: 132px; border-radius: 50%; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px #fff, 0 12px 30px -8px rgba(0, 0, 0, .25); animation: breathe 3.2s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .color-orb svg { width: 58%; height: 58%; } .waitingName { font-size: clamp(22px, 6vw, 30px); } #screen-waiting .sub { color: #5a4048; margin-top: 8px; font-size: 14.5px; max-width: 300px; } .pulse-dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--wine); margin: 0 3px; opacity: .35; animation: pulse 1.4s infinite; } .pulse-dots span:nth-child(2) { animation-delay: .2s; } .pulse-dots span:nth-child(3) { animation-delay: .4s; } @keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } } /* ---------- Eliminated toast ---------- */ #eliminatedToast { position: fixed; left: 50%; bottom: 8vh; transform: translate(-50%, 20px); background: var(--ink-plum); color: var(--linen); padding: 16px 22px; border-radius: 16px; max-width: 86vw; font-size: 14.5px; line-height: 1.5; text-align: center; z-index: 50; opacity: 0; transition: opacity .5s ease, transform .5s ease; pointer-events: none; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4); } #eliminatedToast.show { opacity: 1; transform: translate(-50%, 0); } #eliminatedToast .eyebrow { color: var(--gold); } /* ---------- Tossing (full bleed, percentage-positioned flower) ---------- */ #screen-tossing { background: radial-gradient(ellipse at 50% 30%, #3a1f2c, var(--ink-plum) 65%); overflow: hidden; } #screen-tossing .hint { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); color: var(--rose); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; } #dimOverlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(1px); display: none; z-index: 5; } #dimOverlay.on { display: block; } #flowerWrap { position: absolute; width: 22vw; max-width: 110px; min-width: 64px; height: 22vw; max-height: 110px; min-height: 64px; transform: translate(-50%, -50%); left: 50%; top: 70%; transition: top .35s ease, left .35s ease; filter: drop-shadow(0 0 18px rgba(201, 162, 75, .55)); } #flowerWrap svg { width: 100%; height: 100%; object-fit:contain; } #flowerWrap.eliminated-flower { opacity: .45; } /* ---------- Result: winner certificate ---------- */ #screen-winner { background: linear-gradient(180deg, #3a1f2c, var(--ink-plum)); overflow-y: auto; padding: 6vh 6vw; } .certificate { background: var(--linen); border-radius: 6px; padding: 38px 26px; width: 100%; max-width: 380px; border: 2px solid var(--gold); position: relative; margin: 0 auto; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); } .certificate::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--gold); opacity: .55; pointer-events: none; border-radius: 2px; } .certificate .eyebrow { color: var(--wine); } .certificate .flowerIcon { width: 56px; height: 56px; margin: 6px auto 14px; object-fit:contain; } .certificate h2 { font-size: clamp(24px, 6vw, 32px); color: var(--wine); margin-bottom: 6px; } .certificate .winnerName { font-size: clamp(30px, 8vw, 42px); color: var(--ink-plum); font-style: italic; margin: 8px 0 16px; } .certificate p.msg { font-size: 14px; color: #5a4048; line-height: 1.6; margin: 0 0 6px; } .certificate .meta { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #d8c3ae; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); } .btn-download { margin-top: 22px; background: var(--gold); color: var(--ink-plum); padding: 15px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; letter-spacing: .03em; width: 100%; max-width: 380px; } /* ---------- Result: someone else won ---------- */ #screen-lost { background: radial-gradient(ellipse at 50% 30%, #3a1f2c, var(--ink-plum) 70%); } #screen-lost .eyebrow { color: var(--rose); } #screen-lost h2 { color: var(--linen); font-size: clamp(24px, 7vw, 34px); } #screen-lost .winnerLine { color: var(--gold); font-style: italic; font-size: clamp(26px, 8vw, 36px); margin: 10px 0; } #screen-lost p { color: #d8c3ae; font-size: 18px; max-width: 320px; } </style> </head> <body> <div id="app"> <!-- 1. Registration --> <div class="screen active" id="screen-register"> <!-- <svg class="watermark-flower" viewBox="0 0 100 100"><use href="#flowerShape" fill="#6B2737"/></svg> --> <img src="../bouqet.png" alt="Flower"> <div class="eyebrow">Ahsen Birazdan Çiçeğini Atacak!</div> <h1>Çiçeği kazanma şansını yakala...</h1> <p class="sub">Ön elemeden sonra finale kalan kişiler gelinin attığı çiçeğin rastgele düşüşüne göre seçilecek.</p> https://mesut.me/flower/readme/ Mon, 01 Jan 0001 00:00:00 +0000 https://mesut.me/flower/readme/ <h1 id="find-your-fate--setup-guide">Find Your Fate — setup guide</h1> <p>Two pages:</p> <ul> <li><strong>participant.html</strong> — the URL you send to guests (name entry → wait → live flower → certificate)</li> <li><strong>bride.html</strong> — the URL only the bride uses (tap to eliminate → drag-and-release the flower)</li> </ul> <p>No server needed. Both pages talk directly to Firebase Realtime Database from the browser.</p>