#wp-job-app {
–primary: #2563eb;
–primary-dark: #1e40af;
–secondary: #64748b;
–danger: #ef4444;
–success: #22c55e;
–background: #f8fafc;
–surface: #ffffff;
–text-main: #1e293b;
–text-muted: #64748b;
–border: #e2e8f0;
–shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
color: var(–text-main);
line-height: 1.5;
padding-bottom: 50px;
margin-bottom: 2rem;
}
#wp-job-app * { box-sizing: border-box; margin: 0; padding: 0; }
/* Header */
#wp-job-app header {
background-color: var(–surface);
border-bottom: 1px solid var(–border);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 8px 8px 0 0;
border: 1px solid var(–border);
border-bottom: none;
}
#wp-job-app .brand { display: flex; align-items: center; gap: 10px; }
#wp-job-app .brand h1 { font-size: 1.25rem; font-weight: 700; color: var(–primary); }
#wp-job-app .admin-toggle {
display: flex; align-items: center; gap: 10px; font-size: 0.9rem;
background: var(–background); padding: 5px 12px; border-radius: 20px; border: 1px solid var(–border);
}
/* Main Content */
#wp-job-app main { max-width: 100%; margin: 0; padding: 0; border: 1px solid var(–border); border-top: none; background: var(–surface); border-radius: 0 0 8px 8px; }
#wp-job-app .controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; padding: 1.5rem 1.5rem 0 1.5rem; }
#wp-job-app .stats { color: var(–text-muted); font-size: 0.9rem; }
/* Buttons */
#wp-job-app .btn {
display: inline-flex; align-items: center; gap: 6px; padding: 0.6rem 1.2rem;
border-radius: 6px; border: none; font-weight: 500; cursor: pointer;
transition: all 0.2s ease; font-size: 0.9rem;
}
#wp-job-app .btn-primary { background-color: var(–primary); color: white; }
#wp-job-app .btn-primary:hover { background-color: var(–primary-dark); }
#wp-job-app .btn-danger { background-color: var(–danger); color: white; }
#wp-job-app .btn-icon { padding: 6px; border-radius: 4px; color: var(–text-muted); background: transparent; }
#wp-job-app .btn-icon:hover { background-color: var(–background); color: var(–primary); }
/* Table */
#wp-job-app .table-container { overflow-x: auto; }
#wp-job-app table { width: 100%; border-collapse: collapse; text-align: left; min-width: 800px; }
#wp-job-app thead { background-color: #f1f5f9; }
#wp-job-app th { padding: 1rem; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; color: var(–text-muted); border-bottom: 1px solid var(–border); }
#wp-job-app td { padding: 1rem; border-bottom: 1px solid var(–border); vertical-align: middle; font-size: 0.95rem; }
#wp-job-app tr:last-child td { border-bottom: none; }
#wp-job-app tr:hover { background-color: #f8fafc; }
#wp-job-app .badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: #e0f2fe; color: #0369a1; }
#wp-job-app .action-cell { display: flex; gap: 8px; }
#wp-job-app .link-text { color: var(–primary); text-decoration: none; font-weight: 500; }
/* Modals */
#wp-job-app dialog {
margin: auto; padding: 0; border: none; border-radius: 12px;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); width: 90%; max-width: 500px;
background: var(–surface); z-index: 9999;
}
#wp-job-app dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }
#wp-job-app .modal-header { padding: 1.5rem; border-bottom: 1px solid var(–border); display: flex; justify-content: space-between; align-items: center; }
#wp-job-app .modal-header h2 { font-size: 1.25rem; }
#wp-job-app .close-modal { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(–text-muted); }
#wp-job-app .modal-body { padding: 1.5rem; }
#wp-job-app .form-group { margin-bottom: 1rem; }
#wp-job-app .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.9rem; }
#wp-job-app .form-group input {
width: 100%; padding: 0.75rem; border: 1px solid var(–border); border-radius: 6px; font-size: 1rem;
}
#wp-job-app .form-group input:focus { outline: none; border-color: var(–primary); }
#wp-job-app .modal-footer { padding: 1rem 1.5rem; background: #f8fafc; border-top: 1px solid var(–border); display: flex; justify-content: flex-end; gap: 10px; }
#wp-job-app .error-msg { color: var(–danger); font-size: 0.85rem; margin-bottom: 1rem; background-color: #fef2f2; padding: 0.5rem; border-radius: 4px; display: none; }
#wp-job-app .error-msg.visible { display: block; animation: shake 0.3s ease-in-out; }
/* Toast */
#wp-job-app #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
#wp-job-app .toast {
background: var(–surface); border-left: 4px solid var(–primary); padding: 1rem;
border-radius: 4px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); min-width: 300px; animation: slideIn 0.3s ease-out;
}
#wp-job-app .toast.success { border-color: var(–success); }
#wp-job-app .toast.error { border-color: var(–danger); }
/* Utilities */
#wp-job-app .hidden { display: none !important; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* Mobile Responsive */
@media (max-width: 768px) {
#wp-job-app table, #wp-job-app thead, #wp-job-app tbody, #wp-job-app th, #wp-job-app td, #wp-job-app tr { display: block; }
#wp-job-app thead { display: none; }
#wp-job-app tr { margin-bottom: 1rem; border: 1px solid var(–border); border-radius: 8px; padding: 1rem; background: var(–surface); }
#wp-job-app td { border: none; padding: 0.5rem 0; display: flex; justify-content: space-between; align-items: center; text-align: right; }
#wp-job-app td::before { content: attr(data-label); font-weight: 600; color: var(–text-muted); text-align: left; font-size: 0.85rem; }
#wp-job-app .action-cell { justify-content: flex-end; }
#wp-job-app .controls { flex-direction: column; align-items: stretch; }
}
Showing 0 notifications
Add New Job
Post Date
Recruitment Board
Exam/Post Name
Qualification
Advt. No
Last Date
Details
Actions
No job notifications found.
Invalid username or password.
Username
Password
Recruitment Board
Exam/Post Name
Qualification
Advt. No
Link
(function() {
// Prevent variable conflicts with other WP plugins
const ADMIN_CREDENTIALS = { username: “Jadmin”, password: “JB@secure#123″ };
const initialData = [
{ id: ‘1’, postDate: ‘2023-10-25’, board: ‘UPSC’, postName: ‘Civil Services’, qualification: ‘Bachelor’s’, advtNo: ’05/2023′, lastDate: ‘2023-11-15’, link: ‘https://upsc.gov.in’ },
{ id: ‘2’, postDate: ‘2023-10-28’, board: ‘SBI’, postName: ‘Probationary Officers’, qualification: ‘Graduation’, advtNo: ‘CRPD/PO/2023’, lastDate: ‘2023-11-20’, link: ‘https://sbi.co.in’ }
];
let jobs = JSON.parse(localStorage.getItem(‘jobData’)) || initialData;
let isAdmin = false;
let editingJobId = null;
const modeSelect = document.getElementById(‘view-mode’);
const loginModal = document.getElementById(‘login-modal’);
const jobModal = document.getElementById(‘job-modal’);
const loginForm = document.getElementById(‘login-form’);
const errorMsg = document.getElementById(‘login-error’);
window.handleModeChange = function() {
if (modeSelect.value === ‘admin’) { loginModal.showModal(); }
else { isAdmin = false; renderTable(); showToast(‘Public View’, ‘success’); }
};
window.handleLogin = function(e) {
e.preventDefault();
const user = document.getElementById(‘username’).value;
const pass = document.getElementById(‘password’).value;
if (user === ADMIN_CREDENTIALS.username && pass === ADMIN_CREDENTIALS.password) {
isAdmin = true; errorMsg.classList.remove(‘visible’); loginForm.reset(); loginModal.close(); renderTable(); showToast(‘Admin Login Successful’, ‘success’);
} else {
errorMsg.classList.add(‘visible’); document.getElementById(‘password’).value = ”; document.getElementById(‘password’).focus();
}
};
window.cancelLogin = function() {
modeSelect.value = ‘public’; errorMsg.classList.remove(‘visible’); loginForm.reset(); loginModal.close();
};
window.renderTable = function() {
const tbody = document.getElementById(‘table-body’); tbody.innerHTML = ”;
modeSelect.value = isAdmin ? ‘admin’ : ‘public’;
if (jobs.length === 0) { document.getElementById(’empty-state’).classList.remove(‘hidden’); } else {
document.getElementById(’empty-state’).classList.add(‘hidden’);
const sortedJobs = […jobs].sort((a, b) => new Date(b.postDate) – new Date(a.postDate));
sortedJobs.forEach(job => {
const row = document.createElement(‘tr’);
const isExpired = new Date(job.lastDate) < new Date();
const actionHtml = isAdmin ? `
` : ”;
row.innerHTML = `
${new Date(job.postDate).toLocaleDateString()} ${job.board} ${job.postName} ${job.qualification} ${job.advtNo} ${new Date(job.lastDate).toLocaleDateString()} View → ${actionHtml} `;
tbody.appendChild(row);
});
}
document.getElementById(‘row-count’).textContent = jobs.length;
document.getElementById(‘add-btn’).classList.toggle(‘hidden’, !isAdmin);
document.querySelectorAll(‘.admin-only’).forEach(el => el.classList.toggle(‘hidden’, !isAdmin));
};
window.openJobModal = function(jobData = null) {
const form = document.getElementById(‘job-form’);
if (jobData) { document.getElementById(‘modal-title’).textContent = ‘Edit Job’; editingJobId = jobData.id; Object.keys(jobData).forEach(k => { if(document.getElementById(k)) document.getElementById(k).value = jobData[k]; }); }
else { document.getElementById(‘modal-title’).textContent = ‘Add New Job’; form.reset(); editingJobId = null; document.getElementById(‘postDate’).value = new Date().toISOString().split(‘T’)[0]; }
jobModal.showModal();
};
window.handleJobSubmit = function(e) {
e.preventDefault();
const newJob = { id: editingJobId || Date.now().toString(), board: document.getElementById(‘board’).value, postName: document.getElementById(‘postName’).value, qualification: document.getElementById(‘qualification’).value, advtNo: document.getElementById(‘advtNo’).value, postDate: document.getElementById(‘postDate’).value, lastDate: document.getElementById(‘lastDate’).value, link: document.getElementById(‘link’).value };
if (editingJobId) { const idx = jobs.findIndex(j => j.id === editingJobId); jobs[idx] = newJob; showToast(‘Updated’, ‘success’); }
else { jobs.push(newJob); showToast(‘Added’, ‘success’); }
localStorage.setItem(‘jobData’, JSON.stringify(jobs)); renderTable(); jobModal.close();
};
window.editJob = function(id) { const j = jobs.find(x => x.id === id); if(j) openJobModal(j); };
window.deleteJob = function(id) { if(confirm(‘Delete?’)) { jobs = jobs.filter(x => x.id !== id); localStorage.setItem(‘jobData’, JSON.stringify(jobs)); renderTable(); showToast(‘Deleted’, ‘error’); } };
window.showToast = function(msg, type) {
const c = document.getElementById(‘toast-container’); const t = document.createElement(‘div’);
t.className = `toast ${type}`; t.textContent = msg; c.appendChild(t);
setTimeout(() => { t.style.opacity = 0; setTimeout(() => t.remove(), 300); }, 3000);
};
renderTable();
})();