Spaces:
Running
Running
güzel, peki https://emlak.alitan.net.tr/odbc/plakaListe.json dosyasının oluşturulma tarihini de alıp bunu en son güncelleme zamanı olarak bağlantı durumunun altına ekleyebilir misin. "Veri güncelleme kontrol paneli" yerine "Plaka Listesi Güncelleme Paneli" yaz. "Plaka Pulse Pro" gerek yok. Görselliği biraz daha değiştir daha keskin renkler kullan
f116a1e verified | <html lang="tr"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Plaka Listesi Güncelleme Paneli</title> | |
| <link rel="icon" href="icon-512.png"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="manifest" href="manifest.json"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Font --> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Animate.css --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| } | |
| .card { | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| background-color: rgba(26, 32, 44, 0.9); | |
| border-radius: 12px; | |
| border: 1px solid rgba(74, 85, 104, 0.5); | |
| color: white; | |
| } | |
| .btn-intranet { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); | |
| } | |
| .btn-remote { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); | |
| } | |
| .btn-hover:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.6; } | |
| 100% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center text-gray-800 p-4"> | |
| <div class="w-full max-w-md"> | |
| <!-- Header --> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Plaka Listesi</h1> | |
| <p class="text-gray-600">Güncelleme Paneli</p> | |
| </div> | |
| <!-- Card --> | |
| <div class="card p-8 shadow-xl"> | |
| <div class="flex flex-col gap-6"> | |
| <button onclick="fetchData('../odbc/plakaJSON.php')" | |
| class="btn-intranet text-white rounded-xl py-4 px-6 font-semibold text-lg flex items-center justify-center gap-3 transition-all duration-300 btn-hover"> | |
| <i class="fas fa-network-wired text-xl"></i> | |
| <span>Intranet Bağlantısı</span> | |
| </button> | |
| <button onclick="fetchData('https://emlak.alitan.net.tr/odbc/plakaJSON.php')" | |
| class="btn-remote text-white rounded-xl py-4 px-6 font-semibold text-lg flex items-center justify-center gap-3 transition-all duration-300 btn-hover"> | |
| <i class="fas fa-cloud text-xl"></i> | |
| <span>Remote Bağlantı</span> | |
| </button> | |
| <!-- Status Indicator --> | |
| <div class="flex flex-col items-center gap-2 mt-4"> | |
| <div class="flex items-center gap-2"> | |
| <div id="connection-status" class="h-3 w-3 rounded-full bg-gray-300"></div> | |
| <span class="text-sm text-gray-300">Bağlantı durumu</span> | |
| </div> | |
| <div id="last-updated" class="text-xs text-gray-400 italic">Son güncelleme: -</div> | |
| </div> | |
| </div> | |
| <!-- Result Area --> | |
| <div id="result" class="mt-6 text-center"></div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="text-center mt-8 text-sm text-gray-500"> | |
| <p>© 2023 Plaka Listesi | v1.0.0</p> | |
| </div> | |
| </div> | |
| <script> | |
| async function getLastUpdated() { | |
| try { | |
| const response = await fetch('https://emlak.alitan.net.tr/odbc/plakaListe.json'); | |
| const lastModified = response.headers.get('last-modified'); | |
| const lastUpdatedDiv = document.getElementById('last-updated'); | |
| if (lastModified) { | |
| const date = new Date(lastModified); | |
| lastUpdatedDiv.textContent = `Son güncelleme: ${date.toLocaleString('tr-TR')}`; | |
| } | |
| } catch (error) { | |
| console.error('Son güncelleme tarihi alınamadı:', error); | |
| } | |
| } | |
| async function fetchData(url) { | |
| const resultDiv = document.getElementById('result'); | |
| const statusIndicator = document.getElementById('connection-status'); | |
| // Reset UI | |
| statusIndicator.classList.remove('bg-green-500', 'bg-red-500', 'pulse-animation'); | |
| statusIndicator.classList.add('bg-yellow-500', 'pulse-animation'); | |
| resultDiv.innerHTML = ` | |
| <div class="animate__animated animate__fadeIn p-4 bg-blue-50 rounded-lg"> | |
| <div class="flex items-center justify-center gap-2 text-blue-600"> | |
| <i class="fas fa-circle-notch fa-spin"></i> | |
| <span class="font-medium">Veriler yükleniyor...</span> | |
| </div> | |
| </div> | |
| `; | |
| try { | |
| const response = await fetch(url); | |
| const data = await response.json(); | |
| if (data.status === "ok") { | |
| statusIndicator.classList.remove('bg-yellow-500', 'pulse-animation'); | |
| statusIndicator.classList.add('bg-green-500'); | |
| resultDiv.innerHTML = ` | |
| <div class="animate__animated animate__fadeInUp p-4 bg-green-50 rounded-lg border border-green-200"> | |
| <div class="flex flex-col items-center text-green-700"> | |
| <i class="fas fa-check-circle text-3xl mb-2"></i> | |
| <h3 class="font-bold text-lg">Başarılı!</h3> | |
| <p class="text-sm mt-1">${data.count} kayıt başarıyla alındı</p> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| statusIndicator.classList.remove('bg-yellow-500', 'pulse-animation'); | |
| statusIndicator.classList.add('bg-red-500'); | |
| resultDiv.innerHTML = ` | |
| <div class="animate__animated animate__fadeInUp p-4 bg-red-50 rounded-lg border border-red-200"> | |
| <div class="flex flex-col items-center text-red-700"> | |
| <i class="fas fa-exclamation-circle text-3xl mb-2"></i> | |
| <h3 class="font-bold text-lg">Hata Oluştu!</h3> | |
| <p class="text-sm mt-1">${data.count} kayıt alınabildi</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } catch (error) { | |
| statusIndicator.classList.remove('bg-yellow-500', 'pulse-animation'); | |
| statusIndicator.classList.add('bg-red-500'); | |
| resultDiv.innerHTML = ` | |
| <div class="animate__animated animate__fadeInUp p-4 bg-red-50 rounded-lg border border-red-200"> | |
| <div class="flex flex-col items-center text-red-700"> | |
| <i class="fas fa-times-circle text-3xl mb-2"></i> | |
| <h3 class="font-bold text-lg">Bağlantı Hatası!</h3> | |
| <p class="text-sm mt-1">${error.message}</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| // Service Worker registration | |
| if ("serviceWorker" in navigator) { | |
| navigator.serviceWorker.register("service-worker.js") | |
| .then(() => console.log("Service Worker kayıtlı")) | |
| .catch(err => console.error("SW hatası:", err)); | |
| } | |
| // Initial connection check and get last updated | |
| window.addEventListener('load', () => { | |
| getLastUpdated(); | |
| const statusIndicator = document.getElementById('connection-status'); | |
| if (navigator.onLine) { | |
| statusIndicator.classList.remove('bg-gray-300'); | |
| statusIndicator.classList.add('bg-green-500'); | |
| } else { | |
| statusIndicator.classList.remove('bg-gray-300'); | |
| statusIndicator.classList.add('bg-red-500'); | |
| } | |
| }); | |
| // Online/offline detection | |
| window.addEventListener('online', () => { | |
| const statusIndicator = document.getElementById('connection-status'); | |
| statusIndicator.classList.remove('bg-red-500'); | |
| statusIndicator.classList.add('bg-green-500'); | |
| }); | |
| window.addEventListener('offline', () => { | |
| const statusIndicator = document.getElementById('connection-status'); | |
| statusIndicator.classList.remove('bg-green-500'); | |
| statusIndicator.classList.add('bg-red-500'); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |