Araba Alım Satım Platformu: İlanlar, Filtreleme

1,502 Metehan

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Araba Alım-Satım Platformu</title>
  <meta name="description" content="2. el ve sıfır araçlar için modern araba alım-satım platformu.">
  <style>
    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      margin: 0;
      background: #f7f7f7;
      color: #222;
    }
    header {
      background: #1a202c;
      color: #fff;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    nav a {
      color: #fff;
      margin-left: 1.5rem;
      text-decoration: none;
      font-weight: 500;
    }
    nav a.active {
      text-decoration: underline;
    }
    .hero {
      background: url('https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
      color: #fff;
      padding: 5rem 2rem 3rem 2rem;
      text-align: center;
    }
    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    .search-form {
      background: #fff;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 700px;
      margin: -3rem auto 2rem auto;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .search-form input, .search-form select, .search-form button {
      flex: 1 1 150px;
      padding: 0.7rem;
      border: 1px solid #ddd;
      border-radius: 0.5rem;
    }
    .search-form button {
      background: #1a202c;
      color: #fff;
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: background 0.2s;
    }
    .search-form button:hover {
      background: #2d3748;
    }
    .section {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
    }
    .card {
      background: #fff;
      border-radius: 1rem;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
      overflow: hidden;
      transition: transform 0.2s;
    }
    .card:hover {
      transform: translateY(-5px) scale(1.02);
    }
    .card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    .card-body {
      padding: 1rem;
    }
    .tabs {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-bottom: 2rem;
    }
    .tabs button {
      background: #fff;
      border: 1px solid #1a202c;
      color: #1a202c;
      padding: 0.7rem 2rem;
      border-radius: 2rem;
      cursor: pointer;
      font-weight: bold;
      transition: background 0.2s, color 0.2s;
    }
    .tabs button.active, .tabs button:hover {
      background: #1a202c;
      color: #fff;
    }
    @media (max-width: 700px) {
      .hero h1 { font-size: 1.5rem; }
      .search-form { flex-direction: column; }
      .tabs { flex-direction: column; gap: 1rem; }
    }
  </style>
</head>
<body>
  <header>
    <div><b>ArabaSat</b></div>
    <nav>
      <a href="#" id="nav-home" class="active">Ana Sayfa</a>
      <a href="#" id="nav-listings">İlanlar</a>
      <a href="#">İlan Ver</a>
      <a href="#">Giriş</a>
    </nav>
  </header>

<div id="home-page">
    <section class="hero">
      <h1>Hayalinizdeki Aracı Hemen Bulun!</h1>
      <p>Binlerce 2. el ve sıfır araç arasından kolayca arayın.</p>
      <a href="#search">
        <button style="font-size:1.1rem;padding:0.8rem 2rem;">Hemen Ara</button>
      </a>
    </section>
    <section id="search" class="search-form">
      <input type="text" placeholder="Marka" id="search-brand">
      <input type="text" placeholder="Model" id="search-model">
      <select id="search-price">
        <option value="">Fiyat Aralığı</option>
        <option value="0-250000">0-250.000 TL</option>
        <option value="250000-500000">250.000-500.000 TL</option>
        <option value="500000-1000000">500.000-1.000.000 TL</option>
      </select>
      <select id="search-year">
        <option value="">Yıl</option>
        <option value="2024">2024</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
      </select>
      <input type="text" placeholder="Şehir" id="search-city">
      <button id="search-btn">Ara</button>
    </section>
    <section class="section">
      <h2>Öne Çıkan İlanlar</h2>
      <div class="grid" id="featured-listings">
        
      </div>
    </section>
    <section class="section">
      <h2>Son Eklenenler</h2>
      <div class="grid" id="latest-listings">
        
      </div>
    </section>
    <section class="section">
      <h2>Popüler Kategoriler</h2>
      <div class="grid">
        <div class="card"><div class="card-body">Otomobil</div></div>
        <div class="card"><div class="card-body">Ticari Araç</div></div>
        <div class="card"><div class="card-body">Motosiklet</div></div>
        <div class="card"><div class="card-body">SUV</div></div>
      </div>
    </section>
    <section class="section">
      <h3>Güvenli Alışveriş</h3>
      <p>ArabaSat, güvenli ödeme ve doğrulanmış satıcılarla alışverişinizi güvence altına alır.</p>
    </section>
  </div>

<div id="listings-page" style="display:none;">
    <section class="section">
      <h1>İlanlar</h1>
      <form class="search-form" id="filter-form">
        <input type="text" placeholder="Marka" name="brand">
        <input type="text" placeholder="Model" name="model">
        <select name="price">
          <option value="">Fiyat Aralığı</option>
          <option value="0-250000">0-250.000 TL</option>
          <option value="250000-500000">250.000-500.000 TL</option>
          <option value="500000-1000000">500.000-1.000.000 TL</option>
        </select>
        <select name="year">
          <option value="">Yıl</option>
          <option value="2024">2024</option>
          <option value="2023">2023</option>
          <option value="2022">2022</option>
        </select>
        <input type="text" placeholder="Şehir" name="city">
        <button type="submit">Filtrele</button>
      </form>
      <div class="tabs">
        <button id="grid-view-btn" class="active">Grid Görünüm</button>
        <button id="list-view-btn">Liste Görünüm</button>
      </div>
      <div class="grid" id="listing-results">
        
      </div>
    </section>
  </div>

// Ana sayfa için öne çıkan ve son eklenen ilanları doldur
    function renderHomeListings() {
      const featured = listings.filter(l => l.featured);
      const latest = listings.slice(-3);

const featuredDiv = document.getElementById('featured-listings');
      const latestDiv = document.getElementById('latest-listings');

if (featuredDiv) {
        featuredDiv.innerHTML = featured.map(l => `
          <div class="card">
            <img src="${l.image}" alt="${l.title}">
            <div class="card-body">
              <h3>${l.title}</h3>
              <p>${l.price} - ${l.city}</p>
            </div>
          </div>
        `).join('');
      }
      if (latestDiv) {
        latestDiv.innerHTML = latest.map(l => `
          <div class="card">
            <img src="${l.image}" alt="${l.title}">
            <div class="card-body">
              <h3>${l.title}</h3>
              <p>${l.price} - ${l.city}</p>
            </div>
          </div>
        `).join('');
      }
    }

// İlanlar sayfası için filtreli listeleme
    function renderListingResults(list = listings, view = "grid") {
      const resultsDiv = document.getElementById('listing-results');
      if (!resultsDiv) return;
      if (view === "list") {
        resultsDiv.style.display = "block";
        resultsDiv.innerHTML = list.map(l => `
          <div class="card" style="display:flex;flex-direction:row;align-items:center;">
            <img src="${l.image}" alt="${l.title}" style="width:120px;height:90px;object-fit:cover;">
            <div class="card-body" style="flex:1;">
              <h3>${l.title}</h3>
              <p>${l.price} - ${l.city} - ${l.year}</p>
            </div>
          </div>
        `).join('');
      } else {
        resultsDiv.style.display = "grid";
        resultsDiv.innerHTML = list.map(l => `
          <div class="card">
            <img src="${l.image}" alt="${l.title}">
            <div class="card-body">
              <h3>${l.title}</h3>
              <p>${l.price} - ${l.city} - ${l.year}</p>
            </div>
          </div>
        `).join('');
      }
    }

// Ana sayfa arama butonu
    document.getElementById('search-btn').addEventListener('click', function(e) {
      e.preventDefault();
      // Arama formundaki değerleri al
      const brand = document.getElementById('search-brand').value.trim().toLowerCase();
      const model = document.getElementById('search-model').value.trim().toLowerCase();
      const price = document.getElementById('search-price').value;
      const year = document.getElementById('search-year').value;
      const city = document.getElementById('search-city').value.trim().toLowerCase();

// Filtrele
      let filtered = listings.filter(l => {
        let match = true;
        if (brand && !l.brand.toLowerCase().includes(brand)) match = false;
        if (model && !l.model.toLowerCase().includes(model)) match = false;
        if (price) {
          const [min, max] = price.split('-').map(Number);
          const ilanFiyat = Number(l.price.replace(/\D/g, ''));
          if (ilanFiyat < min || ilanFiyat > max) match = false;
        }
        if (year && String(l.year) !== year) match = false;
        if (city && !l.city.toLowerCase().includes(city)) match = false;
        return match;
      });

// İlanlar sayfasına geç ve filtreli sonuçları göster
      showListingsPage();
      renderListingResults(filtered, currentView);
    });

// İlanlar sayfası filtreleme formu
    const filterForm = document.getElementById('filter-form');
    if (filterForm) {
      filterForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const form = e.target;
        const brand = form.brand.value.trim().toLowerCase();
        const model = form.model.value.trim().toLowerCase();
        const price = form.price.value;
        const year = form.year.value;
        const city = form.city.value.trim().toLowerCase();

let filtered = listings.filter(l => {
          let match = true;
          if (brand && !l.brand.toLowerCase().includes(brand)) match = false;
          if (model && !l.model.toLowerCase().includes(model)) match = false;
          if (price) {
            const [min, max] = price.split('-').map(Number);
            const ilanFiyat = Number(l.price.replace(/\D/g, ''));
            if (ilanFiyat < min || ilanFiyat > max) match = false;
          }
          if (year && String(l.year) !== year) match = false;
          if (city && !l.city.toLowerCase().includes(city)) match = false;
          return match;
        });
        renderListingResults(filtered, currentView);
      });
    }

