🏮 大大大小吃 行動點餐 語法
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大大小吃行動點餐</title> <style> body { font-family: 'Microsoft JhengHei', sans-serif; background-color: #f5f5f5; margin: 0; padding: 10px; display: flex; justify-content: center; } .phone-container { background: #fdfdfd; width: 100%; max-width: 400px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 16px; box-sizing: border-box; } .header { text-align: center; margin-bottom: 15px; } .header h2 { color: #d9383a; margin: 0; font-size: 24px; font-weight: 900; } .header p { margin: 4px 0 0 0; font-size: 12px; color: #777; } .order-type-section { background: #fff3f3; padding: 12px; border-radius: 10px; margin-bottom: 15px; border: 1px solid #ffcccc; } .type-title { font-weight: 900; font-size: 14px; color: #333; margin-bottom: 8px; } .radio-group { display: flex; gap: 15px; align-items: center; margin-bottom: 8px; } .radio-group label { font-weight: bold; font-size: 15px; cursor: pointer; } .table-input-area { display: flex; align-items: center; gap: 8px; } .table-input-area span { font-weight: bold; font-size: 14px; } .table-input-area input, .table-input-area select { padding: 4px 8px; font-size: 14px; font-weight: bold; border-radius: 6px; border: 1px solid #ccc; width: 90px; } .tab-scroll { display: flex; overflow-x: auto; background: #e0e0e0; border-radius: 10px; padding: 4px; margin-bottom: 15px; white-space: nowrap; } .tab-scroll::-webkit-scrollbar { display: none; } .tab-btn { padding: 8px 14px; font-weight: 900; font-size: 14px; border: none; border-radius: 8px; cursor: pointer; background: transparent; color: #444; margin-right: 4px; flex-shrink: 0; } .tab-active { background: #d9383a; color: white; } .menu-panel { min-height: 250px; } .item-card { background: white; padding: 12px; margin-bottom: 10px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.06); border-left: 4px solid #ccc; } .spicy-border { border-left-color: #d9383a; } .classic-border { border-left-color: #27ae60; } .rice-border { border-left-color: #e67e22; } .soup-border { border-left-color: #2980b9; } .side-border { border-left-color: #8e44ad; } .item-name { font-weight: 900; font-size: 16px; color: #222; } .item-price { color: #d9383a; font-weight: 900; margin-top: 4px; font-size: 16px; } .counter { display: flex; align-items: center; } .btn-minus { background: #e0e0e0; border: none; width: 34px; height: 34px; border-radius: 6px; font-weight: 900; font-size: 20px; cursor: pointer; color: #444; } .btn-plus { background: #d9383a; color: white; border: none; width: 34px; height: 34px; border-radius: 6px; font-weight: 900; font-size: 20px; cursor: pointer; } .qty-num { margin: 0 14px; font-weight: 900; font-size: 18px; width: 20px; text-align: center; color: #111; } .footer { margin-top: 15px; border-top: 2px dashed #ccc; padding-top: 15px; } .total-row { display: flex; justify-content: space-between; font-weight: 900; font-size: 18px; color: #333; margin-bottom: 12px; } .total-price-color { color: #d9383a; font-size: 24px; } .submit-btn { background: #27ae60; color: white; border: none; width: 100%; padding: 14px; border-radius: 10px; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 8px rgba(39,174,96,0.25); letter-spacing: 1px; } </style> </head> <body> <div class="phone-container"> <div style="display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-bottom: 12px; padding: 0 5px; font-weight: bold;"> <span>📱 大大小吃自主點餐</span> <span>大字體老友友善版</span> <span>🔋 100%</span> </div> <div class="header"> <h2>🏮 大大大小吃 行動點餐</h2> <p>台中南區復興路二段38-8號</p> </div> <!-- 用餐方式選擇區 --> <div class="order-type-section"> <div class="type-title">🛠️ 請選擇用餐方式：</div> <div class="radio-group"> <label><input type="radio" name="orderType" value="內用" checked id="radioDineIn"> 🪑 內用</label> <label><input type="radio" name="orderType" value="外帶" id="radioTakeOut"> 🛍️ 外帶自取</label> </div> <div class="table-input-area" id="dineInField"> <span>桌號：</span> <input type="text" id="tableNum" placeholder="例如: A1"> </div> <div class="table-input-area" id="takeOutField" style="display: none;"> <span>取餐時間：</span> <select id="pickupTime"> <option value="15分鐘後">15 分鐘後</option> <option value="30分鐘後">30 分鐘後</option> <option value="45分鐘後">45 分鐘後</option> <option value="現場取餐">現場排隊拿</option> </select> </div> </div> <!-- 五大分類標籤 --> <div class="tab-scroll"> <button id="t-spicy" class="tab-btn tab-active">🌶️ 勁辣麵食</button> <button id="t-classic" class="tab-btn">🍜 傳統不辣麵</button> <button id="t-rice" class="tab-btn">🍚 古早食飯類</button> <button id="t-soup" class="tab-btn">🥣 慢火湯品</button> <button id="t-side" class="tab-btn">🥬 靈魂小菜</button> </div> <!-- 菜單面板總容器 --> <div id="menuContainer" class="menu-panel"> <!-- 內容由 JavaScript 動態生成，徹底防止斷線問題 --> </div> <div class="footer"> <div class="total-row"> <span>餐點總計：</span> <span class="total-price-color">$<span id="totalPrice">0</span></span> </div> <button class="submit-btn" id="btnSubmit">綠色按鈕：確認送出點餐</button> </div> </div> <script> // 完整菜單資料庫 const menuData = { spicy: [ { id: 's1', name: '勁辣抄手麵 (正常)', price: 75, border: 'spicy-border' }, { id: 's2', name: '勁辣抄手麵 (大碗)', price: 95, border: 'spicy-border' }, { id: 's3', name: '勁辣豬腸麵 (正常)', price: 75, border: 'spicy-border' }, { id: 's4', name: '勁辣豬腸麵 (大碗)', price: 95, border: 'spicy-border' }, { id: 's5', name: '勁辣乾麵 (正常)', price: 55, border: 'spicy-border' }, { id: 's6', name: '勁辣乾麵 (大碗)', price: 75, border: 'spicy-border' }, { id: 's7', name: '勁辣抄手 (純單點)', price: 70, border: 'spicy-border' } ], classic: [ { id: 'c1', name: '扁食意麵 (乾/小)', price: 70, border: 'classic-border' }, { id: 'c2', name: '扁食意麵 (乾/大)', price: 90, border: 'classic-border' }, { id: 'c3', name: '陽春意麵 (乾/小)', price: 45, border: 'classic-border' }, { id: 'c4', name: '陽春意麵 (乾/大)', price: 65, border: 'classic-border' } ], rice: [ { id: 'r1', name: '古早味魯肉飯 (小)', price: 40, border: 'rice-border' }, { id: 'r2', name: '古早味魯肉飯 (大)', price: 55, border: 'rice-border' } ], soup: [ { id: 'so1', name: '綜合美味湯', price: 60, border: 'soup-border' }, { id: 'so2', name: '隔間肉湯', price: 45, border: 'soup-border' }, { id: 'so3', name: '豬腸湯', price: 45, border: 'soup-border' }, { id: 'so4', name: '貢丸湯', price: 30, border: 'soup-border' } ], side: [ { id: 'sd1', name: '招牌隔間肉', price: 70, border: 'side-border' }, { id: 'sd2', name: '滷香細豆干', price: 30, border: 'side-border' }, { id: 'sd3', name: '精緻燙青菜', price: 40, border: 'side-border' } ] }; let cart = {}; let currentTab = 'spicy'; // 渲染菜單畫面 function renderMenu() { const container = document.getElementById('menuContainer'); container.innerHTML = ''; const items = menuData[currentTab]; items.forEach(item => { const qty = cart[item.id] ? cart[item.id].qty : 0; const card = document.createElement('div'); card.className = ; card.innerHTML = <div> <div class="item-name">${item.name}</div>
#################################################################
完成了。這次我已經把你提供的點餐程式整理成 可操作的 Android PWA 版本，不是只有畫面。
沒有留言:
張貼留言