鍥㈠缓瀹夋帓路澶у鏉ユ姇绁?/title> <style> :root{ --blue:#1677ff; --blue-deep:#0b5ed7; --blue-soft:#eef4ff; --blue-line:#bcd5ff; --ink:#1b1f27; --ink-2:#5c6474; --ink-3:#939bad; --line:#e8ecf3; --bg:#f5f7fb; --card:#ffffff; --gold:#f0a020; --green:#12a150; --red:#e5484d; --r:18px; --shadow:0 1px 2px rgba(20,40,80,.04), 0 6px 18px rgba(20,40,80,.05); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ background:var(--bg);color:var(--ink); font:15px/1.62 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom); } button{font-family:inherit} input,textarea{font-family:inherit} .wrap{max-width:560px;margin:0 auto;padding:0 16px 40px} .hero{padding:26px 4px 18px} .hero-badge{ display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--blue); background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:999px;padding:3px 10px; } .hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--blue);display:block} .hero h1{margin:12px 0 4px;font-size:26px;line-height:1.25;letter-spacing:-.5px;font-weight:700} .hero p{margin:0;color:var(--ink-2);font-size:14px} .card{ background:var(--card);border-radius:var(--r);box-shadow:var(--shadow); padding:18px;margin-bottom:14px;border:1px solid rgba(232,236,243,.9); } .card-hd{display:flex;align-items:center;gap:9px;margin-bottom:14px} .step{ width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff; font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;margin-top:-1px; } .card-hd h2{font-size:16px;margin:0;font-weight:650;letter-spacing:-.2px} .card-hd .hint{font-size:12px;color:var(--ink-3);margin-left:auto;font-weight:400} .opt-list{display:flex;flex-direction:column;gap:9px} .opt{ display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px; padding:13px 14px;cursor:pointer;background:#fff;transition:border-color .16s,background .16s,transform .08s; } .opt:active{transform:scale(.988)} .opt .tick{width:21px;height:21px;border-radius:50%;border:1.5px solid #cdd4e0;flex:none;position:relative;background:#fff;transition:all .16s} .opt .tick::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg);opacity:0;transition:opacity .12s} .opt .t1{font-size:15px;line-height:1.35;font-weight:500} .opt.on{border-color:var(--blue);background:var(--blue-soft)} .opt.on .tick{background:var(--blue);border-color:var(--blue)} .opt.on .tick::after{opacity:1} .act-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .act{ border:1.5px solid var(--line);border-radius:14px;padding:14px 12px;display:flex;align-items:center;gap:10px; cursor:pointer;background:#fff;transition:border-color .16s,background .16s,transform .08s; } .act:active{transform:scale(.98)} .act .ico{width:26px;height:26px;flex:none;color:var(--ink-2);transition:color .16s} .act .ico svg{width:26px;height:26px;display:block} .act .nm{font-size:14.5px;font-weight:500;line-height:1.2} .act.on{border-color:var(--blue);background:var(--blue-soft)} .act.on .ico{color:var(--blue)} .act.on .nm{color:var(--blue-deep);font-weight:600} .field{margin-top:2px} .field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:7px} .input{ width:100%;height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px; font-size:16px;color:var(--ink);background:#fff;outline:none;transition:border-color .16s,box-shadow .16s; } .input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,119,255,.1)} .input::placeholder{color:#b3bac7} textarea.input{height:auto;min-height:120px;padding:12px 14px;line-height:1.6;resize:vertical} .btn{ width:100%;height:50px;border:0;border-radius:14px;background:var(--blue);color:#fff; font-size:16px;font-weight:600;letter-spacing:.3px;cursor:pointer;margin-top:14px; transition:background .16s,transform .08s;box-shadow:0 6px 16px rgba(22,119,255,.24); } .btn:active{transform:scale(.985)} .btn:disabled{background:#b9c9e6;box-shadow:none;cursor:not-allowed} .btn.ghost{background:#fff;color:var(--blue);border:1.5px solid var(--blue-line);box-shadow:none} .btn.sm{height:42px;font-size:14px;border-radius:12px;margin-top:10px} .btn-row{display:flex;gap:10px} .btn-row .btn{margin-top:0} .res-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:2px} .res-hd h2{font-size:16px;margin:0;font-weight:650} .res-meta{font-size:12px;color:#8f97a6;margin-left:auto;display:flex;align-items:center;gap:5px} .dot-live{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block} .bar-item{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:9px;background:#fff;transition:all .2s} .bar-item.zero{padding:9px 14px} .bar-item.zero .bar-name{color:var(--ink-3);font-weight:400} .bar-item.top{border-color:var(--blue-line);background:linear-gradient(180deg,#f3f8ff,#eef4ff);border-width:1.5px} .bar-head{display:flex;align-items:center;gap:8px} .bar-name{font-size:14.5px;font-weight:500;line-height:1.35;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bar-num{font-size:15px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums} .bar-item.top .bar-num{color:var(--blue)} .bar-num small{font-size:11px;font-weight:500;color:var(--ink-3);margin-left:2px} .crown{font-size:10.5px;background:var(--gold);color:#fff;border-radius:6px;padding:1.5px 6px;font-weight:600;letter-spacing:.3px;flex:none;margin-right:2px} .track{height:5px;border-radius:3px;background:#edf0f6;margin-top:9px;overflow:hidden} .track i{display:block;height:100%;border-radius:3px;background:#c3d2ea;transition:width .45s ease} .bar-item.top .track i{background:linear-gradient(90deg,#4d97ff,#1677ff)} .who{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px} .who span{font-size:11.5px;color:var(--ink-2);background:#f1f4f9;border-radius:6px;padding:2px 7px;line-height:1.5} .bar-item.top .who span{background:rgba(255,255,255,.85);color:var(--blue-deep)} .rec{ background:linear-gradient(135deg,#1677ff 0%,#3b8dff 55%,#5aa3ff 100%); color:#fff;border-radius:var(--r);padding:20px;margin-bottom:14px; box-shadow:0 10px 26px rgba(22,119,255,.28);position:relative;overflow:hidden; } .rec::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;background:rgba(255,255,255,.1);border-radius:50%} .rec-label{font-size:12px;opacity:.85;letter-spacing:1px;display:flex;align-items:center;gap:6px} .rec-main{font-size:22px;font-weight:700;line-height:1.35;margin:8px 0 6px;letter-spacing:-.3px;position:relative;z-index:1;word-break:break-word} .rec-sub{font-size:12.5px;opacity:.86} .rec .split{opacity:.5;margin:0 6px;font-weight:400} .empty{text-align:center;padding:26px 10px;color:var(--ink-3);font-size:13.5px} .notice{border-radius:12px;padding:10px 13px;font-size:13px;line-height:1.5;margin-bottom:12px;border:1px solid;display:flex;gap:8px} .notice.warn{background:#fff8ec;border-color:#ffe0b2;color:#8a5a00} .notice.err{background:#fff1f1;border-color:#ffd0d0;color:#a02323} .notice.ok{background:#eefaf2;border-color:#c6eed7;color:#0b6b38} .c-input-row{display:flex;gap:8px;align-items:center;margin-bottom:8px} .c-input{flex:1;height:42px;border:1.5px solid var(--line);border-radius:11px;padding:0 12px;font-size:15px;outline:none;background:#fff} .c-input:focus{border-color:var(--blue)} .c-del{width:32px;height:32px;border:0;background:#f4f6fa;color:#98a0b0;border-radius:9px;font-size:16px;line-height:1;cursor:pointer;flex:none} .c-del:active{background:#e9edf5} .add-btn{width:100%;height:40px;border:1.5px dashed #d3dae6;border-radius:11px;background:#fbfcfe;color:var(--ink-2);font-size:14px;cursor:pointer;margin-top:2px} .add-btn:active{background:#f2f5fa} .link-box{background:#f6f9ff;border:1.5px solid var(--blue-line);border-radius:12px;padding:11px 13px;font-size:13px;color:var(--blue-deep);word-break:break-all;line-height:1.5;max-height:130px;overflow:auto} .copy-ok{color:var(--green);font-size:12.5px;margin-top:8px;display:none} .foot{text-align:center;color:#b6bdca;font-size:11.5px;padding:18px 0 4px;line-height:1.7} .toast{ position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);background:rgba(27,31,39,.92); color:#fff;font-size:13.5px;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none; transition:all .26s;z-index:99;max-width:80vw;text-align:center; } .toast.show{opacity:1;transform:translate(-50%,0)} .tabs{display:flex;gap:8px;margin-bottom:14px} .tab{ flex:1;height:38px;border-radius:11px;border:1.5px solid var(--line);background:#fff; color:var(--ink-2);font-size:14px;cursor:pointer; } .tab.on{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-deep);font-weight:600} @media (max-width:360px){ .act-grid{grid-template-columns:1fr} .hero h1{font-size:23px} } ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-thumb{background:#d5dbe6;border-radius:3px} ::-webkit-scrollbar-track{background:transparent} </style> </head> <body> <div class="wrap"> <header class="hero"> <div class="hero-badge"><i></i><span id="badgeText">鍥㈠缓绛瑰</span></div> <h1 id="pageTitle">鍥㈠缓瀹夋帓</h1> <p id="pageSub">閫変釜澶у閮芥柟渚跨殑鏃堕棿锛屼竴璧峰幓鐜?/p> </header> <main id="main"></main> <div class="foot" id="foot">鏁版嵁鍙瓨鍦ㄩ摼鎺ラ噷路涓嶄笂浼犳湇鍔″櫒路鏃犻渶鐧诲綍</div> </div> <div class="toast" id="toast"></div> <script> (function(){ 'use strict'; var NICK_KEY = 'tjvote.nick'; var S = { cfg: null, votes: [], me: { name: '', t: [], a: [] }, cParam: '', dirty: false }; /* ---------- 鍩虹宸ュ叿 ---------- */ function $(id){ return document.getElementById(id); } function esc(s){ return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){ return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]; }); } function toast(msg){ var t = $('toast'); t.textContent = msg; t.classList.add('show'); clearTimeout(t._tm); t._tm = setTimeout(function(){ t.classList.remove('show'); }, 2200); } function getP(name){ var m = location.search.match(new RegExp('[?&]' + name + '=([^&#]*)')); return m ? m[1] : ''; } function b64e(str){ var bytes = new TextEncoder().encode(str); var bin = ''; for(var i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]); return btoa(bin).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,''); } function b64d(str){ str = str.replace(/-/g,'+').replace(/_/g,'/'); while(str.length % 4) str += '='; var bin = atob(str); var bytes = new Uint8Array(bin.length); for(var i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i); return new TextDecoder().decode(bytes); } function encObj(o){ return b64e(JSON.stringify(o)); } function decObj(s){ try{ return JSON.parse(b64d(s)); }catch(e){ return null; } } function copyText(text){ if(navigator.clipboard && window.isSecureContext){ return navigator.clipboard.writeText(text).catch(function(){ return fallbackCopy(text); }); } return fallbackCopy(text); } function fallbackCopy(text){ return new Promise(function(resolve, reject){ var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'fixed'; ta.style.left = '-9999px'; ta.style.top = '0'; document.body.appendChild(ta); ta.select(); ta.setSelectionRange(0, ta.value.length); var ok = false; try { ok = document.execCommand('copy'); } catch(e){} document.body.removeChild(ta); ok ? resolve() : reject(new Error('copy failed')); }); } /* ---------- 鍥炬爣 ---------- */ var ICONS = { meal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12h17"/><path d="M5 12a7 7 0 0 0 14 0"/><path d="M3 20.5h18"/><path d="M7.5 8.5c0-1 .7-1.4.7-2.4"/><path d="M12 8c0-1 .7-1.4.7-2.4"/><path d="M16.5 8.5c0-1 .7-1.4.7-2.4"/></svg>', script: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4H20v13H6.5A2.5 2.5 0 0 0 4 19.5z"/><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20v3H6.5"/><path d="M8.5 8h7"/><path d="M8.5 11.5h4.5"/></svg>', hike: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 19.5 9 8l3.2 5.4"/><path d="M7.2 19.5 14 6l7.5 13.5z"/><path d="M11.6 13.5h4.6"/></svg>', camp: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5 3 20h18z"/><path d="M12 9.5 8 20"/><path d="M12 9.5 16 20"/><path d="M2 20h20"/></svg>', ktv: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="8.5" y="2.5" width="7" height="11" rx="3.5"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0"/><path d="M12 17.5V21"/><path d="M8.5 21h7"/></svg>', other: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M8.5 12h7"/><path d="M12 8.5v7"/></svg>' }; function iconFor(label){ var s = String(label || ''); if(/椁恷鍚億楗瓅鐑х儰|鐏攨/.test(s)) return ICONS.meal; if(/鍓ф湰|妗屾父|鐙间汉|瀵嗗/.test(s)) return ICONS.script; if(/鐖北|寰掓|鐧诲北|閮婃父/.test(s)) return ICONS.hike; if(/鍩哄湴|鎷撳睍|闇茶惀|鍥㈠缓/.test(s)) return ICONS.camp; if(/KTV|鍞辨瓕|姝?.test(s)) return ICONS.ktv; return ICONS.other; } /* ---------- 鏁版嵁 ---------- */ function parseVotes(str){ if(!str) return []; var o = decObj(str); if(!o || !Array.isArray(o.v)) return []; return o.v.filter(function(x){ return x && x.n && Array.isArray(x.t) && Array.isArray(x.a); }).map(function(x){ return { n: String(x.n).slice(0,16), t: x.t.filter(isNum), a: x.a.filter(isNum) }; }); } function isNum(x){ return typeof x === 'number' && isFinite(x); } function cfgHash(){ var s = JSON.stringify(S.cfg || {}); var h = 0; for(var i = 0; i < s.length; i++){ h = ((h << 5) - h + s.charCodeAt(i)) | 0; } return 'h' + Math.abs(h); } function buildUrl(withVotes){ var q = '?c=' + S.cParam; if(withVotes && S.votes.length) q += '&v=' + encObj({ v: S.votes }); return location.origin + location.pathname + q; } /* ---------- 缁熻 ---------- */ function tally(cfg, votes){ var tm = [], ac = []; cfg.m.forEach(function(label, i){ tm.push({ i: i, label: label, who: [] }); }); cfg.a.forEach(function(label, i){ ac.push({ i: i, label: label, who: [] }); }); votes.forEach(function(v){ (v.t || []).forEach(function(i){ if(tm[i]) tm[i].who.push(v.n); }); (v.a || []).forEach(function(i){ if(ac[i]) ac[i].who.push(v.n); }); }); var tMax = 0, aMax = 0; tm.forEach(function(x){ if(x.who.length > tMax) tMax = x.who.length; }); ac.forEach(function(x){ if(x.who.length > aMax) aMax = x.who.length; }); return { tm: tm, ac: ac, tMax: tMax, aMax: aMax, tTop: tMax >= 2 ? tm.filter(function(x){ return x.who.length === tMax; }) : [], aTop: aMax >= 2 ? ac.filter(function(x){ return x.who.length === aMax; }) : [], total: votes.length }; } function joinTop(arr){ if(arr.length <= 2) return arr.map(function(x){ return x.label; }).join(' 鎴?'); return arr.slice(0,2).map(function(x){ return x.label; }).join(' 鎴?') + ' 绛?' + arr.length + ' 涓?; } /* ---------- 娓叉煋锛氬垱寤?---------- */ function renderCreate(){ $('pageTitle').textContent = '鍙戣捣涓€涓洟寤烘姇绁?; $('pageSub').textContent = '濉ソ澶囬€夋椂闂村拰娲诲姩锛岀敓鎴愰摼鎺ュ彂鍒扮兢閲?; $('badgeText').textContent = '鏂板缓鎶曠エ'; $('foot').textContent = '鐢熸垚閾炬帴鍚庯紝鎶婇摼鎺ュ彂鍒扮兢閲岋紝澶у鐐瑰紑灏辫兘鎶?; var times = ['11鏈?4鏃?鍛ㄥ叚鍏ㄥぉ','11鏈?5鏃?鍛ㄦ棩鍏ㄥぉ','11鏈?1鏃?鍛ㄥ叚鍏ㄥぉ','11鏈?2鏃?鍛ㄦ棩鍏ㄥぉ','宸ヤ綔鏃ユ櫄涓?18:30 鍚?]; var acts = ['鑱氶','鍓ф湰鏉€','鐖北','鍥㈠缓鍩哄湴','KTV']; var h = ''; h += '<div class="card"><div class="card-hd"><span class="step">1</span><h2>鎶曠エ涓婚</h2></div>'; h += '<div class="field"><label>鏍囬</label><input class="input" id="cTitle" maxlength="20" value="鍥㈠缓瀹夋帓"></div>'; h += '<div class="field" style="margin-top:10px"><label>涓€鍙ヨ瘽璇存槑</label><input class="input" id="cSub" maxlength="30" value="閫変釜澶у閮芥柟渚跨殑鏃堕棿锛屼竴璧峰幓鐜?></div></div>'; h += '<div class="card"><div class="card-hd"><span class="step">2</span><h2>澶囬€夋椂闂?/h2><span class="hint">鍙閫?/span></div>'; h += '<div id="cTimes"></div><button class="add-btn" id="addTime">锛?娣诲姞涓€涓椂闂?/button></div>'; h += '<div class="card"><div class="card-hd"><span class="step">3</span><h2>澶囬€夋椿鍔?/h2><span class="hint">鍙閫?/span></div>'; h += '<div id="cActs"></div><button class="add-btn" id="addAct">锛?娣诲姞涓€涓椿鍔?/button></div>'; h += '<div class="card"><button class="btn" id="doCreate">鐢熸垚鎶曠エ閾炬帴</button>'; h += '<div style="font-size:12px;color:#939bad;text-align:center;margin-top:10px;line-height:1.6">閫夐」鍚嶇О閲屽埆鐢ㄩ】鍙枫€屻€併€嶅拰绔栫嚎銆岋綔銆嶏紝浼氬奖鍝嶆眹鎬昏瘑鍒?/div></div>'; $('main').innerHTML = h; function drawTimes(){ $('cTimes').innerHTML = times.map(function(v,i){ return '<div class="c-input-row"><input class="c-input" data-k="t" data-i="'+i+'" maxlength="30" value="'+esc(v)+'" placeholder="渚嬪锛?1鏈?4鏃?鍛ㄥ叚鍏ㄥぉ"><button class="c-del" data-k="t" data-i="'+i+'">脳</button></div>'; }).join(''); } function drawActs(){ $('cActs').innerHTML = acts.map(function(v,i){ return '<div class="c-input-row"><input class="c-input" data-k="a" data-i="'+i+'" maxlength="14" value="'+esc(v)+'" placeholder="渚嬪锛氳仛椁?><button class="c-del" data-k="a" data-i="'+i+'">脳</button></div>'; }).join(''); } drawTimes(); drawActs(); $('cTimes').addEventListener('input', function(e){ if(e.target.dataset.k === 't') times[+e.target.dataset.i] = e.target.value; }); $('cActs').addEventListener('input', function(e){ if(e.target.dataset.k === 'a') acts[+e.target.dataset.i] = e.target.value; }); $('cTimes').addEventListener('click', function(e){ var b = e.target.closest('.c-del'); if(!b) return; if(times.length <= 1){ toast('鑷冲皯淇濈暀涓€涓椂闂?); return; } times.splice(+b.dataset.i,1); drawTimes(); }); $('cActs').addEventListener('click', function(e){ var b = e.target.closest('.c-del'); if(!b) return; if(acts.length <= 1){ toast('鑷冲皯淇濈暀涓€涓椿鍔?); return; } acts.splice(+b.dataset.i,1); drawActs(); }); $('addTime').addEventListener('click', function(){ if(times.length >= 8){ toast('鏈€澶?8 涓椂闂?); return; } times.push(''); drawTimes(); }); $('addAct').addEventListener('click', function(){ if(acts.length >= 10){ toast('鏈€澶?10 涓椿鍔?); return; } acts.push(''); drawActs(); }); $('doCreate').addEventListener('click', function(){ var title = ($('cTitle').value || '').trim() || '鍥㈠缓瀹夋帓'; var sub = ($('cSub').value || '').trim() || '閫変釜澶у閮芥柟渚跨殑鏃堕棿锛屼竴璧峰幓鐜?; var tm = times.map(function(x){ return (x||'').trim(); }).filter(Boolean); var ac = acts.map(function(x){ return (x||'').trim(); }).filter(Boolean); if(tm.length < 2){ toast('鑷冲皯濉?2 涓閫夋椂闂?); return; } if(ac.length < 2){ toast('鑷冲皯濉?2 涓閫夋椿鍔?); return; } var all = tm.join('') + ac.join(''); if(/[銆侊綔|]/.test(all)){ toast('閫夐」鍚嶇О閲屽埆鐢ㄩ】鍙锋垨绔栫嚎'); return; } var cfg = { t: title, s: sub, m: tm, a: ac }; var c = encObj(cfg); var url = location.origin + location.pathname + '?c=' + c; renderCreated(url, cfg); }); } function renderCreated(url, cfg){ $('pageTitle').textContent = '閾炬帴宸茬敓鎴?; $('pageSub').textContent = '澶嶅埗涓嬮潰杩欐潯閾炬帴锛屽彂鍒扮兢閲屽氨鑳藉紑鎶?; $('badgeText').textContent = '鍒涘缓鎴愬姛'; $('foot').textContent = '鏁版嵁鍙瓨鍦ㄩ摼鎺ラ噷路涓嶄笂浼犳湇鍔″櫒路鏃犻渶鐧诲綍'; var h = ''; h += '<div class="card">'; h += '<div class="card-hd"><span class="step" style="background:#12a150">鉁?/span><h2>鎶婇摼鎺ュ彂鍒扮兢閲?/h2></div>'; h += '<div class="link-box" id="linkTxt">' + esc(url) + '</div>'; h += '<div class="btn-row" style="margin-top:12px"><button class="btn" id="copyLink">澶嶅埗閾炬帴</button><button class="btn ghost" id="goVote">鎴戝厛鎶?/button></div>'; h += '<div class="copy-ok" id="copyOk">宸插鍒讹紝鍘荤兢閲岀矘璐村惂</div></div>'; h += '<div class="card"><div class="card-hd"><span class="step">i</span><h2>鎬庝箞鐢?/h2></div>'; h += '<div style="font-size:13.5px;color:#5c6474;line-height:1.85">'; h += '1. 鎶婇摼鎺ュ彂鍒板井淇＄兢<br>'; h += '2. 澶у鐐瑰紑锛屽嬀鏃堕棿銆佸嬀娲诲姩銆佸～鏄电О锛岀偣鎻愪氦<br>'; h += '3. 鎻愪氦鍚庨〉闈㈡樉绀烘渶鏂扮エ鏁板拰銆岃皝閫夌殑銆嶏紝骞惰嚜鍔ㄩ珮浜エ鐜嬨€佺粰鍑烘帹鑽愭柟妗?br>'; h += '4. 姣忎釜浜虹偣銆屽鍒舵垜鐨勬姇绁ㄣ€嶅彂缇ら噷锛屼綘鏀堕綈鍚庢墦寮€銆屾眹鎬汇€嶇矘杩涘幓锛屼竴閿嚭鎬荤粨鏋?; h += '</div></div>'; $('main').innerHTML = h; $('copyLink').addEventListener('click', function(){ copyText(url).then(function(){ $('copyOk').style.display = 'block'; toast('閾炬帴宸插鍒?); }) .catch(function(){ toast('澶嶅埗澶辫触锛岃闀挎寜閾炬帴鎵嬪姩澶嶅埗'); }); }); $('goVote').addEventListener('click', function(){ location.href = url; }); } /* ---------- 娓叉煋锛氭姇绁?---------- */ function renderVote(){ var cfg = S.cfg; $('pageTitle').textContent = cfg.t || '鍥㈠缓瀹夋帓'; $('pageSub').textContent = cfg.s || ''; $('badgeText').textContent = S.votes.length ? ('宸叉湁 ' + S.votes.length + ' 浜烘姇杩?) : '鍥㈠缓绛瑰'; $('foot').textContent = '鏁版嵁鍙瓨鍦ㄩ摼鎺ラ噷路涓嶄笂浼犳湇鍔″櫒路鏃犻渶鐧诲綍'; var h = ''; h += '<div class="tabs"><button class="tab on" id="tabVote">鎴戣鎶曠エ</button><button class="tab" id="tabSum">姹囨€诲ぇ瀹剁殑鎶曠エ</button></div>'; h += '<div class="card"><div class="card-hd"><span class="step">1</span><h2>鍝簺鏃堕棿浣犳柟渚匡紵</h2><span class="hint">鍙閫?/span></div>'; h += '<div class="opt-list" id="optTimes">'; cfg.m.forEach(function(label, i){ h += '<div class="opt" data-k="t" data-i="'+i+'"><span class="tick"></span><span class="t1">'+esc(label)+'</span></div>'; }); h += '</div></div>'; h += '<div class="card"><div class="card-hd"><span class="step">2</span><h2>鎯崇帺浠€涔堬紵</h2><span class="hint">鍙閫?/span></div>'; h += '<div class="act-grid" id="optActs">'; cfg.a.forEach(function(label, i){ h += '<div class="act" data-k="a" data-i="'+i+'"><span class="ico">'+iconFor(label)+'</span><span class="nm">'+esc(label)+'</span></div>'; }); h += '</div></div>'; h += '<div class="card"><div class="card-hd"><span class="step">3</span><h2>鐣欎釜鏄电О</h2><span class="hint">鏂逛究澶у鐭ラ亾鏄皝</span></div>'; h += '<input class="input" id="nick" maxlength="16" placeholder="渚嬪锛氬紶涓?/ 灏忔潕" value="'+esc(S.me.name)+'">'; h += '<button class="btn" id="submitBtn">鎻愪氦鎴戠殑閫夋嫨</button>'; h += '<div style="font-size:12px;color:#939bad;text-align:center;margin-top:10px">鎻愪氦鍚庡彲鍐嶆敼锛涘悓涓€鏄电О浼氳鐩栦笂娆＄殑閫夋嫨</div></div>'; h += '<div id="resultZone"></div>'; $('main').innerHTML = h; $('optTimes').addEventListener('click', function(e){ var el = e.target.closest('.opt'); if(!el) return; toggle('t', +el.dataset.i, el); }); $('optActs').addEventListener('click', function(e){ var el = e.target.closest('.act'); if(!el) return; toggle('a', +el.dataset.i, el); }); $('nick').addEventListener('input', function(e){ S.me.name = e.target.value.trim(); try { localStorage.setItem(NICK_KEY, S.me.name); } catch(err){} }); $('submitBtn').addEventListener('click', doSubmit); $('tabSum').addEventListener('click', function(){ var q = '?c=' + S.cParam + '&m=1'; if(S.votes.length) q += '&v=' + encObj({ v: S.votes }); location.href = location.origin + location.pathname + q; }); renderResult(); } function toggle(kind, i, el){ var arr = kind === 't' ? S.me.t : S.me.a; var p = arr.indexOf(i); if(p >= 0){ arr.splice(p,1); el.classList.remove('on'); } else { arr.push(i); el.classList.add('on'); } saveMine(); } function saveMine(){ try { localStorage.setItem('tjvote.mine.' + cfgHash(), JSON.stringify({ t: S.me.t, a: S.me.a })); } catch(e){} } function loadMine(){ try { var raw = localStorage.getItem('tjvote.mine.' + cfgHash()); if(raw){ var o = JSON.parse(raw); S.me.t = Array.isArray(o.t)?o.t:[]; S.me.a = Array.isArray(o.a)?o.a:[]; } } catch(e){} try { S.me.name = localStorage.getItem(NICK_KEY) || S.me.name; } catch(e){} } function markPicked(){ Array.prototype.forEach.call(document.querySelectorAll('.opt'), function(el){ el.classList.toggle('on', S.me.t.indexOf(+el.dataset.i) >= 0); }); Array.prototype.forEach.call(document.querySelectorAll('.act'), function(el){ el.classList.toggle('on', S.me.a.indexOf(+el.dataset.i) >= 0); }); } function doSubmit(){ var nickEl = $('nick'); var name = (nickEl.value || '').trim(); if(!name){ toast('鍏堝～涓樀绉?); nickEl.focus(); return; } if(name.length > 16) name = name.slice(0,16); if(/[锛?锝渱銆乚/.test(name)){ toast('鏄电О閲屽埆鐢ㄥ啋鍙枫€佺珫绾裤€侀】鍙?); return; } if(S.me.t.length === 0){ toast('鑷冲皯鍕句竴涓柟渚跨殑鏃堕棿'); return; } if(S.me.a.length === 0){ toast('鑷冲皯鍕句竴涓兂鐜╃殑娲诲姩'); return; } var exists = false; for(var i = 0; i < S.votes.length; i++){ if(S.votes[i].n === name){ exists = true; break; } } var localNick = ''; try { localNick = localStorage.getItem(NICK_KEY) || ''; } catch(e){} if(exists && localNick !== name){ if(!confirm('鏄电О銆?+name+'銆嶅凡缁忔湁浜虹敤浜嗐€俓n濡傛灉杩欎笉鏄綘锛岃鎹竴涓紱濡傛灉鏄綘涔嬪墠鎶曠殑锛岀户缁細瑕嗙洊鍘熸潵鐨勯€夋嫨銆?)) return; } S.me.name = name; try { localStorage.setItem(NICK_KEY, name); } catch(e){} // 鍚堝苟 var idx = -1; for(var j = 0; j < S.votes.length; j++){ if(S.votes[j].n === name){ idx = j; break; } } var rec = { n: name, t: S.me.t.slice().sort(), a: S.me.a.slice().sort() }; if(idx >= 0) S.votes[idx] = rec; else S.votes.push(rec); try { var q = '?c=' + S.cParam; if(S.votes.length) q += '&v=' + encObj({ v: S.votes }); history.replaceState(null, '', location.pathname + q); } catch(e){} $('badgeText').textContent = '宸叉湁 ' + S.votes.length + ' 浜烘姇杩?; renderResult(); toast('宸茶褰曚綘鐨勯€夋嫨'); var rz = $('resultZone'); if(rz) rz.scrollIntoView({ behavior: 'smooth', block: 'start' }); } /* ---------- 娓叉煋锛氱粨鏋?---------- */ function renderResult(){ var zone = $('resultZone'); if(!zone) return; var T = tally(S.cfg, S.votes); var h = ''; if(T.total > 0 && T.tTop.length && T.aTop.length){ var tie = (T.tTop.length > 1 || T.aTop.length > 1) ? '锛堟湁骞跺垪锛? : ''; h += '<div class="rec"><div class="rec-label">鎺ㄨ崘鏂规' + tie + '</div>'; h += '<div class="rec-main">' + esc(joinTop(T.tTop)) + '<span class="split">锛?/span>' + esc(joinTop(T.aTop)) + '</div>'; h += '<div class="rec-sub">' + T.total + ' 浜哄弬涓?路鏃堕棿鏈€楂?' + T.tMax + ' 绁?路娲诲姩鏈€楂?' + T.aMax + ' 绁?/div></div>'; } else if(T.total > 0){ h += '<div class="rec" style="background:linear-gradient(135deg,#5b7fa8,#7d9dc2);box-shadow:0 8px 22px rgba(70,100,140,.22)">'; h += '<div class="rec-label">鎺ㄨ崘鏂规</div><div class="rec-main" style="font-size:18px">绁ㄦ暟杩樻瘮杈冨垎鏁ｏ紝鍐嶇瓑绛?/div>'; h += '<div class="rec-sub">鐩墠 ' + T.total + ' 浜哄弬涓庯紝绛夋湁浜烘嬁鍒?2 绁ㄤ互涓婂氨浼氬嚭鎺ㄨ崘</div></div>'; } else { h += '<div class="rec" style="background:linear-gradient(135deg,#8fa6c4,#a9bdd8);box-shadow:0 8px 22px rgba(90,120,160,.2)">'; h += '<div class="rec-label">鎺ㄨ崘鏂规</div><div class="rec-main" style="font-size:18px">绛夊ぇ瀹舵姇瀹岀エ锛岃繖閲屼細鑷姩鍑虹粨鏋?/div>'; h += '<div class="rec-sub">浣犳槸绗竴涓紝鎶曞畬灏辫兘鐪嬪埌</div></div>'; } h += '<div class="card"><div class="res-hd"><h2>绁ㄦ暟</h2><span class="res-meta"><i class="dot-live"></i>宸茬粺璁?' + T.total + ' 浜?/span></div>'; h += '<div style="font-size:12px;color:#939bad;margin:12px 0 0;letter-spacing:.5px">鏃堕棿</div>'; T.tm.forEach(function(x){ h += barHtml(x, T.tMax, 't'); }); h += '<div style="font-size:12px;color:#939bad;margin:18px 0 0;letter-spacing:.5px">娲诲姩</div>'; T.ac.forEach(function(x){ h += barHtml(x, T.aMax, 'a'); }); h += '<div class="btn-row" style="margin-top:16px">'; h += '<button class="btn ghost sm" id="copyMine">澶嶅埗鎴戠殑鎶曠エ</button>'; h += '<button class="btn ghost sm" id="copyAll">澶嶅埗姹囨€婚摼鎺?/button>'; h += '</div>'; h += '<div style="font-size:12px;color:#939bad;text-align:center;margin-top:10px;line-height:1.7">鎶娿€屾垜鐨勬姇绁ㄣ€嶅彂鍒扮兢閲岋紱鍙戣捣浜烘敹榻愬悗鐐逛笂鏂广€屾眹鎬诲ぇ瀹剁殑鎶曠エ銆?/div>'; h += '</div>'; zone.innerHTML = h; markPicked(); $('copyMine').addEventListener('click', function(){ if(!S.me.name){ toast('鍏堟彁浜や綘鐨勯€夋嫨'); return; } copyText(myLine()).then(function(){ toast('宸插鍒讹紝鍙戝埌缇ら噷灏辫'); }).catch(function(){ toast('澶嶅埗澶辫触'); }); }); $('copyAll').addEventListener('click', function(){ var u = buildUrl(true); copyText(u).then(function(){ toast('姹囨€婚摼鎺ュ凡澶嶅埗'); }).catch(function(){ toast('澶嶅埗澶辫触'); }); }); } function barHtml(x, max, kind){ var top = max >= 2 && x.who.length === max; var pct = max > 0 ? Math.round(x.who.length / max * 100) : 0; var h = '<div class="bar-item' + (top ? ' top' : '') + (x.who.length === 0 ? ' zero' : '') + '">'; h += '<div class="bar-head"><span class="bar-name">' + esc(x.label) + '</span>'; if(top) h += '<span class="crown">绁ㄧ帇</span>'; h += '<span class="bar-num">' + x.who.length + '<small>绁?/small></span></div>'; if(x.who.length > 0){ h += '<div class="track"><i style="width:' + pct + '%"></i></div>'; h += '<div class="who">' + x.who.map(function(n){ return '<span>' + esc(n) + '</span>'; }).join('') + '</div>'; } h += '</div>'; return h; } function myLine(){ var t = S.me.t.map(function(i){ return S.cfg.m[i]; }).filter(Boolean).join('銆?); var a = S.me.a.map(function(i){ return S.cfg.a[i]; }).filter(Boolean).join('銆?); return S.me.name + '锛? + t + '锝? + a; } /* ---------- 娓叉煋锛氭眹鎬?---------- */ function renderSummary(){ var cfg = S.cfg; $('pageTitle').textContent = '姹囨€诲ぇ瀹剁殑鎶曠エ'; $('pageSub').textContent = '鎶婄兢閲屾敹鍒扮殑銆屾垜鐨勬姇绁ㄣ€嶇矘杩涙潵锛屼竴閿嚭缁撴灉'; $('badgeText').textContent = cfg.t || '鍥㈠缓瀹夋帓'; var h = ''; h += '<div class="tabs"><button class="tab" id="tabVote">鎴戣鎶曠エ</button><button class="tab on" id="tabSum">姹囨€诲ぇ瀹剁殑鎶曠エ</button></div>'; h += '<div class="card">'; h += '<div class="card-hd"><span class="step">1</span><h2>绮樿创鎶曠エ鍐呭</h2><span class="hint">涓€琛屼竴涓汉</span></div>'; h += '<textarea class="input" id="pasteBox" placeholder="寮犱笁锛?1鏈?4鏃?鍛ㄥ叚鍏ㄥぉ銆?1鏈?1鏃?鍛ㄥ叚鍏ㄥぉ锝滆仛椁愩€佺埇灞?#10;鏉庡洓锛?1鏈?4鏃?鍛ㄥ叚鍏ㄥぉ锝滆仛椁?#10;鐜嬩簲锛?1鏈?1鏃?鍛ㄥ叚鍏ㄥぉ锝淜TV"></textarea>'; h += '<button class="btn" id="doParse">鐢熸垚姹囨€荤粨鏋?/button>'; h += '<div style="font-size:12px;color:#939bad;text-align:center;margin-top:10px;line-height:1.7">鏍煎紡锛氭樀绉帮細鏃堕棿1銆佹椂闂?锝滄椿鍔?銆佹椿鍔?<br>鐩存帴澶嶅埗澶у鍙戞潵鐨勬暣鍙ュ氨琛?/div>'; h += '</div>'; h += '<div id="sumZone"></div>'; $('main').innerHTML = h; $('tabVote').addEventListener('click', function(){ location.href = location.origin + location.pathname + '?c=' + S.cParam + (S.votes.length ? '&v=' + encObj({v:S.votes}) : ''); }); $('doParse').addEventListener('click', function(){ var text = $('pasteBox').value || ''; var parsed = parseLines(text, cfg); if(!parsed.length){ toast('娌¤瘑鍒埌鍐呭锛屾鏌ヤ竴涓嬫牸寮?); return; } // 鍚堝苟锛堝悓鍚嶈鐩栵級 var map = {}, order = []; S.votes.concat(parsed).forEach(function(v){ if(!map[v.n]){ map[v.n] = v; order.push(v.n); } else map[v.n] = v; }); S.votes = order.map(function(n){ return map[n]; }); renderSummaryResult(); }); } function parseLines(text, cfg){ var out = []; text.split(/\n+/).forEach(function(line){ line = line.trim(); if(!line) return; var m = line.match(/^(.{1,20}?)\s*[锛?]\s*(.+)$/); if(!m) return; var name = m[1].trim(); var rest = m[2]; var seg = rest.split(/[锝渱]/); var tNames = (seg[0] || '').split(/[銆?锛宂/).map(function(s){ return s.trim(); }).filter(Boolean); var aNames = (seg[1] || '').split(/[銆?锛宂/).map(function(s){ return s.trim(); }).filter(Boolean); var t = [], a = []; tNames.forEach(function(n){ var i = cfg.m.indexOf(n); if(i >= 0) t.push(i); }); aNames.forEach(function(n){ var i = cfg.a.indexOf(n); if(i >= 0) a.push(i); }); if(t.length || a.length) out.push({ n: name, t: t, a: a }); }); return out; } function renderSummaryResult(){ var zone = $('sumZone'); if(!zone) return; var T = tally(S.cfg, S.votes); var h = '<div class="card"><div class="res-hd"><h2>姹囨€荤粨鏋?/h2><span class="res-meta"><i class="dot-live"></i>鍏?' + T.total + ' 浜?/span></div>'; if(T.total > 0 && T.tTop.length && T.aTop.length){ var tie = (T.tTop.length > 1 || T.aTop.length > 1) ? '锛堟湁骞跺垪锛? : ''; h += '<div style="margin:12px 0 4px;padding:14px;border-radius:12px;background:#eef4ff;border:1.5px solid #bcd5ff">'; h += '<div style="font-size:11.5px;color:#1677ff;letter-spacing:1px">鎺ㄨ崘鏂规' + tie + '</div>'; h += '<div style="font-size:19px;font-weight:700;color:#0b5ed7;line-height:1.4;margin-top:4px">' + esc(joinTop(T.tTop)) + ' 锛?' + esc(joinTop(T.aTop)) + '</div>'; h += '</div>'; } h += '<div style="font-size:12px;color:#939bad;margin:14px 0 0;letter-spacing:.5px">鏃堕棿</div>'; T.tm.forEach(function(x){ h += barHtml(x, T.tMax, 't'); }); h += '<div style="font-size:12px;color:#939bad;margin:18px 0 0;letter-spacing:.5px">娲诲姩</div>'; T.ac.forEach(function(x){ h += barHtml(x, T.aMax, 'a'); }); h += '<div class="btn-row" style="margin-top:16px">'; h += '<button class="btn ghost sm" id="copyResult">澶嶅埗缁撴灉鏂囨湰</button>'; h += '<button class="btn ghost sm" id="copyLink2">澶嶅埗瀹屾暣閾炬帴</button>'; h += '</div></div>'; zone.innerHTML = h; $('copyResult').addEventListener('click', function(){ var txt = resultText(); copyText(txt).then(function(){ toast('缁撴灉宸插鍒?); }).catch(function(){ toast('澶嶅埗澶辫触'); }); }); $('copyLink2').addEventListener('click', function(){ copyText(buildUrl(true)).then(function(){ toast('瀹屾暣閾炬帴宸插鍒讹紝鍙戠兢閲屽ぇ瀹堕兘鑳界湅'); }).catch(function(){ toast('澶嶅埗澶辫触'); }); }); } function resultText(){ var T = tally(S.cfg, S.votes); var lines = ['銆? + S.cfg.t + '銆戞姇绁ㄧ粨鏋?, '鍙備笌浜烘暟锛? + T.total + ' 浜?, '', '鏃堕棿锛?]; T.tm.forEach(function(x){ lines.push('路 ' + x.label + ' 鈥?' + x.who.length + ' 绁? + (x.who.length ? '锛? + x.who.join('銆?) + '锛? : '')); }); lines.push('', '娲诲姩锛?); T.ac.forEach(function(x){ lines.push('路 ' + x.label + ' 鈥?' + x.who.length + ' 绁? + (x.who.length ? '锛? + x.who.join('銆?) + '锛? : '')); }); if(T.tTop.length && T.aTop.length){ lines.push('', '鎺ㄨ崘锛? + joinTop(T.tTop) + ' 锛?' + joinTop(T.aTop)); } return lines.join('\n'); } /* ---------- 鍚姩 ---------- */ function boot(){ var c = getP('c'); var m = getP('m'); if(!c){ renderCreate(); return; } var cfg = decObj(c); if(!cfg || !Array.isArray(cfg.m) || !Array.isArray(cfg.a)){ $('main').innerHTML = '<div class="notice err">閾炬帴涓嶅畬鏁存垨宸叉崯鍧忥紝璇疯鍙戣捣浜洪噸鏂板彂涓€娆°€?/div>'; return; } S.cfg = cfg; S.cParam = c; S.votes = parseVotes(getP('v')); loadMine(); if(m === '1'){ renderSummary(); if(S.votes.length) renderSummaryResult(); else renderSummaryResultEmpty(); return; } // 濡傛灉鎴戠殑鏄电О宸插湪绁ㄩ噷锛屽洖濉垜鐨勯€夋嫨 if(S.me.name){ for(var i = 0; i < S.votes.length; i++){ if(S.votes[i].n === S.me.name){ S.me.t = S.votes[i].t.slice(); S.me.a = S.votes[i].a.slice(); break; } } } renderVote(); } function renderSummaryResultEmpty(){ var zone = $('sumZone'); if(zone) zone.innerHTML = '<div class="card"><div class="empty">绮樿创鍐呭鍚庯紝鐐逛笂闈㈢殑鎸夐挳鐢熸垚缁撴灉</div></div>'; } boot(); /* 渚夸簬璋冭瘯涓庤嚜鍔ㄥ寲娴嬭瘯 */ window.__tj = { state: function(){ return { cfg: S.cfg, votes: S.votes, me: S.me }; }, myLine: myLine, resultText: resultText }; })(); </script> </body> </html> <script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>