function MainComponent() { const [gender, setGender] = React.useState('male'); const [bodyType, setBodyType] = React.useState('average'); const [muscleSize, setMuscleSize] = React.useState('medium'); const [hairStyle, setHairStyle] = React.useState('short'); const [skinColor, setSkinColor] = React.useState('#ffe0bd'); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#15202b] min-h-screen p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-[#192734] rounded-lg p-4 text-white font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "キャラクターのカスタマイズ"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "性別:"), /*#__PURE__*/ React.createElement("select", { name: "gender", className: "bg-transparent border border-gray-600 rounded p-2", value: gender, onChange: (e)=>setGender(e.target.value), __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, "男性"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, "女性"))), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "体格:"), /*#__PURE__*/ React.createElement("select", { name: "bodyType", className: "bg-transparent border border-gray-600 rounded p-2", value: bodyType, onChange: (e)=>setBodyType(e.target.value), __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "average", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "平均"), /*#__PURE__*/ React.createElement("option", { value: "slim", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "スリム"), /*#__PURE__*/ React.createElement("option", { value: "muscular", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "筋肉質"))), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "筋肉の初期サイズ:"), /*#__PURE__*/ React.createElement("select", { name: "muscleSize", className: "bg-transparent border border-gray-600 rounded p-2", value: muscleSize, onChange: (e)=>setMuscleSize(e.target.value), __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "small", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "小"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "中"), /*#__PURE__*/ React.createElement("option", { value: "large", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "大"))), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "髪型:"), /*#__PURE__*/ React.createElement("select", { name: "hairStyle", className: "bg-transparent border border-gray-600 rounded p-2", value: hairStyle, onChange: (e)=>setHairStyle(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "short", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "短い"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "中"), /*#__PURE__*/ React.createElement("option", { value: "long", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "長い"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "肌の色:"), /*#__PURE__*/ React.createElement("input", { type: "color", name: "skinColor", className: "border border-gray-600 rounded p-1 w-full", value: skinColor, onChange: (e)=>setSkinColor(e.target.value), __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "トレーニングモード"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "ベンチプレス"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded ml-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "スクワット"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded ml-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "デッドリフト"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "食事と栄養管理"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "食事プラン"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded ml-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "サプリメント"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "ゲーム内イベント"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "大会やコンテスト"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded ml-2", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "トレーニングパートナーやライバル"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "その他の機能"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "ショップ"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded ml-2", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "ストーリーモード"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1DA1F2] text-white py-2 px-4 rounded ml-2", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "マルチプレイヤー"))))); }