Spaces:
Running
Running
Ctrl+K
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Retail Support</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <style> html,body{height:100%} body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial} .glass{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));backdrop-filter:saturate(140%) blur(6px)} .elevate{box-shadow:0 12px 30px rgba(0,0,0,.25)} .tile{box-shadow:0 8px 24px rgba(0,0,0,.18)} .soft-ring{box-shadow:0 0 0 6px rgba(255,255,255,.07)} .fade{animation:fade .25s ease} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} </style> </head> <body class="min-h-screen bg-[#2A1059] text-white"> <!-- Top bar --> <header class="sticky top-0 z-40 bg-gradient-to-r from-[#5D23C5] to-[#6E36E0] border-b border-white/10 elevate"> <div class="max-w-6xl mx-auto px-5 py-4 flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="h-10 w-10 rounded-xl bg-white/15 grid place-items-center soft-ring"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5 text-white/90"><circle cx="12" cy="12" r="10" stroke-width="1.8"/><path d="M12 8h.01M11 12h2v5" stroke-width="1.8" stroke-linecap="round"/></svg> </div> <div> <h1 class="text-2xl md:text-3xl font-extrabold leading-tight">Retail Support</h1> <p class="text-white/75 text-sm -mt-0.5">Pricing, rules & tools in one place</p> </div> </div> <div class="flex items-center gap-2"> <button class="relative p-2 rounded-full hover:bg-white/10 transition-colors"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-6 h-6"><path d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.172V11a6 6 0 0 0-12 0v3.172a2 2 0 0 1-.6 1.428L4 17h5" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.5 20a2.5 2.5 0 0 0 5 0" stroke-width="1.7" stroke-linecap="round"/></svg> <span class="absolute -top-0.5 -right-0.5 inline-block h-2 w-2 rounded-full bg-red-500"></span> </button> <button class="p-2 rounded-full hover:bg-white/10 transition-colors"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-6 h-6"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke-width="1.5"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.05.06a2 2 0 1 1-2.83 2.83l-.06-.05A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .33 1.7 1.7 0 0 0-.66 1.34V21a2 2 0 1 1-4 0v-.07a1.7 1.7 0 0 0-.67-1.33 1.7 1.7 0 0 0-1-.33 1.7 1.7 0 0 0-1.87.34l-.06.05a2 2 0 1 1-2.83-2.83l.05-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.33-1 1.7 1.7 0 0 0-1.34-.66H3a2 2 0 1 1 0-4h.07a1.7 1.7 0 0 0 1.33-.67 1.7 1.7 0 0 0 .33-1 1.7 1.7 0 0 0-.34-1.87l-.05-.06A2 2 0 1 1 7.16 2.9l.06.05A1.7 1.7 0 0 0 9 4.6c.37 0 .72-.12 1-.33.39-.27.63-.7.66-1.17V3a2 2 0 1 1 4 0v.07c.03.47.27.9.66 1.17.28.21.63.33 1 .33a1.7 1.7 0 0 0 1.87-.34l.06-.05A2 2 0 1 1 21.1 7.16l-.05.06c-.23.27-.35.63-.33 1a1.7 1.7 0 0 0 .33 1Z" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg> </button> </div> </div> </header> <main class="max-w-6xl mx-auto px-5 pb-24"> <!-- Search + mode switcher --> <div class="mt-6 flex flex-col gap-3 md:flex-row md:items-center"> <div class="relative flex-1"> <input id="q" type="text" placeholder="Search brands or categories..." class="w-full rounded-2xl bg-white/10 text-white placeholder-white/70 pl-11 pr-4 py-3 outline-none ring-1 ring-white/15 focus:ring-2 focus:ring-white/30"/> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5 absolute left-3.5 top-1/2 -translate-y-1/2 text-white/70"><circle cx="11" cy="11" r="8" stroke-width="1.7"/><path d="m21 21-4.35-4.35" stroke-width="1.7" stroke-linecap="round"/></svg> </div> <div class="self-start md:self-auto bg-white/10 rounded-full p-1 ring-1 ring-white/15"> <div class="grid grid-cols-3 gap-1 text-sm"> <button data-mode="gold" class="mode px-4 py-2 rounded-full bg-white text-[#2A1059] font-semibold">Gold</button> <button data-mode="designer" class="mode px-4 py-2 rounded-full text-white/90 hover:bg-white/10">Designer</button> <button data-mode="standard" class="mode px-4 py-2 rounded-full text-white/90 hover:bg-white/10">Standard</button> </div> </div> </div> <!-- Quick tiles --> <section class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4"> <a class="tile rounded-2xl bg-white/10 hover:bg-white/15 transition-colors p-4 flex items-center gap-3" href="#categories"> <div class="h-10 w-10 rounded-xl bg-white/15 grid place-items-center"><span class="text-xl">👚</span></div> <span class="font-semibold">Clothing</span> </a> <a class="tile rounded-2xl bg-white/10 hover:bg-white/15 transition-colors p-4 flex items-center gap-3" href="#swe"> <div class="h-10 w-10 rounded-xl bg-white/15 grid place-items-center text-lg">🌟</div> <span class="font-semibold">Style With EACH</span> </a> <a class="tile rounded-2xl bg-white/10 hover:bg-white/15 transition-colors p-4 flex items-center gap-3" href="#ebay"> <div class="h-10 w-10 rounded-xl bg-white/15 grid place-items-center text-lg"><span class="font-extrabold"><span class="text-red-400">e</span><span class="text-blue-400">b</span><span class="text-yellow-300">a</span><span class="text-green-400">y</span></span></div> <span class="font-semibold">eBay</span> </a> <a class="tile rounded-2xl bg-white/10 hover:bg-white/15 transition-colors p-4 flex items-center gap-3" href="#dns"> <div class="h-10 w-10 rounded-xl bg-white/15 grid place-items-center"><div class="h-5 w-5 rounded-full bg-red-500 grid place-items-center"><div class="h-1 w-3.5 bg-white rounded"></div></div></div> <span class="font-semibold">Do Not Sell</span> </a> <a class="tile rounded-2xl bg-white/10 hover:bg-white/15 transition-colors p-4 flex items-center gap-3" href="#performance"> <div class="h-10 w-10 rounded-xl bg-white/15 grid place-items-center">📊</div> <span class="font-semibold">Reports</span> </a> <a class="tile rounded-2xl bg-[#F7EDEA] text-[#2A1059] hover:bg-white transition-colors p-4 flex items-center gap-3" href="#pricing"> <div class="h-10 w-10 rounded-xl bg-white/80 grid place-items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#2A1059" class="w-5 h-5"><rect x="4" y="3" width="16" height="18" rx="2" stroke-width="1.7"/><path d="M8 7h8M8 11h8M8 15h6" stroke-width="1.7" stroke-linecap="round"/></svg> </div> <span class="font-semibold">Pricing Guide</span> </a> </section> <!-- Pricing rules card --> <section id="pricing" class="mt-8 rounded-2xl glass ring-1 ring-white/10"> <div class="px-5 py-4 flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="h-7 w-7 rounded-lg bg-white/10 grid place-items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-4 h-4"><circle cx="12" cy="12" r="10" stroke-width="1.7"/><path d="M12 8h.01M11 12h2v5" stroke-width="1.7" stroke-linecap="round"/></svg> </div> <h2 class="text-lg font-semibold">General Pricing Rules</h2> </div> <button id="rulesBtn" class="h-9 w-9 grid place-items-center rounded-lg hover:bg-white/10 transition-colors"> <svg id="rulesChev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5 transition-transform"><path d="m9 18 6-6-6-6" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg> </button> </div> <div id="rulesBody" class="px-5 pb-4 border-t border-white/10"> <ul class="list-disc marker:text-white/70 pl-5 space-y-2 text-white/90"> <li><span class="font-semibold">Brand New with Tags:</span> price at ½ of the original price.</li> <li><span class="font-semibold">Gold Category:</span> barely‑worn premium items or top brands.</li> <li><span class="font-semibold">Standard vs Basic:</span> Basic = supermarket; Standard = high street.</li> <li><span class="font-semibold">Manager to Price:</span> designer/vintage not covered by standard rates.</li> </ul> <div class="mt-4 flex items-center justify-between text-xs text-white/60"> <p>Last updated: June 15, 2023</p> <button class="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-white/10 hover:bg-white/15"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-4 h-4"><path d="M19 21H5a2 2 0 0 1-2-2V7m0 0 4-4m-4 4h4v4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Save for later </button> </div> </div> </section> <!-- Pricing Tool --> <section class="mt-8 rounded-2xl glass ring-1 ring-white/10 p-6" id="pricingTool"> <h3 class="text-2xl font-extrabold">EACH Pricing Tool</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4"> <div> <label class="block text-sm text-white/80 mb-2">Select Item</label> <select id="item" class="w-full bg-white text-[#2A1059] rounded-xl px-3 py-2.5"> <option value="blouse">Blouse</option> <option value="jeans">Jeans</option> <option value="coat">Coat</option> <option value="dress">Dress</option> <option value="shoes">Shoes</option> <option value="jacket">Jacket</option> <option value="tshirt">T-shirt</option> </select> </div> <div> <label class="block text-sm text-white/80 mb-2">Select Brand</label> <select id="brand" class="w-full bg-white text-[#2A1059] rounded-xl px-3 py-2.5"> <option>ADIDAS</option><option>ANNE KLEIN</option><option>BEN SHERMAN</option><option>BENCH</option><option>FERAUD</option><option>HOLLISTER</option><option>HOTTER</option><option>JACK WILLS</option><option>JANE NORMAN</option><option>JASPER CONRAN</option><option>MONSOON</option><option>NIKE</option><option>PHASE 8</option><option>POMODORO</option><option>UNDER ARMOR</option><option>URBAN OUTFITTERS</option><option>VIYELLA</option><option>WHITE STUFF</option><option>WINDSMOOR</option> </select> </div> </div> <button id="findBtn" class="mt-5 inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold px-4 py-2.5 rounded-xl"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5"><path d="M5 12h14M12 5v14" stroke-width="1.7" stroke-linecap="round"/></svg> Find Price </button> <div id="result" class="hidden mt-4 p-4 rounded-xl bg-emerald-100 text-[#083C2C] font-semibold"></div> </section> <!-- Sections (Examples) --> <section id="categories" class="mt-8 rounded-2xl glass ring-1 ring-white/10 p-6 fade"> <h3 class="text-xl font-bold mb-2">Categories</h3> <p class="text-white/80 text-sm">Use the search above to filter brands and pricing groups.</p> </section> <section id="swe" class="mt-6 rounded-2xl glass ring-1 ring-white/10 p-6 fade"> <h3 class="text-xl font-bold mb-3">Style With EACH — Highlights</h3> <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm"> <div class="bg-white/10 rounded-xl px-3 py-2">Lucy & Yak</div> <div class="bg-white/10 rounded-xl px-3 py-2">Football Shirts</div> <div class="bg-white/10 rounded-xl px-3 py-2">Berghaus</div> <div class="bg-white/10 rounded-xl px-3 py-2">Trainers</div> <div class="bg-white/10 rounded-xl px-3 py-2">Kate Spade</div> <div class="bg-white/10 rounded-xl px-3 py-2">Tour Tees</div> <div class="bg-white/10 rounded-xl px-3 py-2">Whistles</div> <div class="bg-white/10 rounded-xl px-3 py-2">Cowboy Boots</div> </div> </section> <section id="ebay" class="mt-6 rounded-2xl glass ring-1 ring-white/10 p-6 fade"> <h3 class="text-xl font-bold mb-3">eBay Reseller Guide</h3> <div class="grid md:grid-cols-2 gap-4 text-sm"> <div class="bg-white/5 rounded-xl p-4"> <h4 class="font-semibold mb-2">Gold Hallmarks</h4> <div class="grid grid-cols-3 gap-2"> <div class="bg-white/10 rounded p-2 text-center">375<br><span class="text-xs text-white/70">9ct</span></div> <div class="bg-white/10 rounded p-2 text-center">585<br><span class="text-xs text-white/70">14ct</span></div> <div class="bg-white/10 rounded p-2 text-center">750<br><span class="text-xs text-white/70">18ct</span></div> <div class="bg-white/10 rounded p-2 text-center">916<br><span class="text-xs text-white/70">22ct</span></div> <div class="bg-white/10 rounded p-2 text-center">990<br><span class="text-xs text-white/70">24ct</span></div> <div class="bg-white/10 rounded p-2 text-center">GF / RGP</div> </div> </div> <div class="bg-white/5 rounded-xl p-4"> <h4 class="font-semibold mb-2">Silver Marks</h4> <div class="grid grid-cols-3 gap-2"> <div class="bg-white/10 rounded p-2 text-center">925<br><span class="text-xs text-white/70">Sterling</span></div> <div class="bg-white/10 rounded p-2 text-center">800</div> <div class="bg-white/10 rounded p-2 text-center">EPNS</div> <div class="bg-white/10 rounded p-2 text-center">A1<br><span class="text-xs text-white/70">Plate</span></div> </div> </div> </div> <div class="mt-4 bg-white/5 rounded-xl p-4 text-sm"> <h4 class="font-semibold mb-2">Toy Value Indicators</h4> <ul class="grid md:grid-cols-2 gap-2 list-disc pl-5 marker:text-white/60"> <li>Pre‑2000 toys (70s–90s are strong)</li> <li>Factory sealed / NOS</li> <li>Limited editions & exclusives</li> <li>Original Star Wars (1977–1985)</li> </ul> <p class="mt-2 text-white/75">Pro tip: always verify with eBay sold listings before buying.</p> </div> </section> <section id="dns" class="mt-6 rounded-2xl glass ring-1 ring-white/10 p-6 fade"> <h3 class="text-xl font-bold mb-3">Do Not Sell — Key Items</h3> <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-2 text-sm"> <div class="bg-white/5 rounded px-3 py-2">Vapes</div> <div class="bg-white/5 rounded px-3 py-2">Bikes</div> <div class="bg-white/5 rounded px-3 py-2">Cots / Prams / High chairs</div> <div class="bg-white/5 rounded px-3 py-2">Real Fur Coats</div> <div class="bg-white/5 rounded px-3 py-2">Children's car seats</div> <div class="bg-white/5 rounded px-3 py-2">Electric blankets</div> </div> </section> <section id="performance" class="mt-6 rounded-2xl glass ring-1 ring-white/10 p-6 fade"> <h3 class="text-xl font-bold mb-3">South Region YTD</h3> <div class="overflow-x-auto"> <table class="min-w-full text-sm"> <thead class="bg-white/10"> <tr> <th class="px-3 py-2 text-left">Shop</th> <th class="px-3 py-2 text-right">Actual (£)</th> <th class="px-3 py-2 text-right">Budget (£)</th> <th class="px-3 py-2 text-right">Δ vs Budget</th> <th class="px-3 py-2 text-right">Last Year (£)</th> <th class="px-3 py-2 text-right">Δ vs LY</th> </tr> </thead> <tbody class="divide-y divide-white/10"> <tr class="hover:bg-white/5"> <td class="px-3 py-2">FRIN</td><td class="px-3 py-2 text-right">£23,754</td><td class="px-3 py-2 text-right">£17,989</td><td class="px-3 py-2 text-right text-emerald-400">+32.0%</td><td class="px-3 py-2 text-right">£17,748</td><td class="px-3 py-2 text-right text-emerald-400">+33.8%</td> </tr> <tr class="hover:bg-white/5"> <td class="px-3 py-2">HALS</td><td class="px-3 py-2 text-right">£12,431</td><td class="px-3 py-2 text-right">£14,183</td><td class="px-3 py-2 text-right text-rose-400">−12.4%</td><td class="px-3 py-2 text-right">£14,083</td><td class="px-3 py-2 text-right text-rose-400">−11.7%</td> </tr> </tbody> </table> </div> </section> <footer class="mt-10 text-center text-white/60 text-xs">© 2025 EACH Retail</footer> </main> <script> // Mode switch visual only document.querySelectorAll('.mode').forEach(btn=>{ btn.addEventListener('click',()=>{ document.querySelectorAll('.mode').forEach(b=>b.classList.remove('bg-white','text-[#2A1059]','font-semibold')) btn.classList.add('bg-white','text-[#2A1059]','font-semibold') }) }) // Pricing rules accordion const rulesBtn=document.getElementById('rulesBtn'); const rulesBody=document.getElementById('rulesBody'); const rulesChev=document.getElementById('rulesChev'); rulesBtn.addEventListener('click',()=>{ const hidden = rulesBody.classList.toggle('hidden'); rulesChev.style.transform = hidden? 'rotate(-90deg)':'rotate(0)'; }) // Simple price logic (kept from original behaviour) const goldBrandGroups={1:["ADIDAS","ANNE KLEIN","BEN SHERMAN","BENCH","FERAUD","HOLLISTER","HOTTER","JACK WILLS","JANE NORMAN","JASPER CONRAN","MONSOON","NIKE","PHASE 8","POMODORO","UNDER ARMOR","URBAN OUTFITTERS","VIYELLA","WHITE STUFF","WINDSMOOR"]}; const priceTable={blouse:{1:"£7.50 - £10.00"},jeans:{1:"£7.50 +"},coat:{1:"£20.00 +"},dress:{1:"£12.00 - £15.00"},shoes:{1:"£9.50 - £12.00"},jacket:{1:"£12.50 +"},tshirt:{1:"£5.00 - £7.00"}}; function getGoldGroup(brand){return goldBrandGroups[1].includes(brand)?1:null} document.getElementById('findBtn').addEventListener('click',()=>{ const item=document.getElementById('item').value; const brand=document.getElementById('brand').value; const group=getGoldGroup(brand); const result=document.getElementById('result'); if(!group){result.textContent=`${brand} isn’t on the Gold list — use Standard pricing.`} else if(priceTable[item]){result.innerHTML=`<strong>${brand}</strong> is Gold Group ${group}. Recommended price for <strong>${item}</strong>: ${priceTable[item][group]}`} else{result.textContent=`Item ${item} not recognised.`} result.classList.remove('hidden'); }) // Anchor tile scroll document.querySelectorAll('a[href^="#"]').forEach(a=>{ a.addEventListener('click',e=>{ const id=a.getAttribute('href'); if(id.length>1){e.preventDefault();document.querySelector(id)?.scrollIntoView({behavior:'smooth',block:'start'})} }) }) </script> </body> </html> - Initial Deployment
3b0c005 verified