function ParticleJsBackground({ particleOptions }) { React.useEffect(()=>{ if (window.particlesJS) { window.particlesJS("particles-js", particleOptions); } }, [ particleOptions ]); return /*#__PURE__*/ React.createElement("div", { id: "particles-js", style: { width: '100%', height: '100%', position: 'fixed', zIndex: -1 }, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }); } function ParticleJsBackgroundStory() { const particleOptions = { particles: { number: { value: 400, density: { enable: true, value_area: 800 } }, color: { value: "#ffffff" }, shape: { type: "circle", stroke: { width: 0, color: "#000000" }, polygon: { nb_sides: 5 } }, opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 10, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } }, line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 }, move: { enable: true, speed: 6, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" }, resize: true }, modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } } }, retina_detect: true }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#000] m-0 p-0 overflow-hidden w-full h-full", __source: { fileName: "", lineNumber: 121, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ParticleJsBackground, { particleOptions: particleOptions, __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this }, ` body { margin: 0; padding: 0; background-color: #000; overflow: hidden; } `)); } function SpinItUpDjApp({ page }) { let content; switch(page){ case 'Home': content = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#010101] text-white", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Spin It Up"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-lg", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "The ultimate web-based DJ application. Mix, scratch, and share your audio tracks now."), /*#__PURE__*/ React.createElement("button", { className: "mt-8 px-6 py-3 bg-blue-500 text-white rounded-full font-medium hover:bg-blue-600", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Get Started")); break; case 'Mixing': content = /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] text-white min-h-screen", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Mixing Interface"), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black rounded-lg p-6 flex justify-around items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { animation: 'spin 10s linear infinite' }, className: "w-[200px] h-[200px] bg-gray-800 rounded-full", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4 w-[500px] h-[100px] bg-gray-700 rounded", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col ml-4", __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mb-2 px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 23, columnNumber: 19 }, __self: this }, "Upload File"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 24, columnNumber: 19 }, __self: this }, "Load URL")))))); break; case 'Profile': content = /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] min-h-screen text-black", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "User Profile"), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex flex-col space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Mixing History")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Saved Settings")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "Audio Library"))))); break; default: content = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, "Page not found"); } return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, content, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `)); } function SpinItUpDjAppStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SpinItUpDjApp, { page: "Home", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SpinItUpDjApp, { page: "Mixing", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SpinItUpDjApp, { page: "Profile", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); } function MainComponent() { const particleOptions = { particles: { number: { value: 400, density: { enable: true, value_area: 800 } }, color: { value: "#ffffff" }, shape: { type: "circle", stroke: { width: 0, color: "#000000" }, polygon: { nb_sides: 5 } }, opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 10, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } }, line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 }, move: { enable: true, speed: 6, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" }, resize: true }, modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } } }, retina_detect: true }; const handleTouchStart = (event)=>{ console.log("Touch Start:", event); }; const handleTouchMove = (event)=>{ console.log("Touch Move:", event); }; const handleTouchEnd = (event)=>{ console.log("Touch End:", event); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#010101] text-white", __source: { fileName: "", lineNumber: 121, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ParticleJsBackground, { particleOptions: particleOptions, __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto mb-10", __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this }, "Spin It Up - Your Ultimate DJ Experience"), /*#__PURE__*/ React.createElement(SpinItUpDjApp, { page: "Home", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#121212] rounded-lg w-full max-w-[600px]", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "Upload Audio"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "audioUpload", className: "text-sm text-white p-2 bg-[#252525] rounded-md w-full", multiple: true, __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#121212] rounded-lg w-full max-w-[600px]", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "Enter URL"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "audioURL", className: "text-sm text-white p-2 bg-[#252525] rounded-md w-full", placeholder: "https://", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-10 p-4 bg-[#121212] rounded-lg w-full max-w-[800px]", __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "Interactive Touch Panel"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center bg-black h-[200px] w-full rounded-md", onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }))); }