function MainComponent() { const [fortune, setFortune] = React.useState(''); const [fortuneType, setFortuneType] = React.useState(''); const [lastFortuneTime, setLastFortuneTime] = React.useState(null); const [currentTimeReduction, setCurrentTimeReduction] = React.useState(0); const [currentPage, setCurrentPage] = React.useState('home'); const [shareUrl, setShareUrl] = React.useState(''); const fortunes = [ { type: "大吉", description: "大吉です！今日は何をしても上手くいくでしょう。", message: "今日は最高の一日になりそうです！" }, { type: "中吉", description: "中吉です。良いことがあるかもしれません。", message: "何か良いことが起こりそう！" }, { type: "小吉", description: "小吉です。小さな幸せが訪れそう。", message: "日常の小さな幸せを見つけられそうです。" }, { type: "凶", description: "凶です。少し注意が必要です。", message: "少し用心するに越したことはありません。" }, { type: "大凶", description: "大凶です。今日は何もせずに家でゆっくり過ごしましょう。", message: "今日は自宅で静かに過ごしましょう。" } ]; const randomFortune = ()=>{ const now = new Date(); if (!lastFortuneTime || now - lastFortuneTime >= 10800000 - currentTimeReduction) { const selectedFortune = fortunes[Math.floor(Math.random() * fortunes.length)]; setFortune(selectedFortune.message); setFortuneType(selectedFortune.description); setLastFortuneTime(now); if (currentTimeReduction > 0) setCurrentTimeReduction(0); } else { const waitTime = 10800000 - currentTimeReduction - (now - lastFortuneTime); const waitMinutes = Math.floor(waitTime / 60000); setFortune(`次の占いまであと${waitMinutes}分お待ちください。友達に共有をすると占える時間がリセットされます！`); setFortuneType(''); } }; const shareWithFriend = ()=>{ setLastFortuneTime(null); setShareUrl(window.location.href); setCurrentPage('share'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen flex-col items-center justify-center bg-[url('/path/to/illustration.jpg')] bg-cover", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-5 bg-[#39645f] text-white shadow-md relative", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center px-6", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "占いワールド"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('home'), className: "bg-[#39645f] py-1 px-3 rounded-full text-white font-semibold hover:bg-[#4b7f77] transition-colors duration-150 ease-in-out mr-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('explanation'), className: "bg-[#39645f] py-1 px-3 rounded-full text-white font-semibold hover:bg-[#4b7f77] transition-colors duration-150 ease-in-out mr-4", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "占いの説明"), /*#__PURE__*/ React.createElement("button", { onClick: shareWithFriend, className: "bg-[#39645f] py-1 px-3 rounded-full text-white font-semibold hover:bg-[#4b7f77] transition-colors duration-150 ease-in-out", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "友達に共有")))), currentPage === 'home' && /*#__PURE__*/ React.createElement("main", { className: "flex-1 container mx-auto px-6 py-10 text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-[#39645f] font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "あなたの今日の運命を探求しましょう"), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mt-5 text-[#39645f] tracking-wide leading-relaxed font-semibold", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "占うをクリックしてください。"), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: randomFortune, className: "bg-[#39645f] py-2 px-4 rounded text-white font-semibold hover:bg-[#4b7f77] transition-colors duration-150 ease-in-out", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "占う")), fortune && /*#__PURE__*/ React.createElement("p", { className: "mt-8 text-xl text-[#39645f] font-semibold", __source: { fileName: "", lineNumber: 61, columnNumber: 25 }, __self: this }, fortune), fortuneType && /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#39645f]", __source: { fileName: "", lineNumber: 62, columnNumber: 29 }, __self: this }, fortuneType))), currentPage === 'share' && /*#__PURE__*/ React.createElement("main", { className: "flex-1 container mx-auto px-6 py-10 text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-[#39645f] font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "このサイトを友達に共有しよう！"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mt-5 text-[#39645f] tracking-wide leading-relaxed font-semibold", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "以下のURLをコピーして共有してください。"), /*#__PURE__*/ React.createElement("div", { className: "mt-5 bg-white rounded p-3 text-[#39645f] font-semibold w-full md:w-1/2 mx-auto", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, shareUrl)), currentPage === 'explanation' && /*#__PURE__*/ React.createElement("main", { className: "flex-1 container mx-auto px-6 py-10", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold text-[#39645f] font-roboto text-center", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "占いの種類とその説明"), /*#__PURE__*/ React.createElement("div", { className: "mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, fortunes.map((f)=>/*#__PURE__*/ React.createElement("div", { key: f.type, className: "bg-[#f0f0f0] p-5 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-[#39645f] font-semibold", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, f.type), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-[#39645f]", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, f.description))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full py-5 bg-[#39645f] text-white shadow-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "© 2024 占いワールド")))); }