<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>注文システム</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(120deg, #f6d365, #fda085);
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: #fff;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 500px;
text-align: center;
}
h1 {
font-size: 24px;
color: #555;
margin-bottom: 20px;
}
.button-group button, select, button {
width: 100%;
padding: 10px;
margin-top: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fda085;
color: #fff;
cursor: pointer;
transition: background 0.3s;
}
.button-group button:hover, button:hover {
background: #f6d365;
}
.suggestion {
margin-top: 20px;
padding: 20px;
background: #e3f2fd;
border-radius: 10px;
text-align: left;
}
.suggestion h2 {
font-size: 20px;
margin-bottom: 10px;
color: #444;
}
.suggestion p {
margin: 5px 0;
}
#orderList, #myOrderList {
margin-top: 20px;
padding: 20px;
background: #e3f2fd;
border-radius: 10px;
text-align: left;
max-height: 200px;
overflow-y: auto;
}
#qrcode {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>注文システム</h1>
<div class="button-group" id="characterButtons"></div>
<form id="orderForm">
<label for="menu">メニューを選んでください:</label>
<select id="menu" required>
<option value="マグロ寿司">マグロ寿司</option>
<option value="サーモン寿司">サーモン寿司</option>
<option value="エビ寿司">エビ寿司</option>
<option value="イクラ寿司">イクラ寿司</option>
<option value="穴子寿司">穴子寿司</option>
</select>
<button type="submit">注文</button>
</form>
<div class="suggestion">
<h2>全員の注文</h2>
<div id="orderList"></div>
<h2>あなたの注文</h2>
<div id="myOrderList"></div>
</div>
<!-- QRコード表示エリア -->
<div id="qrcode"></div>
</div>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script>
const characterList = ["ポポ", "ピピ", "ププ"];
let selectedCharacter = null;
// クエリからseat IDとmode取得
const params = new URLSearchParams(location.search);
const seatId = params.get("seat") || "default"; // URLから座席IDを取得
const mode = params.get("mode");
const orderKey = orders_${seatId};
let orders = JSON.parse(localStorage.getItem(orderKey)) || [];
// 会計リセットモード
if (mode === "reset") {
localStorage.removeItem(orderKey);
alert(席 ${seatId} の注文をリセットしました);
orders = [];
}
// キャラボタン作成
const characterButtonsDiv = document.getElementById("characterButtons");
characterList.forEach(character => {
const button = document.createElement("button");
button.textContent = character;
button.onclick = () => {
selectedCharacter = character;
alert(${character} を選びました);
};
characterButtonsDiv.appendChild(button);
});
const orderListElement = document.getElementById("orderList");
const myOrderListElement = document.getElementById("myOrderList");
// フォーム処理
document.getElementById("orderForm").addEventListener("submit", function(event) {
event.preventDefault();
if (!selectedCharacter) {
alert("先にキャラクターを選んでください");
return;
}
const menu = document.getElementById("menu").value;
const order = { character: selectedCharacter, menu };
orders.push(order);
localStorage.setItem(orderKey, JSON.stringify(orders));
displayOrders();
});
// 表示更新
function displayOrders() {
orderListElement.innerHTML = '';
myOrderListElement.innerHTML = '';
orders.forEach((order, index) => {
const text = #${index + 1} - ${order.character}: ${order.menu};
const p = document.createElement("p");
p.textContent = text;
orderListElement.appendChild(p);
if (order.character === selectedCharacter) {
const myP = document.createElement("p");
myP.textContent = text;
myOrderListElement.appendChild(myP);
}
});
}
// QRコード生成
const qrcode = new QRCode(document.getElementById("qrcode"), {
text: https://${location.hostname}/order.html?seat=${seatId},
width: 128,
height: 128,
});
displayOrders(); // 初回読み込み時にも表示
</script>
</body>
</html>
