<!doctype html>

<head>

<title>ReLit — Refurbished Phones Store</title>

<style>

/* Colors matching logo */

:root{

--bg:#f5f7fb;

--card:#fff;

--muted:#6b7280;

--accent:#1e40af; /* Adjusted to match logo blue */

--max:1100px;

}

*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}

body{margin:0;background:var(--bg);color:#071033}

.wrap{max-width:var(--max);margin:28px auto;padding:20px}

header{display:flex;align-items:center;gap:16px}

.brand img{height:40px;object-fit:contain}

.search{margin-left:20px;flex:1}

.search input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #d6dce6}

.top-actions{display:flex;gap:8px}

.hero{display:flex;align-items:center;justify-content:space-between;margin-top:18px}

.hero .info{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,0.04);flex:1;margin-right:12px}

.hero .actions{width:260px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}

.card{background:var(--card);border-radius:10px;padding:12px;box-shadow:0 6px 14px rgba(11,18,32,0.04);border:1px solid rgba(11,18,32,0.02)}

.card img{width:100%;height:180px;object-fit:contain;border-radius:6px;background:#f3f6fb}

.title{font-weight:700;margin-top:8px}

.price{font-weight:800;margin-top:6px}

.meta{color:var(--muted);font-size:13px;margin-top:6px}

.card .actions{display:flex;gap:8px;margin-top:10px}

.btn{background:var(--accent);color:white;padding:10px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:600}

.ghost{background:transparent;border:1px solid rgba(11,18,32,0.06);padding:10px 12px;border-radius:8px;cursor:pointer}

.modalWrap{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(7,16,33,0.45);padding:20px;z-index:999}

.modal{width:980px;max-width:calc(100% - 40px);background:var(--card);border-radius:10px;padding:18px}

.two{display:grid;grid-template-columns:360px 1fr;gap:18px}

.specs{background:#fbfdff;border-radius:8px;padding:12px;border:1px solid rgba(11,18,32,0.04);margin-top:12px}

footer{margin-top:28px;color:var(--muted);font-size:13px;text-align:center}

@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}}

@media(max-width:640px){.grid{grid-template-columns:1fr}.hero{flex-direction:column}}

table{width:100%;border-collapse:collapse}

