MAINHACK

Viewing / Editing File: listing-go.php

<!--
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Salon Finder</title>
  <style>
    :root{--bg:#f8fafc;--card:#ffffff;--muted:#6b7280;--glass:rgba(17,24,39,0.05);--glass-2:rgba(17,24,39,0.08);--shadow:0 6px 20px rgba(0,0,0,0.08)}
    body{margin:0;background:var(--bg);color:#111827;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
    .container{max-width:980px;margin:0 auto;padding:20px}
    header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
    .logo{width:52px;height:52px;border-radius:12px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
    h1{font-size:24px;margin:0}

.controls{display:flex;gap:10px;align-items:center;margin:14px 0}
    .search{flex:1;display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--glass);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow)}
    .search input{flex:1;border:0;outline:0;background:transparent;color:inherit}

.ghost{background:transparent;border:1px solid var(--glass-2);color:inherit;border-radius:10px;padding:10px 14px;cursor:pointer}
    .btn{background:#111827;color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer}
    .chip{display:inline-flex;align-items:center;gap:8px;background:vaar(--card);border:1px solid var(--glass);border-radius:999px;padding:8px 12px}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    @media (max-width:720px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--glass);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex}
    .thumb{position:relative;overflow:hidden;width:120px;height:100px;border-radius:10px;flex-shrink:0;background-size:cover;background-position:center;border:1px solid rgba(0,0,0,0.05)}
    .thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0))}
    .card-body{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
    .title{font-size:16px;margin:0}
    .sub{font-size:13px}
    .muted{color:var(--muted)}
    .meta{display:flex;gap:12px}
    .badges{display:flex;gap:8px;margin-top:6px}
    .badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--glass);border-radius:999px;padding:6px 10px;font-size:12px}
    .price{font-weight:600}
    .rating{display:flex;gap:6px;align-items:center}

