<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Study Discussion Club</title>
<!-- React & ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<style>
body { font-family: Arial; margin: 0; padding: 0; }
#root { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
</style>
</head>
<body>
<div id="root"></div>
<script src="script.js"></script> <!-- आपका React JS कोड -->
</body>
</html/* Add your styles here */
const { useState } = React;
function App() {
const [screen, setScreen] = useState("welcome");
const [signupData, setSignupData] = useState({ username: "", email: "", password: "", mobile: "", pin: "" });
const [loginData, setLoginData] = useState({ username: "", email: "", password: "", mobile: "", pin: "" });
const [selectedExam, setSelectedExam] = useState(null);
const containerStyle = { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 20, minHeight: "100vh", fontFamily: "Arial, sans-serif" };
const inputStyle = { padding: 10, borderRadius: 8, marginBottom: 10, width: "100%", border: "1px solid #ccc" };
const buttonStyle = (bg) => ({ backgroundColor: bg, padding: 12, borderRadius: 8, marginTop: 10, width: "100%", textAlign: "center", color: "#fff", fontWeight: "bold", cursor: bg === "gray" ? "not-allowed" : "pointer" });
const examBoxStyle = (selected) => ({ padding: 15, borderRadius: 10, margin: 8, width: "100%", textAlign: "center", border: "1px solid #ccc", backgroundColor: selected ? "#FF4500" : "#fff", cursor: "pointer" });
const menuBtnStyle = { padding: 15, borderRadius: 8, margin: 5, width: "80%", textAlign: "center", border: "1px solid #ccc", cursor: "pointer" };
// ----------------- WELCOME -----------------
if (screen === "welcome") {
return (
React.createElement("div", { style: {...containerStyle, backgroundColor: "#90EE90"} },
React.createElement("img", { src: "https://i.postimg.cc/Pf08JGn1/Screenshot-2025-10-05-17-33-28-667-edit-com-miui-gallery.jpg", style: {width:120, height:120, borderRadius:60, marginBottom:20} }),
React.createElement("h2", null, "Welcome to Study Discussion Club"),
React.createElement("p", null, "This App is Developed by Sajan"),
React.createElement("div", { style: buttonStyle("#007AFF"), onClick: () => setScreen("signup") }, "Next")
)
);
}
// ----------------- SIGNUP -----------------
if (screen === "signup") {
const isFormFilled = Object.values(signupData).every(val => val.trim() !== "");
return (
React.createElement("div", { style: {...containerStyle, backgroundColor:"#89CFF0", maxWidth:400, margin:"0 auto"} },
React.createElement("h2", null, "Signup"),
React.createElement("input", { placeholder:"Username", style:inputStyle, value:signupData.username, onChange:e => setSignupData({...signupData, username:e.target.value}) }),
React.createElement("input", { placeholder:"Email", style:inputStyle, value:signupData.email, onChange:e => setSignupData({...signupData, email:e.target.value}) }),
React.createElement("input", { placeholder:"Password", type:"password", style:inputStyle, value:signupData.password, onChange:e => setSignupData({...signupData, password:e.target.value}) }),
React.createElement("input", { placeholder:"Mobile No", style:inputStyle, value:signupData.mobile, onChange:e => setSignupData({...signupData, mobile:e.target.value}) }),
React.createElement("input", { placeholder:"Set Security Pin", type:"password", style:inputStyle, value:signupData.pin, onChange:e => setSignupData({...signupData, pin:e.target.value}) }),
React.createElement("div", { style: buttonStyle(isFormFilled ? "#007AFF" : "gray"), onClick:() => isFormFilled && setScreen("examlist") }, "Signup"),
React.createElement("p", { style:{color:"#007AFF", cursor:"pointer"}, onClick:() => setScreen("login") }, "Already have an account?")
)
);
}
// ----------------- LOGIN -----------------
if (screen === "login") {
return (
React.createElement("div", { style: {...containerStyle, backgroundColor:"#D3D3D3", maxWidth:400, margin:"0 auto"} },
React.createElement("p", { style:{cursor:"pointer", fontSize:18}, onClick:() => setScreen("signup") }, "🔙 Back"),
React.createElement("h2", null, "Login"),
React.createElement("input", { placeholder:"Username", style:inputStyle, value:loginData.username, onChange:e => setLoginData({...loginData, username:e.target.value}) }),
React.createElement("input", { placeholder:"Email", style:inputStyle, value:loginData.email, onChange:e => setLoginData({...loginData, email:e.target.value}) }),
React.createElement("input", { placeholder:"Password", type:"password", style:inputStyle, value:loginData.password, onChange:e => setLoginData({...loginData, password:e.target.value}) }),
React.createElement("input", { placeholder:"Mobile No", style:inputStyle, value:loginData.mobile, onChange:e => setLoginData({...loginData, mobile:e.target.value}) }),
React.createElement("input", { placeholder:"Security Pin", type:"password", style:inputStyle, value:loginData.pin, onChange:e => setLoginData({...loginData, pin:e.target.value}) }),
React.createElement("div", { style: buttonStyle("#007AFF"), onClick:() => setScreen("examlist") }, "Login")
)
);
}
// ----------------- EXAM LIST -----------------
if (screen === "examlist") {
const exams = ["UPSC","NEET","JEE","JUDICIARY","NDA","BOARD EXAM","MATRIC CLASSES"];
return (
React.createElement("div", { style: {...containerStyle, backgroundColor:"#FF7F7F", maxWidth:400, margin:"0 auto"} },
React.createElement("p", { style:{cursor:"pointer", fontSize:18}, onClick:() => setScreen("login") }, "🔙 Back"),
React.createElement("h2", null, "Exam List"),
exams.map(exam => React.createElement("div", { key:exam, style:examBoxStyle(selectedExam===exam), onClick:()=>setSelectedExam(exam) }, exam)),
React.createElement("div", { style: buttonStyle(selectedExam ? "#007AFF" : "gray"), onClick:()=>selectedExam && setScreen("home") }, "Next")
)
);
}
// ----------------- HOME -----------------
if (screen === "home") {
const menu = ["📌 Current Affairs","📝 Practice Questions","🎤 Interview Practice","📚 Quick Books Revise","📖 UPSC Mind Maps","🔒 Hidden Topics","💬 Discussion","🏆 Contest"];
return (
React.createElement("div", { style: {...containerStyle, backgroundColor:"#f0f0f0", maxWidth:400, margin:"0 auto"} },
React.createElement("h2", null, "Home"),
menu.map(item => React.createElement("div", { key:item, style:menuBtnStyle }, item))
)
);
}
return null;
}
ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));