Spaces:
Running
Running
| <html lang="tr" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HackLink Market V1 | Premium SEO Link Platform</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Vue 3 --> | |
| <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide-vue-next@latest"></script> | |
| <!-- Google Fonts: Inter for that "Refined Admin" feel --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --slate-950: #020617; | |
| --slate-900: #0f172a; | |
| --indigo-600: #4f46e5; | |
| --indigo-500: #6366f1; | |
| --amber-500: #f59e0b; | |
| --emerald-500: #10b981; | |
| --glass: rgba(15, 23, 42, 0.6); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--slate-950); | |
| color: #e2e8f0; | |
| overflow-x: hidden; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--slate-950); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--slate-800); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--slate-700); | |
| } | |
| /* Glassmorphism Utilities */ | |
| .glass-panel { | |
| background: var(--glass); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .glass-card { | |
| background: rgba(30, 41, 59, 0.4); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| } | |
| /* Animations */ | |
| .fade-enter-active, .fade-leave-active { | |
| transition: opacity 0.3s ease; | |
| } | |
| .fade-enter-from, .fade-leave-to { | |
| opacity: 0; | |
| } | |
| .slide-enter-active, .slide-leave-active { | |
| transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .slide-enter-from, .slide-leave-to { | |
| transform: translateX(-100%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app" class="flex h-screen w-full"> | |
| <!-- SIDEBAR --> | |
| <aside :class="['fixed md:static inset-y-0 left-0 z-50 w-64 glass-panel transition-transform duration-300 ease-in-out transform ' + (sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0')]" class="hidden md:flex flex-col"> | |
| <!-- Logo --> | |
| <div class="h-16 flex items-center px-6 border-b border-white/5"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500/20"> | |
| <lucide-icon name="link" class="text-white w-5 h-5" /> | |
| </div> | |
| <span class="font-bold text-xl tracking-tight text-white">HackLink<span class="text-indigo-400">.Market</span></span> | |
| </div> | |
| <button @click="sidebarOpen = false" class="md:hidden ml-auto text-gray-400 hover:text-white"> | |
| <lucide-icon name="x" class="w-6 h-6" /> | |
| </button> | |
| </div> | |
| <!-- Nav Links --> | |
| <nav class="flex-1 overflow-y-auto py-6 px-3 space-y-1"> | |
| <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Platform</p> | |
| <button v-for="link in navLinks" :key="link.name" | |
| @click="navigate(link.path)" | |
| class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 group" | |
| :class="activePage === link.path ? 'bg-indigo-600/10 text-indigo-400 border border-indigo-500/20' : 'text-gray-400 hover:bg-white/5 hover:text-white'"> | |
| <lucide-icon :name="link.icon" class="w-5 h-5 transition-transform group-hover:scale-110" /> | |
| <span class="font-medium">{{ link.name }}</span> | |
| </button> | |
| <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-2">Management</p> | |
| <button v-for="adminLink in adminNavLinks" :key="adminLink.name" | |
| @click="navigate(adminLink.path)" | |
| class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 group" | |
| :class="activePage === adminLink.path ? 'bg-emerald-600/10 text-emerald-400 border border-emerald-500/20' : 'text-gray-400 hover:bg-white/5 hover:text-white'"> | |
| <lucide-icon :name="adminLink.icon" class="w-5 h-5 transition-transform group-hover:scale-110" /> | |
| <span class="font-medium">{{ adminLink.name }}</span> | |
| </button> | |
| </nav> | |
| <!-- User Mini-Profile in Sidebar --> | |
| <div class="p-4 border-t border-white/5"> | |
| <div class="flex items-center gap-3 p-2 rounded-lg glass-card"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-slate-700 to-slate-600 flex items-center justify-center text-white font-bold"> | |
| {{ user.name.charAt(0) }} | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-white truncate">{{ user.name }}</p> | |
| <p class="text-xs text-gray-400 truncate">{{ user.email }}</p> | |
| </div> | |
| <lucide-icon name="chevron-right" class="w-4 h-4 text-gray-500" /> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- MAIN CONTENT --> | |
| <div class="flex-1 flex flex-col h-screen overflow-hidden relative"> | |
| <!-- HEADER --> | |
| <header class="h-16 glass-panel border-b border-white/5 flex items-center justify-between px-4 md:px-8 z-40"> | |
| <div class="flex items-center gap-4"> | |
| <button @click="sidebarOpen = true" class="md:hidden p-2 text-gray-400 hover:text-white rounded-lg hover:bg-white/10"> | |
| <lucide-icon name="menu" class="w-6 h-6" /> | |
| </button> | |
| <h2 class="text-xl font-semibold text-white hidden sm:block">{{ pageTitles[activePage] }}</h2> | |
| </div> | |
| <div class="flex items-center gap-4 md:gap-6"> | |
| <!-- Balance Display --> | |
| <div class="flex items-center gap-3 px-4 py-2 glass-card rounded-full border border-white/5 shadow-sm"> | |
| <div class="flex flex-col items-end"> | |
| <span class="text-[10px] uppercase tracking-wider text-gray-400 font-semibold">Bakiye</span> | |
| <span class="text-lg font-bold text-emerald-400 leading-none">{{ user.balance.toLocaleString() }} ₺</span> | |
| </div> | |
| <div class="h-8 w-px bg-white/10 mx-2"></div> | |
| <button @click="showTopUpModal = true" class="p-2 rounded-full bg-indigo-600 hover:bg-indigo-500 text-white transition-colors shadow-lg shadow-indigo-600/20"> | |
| <lucide-icon name="plus-circle" class="w-5 h-5" /> | |
| </button> | |
| </div> | |
| <!-- Notifications --> | |
| <div class="relative"> | |
| <button @click="toggleNotifications" class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors relative"> | |
| <lucide-icon name="bell" class="w-6 h-6" /> | |
| <span v-if="notifications.length > 0" class="absolute top-1.5 right-1.5 w-2.5 h-2.5 bg-amber-500 rounded-full border-2 border-slate-900 animate-pulse"></span> | |
| </button> | |
| <!-- Notification Dropdown --> | |
| <div v-if="showNotifDropdown" class="absolute right-0 mt-2 w-80 glass-panel rounded-xl shadow-2xl border border-white/5 overflow-hidden animate-in fade-in zoom-in duration-200 origin-top-right"> | |
| <div class="px-4 py-3 border-b border-white/5 flex justify-between items-center"> | |
| <h3 class="font-semibold text-white">Bildirimler</h3> | |
| <button @click="clearNotifications" class="text-xs text-indigo-400 hover:text-indigo-300">Tümünü Temizle</button> | |
| </div> | |
| <div class="max-h-80 overflow-y-auto p-2 space-y-2"> | |
| <div v-for="notif in notifications" :key="notif.id" class="p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5"> | |
| <div class="flex items-start gap-3"> | |
| <div :class="[ | |
| 'w-2 h-2 mt-1.5 rounded-full flex-shrink-0', | |
| notif.type === 'critical' ? 'bg-amber-500' : notif.type === 'system' ? 'bg-indigo-500' : 'bg-emerald-500' | |
| ]"></div> | |
| <div> | |
| <p class="text-sm text-gray-200">{{ notif.message }}</p> | |
| <p class="text-xs text-gray-500 mt-1">{{ notif.time }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div v-if="notifications.length === 0" class="text-center py-8 text-gray-500 text-sm"> | |
| Yeni bildirim yok | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Menu --> | |
| <div class="relative"> | |
| <button @click="toggleProfile" class="flex items-center gap-2 p-1 pr-3 rounded-lg hover:bg-white/10 transition-colors border border-transparent hover:border-white/5"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-slate-700 to-slate-600 flex items-center justify-center text-white text-xs font-bold"> | |
| {{ user.name.charAt(0) }} | |
| </div> | |
| <div class="hidden md:block text-left"> | |
| <p class="text-xs font-medium text-white leading-none">{{ user.name }}</p> | |
| <p class="text-[10px] text-gray-400 leading-none mt-0.5"> | |
| {{ user.twoFactor ? '2FA Aktif' : '2FA Pasif' }} | |
| </p> | |
| </div> | |
| <lucide-icon name="chevron-down" class="w-4 h-4 text-gray-400 ml-1 hidden md:block" /> | |
| </button> | |
| <div v-if="showProfileDropdown" class="absolute right-0 mt-2 w-48 glass-panel rounded-xl shadow-2xl border border-white/5 overflow-hidden py-1 animate-in fade-in zoom-in duration-200 origin-top-right z-50"> | |
| <button class="w-full px-4 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white transition-colors flex items-center gap-2"> | |
| <lucide-icon name="user" class="w-4 h-4" /> Profilim | |
| </button> | |
| <button class="w-full px-4 py-2 text-left text-sm text-gray-300 hover:bg-white/5 hover:text-white transition-colors flex items-center gap-2"> | |
| <lucide-icon name="settings" class="w-4 h-4" /> Ayarlar | |
| </button> | |
| <div class="border-t border-white/5 my-1"></div> | |
| <button @click="logout" class="w-full px-4 py-2 text-left text-sm text-red-400 hover:bg-red-500/10 transition-colors flex items-center gap-2"> | |
| <lucide-icon name="log-out" class="w-4 h-4" /> Çıkış Yap | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- PAGE CONTENT --> | |
| <main class="flex-1 overflow-y-auto p-4 md:p-8 relative"> | |
| <!-- Background Decor --> | |
| <div class="fixed inset-0 z-0 pointer-events-none overflow-hidden"> | |
| <div class="absolute top-0 left-1/4 w-96 h-96 bg-indigo-600/10 rounded-full blur-[100px]"></div> | |
| <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-600/10 rounded-full blur-[100px]"></div> | |
| </div> | |
| <div class="relative z-10 max-w-7xl mx-auto"> | |
| <!-- DASHBOARD --> | |
| <div v-if="activePage === 'dashboard'" class="space-y-6"> | |
| <!-- Stats Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="glass-card p-6 rounded-xl border border-white/5 shadow-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-400 font-medium">Toplam Link</p> | |
| <h3 class="text-3xl font-bold text-white mt-1">{{ dashboardStats.totalLinks }}</h3> | |
| </div> | |
| <div class="p-3 bg-indigo-500/10 rounded-lg text-indigo-400"> | |
| <lucide-icon name="link" class="w-6 h-6" /> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-xs text-emerald-400"> | |
| <lucide-icon name="trending-up" class="w-3 h-3 mr-1" /> | |
| <span>+12% bu hafta</span> | |
| </div> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl border border-white/5 shadow-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-400 font-medium">Harcanan Kredi</p> | |
| <h3 class="text-3xl font-bold text-white mt-1">{{ dashboardStats.spent.toLocaleString() }}</h3> | |
| </div> | |
| <div class="p-3 bg-amber-500/10 rounded-lg text-amber-400"> | |
| <lucide-icon name="credit-card" class="w-6 h-6" /> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-xs text-gray-500"> | |
| <span>Son 30 gün</span> | |
| </div> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl border border-white/5 shadow-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-400 font-medium">Aktif Linkler</p> | |
| <h3 class="text-3xl font-bold text-white mt-1">{{ dashboardStats.activeLinks }}</h3> | |
| </div> | |
| <div class="p-3 bg-emerald-500/10 rounded-lg text-emerald-400"> | |
| <lucide-icon name="circle-check" class="w-6 h-6" /> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-xs text-emerald-400"> | |
| <lucide-icon name="shield-check" class="w-3 h-3 mr-1" /> | |
| <span>Yüksek Güvenilirlik</span> | |
| </div> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl border border-white/5 shadow-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-400 font-medium">Güvenlik Durumu</p> | |
| <h3 class="text-3xl font-bold text-white mt-1">Güvenli</h3> | |
| </div> | |
| <div class="p-3 bg-slate-700/10 rounded-lg text-slate-400"> | |
| <lucide-icon name="shield" class="w-6 h-6" /> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-xs text-emerald-400"> | |
| <lucide-icon name="lock" class="w-3 h-3 mr-1" /> | |
| <span>2FA Aktif</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Activity Chart --> | |
| <div class="lg:col-span-2 glass-card p-6 rounded-xl border border-white/5 shadow-lg"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold text-white">Kredi Aktivitesi (7 Günlük)</h3> | |
| <select class="bg-slate-800 text-xs text-gray-300 border border-white/10 rounded-lg px-2 py-1 outline-none"> | |
| <option>Tüm Zamanlar</option> | |
| <option>Son 7 Gün</option> | |
| </select> | |
| </div> | |
| <!-- Simulated Chart using CSS --> | |
| <div class="h-64 w-full flex items-end justify-between gap-2 px-4"> | |
| <div v-for="(val, i) in chartData" :key="i" class="group relative w-full h-full flex flex-col justify-end"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-indigo-600/20 to-indigo-500/0 h-full w-full z-0"></div> | |
| <div :style="{ height: val + '%' }" class="w-full bg-indigo-500 rounded-t-md hover:bg-indigo-400 transition-all duration-300 relative z-10 group-hover:shadow-[0_0_15px_rgba(99,102,241,0.5)]"> | |
| <div class="opacity-0 group-hover:opacity-100 absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-900 text-white text-xs py-1 px-2 rounded border border-white/20 whitespace-nowrap transition-opacity"> | |
| {{ val * 10 }} Kredi | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-4 text-xs text-gray-500 px-4"> | |
| <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span> | |
| </div> | |
| </div> | |
| <!-- Site Pool Distribution --> | |
| <div class="glass-card p-6 rounded-xl border border-white/5 shadow-lg flex flex-col"> | |
| <h3 class="text-lg font-semibold text-white mb-6">Site Havuzu Dağılımı</h3> | |
| <div class="flex-1 flex items-center justify-center relative"> | |
| <!-- CSS Doughnut Chart Simulation --> | |
| <div class="w-48 h-48 rounded-full relative flex items-center justify-center"> | |
| <div class="absolute inset-0 rounded-full border-[16px] border-indigo-600 opacity-20"></div> | |
| <div class="absolute inset-0 rounded-full border-[16px] border-emerald-500 opacity-40 transform -rotate-45"></div> | |
| <div class="absolute inset-0 rounded-full border-[16px] border-amber-500 opacity-40 transform rotate-90"></div> | |
| <div class="text-center z-10"> | |
| <span class="block text-3xl font-bold text-white">{{ dashboardStats.totalLinks }}</span> | |
| <span class="text-xs text-gray-400 uppercase tracking-wider">Toplam Site</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 space-y-3"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-indigo-500"></div> | |
| <span class="text-gray-300">.com (65%)</span> | |
| </div> | |
| <span class="text-white font-mono">1,340</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-emerald-500"></div> | |
| <span class="text-gray-300">.net (20%)</span> | |
| </div> | |
| <span class="text-white font-mono">412</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-amber-500"></div> | |
| <span class="text-gray-300">Other (15%)</span> | |
| </div> | |
| <span class="text-white font-mono">308</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MARKET --> | |
| <div v-if="activePage === 'market'" class="space-y-6"> | |
| <!-- Filter Bar --> | |
| <div class="glass-card p-4 rounded-xl border border-white/5 flex flex-col md:flex-row gap-4 justify-between items-center"> | |
| <div class="flex gap-2 w-full md:w-auto"> | |
| <div class="relative flex-1 md:w-64"> | |
| <lucide-icon name="search" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 w-4 h-4" /> | |
| <input type="text" placeholder="Site adı, kategori ara..." class="w-full bg-slate-950/50 border border-white/10 rounded-lg py-2 pl-9 pr-4 text-sm text-white focus:outline-none focus:border-indigo-500 transition-colors"> | |
| </div> | |
| <select class="bg-slate-950/50 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-indigo-500"> | |
| <option>Tüm Kategoriler</option> | |
| <option>Sosyal Medya</option> | |
| <option>Teknoloji</option> | |
| <option>E-ticaret</option> | |
| </select> | |
| <select class="bg-slate-950/50 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-indigo-500"> | |
| <option>DA Yükselen</option> | |
| <option>PA Yüksek</option> | |
| <option>Fiyat: Düşük-Yüksek</option> | |
| </select> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button @click="toggleMarketView" class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm text-white transition-colors"> | |
| <lucide-icon name="list" class="w-4 h-4 inline mr-1" /> Liste | |
| </button> | |
| <button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm text-white transition-colors"> | |
| <lucide-icon name="grid" class="w-4 h-4 inline mr-1" /> Kılavuz | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Market Table --> | |
| <div class="glass-card rounded-xl border border-white/5 overflow-hidden shadow-lg"> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-left border-collapse"> | |
| <thead> | |
| <tr class="bg-slate-900/50 border-b border-white/5 text-xs uppercase text-gray-400 font-semibold tracking-wider"> | |
| <th class="p-4"><input type="checkbox" class="rounded bg-slate-800 border-gray-600 text-indigo-600 focus:ring-indigo-600" /></th> | |
| <th class="p-4">Site Adresi</th> | |
| <th class="p-4">Kategori</th> | |
| <th class="p-4">DA / PA</th> | |
| <th class="p-4 text-center">SS (Spam Score)</th> | |
| <th class="p-4 text-right">Fiyat</th> | |
| <th class="p-4 text-center">Durum</th> | |
| <th class="p-4 text-right">İşlem</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-white/5"> | |
| <tr v-for="link in marketLinks" :key="link.id" class="hover:bg-white/5 transition-colors group"> | |
| <td class="p-4"> | |
| <input type="checkbox" v-model="selectedMarketLinks" :value="link.id" class="rounded bg-slate-800 border-gray-600 text-indigo-600 focus:ring-indigo-600" /> | |
| </td> | |
| <td class="p-4"> | |
| <div class="font-medium text-white hover:text-indigo-400 cursor-pointer transition-colors">{{ link.url }}</div> | |
| <div class="text-xs text-gray-500 mt-0.5">{{ link.domain }}</div> | |
| </td> | |
| <td class="p-4"> | |
| <span class="px-2 py-1 rounded-md bg-slate-800 text-xs text-gray-300 border border-white/5">{{ link.category }}</span> | |
| </td> | |
| <td class="p-4 font-mono text-sm"> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-emerald-400 font-bold">{{ link.da }}</span> | |
| <span class="text-gray-600">/</span> | |
| <span class="text-gray-300">{{ link.pa }}</span> | |
| </div> | |
| </td> | |
| <td class="p-4 text-center"> | |
| <span :class="[ | |
| 'inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold', | |
| link.spamScore > 5 ? 'bg-red-500/20 text-red-400' : 'bg-emerald-500/20 text-emerald-400' | |
| ]"> | |
| {{ link.spamScore }} | |
| </span> | |
| </td> | |
| <td class="p-4 text-right font-medium text-white">{{ link.price }} ₺</td> | |
| <td class="p-4 text-center"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"> | |
| Aktif | |
| </span> | |
| </td> | |
| <td class="p-4 text-right"> | |
| <button @click="addToBulk(link)" class="text-indigo-400 hover:text-indigo-300 hover:bg-indigo-500/10 px-3 py-1.5 rounded-lg transition-colors text-sm font-medium"> | |
| Ekle | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 border-t border-white/5 flex justify-between items-center bg-slate-900/30"> | |
| <span class="text-sm text-gray-500">Toplam {{ marketLinks.length }} sonuç bulundu</span> | |
| <div class="flex gap-2"> | |
| <button class="px-3 py-1 text-sm text-gray-400 hover:text-white bg-slate-800 rounded hover:bg-slate-700 disabled:opacity-50" :disabled="true">Önceki</button> | |
| <button class="px-3 py-1 text-sm text-white bg-indigo-600 rounded hover:bg-indigo-500">Sonraki</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- BULK ADD MODAL (CRITICAL UI) --> | |
| <div v-if="showBulkModal" class="fixed inset-0 z-[60] flex items-center justify-center p-4"> | |
| <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" @click="showBulkModal = false"></div> | |
| <div class="relative w-full max-w-2xl glass-panel rounded-2xl shadow-2xl border border-white/10 overflow-hidden flex flex-col max-h-[90vh] animate-in fade-in zoom-in duration-200"> | |
| <!-- Modal Header --> | |
| <div class="px-6 py-4 border-b border-white/5 flex justify-between items-center bg-slate-900/50"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white flex items-center gap-2"> | |
| <lucide-icon name="layers" class="text-indigo-400 w-5 h-5" /> | |
| Toplu İşlem Paneli | |
| </h3> | |
| <p class="text-xs text-gray-400 mt-1">Seçilen siteler için link ekleme işlemi</p> | |
| </div> | |
| <button @click="showBulkModal = false" class="text-gray-400 hover:text-white transition-colors"> | |
| <lucide-icon name="x" class="w-5 h-5" /> | |
| </button> | |
| </div> | |
| <!-- Modal Body --> | |
| <div class="flex-1 overflow-y-auto p-6 space-y-6"> | |
| <!-- Selected Summary --> | |
| <div class="bg-indigo-900/20 border border-indigo-500/30 rounded-xl p-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="bg-indigo-600 text-white p-2 rounded-lg"> | |
| <lucide-icon name="file-text" class="w-5 h-5" /> | |
| </div> | |
| <div> | |
| <p class="text-xs text-indigo-300 uppercase font-bold">Toplam Seçilen Site</p> | |
| <p class="text-2xl font-bold text-white">{{ selectedMarketLinks.length }}</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs text-gray-400 uppercase">Temel Fiyat</p> | |
| <p class="text-xl font-mono text-emerald-400">{{ basePrice }} ₺ / site</p> | |
| </div> | |
| </div> | |
| <!-- Dynamic Input List --> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h4 class="text-sm font-semibold text-gray-300 flex items-center gap-2"> | |
| <lucide-icon name="plus-circle" class="w-4 h-4 text-emerald-500" /> | |
| Site ve Anahtar Kelime Listesi | |
| </h4> | |
| <button @click="addBulkEntry" class="text-xs text-indigo-400 hover:text-indigo-300 font-medium flex items-center gap-1"> | |
| <lucide-icon name="plus" class="w-3 h-3" /> + Ek site ve kelime ekle | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div v-for="(entry, index) in bulkEntries" :key="index" class="glass-card rounded-xl p-4 border border-white/5 relative group hover:border-indigo-500/30 transition-colors"> | |
| <button @click="removeBulkEntry(index)" class="absolute top-3 right-3 text-gray-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <lucide-icon name="trash-2" class="w-4 h-4" /> | |
| </button> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="md:col-span-2"> | |
| <label class="block text-xs text-gray-400 mb-1 ml-1">Site Adresi (URL)</label> | |
| <div class="flex items-center bg-slate-950/50 border border-white/10 rounded-lg px-3 py-2 focus-within:border-indigo-500 transition-colors"> | |
| <lucide-icon name="globe" class="w-4 h-4 text-gray-500 mr-2" /> | |
| <input type="text" v-model="entry.url" placeholder="https://ornek.com" class="bg-transparent w-full outline-none text-sm text-white placeholder-gray-600" /> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-400 mb-1 ml-1">Anahtar Kelime</label> | |
| <input type="text" v-model="entry.keyword" placeholder="SEO optimizasyonu..." class="w-full bg-slate-950/50 border border-white/10 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-indigo-500 transition-colors" /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings & Calculation --> | |
| <div class="border-t border-white/5 pt-6 space-y-4"> | |
| <div class="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between bg-slate-950/30 p-4 rounded-xl"> | |
| <div class="flex items-center gap-3 w-full md:w-auto"> | |
| <div class="relative"> | |
| <input type="checkbox" id="googleOnly" v-model="googleOnlyToggle" class="peer sr-only" /> | |
| <div class="w-10 h-6 bg-slate-700 peer-checked:bg-amber-600 rounded-full relative transition-colors cursor-pointer border border-white/10"> | |
| <div class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform peer-checked:translate-x-4 shadow-sm"></div> | |
| </div> | |
| </div> | |
| <label for="googleOnly" class="text-sm text-gray-300 cursor-pointer select-none"> | |
| <span class="block font-medium text-white">Sadece Google Görsün</span> | |
| <span class="text-xs text-gray-500">Gizlilik modu (+%20 ekstra)</span> | |
| </label> | |
| </div> | |
| <div class="flex items-center gap-2 w-full md:w-auto"> | |
| <span class="text-sm text-gray-400">Süre:</span> | |
| <select v-model="duration" class="bg-slate-800 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-white outline-none focus:border-indigo-500"> | |
| <option v-for="m in [1,3,6,12]" :key="m" :value="m">{{ m }} Ay</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Total Calculation Banner --> | |
| <div class="bg-gradient-to-r from-emerald-900/40 to-emerald-800/40 border border-emerald-500/30 rounded-xl p-4 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="text-xs text-emerald-300 uppercase font-bold mb-1">Toplam Tahmini Tutar</p> | |
| <div class="flex items-baseline gap-1"> | |
| <span class="text-3xl font-bold text-white">{{ calculatedTotal }}</span> | |
| <span class="text-emerald-200">₺</span> | |
| </div> | |
| <p class="text-xs text-emerald-400/80 mt-1"> | |
| ({{ selectedMarketLinks.length }} Site × {{ bulkEntries.length }} Kelime × {{ pricePerItem }} ₺) | |
| </p> | |
| </div> | |
| <button @click="processBulkOrder" class="w-full md:w-auto px-8 py-3 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl shadow-lg shadow-emerald-600/20 transition-all transform hover:scale-105 flex items-center justify-center gap-2"> | |
| <lucide-icon name="credit-card" class="w-5 h-5" /> | |
| Siparişi Tamamla | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MY LINKS --> | |
| <div v-if="activePage === 'myLinks'" class="space-y-6"> | |
| <div class="flex gap-4 mb-6"> | |
| <button @click="filterLinks = 'all'" :class="['px-4 py-2 rounded-lg text-sm font-medium transition-colors', filterLinks === 'all' ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-gray-400 hover:bg-slate-700']">Tümü</button> | |
| <button @click="filterLinks = 'active'" :class="['px-4 py-2 rounded-lg text-sm font-medium transition-colors', filterLinks === 'active' ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-gray-400 hover:bg-slate-700']">Aktif</button> | |
| <button @click="filterLinks = 'expiring'" :class="['px-4 py-2 rounded-lg text-sm font-medium transition-colors', filterLinks === 'expiring' ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-gray-400 hover:bg-slate-700']">Yakında Biten</button> | |
| <button @click="filterLinks = 'expired'" :class="['px-4 py-2 rounded-lg text-sm font-medium transition-colors', filterLinks === 'expired' ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-gray-400 hover:bg-slate-700']">Bitmiş</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div v-for="link in filteredMyLinks" class="glass-card rounded-xl p-5 border border-white/5 hover:border-indigo-500/30 transition-all hover:shadow-lg hover:shadow-indigo-500/10 group"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center text-indigo-400 group-hover:bg-indigo-600 group-hover:text-white transition-colors"> | |
| <lucide-icon name="link" class="w-5 h-5" /> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">{{ link.targetUrl }}</h4> | |
| <p class="text-xs text-gray-500">{{ link.sourceDomain }}</p> | |
| </div> | |
| </div> | |
| <span :class="[ | |
| 'px-2 py-1 rounded text-xs font-bold', | |
| link.status === 'Active' ? 'bg-emerald-500/20 text-emerald-400' : | |
| link.status === 'Expiring' ? 'bg-amber-500/20 text-amber-400' : 'bg-red-500/20 text-red-400' | |
| ]">{{ link.status }}</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Süre</span> | |
| <span class="text-white font-mono">{{ link.duration }} Ay</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Bitiş Tarihi</span> | |
| <span class="text-white font-mono">{{ link.endDate }}</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Maliyet</span> | |
| <span class="text-emerald-400 font-mono font-bold">{{ link.cost }} ₺</span> | |
| </div> | |
| </div> | |
| <div class="mt-5 pt-4 border-t border-white/5 flex gap-2"> | |
| <button class="flex-1 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs text-white transition-colors"> | |
| <lucide-icon name="edit" class="w-3 h-3 inline mr-1" /> Düzenle | |
| </button> | |
| <button v-if="link.status !== 'Active'" class="flex-1 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-xs text-white transition-colors"> | |
| <lucide-icon name="refresh-cw" class="w-3 h-3 inline mr-1" /> Yenile | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PREMIUM INDEXER --> | |
| <div v-if="activePage === |