.category-tag{position:absolute;left:8px;top:8px;background:rgba(255,255,255,0.85);color:#111827;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(0,0,0,0.06)}
    [data-theme="dark"] .category-tag{background:rgba(17,24,39,0.85);color:#e5e7eb;border-color:rgba(255,255,255,0.08)}
    .heart{position:absolute;right:8px;top:8px;background:rgba(255,255,255,0.85);border:0;border-radius:999px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer}
    .heart.active{color:#ef4444}
    [data-theme="dark"] .heart{background:rgba(17,24,39,0.85);color:#e5e7eb}
    .open-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:6px}
    .badge.closed .open-dot{background:#ef4444}
    .chip:hover{transform:translateY(-1px);transition:transform .15s ease}
    .btn{transition:transform .15s ease}
    .btn:hover{transform:translateY(-1px)}
    [data-theme="dark"]{--bg:#0b1220;--card:#111827;--muted:#9ca3af;--glass:rgba(255,255,255,0.06);--glass-2:rgba(255,255,255,0.08);--shadow:0 4px 14px rgba(0,0,0,0.6);color:#e5e7eb}

@media (max-width:480px){
      .logo{width:44px;height:44px}
      .thumb{width:100px;height:80px}
    }

/* Modal */
    #modalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;padding:20px}
    #modal{background:var(--card);border:1px solid var(--glass);border-radius:12px;max-width:640px;width:100%;box-shadow:var(--shadow);overflow:hidden}
    #modal header{padding:16px;border-bottom:1px solid var(--glass)}
    #modal .content{display:flex;gap:16px;padding:16px}
    #modal img{width:160px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--glass)}
    #modal .services{display:flex;flex-wrap:wrap;gap:8px}
    #modal footer{padding:12px;border-top:1px solid var(--glass);display:flex;justify-content:flex-end;gap:10px}
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">SF</div>
      <div>
        <h1>Salon Finder</h1>
        <div class="muted" id="count">0 results</div>
      </div>
    </header>

<div class="controls">
      <div class="search">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <input id="q" placeholder="Search by name, suburb or service" />
      </div>
      <button class="ghost" id="toggleTheme" aria-pressed="false">Dark</button>
      <button class="ghost" id="clearBtn">Clear</button>
    </div>

<div id="modalBackdrop" role="dialog" aria-modal="true">
    <div id="modal">
      <header>
        <h2 id="m-title" style="margin:0;font-size:18px"></h2>
        <div id="m-sub" class="muted" style="font-size:13px"></div>
      </header>
      <div class="content">
        <img id="m-img" alt="" />
        <div style="flex:1">
          <div style="margin-bottom:8px;font-weight:600">Services</div>
          <div id="m-services" class="services"></div>
        </div>
      </div>
      <footer>
        <button class="ghost" id="closeModal">Close</button>
      </footer>
    </div>
  </div>

const salons = [
      {id:1,name:'Glow & Go',suburb:'Osu',category:['Hair','Beauty'],price:80,rating:4.6,open:true,thumb:'https://images.unsplash.com/photo-1519414562606-9cea00751ef9?q=80&w=600&auto=format&fit=crop',services:['Haircut','Color','Styling','Makeup']},
      {id:2,name:'Urban Barber',suburb:'East Legon',category:['Barber'],price:50,rating:4.3,open:false,thumb:'https://images.unsplash.com/photo-1585747860715-2ba37e788b99?q=80&w=600&auto=format&fit=crop',services:['Fade','Beard trim','Hot towel']},
      {id:3,name:'Serenity Spa',suburb:'Airport',category:['Spa','Beauty'],price:120,rating:4.8,open:true,thumb:'https://images.unsplash.com/photo-1573497491208-6b1acb260507?q=80&w=600&auto=format&fit=crop',services:['Massage','Facial','Manicure','Pedicure']},
      {id:4,name:'Curl Culture',suburb:'Adenta',category:['Hair'],price:90,rating:4.2,open:true,thumb:'https://images.unsplash.com/photo-1596464716121-8b90fdf2c106?q=80&w=600&auto=format&fit=crop',services:['Wash & set','Twists','Braids']}
    ];

function starHtml(r){
      const full = Math.floor(r);
      const half = r - full >= 0.5;
      let out = '';
      for(let i=0;i<full;i++) out += '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>';
      if(half) out += '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden><defs><linearGradient id="g"><stop offset="50%" stop-color="currentColor"/><stop offset="50%" stop-color="transparent"/></linearGradient></defs><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="url(#g)" stroke="currentColor"/></svg>';
      return out;
    }

function applyFilters(){
      const term = q.value.trim().toLowerCase();
      const items = salons.filter(s=>{
        if(!term) return true;
        const hay = [s.name,s.suburb,...(s.category||[]),...(s.services||[])].join(' ').toLowerCase();
        return hay.includes(term);
      });
      render(items);
    }

function closeModal(){ modalBackdrop.style.display='none'; }

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

q.addEventListener('input',applyFilters);
    document.getElementById('clearBtn').addEventListener('click',()=>{q.value='';applyFilters();});
    toggleTheme.addEventListener('click',()=>{
      const d = document.documentElement;
      const isDark = d.dataset.theme==='dark';
      d.dataset.theme = isDark ? '' : 'dark';
      toggleTheme.textContent = isDark ? 'Dark' : 'Light';
      toggleTheme.setAttribute('aria-pressed', (!isDark).toString());
    });
    toggleTheme.addEventListener('click',()=>{
      const d = document.documentElement;
      const isDark = d.dataset.theme==='dark';
      d.dataset.theme = isDark ? '' : 'dark';
      toggleTheme.textContent = isDark ? 'Dark' : 'Light';
      toggleTheme.setAttribute('aria-pressed', (!isDark).toString());
    });

render(salons);
  </script>
</body>
</html>-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Salon Listings — Light Mode</title>
  <meta name="description" content="Responsive salon listing template with light mode, search, filters, cards and modal details." />
  <style>
    :root{
      --bg:#f7f8fa;
      --card:#ffffff;
      --muted:#475569;
      --accent:#ff6b6b;
      --glass: rgba(0,0,0,0.06);
      --glass-2: rgba(0,0,0,0.04);
      --radius:12px;
      --max-width:1200px;
      --shadow: 0 4px 14px rgba(0,0,0,0.08);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

html, body {
  overflow-x: hidden;
}

@media (max-width:880px){
  header, .controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

.filters {
    order: 2; /* after search */
    margin-top: 12px;
  }

.search {
    order: 1; /* before filters */
    width: 100%;
  }
}

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

.layout {
  grid-template-columns: 1fr;
}

.card {
  width: 100%;
  box-sizing: border-box;
}

*{box-sizing:border-box}
    html,body{height:100%;margin:0;background:var(--bg);color:#1e293b}
    .wrap{max-width:var(--max-width);margin:28px auto;padding:20px}

header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:18px}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{width:52px;height:52px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#ff9a9e);display:flex;align-items:center;justify-content:center;font-weight:700;color:#ffffff}
    h1{margin:0;font-size:20px}
    p.lead{margin:0;color:var(--muted);font-size:13px}

.controls{display:flex;gap:12px;align-items:center}
    .search{background:var(--glass);border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:center;min-width:220px}
    .search input{background:transparent;border:0;outline:none;color:inherit;font-size:14px}
    .filters{display:flex;gap:8px;flex-wrap:wrap}
    .chip{background:var(--glass-2);padding:6px 10px;border-radius:999px;font-size:13px;cursor:pointer;border:1px solid rgba(0,0,0,0.05)}
    .chip.active{background:linear-gradient(90deg,#0ea5a4, #34d399);color:#ffffff}

.layout{display:grid;grid-template-columns:1fr 360px;gap:20px}
    @media (max-width:1000px){.layout{grid-template-columns:1fr 320px}}
    @media (max-width:880px){.layout{grid-template-columns:1fr}}

.list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    @media (max-width:1100px){.list-grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:660px){.list-grid{grid-template-columns:1fr}}

.card{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start;transition:transform .18s ease,box-shadow .18s}
    .card:hover{transform:translateY(-6px)}
    .thumb{width:120px;height:100px;border-radius:10px;flex-shrink:0;background-size:cover;background-position:center;border:1px solid rgba(0,0,0,0.05)}
    .card-body{flex:1}
    .meta{display:flex;gap:8px;align-items:center;margin-bottom:6px}
    .title{font-weight:700;margin:0}
    .sub{color:var(--muted);font-size:13px;margin-top:6px}
    .badges{display:flex;gap:8px;margin-top:8px}
    .badge{padding:6px 8px;border-radius:8px;font-size:12px;background:var(--glass-2);border:1px solid rgba(0,0,0,0.03)}
    .rating{display:flex;gap:6px;align-items:center;font-size:13px}
    .price{font-weight:700}

.panel{background:var(--card);padding:14px;border-radius:12px;border:1px solid rgba(0,0,0,0.05)}
    .panel h3{margin:0 0 10px 0}
    .map-placeholder{height:200px;border-radius:10px;background:linear-gradient(90deg,#e0e7ff, #f0f4f8);display:flex;align-items:center;justify-content:center;color:var(--muted)}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.3);display:none;align-items:center;justify-content:center;padding:20px}
    .modal{background:var(--card);padding:18px;border-radius:14px;max-width:720px;width:100%;box-shadow:var(--shadow)}
    .modal .close{background:transparent;border:0;color:var(--muted);cursor:pointer}

.muted{color:var(--muted)}
    .row{display:flex;gap:8px;align-items:center}
    .btn{background:linear-gradient(90deg,var(--accent),#ff9a9e);border:0;padding:8px 12px;border-radius:10px;color:#ffffff;font-weight:700;cursor:pointer}
    .ghost{background:transparent;border:1px solid rgba(0,0,0,0.05);padding:8px 10px;border-radius:10px;color:var(--muted);cursor:pointer}

@media (max-width:480px){
      .logo{width:44px;height:44px}
      .thumb{width:100px;height:80px}
    }

.list-grid .thumb{position:relative;overflow:hidden}
    .list-grid .thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0))}
    .category-tag{position:absolute;left:8px;top:8px;background:rgba(255,255,255,0.85);color:#111827;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(0,0,0,0.06)}
    [data-theme="dark"] .category-tag{background:rgba(17,24,39,0.85);color:#e5e7eb;border-color:rgba(255,255,255,0.08)}
    .heart{position:absolute;right:8px;top:8px;background:rgba(255,255,255,0.85);border:0;border-radius:999px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer}
    .heart.active{color:#ef4444}
    [data-theme="dark"] .heart{background:rgba(17,24,39,0.85);color:#e5e7eb}
    .open-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:6px}
    .badge.closed .open-dot{background:#ef4444}
    .chip:hover{transform:translateY(-1px);transition:transform .15s ease}
    .btn{transition:transform .15s ease}
    .btn:hover{transform:translateY(-1px)}
    [data-theme="dark"]{--bg:#0b1220;--card:#111827;--muted:#9ca3af;--glass:rgba(255,255,255,0.06);--glass-2:rgba(255,255,255,0.08);--shadow:0 4px 14px rgba(0,0,0,0.6);color:#e5e7eb}

</style>
</head>
<body>
  <div class="wrap">
    <header>
      <div class="brand">
        <div class="logo">S</div>
        <div>
          <h1>SalonFinder</h1>
          <p class="lead">Find a salon near you — view services, ratings and prices</p>
        </div>
      </div>

<div class="controls">
        <div class="search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <input id="q" placeholder="Search by name, suburb or service" />
        </div>
        <button class="ghost" id="toggleTheme" aria-pressed="false">Dark</button>
        <button class="ghost" id="clearBtn">Clear</button>
      </div>
    </header>

<div class="layout">
      <main>
        <div class="filters" style="margin-bottom:12px">
          <div class="chip active" data-filter="all">All</div>
          <div class="chip" data-filter="hair">Hair</div>
          <div class="chip" data-filter="nails">Nails</div>
          <div class="chip" data-filter="spa">Spa</div>
          <div class="chip" data-filter="barber">Barber</div>
          <div class="chip" data-filter="offers">Offers</div>
        </div>

<section id="list" class="list-grid" aria-live="polite"></section>
        <div style="margin-top:18px;color:var(--muted);font-size:13px">Showing <span id="count">0</span> salons</div>
      </main>

<aside>
        <div class="panel">
          <h3>Nearby on map</h3>
          <div class="map-placeholder">Map preview (replace with real map)</div>
          <hr style="margin:12px 0;border:none;border-top:1px solid rgba(0,0,0,0.05)" />
          <h3>Sort</h3>
          <div style="display:flex;gap:8px;margin-top:8px">
            <button class="chip" id="sortRating">Top rated</button>
            <button class="chip" id="sortPrice">Lowest price</button>
          </div>
        </div>
      </aside>
    </div>
  </div>

<div id="modalBackdrop" class="modal-backdrop" role="dialog" aria-modal="true">
    <div class="modal" id="modalContent">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <div>
          <h2 id="m-title">Salon name</h2>
          <div id="m-sub" class="muted">Address • open now</div>
        </div>
        <button class="close" id="closeModal">✕</button>
      </div>
      <div style="display:flex;gap:14px;margin-top:12px">
        <div style="flex:1">
          <img id="m-img" src="" alt="" style="width:100%;height:220px;object-fit:cover;border-radius:10px;border:1px solid rgba(0,0,0,0.05)" />
        </div>
        <div style="width:260px">
          <h4>Services</h4>
          <ul id="m-services" class="muted" style="padding-left:16px"></ul>
          <div style="margin-top:12px"><button class="btn" id="bookNow">Book now</button></div>
        </div>
      </div>
    </div>
  </div>

const listEl = document.getElementById('list');
    const q = document.getElementById('q');
    const count = document.getElementById('count');
    const modalBackdrop = document.getElementById('modalBackdrop');
    const mTitle = document.getElementById('m-title');
    const mSub = document.getElementById('m-sub');
    const mImg = document.getElementById('m-img');
    const mServices = document.getElementById('m-services');

document.getElementById('closeModal').addEventListener('click',()=>modalBackdrop.style.display='none');
    modalBackdrop.addEventListener('click',(e)=>{ if(e.target===modalBackdrop) modalBackdrop.style.display='none' });

document.querySelectorAll('.chip').forEach(ch=>{
      ch.addEventListener('click',()=>{
        document.querySelectorAll('.chip').forEach(x=>x.classList.remove('active'));
        ch.classList.add('active');
        applyFilters();
      })
    });

q.addEventListener('input',applyFilters);
    document.getElementById('clearBtn').addEventListener('click',()=>{q.value='';applyFilters();});

document.getElementById('sortRating').addEventListener('click',()=>{
      const out = filtered.sort((a,b)=>b.rating - a.rating);
      render(out);
    });
    document.getElementById('sortPrice').addEventListener('click',()=>{
      const out = filtered.sort((a,b)=>a.price - b.price);
      render(out);
    });

let filtered = [...salons];
    function applyFilters(){
      const term = q.value.trim().toLowerCase();
      const active = document.querySelector('.filters .chip.active');
      const cat = active && active.dataset ? active.dataset.filter : 'all';
      filtered = salons.filter(s=>{
        const matchTerm = !term || s.name.toLowerCase().includes(term) || s.suburb.toLowerCase().includes(term) || s.services.join(' ').toLowerCase().includes(term);
        const matchCat = (cat==='all') || s.category.includes(cat);
        return matchTerm && matchCat;
      });
      render(filtered);
    }

render(salons);
  </script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: listing-go.php

Server Info

System Features

User Info