th,td{padding:8px;border-bottom:1px solid #eef2f7;text-align:left}

.small-input{width:100%;padding:8px;border-radius:6px;border:1px solid #e2e8f0}

</style>

</head>

<body>

<button class="ghost" id="adminBtn">Admin</button>

</div>

</header>

<div>

<div style="font-size:18px;font-weight:800">Buy Refurbished Phones — Clean catalog</div>

<div class="meta">Click a product to view specs, PDF report and buy. Buy redirects to WhatsApp with details.</div>

</div>

<button class="btn" onclick="render();">Refresh</button>

<button class="ghost" onclick="showAllGrades()">All Grades</button>

</div>

<footer>ReLit • All purchases redirect to WhatsApp for confirmation. Return window: 2 days from delivery.</footer>

</div>

<button onclick="closeModal()" class="ghost">Close</button>

</div>

<div>

<a id="pdfLink" href="#" target="_blank" class="ghost">Open PDF Report</a>

</div>

<div>

<div>

</div>

<div>

</div>

</div>

<div style="margin-top:8px" class="meta">You'll be redirected to WhatsApp. Fill details below then click 'Proceed to WhatsApp'.</div>

</div>

</div>

<button class="btn" onclick="proceedWhatsApp()">Proceed to WhatsApp</button>

<button class="ghost" onclick="closeBuy()">Cancel</button>

</div>

</div>

<h2>Admin — Manage Listings</h2>

<div>

<button class="ghost" onclick="closeAdmin()">Close Admin</button>

</div>

<h4>Add / Edit Product</h4>

</div>

<button class="btn" onclick="addOrUpdateProduct()">Add / Update</button>

<button class="ghost" onclick="clearForm()">Clear</button>

</div>

<h4>Current Listings</h4>

<table id="adminTable"><thead><tr><th>Title</th><th>Price</th><th>Grade</th><th>Actions</th></tr></thead><tbody></tbody></table>

</div>

const STORAGE_KEY='relit_products_v1';

const DEFAULT_PRODUCTS=[

{id:Date.now(),title:'iPhone 12 Pro 128GB',price:21999,image_url:'https://via.placeholder.com/600x400?text=iPhone+12+Pro',grade:'A',pdf:'',tag:'A Grade',specs:{Storage:'128 GB',Color:'Silver',Battery:'Good',Condition:'No defects'}},

{id:Date.now()+1,title:'iPhone 11 64GB',price:13499,image_url:'https://via.placeholder.com/600x400?text=iPhone+11',grade:'B',pdf:'',tag:'B Grade',specs:{Storage:'64 GB',Color:'Black',Battery:'Good',Condition:'Minor defect'}}

];

function loadProducts(){

try{

const raw=localStorage.getItem(STORAGE_KEY);

if(!raw){ localStorage.setItem(STORAGE_KEY, JSON.stringify(DEFAULT_PRODUCTS)); return DEFAULT_PRODUCTS;}

return JSON.parse(raw);

}catch(e){return DEFAULT_PRODUCTS;}

}

function saveProducts(arr){ localStorage.setItem(STORAGE_KEY, JSON.stringify(arr)); }

let products=loadProducts();

const grid=document.getElementById('gridWrap');

function render(filter=''){

grid.innerHTML='';

const q=filter.trim().toLowerCase();

products.forEach(p=>{

if(q){ const hay=(p.title+' '+(p.tag||'')+' '+(p.grade||'')+' '+JSON.stringify(p.specs||{})).toLowerCase(); if(!hay.includes(q)) return; }

const el=document.createElement('div');

el.className='card';

el.innerHTML=`<img src='${p.image_url||'https://via.placeholder.com/600x400?text=No+Image'}' alt='${p.title}'/>

<div class='title'>${p.title}</div>

<div class='price'>₹${p.price.toLocaleString('en-IN')}</div>

<div class='meta'>${p.tag||''} • Grade ${p.grade||''}</div>

</div>`;

grid.appendChild(el);

});

}

document.getElementById('search').addEventListener('input',(e)=>{render(e.target.value);});

function showAllGrades(){document.getElementById('search').value='';render();}

function escapeHtml(s){return s?s.replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":"'"}[c])):''}

let current=null;

function openDetail(id){current=products.find(x=>x.id===id);if(!current) return;

document.getElementById('mTitle').textContent=current.title;

document.getElementById('mImage').src=current.image_url||'https://via.placeholder.com/600x400?text=No+Image';

document.getElementById('mPrice').textContent='₹'+Number(current.price).toLocaleString('en-IN');

document.getElementById('mTag').textContent=current.tag||'';

document.getElementById('mGrade').textContent='Grade '+(current.grade||'');

const pdf=document.getElementById('pdfLink'); if(current.pdf){pdf.href=current.pdf; pdf.style.display='inline-block';} else{pdf.style.display='none';}

document.getElementById('modalWrap').style.display='flex';

}

function closeModal(){document.getElementById('modalWrap').style.display='none';}

function quickBuy(id){current=products.find(x=>x.id===id); if(!current)return; openBuy();}

function openBuy(){document.getElementById('bTitle').textContent=current.title; document.getElementById('buyWrap').style.display='flex';}

function closeBuy(){document.getElementById('buyWrap').style.display='none'; document.getElementById('buyResult').innerHTML='';}

function proceedWhatsApp(){

const name=document.getElementById('bName').value.trim();

const phone=document.getElementById('bPhone').value.trim();

const sku=document.getElementById('bSku').value.trim();

const addr=document.getElementById('bAddr').value.trim();

const pincode=document.getElementById('bPincode').value.trim();

const email=document.getElementById('bEmail').value.trim();

if(!name||!phone){document.getElementById('buyResult').innerHTML='<div style="color:#c23">Please enter name and phone.</div>'; return;}

const oid='RL'+Date.now().toString().slice(-6);

const seller='+919414829196';

const msg=`Order: ${oid}

Product: ${current.title}

Price: ₹${current.price.toLocaleString('en-IN')}

SKU: ${sku||'-'}

Name: ${name}

Phone: ${phone}

Pincode: ${pincode||'-'}

Address: ${addr||'-'}

Email: ${email||'-'}

PDF Report: ${current.pdf||'-'}

Please confirm.`;

const wa=`https://wa.me/${seller.replace('+','')}?text=${encodeURIComponent(msg)}`;

window.open(wa,'_blank');

document.getElementById('buyResult').innerHTML=`<div style="color:green">Opened WhatsApp. Order ID: ${oid}</div>`;

}

document.getElementById('adminBtn').addEventListener('click',()=>{

const pass=prompt('Enter admin password');

if(pass==='pm@112351'){openAdmin();} else{alert('Wrong password');}

});

function openAdmin(){document.querySelector('.wrap').style.display='none'; document.getElementById('adminPage').style.display='block'; renderAdminTable();}

function closeAdmin(){document.getElementById('adminPage').style.display='none'; document.querySelector('.wrap').style.display='block'; render();}

function addOrUpdateProduct(){

const title=document.getElementById('pTitle').value.trim();

const price=Number(document.getElementById('pPrice').value.trim());

const image_url=document.getElementById('pImage').value.trim();

const pdf=document.getElementById('pPdf').value.trim();

const grade=document.getElementById('pGrade').value.trim().toUpperCase();

const tag=document.getElementById('pTag').value.trim();

let specs={};

try{specs=document.getElementById('pSpecs').value?JSON.parse(document.getElementById('pSpecs').value):{};}catch(e){alert('Specs JSON error'); return;}

if(!title||!price||!image_url){alert('Title, price, image required');return;}

const existing=products.find(x=>x.title===title && Number(x.price)===price);

if(existing){existing.image_url=image_url;existing.pdf=pdf;existing.grade=grade;existing.tag=tag;existing.specs=specs;}else{products.push({id:Date.now(),title,price,image_url,pdf,grade,tag,specs});}

saveProducts(products); renderAdminTable(); alert('Saved');

}

function renderAdminTable(){

const tbody=document.querySelector('#adminTable tbody'); tbody.innerHTML='';

products.forEach(p=>{

const tr=document.createElement('tr');

tr.innerHTML=`<td>${p.title}</td><td>₹${p.price.toLocaleString('en-IN')}</td><td>${p.grade||''}</td>

<td><button class='ghost' onclick='editProduct(${p.id})'>Edit</button> <button class='ghost' onclick='deleteProduct(${p.id})'>Delete</button></td>`;

tbody.appendChild(tr);

});

}

function editProduct(id){const p=products.find(x=>x.id===id);if(!p)return;

document.getElementById('pTitle').value=p.title;

document.getElementById('pPrice').value=p.price;

document.getElementById('pImage').value=p.image_url;

document.getElementById('pPdf').value=p.pdf||'';

document.getElementById('pGrade').value=p.grade||'';

document.getElementById('pTag').value=p.tag||'';

document.getElementById('pSpecs').value=JSON.stringify(p.specs,null,2);

window.scrollTo({top:0,behavior:'smooth'});

}

function deleteProduct(id){if(!confirm('Delete this product?'))return; products=products.filter(x=>x.id!==id);saveProducts(products);renderAdminTable();}

function clearForm(){['pTitle','pPrice','pImage','pPdf','pGrade','pTag','pSpecs'].forEach(id=>document.getElementById(id).value='');}

// modals click outside

document.getElementById('modalWrap').addEventListener('click', e=>{if(e.target.id==='modalWrap')closeModal();});

document.getElementById('buyWrap').addEventListener('click', e=>{if(e.target.id==='buyWrap')closeBuy();});

// initial render

render();

renderAdminTable();

</script>

</body>

</html>