MDY Certification Admin<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n body { font-family: 'Cairo', sans-serif; background-color: #f1f5f9; }\r\n .mdy-navy { background-color: #001A33; }\r\n .mdy-gold { background-color: #D4AF37; }\r\n .text-mdy-navy { color: #001A33; }\r\n .text-mdy-gold { color: #D4AF37; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"root\"><\/div>\r\n\r\n\r\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n<script type=\"module\">\r\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-app.js\";\r\n import { getFirestore, collection, addDoc, updateDoc, deleteDoc, doc, onSnapshot, query, orderBy } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-firestore.js\";\r\n import { getAuth, signInAnonymously } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-auth.js\";\r\n\r\n \/\/ --- \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a (\u0633\u062a\u0639\u0645\u0644 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0641\u064a \u0628\u064a\u0626\u0629 \u0627\u0644\u0639\u0645\u0644) ---\r\n const firebaseConfig = JSON.parse(window.__firebase_config || '{}');\r\n const app = initializeApp(firebaseConfig);\r\n const db = getFirestore(app);\r\n const auth = getAuth(app);\r\n const appId = window.__app_id || 'mdy-certs-system';\r\n\r\n const { useState, useEffect } = React;\r\n\r\n function App() {\r\n const [certs, setCerts] = useState([]);\r\n const [loading, setLoading] = useState(true);\r\n const [formData, setFormData] = useState({ title: '', code: '', description: '', showOnHome: false });\r\n const [editId, setEditId] = useState(null);\r\n\r\n \/\/ 1. \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0648\u062c\u0644\u0628 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\r\n useEffect(() => {\r\n const init = async () => {\r\n await signInAnonymously(auth);\r\n const q = query(collection(db, 'artifacts', appId, 'public', 'data', 'certs'));\r\n onSnapshot(q, (snapshot) => {\r\n const data = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));\r\n setCerts(data);\r\n setLoading(false);\r\n });\r\n };\r\n init();\r\n }, []);\r\n\r\n \/\/ 2. \u0625\u0636\u0627\u0641\u0629 \u0623\u0648 \u062a\u0639\u062f\u064a\u0644\r\n const handleSubmit = async (e) => {\r\n e.preventDefault();\r\n const colRef = collection(db, 'artifacts', appId, 'public', 'data', 'certs');\r\n if (editId) {\r\n await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'certs', editId), formData);\r\n setEditId(null);\r\n } else {\r\n await addDoc(colRef, { ...formData, date: new Date().toISOString() });\r\n }\r\n setFormData({ title: '', code: '', description: '', showOnHome: false });\r\n };\r\n\r\n \/\/ 3. \u062d\u0630\u0641\r\n const handleDelete = async (id) => {\r\n if (confirm(\"\u0647\u0644 \u062a\u0631\u064a\u062f \u0628\u0627\u0644\u062a\u0623\u0643\u064a\u062f \u062d\u0630\u0641 \u0647\u0630\u0647 \u0627\u0644\u0634\u0647\u0627\u062f\u0629\u061f\")) {\r\n await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'certs', id));\r\n }\r\n };\r\n\r\n if (loading) return <div className=\"flex h-screen items-center justify-center text-mdy-navy font-bold\">\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645...<\/div>;\r\n\r\n return (\r\n <div className=\"max-w-5xl mx-auto p-6\">\r\n <header className=\"mb-10 text-center\">\r\n <h1 className=\"text-4xl font-black text-mdy-navy mb-2\">\u0644\u0648\u062d\u0629 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a <span className=\"text-mdy-gold\">MDY<\/span><\/h1>\r\n <p className=\"text-gray-500 uppercase tracking-widest text-sm\">Control Panel \u2022 MDY Methodology<\/p>\r\n <\/header>\r\n\r\n {\/* \u0641\u0648\u0631\u0645 \u0627\u0644\u0625\u0636\u0627\u0641\u0629 *\/}\r\n <div className=\"bg-white rounded-3xl p-8 shadow-xl mb-10 border border-gray-100\">\r\n <h2 className=\"text-xl font-bold mb-6 text-mdy-navy flex items-center gap-2\">\r\n <i className={`fas ${editId ? 'fa-edit' : 'fa-plus-circle'} text-mdy-gold`}><\/i>\r\n {editId ? '\u062a\u0639\u062f\u064a\u0644 \u0634\u0647\u0627\u062f\u0629' : '\u0625\u0636\u0627\u0641\u0629 \u0634\u0647\u0627\u062f\u0629 \u062c\u062f\u064a\u062f\u0629'}\r\n <\/h2>\r\n <form onSubmit={handleSubmit} className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div className=\"space-y-2\">\r\n <label className=\"text-xs font-bold text-gray-400 uppercase\">\u0643\u0648\u062f \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 (ISO)<\/label>\r\n <input required className=\"w-full p-4 bg-gray-50 rounded-xl outline-none focus:ring-2 ring-mdy-navy transition-all\" \r\n placeholder=\"ISO 9001\" value={formData.code} onChange={e => setFormData({...formData, code: e.target.value})} \/>\r\n <\/div>\r\n <div className=\"space-y-2\">\r\n <label className=\"text-xs font-bold text-gray-400 uppercase\">\u0627\u0633\u0645 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0628\u0627\u0644\u0639\u0631\u0628\u064a<\/label>\r\n <input required className=\"w-full p-4 bg-gray-50 rounded-xl outline-none focus:ring-2 ring-mdy-navy transition-all\" \r\n placeholder=\"\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062c\u0648\u062f\u0629\" value={formData.title} onChange={e => setFormData({...formData, title: e.target.value})} \/>\r\n <\/div>\r\n <div className=\"md:col-span-2 space-y-2\">\r\n <label className=\"text-xs font-bold text-gray-400 uppercase\">\u0648\u0635\u0641 \u0627\u0644\u0634\u0647\u0627\u062f\u0629<\/label>\r\n <textarea className=\"w-full p-4 bg-gray-50 rounded-xl outline-none focus:ring-2 ring-mdy-navy transition-all\" \r\n rows=\"2\" value={formData.description} onChange={e => setFormData({...formData, description: e.target.value})}><\/textarea>\r\n <\/div>\r\n <div className=\"flex items-center gap-3 py-2\">\r\n <input type=\"checkbox\" className=\"w-5 h-5 accent-mdy-gold\" id=\"homeShow\" \r\n checked={formData.showOnHome} onChange={e => setFormData({...formData, showOnHome: e.target.checked})} \/>\r\n <label htmlFor=\"homeShow\" className=\"font-bold text-mdy-navy cursor-pointer\">\u0639\u0631\u0636 \u0641\u064a \u0634\u0631\u064a\u0637 \u0627\u0644\u0647\u0648\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a<\/label>\r\n <\/div>\r\n <div className=\"md:col-span-2 flex gap-3\">\r\n <button type=\"submit\" className=\"flex-1 mdy-navy text-white font-bold py-4 rounded-xl hover:opacity-90 transition-all shadow-lg\">\r\n {editId ? '\u062d\u0641\u0638 \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a' : '\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0629'}\r\n <\/button>\r\n {editId && <button type=\"button\" onClick={() => {setEditId(null); setFormData({title:'', code:'', description:'', showOnHome:false});}} \r\n className=\"px-6 bg-gray-200 rounded-xl font-bold\">\u0625\u0644\u063a\u0627\u0621<\/button>}\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n {\/* \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a *\/}\r\n <div className=\"bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100\">\r\n <table className=\"w-full text-right\">\r\n <thead className=\"bg-gray-50 border-b\">\r\n <tr>\r\n <th className=\"p-4 text-xs font-bold text-gray-400 uppercase\">\u0627\u0644\u0634\u0647\u0627\u062f\u0629<\/th>\r\n <th className=\"p-4 text-xs font-bold text-gray-400 uppercase text-center\">\u0638\u0647\u0648\u0631 \u0641\u064a \u0627\u0644\u0647\u0648\u0645<\/th>\r\n <th className=\"p-4 text-xs font-bold text-gray-400 uppercase text-left\">\u0625\u062c\u0631\u0627\u0621\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"divide-y\">\r\n {certs.map(c => (\r\n <tr key={c.id} className=\"hover:bg-gray-50 transition-all\">\r\n <td className=\"p-4\">\r\n <div className=\"font-black text-mdy-navy\">{c.code}<\/div>\r\n <div className=\"text-sm text-gray-500\">{c.title}<\/div>\r\n <\/td>\r\n <td className=\"p-4 text-center\">\r\n {c.showOnHome ? \r\n <span className=\"bg-green-100 text-green-700 text-[10px] px-3 py-1 rounded-full font-black uppercase\">Featured<\/span> : \r\n <span className=\"bg-gray-100 text-gray-400 text-[10px] px-3 py-1 rounded-full font-black uppercase\">Hidden<\/span>\r\n }\r\n <\/td>\r\n <td className=\"p-4 text-left\">\r\n <button onClick={() => {setEditId(c.id); setFormData(c);}} className=\"p-2 text-blue-600 hover:bg-blue-50 rounded-lg ml-2\"><i className=\"fas fa-edit\"><\/i><\/button>\r\n <button onClick={() => handleDelete(c.id)} className=\"p-2 text-red-600 hover:bg-red-50 rounded-lg\"><i className=\"fas fa-trash\"><\/i><\/button>\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cb532b4 e-flex e-con-boxed e-con e-parent\" data-id=\"cb532b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bd57c9 elementor-widget elementor-widget-html\" data-id=\"9bd57c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>MDY Admin Panel - Standalone<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n \r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n body { font-family: 'Cairo', sans-serif; background-color: #f8fafc; margin: 0; }\r\n .animate-fade { animation: fadeIn 0.5s ease-out; }\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"root\"><\/div>\r\n\r\n\r\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n<script type=\"text\/babel\">\r\n const { useState, useEffect } = React;\r\n\r\n function App() {\r\n const [certs, setCerts] = useState([]);\r\n const [loading, setLoading] = useState(true);\r\n const [formData, setFormData] = useState({ title: '', code: '', description: '', showOnHome: false });\r\n const [editId, setEditId] = useState(null);\r\n const [showMsg, setShowMsg] = useState(null);\r\n\r\n \/\/ \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0630\u0627\u0643\u0631\u0629 \u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u0644\u0644\u0645\u062a\u0635\u0641\u062d\r\n useEffect(() => {\r\n const savedData = localStorage.getItem('mdy_certs_data');\r\n if (savedData) {\r\n setCerts(JSON.parse(savedData));\r\n }\r\n setTimeout(() => setLoading(false), 1000); \/\/ \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u062d\u0645\u064a\u0644 \u0628\u0633\u064a\u0637\r\n }, []);\r\n\r\n \/\/ \u062d\u0641\u0638 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0639\u0646\u062f \u0643\u0644 \u062a\u063a\u064a\u064a\u0631\r\n const syncData = (newData) => {\r\n setCerts(newData);\r\n localStorage.setItem('mdy_certs_data', JSON.stringify(newData));\r\n };\r\n\r\n const handleAction = (e) => {\r\n e.preventDefault();\r\n if (editId) {\r\n const updated = certs.map(c => c.id === editId ? { ...formData, id: editId, date: new Date().toLocaleDateString('ar-EG') } : c);\r\n syncData(updated);\r\n setEditId(null);\r\n flashMessage(\"\u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u0646\u062c\u0627\u062d\");\r\n } else {\r\n const newCert = { ...formData, id: Date.now(), date: new Date().toLocaleDateString('ar-EG') };\r\n syncData([newCert, ...certs]);\r\n flashMessage(\"\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0628\u0646\u062c\u0627\u062d\");\r\n }\r\n setFormData({ title: '', code: '', description: '', showOnHome: false });\r\n };\r\n\r\n const deleteCert = (id) => {\r\n if (!confirm('\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u062d\u0630\u0641 \u0647\u0630\u0647 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0646\u0647\u0627\u0626\u064a\u0627\u064b\u061f')) return;\r\n const filtered = certs.filter(c => c.id !== id);\r\n syncData(filtered);\r\n flashMessage(\"\u062a\u0645 \u0627\u0644\u062d\u0630\u0641 \u0628\u0646\u062c\u0627\u062d\");\r\n };\r\n\r\n const flashMessage = (msg) => {\r\n setShowMsg(msg);\r\n setTimeout(() => setShowMsg(null), 3000);\r\n };\r\n\r\n if (loading) return (\r\n <div className=\"flex h-screen flex-col items-center justify-center bg-slate-50\">\r\n <div className=\"animate-spin rounded-full h-12 w-12 border-t-4 border-[#D4AF37] mb-4\"><\/div>\r\n <p className=\"font-bold text-[#001A33]\">\u062c\u0627\u0631\u064a \u062a\u0634\u063a\u064a\u0644 \u0646\u0638\u0627\u0645 MDY \u0627\u0644\u0645\u0633\u062a\u0642\u0644...<\/p>\r\n <\/div>\r\n );\r\n\r\n return (\r\n <div className=\"max-w-6xl mx-auto p-4 md:p-10 animate-fade\">\r\n {showMsg && (\r\n <div className=\"fixed top-5 left-1\/2 -translate-x-1\/2 bg-green-600 text-white px-8 py-3 rounded-full shadow-2xl z-50 font-bold\">\r\n {showMsg}\r\n <\/div>\r\n )}\r\n\r\n <header className=\"mb-12 text-center\">\r\n <div className=\"inline-block bg-[#001A33] text-white px-4 py-1 rounded-full text-[10px] mb-4 font-bold tracking-tighter\">\r\n OFFLINE DATABASE MODE (STABLE)\r\n <\/div>\r\n <h1 className=\"text-5xl font-black text-[#001A33]\">MDY <span className=\"text-[#D4AF37]\">ADMIN<\/span><\/h1>\r\n <p className=\"text-slate-400 font-bold text-xs mt-3 uppercase tracking-widest italic\">\u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/p>\r\n <\/header>\r\n\r\n <div className=\"bg-white rounded-[2.5rem] p-8 md:p-12 shadow-2xl mb-12 border border-slate-100 relative overflow-hidden\">\r\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-amber-50 rounded-bl-full -mr-10 -mt-10 opacity-50\"><\/div>\r\n \r\n <h2 className=\"text-2xl font-black mb-8 text-[#001A33] flex items-center gap-3\">\r\n <i className={`fas ${editId ? 'fa-edit' : 'fa-plus-circle'} text-[#D4AF37]`}><\/i>\r\n {editId ? '\u062a\u0639\u062f\u064a\u0644 \u0634\u0647\u0627\u062f\u0629 \u062d\u0627\u0644\u064a\u0629' : '\u0625\u0636\u0627\u0641\u0629 \u0634\u0647\u0627\u062f\u0629 \u062c\u062f\u064a\u062f\u0629 \u0644\u0644\u0646\u0638\u0627\u0645'}\r\n <\/h2>\r\n\r\n <form onSubmit={handleAction} className=\"grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10\">\r\n <div className=\"space-y-2\">\r\n <label className=\"text-xs font-bold text-slate-400 mr-2\">\u0643\u0648\u062f \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629<\/label>\r\n <input required placeholder=\"\u0645\u062b\u0627\u0644: ISO 22000\" className=\"w-full p-5 bg-slate-50 rounded-2xl border-2 border-transparent focus:border-[#D4AF37] outline-none transition-all font-bold text-[#001A33]\" \r\n value={formData.code} onChange={e => setFormData({...formData, code: e.target.value})} \/>\r\n <\/div>\r\n <div className=\"space-y-2\">\r\n <label className=\"text-xs font-bold text-slate-400 mr-2\">\u0627\u0633\u0645 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0627\u0644\u0643\u0627\u0645\u0644<\/label>\r\n <input required placeholder=\"\u0645\u062b\u0627\u0644: Food Safety Management\" className=\"w-full p-5 bg-slate-50 rounded-2xl border-2 border-transparent focus:border-[#D4AF37] outline-none transition-all font-bold text-[#001A33]\" \r\n value={formData.title} onChange={e => setFormData({...formData, title: e.target.value})} \/>\r\n <\/div>\r\n <div className=\"md:col-span-2 space-y-2\">\r\n <label className=\"text-xs font-bold text-slate-400 mr-2\">\u0648\u0635\u0641 \u062a\u0641\u0635\u064a\u0644\u064a (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\r\n <textarea placeholder=\"\u0627\u0643\u062a\u0628 \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0647\u0646\u0627...\" className=\"w-full p-5 bg-slate-50 rounded-2xl border-2 border-transparent focus:border-[#D4AF37] outline-none transition-all h-32 resize-none\" \r\n value={formData.description} onChange={e => setFormData({...formData, description: e.target.value})}><\/textarea>\r\n <\/div>\r\n <div className=\"md:col-span-2 flex items-center gap-4 bg-slate-50 p-6 rounded-2xl border-2 border-dashed border-slate-200\">\r\n <div className=\"relative inline-flex items-center cursor-pointer\">\r\n <input type=\"checkbox\" className=\"sr-only peer\" checked={formData.showOnHome} onChange={e => setFormData({...formData, showOnHome: e.target.checked})} id=\"toggle-home\" \/>\r\n <div className=\"w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#001A33]\"><\/div>\r\n <\/div>\r\n <label htmlFor=\"toggle-home\" className=\"font-bold text-[#001A33] cursor-pointer\">\u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0644\u0645\u0648\u0642\u0639<\/label>\r\n <\/div>\r\n \r\n <div className=\"md:col-span-2 flex gap-4\">\r\n <button type=\"submit\" className=\"flex-1 bg-[#001A33] text-white py-5 rounded-2xl font-black text-xl shadow-xl hover:shadow-2xl hover:-translate-y-1 active:scale-95 transition-all\">\r\n {editId ? '\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a' : '\u0646\u0634\u0631 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0627\u0644\u0622\u0646'}\r\n <\/button>\r\n {editId && (\r\n <button type=\"button\" onClick={() => {setEditId(null); setFormData({title:'',code:'',description:'',showOnHome:false})}} className=\"px-8 bg-slate-200 text-slate-600 rounded-2xl font-bold\">\u0625\u0644\u063a\u0627\u0621<\/button>\r\n )}\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <div className=\"bg-white rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-100\">\r\n <div className=\"p-8 bg-slate-50 border-b flex justify-between items-center\">\r\n <div>\r\n <h3 className=\"font-black text-xl text-[#001A33]\">\u0627\u0644\u0633\u062c\u0644\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629<\/h3>\r\n <p className=\"text-xs text-slate-400 mt-1 font-bold\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u0633\u062c\u0644\u0629: {certs.length}<\/p>\r\n <\/div>\r\n <i className=\"fas fa-database text-slate-300 text-2xl\"><\/i>\r\n <\/div>\r\n <div className=\"overflow-x-auto text-right\">\r\n {certs.length === 0 ? (\r\n <div className=\"p-20 text-center text-slate-300 italic font-bold\">\u0644\u0627 \u064a\u0648\u062c\u062f \u0634\u0647\u0627\u062f\u0627\u062a \u0645\u0633\u062c\u0644\u0629 \u062d\u0627\u0644\u064a\u0627\u064b.. \u0627\u0628\u062f\u0623 \u0628\u0625\u0636\u0627\u0641\u0629 \u0623\u0648\u0644 \u0634\u0647\u0627\u062f\u0629<\/div>\r\n ) : (\r\n <table className=\"w-full\">\r\n <thead>\r\n <tr className=\"bg-slate-100 text-slate-500 text-[10px] font-black uppercase tracking-widest\">\r\n <th className=\"p-6\">\u0643\u0648\u062f \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629<\/th>\r\n <th className=\"p-6\">\u0627\u0644\u0627\u0633\u0645 \u0648\u0627\u0644\u0648\u0635\u0641<\/th>\r\n <th className=\"p-6 text-center\">\u0627\u0644\u062d\u0627\u0644\u0629<\/th>\r\n <th className=\"p-6 text-left\">\u0627\u0644\u0625\u062c\u0631\u0627\u0621\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"divide-y divide-slate-100\">\r\n {certs.map(c => (\r\n <tr key={c.id} className=\"hover:bg-amber-50\/30 transition-colors group\">\r\n <td className=\"p-6 align-top\">\r\n <div className=\"bg-[#001A33] text-white px-3 py-1 rounded-lg inline-block font-black text-sm\">{c.code}<\/div>\r\n <div className=\"text-[9px] text-slate-400 mt-2 font-bold uppercase tracking-tighter\">{c.date}<\/div>\r\n <\/td>\r\n <td className=\"p-6 align-top max-w-xs\">\r\n <div className=\"font-black text-[#001A33] mb-1\">{c.title}<\/div>\r\n <div className=\"text-xs text-slate-400 line-clamp-2 leading-relaxed\">{c.description || '\u0644\u0627 \u064a\u0648\u062c\u062f \u0648\u0635\u0641...'}<\/div>\r\n <\/td>\r\n <td className=\"p-6 text-center\">\r\n {c.showOnHome ? (\r\n <span className=\"bg-green-100 text-green-700 px-4 py-1 rounded-full text-[10px] font-black\"><i className=\"fas fa-home ml-1\"><\/i> \u0631\u0626\u064a\u0633\u064a\u0629<\/span>\r\n ) : (\r\n <span className=\"bg-slate-100 text-slate-400 px-4 py-1 rounded-full text-[10px] font-bold italic\">\u0623\u0631\u0634\u064a\u0641<\/span>\r\n )}\r\n <\/td>\r\n <td className=\"p-6 text-left\">\r\n <div className=\"flex justify-end gap-6 opacity-40 group-hover:opacity-100 transition-opacity\">\r\n <button onClick={() => {setEditId(c.id); setFormData(c); window.scrollTo({top:0, behavior:'smooth'});}} className=\"text-blue-600 hover:scale-125 transition-transform\"><i className=\"fas fa-edit\"><\/i><\/button>\r\n <button onClick={() => deleteCert(c.id)} className=\"text-red-400 hover:scale-125 transition-transform\"><i className=\"fas fa-trash-alt\"><\/i><\/button>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n <\/tbody>\r\n <\/table>\r\n )}\r\n <\/div>\r\n <\/div>\r\n \r\n <footer className=\"mt-10 text-center text-slate-300 text-[10px] font-bold\">\r\n © 2024 MDY Methodology - \u062a\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0645\u0647\u0646\u062f\u0633 \u0627\u0644\u0631\u0642\u0645\u064a\r\n <\/footer>\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MDY Certification Admin MDY Admin Panel – Standalone<\/p>\n","protected":false},"author":1,"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-1079","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/pages\/1079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/comments?post=1079"}],"version-history":[{"count":58,"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/pages\/1079\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/pages\/1079\/revisions\/1156"}],"wp:attachment":[{"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/media?parent=1079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

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

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n MDY Certification Admin<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n body { font-family: 'Cairo', sans-serif; background-color: #f1f5f9; }\r\n .mdy-navy { background-color: #001A33; }\r\n .mdy-gold { background-color: #D4AF37; }\r\n .text-mdy-navy { color: #001A33; }\r\n .text-mdy-gold { color: #D4AF37; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"root\"><\/div>\r\n\r\n\r\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n<script type=\"module\">\r\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-app.js\";\r\n import { getFirestore, collection, addDoc, updateDoc, deleteDoc, doc, onSnapshot, query, orderBy } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-firestore.js\";\r\n import { getAuth, signInAnonymously } from \"https:\/\/www.gstatic.com\/firebasejs\/10.7.1\/firebase-auth.js\";\r\n\r\n \/\/ --- \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a (\u0633\u062a\u0639\u0645\u0644 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0641\u064a \u0628\u064a\u0626\u0629 \u0627\u0644\u0639\u0645\u0644) ---\r\n const firebaseConfig = JSON.parse(window.__firebase_config || '{}');\r\n const app = initializeApp(firebaseConfig);\r\n const db = getFirestore(app);\r\n const auth = getAuth(app);\r\n const appId = window.__app_id || 'mdy-certs-system';\r\n\r\n const { useState, useEffect } = React;\r\n\r\n function App() {\r\n const [certs, setCerts] = useState([]);\r\n const [loading, setLoading] = useState(true);\r\n const [formData, setFormData] = useState({ title: '', code: '', description: '', showOnHome: false });\r\n const [editId, setEditId] = useState(null);\r\n\r\n \/\/ 1. \u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0648\u062c\u0644\u0628 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\r\n useEffect(() => {\r\n const init = async () => {\r\n await signInAnonymously(auth);\r\n const q = query(collection(db, 'artifacts', appId, 'public', 'data', 'certs'));\r\n onSnapshot(q, (snapshot) => {\r\n const data = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));\r\n setCerts(data);\r\n setLoading(false);\r\n });\r\n };\r\n init();\r\n }, []);\r\n\r\n \/\/ 2. \u0625\u0636\u0627\u0641\u0629 \u0623\u0648 \u062a\u0639\u062f\u064a\u0644\r\n const handleSubmit = async (e) => {\r\n e.preventDefault();\r\n const colRef = collection(db, 'artifacts', appId, 'public', 'data', 'certs');\r\n if (editId) {\r\n await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'certs', editId), formData);\r\n setEditId(null);\r\n } else {\r\n await addDoc(colRef, { ...formData, date: new Date().toISOString() });\r\n }\r\n setFormData({ title: '', code: '', description: '', showOnHome: false });\r\n };\r\n\r\n \/\/ 3. \u062d\u0630\u0641\r\n const handleDelete = async (id) => {\r\n if (confirm(\"\u0647\u0644 \u062a\u0631\u064a\u062f \u0628\u0627\u0644\u062a\u0623\u0643\u064a\u062f \u062d\u0630\u0641 \u0647\u0630\u0647 \u0627\u0644\u0634\u0647\u0627\u062f\u0629\u061f\")) {\r\n await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'certs', id));\r\n }\r\n };\r\n\r\n if (loading) return <div className=\"flex h-screen items-center justify-center text-mdy-navy font-bold\">\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645...<\/div>;\r\n\r\n return (\r\n <div className=\"max-w-5xl mx-auto p-6\">\r\n <header className=\"mb-10 text-center\">\r\n <h1 className=\"text-4xl font-black text-mdy-navy mb-2\">\u0644\u0648\u062d\u0629 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a <span className=\"text-mdy-gold\">MDY<\/span><\/h1>\r\n <p className=\"text-gray-500 uppercase tracking-widest text-sm\">Control Panel \u2022 MDY Methodology<\/p>\r\n <\/header>\r\n\r\n {\/* \u0641\u0648\u0631\u0645 \u0627\u0644\u0625\u0636\u0627\u0641\u0629 *\/}\r\n <div className=\"bg-white rounded-3xl p-8 shadow-xl mb-10 border border-gray-100\">\r\n <h2 className=\"text-xl font-bold mb-6 text-mdy-navy flex items-center gap-2\">\r\n <i className={`fas ${editId ? 'fa-edit' : 'fa-plus-circle'} text-mdy-gold`}><\/i>\r\n {editId ? '\u062a\u0639\u062f\u064a\u0644 \u0634\u0647\u0627\u062f\u0629' : '\u0625\u0636\u0627\u0641\u0629 \u0634\u0647\u0627\u062f\u0629 \u062c\u062f\u064a\u062f\u0629'}\r\n <\/h2>\r\n <form onSubmit={handleSubmit} className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div className=\"space-y-2\">\r\n <label className=\"text-xs font-bold text-gray-400 uppercase\">\u0643\u0648\u062f \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 (ISO)<\/label>\r\n <input required className=\"w-full p-4 bg-gray-50 rounded-xl outline-none focus:ring-2 ring-mdy-navy transition-all\" \r\n placeholder=\"ISO 9001\" value={formData.code} onChange={e => setFormData({...formData, code: e.target.value})} \/>\r\n <\/div>\r\n <div className=\"space-y-2\">\r\n <label className=\"text-xs font-bold text-gray-400 uppercase\">\u0627\u0633\u0645 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0628\u0627\u0644\u0639\u0631\u0628\u064a<\/label>\r\n <input required className=\"w-full p-4 bg-gray-50 rounded-xl outline-none focus:ring-2 ring-mdy-navy transition-all\" \r\n placeholder=\"\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062c\u0648\u062f\u0629\" value={formData.title} onChange={e => setFormData({...formData, title: e.target.value})} \/>\r\n <\/div>\r\n <div className=\"md:col-span-2 space-y-2\">\r\n <label className=\"text-xs font-bold text-gray-400 uppercase\">\u0648\u0635\u0641 \u0627\u0644\u0634\u0647\u0627\u062f\u0629<\/label>\r\n <textarea className=\"w-full p-4 bg-gray-50 rounded-xl outline-none focus:ring-2 ring-mdy-navy transition-all\" \r\n rows=\"2\" value={formData.description} onChange={e => setFormData({...formData, description: e.target.value})}><\/textarea>\r\n <\/div>\r\n <div className=\"flex items-center gap-3 py-2\">\r\n <input type=\"checkbox\" className=\"w-5 h-5 accent-mdy-gold\" id=\"homeShow\" \r\n checked={formData.showOnHome} onChange={e => setFormData({...formData, showOnHome: e.target.checked})} \/>\r\n <label htmlFor=\"homeShow\" className=\"font-bold text-mdy-navy cursor-pointer\">\u0639\u0631\u0636 \u0641\u064a \u0634\u0631\u064a\u0637 \u0627\u0644\u0647\u0648\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a<\/label>\r\n <\/div>\r\n <div className=\"md:col-span-2 flex gap-3\">\r\n <button type=\"submit\" className=\"flex-1 mdy-navy text-white font-bold py-4 rounded-xl hover:opacity-90 transition-all shadow-lg\">\r\n {editId ? '\u062d\u0641\u0638 \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a' : '\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0629'}\r\n <\/button>\r\n {editId && <button type=\"button\" onClick={() => {setEditId(null); setFormData({title:'', code:'', description:'', showOnHome:false});}} \r\n className=\"px-6 bg-gray-200 rounded-xl font-bold\">\u0625\u0644\u063a\u0627\u0621<\/button>}\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n {\/* \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a *\/}\r\n <div className=\"bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100\">\r\n <table className=\"w-full text-right\">\r\n <thead className=\"bg-gray-50 border-b\">\r\n <tr>\r\n <th className=\"p-4 text-xs font-bold text-gray-400 uppercase\">\u0627\u0644\u0634\u0647\u0627\u062f\u0629<\/th>\r\n <th className=\"p-4 text-xs font-bold text-gray-400 uppercase text-center\">\u0638\u0647\u0648\u0631 \u0641\u064a \u0627\u0644\u0647\u0648\u0645<\/th>\r\n <th className=\"p-4 text-xs font-bold text-gray-400 uppercase text-left\">\u0625\u062c\u0631\u0627\u0621\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"divide-y\">\r\n {certs.map(c => (\r\n <tr key={c.id} className=\"hover:bg-gray-50 transition-all\">\r\n <td className=\"p-4\">\r\n <div className=\"font-black text-mdy-navy\">{c.code}<\/div>\r\n <div className=\"text-sm text-gray-500\">{c.title}<\/div>\r\n <\/td>\r\n <td className=\"p-4 text-center\">\r\n {c.showOnHome ? \r\n <span className=\"bg-green-100 text-green-700 text-[10px] px-3 py-1 rounded-full font-black uppercase\">Featured<\/span> : \r\n <span className=\"bg-gray-100 text-gray-400 text-[10px] px-3 py-1 rounded-full font-black uppercase\">Hidden<\/span>\r\n }\r\n <\/td>\r\n <td className=\"p-4 text-left\">\r\n <button onClick={() => {setEditId(c.id); setFormData(c);}} className=\"p-2 text-blue-600 hover:bg-blue-50 rounded-lg ml-2\"><i className=\"fas fa-edit\"><\/i><\/button>\r\n <button onClick={() => handleDelete(c.id)} className=\"p-2 text-red-600 hover:bg-red-50 rounded-lg\"><i className=\"fas fa-trash\"><\/i><\/button>\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cb532b4 e-flex e-con-boxed e-con e-parent\" data-id=\"cb532b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bd57c9 elementor-widget elementor-widget-html\" data-id=\"9bd57c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>MDY Admin Panel - Standalone<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n \r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700;900&display=swap');\r\n body { font-family: 'Cairo', sans-serif; background-color: #f8fafc; margin: 0; }\r\n .animate-fade { animation: fadeIn 0.5s ease-out; }\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"root\"><\/div>\r\n\r\n\r\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n<script type=\"text\/babel\">\r\n const { useState, useEffect } = React;\r\n\r\n function App() {\r\n const [certs, setCerts] = useState([]);\r\n const [loading, setLoading] = useState(true);\r\n const [formData, setFormData] = useState({ title: '', code: '', description: '', showOnHome: false });\r\n const [editId, setEditId] = useState(null);\r\n const [showMsg, setShowMsg] = useState(null);\r\n\r\n \/\/ \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0630\u0627\u0643\u0631\u0629 \u0627\u0644\u0645\u062d\u0644\u064a\u0629 \u0644\u0644\u0645\u062a\u0635\u0641\u062d\r\n useEffect(() => {\r\n const savedData = localStorage.getItem('mdy_certs_data');\r\n if (savedData) {\r\n setCerts(JSON.parse(savedData));\r\n }\r\n setTimeout(() => setLoading(false), 1000); \/\/ \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u062d\u0645\u064a\u0644 \u0628\u0633\u064a\u0637\r\n }, []);\r\n\r\n \/\/ \u062d\u0641\u0638 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0639\u0646\u062f \u0643\u0644 \u062a\u063a\u064a\u064a\u0631\r\n const syncData = (newData) => {\r\n setCerts(newData);\r\n localStorage.setItem('mdy_certs_data', JSON.stringify(newData));\r\n };\r\n\r\n const handleAction = (e) => {\r\n e.preventDefault();\r\n if (editId) {\r\n const updated = certs.map(c => c.id === editId ? { ...formData, id: editId, date: new Date().toLocaleDateString('ar-EG') } : c);\r\n syncData(updated);\r\n setEditId(null);\r\n flashMessage(\"\u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u0646\u062c\u0627\u062d\");\r\n } else {\r\n const newCert = { ...formData, id: Date.now(), date: new Date().toLocaleDateString('ar-EG') };\r\n syncData([newCert, ...certs]);\r\n flashMessage(\"\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0628\u0646\u062c\u0627\u062d\");\r\n }\r\n setFormData({ title: '', code: '', description: '', showOnHome: false });\r\n };\r\n\r\n const deleteCert = (id) => {\r\n if (!confirm('\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u062d\u0630\u0641 \u0647\u0630\u0647 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0646\u0647\u0627\u0626\u064a\u0627\u064b\u061f')) return;\r\n const filtered = certs.filter(c => c.id !== id);\r\n syncData(filtered);\r\n flashMessage(\"\u062a\u0645 \u0627\u0644\u062d\u0630\u0641 \u0628\u0646\u062c\u0627\u062d\");\r\n };\r\n\r\n const flashMessage = (msg) => {\r\n setShowMsg(msg);\r\n setTimeout(() => setShowMsg(null), 3000);\r\n };\r\n\r\n if (loading) return (\r\n <div className=\"flex h-screen flex-col items-center justify-center bg-slate-50\">\r\n <div className=\"animate-spin rounded-full h-12 w-12 border-t-4 border-[#D4AF37] mb-4\"><\/div>\r\n <p className=\"font-bold text-[#001A33]\">\u062c\u0627\u0631\u064a \u062a\u0634\u063a\u064a\u0644 \u0646\u0638\u0627\u0645 MDY \u0627\u0644\u0645\u0633\u062a\u0642\u0644...<\/p>\r\n <\/div>\r\n );\r\n\r\n return (\r\n <div className=\"max-w-6xl mx-auto p-4 md:p-10 animate-fade\">\r\n {showMsg && (\r\n <div className=\"fixed top-5 left-1\/2 -translate-x-1\/2 bg-green-600 text-white px-8 py-3 rounded-full shadow-2xl z-50 font-bold\">\r\n {showMsg}\r\n <\/div>\r\n )}\r\n\r\n <header className=\"mb-12 text-center\">\r\n <div className=\"inline-block bg-[#001A33] text-white px-4 py-1 rounded-full text-[10px] mb-4 font-bold tracking-tighter\">\r\n OFFLINE DATABASE MODE (STABLE)\r\n <\/div>\r\n <h1 className=\"text-5xl font-black text-[#001A33]\">MDY <span className=\"text-[#D4AF37]\">ADMIN<\/span><\/h1>\r\n <p className=\"text-slate-400 font-bold text-xs mt-3 uppercase tracking-widest italic\">\u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a - \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/p>\r\n <\/header>\r\n\r\n <div className=\"bg-white rounded-[2.5rem] p-8 md:p-12 shadow-2xl mb-12 border border-slate-100 relative overflow-hidden\">\r\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-amber-50 rounded-bl-full -mr-10 -mt-10 opacity-50\"><\/div>\r\n \r\n <h2 className=\"text-2xl font-black mb-8 text-[#001A33] flex items-center gap-3\">\r\n <i className={`fas ${editId ? 'fa-edit' : 'fa-plus-circle'} text-[#D4AF37]`}><\/i>\r\n {editId ? '\u062a\u0639\u062f\u064a\u0644 \u0634\u0647\u0627\u062f\u0629 \u062d\u0627\u0644\u064a\u0629' : '\u0625\u0636\u0627\u0641\u0629 \u0634\u0647\u0627\u062f\u0629 \u062c\u062f\u064a\u062f\u0629 \u0644\u0644\u0646\u0638\u0627\u0645'}\r\n <\/h2>\r\n\r\n <form onSubmit={handleAction} className=\"grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10\">\r\n <div className=\"space-y-2\">\r\n <label className=\"text-xs font-bold text-slate-400 mr-2\">\u0643\u0648\u062f \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629<\/label>\r\n <input required placeholder=\"\u0645\u062b\u0627\u0644: ISO 22000\" className=\"w-full p-5 bg-slate-50 rounded-2xl border-2 border-transparent focus:border-[#D4AF37] outline-none transition-all font-bold text-[#001A33]\" \r\n value={formData.code} onChange={e => setFormData({...formData, code: e.target.value})} \/>\r\n <\/div>\r\n <div className=\"space-y-2\">\r\n <label className=\"text-xs font-bold text-slate-400 mr-2\">\u0627\u0633\u0645 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0627\u0644\u0643\u0627\u0645\u0644<\/label>\r\n <input required placeholder=\"\u0645\u062b\u0627\u0644: Food Safety Management\" className=\"w-full p-5 bg-slate-50 rounded-2xl border-2 border-transparent focus:border-[#D4AF37] outline-none transition-all font-bold text-[#001A33]\" \r\n value={formData.title} onChange={e => setFormData({...formData, title: e.target.value})} \/>\r\n <\/div>\r\n <div className=\"md:col-span-2 space-y-2\">\r\n <label className=\"text-xs font-bold text-slate-400 mr-2\">\u0648\u0635\u0641 \u062a\u0641\u0635\u064a\u0644\u064a (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/label>\r\n <textarea placeholder=\"\u0627\u0643\u062a\u0628 \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0647\u0646\u0627...\" className=\"w-full p-5 bg-slate-50 rounded-2xl border-2 border-transparent focus:border-[#D4AF37] outline-none transition-all h-32 resize-none\" \r\n value={formData.description} onChange={e => setFormData({...formData, description: e.target.value})}><\/textarea>\r\n <\/div>\r\n <div className=\"md:col-span-2 flex items-center gap-4 bg-slate-50 p-6 rounded-2xl border-2 border-dashed border-slate-200\">\r\n <div className=\"relative inline-flex items-center cursor-pointer\">\r\n <input type=\"checkbox\" className=\"sr-only peer\" checked={formData.showOnHome} onChange={e => setFormData({...formData, showOnHome: e.target.checked})} id=\"toggle-home\" \/>\r\n <div className=\"w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#001A33]\"><\/div>\r\n <\/div>\r\n <label htmlFor=\"toggle-home\" className=\"font-bold text-[#001A33] cursor-pointer\">\u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0644\u0645\u0648\u0642\u0639<\/label>\r\n <\/div>\r\n \r\n <div className=\"md:col-span-2 flex gap-4\">\r\n <button type=\"submit\" className=\"flex-1 bg-[#001A33] text-white py-5 rounded-2xl font-black text-xl shadow-xl hover:shadow-2xl hover:-translate-y-1 active:scale-95 transition-all\">\r\n {editId ? '\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a' : '\u0646\u0634\u0631 \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0627\u0644\u0622\u0646'}\r\n <\/button>\r\n {editId && (\r\n <button type=\"button\" onClick={() => {setEditId(null); setFormData({title:'',code:'',description:'',showOnHome:false})}} className=\"px-8 bg-slate-200 text-slate-600 rounded-2xl font-bold\">\u0625\u0644\u063a\u0627\u0621<\/button>\r\n )}\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <div className=\"bg-white rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-100\">\r\n <div className=\"p-8 bg-slate-50 border-b flex justify-between items-center\">\r\n <div>\r\n <h3 className=\"font-black text-xl text-[#001A33]\">\u0627\u0644\u0633\u062c\u0644\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629<\/h3>\r\n <p className=\"text-xs text-slate-400 mt-1 font-bold\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u0633\u062c\u0644\u0629: {certs.length}<\/p>\r\n <\/div>\r\n <i className=\"fas fa-database text-slate-300 text-2xl\"><\/i>\r\n <\/div>\r\n <div className=\"overflow-x-auto text-right\">\r\n {certs.length === 0 ? (\r\n <div className=\"p-20 text-center text-slate-300 italic font-bold\">\u0644\u0627 \u064a\u0648\u062c\u062f \u0634\u0647\u0627\u062f\u0627\u062a \u0645\u0633\u062c\u0644\u0629 \u062d\u0627\u0644\u064a\u0627\u064b.. \u0627\u0628\u062f\u0623 \u0628\u0625\u0636\u0627\u0641\u0629 \u0623\u0648\u0644 \u0634\u0647\u0627\u062f\u0629<\/div>\r\n ) : (\r\n <table className=\"w-full\">\r\n <thead>\r\n <tr className=\"bg-slate-100 text-slate-500 text-[10px] font-black uppercase tracking-widest\">\r\n <th className=\"p-6\">\u0643\u0648\u062f \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629<\/th>\r\n <th className=\"p-6\">\u0627\u0644\u0627\u0633\u0645 \u0648\u0627\u0644\u0648\u0635\u0641<\/th>\r\n <th className=\"p-6 text-center\">\u0627\u0644\u062d\u0627\u0644\u0629<\/th>\r\n <th className=\"p-6 text-left\">\u0627\u0644\u0625\u062c\u0631\u0627\u0621\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"divide-y divide-slate-100\">\r\n {certs.map(c => (\r\n <tr key={c.id} className=\"hover:bg-amber-50\/30 transition-colors group\">\r\n <td className=\"p-6 align-top\">\r\n <div className=\"bg-[#001A33] text-white px-3 py-1 rounded-lg inline-block font-black text-sm\">{c.code}<\/div>\r\n <div className=\"text-[9px] text-slate-400 mt-2 font-bold uppercase tracking-tighter\">{c.date}<\/div>\r\n <\/td>\r\n <td className=\"p-6 align-top max-w-xs\">\r\n <div className=\"font-black text-[#001A33] mb-1\">{c.title}<\/div>\r\n <div className=\"text-xs text-slate-400 line-clamp-2 leading-relaxed\">{c.description || '\u0644\u0627 \u064a\u0648\u062c\u062f \u0648\u0635\u0641...'}<\/div>\r\n <\/td>\r\n <td className=\"p-6 text-center\">\r\n {c.showOnHome ? (\r\n <span className=\"bg-green-100 text-green-700 px-4 py-1 rounded-full text-[10px] font-black\"><i className=\"fas fa-home ml-1\"><\/i> \u0631\u0626\u064a\u0633\u064a\u0629<\/span>\r\n ) : (\r\n <span className=\"bg-slate-100 text-slate-400 px-4 py-1 rounded-full text-[10px] font-bold italic\">\u0623\u0631\u0634\u064a\u0641<\/span>\r\n )}\r\n <\/td>\r\n <td className=\"p-6 text-left\">\r\n <div className=\"flex justify-end gap-6 opacity-40 group-hover:opacity-100 transition-opacity\">\r\n <button onClick={() => {setEditId(c.id); setFormData(c); window.scrollTo({top:0, behavior:'smooth'});}} className=\"text-blue-600 hover:scale-125 transition-transform\"><i className=\"fas fa-edit\"><\/i><\/button>\r\n <button onClick={() => deleteCert(c.id)} className=\"text-red-400 hover:scale-125 transition-transform\"><i className=\"fas fa-trash-alt\"><\/i><\/button>\r\n <\/div>\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n <\/tbody>\r\n <\/table>\r\n )}\r\n <\/div>\r\n <\/div>\r\n \r\n <footer className=\"mt-10 text-center text-slate-300 text-[10px] font-bold\">\r\n © 2024 MDY Methodology - \u062a\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0645\u0647\u0646\u062f\u0633 \u0627\u0644\u0631\u0642\u0645\u064a\r\n <\/footer>\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MDY Certification Admin MDY Admin Panel – Standalone<\/p>\n","protected":false},"author":1,"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-1079","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/pages\/1079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/comments?post=1079"}],"version-history":[{"count":58,"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/pages\/1079\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/pages\/1079\/revisions\/1156"}],"wp:attachment":[{"href":"https:\/\/mdyegypt.com\/index.php\/wp-json\/wp\/v2\/media?parent=1079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}