æµ å©ãéå§ç²æ¶?/title> <style> :root { --red: #E43D2A; --yellow: #F5C518; --blue: #1B5FA8; --black: #1A1A1A; --white: #F5F0EB; --grey: #8C8C8C; --canvas: 340px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Helvetica Neue', 'PingFang SC', 'Noto Sans SC', sans-serif; background: var(--white); color: var(--black); display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; position: relative; } /* === Bauhaus geometric background === */ body::before { content: ''; position: fixed; top: -120px; right: -80px; width: 320px; height: 320px; background: var(--red); border-radius: 50%; opacity: 0.08; z-index: 0; pointer-events: none; } body::after { content: ''; position: fixed; bottom: -60px; left: -100px; width: 240px; height: 240px; background: var(--blue); opacity: 0.06; z-index: 0; pointer-events: none; } /* === Header === */ header { width: 100%; max-width: 480px; padding: 32px 24px 0; text-align: center; position: relative; z-index: 1; } .geo-accent { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; } .geo-accent span { display: block; width: 12px; height: 12px; } .geo-accent .dot-red { background: var(--red); border-radius: 50%; } .geo-accent .dot-yellow { background: var(--yellow); border-radius: 50%; } .geo-accent .dot-blue { background: var(--blue); } h1 { font-size: 48px; font-weight: 900; letter-spacing: 6px; text-transform: uppercase; line-height: 1; margin-bottom: 4px; } h1 .line1 { display: block; color: var(--black); } h1 .line2 { display: block; color: var(--red); } .subtitle { font-size: 12px; letter-spacing: 4px; color: var(--grey); text-transform: uppercase; font-weight: 500; margin-top: 8px; } /* === Main wheel area === */ main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 24px 20px 40px; width: 100%; max-width: 480px; } .wheel-wrapper { position: relative; width: var(--canvas); height: var(--canvas); } /* Pointer triangle */ .pointer { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 32px solid var(--red); z-index: 10; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } #wheelCanvas { width: var(--canvas); height: var(--canvas); border-radius: 50%; box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); } /* Center button */ .center-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: var(--black); color: var(--white); border: none; cursor: pointer; font-size: 14px; font-weight: 800; letter-spacing: 4px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .center-btn:hover { transform: translate(-50%, -50%) scale(1.05); } .center-btn:active { transform: translate(-50%, -50%) scale(0.95); } .center-btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .center-btn .btn-icon { font-size: 22px; line-height: 1; } .center-btn .btn-text { font-size: 12px; letter-spacing: 3px; } /* === Bottom bar === */ .bottom-bar { display: flex; gap: 0; width: 100%; max-width: var(--canvas); margin-top: 32px; border: 2px solid var(--black); } .bottom-bar .bar-item { flex: 1; text-align: center; padding: 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--black); border-right: 2px solid var(--black); } .bottom-bar .bar-item:last-child { border-right: none; } .bottom-bar .bar-red { background: var(--red); color: var(--white); border-right-color: var(--black); } /* === Result modal === */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(26,26,26,0.85); z-index: 100; justify-content: center; align-items: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal { background: var(--white); width: 100%; max-width: 380px; position: relative; border: 3px solid var(--black); padding: 0; } .modal-header { background: var(--black); color: var(--white); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; } .modal-header h2 { font-size: 14px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; } .modal-close { background: none; border: none; color: var(--white); font-size: 22px; cursor: pointer; line-height: 1; } .modal-body { padding: 28px 24px; } .result-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 20px; } .icon-red { background: var(--red); color: var(--white); } .icon-yellow { background: var(--yellow); color: var(--black); } .icon-blue { background: var(--blue); color: var(--white); } .result-name { font-size: 28px; font-weight: 900; text-align: center; letter-spacing: 2px; margin-bottom: 16px; line-height: 1.3; } .result-address { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: rgba(0,0,0,0.04); margin-bottom: 24px; font-size: 13px; line-height: 1.6; color: var(--grey); border-left: 3px solid var(--yellow); } .result-address .addr-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; } .nav-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; background: var(--blue); color: var(--white); border: none; font-size: 15px; font-weight: 800; letter-spacing: 3px; cursor: pointer; text-decoration: none; transition: opacity 0.2s; } .nav-btn:hover { opacity: 0.9; } .modal-footer { padding: 12px 24px 28px; text-align: center; } .retry-btn { background: none; border: 2px solid var(--black); padding: 12px 32px; font-size: 12px; font-weight: 800; letter-spacing: 3px; cursor: pointer; text-transform: uppercase; color: var(--black); transition: background 0.2s; } .retry-btn:hover { background: var(--black); color: var(--white); } /* === Footer decoration === */ .decoration-strip { width: 100%; height: 6px; display: flex; position: fixed; bottom: 0; left: 0; z-index: 0; } .decoration-strip div:nth-child(1) { flex: 5; background: var(--red); } .decoration-strip div:nth-child(2) { flex: 3; background: var(--yellow); } .decoration-strip div:nth-child(3) { flex: 2; background: var(--blue); } .decoration-strip div:nth-child(4) { flex: 1; background: var(--black); } </style> </head> <body> <header> <div class="geo-accent"> <span class="dot-red"></span> <span class="dot-yellow"></span> <span class="dot-blue"></span> </div> <h1> <span class="line1">æµ å©ã</span> <span class="line2">éå§ç²æ¶?/span> </h1> <p class="subtitle">What to eat today</p> </header> <main> <div class="wheel-wrapper"> <div class="pointer"></div> <canvas id="wheelCanvas" width="680" height="680"></canvas> <button class="center-btn" id="spinBtn" onclick="spin()"> <span class="btn-icon">é«?/span> <span class="btn-text">GO</span> </button> </div> <div class="bottom-bar"> <div class="bar-item bar-red">é?é?çº?/div> <div class="bar-item">700m</div> <div class="bar-item">18ç¹?/div> </div> </main> <div class="decoration-strip"> <div></div><div></div><div></div><div></div> </div>  <div class="modal-overlay" id="modalOverlay"> <div class="modal"> <div class="modal-header"> <h2>Result</h2> <button class="modal-close" onclick="closeModal()">é?/button> </div> <div class="modal-body"> <div class="result-icon" id="resultIcon"></div> <div class="result-name" id="resultName"></div> <div class="result-address"> <span class="addr-icon">é¦æ·</span> <span id="resultAddress"></span> </div> <a class="nav-btn" id="navBtn" href="#" target="_blank"> æ¶â¬é¿î¼î±é¸?é«?æ¥æ¨ºçé¦æ¿æµ </a> </div> <div class="modal-footer"> <button class="retry-btn" onclick="closeModal()">éå¶æµæ¶â¬å¨?/button> </div> </div> </div> <script> // ===== Restaurant Data ===== // All within 700m of éæ¿æ½çº?2é? å¨´ï¸¿ç¬¢éæ¿å°¯, æ¶å©æ£ const restaurants = [ { name: 'éæææ¤æ¬å·º', sub: 'éæ®å°ç¹è·ºç¶é¿?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾56é?, lng: 121.5251, lat: 31.2135, icon: 'icon-red' }, { name: 'é¼î¢å¹éã¤î«', sub: 'éµå¬ªä¼ç»¾ã¢å³éæ¶åé?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾56é?, lng: 121.5251, lat: 31.2135, icon: 'icon-yellow' }, { name: 'çå®ç¨éå¶æ', sub: 'éå¤æ¯è·¯é²å¤ãæ££?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾52-1é?, lng: 121.5250, lat: 31.2136, icon: 'icon-red' }, { name: 'éå ¢ä¼éã¤î«', sub: 'éæ¶æ´éâé£å¢éîå¸', addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾518é?, lng: 121.5278, lat: 31.2123, icon: 'icon-blue' }, { name: 'éå¶ç·¤æ¾¶âç¬', sub: 'çº°å´å°ç¼å©åè·¯éÑå°', addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾510é?, lng: 121.5277, lat: 31.2124, icon: 'icon-red' }, { name: 'é¦ä¼´æ¨æ¾¹ç°æ§', sub: 'é¦ä¼´æ¨æ¥¦Ã·ç¯åæ¥?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾516é?, lng: 121.5278, lat: 31.2123, icon: 'icon-yellow' }, { name: 'éåîæ¥¹æèé?, sub: 'é´æ°åç»æ®æ´æ¥¹æèé?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾456é?, lng: 121.5272, lat: 31.2128, icon: 'icon-red' }, { name: 'æ¶â¬é¹å¿îé?, sub: 'æ¶æ»å¯³æ¥åçè·¯ç»ä½¹å§é¿?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾485-1é?, lng: 121.5275, lat: 31.2126, icon: 'icon-blue' }, { name: 'çµå±¾ç¯éã¤î«', sub: 'éîåºéâç¯â¬ä½¸ç§é?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾473é?6', lng: 121.5274, lat: 31.2127, icon: 'icon-yellow' }, { name: 'éîçªçå¿îé?, sub: 'éµå¬ªä¼éåçè·¯çå¿èç»®?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾443é?, lng: 121.5270, lat: 31.2130, icon: 'icon-red' }, { name: 'éç²å¢éæ §æ', sub: 'luckin coffee', addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾é¦ä¼´æ§ç»?éå³°å½', lng: 121.5255, lat: 31.2137, icon: 'icon-blue' }, { name: 'å¨¼î½çéæ¶åéî¦æ¨', sub: 'æ¤´æ»å¢°é²å£é£é¨é?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾146éç½æª®æ©?, lng: 121.5258, lat: 31.2135, icon: 'icon-red' }, { name: 'é¥é¹æ£¬ç¼å©è¦é?, sub: 'éî ä¼éÑå°è·¯æ¾¶æ»î', addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾121éç½æª®æ©?, lng: 121.5256, lat: 31.2136, icon: 'icon-yellow' }, { name: 'å©æ §å´¡çå¿å°', sub: 'é¦ä¼´äº¾å©æ¨¿å½', addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾136éç½æª®æ©?, lng: 121.5257, lat: 31.2135, icon: 'icon-red' }, { name: 'çä½½îæµæ¦ãº', sub: 'æ¤´æ»å¯éæ®å', addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾126éç½æª®æ©?, lng: 121.5256, lat: 31.2136, icon: 'icon-blue' }, { name: 'é æ»ç®°å¨£åîæ¤ç·ç', sub: 'éã¦æ¡è·¯çå´åç?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾173éç½æª®æ©?, lng: 121.5259, lat: 31.2134, icon: 'icon-yellow' }, { name: 'æ¥¹ï¹ç¶é?, sub: 'éæ¿æ½çºîç°µ', addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾185éç½æª®æ©?, lng: 121.5260, lat: 31.2134, icon: 'icon-red' }, { name: 'LINLEEéç³îé¼?, sub: 'éµå¬«å¢¦éç³îé¼?, addr: 'æ¶å©æ£ç¯åé¸æ¶æ»æéé¸¿æéæ£ç¾124éç½æª®æ©?, lng: 121.5256, lat: 31.2136, icon: 'icon-blue' }, ]; // ===== Spin state ===== let spinning = false; let currentAngle = 0; const segAngle = (2 * Math.PI) / restaurants.length; // ~20æ³ per segment const canvas = document.getElementById('wheelCanvas'); const ctx = canvas.getContext('2d'); const spinBtn = document.getElementById('spinBtn'); // ===== Colors ===== const colors = [ '#E43D2A', '#F5C518', '#1B5FA8', '#1A1A1A', '#F5F0EB', '#D9412C', '#E8B80F', '#1A5099', '#2C2C2C', '#EBE5DC', '#C83522', '#D4A812', '#164A8E', '#3A3A3A', '#E8E0D5', '#E43D2A', '#F5C518', '#1B5FA8', ]; const textColors = [ '#F5F0EB', '#1A1A1A', '#F5F0EB', '#F5F0EB', '#1A1A1A', '#F5F0EB', '#1A1A1A', '#F5F0EB', '#F5F0EB', '#1A1A1A', '#F5F0EB', '#1A1A1A', '#F5F0EB', '#F5F0EB', '#1A1A1A', '#F5F0EB', '#1A1A1A', '#F5F0EB', ]; // ===== Draw wheel ===== function drawWheel(rotation) { const cx = canvas.width / 2; const cy = canvas.height / 2; const r = 330; ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw segments for (let i = 0; i < restaurants.length; i++) { const start = i * segAngle + rotation - Math.PI / 2; const end = start + segAngle; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.arc(cx, cy, r, start, end); ctx.closePath(); ctx.fillStyle = colors[i]; ctx.fill(); // Segment border ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1.5; ctx.stroke(); // Text const mid = start + segAngle / 2; const textR = r * 0.65; ctx.save(); ctx.translate(cx, cy); ctx.rotate(mid); // Restaurant name ctx.fillStyle = textColors[i]; ctx.font = 'bold 13px "Helvetica Neue","PingFang SC","Noto Sans SC",sans-serif'; ctx.textAlign = 'center'; ctx.fillText(restaurants[i].name, textR, 5); // Subtitle ctx.font = '9px "Helvetica Neue","PingFang SC","Noto Sans SC",sans-serif'; ctx.fillStyle = textColors[i] === '#1A1A1A' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.7)'; ctx.fillText(restaurants[i].sub, textR, 20); ctx.restore(); } // Outer ring ctx.beginPath(); ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.strokeStyle = '#1A1A1A'; ctx.lineWidth = 4; ctx.stroke(); // Inner ring ctx.beginPath(); ctx.arc(cx, cy, 44, 0, 2 * Math.PI); ctx.strokeStyle = '#1A1A1A'; ctx.lineWidth = 2; ctx.stroke(); } // Initial draw drawWheel(currentAngle); // ===== Spin logic ===== function spin() { if (spinning) return; spinning = true; spinBtn.disabled = true; // Random target segment (0 ~ n-1) const targetIdx = Math.floor(Math.random() * restaurants.length); // Calculate target rotation so that pointer (top, -èº/2) lands on center of target segment // Pointer is at -èº/2 (top). Segment i center angle (relative to 0 rad = right) is i * segAngle + segAngle/2 // We need: rotation such that (targetIdx * segAngle + segAngle/2) ends up at -èº/2 // i.e. target center - rotation é®?-èº/2 => rotation = target center + èº/2 const targetCenter = targetIdx * segAngle + segAngle / 2; let targetRotation = targetCenter + Math.PI / 2; // Add multiple full spins for dramatic effect (5-8 full rotations) const extraSpins = (5 + Math.floor(Math.random() * 4)) * 2 * Math.PI; targetRotation += extraSpins; // Make sure it's in the same direction as current let delta = targetRotation - currentAngle; while (delta < Math.PI) delta += 2 * Math.PI; const finalAngle = currentAngle + delta; // Animation const duration = 4000 + Math.random() * 2000; // 4-6s const startTime = performance.now(); const startAngle = currentAngle; function animate(now) { const elapsed = now - startTime; const progress = Math.min(elapsed / duration, 1); // Ease-out cubic const eased = 1 - Math.pow(1 - progress, 3); currentAngle = startAngle + delta * eased; drawWheel(currentAngle); if (progress < 1) { requestAnimationFrame(animate); } else { // Snap to exact target currentAngle = finalAngle % (2 * Math.PI); drawWheel(currentAngle); spinning = false; spinBtn.disabled = false; showResult(targetIdx); } } requestAnimationFrame(animate); } // ===== Result modal ===== function showResult(idx) { const r = restaurants[idx]; document.getElementById('resultIcon').className = 'result-icon ' + r.icon; document.getElementById('resultIcon').textContent = idx % 3 === 0 ? 'é¦å´ª' : idx % 3 === 1 ? 'é¦æ' : 'é¦ã¢'; document.getElementById('resultName').textContent = r.name; document.getElementById('resultAddress').textContent = r.addr; // Build Amap navigation URL const amapUrl = `https://uri.amap.com/navigation?to=${encodeURIComponent(r.addr)}&mode=walk&callnative=1`; const navBtn = document.getElementById('navBtn'); navBtn.href = amapUrl; document.getElementById('modalOverlay').classList.add('active'); // Haptic feedback attempt if (navigator.vibrate) { navigator.vibrate([30, 50, 30, 50, 30]); } } function closeModal() { document.getElementById('modalOverlay').classList.remove('active'); } // Close modal on overlay click document.getElementById('modalOverlay').addEventListener('click', function(e) { if (e.target === this) closeModal(); }); // Keyboard support document.addEventListener('keydown', function(e) { if (e.code === 'Space' || e.code === 'Enter') { e.preventDefault(); spin(); } if (e.code === 'Escape') { closeModal(); } }); </script> </body> </html> <script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>