\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n body {\n font-family: 'Prompt', sans-serif;\n background-color: #f8fafc;\n color: #1e293b;\n }\n \/* Custom scrollbar for better look *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1; \n }\n ::-webkit-scrollbar-thumb {\n background: #cbd5e1; \n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #94a3b8; \n }\n .animate-fade-in {\n animation: fadeIn 0.5s ease-out forwards;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect, useRef } = React;\n\n \/\/ Default demo candidates\n const initialCandidates = [\n { id: '1', number: '1', name: '\u0e19\u0e32\u0e22\u0e01\u0e49\u0e32\u0e27\u0e2b\u0e19\u0e49\u0e32 \u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19', party: '\u0e1e\u0e23\u0e23\u0e04\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19', votes: 0 },\n { id: '2', number: '2', name: '\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e40\u0e23\u0e35\u0e22\u0e19\u0e14\u0e35 \u0e01\u0e35\u0e2c\u0e32\u0e40\u0e14\u0e48\u0e19', party: '\u0e1e\u0e23\u0e23\u0e04\u0e23\u0e27\u0e21\u0e1e\u0e25\u0e31\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19', votes: 0 },\n { id: '3', number: '3', name: '\u0e19\u0e32\u0e22\u0e2a\u0e14\u0e43\u0e2a \u0e23\u0e48\u0e32\u0e40\u0e23\u0e34\u0e07', party: '\u0e1e\u0e23\u0e23\u0e04\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c\u0e2a\u0e31\u0e07\u0e04\u0e21', votes: 0 }\n ];\n\n function App() {\n \/\/ phase can be: 'setup', 'voting', 'results'\n const [phase, setPhase] = useState('setup');\n const [candidates, setCandidates] = useState(initialCandidates);\n \n \/\/ Admin Modal State\n const [showAdminModal, setShowAdminModal] = useState(false);\n const [adminPin, setAdminPin] = useState('');\n const [adminError, setAdminError] = useState('');\n \n \/\/ Voting State\n const [selectedCandidate, setSelectedCandidate] = useState(null);\n const [showConfirmModal, setShowConfirmModal] = useState(false);\n const [showThankYou, setShowThankYou] = useState(false);\n\n const CORRECT_PIN = '1234'; \/\/ Hardcoded PIN for demo\n\n const handleStartElection = () => {\n if (candidates.length < 2) {\n alert('\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e49\u0e2d\u0e22 2 \u0e04\u0e19'); \/\/ Fallback, normally avoid alert but keeping it simple for setup error\n return;\n }\n setPhase('voting');\n };\n\n const handleVoteClick = (candidate) => {\n setSelectedCandidate(candidate);\n setShowConfirmModal(true);\n };\n\n const confirmVote = () => {\n setCandidates(prev => prev.map(c => \n c.id === selectedCandidate.id ? { ...c, votes: c.votes + 1 } : c\n ));\n setShowConfirmModal(false);\n setShowThankYou(true);\n \n \/\/ Show thank you screen for 3 seconds, then return to voting\n setTimeout(() => {\n setShowThankYou(false);\n setSelectedCandidate(null);\n }, 3000);\n };\n\n const handleAdminLogin = () => {\n if (adminPin === CORRECT_PIN) {\n setShowAdminModal(false);\n setAdminPin('');\n setAdminError('');\n setPhase('results');\n } else {\n setAdminError('\u0e23\u0e2b\u0e31\u0e2a PIN \u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07');\n }\n };\n\n const SchoolHeader = () => (\n <div className=\"w-full relative shadow-md z-10\">\n <div className=\"h-56 md:h-72 w-full bg-cover bg-center relative\" style={{ backgroundImage: \"url('https:\/\/images.unsplash.com\/photo-1577415124269-b911fb922d99?auto=format&fit=crop&w=2000&q=80')\" }}>\n {\/* Overlay to darken image and make text readable *\/}\n <div className=\"absolute inset-0 bg-gradient-to-b from-green-900\/80 to-blue-900\/90 mix-blend-multiply\"><\/div>\n \n <div className=\"absolute inset-0 flex flex-col items-center justify-center text-white px-4 text-center\">\n {\/* \ud83d\udca1 \u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33: \u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33 Link \u0e23\u0e39\u0e1b\u0e42\u0e25\u0e42\u0e01\u0e49\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e32\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e15\u0e23\u0e07 src \u0e44\u0e14\u0e49\u0e40\u0e25\u0e22 *\/}\n <img decoding=\"async\" \n src=\"image_523aa0.jpg\" \n alt=\"\u0e42\u0e25\u0e42\u0e01\u0e49\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\" \n className=\"w-20 h-20 md:w-24 md:h-24 mb-3 object-contain bg-white rounded-full p-1 shadow-xl border-2 border-white\/20\"\n \/>\n <h1 className=\"text-3xl md:text-5xl font-bold mb-3 tracking-wide text-white drop-shadow-lg\">\n \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\n <\/h1>\n <div className=\"inline-block bg-white\/20 backdrop-blur-sm px-6 py-2 rounded-full border border-white\/30\">\n <h2 className=\"text-xl md:text-2xl font-medium text-white drop-shadow-md\">\n \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e1b\u0e49\u0e19\u0e2a\u0e32\u0e21\u0e31\u0e04\u0e04\u0e35\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e1a\u0e33\u0e23\u0e38\u0e07\n <\/h2>\n <\/div>\n <\/div>\n\n {phase === 'voting' && !showThankYou && (\n <button \n onClick={() => setShowAdminModal(true)}\n className=\"absolute top-4 right-4 bg-white\/10 hover:bg-white\/30 backdrop-blur-sm text-white w-12 h-12 flex items-center justify-center rounded-full transition duration-300 shadow-sm border border-white\/20 z-20\"\n title=\"\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a (\u0e1b\u0e34\u0e14\u0e2b\u0e35\u0e1a)\"\n >\n <i className=\"fas fa-cog text-xl\"><\/i>\n <\/button>\n )}\n <\/div>\n <\/div>\n );\n\n const SetupScreen = () => {\n const [newNumber, setNewNumber] = useState('');\n const [newName, setNewName] = useState('');\n const [newParty, setNewParty] = useState('');\n\n const addCandidate = (e) => {\n e.preventDefault();\n if (!newNumber || !newName || !newParty) return;\n \n const newCandidate = {\n id: Date.now().toString(),\n number: newNumber,\n name: newName,\n party: newParty,\n votes: 0\n };\n setCandidates([...candidates, newCandidate]);\n setNewNumber('');\n setNewName('');\n setNewParty('');\n };\n\n const removeCandidate = (id) => {\n setCandidates(candidates.filter(c => c.id !== id));\n };\n\n return (\n <div className=\"max-w-5xl mx-auto p-6 animate-fade-in py-8\">\n <div className=\"text-center mb-8\">\n <h2 className=\"text-2xl font-bold text-gray-800\">\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23<\/h2>\n <p className=\"text-gray-500 mt-1\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e01\u0e48\u0e2d\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e2b\u0e35\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07<\/p>\n <\/div>\n\n <div className=\"grid md:grid-cols-2 gap-8\">\n {\/* Form *\/}\n <div className=\"bg-white p-6 rounded-2xl shadow-lg border border-gray-100\">\n <h2 className=\"text-xl font-semibold mb-4 text-gray-800\"><i className=\"fas fa-user-plus mr-2 text-blue-500\"><\/i>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e43\u0e2b\u0e21\u0e48<\/h2>\n <form onSubmit={addCandidate} className=\"space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c<\/label>\n <input type=\"number\" value={newNumber} onChange={e => setNewNumber(e.target.value)} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\" required placeholder=\"\u0e40\u0e0a\u0e48\u0e19 1\" \/>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25<\/label>\n <input type=\"text\" value={newName} onChange={e => setNewName(e.target.value)} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\" required placeholder=\"\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\" \/>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\u0e1e\u0e23\u0e23\u0e04<\/label>\n <input type=\"text\" value={newParty} onChange={e => setNewParty(e.target.value)} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\" required placeholder=\"\u0e0a\u0e37\u0e48\u0e2d\u0e1e\u0e23\u0e23\u0e04\" \/>\n <\/div>\n <button type=\"submit\" className=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition shadow-md\">\n \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\n <\/button>\n <\/form>\n <\/div>\n\n {\/* List *\/}\n <div className=\"bg-white p-6 rounded-2xl shadow-lg border border-gray-100 flex flex-col\">\n <h2 className=\"text-xl font-semibold mb-4 text-gray-800\"><i className=\"fas fa-users mr-2 text-blue-500\"><\/i>\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23 ({candidates.length})<\/h2>\n <div className=\"flex-1 overflow-y-auto max-h-80 space-y-3 pr-2\">\n {candidates.length === 0 ? (\n <p className=\"text-gray-500 text-center py-8\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23<\/p>\n ) : (\n candidates.map(c => (\n <div key={c.id} className=\"flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-200\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-lg\">\n {c.number}\n <\/div>\n <div>\n <div className=\"font-medium text-gray-900\">{c.name}<\/div>\n <div className=\"text-sm text-gray-500\">{c.party}<\/div>\n <\/div>\n <\/div>\n <button onClick={() => removeCandidate(c.id)} className=\"text-red-500 hover:text-red-700 w-8 h-8 rounded-full hover:bg-red-50 flex items-center justify-center transition\">\n <i className=\"fas fa-trash\"><\/i>\n <\/button>\n <\/div>\n ))\n )}\n <\/div>\n <button \n onClick={handleStartElection}\n disabled={candidates.length === 0}\n className={`mt-6 w-full py-3 rounded-xl font-bold text-lg transition shadow-lg ${candidates.length > 0 ? 'bg-green-500 hover:bg-green-600 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}\n >\n <i className=\"fas fa-play mr-2\"><\/i> \u0e40\u0e1b\u0e34\u0e14\u0e2b\u0e35\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const VotingScreen = () => {\n if (showThankYou) {\n return (\n <div className=\"py-20 flex items-center justify-center bg-green-50\/50 animate-fade-in\">\n <div className=\"text-center p-8 bg-white rounded-3xl shadow-xl max-w-md w-full border border-green-100\">\n <div className=\"w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 text-green-500 text-5xl\">\n <i className=\"fas fa-check-circle\"><\/i>\n <\/div>\n <h2 className=\"text-3xl font-bold text-gray-800 mb-2\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e04\u0e30\u0e41\u0e19\u0e19\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08<\/h2>\n <p className=\"text-xl text-gray-600 mb-6\">\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13<\/p>\n <div className=\"w-full bg-gray-200 rounded-full h-2 mb-4 overflow-hidden\">\n <div className=\"bg-green-500 h-2 rounded-full\" style={{ animation: 'progressBar 3s linear forwards' }}><\/div>\n <\/div>\n <style>{`@keyframes progressBar { 0% { width: 0%; } 100% { width: 100%; } }`}<\/style>\n <\/div>\n <\/div>\n );\n }\n\n return (\n <div className=\"flex-1 flex flex-col animate-fade-in bg-slate-100\">\n {\/* Candidates Grid *\/}\n <main className=\"flex-1 max-w-6xl w-full mx-auto p-6 md:p-8\">\n <div className=\"text-center mb-10\">\n <h2 className=\"text-3xl font-bold text-gray-800 mb-3\">\u0e42\u0e1b\u0e23\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/h2>\n <p className=\"text-lg text-gray-600\">\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1a\u0e31\u0e15\u0e23\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e25\u0e07\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07<\/p>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8\">\n {candidates.map(c => (\n <button \n key={c.id}\n onClick={() => handleVoteClick(c)}\n className=\"group bg-white rounded-3xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border-2 border-transparent hover:border-blue-400 text-left flex flex-col items-center relative overflow-hidden\"\n >\n <div className=\"absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-400 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity\"><\/div>\n \n <div className=\"w-24 h-24 md:w-32 md:h-32 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center text-5xl md:text-6xl font-bold text-blue-700 shadow-inner mb-6 group-hover:scale-110 transition-transform\">\n {c.number}\n <\/div>\n \n <div className=\"text-center w-full\">\n <h3 className=\"text-xl md:text-2xl font-bold text-gray-800 mb-2\">{c.name}<\/h3>\n <p className=\"text-md md:text-lg text-blue-600 font-medium bg-blue-50 py-1 px-4 rounded-full inline-block\">\n {c.party}\n <\/p>\n <\/div>\n <\/button>\n ))}\n <\/div>\n <\/main>\n\n {\/* Confirm Modal *\/}\n {showConfirmModal && selectedCandidate && (\n <div className=\"fixed inset-0 bg-black\/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in\">\n <div className=\"bg-white rounded-3xl shadow-2xl max-w-md w-full overflow-hidden\">\n <div className=\"bg-blue-600 p-6 text-center\">\n <h3 className=\"text-2xl font-bold text-white\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e25\u0e07\u0e04\u0e30\u0e41\u0e19\u0e19?<\/h3>\n <\/div>\n <div className=\"p-8 text-center\">\n <div className=\"text-7xl font-bold text-blue-600 mb-4\">{selectedCandidate.number}<\/div>\n <p className=\"text-xl font-medium text-gray-800\">{selectedCandidate.name}<\/p>\n <p className=\"text-gray-500 mb-8\">{selectedCandidate.party}<\/p>\n \n <div className=\"flex gap-4\">\n <button \n onClick={() => setShowConfirmModal(false)}\n className=\"flex-1 py-3 px-4 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-xl transition\"\n >\n \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01\n <\/button>\n <button \n onClick={confirmVote}\n className=\"flex-1 py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl transition shadow-lg shadow-blue-200\"\n >\n \u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n );\n };\n\n const ResultsScreen = () => {\n \/\/ Sort candidates by votes descending\n const sortedCandidates = [...candidates].sort((a, b) => b.votes - a.votes);\n const totalVotes = candidates.reduce((sum, c) => sum + c.votes, 0);\n const winner = sortedCandidates[0];\n const isTie = sortedCandidates.length > 1 && sortedCandidates[0].votes === sortedCandidates[1].votes && sortedCandidates[0].votes > 0;\n\n return (\n <div className=\"bg-slate-50 py-10 px-4 animate-fade-in\">\n <div className=\"max-w-5xl mx-auto\">\n <div className=\"text-center mb-10\">\n <h2 className=\"text-3xl font-bold text-indigo-900 mb-2\">\u0e2a\u0e23\u0e38\u0e1b\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23<\/h2>\n <p className=\"text-xl text-gray-600\">\u0e1c\u0e39\u0e49\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14: <span className=\"font-bold text-indigo-600\">{totalVotes}<\/span> \u0e40\u0e2a\u0e35\u0e22\u0e07<\/p>\n <\/div>\n\n {\/* Winner Card *\/}\n {totalVotes > 0 ? (\n <div className=\"bg-gradient-to-br from-yellow-50 to-amber-100 rounded-3xl p-8 shadow-xl border border-amber-200 mb-10 text-center relative overflow-hidden\">\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-yellow-300 rounded-full blur-3xl opacity-50 transform translate-x-1\/2 -translate-y-1\/2\"><\/div>\n <div className=\"absolute bottom-0 left-0 w-32 h-32 bg-amber-400 rounded-full blur-3xl opacity-30 transform -translate-x-1\/2 translate-y-1\/2\"><\/div>\n \n <h2 className=\"text-2xl font-bold text-amber-800 mb-6 relative z-10\">\n <i className=\"fas fa-trophy text-yellow-500 mr-2 text-3xl\"><\/i> \n {isTie ? '\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e2a\u0e21\u0e2d\u0e01\u0e31\u0e19' : '\u0e1c\u0e39\u0e49\u0e0a\u0e19\u0e30\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07'}\n <\/h2>\n \n <div className=\"flex flex-col items-center relative z-10\">\n <div className=\"w-24 h-24 bg-white rounded-full flex items-center justify-center text-5xl font-bold text-amber-600 shadow-lg mb-4 border-4 border-yellow-200\">\n {winner.number}\n <\/div>\n <h3 className=\"text-3xl font-bold text-gray-900 mb-1\">{winner.name}<\/h3>\n <p className=\"text-lg text-amber-700 font-medium mb-4\">{winner.party}<\/p>\n <div className=\"bg-white py-2 px-6 rounded-full shadow-sm\">\n <span className=\"text-gray-600 mr-2\">\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07:<\/span>\n <span className=\"text-2xl font-bold text-indigo-600\">{winner.votes}<\/span>\n <\/div>\n <\/div>\n <\/div>\n ) : (\n <div className=\"bg-white rounded-3xl p-8 shadow-md text-center mb-10\">\n <p className=\"text-xl text-gray-500\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e25\u0e07\u0e04\u0e30\u0e41\u0e19\u0e19<\/p>\n <\/div>\n )}\n\n {\/* All Results Bar Chart *\/}\n <div className=\"bg-white rounded-3xl p-6 md:p-8 shadow-lg border border-gray-100\">\n <h3 className=\"text-xl font-bold text-gray-800 mb-6 border-b pb-4\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07<\/h3>\n <div className=\"space-y-6\">\n {sortedCandidates.map((c, index) => {\n const percentage = totalVotes > 0 ? ((c.votes \/ totalVotes) * 100).toFixed(1) : 0;\n return (\n <div key={c.id}>\n <div className=\"flex justify-between items-end mb-2\">\n <div className=\"flex items-center gap-3\">\n <span className=\"w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 text-sm\">\n \u0e40\u0e1a\u0e2d\u0e23\u0e4c {c.number}\n <\/span>\n <span className=\"font-semibold text-gray-800\">{c.name}<\/span>\n <\/div>\n <div className=\"text-right\">\n <span className=\"font-bold text-lg text-indigo-600\">{c.votes}<\/span>\n <span className=\"text-sm text-gray-500 ml-1\">\u0e04\u0e30\u0e41\u0e19\u0e19 ({percentage}%)<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full bg-gray-100 rounded-full h-3 overflow-hidden\">\n <div \n className={`h-3 rounded-full ${index === 0 && totalVotes > 0 ? 'bg-amber-400' : 'bg-blue-500'}`}\n style={{ width: `${percentage}%`, transition: 'width 1s ease-out' }}\n ><\/div>\n <\/div>\n <\/div>\n );\n })}\n <\/div>\n <\/div>\n \n <div className=\"mt-8 text-center\">\n <button \n onClick={() => {\n setPhase('setup');\n setCandidates(initialCandidates.map(c => ({...c, votes: 0}))); \/\/ reset to demo state\n }}\n className=\"text-gray-500 hover:text-indigo-600 underline transition\"\n >\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e43\u0e2b\u0e21\u0e48 (\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25)\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n return (\n <div className=\"min-h-screen flex flex-col bg-slate-100 font-sans\">\n <SchoolHeader \/>\n \n <div className=\"flex-1\">\n {phase === 'setup' && <SetupScreen \/>}\n {phase === 'voting' && <VotingScreen \/>}\n {phase === 'results' && <ResultsScreen \/>}\n <\/div>\n\n {\/* Admin Modal for Ending Election *\/}\n {showAdminModal && (\n <div className=\"fixed inset-0 bg-black\/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fade-in\">\n <div className=\"bg-white rounded-2xl shadow-2xl max-w-sm w-full p-6 relative\">\n <button \n onClick={() => { setShowAdminModal(false); setAdminError(''); setAdminPin(''); }}\n className=\"absolute top-4 right-4 text-gray-400 hover:text-gray-600\"\n >\n <i className=\"fas fa-times\"><\/i>\n <\/button>\n \n <div className=\"text-center mb-6\">\n <div className=\"w-16 h-16 bg-red-100 text-red-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\">\n <i className=\"fas fa-lock\"><\/i>\n <\/div>\n <h3 className=\"text-xl font-bold text-gray-800\">\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a<\/h3>\n <p className=\"text-sm text-gray-500 mt-1\">\u0e1b\u0e34\u0e14\u0e2b\u0e35\u0e1a\u0e41\u0e25\u0e30\u0e14\u0e39\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07<\/p>\n <p className=\"text-xs text-blue-500 mt-2 bg-blue-50 inline-block px-2 py-1 rounded\">(\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e17\u0e14\u0e2a\u0e2d\u0e1a: 1234)<\/p>\n <\/div>\n\n <div className=\"space-y-4\">\n <div>\n <input \n type=\"password\" \n value={adminPin}\n onChange={(e) => setAdminPin(e.target.value)}\n placeholder=\"\u0e43\u0e2a\u0e48\u0e23\u0e2b\u0e31\u0e2a PIN\"\n className=\"w-full text-center text-2xl tracking-[0.5em] px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none transition\"\n maxLength=\"4\"\n \/>\n {adminError && <p className=\"text-red-500 text-sm text-center mt-2\">{adminError}<\/p>}\n <\/div>\n \n <button \n onClick={handleAdminLogin}\n className=\"w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-xl transition shadow-md\"\n >\n \u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e41\u0e25\u0e30\u0e14\u0e39\u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n );\n }\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e19 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2063","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"akkaporn keumyarach","author_link":"https:\/\/banpan.ac.th\/?author=3"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e19 […]","_links":{"self":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2063"}],"version-history":[{"count":5,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2063\/revisions"}],"predecessor-version":[{"id":2071,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2063\/revisions\/2071"}],"wp:attachment":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n body {\n font-family: 'Prompt', sans-serif;\n background-color: #f8fafc;\n color: #1e293b;\n }\n \/* Custom scrollbar for better look *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1; \n }\n ::-webkit-scrollbar-thumb {\n background: #cbd5e1; \n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #94a3b8; \n }\n .animate-fade-in {\n animation: fadeIn 0.5s ease-out forwards;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect, useRef } = React;\n\n \/\/ Default demo candidates\n const initialCandidates = [\n { id: '1', number: '1', name: '\u0e19\u0e32\u0e22\u0e01\u0e49\u0e32\u0e27\u0e2b\u0e19\u0e49\u0e32 \u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19', party: '\u0e1e\u0e23\u0e23\u0e04\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19', votes: 0 },\n { id: '2', number: '2', name: '\u0e19\u0e32\u0e07\u0e2a\u0e32\u0e27\u0e40\u0e23\u0e35\u0e22\u0e19\u0e14\u0e35 \u0e01\u0e35\u0e2c\u0e32\u0e40\u0e14\u0e48\u0e19', party: '\u0e1e\u0e23\u0e23\u0e04\u0e23\u0e27\u0e21\u0e1e\u0e25\u0e31\u0e07\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19', votes: 0 },\n { id: '3', number: '3', name: '\u0e19\u0e32\u0e22\u0e2a\u0e14\u0e43\u0e2a \u0e23\u0e48\u0e32\u0e40\u0e23\u0e34\u0e07', party: '\u0e1e\u0e23\u0e23\u0e04\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c\u0e2a\u0e31\u0e07\u0e04\u0e21', votes: 0 }\n ];\n\n function App() {\n \/\/ phase can be: 'setup', 'voting', 'results'\n const [phase, setPhase] = useState('setup');\n const [candidates, setCandidates] = useState(initialCandidates);\n \n \/\/ Admin Modal State\n const [showAdminModal, setShowAdminModal] = useState(false);\n const [adminPin, setAdminPin] = useState('');\n const [adminError, setAdminError] = useState('');\n \n \/\/ Voting State\n const [selectedCandidate, setSelectedCandidate] = useState(null);\n const [showConfirmModal, setShowConfirmModal] = useState(false);\n const [showThankYou, setShowThankYou] = useState(false);\n\n const CORRECT_PIN = '1234'; \/\/ Hardcoded PIN for demo\n\n const handleStartElection = () => {\n if (candidates.length < 2) {\n alert('\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e49\u0e2d\u0e22 2 \u0e04\u0e19'); \/\/ Fallback, normally avoid alert but keeping it simple for setup error\n return;\n }\n setPhase('voting');\n };\n\n const handleVoteClick = (candidate) => {\n setSelectedCandidate(candidate);\n setShowConfirmModal(true);\n };\n\n const confirmVote = () => {\n setCandidates(prev => prev.map(c => \n c.id === selectedCandidate.id ? { ...c, votes: c.votes + 1 } : c\n ));\n setShowConfirmModal(false);\n setShowThankYou(true);\n \n \/\/ Show thank you screen for 3 seconds, then return to voting\n setTimeout(() => {\n setShowThankYou(false);\n setSelectedCandidate(null);\n }, 3000);\n };\n\n const handleAdminLogin = () => {\n if (adminPin === CORRECT_PIN) {\n setShowAdminModal(false);\n setAdminPin('');\n setAdminError('');\n setPhase('results');\n } else {\n setAdminError('\u0e23\u0e2b\u0e31\u0e2a PIN \u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07');\n }\n };\n\n const SchoolHeader = () => (\n <div className=\"w-full relative shadow-md z-10\">\n <div className=\"h-56 md:h-72 w-full bg-cover bg-center relative\" style={{ backgroundImage: \"url('https:\/\/images.unsplash.com\/photo-1577415124269-b911fb922d99?auto=format&fit=crop&w=2000&q=80')\" }}>\n {\/* Overlay to darken image and make text readable *\/}\n <div className=\"absolute inset-0 bg-gradient-to-b from-green-900\/80 to-blue-900\/90 mix-blend-multiply\"><\/div>\n \n <div className=\"absolute inset-0 flex flex-col items-center justify-center text-white px-4 text-center\">\n {\/* \ud83d\udca1 \u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33: \u0e04\u0e38\u0e13\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33 Link \u0e23\u0e39\u0e1b\u0e42\u0e25\u0e42\u0e01\u0e49\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e32\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e15\u0e23\u0e07 src \u0e44\u0e14\u0e49\u0e40\u0e25\u0e22 *\/}\n <img decoding=\"async\" \n src=\"image_523aa0.jpg\" \n alt=\"\u0e42\u0e25\u0e42\u0e01\u0e49\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\" \n className=\"w-20 h-20 md:w-24 md:h-24 mb-3 object-contain bg-white rounded-full p-1 shadow-xl border-2 border-white\/20\"\n \/>\n <h1 className=\"text-3xl md:text-5xl font-bold mb-3 tracking-wide text-white drop-shadow-lg\">\n \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\n <\/h1>\n <div className=\"inline-block bg-white\/20 backdrop-blur-sm px-6 py-2 rounded-full border border-white\/30\">\n <h2 className=\"text-xl md:text-2xl font-medium text-white drop-shadow-md\">\n \u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e1b\u0e49\u0e19\u0e2a\u0e32\u0e21\u0e31\u0e04\u0e04\u0e35\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e1a\u0e33\u0e23\u0e38\u0e07\n <\/h2>\n <\/div>\n <\/div>\n\n {phase === 'voting' && !showThankYou && (\n <button \n onClick={() => setShowAdminModal(true)}\n className=\"absolute top-4 right-4 bg-white\/10 hover:bg-white\/30 backdrop-blur-sm text-white w-12 h-12 flex items-center justify-center rounded-full transition duration-300 shadow-sm border border-white\/20 z-20\"\n title=\"\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a (\u0e1b\u0e34\u0e14\u0e2b\u0e35\u0e1a)\"\n >\n <i className=\"fas fa-cog text-xl\"><\/i>\n <\/button>\n )}\n <\/div>\n <\/div>\n );\n\n const SetupScreen = () => {\n const [newNumber, setNewNumber] = useState('');\n const [newName, setNewName] = useState('');\n const [newParty, setNewParty] = useState('');\n\n const addCandidate = (e) => {\n e.preventDefault();\n if (!newNumber || !newName || !newParty) return;\n \n const newCandidate = {\n id: Date.now().toString(),\n number: newNumber,\n name: newName,\n party: newParty,\n votes: 0\n };\n setCandidates([...candidates, newCandidate]);\n setNewNumber('');\n setNewName('');\n setNewParty('');\n };\n\n const removeCandidate = (id) => {\n setCandidates(candidates.filter(c => c.id !== id));\n };\n\n return (\n <div className=\"max-w-5xl mx-auto p-6 animate-fade-in py-8\">\n <div className=\"text-center mb-8\">\n <h2 className=\"text-2xl font-bold text-gray-800\">\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23<\/h2>\n <p className=\"text-gray-500 mt-1\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e01\u0e48\u0e2d\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e2b\u0e35\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07<\/p>\n <\/div>\n\n <div className=\"grid md:grid-cols-2 gap-8\">\n {\/* Form *\/}\n <div className=\"bg-white p-6 rounded-2xl shadow-lg border border-gray-100\">\n <h2 className=\"text-xl font-semibold mb-4 text-gray-800\"><i className=\"fas fa-user-plus mr-2 text-blue-500\"><\/i>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e43\u0e2b\u0e21\u0e48<\/h2>\n <form onSubmit={addCandidate} className=\"space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\u0e40\u0e1a\u0e2d\u0e23\u0e4c<\/label>\n <input type=\"number\" value={newNumber} onChange={e => setNewNumber(e.target.value)} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\" required placeholder=\"\u0e40\u0e0a\u0e48\u0e19 1\" \/>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\u0e0a\u0e37\u0e48\u0e2d-\u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25<\/label>\n <input type=\"text\" value={newName} onChange={e => setNewName(e.target.value)} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\" required placeholder=\"\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\" \/>\n <\/div>\n <div>\n <label className=\"block text-sm font-medium text-gray-700 mb-1\">\u0e1e\u0e23\u0e23\u0e04<\/label>\n <input type=\"text\" value={newParty} onChange={e => setNewParty(e.target.value)} className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition\" required placeholder=\"\u0e0a\u0e37\u0e48\u0e2d\u0e1e\u0e23\u0e23\u0e04\" \/>\n <\/div>\n <button type=\"submit\" className=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition shadow-md\">\n \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\n <\/button>\n <\/form>\n <\/div>\n\n {\/* List *\/}\n <div className=\"bg-white p-6 rounded-2xl shadow-lg border border-gray-100 flex flex-col\">\n <h2 className=\"text-xl font-semibold mb-4 text-gray-800\"><i className=\"fas fa-users mr-2 text-blue-500\"><\/i>\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23 ({candidates.length})<\/h2>\n <div className=\"flex-1 overflow-y-auto max-h-80 space-y-3 pr-2\">\n {candidates.length === 0 ? (\n <p className=\"text-gray-500 text-center py-8\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23<\/p>\n ) : (\n candidates.map(c => (\n <div key={c.id} className=\"flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-200\">\n <div className=\"flex items-center gap-3\">\n <div className=\"w-10 h-10 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-lg\">\n {c.number}\n <\/div>\n <div>\n <div className=\"font-medium text-gray-900\">{c.name}<\/div>\n <div className=\"text-sm text-gray-500\">{c.party}<\/div>\n <\/div>\n <\/div>\n <button onClick={() => removeCandidate(c.id)} className=\"text-red-500 hover:text-red-700 w-8 h-8 rounded-full hover:bg-red-50 flex items-center justify-center transition\">\n <i className=\"fas fa-trash\"><\/i>\n <\/button>\n <\/div>\n ))\n )}\n <\/div>\n <button \n onClick={handleStartElection}\n disabled={candidates.length === 0}\n className={`mt-6 w-full py-3 rounded-xl font-bold text-lg transition shadow-lg ${candidates.length > 0 ? 'bg-green-500 hover:bg-green-600 text-white' : 'bg-gray-300 text-gray-500 cursor-not-allowed'}`}\n >\n <i className=\"fas fa-play mr-2\"><\/i> \u0e40\u0e1b\u0e34\u0e14\u0e2b\u0e35\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const VotingScreen = () => {\n if (showThankYou) {\n return (\n <div className=\"py-20 flex items-center justify-center bg-green-50\/50 animate-fade-in\">\n <div className=\"text-center p-8 bg-white rounded-3xl shadow-xl max-w-md w-full border border-green-100\">\n <div className=\"w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 text-green-500 text-5xl\">\n <i className=\"fas fa-check-circle\"><\/i>\n <\/div>\n <h2 className=\"text-3xl font-bold text-gray-800 mb-2\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e04\u0e30\u0e41\u0e19\u0e19\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08<\/h2>\n <p className=\"text-xl text-gray-600 mb-6\">\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13<\/p>\n <div className=\"w-full bg-gray-200 rounded-full h-2 mb-4 overflow-hidden\">\n <div className=\"bg-green-500 h-2 rounded-full\" style={{ animation: 'progressBar 3s linear forwards' }}><\/div>\n <\/div>\n <style>{`@keyframes progressBar { 0% { width: 0%; } 100% { width: 100%; } }`}<\/style>\n <\/div>\n <\/div>\n );\n }\n\n return (\n <div className=\"flex-1 flex flex-col animate-fade-in bg-slate-100\">\n {\/* Candidates Grid *\/}\n <main className=\"flex-1 max-w-6xl w-full mx-auto p-6 md:p-8\">\n <div className=\"text-center mb-10\">\n <h2 className=\"text-3xl font-bold text-gray-800 mb-3\">\u0e42\u0e1b\u0e23\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/h2>\n <p className=\"text-lg text-gray-600\">\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e1a\u0e31\u0e15\u0e23\u0e1c\u0e39\u0e49\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e25\u0e07\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07<\/p>\n <\/div>\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8\">\n {candidates.map(c => (\n <button \n key={c.id}\n onClick={() => handleVoteClick(c)}\n className=\"group bg-white rounded-3xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border-2 border-transparent hover:border-blue-400 text-left flex flex-col items-center relative overflow-hidden\"\n >\n <div className=\"absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-400 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity\"><\/div>\n \n <div className=\"w-24 h-24 md:w-32 md:h-32 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center text-5xl md:text-6xl font-bold text-blue-700 shadow-inner mb-6 group-hover:scale-110 transition-transform\">\n {c.number}\n <\/div>\n \n <div className=\"text-center w-full\">\n <h3 className=\"text-xl md:text-2xl font-bold text-gray-800 mb-2\">{c.name}<\/h3>\n <p className=\"text-md md:text-lg text-blue-600 font-medium bg-blue-50 py-1 px-4 rounded-full inline-block\">\n {c.party}\n <\/p>\n <\/div>\n <\/button>\n ))}\n <\/div>\n <\/main>\n\n {\/* Confirm Modal *\/}\n {showConfirmModal && selectedCandidate && (\n <div className=\"fixed inset-0 bg-black\/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in\">\n <div className=\"bg-white rounded-3xl shadow-2xl max-w-md w-full overflow-hidden\">\n <div className=\"bg-blue-600 p-6 text-center\">\n <h3 className=\"text-2xl font-bold text-white\">\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e25\u0e07\u0e04\u0e30\u0e41\u0e19\u0e19?<\/h3>\n <\/div>\n <div className=\"p-8 text-center\">\n <div className=\"text-7xl font-bold text-blue-600 mb-4\">{selectedCandidate.number}<\/div>\n <p className=\"text-xl font-medium text-gray-800\">{selectedCandidate.name}<\/p>\n <p className=\"text-gray-500 mb-8\">{selectedCandidate.party}<\/p>\n \n <div className=\"flex gap-4\">\n <button \n onClick={() => setShowConfirmModal(false)}\n className=\"flex-1 py-3 px-4 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-xl transition\"\n >\n \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01\n <\/button>\n <button \n onClick={confirmVote}\n className=\"flex-1 py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl transition shadow-lg shadow-blue-200\"\n >\n \u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n );\n };\n\n const ResultsScreen = () => {\n \/\/ Sort candidates by votes descending\n const sortedCandidates = [...candidates].sort((a, b) => b.votes - a.votes);\n const totalVotes = candidates.reduce((sum, c) => sum + c.votes, 0);\n const winner = sortedCandidates[0];\n const isTie = sortedCandidates.length > 1 && sortedCandidates[0].votes === sortedCandidates[1].votes && sortedCandidates[0].votes > 0;\n\n return (\n <div className=\"bg-slate-50 py-10 px-4 animate-fade-in\">\n <div className=\"max-w-5xl mx-auto\">\n <div className=\"text-center mb-10\">\n <h2 className=\"text-3xl font-bold text-indigo-900 mb-2\">\u0e2a\u0e23\u0e38\u0e1b\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23<\/h2>\n <p className=\"text-xl text-gray-600\">\u0e1c\u0e39\u0e49\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14: <span className=\"font-bold text-indigo-600\">{totalVotes}<\/span> \u0e40\u0e2a\u0e35\u0e22\u0e07<\/p>\n <\/div>\n\n {\/* Winner Card *\/}\n {totalVotes > 0 ? (\n <div className=\"bg-gradient-to-br from-yellow-50 to-amber-100 rounded-3xl p-8 shadow-xl border border-amber-200 mb-10 text-center relative overflow-hidden\">\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-yellow-300 rounded-full blur-3xl opacity-50 transform translate-x-1\/2 -translate-y-1\/2\"><\/div>\n <div className=\"absolute bottom-0 left-0 w-32 h-32 bg-amber-400 rounded-full blur-3xl opacity-30 transform -translate-x-1\/2 translate-y-1\/2\"><\/div>\n \n <h2 className=\"text-2xl font-bold text-amber-800 mb-6 relative z-10\">\n <i className=\"fas fa-trophy text-yellow-500 mr-2 text-3xl\"><\/i> \n {isTie ? '\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e2a\u0e21\u0e2d\u0e01\u0e31\u0e19' : '\u0e1c\u0e39\u0e49\u0e0a\u0e19\u0e30\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07'}\n <\/h2>\n \n <div className=\"flex flex-col items-center relative z-10\">\n <div className=\"w-24 h-24 bg-white rounded-full flex items-center justify-center text-5xl font-bold text-amber-600 shadow-lg mb-4 border-4 border-yellow-200\">\n {winner.number}\n <\/div>\n <h3 className=\"text-3xl font-bold text-gray-900 mb-1\">{winner.name}<\/h3>\n <p className=\"text-lg text-amber-700 font-medium mb-4\">{winner.party}<\/p>\n <div className=\"bg-white py-2 px-6 rounded-full shadow-sm\">\n <span className=\"text-gray-600 mr-2\">\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07:<\/span>\n <span className=\"text-2xl font-bold text-indigo-600\">{winner.votes}<\/span>\n <\/div>\n <\/div>\n <\/div>\n ) : (\n <div className=\"bg-white rounded-3xl p-8 shadow-md text-center mb-10\">\n <p className=\"text-xl text-gray-500\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e25\u0e07\u0e04\u0e30\u0e41\u0e19\u0e19<\/p>\n <\/div>\n )}\n\n {\/* All Results Bar Chart *\/}\n <div className=\"bg-white rounded-3xl p-6 md:p-8 shadow-lg border border-gray-100\">\n <h3 className=\"text-xl font-bold text-gray-800 mb-6 border-b pb-4\">\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e04\u0e30\u0e41\u0e19\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e07<\/h3>\n <div className=\"space-y-6\">\n {sortedCandidates.map((c, index) => {\n const percentage = totalVotes > 0 ? ((c.votes \/ totalVotes) * 100).toFixed(1) : 0;\n return (\n <div key={c.id}>\n <div className=\"flex justify-between items-end mb-2\">\n <div className=\"flex items-center gap-3\">\n <span className=\"w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 text-sm\">\n \u0e40\u0e1a\u0e2d\u0e23\u0e4c {c.number}\n <\/span>\n <span className=\"font-semibold text-gray-800\">{c.name}<\/span>\n <\/div>\n <div className=\"text-right\">\n <span className=\"font-bold text-lg text-indigo-600\">{c.votes}<\/span>\n <span className=\"text-sm text-gray-500 ml-1\">\u0e04\u0e30\u0e41\u0e19\u0e19 ({percentage}%)<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full bg-gray-100 rounded-full h-3 overflow-hidden\">\n <div \n className={`h-3 rounded-full ${index === 0 && totalVotes > 0 ? 'bg-amber-400' : 'bg-blue-500'}`}\n style={{ width: `${percentage}%`, transition: 'width 1s ease-out' }}\n ><\/div>\n <\/div>\n <\/div>\n );\n })}\n <\/div>\n <\/div>\n \n <div className=\"mt-8 text-center\">\n <button \n onClick={() => {\n setPhase('setup');\n setCandidates(initialCandidates.map(c => ({...c, votes: 0}))); \/\/ reset to demo state\n }}\n className=\"text-gray-500 hover:text-indigo-600 underline transition\"\n >\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e43\u0e2b\u0e21\u0e48 (\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25)\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n return (\n <div className=\"min-h-screen flex flex-col bg-slate-100 font-sans\">\n <SchoolHeader \/>\n \n <div className=\"flex-1\">\n {phase === 'setup' && <SetupScreen \/>}\n {phase === 'voting' && <VotingScreen \/>}\n {phase === 'results' && <ResultsScreen \/>}\n <\/div>\n\n {\/* Admin Modal for Ending Election *\/}\n {showAdminModal && (\n <div className=\"fixed inset-0 bg-black\/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fade-in\">\n <div className=\"bg-white rounded-2xl shadow-2xl max-w-sm w-full p-6 relative\">\n <button \n onClick={() => { setShowAdminModal(false); setAdminError(''); setAdminPin(''); }}\n className=\"absolute top-4 right-4 text-gray-400 hover:text-gray-600\"\n >\n <i className=\"fas fa-times\"><\/i>\n <\/button>\n \n <div className=\"text-center mb-6\">\n <div className=\"w-16 h-16 bg-red-100 text-red-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\">\n <i className=\"fas fa-lock\"><\/i>\n <\/div>\n <h3 className=\"text-xl font-bold text-gray-800\">\u0e1c\u0e39\u0e49\u0e14\u0e39\u0e41\u0e25\u0e23\u0e30\u0e1a\u0e1a<\/h3>\n <p className=\"text-sm text-gray-500 mt-1\">\u0e1b\u0e34\u0e14\u0e2b\u0e35\u0e1a\u0e41\u0e25\u0e30\u0e14\u0e39\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07<\/p>\n <p className=\"text-xs text-blue-500 mt-2 bg-blue-50 inline-block px-2 py-1 rounded\">(\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e17\u0e14\u0e2a\u0e2d\u0e1a: 1234)<\/p>\n <\/div>\n\n <div className=\"space-y-4\">\n <div>\n <input \n type=\"password\" \n value={adminPin}\n onChange={(e) => setAdminPin(e.target.value)}\n placeholder=\"\u0e43\u0e2a\u0e48\u0e23\u0e2b\u0e31\u0e2a PIN\"\n className=\"w-full text-center text-2xl tracking-[0.5em] px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none transition\"\n maxLength=\"4\"\n \/>\n {adminError && <p className=\"text-red-500 text-sm text-center mt-2\">{adminError}<\/p>}\n <\/div>\n \n <button \n onClick={handleAdminLogin}\n className=\"w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-xl transition shadow-md\"\n >\n \u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e41\u0e25\u0e30\u0e14\u0e39\u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n );\n }\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e19 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2063","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"akkaporn keumyarach","author_link":"https:\/\/banpan.ac.th\/?author=3"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e31\u0e49\u0e07\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e19 […]","_links":{"self":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2063"}],"version-history":[{"count":5,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2063\/revisions"}],"predecessor-version":[{"id":2071,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2063\/revisions\/2071"}],"wp:attachment":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}