function MainComponent() { const HEIGHT = 165; const STRIDE_LENGTH = HEIGHT * 0.0045; const WALKING_SPEED = 4000 / 60; const calculateWalking = (event)=>{ const walkingTime = parseFloat(event.target.value) || 0; const distance = walkingTime * WALKING_SPEED; const steps = Math.round(distance / STRIDE_LENGTH); document.getElementById('distance').textContent = distance.toFixed(0); document.getElementById('steps').textContent = steps.toLocaleString(); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto p-5 bg-[#f0f8ff] text-[#333] font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-[20px] p-8 shadow-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-[#ff69b4] text-5xl mb-8", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "志保さんどのくらい歩いたかな？"), /*#__PURE__*/ React.createElement("div", { className: "input-section mb-8 bg-[#ffe4e1] p-5 rounded-[15px] flex items-center justify-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "walkingTime", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "歩いた時間："), /*#__PURE__*/ React.createElement("input", { type: "number", id: "walkingTime", name: "walkingTime", min: "0", className: "w-[100px] p-2 border-2 border-[#ff69b4] rounded-[10px] text-xl text-center ml-2", onChange: calculateWalking, __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "分")), /*#__PURE__*/ React.createElement("div", { id: "result", className: "result text-xl text-center", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "歩行距離: ", /*#__PURE__*/ React.createElement("span", { id: "distance", className: "highlight font-bold text-[#ff69b4]", __source: { fileName: "", lineNumber: 35, columnNumber: 20 }, __self: this }), " メートル"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "歩数: ", /*#__PURE__*/ React.createElement("span", { id: "steps", className: "highlight font-bold text-[#ff69b4]", __source: { fileName: "", lineNumber: 36, columnNumber: 18 }, __self: this }), " 歩")), /*#__PURE__*/ React.createElement("div", { className: "illustration text-center mt-8", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "100", cy: "100", r: "90", fill: "#ffe4e1", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M70 130 Q100 80 130 130", stroke: "#ff69b4", strokeWidth: "8", fill: "none", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "70", cy: "130", r: "10", fill: "#ff69b4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "130", cy: "130", r: "10", fill: "#ff69b4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "85", cy: "70", r: "5", fill: "#333", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "115", cy: "70", r: "5", fill: "#333", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "info text-xs text-[#666] text-center mt-5", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "※ この計算は、身長165cmの女性が普通のペースで歩く場合を想定しています。", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 51, columnNumber: 50 }, __self: this }), "歩幅：約74cm、歩行速度：時速4km"))); }