function MainComponent() { const [count, setCount] = useState(0); const [showCelebration, setShowCelebration] = useState(false); useEffect(()=>{ if (count > 0 && count % 10 === 0) { setShowCelebration(true); setTimeout(()=>{ setShowCelebration(false); }, 3000); } }, [ count ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFF5F7] dark:bg-gray-900 flex flex-col items-center justify-center p-4 overflow-hidden relative", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-[#FF6B8B] dark:text-pink-300 text-8xl md:text-9xl font-inter font-bold mb-4 transition-transform duration-500 ${count % 10 === 0 ? 'scale-125' : ''}`, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, count), /*#__PURE__*/ React.createElement("p", { className: "text-[#4A5568] dark:text-gray-300 font-inter text-lg md:text-xl mb-8", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "今日、", count, "回呼ばれました"), showCelebration && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "confetti-container absolute inset-0", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "fixed top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#FFD1DC] dark:bg-pink-400 px-8 py-4 rounded-lg shadow-lg celebration-message", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#FF4B7D] dark:text-white text-2xl font-bold", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "お疲れ様！"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCount(count + 1), className: "bg-[#FF8BA7] dark:bg-pink-600 hover:bg-[#FF9BB7] dark:hover:bg-pink-500 text-white font-inter px-8 py-3 rounded-md text-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "ママー！"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCount(0), className: "border-2 border-[#FF8BA7] dark:border-pink-600 text-[#FF8BA7] dark:text-pink-600 hover:bg-[#FF8BA7] dark:hover:bg-pink-600 hover:text-white dark:hover:text-white font-inter px-8 py-3 rounded-md text-lg transition-colors duration-200", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "リセット")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, ` @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } } @keyframes celebration-popup { 0% { opacity: 0; transform: translate(-50%, -30%); } 20% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -70%); } } .confetti-container::before, .confetti-container::after { content: ''; position: absolute; width: 10px; height: 10px; background: #FF69B4; } .confetti-container::before { left: 10%; animation: confetti-fall 3s linear infinite; background: #FF69B4; } .confetti-container::after { left: 20%; animation: confetti-fall 2.5s linear infinite; background: #FFB6C1; } .confetti-container { pointer-events: none; } .celebration-message { animation: celebration-popup 3s ease-in-out forwards; } .confetti-container::before, .confetti-container::after { box-shadow: 15vw 0 0 #FFC0CB, 25vw 0 0 #FFB6C1, 35vw 0 0 #FF69B4, 45vw 0 0 #FF1493, 55vw 0 0 #DB7093, 65vw 0 0 #FFC0CB, 75vw 0 0 #FFB6C1, 85vw 0 0 #FF69B4; } `)); }