// Sayfa geçişleri
    function showHomePage() {
      document.getElementById('home-page').style.display = '';
      document.getElementById('listings-page').style.display = 'none';
      document.getElementById('nav-home').classList.add('active');
      document.getElementById('nav-listings').classList.remove('active');
      window.scrollTo(0,0);
    }
    function showListingsPage() {
      document.getElementById('home-page').style.display = 'none';
      document.getElementById('listings-page').style.display = '';
      document.getElementById('nav-home').classList.remove('active');
      document.getElementById('nav-listings').classList.add('active');
      window.scrollTo(0,0);
    }
    document.getElementById('nav-home').addEventListener('click', function(e) {
      e.preventDefault();
      showHomePage();
    });
    document.getElementById('nav-listings').addEventListener('click', function(e) {
      e.preventDefault();
      showListingsPage();
      renderListingResults(listings, currentView);
    });

// Grid/Liste görünüm geçişi
    let currentView = "grid";
    const gridBtn = document.getElementById('grid-view-btn');
    const listBtn = document.getElementById('list-view-btn');
    if (gridBtn && listBtn) {
      gridBtn.addEventListener('click', function() {
        currentView = "grid";
        gridBtn.classList.add('active');
        listBtn.classList.remove('active');
        renderListingResults(listings, currentView);
      });
      listBtn.addEventListener('click', function() {
        currentView = "list";
        listBtn.classList.add('active');
        gridBtn.classList.remove('active');
        renderListingResults(listings, currentView);
      });
    }

// Sayfa yüklenince ilgili fonksiyonları çağır
    window.addEventListener('DOMContentLoaded', () => {
      renderHomeListings();
      renderListingResults(listings, currentView);
    });
  </script>
</body>
</html>

CSS