Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pick_uP Prototipi</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'dark-primary': '#0f172a', | |
| 'dark-secondary': '#1e293b', | |
| 'dark-tertiary': '#334155', | |
| 'neon-primary': '#dfff00', | |
| 'neon-secondary': '#adff00', | |
| 'glass': 'rgba(30, 41, 59, 0.5)', | |
| 'glow': '#e0ff9e', | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'gradient': 'gradient 15s ease infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| gradient: { | |
| '0%, 100%': { 'background-position': '0% 50%' }, | |
| '50%': { 'background-position': '100% 50%' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #0b1120 0%, #111827 100%); | |
| color: #e2e8f0; | |
| overflow-x: hidden; | |
| } | |
| /* Glow Effect */ | |
| .glow-effect { | |
| position: relative; | |
| } | |
| .glow-effect::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -5px; | |
| background: linear-gradient(45deg, #dfff00, #adff00, #dfff00); | |
| border-radius: inherit; | |
| filter: blur(20px); | |
| opacity: 0.3; | |
| z-index: -1; | |
| animation: gradient 3s ease infinite; | |
| background-size: 200% 200%; | |
| } | |
| /* Neon Elements */ | |
| .neon-accent { | |
| color: #dfff00; | |
| text-shadow: 0 0 10px rgba(223, 255, 0, 0.7); | |
| } | |
| .neon-border { | |
| border: 1px solid #dfff00; | |
| box-shadow: 0 0 15px rgba(223, 255, 0, 0.5), inset 0 0 10px rgba(223, 255, 0, 0.3); | |
| } | |
| /* Cards */ | |
| .card { | |
| background-color: rgba(30, 41, 59, 0.5); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| display: flex; | |
| flex-direction: column; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px) scale(1.01); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| /* Chat Interface */ | |
| .chat-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(21, 27, 44, 0.8) 0%, rgba(14, 22, 39, 0.8) 100%); | |
| border: 1px solid rgba(223, 255, 0, 0.2); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(223, 255, 0, 0.1); | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| scroll-behavior: smooth; | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 15px 20px; | |
| margin-bottom: 20px; | |
| border-radius: 18px; | |
| position: relative; | |
| animation: fadeIn 0.3s ease-out; | |
| line-height: 1.5; | |
| } | |
| .user-message { | |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); | |
| align-self: flex-end; | |
| border-top-right-radius: 5px; | |
| margin-left: auto; | |
| border: 1px solid rgba(223, 255, 0, 0.15); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .user-message::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, transparent 50%, rgba(223, 255, 0, 0.05) 100%); | |
| pointer-events: none; | |
| } | |
| .ai-message { | |
| background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%); | |
| align-self: flex-start; | |
| border-top-left-radius: 5px; | |
| border: 1px solid rgba(106, 130, 251, 0.15); | |
| } | |
| .message-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| margin-right: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .user-avatar { | |
| background: linear-gradient(135deg, #dfff00 0%, #a9ff01 100%); | |
| color: #0f172a; | |
| } | |
| .ai-avatar { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| color: white; | |
| } | |
| .time-stamp { | |
| font-size: 11px; | |
| opacity: 0.6; | |
| } | |
| .chat-input-area { | |
| padding: 20px; | |
| background: rgba(15, 23, 42, 0.6); | |
| border-top: 1px solid rgba(255, 255, 255, 0.07); | |
| } | |
| .message-input { | |
| background: rgba(30, 41, 59, 0.6); | |
| border: 1px solid rgba(94, 234, 212, 0.1); | |
| padding: 12px 20px; | |
| border-radius: 16px; | |
| color: white; | |
| width: 100%; | |
| resize: none; | |
| min-height: 60px; | |
| } | |
| .message-input:focus { | |
| outline: none; | |
| border-color: rgba(223, 255, 0, 0.4); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| padding: 10px 22px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| border: none; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #dfff00 0%, #a9ff01 100%); | |
| color: #0f172a; | |
| box-shadow: 0 4px 15px rgba(223, 255, 0, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 7px 20px rgba(223, 255, 0, 0.4); | |
| } | |
| .btn-secondary { | |
| background: rgba(30, 41, 59, 0.8); | |
| border: 1px solid rgba(223, 255, 0, 0.2); | |
| color: #dfff00; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(30, 41, 59, 1); | |
| border-color: rgba(223, 255, 0, 0.4); | |
| } | |
| /* Pulse Animation for Loading */ | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| /* Floating animation */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0px); } | |
| } | |
| /* Particle Background (for hero section) */ | |
| .particles { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .particles::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 100%; | |
| background: radial-gradient(circle, rgba(223,255,0,0.05) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| /* Hero Section */ | |
| .hero-section { | |
| padding: 80px 0; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .hero-section h1 { | |
| font-size: 4rem; | |
| font-weight: 900; | |
| margin-bottom: 1rem; | |
| letter-spacing: -0.025em; | |
| } | |
| .hero-section p { | |
| font-size: 1.25rem; | |
| opacity: 0.8; | |
| max-width: 600px; | |
| margin: 0 auto 2rem; | |
| } | |
| /* Dashboard Tiles */ | |
| .dashboard-tile { | |
| background: linear-gradient(135deg, rgba(21, 27, 44, 0.7) 0%, rgba(14, 22, 39, 0.7) 100%); | |
| backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| padding: 25px; | |
| transition: all 0.3s ease; | |
| height: 100%; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .dashboard-tile::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(223,255,0,0.05) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .dashboard-tile:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| border-color: rgba(223, 255, 0, 0.3); | |
| } | |
| /* Neon highlight */ | |
| .highlight { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .highlight::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 10%; | |
| background: linear-gradient(90deg, #dfff00 0%, transparent 100%); | |
| opacity: 0.3; | |
| z-index: -1; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .hero-section h1 { | |
| font-size: 2.5rem; | |
| } | |
| .chat-container { | |
| border-radius: 15px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-dark-primary text-gray-200"> | |
| <!-- Hero Section --> | |
| <header class="particles py-16 md:py-24 px-4 text-center"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-black tracking-tight mb-4 neon-accent"> | |
| Pick<span class="neon-accent">_</span>uP <span class="text-white">AI</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10"> | |
| Yüz Görselinden İçerik Bulma ve Analiz Aracı | |
| </p> | |
| <div class="max-w-md mx-auto rounded-2xl p-1 bg-gradient-to-r from-neon-primary to-cyan-400"> | |
| <div class="bg-dark-tertiary rounded-2xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="text-gray-400">Dil Seçin:</span> | |
| <div class="flex gap-2"> | |
| <button class="px-4 py-2 rounded-lg bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 font-medium text-white"> | |
| TR | |
| </button> | |
| <button class="px-4 py-2 rounded-lg bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 font-medium text-gray-400"> | |
| EN | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="btn btn-primary w-full"> | |
| <i class="fas fa-cloud-upload-alt mr-2"></i> | |
| Görsel Yükle ve Analiz Et | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <main class="max-w-7xl mx-auto px-4 pb-20"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16"> | |
| <!-- Upload Tile --> | |
| <div class="dashboard-tile"> | |
| <div class="flex flex-col h-full"> | |
| <div class="bg-gradient-to-r from-cyan-500 to-blue-500 p-2 rounded-xl w-12 h-12 flex items-center justify-center text-xl mb-4"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Görsel/Video Yükleme</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Görsel veya video dosyanızı yükleyin. AI güçlü görsel tanıma teknolojisi ile analiz edecek. | |
| </p> | |
| <div class="mt-auto"> | |
| <button class="btn btn-secondary w-full"> | |
| <i class="fas fa-upload mr-2"></i> | |
| Dosya Seç | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analysis Tile --> | |
| <div class="dashboard-tile"> | |
| <div class="flex flex-col h-full"> | |
| <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-2 rounded-xl w-12 h-12 flex items-center justify-center text-xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Derinlemesine Analiz</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Görseldeki yüzler, nesneler, metinler ve bağlam derinlemesine analiz edilir. | |
| </p> | |
| <div class="mt-auto"> | |
| <button class="btn btn-primary w-full"> | |
| <i class="fas fa-play mr-2"></i> | |
| Analiz Başlat | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Tile --> | |
| <div class="dashboard-tile"> | |
| <div class="flex flex-col h-full"> | |
| <div class="bg-gradient-to-r from-green-500 to-teal-500 p-2 rounded-xl w-12 h-12 flex items-center justify-center text-xl mb-4"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Kapsamlı Rapor</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Analiz sonuçları detaylı rapor olarak sunulur ve paylaşılabilir. | |
| </p> | |
| <div class="mt-auto"> | |
| <button class="btn btn-secondary w-full"> | |
| <i class="fas fa-download mr-2"></i> | |
| Raporu İndir | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Demo Section --> | |
| <div class="bg-gradient-to-br from-dark-secondary to-dark-tertiary rounded-3xl overflow-hidden shadow-2xl mb-16"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 p-8 bg-gradient-to-b from-dark-primary to-dark-secondary"> | |
| <h2 class="text-3xl font-bold mb-6 neon-accent highlight">AI Chat Asistanı</h2> | |
| <p class="text-gray-400 mb-8"> | |
| Yüklediğiniz görsel hakkında sohbet edebileceğiniz akıllı asistan. Soru sorun, yaratıcı içerik oluşturun veya detaylı analiz isteyin. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-xs"></i> | |
| </div> | |
| <span class="font-medium">Sohbet özellikleri:</span> | |
| </div> | |
| <ul class="space-y-3 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-neon-primary mt-1 mr-2"></i> | |
| Görsel içeriğini detaylı analiz | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-neon-primary mt-1 mr-2"></i> | |
| Kişi tanımlama ve bilgi sorgulama | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-neon-primary mt-1 mr-2"></i> | |
| Yaratıcı içerik üretme (hikaye, başlık, vb.) | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-neon-primary mt-1 mr-2"></i> | |
| Görseldeki metinleri tanıma (OCR) | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Chat Interface --> | |
| <div class="md:w-2/3"> | |
| <div class="chat-container h-[500px]"> | |
| <div class="chat-messages"> | |
| <div class="message ai-message"> | |
| <div class="message-header"> | |
| <div class="avatar ai-avatar"> | |
| AI | |
| </div> | |
| <h4 class="font-semibold">Pick_uP Asistanı</h4> | |
| <span class="time-stamp ml-auto">12:04</span> | |
| </div> | |
| <p>Merhaba! Lütfen analiz etmek istediğiniz görseli yükleyin. Size içerik, kişiler, metinler ve olası bağlam hakkında detaylı bilgi verebilirim.</p> | |
| </div> | |
| <div class="message user-message"> | |
| <div class="message-header"> | |
| <div class="avatar user-avatar"> | |
| S | |
| </div> | |
| <h4 class="font-semibold">Siz</h4> | |
| <span class="time-stamp ml-auto">12:08</span> | |
| </div> | |
| <p>Bu görselde kimin yer aldığını ve görselin nerede çekildiğini tespit edebilir misin?</p> | |
| </div> | |
| <div class="message ai-message"> | |
| <div class="message-header"> | |
| <div class="avatar ai-avatar"> | |
| AI | |
| </div> | |
| <h4 class="font-semibold">Pick_uP Asistanı</h4> | |
| <span class="time-stamp ml-auto">12:09</span> | |
| </div> | |
| <p>Tabii ki! Görselde tanınmış aktör Tom Hanks yer alıyor. Arka plandaki özgürlük heykeli ve New York siluetinden yola çıkarak bu görselin Manhattan'da çekildiğini tespit ediyorum. Detaylı analiz:</p> | |
| <div class="mt-3 bg-gray-800 p-3 rounded-lg"> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-user text-blue-400 mt-1 mr-2"></i> | |
| <span><strong>Kişi:</strong> Tom Hanks (Yüz tanıma doğruluk oranı: %96)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-green-400 mt-1 mr-2"></i> | |
| <span><strong>Lokasyon:</strong> Battery Park, Manhattan, New York</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-calendar text-yellow-400 mt-1 mr-2"></i> | |
| <span><strong>Tahmini Tarih:</strong> Eylül 2019</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="message user-message"> | |
| <div class="message-header"> | |
| <div class="avatar user-avatar"> | |
| S | |
| </div> | |
| <h4 class="font-semibold">Siz</h4> | |
| <span class="time-stamp ml-auto">12:11</span> | |
| </div> | |
| <p>Bu görsel için yaratıcı bir sosyal medya başlığı oluşturabilir misin?</p> | |
| </div> | |
| <div class="message ai-message"> | |
| <div class="message-header"> | |
| <div class="avatar ai-avatar"> | |
| AI | |
| </div> | |
| <h4 class="font-semibold">Pick_uP Asistanı</h4> | |
| <span class="time-stamp ml-auto">12:12</span> | |
| </div> | |
| <p>Elbette! İşte birkaç seçenek:</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3"> | |
| <div class="bg-gradient-to-br from-purple-900 to-purple-700 p-4 rounded-lg"> | |
| <i class="fas fa-theater-masks text-purple-300 mb-2"></i> | |
| <p class="font-medium">"Bir Oscar sahibinin New York tutkusu! 🗽 Tom Hanks Manhattan'da tarihe tanıklık ediyor."</p> | |
| </div> | |
| <div class="bg-gradient-to-br from-cyan-900 to-cyan-700 p-4 rounded-lg"> | |
| <i class="fas fa-city text-cyan-300 mb-2"></i> | |
| <p class="font-medium">"New York ruhu başka bir boyutta! Tom Hanks ile özgürlük yolculuğu 🗽🇺🇸"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-input-area"> | |
| <div class="flex gap-3"> | |
| <input type="text" placeholder="Pick_uP AI ile sohbet edin..." class="message-input"> | |
| <button class="btn btn-primary"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-center mt-3"> | |
| <button class="text-xs text-gray-500 flex items-center"> | |
| <i class="fas fa-plus-circle mr-1"></i> Görsel Ekle | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-3xl font-bold mb-4 neon-accent">Neden Pick_uP AI?</h2> | |
| <p class="text-gray-500 max-w-2xl mx-auto mb-16">Gelişmiş teknolojimizle görsel ve videolarınızdan en yüksek verimi alın</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gradient-to-br from-dark-secondary to-dark-tertiary p-8 rounded-2xl border border-gray-800 hover:border-neon-primary transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-xl flex items-center justify-center text-2xl mb-6 mx-auto"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Gelişmiş Yapay Zeka</h3> | |
| <p class="text-gray-400"> | |
| Gemini AI teknolojisiyle görsel içerik analizi, nesne tanıma ve bağlam tespitinde üstün performans. | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-br from-dark-secondary to-dark-tertiary p-8 rounded-2xl border border-gray-800 hover:border-neon-primary transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-2xl mb-6 mx-auto"> | |
| <i class="fas fa-search-plus"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Derinlemesine Araştırma</h3> | |
| <p class="text-gray-400"> | |
| Görselinizin kökenini, kişilerini ve bağlamını derinlemesine araştıran güçlü OSINT araçları. | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-br from-dark-secondary to-dark-tertiary p-8 rounded-2xl border border-gray-800 hover:border-neon-primary transition-all"> | |
| <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-xl flex items-center justify-center text-2xl mb-6 mx-auto"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Hızlı ve Kullanışlı</h3> | |
| <p class="text-gray-400"> | |
| Analiz süreçlerinde zaman tasarrufu. Anında sonuçlarla verimli bir deneyim. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-gradient-to-br from-dark-secondary to-gray-900 rounded-3xl p-10 text-center mb-16 relative overflow-hidden"> | |
| <div class="absolute -right-20 -top-20 w-64 h-64 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-10 blur-3xl"></div> | |
| <div class="absolute -left-20 -bottom-20 w-64 h-64 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 opacity-10 blur-3xl"></div> | |
| <h2 class="text-3xl font-bold mb-6 neon-accent">Deneyim Farkını Hissedin!</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto mb-10"> | |
| Pick_uP AI ile görsel içeriklerinizden daha önce hiç olmadığı şekilde değer elde edin. | |
| </p> | |
| <button class="btn btn-primary px-10 py-4 text-lg"> | |
| <i class="fas fa-play mr-3"></i> | |
| Ücretsiz Başlayın | |
| </button> | |
| </div> | |
| </main> | |
| <footer class="py-10 border-t border-gray-800 text-center"> | |
| <div class="max-w-7xl mx-auto px-4"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="text-3xl font-black uppercase neon-accent"> | |
| Pick<span class="neon-accent">_</span>uP | |
| </div> | |
| </div> | |
| <p class="text-gray-500 mb-8"> | |
| Yüz Görselinden İçerik Bulma ve Analiz Aracı | |
| </p> | |
| <div class="flex justify-center space-x-6 mb-6"> | |
| <a href="#" class="text-gray-500 hover:text-neon-primary transition-all"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-neon-primary transition-all"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-neon-primary transition-all"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-neon-primary transition-all"> | |
| <i class="fab fa-discord text-xl"></i> | |
| </a> | |
| </div> | |
| <div class="text-gray-600 text-sm"> | |
| © 2023 Pick_uP AI. Tüm hakları saklıdır. | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-dark-tertiary border-t border-gray-800"> | |
| <div class="flex justify-around p-3"> | |
| <button class="flex flex-col items-center text-xs"> | |
| <div class="w-10 h-10 bg-dark-secondary rounded-lg flex items-center justify-center mb-1"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <span>Ana Sayfa</span> | |
| </button> | |
| <button class="flex flex-col items-center text-xs text-neon-primary"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-dark-secondary to-gray-900 rounded-lg flex items-center justify-center mb-1 border border-neon-primary"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <span>Chat</span> | |
| </button> | |
| <button class="flex flex-col items-center text-xs"> | |
| <div class="w-10 h-10 bg-dark-secondary rounded-lg flex items-center justify-center mb-1"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <span>Analiz</span> | |
| </button> | |
| <button class="flex flex-col items-center text-xs"> | |
| <div class="w-10 h-10 bg-dark-secondary rounded-lg flex items-center justify-center mb-1"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <span>Ayarlar</span> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple chat functionality for demo | |
| const chatMessages = document.querySelector('.chat-messages'); | |
| const chatInput = document.querySelector('.message-input'); | |
| function addMessage(text, isUser) { | |
| const now = new Date(); | |
| const hours = now.getHours().toString().padStart(2, '0'); | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| const messageElement = document.createElement('div'); | |
| messageElement.classList.add('message'); | |
| messageElement.classList.add(isUser ? 'user-message' : 'ai-message'); | |
| messageElement.innerHTML = ` | |
| <div class="message-header"> | |
| <div class="avatar ${isUser ? 'user-avatar' : 'ai-avatar'}"> | |
| ${isUser ? 'S' : 'AI'} | |
| </div> | |
| <h4 class="font-semibold">${isUser ? 'Siz' : 'Pick_uP Asistanı'}</h4> | |
| <span class="time-stamp ml-auto">${hours}:${minutes}</span> | |
| </div> | |
| <p>${text}</p> | |
| `; | |
| chatMessages.appendChild(messageElement); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Submit message on enter (shift+enter for new line) | |
| chatInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| const message = chatInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| chatInput.value = ''; | |
| // Add automated response after a delay | |
| setTimeout(() => { | |
| const responses = [ | |
| "İlginç bir soru! Görseldeki içerikleri analiz ederek detaylı bilgi vermeye çalışıyorum...", | |
| "Teşekkür ederim! Görseliniz üzerinde çalışıyorum, kısa sürede sonuçları aktaracağım.", | |
| "Bu soru için detaylı bir araştırma yapıyorum, lütfen birkaç saniye bekleyin...", | |
| "Harika bir görsel! Size bu görsel hakkında tüm detayları aktarmak için çalışıyorum." | |
| ]; | |
| const response = responses[Math.floor(Math.random() * responses.length)]; | |
| addMessage(response, false); | |
| }, 1000); | |
| } | |
| } | |
| }); | |
| // Animation effects for dashboard tiles | |
| document.querySelectorAll('.dashboard-tile').forEach((tile, index) => { | |
| tile.style.animationDelay = `${index * 0.2}s`; | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=merlins550/pick-up" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |