Plateforme d'achat et de vente de voitures : annonces, filtrage

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 September 2023

Formulaire de connexion au Glassmorphisme moderne en HTML et CSS

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>

Plateforme d'achat et de vente de voitures : annonces, filtrage

Recommandé

Effet de bouton bubble

Clone de Pinterest

Formulaire de connexion au Glassmorphisme moderne en HTML et CSS

HTML

CSS

JS

Recommandé

Effet de bouton bubble

Clone de Pinterest

Formulaire de connexion au Glassmorphisme moderne en HTML et CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS