TraderHub – Business Directory<\/title>\n\n<style>\n*{box-sizing:border-box;margin:0;padding:0}\nbody{\n font-family:Arial,Helvetica,sans-serif;\n background:#f4f7fb;\n color:#182230;\n line-height:1.5\n}\nbutton,input,select,textarea{font:inherit}\nbutton{cursor:pointer}\na{text-decoration:none;color:inherit}\n\n:root{\n --primary:#155eef;\n --dark:#102a43;\n --green:#16a34a;\n --red:#dc2626;\n --yellow:#f59e0b;\n --border:#e2e8f0;\n --white:#fff;\n}\n\n.navbar{\n background:var(--dark);\n color:white;\n padding:15px 5%;\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:20px;\n position:sticky;\n top:0;\n z-index:1000\n}\n.logo{\n font-size:25px;\n font-weight:800\n}\n.logo span{color:#38bdf8}\n.navlinks{\n display:flex;\n gap:8px;\n flex-wrap:wrap\n}\n.navlinks button{\n background:transparent;\n color:#fff;\n border:0;\n padding:9px 12px;\n border-radius:6px\n}\n.navlinks button:hover{background:#ffffff18}\n\n.page{display:none}\n.page.active{display:block}\n\n.hero{\n background:linear-gradient(135deg,#0f4cbd,#1689e9);\n color:#fff;\n padding:70px 5%\n}\n.hero-inner{\n max-width:1200px;\n margin:auto\n}\n.hero h1{\n font-size:46px;\n margin-bottom:10px\n}\n.hero p{\n font-size:18px;\n margin-bottom:30px\n}\n.searchbox{\n background:white;\n padding:15px;\n border-radius:14px;\n display:grid;\n grid-template-columns:2fr 1fr 1fr auto;\n gap:10px;\n box-shadow:0 15px 35px #0003\n}\n\n.container{\n max-width:1200px;\n margin:auto;\n padding:35px 18px\n}\n.section-head{\n display:flex;\n justify-content:space-between;\n align-items:center;\n margin-bottom:20px;\n gap:10px\n}\n.section-head h2{font-size:28px}\n\n.grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:20px\n}\n\n.card{\n background:#fff;\n border:1px solid var(--border);\n border-radius:14px;\n padding:20px;\n box-shadow:0 5px 20px #0f172a0c\n}\n.card:hover{\n box-shadow:0 10px 30px #0f172a18;\n transform:translateY(-2px)\n}\n.card-top{\n display:flex;\n align-items:center;\n gap:12px;\n margin-bottom:12px\n}\n.avatar{\n width:62px;\n height:62px;\n border-radius:12px;\n background:#e8f1ff;\n color:var(--primary);\n display:grid;\n place-items:center;\n font-size:25px;\n font-weight:800;\n flex-shrink:0\n}\n.card h3{font-size:19px}\n.meta{\n color:#64748b;\n font-size:14px;\n margin:4px 0\n}\n.badge{\n display:inline-block;\n padding:4px 9px;\n border-radius:20px;\n font-size:12px;\n font-weight:bold\n}\n.verified{background:#dcfce7;color:#15803d}\n.pending{background:#fef3c7;color:#92400e}\n.rejected{background:#fee2e2;color:#991b1b}\n\n.tag{\n display:inline-block;\n background:#eff6ff;\n color:#155eef;\n padding:4px 8px;\n border-radius:20px;\n font-size:12px;\n margin:3px\n}\n\n.btn{\n border:0;\n background:var(--primary);\n color:#fff;\n padding:11px 17px;\n border-radius:8px;\n font-weight:700\n}\n.btn:hover{opacity:.9}\n.btn.green{background:var(--green)}\n.btn.red{background:var(--red)}\n.btn.dark{background:var(--dark)}\n.btn.yellow{background:var(--yellow)}\n.btn.light{\n background:#eef2f7;\n color:#182230\n}\n.btn.small{\n padding:7px 10px;\n font-size:12px\n}\n\ninput,select,textarea{\n width:100%;\n border:1px solid #cbd5e1;\n padding:12px;\n border-radius:8px;\n outline:none;\n background:#fff\n}\ninput:focus,select:focus,textarea:focus{\n border-color:var(--primary)\n}\ntextarea{min-height:100px;resize:vertical}\n\n.form-card{\n max-width:850px;\n margin:auto;\n background:#fff;\n padding:25px;\n border-radius:14px;\n border:1px solid var(--border)\n}\n.form-grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:15px\n}\n.form-group label{\n display:block;\n font-size:13px;\n font-weight:bold;\n margin-bottom:6px\n}\n.full{grid-column:1\/-1}\n\n.stats{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:15px;\n margin-bottom:25px\n}\n.stat{\n background:#fff;\n border:1px solid var(--border);\n border-radius:12px;\n padding:20px\n}\n.stat .number{\n font-size:30px;\n font-weight:800;\n color:var(--primary)\n}\n.stat small{color:#64748b}\n\n.table-wrap{\n background:#fff;\n border:1px solid var(--border);\n border-radius:12px;\n overflow:auto\n}\ntable{\n width:100%;\n border-collapse:collapse;\n min-width:750px\n}\nth,td{\n padding:13px;\n border-bottom:1px solid var(--border);\n text-align:left\n}\nth{background:#f8fafc}\n\n.modal{\n display:none;\n position:fixed;\n inset:0;\n background:#0008;\n z-index:3000;\n align-items:center;\n justify-content:center;\n padding:20px\n}\n.modal.show{display:flex}\n.modal-box{\n width:100%;\n max-width:600px;\n max-height:90vh;\n overflow:auto;\n background:#fff;\n border-radius:15px;\n padding:25px;\n position:relative\n}\n.close{\n position:absolute;\n right:15px;\n top:10px;\n font-size:25px;\n border:0;\n background:none\n}\n\n.plan-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:20px\n}\n.plan{\n background:#fff;\n padding:25px;\n border-radius:15px;\n border:2px solid var(--border);\n text-align:center\n}\n.plan.featured{\n border-color:var(--primary)\n}\n.price{\n font-size:32px;\n font-weight:800;\n margin:10px\n}\n.plan li{\n list-style:none;\n margin:8px\n}\n\n.empty{\n background:#fff;\n padding:40px;\n text-align:center;\n border-radius:12px;\n color:#64748b\n}\n\nfooter{\n margin-top:40px;\n background:var(--dark);\n color:#cbd5e1;\n padding:35px 5%;\n text-align:center\n}\n\n.toast{\n position:fixed;\n right:20px;\n bottom:20px;\n background:#172033;\n color:white;\n padding:13px 18px;\n border-radius:8px;\n display:none;\n z-index:5000\n}\n\n@media(max-width:900px){\n .grid,.plan-grid{grid-template-columns:1fr 1fr}\n .searchbox{grid-template-columns:1fr 1fr}\n .stats{grid-template-columns:1fr 1fr}\n .hero h1{font-size:35px}\n}\n\n@media(max-width:600px){\n .navbar{align-items:flex-start;flex-direction:column}\n .navlinks{width:100%}\n .navlinks button{padding:7px}\n .grid,.plan-grid,.form-grid{grid-template-columns:1fr}\n .searchbox{grid-template-columns:1fr}\n .stats{grid-template-columns:1fr}\n .hero{padding:45px 5%}\n .hero h1{font-size:30px}\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<header class=\"navbar\">\n<div class=\"logo\">Trader<span>Hub<\/span><\/div>\n\n<div class=\"navlinks\">\n<button onclick=\"showPage('home')\">Home<\/button>\n<button onclick=\"showPage('directory')\">Traders<\/button>\n<button onclick=\"showPage('categories')\">Categories<\/button>\n<button onclick=\"showPage('plans')\">Plans<\/button>\n<button onclick=\"openLogin()\">Login<\/button>\n<\/div>\n<\/header>\n\n\n\n<section id=\"home\" class=\"page active\">\n\n<div class=\"hero\">\n<div class=\"hero-inner\">\n\n<h1>Find Trusted Traders Near You<\/h1>\n\n<p>\nLocal businesses, retailers and service providers \u2014 all in one directory.\n<\/p>\n\n<div class=\"searchbox\">\n\n<input id=\"homeSearch\"\nplaceholder=\"Business name or keyword\">\n\n<input id=\"homeCity\"\nplaceholder=\"City\">\n\n<select id=\"homeCategory\">\n<option value=\"\">All Categories<\/option>\n<option>General Store<\/option>\n<option>Footwear<\/option>\n<option>Cosmetics<\/option>\n<option>Bakery<\/option>\n<option>Electronics<\/option>\n<option>Mobile Shop<\/option>\n<option>Hardware<\/option>\n<option>Furniture<\/option>\n<option>Medical Store<\/option>\n<\/select>\n\n<button class=\"btn\" onclick=\"homeSearch()\">Search<\/button>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n<div class=\"container\">\n\n<div class=\"section-head\">\n<h2>Featured Traders<\/h2>\n<button class=\"btn\" onclick=\"showPage('directory')\">\nView All\n<\/button>\n<\/div>\n\n<div id=\"featured\" class=\"grid\"><\/div>\n\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"directory\" class=\"page\">\n\n<div class=\"container\">\n\n<div class=\"section-head\">\n<h2>Trader Directory<\/h2>\n\n<button class=\"btn green\" onclick=\"openRetailerRegister()\">\n+ Add Business\n<\/button>\n<\/div>\n\n<div class=\"searchbox\" style=\"margin-bottom:25px\">\n\n<input id=\"directorySearch\"\nplaceholder=\"Search business\">\n\n<input id=\"directoryCity\"\nplaceholder=\"City\">\n\n<select id=\"directoryCategory\">\n<option value=\"\">All Categories<\/option>\n<option>General Store<\/option>\n<option>Footwear<\/option>\n<option>Cosmetics<\/option>\n<option>Bakery<\/option>\n<option>Electronics<\/option>\n<option>Mobile Shop<\/option>\n<option>Hardware<\/option>\n<option>Furniture<\/option>\n<option>Medical Store<\/option>\n<\/select>\n\n<button class=\"btn\" onclick=\"directorySearch()\">\nSearch\n<\/button>\n\n<\/div>\n\n<div id=\"listing\" class=\"grid\"><\/div>\n\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"categories\" class=\"page\">\n\n<div class=\"container\">\n\n<h2 style=\"margin-bottom:25px\">Business Categories<\/h2>\n\n<div class=\"grid\">\n\n<div class=\"card\">\n<h3>\ud83d\uded2 General Store<\/h3>\n<p class=\"meta\">Grocery and daily needs<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('General Store')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83d\udc5f Footwear<\/h3>\n<p class=\"meta\">Shoes, slippers and sandals<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Footwear')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83d\udc84 Cosmetics<\/h3>\n<p class=\"meta\">Beauty and cosmetics shops<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Cosmetics')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83c\udf5e Bakery<\/h3>\n<p class=\"meta\">Bakery and food businesses<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Bakery')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83d\udcf1 Mobile Shop<\/h3>\n<p class=\"meta\">Mobile and accessories<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Mobile Shop')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83d\udd27 Hardware<\/h3>\n<p class=\"meta\">Hardware and tools<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Hardware')\">\nBrowse\n<\/button>\n<\/div>\n\n<\/div>\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"plans\" class=\"page\">\n\n<div class=\"container\">\n\n<h2 style=\"text-align:center;margin-bottom:30px\">\nRetailer Subscription Plans\n<\/h2>\n\n<div class=\"plan-grid\">\n\n<div class=\"plan\">\n\n<h3>FREE<\/h3>\n\n<div class=\"price\">\u20b90<\/div>\n\n<ul>\n<li>\u2713 Basic Listing<\/li>\n<li>\u2713 Business Name<\/li>\n<li>\u2713 Category<\/li>\n<li>\u2713 Phone Number<\/li>\n<li>\u2715 Featured Listing<\/li>\n<\/ul>\n\n<button class=\"btn\" onclick=\"selectPlan('Free')\">\nStart Free\n<\/button>\n\n<\/div>\n\n\n<div class=\"plan featured\">\n\n<h3>SILVER<\/h3>\n\n<div class=\"price\">\u20b9499<\/div>\n\n<ul>\n<li>\u2713 Everything in Free<\/li>\n<li>\u2713 WhatsApp Button<\/li>\n<li>\u2713 Priority Listing<\/li>\n<li>\u2713 Business Description<\/li>\n<li>\u2713 1 Year Listing<\/li>\n<\/ul>\n\n<button class=\"btn\" onclick=\"selectPlan('Silver')\">\nChoose Silver\n<\/button>\n\n<\/div>\n\n\n<div class=\"plan\">\n\n<h3>GOLD<\/h3>\n\n<div class=\"price\">\u20b9999<\/div>\n\n<ul>\n<li>\u2713 Everything in Silver<\/li>\n<li>\u2713 Featured Listing<\/li>\n<li>\u2713 Verified Badge<\/li>\n<li>\u2713 Top Search Position<\/li>\n<li>\u2713 Premium Profile<\/li>\n<\/ul>\n\n<button class=\"btn green\" onclick=\"selectPlan('Gold')\">\nChoose Gold\n<\/button>\n\n<\/div>\n\n<\/div>\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"retailer\" class=\"page\">\n\n<div class=\"container\">\n\n<div class=\"section-head\">\n<h2>Retailer Dashboard<\/h2>\n\n<button class=\"btn red\" onclick=\"logout()\">\nLogout\n<\/button>\n<\/div>\n\n<div class=\"stats\">\n\n<div class=\"stat\">\n<div class=\"number\" id=\"myListings\">0<\/div>\n<small>My Listings<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"myViews\">0<\/div>\n<small>Profile Views<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"myEnquiries\">0<\/div>\n<small>Enquiries<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"myPlan\">Free<\/div>\n<small>Current Plan<\/small>\n<\/div>\n\n<\/div>\n\n\n<div class=\"form-card\">\n\n<h3>Add \/ Edit Business<\/h3>\n\n<br>\n\n<div class=\"form-grid\">\n\n<div class=\"form-group\">\n<label>Business Name *<\/label>\n<input id=\"rName\">\n<\/div>\n\n<div class=\"form-group\">\n<label>Category *<\/label>\n\n<select id=\"rCategory\">\n<option>General Store<\/option>\n<option>Footwear<\/option>\n<option>Cosmetics<\/option>\n<option>Bakery<\/option>\n<option>Electronics<\/option>\n<option>Mobile Shop<\/option>\n<option>Hardware<\/option>\n<option>Furniture<\/option>\n<option>Medical Store<\/option>\n<\/select>\n\n<\/div>\n\n<div class=\"form-group\">\n<label>Owner Name<\/label>\n<input id=\"rOwner\">\n<\/div>\n\n<div class=\"form-group\">\n<label>City *<\/label>\n<input id=\"rCity\">\n<\/div>\n\n<div class=\"form-group\">\n<label>Phone *<\/label>\n<input id=\"rPhone\">\n<\/div>\n\n<div class=\"form-group\">\n<label>WhatsApp<\/label>\n<input id=\"rWhatsApp\">\n<\/div>\n\n<div class=\"form-group full\">\n<label>Address<\/label>\n<input id=\"rAddress\">\n<\/div>\n\n<div class=\"form-group full\">\n<label>Business Description<\/label>\n<textarea id=\"rDescription\"><\/textarea>\n<\/div>\n\n<div class=\"form-group\">\n<label>Subscription<\/label>\n\n<select id=\"rPlan\">\n<option>Free<\/option>\n<option>Silver<\/option>\n<option>Gold<\/option>\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<br>\n\n<button class=\"btn green\" onclick=\"saveRetailerListing()\">\nSave Business\n<\/button>\n\n<button class=\"btn light\" onclick=\"clearRetailerForm()\">\nClear\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"admin\" class=\"page\">\n\n<div class=\"container\">\n\n<div class=\"section-head\">\n\n<h2>Admin Dashboard<\/h2>\n\n<button class=\"btn red\" onclick=\"logout()\">\nLogout\n<\/button>\n\n<\/div>\n\n\n<div class=\"stats\">\n\n<div class=\"stat\">\n<div class=\"number\" id=\"adminTotal\">0<\/div>\n<small>Total Traders<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"adminApproved\">0<\/div>\n<small>Approved<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"adminPending\">0<\/div>\n<small>Pending<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"adminPaid\">0<\/div>\n<small>Paid Plans<\/small>\n<\/div>\n\n<\/div>\n\n\n<div class=\"table-wrap\">\n\n<table>\n\n<thead>\n\n<tr>\n<th>Business<\/th>\n<th>Category<\/th>\n<th>City<\/th>\n<th>Plan<\/th>\n<th>Status<\/th>\n<th>Actions<\/th>\n<\/tr>\n\n<\/thead>\n\n<tbody id=\"adminTable\"><\/tbody>\n\n<\/table>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n\n<div id=\"loginModal\" class=\"modal\">\n\n<div class=\"modal-box\">\n\n<button class=\"close\" onclick=\"closeModal('loginModal')\">\n\u00d7\n<\/button>\n\n<h2>Login<\/h2>\n\n<br>\n\n<div class=\"form-group\">\n<label>Username<\/label>\n<input id=\"loginUser\">\n<\/div>\n\n<br>\n\n<div class=\"form-group\">\n<label>Password<\/label>\n<input id=\"loginPassword\" type=\"password\">\n<\/div>\n\n<br>\n\n<button class=\"btn\" onclick=\"login()\">\nLogin\n<\/button>\n\n<button class=\"btn light\" onclick=\"openRegister()\">\nRetailer Register\n<\/button>\n\n<p style=\"margin-top:15px;color:#64748b;font-size:13px\">\nAdmin: admin \/ admin123<br>\nRetailer: retailer \/ retailer123\n<\/p>\n\n<\/div>\n\n<\/div>\n\n\n\n<div id=\"registerModal\" class=\"modal\">\n\n<div class=\"modal-box\">\n\n<button class=\"close\" onclick=\"closeModal('registerModal')\">\n\u00d7\n<\/button>\n\n<h2>Retailer Registration<\/h2>\n\n<br>\n\n<div class=\"form-group\">\n<label>Username<\/label>\n<input id=\"regUser\">\n<\/div>\n\n<br>\n\n<div class=\"form-group\">\n<label>Password<\/label>\n<input id=\"regPassword\" type=\"password\">\n<\/div>\n\n<br>\n\n<div class=\"form-group\">\n<label>Business Name<\/label>\n<input id=\"regBusiness\">\n<\/div>\n\n<br>\n\n<div class=\"form-group\">\n<label>Phone<\/label>\n<input id=\"regPhone\">\n<\/div>\n\n<br>\n\n<button class=\"btn green\" onclick=\"registerRetailer()\">\nCreate Account\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n\n<div id=\"profileModal\" class=\"modal\">\n\n<div class=\"modal-box\">\n\n<button class=\"close\" onclick=\"closeModal('profileModal')\">\n\u00d7\n<\/button>\n\n<div id=\"profileContent\"><\/div>\n\n<\/div>\n\n<\/div>\n\n\n<div id=\"toast\" class=\"toast\"><\/div>\n\n\n<footer>\n\n<strong>TraderHub<\/strong>\n\n<br>\n\nProfessional Trader & Retailer Directory\n\n<br><br>\n\n\u00a9 2026 TraderHub. All Rights Reserved.\n\n<\/footer>\n\n\n<script>\n\n\/* =========================\n DATABASE\n========================= *\/\n\nconst DB_KEY=\"TRADERHUB_DATABASE\";\nconst USER_KEY=\"TRADERHUB_USERS\";\n\nlet traders=JSON.parse(localStorage.getItem(DB_KEY));\n\nlet users=JSON.parse(localStorage.getItem(USER_KEY));\n\nif(!traders){\n\ntraders=[\n\n{\n id:1,\n owner:\"Rajesh Sharma\",\n name:\"Sharma General Store\",\n category:\"General Store\",\n city:\"Kannauj\",\n phone:\"9876543210\",\n whatsapp:\"9876543210\",\n address:\"Main Market, Kannauj\",\n description:\"Grocery and daily-use products.\",\n plan:\"Gold\",\n status:\"Approved\",\n verified:true,\n views:124,\n enquiries:12\n},\n\n{\n id:2,\n owner:\"Amit Gupta\",\n name:\"Gupta Footwear\",\n category:\"Footwear\",\n city:\"Tirwa\",\n phone:\"9876501234\",\n whatsapp:\"9876501234\",\n address:\"Station Road, Tirwa\",\n description:\"All types of footwear available.\",\n plan:\"Silver\",\n status:\"Approved\",\n verified:true,\n views:87,\n enquiries:7\n},\n\n{\n id:3,\n owner:\"Pooja Verma\",\n name:\"New Style Cosmetics\",\n category:\"Cosmetics\",\n city:\"Haseran\",\n phone:\"9876512345\",\n whatsapp:\"9876512345\",\n address:\"Main Bazaar, Haseran\",\n description:\"Cosmetics, bangles and beauty products.\",\n plan:\"Free\",\n status:\"Approved\",\n verified:false,\n views:41,\n enquiries:3\n}\n\n];\n\nsaveDB();\n\n}\n\n\nif(!users){\n\nusers=[\n\n{\n username:\"admin\",\n password:\"admin123\",\n role:\"admin\"\n},\n\n{\n username:\"retailer\",\n password:\"retailer123\",\n role:\"retailer\",\n traderId:1\n}\n\n];\n\nsaveUsers();\n\n}\n\n\nlet currentUser=null;\n\n\n\/* =========================\n STORAGE\n========================= *\/\n\nfunction saveDB(){\n\nlocalStorage.setItem(DB_KEY,JSON.stringify(traders));\n\n}\n\nfunction saveUsers(){\n\nlocalStorage.setItem(USER_KEY,JSON.stringify(users));\n\n}\n\n\n\/* =========================\n PAGE NAVIGATION\n========================= *\/\n\nfunction showPage(page){\n\ndocument.querySelectorAll(\".page\")\n.forEach(p=>p.classList.remove(\"active\"));\n\ndocument.getElementById(page)\n.classList.add(\"active\");\n\nwindow.scrollTo(0,0);\n\nif(page===\"directory\") renderListings(traders);\n\nif(page===\"retailer\") loadRetailerDashboard();\n\nif(page===\"admin\") renderAdmin();\n\n}\n\n\n\/* =========================\n TRADER CARD\n========================= *\/\n\nfunction traderCard(t){\n\nlet badge=\"\";\n\nif(t.status===\"Approved\" && t.verified){\n\nbadge='<span class=\"badge verified\">\u2713 VERIFIED<\/span>';\n\n}else if(t.status===\"Pending\"){\n\nbadge='<span class=\"badge pending\">PENDING<\/span>';\n\n}else if(t.status===\"Rejected\"){\n\nbadge='<span class=\"badge rejected\">REJECTED<\/span>';\n\n}\n\nreturn `\n\n<div class=\"card\">\n\n<div class=\"card-top\">\n\n<div class=\"avatar\">\n${escapeHTML(t.name.charAt(0))}\n<\/div>\n\n<div>\n\n<h3>${escapeHTML(t.name)}<\/h3>\n\n${badge}\n\n<\/div>\n\n<\/div>\n\n<div class=\"meta\">\n\ud83d\udcc2 ${escapeHTML(t.category)}\n<\/div>\n\n<div class=\"meta\">\n\ud83d\udccd ${escapeHTML(t.city)}\n<\/div>\n\n<div class=\"meta\">\n\ud83d\udcde ${escapeHTML(t.phone)}\n<\/div>\n\n<p style=\"margin:10px 0;color:#475569\">\n${escapeHTML(t.description)}\n<\/p>\n\n<span class=\"tag\">${escapeHTML(t.plan)}<\/span>\n\n<br><br>\n\n<button class=\"btn small\"\nonclick=\"viewProfile(${t.id})\">\nView Profile\n<\/button>\n\n<\/div>\n\n`;\n\n}\n\n\n\/* =========================\n RENDER\n========================= *\/\n\nfunction renderListings(list){\n\nconst box=document.getElementById(\"listing\");\n\nif(!list.length){\n\nbox.innerHTML=\n'<div class=\"empty\">No trader found.<\/div>';\n\nreturn;\n\n}\n\nbox.innerHTML=list\n.filter(t=>t.status===\"Approved\")\n.map(traderCard)\n.join(\"\");\n\n}\n\n\nfunction renderFeatured(){\n\nlet list=traders\n.filter(t=>t.status===\"Approved\")\n.sort((a,b)=>{\n\nif(a.plan===\"Gold\") return -1;\n\nif(b.plan===\"Gold\") return 1;\n\nreturn b.views-a.views;\n\n})\n.slice(0,6);\n\ndocument.getElementById(\"featured\")\n.innerHTML=list.map(traderCard).join(\"\");\n\n}\n\n\n\/* =========================\n SEARCH\n========================= *\/\n\nfunction homeSearch(){\n\nlet q=document\n.getElementById(\"homeSearch\")\n.value.toLowerCase();\n\nlet city=document\n.getElementById(\"homeCity\")\n.value.toLowerCase();\n\nlet cat=document\n.getElementById(\"homeCategory\")\n.value;\n\nlet result=filterTraders(q,city,cat);\n\nshowPage(\"directory\");\n\nrenderListings(result);\n\n}\n\n\nfunction directorySearch(){\n\nlet q=document\n.getElementById(\"directorySearch\")\n.value.toLowerCase();\n\nlet city=document\n.getElementById(\"directoryCity\")\n.value.toLowerCase();\n\nlet cat=document\n.getElementById(\"directoryCategory\")\n.value;\n\nrenderListings(filterTraders(q,city,cat));\n\n}\n\n\nfunction filterTraders(q,city,cat){\n\nreturn traders.filter(t=>{\n\nreturn t.status===\"Approved\" &&\n\n(!q ||\nt.name.toLowerCase().includes(q) ||\nt.category.toLowerCase().includes(q) ||\nt.description.toLowerCase().includes(q))\n\n&&\n\n(!city ||\nt.city.toLowerCase().includes(city))\n\n&&\n\n(!cat || t.category===cat);\n\n});\n\n}\n\n\nfunction categorySearch(category){\n\nshowPage(\"directory\");\n\ndocument.getElementById(\"directoryCategory\")\n.value=category;\n\ndirectorySearch();\n\n}\n\n\n\/* =========================\n PROFILE\n========================= *\/\n\nfunction viewProfile(id){\n\nlet t=traders.find(x=>x.id===id);\n\nif(!t)return;\n\nt.views++;\n\nsaveDB();\n\ndocument.getElementById(\"profileContent\").innerHTML=`\n\n<div class=\"card-top\">\n\n<div class=\"avatar\">\n${escapeHTML(t.name.charAt(0))}\n<\/div>\n\n<div>\n\n<h2>${escapeHTML(t.name)}<\/h2>\n\n${t.verified?\n'<span class=\"badge verified\">\u2713 Verified Business<\/span>':\n''}\n\n<\/div>\n\n<\/div>\n\n<hr style=\"margin:15px 0;border:0;border-top:1px solid #eee\">\n\n<p><b>Owner:<\/b> ${escapeHTML(t.owner)}<\/p>\n\n<p><b>Category:<\/b> ${escapeHTML(t.category)}<\/p>\n\n<p><b>City:<\/b> ${escapeHTML(t.city)}<\/p>\n\n<p><b>Address:<\/b> ${escapeHTML(t.address)}<\/p>\n\n<p><b>Phone:<\/b> ${escapeHTML(t.phone)}<\/p>\n\n<p style=\"margin:15px 0\">\n${escapeHTML(t.description)}\n<\/p>\n\n<div>\n\n<a class=\"btn\"\nhref=\"tel:${escapeHTML(t.phone)}\">\n\ud83d\udcde Call\n<\/a>\n\n<a class=\"btn green\"\ntarget=\"_blank\"\nhref=\"https:\/\/wa.me\/91${escapeHTML(t.whatsapp)}\">\n\ud83d\udcac WhatsApp\n<\/a>\n\n<\/div>\n\n`;\n\ndocument.getElementById(\"profileModal\")\n.classList.add(\"show\");\n\nrenderFeatured();\n\n}\n\n\n\/* =========================\n LOGIN\n========================= *\/\n\nfunction openLogin(){\n\ndocument.getElementById(\"loginModal\")\n.classList.add(\"show\");\n\n}\n\n\nfunction openRegister(){\n\ncloseModal(\"loginModal\");\n\ndocument.getElementById(\"registerModal\")\n.classList.add(\"show\");\n\n}\n\n\nfunction openRetailerRegister(){\n\nopenRegister();\n\n}\n\n\nfunction login(){\n\nlet username=document\n.getElementById(\"loginUser\")\n.value.trim();\n\nlet password=document\n.getElementById(\"loginPassword\")\n.value;\n\nlet user=users.find(u=>\nu.username===username &&\nu.password===password\n);\n\nif(!user){\n\ntoast(\"Invalid username or password\");\n\nreturn;\n\n}\n\ncurrentUser=user;\n\ncloseModal(\"loginModal\");\n\nif(user.role===\"admin\"){\n\nshowPage(\"admin\");\n\n}else{\n\nshowPage(\"retailer\");\n\n}\n\ntoast(\"Login successful\");\n\n}\n\n\n\/* =========================\n REGISTER\n========================= *\/\n\nfunction registerRetailer(){\n\nlet username=document\n.getElementById(\"regUser\").value.trim();\n\nlet password=document\n.getElementById(\"regPassword\").value;\n\nlet business=document\n.getElementById(\"regBusiness\").value.trim();\n\nlet phone=document\n.getElementById(\"regPhone\").value.trim();\n\nif(!username || !password || !business || !phone){\n\ntoast(\"Please fill all required fields\");\n\nreturn;\n\n}\n\nif(users.some(u=>u.username===username)){\n\ntoast(\"Username already exists\");\n\nreturn;\n\n}\n\nlet trader={\n\nid:Date.now(),\n\nowner:username,\n\nname:business,\n\ncategory:\"General Store\",\n\ncity:\"\",\n\nphone:phone,\n\nwhatsapp:phone,\n\naddress:\"\",\n\ndescription:\"\",\n\nplan:\"Free\",\n\nstatus:\"Pending\",\n\nverified:false,\n\nviews:0,\n\nenquiries:0\n\n};\n\ntraders.push(trader);\n\nusers.push({\n\nusername:username,\n\npassword:password,\n\nrole:\"retailer\",\n\ntraderId:trader.id\n\n});\n\nsaveDB();\n\nsaveUsers();\n\ncurrentUser=users[users.length-1];\n\ncloseModal(\"registerModal\");\n\nshowPage(\"retailer\");\n\ntoast(\"Registration successful. Listing pending approval.\");\n\n}\n\n\n\/* =========================\n RETAILER DASHBOARD\n========================= *\/\n\nfunction loadRetailerDashboard(){\n\nif(!currentUser)return;\n\nlet t=traders.find(x=>x.id===currentUser.traderId);\n\nif(!t){\n\nreturn;\n\n}\n\ndocument.getElementById(\"myListings\")\n.innerText=\"1\";\n\ndocument.getElementById(\"myViews\")\n.innerText=t.views;\n\ndocument.getElementById(\"myEnquiries\")\n.innerText=t.enquiries;\n\ndocument.getElementById(\"myPlan\")\n.innerText=t.plan;\n\ndocument.getElementById(\"rName\").value=t.name;\n\ndocument.getElementById(\"rOwner\").value=t.owner;\n\ndocument.getElementById(\"rCategory\").value=t.category;\n\ndocument.getElementById(\"rCity\").value=t.city;\n\ndocument.getElementById(\"rPhone\").value=t.phone;\n\ndocument.getElementById(\"rWhatsApp\").value=t.whatsapp;\n\ndocument.getElementById(\"rAddress\").value=t.address;\n\ndocument.getElementById(\"rDescription\").value=t.description;\n\ndocument.getElementById(\"rPlan\").value=t.plan;\n\n}\n\n\n\/* =========================\n SAVE RETAILER\n========================= *\/\n\nfunction saveRetailerListing(){\n\nif(!currentUser){\n\ntoast(\"Please login first\");\n\nreturn;\n\n}\n\nlet t=traders.find(x=>x.id===currentUser.traderId);\n\nif(!t){\n\ntoast(\"Trader profile not found\");\n\nreturn;\n\n}\n\nt.name=document.getElementById(\"rName\").value.trim();\n\nt.owner=document.getElementById(\"rOwner\").value.trim();\n\nt.category=document.getElementById(\"rCategory\").value;\n\nt.city=document.getElementById(\"rCity\").value.trim();\n\nt.phone=document.getElementById(\"rPhone\").value.trim();\n\nt.whatsapp=document.getElementById(\"rWhatsApp\").value.trim();\n\nt.address=document.getElementById(\"rAddress\").value.trim();\n\nt.description=document.getElementById(\"rDescription\").value.trim();\n\nt.plan=document.getElementById(\"rPlan\").value;\n\nt.status=\"Pending\";\n\nt.verified=false;\n\nsaveDB();\n\ntoast(\"Business saved. Waiting for admin approval.\");\n\nloadRetailerDashboard();\n\nrenderFeatured();\n\n}\n\n\n\/* =========================\n CLEAR FORM\n========================= *\/\n\nfunction clearRetailerForm(){\n\n[\n\"rName\",\n\"rOwner\",\n\"rCity\",\n\"rPhone\",\n\"rWhatsApp\",\n\"rAddress\",\n\"rDescription\"\n].forEach(id=>{\n\ndocument.getElementById(id).value=\"\";\n\n});\n\n}\n\n\n\/* =========================\n ADMIN\n========================= *\/\n\nfunction renderAdmin(){\n\nlet total=traders.length;\n\nlet approved=traders.filter(\nt=>t.status===\"Approved\"\n).length;\n\nlet pending=traders.filter(\nt=>t.status===\"Pending\"\n).length;\n\nlet paid=traders.filter(\nt=>t.plan!==\"Free\"\n).length;\n\ndocument.getElementById(\"adminTotal\")\n.innerText=total;\n\ndocument.getElementById(\"adminApproved\")\n.innerText=approved;\n\ndocument.getElementById(\"adminPending\")\n.innerText=pending;\n\ndocument.getElementById(\"adminPaid\")\n.innerText=paid;\n\n\ndocument.getElementById(\"adminTable\")\n.innerHTML=traders.map(t=>`\n\n<tr>\n\n<td>\n<strong>${escapeHTML(t.name)}<\/strong>\n<\/td>\n\n<td>${escapeHTML(t.category)}<\/td>\n\n<td>${escapeHTML(t.city)}<\/td>\n\n<td>${escapeHTML(t.plan)}<\/td>\n\n<td>\n\n<span class=\"badge ${\nt.status===\"Approved\"\n?\"verified\":\nt.status===\"Pending\"\n?\"pending\":\"rejected\"\n}\">\n\n${t.status}\n\n<\/span>\n\n<\/td>\n\n<td>\n\n${t.status!==\"Approved\"?\n\n`<button class=\"btn green small\"\nonclick=\"approveTrader(${t.id})\">\nApprove\n<\/button>`:\"\"}\n\n<button class=\"btn red small\"\nonclick=\"deleteTrader(${t.id})\">\nDelete\n<\/button>\n\n<\/td>\n\n<\/tr>\n\n`).join(\"\");\n\n}\n\n\n\/* =========================\n APPROVE\n========================= *\/\n\nfunction approveTrader(id){\n\nlet t=traders.find(x=>x.id===id);\n\nif(!t)return;\n\nt.status=\"Approved\";\n\nt.verified=t.plan===\"Gold\";\n\nsaveDB();\n\nrenderAdmin();\n\nrenderFeatured();\n\ntoast(\"Trader approved\");\n\n}\n\n\n\/* =========================\n DELETE\n========================= *\/\n\nfunction deleteTrader(id){\n\nif(!confirm(\"Delete this trader?\"))return;\n\ntraders=traders.filter(t=>t.id!==id);\n\nsaveDB();\n\nrenderAdmin();\n\nrenderFeatured();\n\ntoast(\"Trader deleted\");\n\n}\n\n\n\/* =========================\n PLAN\n========================= *\/\n\nfunction selectPlan(plan){\n\nif(!currentUser){\n\nopenLogin();\n\ntoast(\"Login as retailer to select plan\");\n\nreturn;\n\n}\n\nshowPage(\"retailer\");\n\ndocument.getElementById(\"rPlan\").value=plan;\n\ntoast(plan+\" plan selected\");\n\n}\n\n\n\/* =========================\n LOGOUT\n========================= *\/\n\nfunction logout(){\n\ncurrentUser=null;\n\nshowPage(\"home\");\n\ntoast(\"Logged out\");\n\n}\n\n\n\/* =========================\n MODAL\n========================= *\/\n\nfunction closeModal(id){\n\ndocument.getElementById(id)\n.classList.remove(\"show\");\n\n}\n\n\n\/* =========================\n TOAST\n========================= *\/\n\nfunction toast(message){\n\nlet t=document.getElementById(\"toast\");\n\nt.innerText=message;\n\nt.style.display=\"block\";\n\nsetTimeout(()=>{\n\nt.style.display=\"none\";\n\n},2500);\n\n}\n\n\n\/* =========================\n SECURITY DISPLAY\n========================= *\/\n\nfunction escapeHTML(str){\n\nreturn String(str||\"\")\n.replace(\/[&<>\"']\/g,m=>({\n\n\"&\":\"&\",\n\"<\":\"<\",\n\">\":\">\",\n'\"':\""\",\n\"'\":\"'\"\n\n}[m]));\n\n}\n\n\n\/* =========================\n INIT\n========================= *\/\n\nrenderFeatured();\n\nrenderListings(traders);\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>TraderHub – Business Directory TraderHub Home Traders Categories Plans Login Find Trusted Traders Near You Local businesses, retailers and service providers \u2014 all in one directory. All CategoriesGeneral StoreFootwearCosmeticsBakeryElectronicsMobile ShopHardwareFurnitureMedical Store Search Featured Traders View All Trader Directory + Add Business All CategoriesGeneral StoreFootwearCosmeticsBakeryElectronicsMobile ShopHardwareFurnitureMedical Store Search Business Categories \ud83d\uded2 General Store Grocery and daily … <a title=\"trade reg\" class=\"read-more\" href=\"https:\/\/www.loanjankari.online\/?p=73\" aria-label=\"Read more about trade reg\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=73"}],"version-history":[{"count":1,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":74,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions\/74"}],"wp:attachment":[{"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":73,"date":"2026-09-01T17:12:33","date_gmt":"2026-09-01T17:12:33","guid":{"rendered":"https:\/\/www.loanjankari.online\/?p=73"},"modified":"2026-09-01T17:12:34","modified_gmt":"2026-09-01T17:12:34","slug":"trade-reg","status":"publish","type":"post","link":"https:\/\/www.loanjankari.online\/?p=73","title":{"rendered":"trade reg"},"content":{"rendered":"\n\n\n\n\n\nTraderHub – Business Directory<\/title>\n\n<style>\n*{box-sizing:border-box;margin:0;padding:0}\nbody{\n font-family:Arial,Helvetica,sans-serif;\n background:#f4f7fb;\n color:#182230;\n line-height:1.5\n}\nbutton,input,select,textarea{font:inherit}\nbutton{cursor:pointer}\na{text-decoration:none;color:inherit}\n\n:root{\n --primary:#155eef;\n --dark:#102a43;\n --green:#16a34a;\n --red:#dc2626;\n --yellow:#f59e0b;\n --border:#e2e8f0;\n --white:#fff;\n}\n\n.navbar{\n background:var(--dark);\n color:white;\n padding:15px 5%;\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:20px;\n position:sticky;\n top:0;\n z-index:1000\n}\n.logo{\n font-size:25px;\n font-weight:800\n}\n.logo span{color:#38bdf8}\n.navlinks{\n display:flex;\n gap:8px;\n flex-wrap:wrap\n}\n.navlinks button{\n background:transparent;\n color:#fff;\n border:0;\n padding:9px 12px;\n border-radius:6px\n}\n.navlinks button:hover{background:#ffffff18}\n\n.page{display:none}\n.page.active{display:block}\n\n.hero{\n background:linear-gradient(135deg,#0f4cbd,#1689e9);\n color:#fff;\n padding:70px 5%\n}\n.hero-inner{\n max-width:1200px;\n margin:auto\n}\n.hero h1{\n font-size:46px;\n margin-bottom:10px\n}\n.hero p{\n font-size:18px;\n margin-bottom:30px\n}\n.searchbox{\n background:white;\n padding:15px;\n border-radius:14px;\n display:grid;\n grid-template-columns:2fr 1fr 1fr auto;\n gap:10px;\n box-shadow:0 15px 35px #0003\n}\n\n.container{\n max-width:1200px;\n margin:auto;\n padding:35px 18px\n}\n.section-head{\n display:flex;\n justify-content:space-between;\n align-items:center;\n margin-bottom:20px;\n gap:10px\n}\n.section-head h2{font-size:28px}\n\n.grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:20px\n}\n\n.card{\n background:#fff;\n border:1px solid var(--border);\n border-radius:14px;\n padding:20px;\n box-shadow:0 5px 20px #0f172a0c\n}\n.card:hover{\n box-shadow:0 10px 30px #0f172a18;\n transform:translateY(-2px)\n}\n.card-top{\n display:flex;\n align-items:center;\n gap:12px;\n margin-bottom:12px\n}\n.avatar{\n width:62px;\n height:62px;\n border-radius:12px;\n background:#e8f1ff;\n color:var(--primary);\n display:grid;\n place-items:center;\n font-size:25px;\n font-weight:800;\n flex-shrink:0\n}\n.card h3{font-size:19px}\n.meta{\n color:#64748b;\n font-size:14px;\n margin:4px 0\n}\n.badge{\n display:inline-block;\n padding:4px 9px;\n border-radius:20px;\n font-size:12px;\n font-weight:bold\n}\n.verified{background:#dcfce7;color:#15803d}\n.pending{background:#fef3c7;color:#92400e}\n.rejected{background:#fee2e2;color:#991b1b}\n\n.tag{\n display:inline-block;\n background:#eff6ff;\n color:#155eef;\n padding:4px 8px;\n border-radius:20px;\n font-size:12px;\n margin:3px\n}\n\n.btn{\n border:0;\n background:var(--primary);\n color:#fff;\n padding:11px 17px;\n border-radius:8px;\n font-weight:700\n}\n.btn:hover{opacity:.9}\n.btn.green{background:var(--green)}\n.btn.red{background:var(--red)}\n.btn.dark{background:var(--dark)}\n.btn.yellow{background:var(--yellow)}\n.btn.light{\n background:#eef2f7;\n color:#182230\n}\n.btn.small{\n padding:7px 10px;\n font-size:12px\n}\n\ninput,select,textarea{\n width:100%;\n border:1px solid #cbd5e1;\n padding:12px;\n border-radius:8px;\n outline:none;\n background:#fff\n}\ninput:focus,select:focus,textarea:focus{\n border-color:var(--primary)\n}\ntextarea{min-height:100px;resize:vertical}\n\n.form-card{\n max-width:850px;\n margin:auto;\n background:#fff;\n padding:25px;\n border-radius:14px;\n border:1px solid var(--border)\n}\n.form-grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:15px\n}\n.form-group label{\n display:block;\n font-size:13px;\n font-weight:bold;\n margin-bottom:6px\n}\n.full{grid-column:1\/-1}\n\n.stats{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:15px;\n margin-bottom:25px\n}\n.stat{\n background:#fff;\n border:1px solid var(--border);\n border-radius:12px;\n padding:20px\n}\n.stat .number{\n font-size:30px;\n font-weight:800;\n color:var(--primary)\n}\n.stat small{color:#64748b}\n\n.table-wrap{\n background:#fff;\n border:1px solid var(--border);\n border-radius:12px;\n overflow:auto\n}\ntable{\n width:100%;\n border-collapse:collapse;\n min-width:750px\n}\nth,td{\n padding:13px;\n border-bottom:1px solid var(--border);\n text-align:left\n}\nth{background:#f8fafc}\n\n.modal{\n display:none;\n position:fixed;\n inset:0;\n background:#0008;\n z-index:3000;\n align-items:center;\n justify-content:center;\n padding:20px\n}\n.modal.show{display:flex}\n.modal-box{\n width:100%;\n max-width:600px;\n max-height:90vh;\n overflow:auto;\n background:#fff;\n border-radius:15px;\n padding:25px;\n position:relative\n}\n.close{\n position:absolute;\n right:15px;\n top:10px;\n font-size:25px;\n border:0;\n background:none\n}\n\n.plan-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:20px\n}\n.plan{\n background:#fff;\n padding:25px;\n border-radius:15px;\n border:2px solid var(--border);\n text-align:center\n}\n.plan.featured{\n border-color:var(--primary)\n}\n.price{\n font-size:32px;\n font-weight:800;\n margin:10px\n}\n.plan li{\n list-style:none;\n margin:8px\n}\n\n.empty{\n background:#fff;\n padding:40px;\n text-align:center;\n border-radius:12px;\n color:#64748b\n}\n\nfooter{\n margin-top:40px;\n background:var(--dark);\n color:#cbd5e1;\n padding:35px 5%;\n text-align:center\n}\n\n.toast{\n position:fixed;\n right:20px;\n bottom:20px;\n background:#172033;\n color:white;\n padding:13px 18px;\n border-radius:8px;\n display:none;\n z-index:5000\n}\n\n@media(max-width:900px){\n .grid,.plan-grid{grid-template-columns:1fr 1fr}\n .searchbox{grid-template-columns:1fr 1fr}\n .stats{grid-template-columns:1fr 1fr}\n .hero h1{font-size:35px}\n}\n\n@media(max-width:600px){\n .navbar{align-items:flex-start;flex-direction:column}\n .navlinks{width:100%}\n .navlinks button{padding:7px}\n .grid,.plan-grid,.form-grid{grid-template-columns:1fr}\n .searchbox{grid-template-columns:1fr}\n .stats{grid-template-columns:1fr}\n .hero{padding:45px 5%}\n .hero h1{font-size:30px}\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<header class=\"navbar\">\n<div class=\"logo\">Trader<span>Hub<\/span><\/div>\n\n<div class=\"navlinks\">\n<button onclick=\"showPage('home')\">Home<\/button>\n<button onclick=\"showPage('directory')\">Traders<\/button>\n<button onclick=\"showPage('categories')\">Categories<\/button>\n<button onclick=\"showPage('plans')\">Plans<\/button>\n<button onclick=\"openLogin()\">Login<\/button>\n<\/div>\n<\/header>\n\n\n\n<section id=\"home\" class=\"page active\">\n\n<div class=\"hero\">\n<div class=\"hero-inner\">\n\n<h1>Find Trusted Traders Near You<\/h1>\n\n<p>\nLocal businesses, retailers and service providers \u2014 all in one directory.\n<\/p>\n\n<div class=\"searchbox\">\n\n<input id=\"homeSearch\"\nplaceholder=\"Business name or keyword\">\n\n<input id=\"homeCity\"\nplaceholder=\"City\">\n\n<select id=\"homeCategory\">\n<option value=\"\">All Categories<\/option>\n<option>General Store<\/option>\n<option>Footwear<\/option>\n<option>Cosmetics<\/option>\n<option>Bakery<\/option>\n<option>Electronics<\/option>\n<option>Mobile Shop<\/option>\n<option>Hardware<\/option>\n<option>Furniture<\/option>\n<option>Medical Store<\/option>\n<\/select>\n\n<button class=\"btn\" onclick=\"homeSearch()\">Search<\/button>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n<div class=\"container\">\n\n<div class=\"section-head\">\n<h2>Featured Traders<\/h2>\n<button class=\"btn\" onclick=\"showPage('directory')\">\nView All\n<\/button>\n<\/div>\n\n<div id=\"featured\" class=\"grid\"><\/div>\n\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"directory\" class=\"page\">\n\n<div class=\"container\">\n\n<div class=\"section-head\">\n<h2>Trader Directory<\/h2>\n\n<button class=\"btn green\" onclick=\"openRetailerRegister()\">\n+ Add Business\n<\/button>\n<\/div>\n\n<div class=\"searchbox\" style=\"margin-bottom:25px\">\n\n<input id=\"directorySearch\"\nplaceholder=\"Search business\">\n\n<input id=\"directoryCity\"\nplaceholder=\"City\">\n\n<select id=\"directoryCategory\">\n<option value=\"\">All Categories<\/option>\n<option>General Store<\/option>\n<option>Footwear<\/option>\n<option>Cosmetics<\/option>\n<option>Bakery<\/option>\n<option>Electronics<\/option>\n<option>Mobile Shop<\/option>\n<option>Hardware<\/option>\n<option>Furniture<\/option>\n<option>Medical Store<\/option>\n<\/select>\n\n<button class=\"btn\" onclick=\"directorySearch()\">\nSearch\n<\/button>\n\n<\/div>\n\n<div id=\"listing\" class=\"grid\"><\/div>\n\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"categories\" class=\"page\">\n\n<div class=\"container\">\n\n<h2 style=\"margin-bottom:25px\">Business Categories<\/h2>\n\n<div class=\"grid\">\n\n<div class=\"card\">\n<h3>\ud83d\uded2 General Store<\/h3>\n<p class=\"meta\">Grocery and daily needs<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('General Store')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83d\udc5f Footwear<\/h3>\n<p class=\"meta\">Shoes, slippers and sandals<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Footwear')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83d\udc84 Cosmetics<\/h3>\n<p class=\"meta\">Beauty and cosmetics shops<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Cosmetics')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83c\udf5e Bakery<\/h3>\n<p class=\"meta\">Bakery and food businesses<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Bakery')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83d\udcf1 Mobile Shop<\/h3>\n<p class=\"meta\">Mobile and accessories<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Mobile Shop')\">\nBrowse\n<\/button>\n<\/div>\n\n<div class=\"card\">\n<h3>\ud83d\udd27 Hardware<\/h3>\n<p class=\"meta\">Hardware and tools<\/p>\n<br>\n<button class=\"btn small\" onclick=\"categorySearch('Hardware')\">\nBrowse\n<\/button>\n<\/div>\n\n<\/div>\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"plans\" class=\"page\">\n\n<div class=\"container\">\n\n<h2 style=\"text-align:center;margin-bottom:30px\">\nRetailer Subscription Plans\n<\/h2>\n\n<div class=\"plan-grid\">\n\n<div class=\"plan\">\n\n<h3>FREE<\/h3>\n\n<div class=\"price\">\u20b90<\/div>\n\n<ul>\n<li>\u2713 Basic Listing<\/li>\n<li>\u2713 Business Name<\/li>\n<li>\u2713 Category<\/li>\n<li>\u2713 Phone Number<\/li>\n<li>\u2715 Featured Listing<\/li>\n<\/ul>\n\n<button class=\"btn\" onclick=\"selectPlan('Free')\">\nStart Free\n<\/button>\n\n<\/div>\n\n\n<div class=\"plan featured\">\n\n<h3>SILVER<\/h3>\n\n<div class=\"price\">\u20b9499<\/div>\n\n<ul>\n<li>\u2713 Everything in Free<\/li>\n<li>\u2713 WhatsApp Button<\/li>\n<li>\u2713 Priority Listing<\/li>\n<li>\u2713 Business Description<\/li>\n<li>\u2713 1 Year Listing<\/li>\n<\/ul>\n\n<button class=\"btn\" onclick=\"selectPlan('Silver')\">\nChoose Silver\n<\/button>\n\n<\/div>\n\n\n<div class=\"plan\">\n\n<h3>GOLD<\/h3>\n\n<div class=\"price\">\u20b9999<\/div>\n\n<ul>\n<li>\u2713 Everything in Silver<\/li>\n<li>\u2713 Featured Listing<\/li>\n<li>\u2713 Verified Badge<\/li>\n<li>\u2713 Top Search Position<\/li>\n<li>\u2713 Premium Profile<\/li>\n<\/ul>\n\n<button class=\"btn green\" onclick=\"selectPlan('Gold')\">\nChoose Gold\n<\/button>\n\n<\/div>\n\n<\/div>\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"retailer\" class=\"page\">\n\n<div class=\"container\">\n\n<div class=\"section-head\">\n<h2>Retailer Dashboard<\/h2>\n\n<button class=\"btn red\" onclick=\"logout()\">\nLogout\n<\/button>\n<\/div>\n\n<div class=\"stats\">\n\n<div class=\"stat\">\n<div class=\"number\" id=\"myListings\">0<\/div>\n<small>My Listings<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"myViews\">0<\/div>\n<small>Profile Views<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"myEnquiries\">0<\/div>\n<small>Enquiries<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"myPlan\">Free<\/div>\n<small>Current Plan<\/small>\n<\/div>\n\n<\/div>\n\n\n<div class=\"form-card\">\n\n<h3>Add \/ Edit Business<\/h3>\n\n<br>\n\n<div class=\"form-grid\">\n\n<div class=\"form-group\">\n<label>Business Name *<\/label>\n<input id=\"rName\">\n<\/div>\n\n<div class=\"form-group\">\n<label>Category *<\/label>\n\n<select id=\"rCategory\">\n<option>General Store<\/option>\n<option>Footwear<\/option>\n<option>Cosmetics<\/option>\n<option>Bakery<\/option>\n<option>Electronics<\/option>\n<option>Mobile Shop<\/option>\n<option>Hardware<\/option>\n<option>Furniture<\/option>\n<option>Medical Store<\/option>\n<\/select>\n\n<\/div>\n\n<div class=\"form-group\">\n<label>Owner Name<\/label>\n<input id=\"rOwner\">\n<\/div>\n\n<div class=\"form-group\">\n<label>City *<\/label>\n<input id=\"rCity\">\n<\/div>\n\n<div class=\"form-group\">\n<label>Phone *<\/label>\n<input id=\"rPhone\">\n<\/div>\n\n<div class=\"form-group\">\n<label>WhatsApp<\/label>\n<input id=\"rWhatsApp\">\n<\/div>\n\n<div class=\"form-group full\">\n<label>Address<\/label>\n<input id=\"rAddress\">\n<\/div>\n\n<div class=\"form-group full\">\n<label>Business Description<\/label>\n<textarea id=\"rDescription\"><\/textarea>\n<\/div>\n\n<div class=\"form-group\">\n<label>Subscription<\/label>\n\n<select id=\"rPlan\">\n<option>Free<\/option>\n<option>Silver<\/option>\n<option>Gold<\/option>\n<\/select>\n\n<\/div>\n\n<\/div>\n\n<br>\n\n<button class=\"btn green\" onclick=\"saveRetailerListing()\">\nSave Business\n<\/button>\n\n<button class=\"btn light\" onclick=\"clearRetailerForm()\">\nClear\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n\n<section id=\"admin\" class=\"page\">\n\n<div class=\"container\">\n\n<div class=\"section-head\">\n\n<h2>Admin Dashboard<\/h2>\n\n<button class=\"btn red\" onclick=\"logout()\">\nLogout\n<\/button>\n\n<\/div>\n\n\n<div class=\"stats\">\n\n<div class=\"stat\">\n<div class=\"number\" id=\"adminTotal\">0<\/div>\n<small>Total Traders<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"adminApproved\">0<\/div>\n<small>Approved<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"adminPending\">0<\/div>\n<small>Pending<\/small>\n<\/div>\n\n<div class=\"stat\">\n<div class=\"number\" id=\"adminPaid\">0<\/div>\n<small>Paid Plans<\/small>\n<\/div>\n\n<\/div>\n\n\n<div class=\"table-wrap\">\n\n<table>\n\n<thead>\n\n<tr>\n<th>Business<\/th>\n<th>Category<\/th>\n<th>City<\/th>\n<th>Plan<\/th>\n<th>Status<\/th>\n<th>Actions<\/th>\n<\/tr>\n\n<\/thead>\n\n<tbody id=\"adminTable\"><\/tbody>\n\n<\/table>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n\n<div id=\"loginModal\" class=\"modal\">\n\n<div class=\"modal-box\">\n\n<button class=\"close\" onclick=\"closeModal('loginModal')\">\n\u00d7\n<\/button>\n\n<h2>Login<\/h2>\n\n<br>\n\n<div class=\"form-group\">\n<label>Username<\/label>\n<input id=\"loginUser\">\n<\/div>\n\n<br>\n\n<div class=\"form-group\">\n<label>Password<\/label>\n<input id=\"loginPassword\" type=\"password\">\n<\/div>\n\n<br>\n\n<button class=\"btn\" onclick=\"login()\">\nLogin\n<\/button>\n\n<button class=\"btn light\" onclick=\"openRegister()\">\nRetailer Register\n<\/button>\n\n<p style=\"margin-top:15px;color:#64748b;font-size:13px\">\nAdmin: admin \/ admin123<br>\nRetailer: retailer \/ retailer123\n<\/p>\n\n<\/div>\n\n<\/div>\n\n\n\n<div id=\"registerModal\" class=\"modal\">\n\n<div class=\"modal-box\">\n\n<button class=\"close\" onclick=\"closeModal('registerModal')\">\n\u00d7\n<\/button>\n\n<h2>Retailer Registration<\/h2>\n\n<br>\n\n<div class=\"form-group\">\n<label>Username<\/label>\n<input id=\"regUser\">\n<\/div>\n\n<br>\n\n<div class=\"form-group\">\n<label>Password<\/label>\n<input id=\"regPassword\" type=\"password\">\n<\/div>\n\n<br>\n\n<div class=\"form-group\">\n<label>Business Name<\/label>\n<input id=\"regBusiness\">\n<\/div>\n\n<br>\n\n<div class=\"form-group\">\n<label>Phone<\/label>\n<input id=\"regPhone\">\n<\/div>\n\n<br>\n\n<button class=\"btn green\" onclick=\"registerRetailer()\">\nCreate Account\n<\/button>\n\n<\/div>\n\n<\/div>\n\n\n\n<div id=\"profileModal\" class=\"modal\">\n\n<div class=\"modal-box\">\n\n<button class=\"close\" onclick=\"closeModal('profileModal')\">\n\u00d7\n<\/button>\n\n<div id=\"profileContent\"><\/div>\n\n<\/div>\n\n<\/div>\n\n\n<div id=\"toast\" class=\"toast\"><\/div>\n\n\n<footer>\n\n<strong>TraderHub<\/strong>\n\n<br>\n\nProfessional Trader & Retailer Directory\n\n<br><br>\n\n\u00a9 2026 TraderHub. All Rights Reserved.\n\n<\/footer>\n\n\n<script>\n\n\/* =========================\n DATABASE\n========================= *\/\n\nconst DB_KEY=\"TRADERHUB_DATABASE\";\nconst USER_KEY=\"TRADERHUB_USERS\";\n\nlet traders=JSON.parse(localStorage.getItem(DB_KEY));\n\nlet users=JSON.parse(localStorage.getItem(USER_KEY));\n\nif(!traders){\n\ntraders=[\n\n{\n id:1,\n owner:\"Rajesh Sharma\",\n name:\"Sharma General Store\",\n category:\"General Store\",\n city:\"Kannauj\",\n phone:\"9876543210\",\n whatsapp:\"9876543210\",\n address:\"Main Market, Kannauj\",\n description:\"Grocery and daily-use products.\",\n plan:\"Gold\",\n status:\"Approved\",\n verified:true,\n views:124,\n enquiries:12\n},\n\n{\n id:2,\n owner:\"Amit Gupta\",\n name:\"Gupta Footwear\",\n category:\"Footwear\",\n city:\"Tirwa\",\n phone:\"9876501234\",\n whatsapp:\"9876501234\",\n address:\"Station Road, Tirwa\",\n description:\"All types of footwear available.\",\n plan:\"Silver\",\n status:\"Approved\",\n verified:true,\n views:87,\n enquiries:7\n},\n\n{\n id:3,\n owner:\"Pooja Verma\",\n name:\"New Style Cosmetics\",\n category:\"Cosmetics\",\n city:\"Haseran\",\n phone:\"9876512345\",\n whatsapp:\"9876512345\",\n address:\"Main Bazaar, Haseran\",\n description:\"Cosmetics, bangles and beauty products.\",\n plan:\"Free\",\n status:\"Approved\",\n verified:false,\n views:41,\n enquiries:3\n}\n\n];\n\nsaveDB();\n\n}\n\n\nif(!users){\n\nusers=[\n\n{\n username:\"admin\",\n password:\"admin123\",\n role:\"admin\"\n},\n\n{\n username:\"retailer\",\n password:\"retailer123\",\n role:\"retailer\",\n traderId:1\n}\n\n];\n\nsaveUsers();\n\n}\n\n\nlet currentUser=null;\n\n\n\/* =========================\n STORAGE\n========================= *\/\n\nfunction saveDB(){\n\nlocalStorage.setItem(DB_KEY,JSON.stringify(traders));\n\n}\n\nfunction saveUsers(){\n\nlocalStorage.setItem(USER_KEY,JSON.stringify(users));\n\n}\n\n\n\/* =========================\n PAGE NAVIGATION\n========================= *\/\n\nfunction showPage(page){\n\ndocument.querySelectorAll(\".page\")\n.forEach(p=>p.classList.remove(\"active\"));\n\ndocument.getElementById(page)\n.classList.add(\"active\");\n\nwindow.scrollTo(0,0);\n\nif(page===\"directory\") renderListings(traders);\n\nif(page===\"retailer\") loadRetailerDashboard();\n\nif(page===\"admin\") renderAdmin();\n\n}\n\n\n\/* =========================\n TRADER CARD\n========================= *\/\n\nfunction traderCard(t){\n\nlet badge=\"\";\n\nif(t.status===\"Approved\" && t.verified){\n\nbadge='<span class=\"badge verified\">\u2713 VERIFIED<\/span>';\n\n}else if(t.status===\"Pending\"){\n\nbadge='<span class=\"badge pending\">PENDING<\/span>';\n\n}else if(t.status===\"Rejected\"){\n\nbadge='<span class=\"badge rejected\">REJECTED<\/span>';\n\n}\n\nreturn `\n\n<div class=\"card\">\n\n<div class=\"card-top\">\n\n<div class=\"avatar\">\n${escapeHTML(t.name.charAt(0))}\n<\/div>\n\n<div>\n\n<h3>${escapeHTML(t.name)}<\/h3>\n\n${badge}\n\n<\/div>\n\n<\/div>\n\n<div class=\"meta\">\n\ud83d\udcc2 ${escapeHTML(t.category)}\n<\/div>\n\n<div class=\"meta\">\n\ud83d\udccd ${escapeHTML(t.city)}\n<\/div>\n\n<div class=\"meta\">\n\ud83d\udcde ${escapeHTML(t.phone)}\n<\/div>\n\n<p style=\"margin:10px 0;color:#475569\">\n${escapeHTML(t.description)}\n<\/p>\n\n<span class=\"tag\">${escapeHTML(t.plan)}<\/span>\n\n<br><br>\n\n<button class=\"btn small\"\nonclick=\"viewProfile(${t.id})\">\nView Profile\n<\/button>\n\n<\/div>\n\n`;\n\n}\n\n\n\/* =========================\n RENDER\n========================= *\/\n\nfunction renderListings(list){\n\nconst box=document.getElementById(\"listing\");\n\nif(!list.length){\n\nbox.innerHTML=\n'<div class=\"empty\">No trader found.<\/div>';\n\nreturn;\n\n}\n\nbox.innerHTML=list\n.filter(t=>t.status===\"Approved\")\n.map(traderCard)\n.join(\"\");\n\n}\n\n\nfunction renderFeatured(){\n\nlet list=traders\n.filter(t=>t.status===\"Approved\")\n.sort((a,b)=>{\n\nif(a.plan===\"Gold\") return -1;\n\nif(b.plan===\"Gold\") return 1;\n\nreturn b.views-a.views;\n\n})\n.slice(0,6);\n\ndocument.getElementById(\"featured\")\n.innerHTML=list.map(traderCard).join(\"\");\n\n}\n\n\n\/* =========================\n SEARCH\n========================= *\/\n\nfunction homeSearch(){\n\nlet q=document\n.getElementById(\"homeSearch\")\n.value.toLowerCase();\n\nlet city=document\n.getElementById(\"homeCity\")\n.value.toLowerCase();\n\nlet cat=document\n.getElementById(\"homeCategory\")\n.value;\n\nlet result=filterTraders(q,city,cat);\n\nshowPage(\"directory\");\n\nrenderListings(result);\n\n}\n\n\nfunction directorySearch(){\n\nlet q=document\n.getElementById(\"directorySearch\")\n.value.toLowerCase();\n\nlet city=document\n.getElementById(\"directoryCity\")\n.value.toLowerCase();\n\nlet cat=document\n.getElementById(\"directoryCategory\")\n.value;\n\nrenderListings(filterTraders(q,city,cat));\n\n}\n\n\nfunction filterTraders(q,city,cat){\n\nreturn traders.filter(t=>{\n\nreturn t.status===\"Approved\" &&\n\n(!q ||\nt.name.toLowerCase().includes(q) ||\nt.category.toLowerCase().includes(q) ||\nt.description.toLowerCase().includes(q))\n\n&&\n\n(!city ||\nt.city.toLowerCase().includes(city))\n\n&&\n\n(!cat || t.category===cat);\n\n});\n\n}\n\n\nfunction categorySearch(category){\n\nshowPage(\"directory\");\n\ndocument.getElementById(\"directoryCategory\")\n.value=category;\n\ndirectorySearch();\n\n}\n\n\n\/* =========================\n PROFILE\n========================= *\/\n\nfunction viewProfile(id){\n\nlet t=traders.find(x=>x.id===id);\n\nif(!t)return;\n\nt.views++;\n\nsaveDB();\n\ndocument.getElementById(\"profileContent\").innerHTML=`\n\n<div class=\"card-top\">\n\n<div class=\"avatar\">\n${escapeHTML(t.name.charAt(0))}\n<\/div>\n\n<div>\n\n<h2>${escapeHTML(t.name)}<\/h2>\n\n${t.verified?\n'<span class=\"badge verified\">\u2713 Verified Business<\/span>':\n''}\n\n<\/div>\n\n<\/div>\n\n<hr style=\"margin:15px 0;border:0;border-top:1px solid #eee\">\n\n<p><b>Owner:<\/b> ${escapeHTML(t.owner)}<\/p>\n\n<p><b>Category:<\/b> ${escapeHTML(t.category)}<\/p>\n\n<p><b>City:<\/b> ${escapeHTML(t.city)}<\/p>\n\n<p><b>Address:<\/b> ${escapeHTML(t.address)}<\/p>\n\n<p><b>Phone:<\/b> ${escapeHTML(t.phone)}<\/p>\n\n<p style=\"margin:15px 0\">\n${escapeHTML(t.description)}\n<\/p>\n\n<div>\n\n<a class=\"btn\"\nhref=\"tel:${escapeHTML(t.phone)}\">\n\ud83d\udcde Call\n<\/a>\n\n<a class=\"btn green\"\ntarget=\"_blank\"\nhref=\"https:\/\/wa.me\/91${escapeHTML(t.whatsapp)}\">\n\ud83d\udcac WhatsApp\n<\/a>\n\n<\/div>\n\n`;\n\ndocument.getElementById(\"profileModal\")\n.classList.add(\"show\");\n\nrenderFeatured();\n\n}\n\n\n\/* =========================\n LOGIN\n========================= *\/\n\nfunction openLogin(){\n\ndocument.getElementById(\"loginModal\")\n.classList.add(\"show\");\n\n}\n\n\nfunction openRegister(){\n\ncloseModal(\"loginModal\");\n\ndocument.getElementById(\"registerModal\")\n.classList.add(\"show\");\n\n}\n\n\nfunction openRetailerRegister(){\n\nopenRegister();\n\n}\n\n\nfunction login(){\n\nlet username=document\n.getElementById(\"loginUser\")\n.value.trim();\n\nlet password=document\n.getElementById(\"loginPassword\")\n.value;\n\nlet user=users.find(u=>\nu.username===username &&\nu.password===password\n);\n\nif(!user){\n\ntoast(\"Invalid username or password\");\n\nreturn;\n\n}\n\ncurrentUser=user;\n\ncloseModal(\"loginModal\");\n\nif(user.role===\"admin\"){\n\nshowPage(\"admin\");\n\n}else{\n\nshowPage(\"retailer\");\n\n}\n\ntoast(\"Login successful\");\n\n}\n\n\n\/* =========================\n REGISTER\n========================= *\/\n\nfunction registerRetailer(){\n\nlet username=document\n.getElementById(\"regUser\").value.trim();\n\nlet password=document\n.getElementById(\"regPassword\").value;\n\nlet business=document\n.getElementById(\"regBusiness\").value.trim();\n\nlet phone=document\n.getElementById(\"regPhone\").value.trim();\n\nif(!username || !password || !business || !phone){\n\ntoast(\"Please fill all required fields\");\n\nreturn;\n\n}\n\nif(users.some(u=>u.username===username)){\n\ntoast(\"Username already exists\");\n\nreturn;\n\n}\n\nlet trader={\n\nid:Date.now(),\n\nowner:username,\n\nname:business,\n\ncategory:\"General Store\",\n\ncity:\"\",\n\nphone:phone,\n\nwhatsapp:phone,\n\naddress:\"\",\n\ndescription:\"\",\n\nplan:\"Free\",\n\nstatus:\"Pending\",\n\nverified:false,\n\nviews:0,\n\nenquiries:0\n\n};\n\ntraders.push(trader);\n\nusers.push({\n\nusername:username,\n\npassword:password,\n\nrole:\"retailer\",\n\ntraderId:trader.id\n\n});\n\nsaveDB();\n\nsaveUsers();\n\ncurrentUser=users[users.length-1];\n\ncloseModal(\"registerModal\");\n\nshowPage(\"retailer\");\n\ntoast(\"Registration successful. Listing pending approval.\");\n\n}\n\n\n\/* =========================\n RETAILER DASHBOARD\n========================= *\/\n\nfunction loadRetailerDashboard(){\n\nif(!currentUser)return;\n\nlet t=traders.find(x=>x.id===currentUser.traderId);\n\nif(!t){\n\nreturn;\n\n}\n\ndocument.getElementById(\"myListings\")\n.innerText=\"1\";\n\ndocument.getElementById(\"myViews\")\n.innerText=t.views;\n\ndocument.getElementById(\"myEnquiries\")\n.innerText=t.enquiries;\n\ndocument.getElementById(\"myPlan\")\n.innerText=t.plan;\n\ndocument.getElementById(\"rName\").value=t.name;\n\ndocument.getElementById(\"rOwner\").value=t.owner;\n\ndocument.getElementById(\"rCategory\").value=t.category;\n\ndocument.getElementById(\"rCity\").value=t.city;\n\ndocument.getElementById(\"rPhone\").value=t.phone;\n\ndocument.getElementById(\"rWhatsApp\").value=t.whatsapp;\n\ndocument.getElementById(\"rAddress\").value=t.address;\n\ndocument.getElementById(\"rDescription\").value=t.description;\n\ndocument.getElementById(\"rPlan\").value=t.plan;\n\n}\n\n\n\/* =========================\n SAVE RETAILER\n========================= *\/\n\nfunction saveRetailerListing(){\n\nif(!currentUser){\n\ntoast(\"Please login first\");\n\nreturn;\n\n}\n\nlet t=traders.find(x=>x.id===currentUser.traderId);\n\nif(!t){\n\ntoast(\"Trader profile not found\");\n\nreturn;\n\n}\n\nt.name=document.getElementById(\"rName\").value.trim();\n\nt.owner=document.getElementById(\"rOwner\").value.trim();\n\nt.category=document.getElementById(\"rCategory\").value;\n\nt.city=document.getElementById(\"rCity\").value.trim();\n\nt.phone=document.getElementById(\"rPhone\").value.trim();\n\nt.whatsapp=document.getElementById(\"rWhatsApp\").value.trim();\n\nt.address=document.getElementById(\"rAddress\").value.trim();\n\nt.description=document.getElementById(\"rDescription\").value.trim();\n\nt.plan=document.getElementById(\"rPlan\").value;\n\nt.status=\"Pending\";\n\nt.verified=false;\n\nsaveDB();\n\ntoast(\"Business saved. Waiting for admin approval.\");\n\nloadRetailerDashboard();\n\nrenderFeatured();\n\n}\n\n\n\/* =========================\n CLEAR FORM\n========================= *\/\n\nfunction clearRetailerForm(){\n\n[\n\"rName\",\n\"rOwner\",\n\"rCity\",\n\"rPhone\",\n\"rWhatsApp\",\n\"rAddress\",\n\"rDescription\"\n].forEach(id=>{\n\ndocument.getElementById(id).value=\"\";\n\n});\n\n}\n\n\n\/* =========================\n ADMIN\n========================= *\/\n\nfunction renderAdmin(){\n\nlet total=traders.length;\n\nlet approved=traders.filter(\nt=>t.status===\"Approved\"\n).length;\n\nlet pending=traders.filter(\nt=>t.status===\"Pending\"\n).length;\n\nlet paid=traders.filter(\nt=>t.plan!==\"Free\"\n).length;\n\ndocument.getElementById(\"adminTotal\")\n.innerText=total;\n\ndocument.getElementById(\"adminApproved\")\n.innerText=approved;\n\ndocument.getElementById(\"adminPending\")\n.innerText=pending;\n\ndocument.getElementById(\"adminPaid\")\n.innerText=paid;\n\n\ndocument.getElementById(\"adminTable\")\n.innerHTML=traders.map(t=>`\n\n<tr>\n\n<td>\n<strong>${escapeHTML(t.name)}<\/strong>\n<\/td>\n\n<td>${escapeHTML(t.category)}<\/td>\n\n<td>${escapeHTML(t.city)}<\/td>\n\n<td>${escapeHTML(t.plan)}<\/td>\n\n<td>\n\n<span class=\"badge ${\nt.status===\"Approved\"\n?\"verified\":\nt.status===\"Pending\"\n?\"pending\":\"rejected\"\n}\">\n\n${t.status}\n\n<\/span>\n\n<\/td>\n\n<td>\n\n${t.status!==\"Approved\"?\n\n`<button class=\"btn green small\"\nonclick=\"approveTrader(${t.id})\">\nApprove\n<\/button>`:\"\"}\n\n<button class=\"btn red small\"\nonclick=\"deleteTrader(${t.id})\">\nDelete\n<\/button>\n\n<\/td>\n\n<\/tr>\n\n`).join(\"\");\n\n}\n\n\n\/* =========================\n APPROVE\n========================= *\/\n\nfunction approveTrader(id){\n\nlet t=traders.find(x=>x.id===id);\n\nif(!t)return;\n\nt.status=\"Approved\";\n\nt.verified=t.plan===\"Gold\";\n\nsaveDB();\n\nrenderAdmin();\n\nrenderFeatured();\n\ntoast(\"Trader approved\");\n\n}\n\n\n\/* =========================\n DELETE\n========================= *\/\n\nfunction deleteTrader(id){\n\nif(!confirm(\"Delete this trader?\"))return;\n\ntraders=traders.filter(t=>t.id!==id);\n\nsaveDB();\n\nrenderAdmin();\n\nrenderFeatured();\n\ntoast(\"Trader deleted\");\n\n}\n\n\n\/* =========================\n PLAN\n========================= *\/\n\nfunction selectPlan(plan){\n\nif(!currentUser){\n\nopenLogin();\n\ntoast(\"Login as retailer to select plan\");\n\nreturn;\n\n}\n\nshowPage(\"retailer\");\n\ndocument.getElementById(\"rPlan\").value=plan;\n\ntoast(plan+\" plan selected\");\n\n}\n\n\n\/* =========================\n LOGOUT\n========================= *\/\n\nfunction logout(){\n\ncurrentUser=null;\n\nshowPage(\"home\");\n\ntoast(\"Logged out\");\n\n}\n\n\n\/* =========================\n MODAL\n========================= *\/\n\nfunction closeModal(id){\n\ndocument.getElementById(id)\n.classList.remove(\"show\");\n\n}\n\n\n\/* =========================\n TOAST\n========================= *\/\n\nfunction toast(message){\n\nlet t=document.getElementById(\"toast\");\n\nt.innerText=message;\n\nt.style.display=\"block\";\n\nsetTimeout(()=>{\n\nt.style.display=\"none\";\n\n},2500);\n\n}\n\n\n\/* =========================\n SECURITY DISPLAY\n========================= *\/\n\nfunction escapeHTML(str){\n\nreturn String(str||\"\")\n.replace(\/[&<>\"']\/g,m=>({\n\n\"&\":\"&\",\n\"<\":\"<\",\n\">\":\">\",\n'\"':\""\",\n\"'\":\"'\"\n\n}[m]));\n\n}\n\n\n\/* =========================\n INIT\n========================= *\/\n\nrenderFeatured();\n\nrenderListings(traders);\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>TraderHub – Business Directory TraderHub Home Traders Categories Plans Login Find Trusted Traders Near You Local businesses, retailers and service providers \u2014 all in one directory. All CategoriesGeneral StoreFootwearCosmeticsBakeryElectronicsMobile ShopHardwareFurnitureMedical Store Search Featured Traders View All Trader Directory + Add Business All CategoriesGeneral StoreFootwearCosmeticsBakeryElectronicsMobile ShopHardwareFurnitureMedical Store Search Business Categories \ud83d\uded2 General Store Grocery and daily … <a title=\"trade reg\" class=\"read-more\" href=\"https:\/\/www.loanjankari.online\/?p=73\" aria-label=\"Read more about trade reg\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=73"}],"version-history":[{"count":1,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":74,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions\/74"}],"wp:attachment":[{"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loanjankari.online\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}