Spaces:
Running
Running
sitenin ismi kayseri pazar olsun amacı alıcı ve satıcıları buluşturmak ve satışlar yapmak sitenin amacı facebookda ki marketplacenin alternatifi olmak bu yüzden orada olan bütün özellikler burada da olsun kendine has giriş yapma kayıt olma ve satıcılar ile alıcılar arasında pazarlık teklif gönderme ve sohbet etme imkanları olsun satıcılar konum girebilsin ürün eklerken ürün ürün açıklaması konum vb girme imkanı olsun ve en önemlisi site kayseride ki yerel halkı barındıracak o yüzden kayseri ve çevresinin konumları eksiksiz mevcut olsun yaparken hem önyüz hemde arka yüzünü yapmanı rica ediyorum aşagıda db bilgilerim mevcut
717cc3c verified | <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KayseriPazarı - Ürün Ekle</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> | |
| <style> | |
| #map { height: 300px; } | |
| .input-focus:focus { | |
| border-color: #FFD700; | |
| box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-primary-500 font-bold text-2xl">KayseriPazarı 🥨</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Ana Sayfa</a> | |
| <a href="product_add.html" class="nav-link border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Ürün Ekle</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <div class="ml-4 relative"> | |
| <button class="flex items-center text-sm rounded-full focus:outline-none"> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="Profil"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Product Form --> | |
| <div class="max-w-3xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-white shadow rounded-lg p-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Yeni Ürün Ekle</h2> | |
| <form id="productForm" class="space-y-6"> | |
| <!-- Product Images --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Ürün Resimleri</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-primary-600 hover:text-primary-500 focus-within:outline-none"> | |
| <span>Resimleri yükle</span> | |
| <input id="file-upload" name="file-upload" type="file" class="sr-only" multiple> | |
| </label> | |
| <p class="pl-1">veya sürükleyip bırakın</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PNG, JPG, GIF en fazla 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Details --> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> | |
| <div class="col-span-2"> | |
| <label for="product-title" class="block text-sm font-medium text-gray-700">Ürün Başlığı</label> | |
| <input type="text" name="product-title" id="product-title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none input-focus sm:text-sm" placeholder="Örnek: Samsung Galaxy S21"> | |
| </div> | |
| <div> | |
| <label for="product-category" class="block text-sm font-medium text-gray-700">Kategori</label> | |
| <select id="product-category" name="product-category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none input-focus sm:text-sm rounded-md"> | |
| <option>Elektronik</option> | |
| <option>Moda</option> | |
| <option>Ev & Yaşam</option> | |
| <option>Spor & Outdoor</option> | |
| <option>Otomotiv</option> | |
| <option>Kitap & Dergi</option> | |
| <option>Diğer</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="product-condition" class="block text-sm font-medium text-gray-700">Durum</label> | |
| <select id="product-condition" name="product-condition" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none input-focus sm:text-sm rounded-md"> | |
| <option>Yeni</option> | |
| <option>Az Kullanılmış</option> | |
| <option>İyi Durumda</option> | |
| <option>Orta Durumda</option> | |
| <option>Tamir Gerekiyor</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="product-price" class="block text-sm font-medium text-gray-700">Fiyat (₺)</label> | |
| <input type="number" name="product-price" id="product-price" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none input-focus sm:text-sm" placeholder="Örnek: 4500"> | |
| </div> | |
| <div class="col-span-2"> | |
| <label for="product-description" class="block text-sm font-medium text-gray-700">Ürün Açıklaması</label> | |
| <textarea id="product-description" name="product-description" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none input-focus sm:text-sm" placeholder="Ürününüzü detaylı bir şekilde anlatın"></textarea> | |
| </div> | |
| </div> | |
| <!-- Location --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Konum</label> | |
| <div id="map" class="rounded-md border border-gray-300"></div> | |
| <div class="mt-2 grid grid-cols-1 gap-6 sm:grid-cols-2"> | |
| <div> | |
| <label for="city" class="block text-sm font-medium text-gray-700">İlçe</label> | |
| <select id="city" name="city" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none input-focus sm:text-sm rounded-md"> | |
| <option>Melikgazi</option> | |
| <option>Kocasinan</option> | |
| <option>Talas</option> | |
| <option>Hacılar</option> | |
| <option>İncesu</option> | |
| <option>Develi</option> | |
| <option>Yahyalı</option> | |
| <option>Bünyan</option> | |
| <option>Sarıoğlan</option> | |
| <option>Sarız</option> | |
| <option>Felahiye</option> | |
| <option>Tomarza</option> | |
| <option>Özvatan</option> | |
| <option>Pınarbaşı</option> | |
| <option>Akkışla</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="neighborhood" class="block text-sm font-medium text-gray-700">Mahalle</label> | |
| <input type="text" id="neighborhood" name="neighborhood" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none input-focus sm:text-sm" placeholder="Mahalle adı"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Negotiation Options --> | |
| <div class="pt-6 border-t border-gray-200"> | |
| <fieldset> | |
| <legend class="text-base font-medium text-gray-900">Pazarlık Seçenekleri</legend> | |
| <div class="mt-4 space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="allow-negotiation" name="allow-negotiation" type="checkbox" class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded" checked> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="allow-negotiation" class="font-medium text-gray-700">Pazarlığa açık</label> | |
| <p class="text-gray-500">Alıcıların size teklif göndermesine izin verin</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="direct-chat" name="direct-chat" type="checkbox" class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded" checked> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="direct-chat" class="font-medium text-gray-700">Direkt sohbet</label> | |
| <p class="text-gray-500">Alıcıların sizinle doğrudan iletişim kurmasına izin verin</p> | |
| </div> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div> | |
| <!-- Submit Button --> | |
| <div class="pt-6"> | |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| Ürünü Yayınla | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize map | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Default location - Kayseri coordinates | |
| const map = L.map('map').setView([38.7322, 35.4853], 12); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // Add marker | |
| const marker = L.marker([38.7322, 35.4853], { | |
| draggable: true | |
| }).addTo(map); | |
| marker.on('dragend', function(event) { | |
| const marker = event.target; | |
| const position = marker.getLatLng(); | |
| console.log(position); | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |