Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Paneli - Video Link Sistemi</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: #000000; | |
| color: #ffffff; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background: #1a1a1a; | |
| border: 1px solid #333; | |
| padding: 40px; | |
| } | |
| h1 { | |
| color: #ffffff; | |
| margin-bottom: 10px; | |
| font-size: 2.5em; | |
| } | |
| .subtitle { | |
| color: #888; | |
| margin-bottom: 40px; | |
| font-size: 1.1em; | |
| } | |
| .admin-info { | |
| background: #333; | |
| color: white; | |
| padding: 20px; | |
| border: 1px solid #555; | |
| margin-bottom: 30px; | |
| font-size: 1.2em; | |
| font-weight: bold; | |
| } | |
| .form-section { | |
| background: #2a2a2a; | |
| padding: 30px; | |
| border: 1px solid #444; | |
| margin-bottom: 30px; | |
| } | |
| .form-section h2 { | |
| color: #ffffff; | |
| margin-bottom: 20px; | |
| font-size: 1.5em; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: #ccc; | |
| font-weight: 600; | |
| } | |
| input[type="number"], | |
| input[type="text"] { | |
| width: 100%; | |
| padding: 15px; | |
| border: 1px solid #444; | |
| background: #333; | |
| color: #fff; | |
| border-radius: 10px; | |
| font-size: 1em; | |
| transition: border-color 0.3s; | |
| } | |
| input[type="number"]:focus, | |
| input[type="text"]:focus { | |
| outline: none; | |
| border-color: #fff; | |
| } | |
| button { | |
| background: #fff; | |
| color: #000; | |
| padding: 15px 30px; | |
| border: 1px solid #fff; | |
| border-radius: 10px; | |
| font-size: 1.1em; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| button:hover { | |
| transform: translateY(-2px); | |
| background: #ccc; | |
| border-color: #ccc; | |
| } | |
| button:active { | |
| transform: translateY(0); | |
| } | |
| .links-section { | |
| margin-top: 30px; | |
| } | |
| .links-section h2 { | |
| color: #ffffff; | |
| margin-bottom: 20px; | |
| font-size: 1.5em; | |
| } | |
| .links-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| background: #2a2a2a; | |
| border: 1px solid #444; | |
| } | |
| .links-table th { | |
| background: #333; | |
| color: white; | |
| padding: 15px; | |
| text-align: left; | |
| font-weight: 600; | |
| border-bottom: 1px solid #444; | |
| } | |
| .links-table td { | |
| padding: 15px; | |
| border-bottom: 1px solid #444; | |
| color: #ccc; | |
| } | |
| .links-table tr:hover { | |
| background: #333; | |
| } | |
| .link-code { | |
| font-family: 'Courier New', monospace; | |
| background: #333; | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| font-weight: bold; | |
| color: #fff; | |
| border: 1px solid #555; | |
| } | |
| .copy-btn { | |
| background: #fff; | |
| color: #000; | |
| padding: 8px 15px; | |
| font-size: 0.9em; | |
| border: 1px solid #fff; | |
| border-radius: 5px; | |
| margin-right: 5px; | |
| } | |
| .copy-btn:hover { | |
| background: #ccc; | |
| } | |
| .delete-btn { | |
| background: #333; | |
| color: #fff; | |
| padding: 8px 15px; | |
| font-size: 0.9em; | |
| border: 1px solid #555; | |
| border-radius: 5px; | |
| } | |
| .delete-btn:hover { | |
| background: #555; | |
| } | |
| .no-links { | |
| text-align: center; | |
| padding: 40px; | |
| color: #999; | |
| font-size: 1.2em; | |
| } | |
| .status-active { | |
| color: #fff; | |
| font-weight: bold; | |
| } | |
| .status-expired { | |
| color: #999; | |
| font-weight: bold; | |
| } | |
| .notification { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background: #333; | |
| color: white; | |
| padding: 15px 25px; | |
| border: 1px solid #555; | |
| z-index: 1000; | |
| display: none; | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(400px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .video-info { | |
| background: #e3f2fd; | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| border-left: 4px solid #2196f3; | |
| } | |
| .video-info strong { | |
| color: #1976d2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🎬 Video Link Yönetim Sistemi</h1> | |
| <p class="subtitle">Elife Abla Admin Paneli</p> | |
| <div class="admin-info"> | |
| 👋 Hoş geldin Elife Abla! Buradan video izleme linkleri oluşturabilir ve yönetebilirsin. | |
| <button onclick="logout()" style="margin-left: 20px; padding: 5px 15px; font-size: 0.8em;">Çıkış Yap</button> | |
| </div> | |
| <div class="video-info"> | |
| <strong>📹 Aktif Video:</strong> Proje_Taslak_v7.mp4 | |
| </div> | |
| <div class="form-section"> | |
| <h2>➕ Yeni Link Oluştur</h2> | |
| <div class="form-group"> | |
| <label>Limit Tipi:</label> | |
| <div style="margin-top: 10px;"> | |
| <label style="display: inline-block; margin-right: 20px;"> | |
| <input type="radio" name="limitType" value="count" checked onchange="toggleLimitType()"> | |
| Kez (İzleme sayısı) | |
| </label> | |
| <label style="display: inline-block;"> | |
| <input type="radio" name="limitType" value="time" onchange="toggleLimitType()"> | |
| Süre (Zaman sınırlı) | |
| </label> | |
| </div> | |
| </div> | |
| <div class="form-group" id="countLimitGroup"> | |
| <label for="viewLimit">İzleme Limiti (Kaç kez izlenebilecek?):</label> | |
| <input type="number" id="viewLimit" min="1" max="1000" value="1" placeholder="Örn: 5"> | |
| </div> | |
| <div class="form-group" id="timeLimitGroup" style="display: none;"> | |
| <label for="timeLimit">Süre (Dakika):</label> | |
| <input type="number" id="timeLimit" min="1" max="1440" value="60" placeholder="Örn: 60"> | |
| </div> | |
| <button onclick="createLink()">🔗 Link Oluştur</button> | |
| </div> | |
| <div class="links-section"> | |
| <h2>📋 Oluşturulan Linkler</h2> | |
| <div id="linksContainer"> | |
| <table class="links-table" id="linksTable"> | |
| <thead> | |
| <tr> | |
| <th>Link Kodu</th> | |
| <th>Limit Tipi</th> | |
| <th>Limit</th> | |
| <th>Kalan</th> | |
| <th>Durum</th> | |
| <th>Oluşturma Tarihi</th> | |
| <th>İşlemler</th> | |
| </tr> | |
| </thead> | |
| <tbody id="linksTableBody"> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div id="noLinks" class="no-links" style="display: none;"> | |
| Henüz hiç link oluşturulmadı. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="notification" id="notification"></div> | |
| <script> | |
| // Login kontrolü | |
| function checkLogin() { | |
| if (localStorage.getItem('adminLoggedIn') !== 'true') { | |
| window.location.href = 'login.html'; | |
| } | |
| } | |
| // Çıkış yap | |
| function logout() { | |
| localStorage.removeItem('adminLoggedIn'); | |
| localStorage.removeItem('loginTime'); | |
| window.location.href = 'index.html'; | |
| } | |
| function toggleLimitType() { | |
| const limitType = document.querySelector('input[name="limitType"]:checked').value; | |
| const countLimitGroup = document.getElementById('countLimitGroup'); | |
| const timeLimitGroup = document.getElementById('timeLimitGroup'); | |
| if (limitType === 'count') { | |
| countLimitGroup.style.display = 'block'; | |
| timeLimitGroup.style.display = 'none'; | |
| } else { | |
| countLimitGroup.style.display = 'none'; | |
| timeLimitGroup.style.display = 'block'; | |
| } | |
| } | |
| </script> | |
| <script> | |
| // LocalStorage'dan linkleri yükle | |
| function loadLinks() { | |
| const links = localStorage.getItem('videoLinks'); | |
| return links ? JSON.parse(links) : []; | |
| } | |
| // Linkleri LocalStorage'a kaydet | |
| function saveLinks(links) { | |
| localStorage.setItem('videoLinks', JSON.stringify(links)); | |
| } | |
| // Benzersiz link kodu oluştur | |
| function generateLinkCode() { | |
| const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; | |
| let code = ''; | |
| for (let i = 0; i < 8; i++) { | |
| code += characters.charAt(Math.floor(Math.random() * characters.length)); | |
| } | |
| return code; | |
| } | |
| // Yeni link oluştur | |
| function createLink() { | |
| const limitTypeRadio = document.querySelector('input[name="limitType"]:checked'); | |
| if (!limitTypeRadio) { | |
| showNotification('Lütfen bir limit tipi seçin!', 'error'); | |
| return; | |
| } | |
| const limitType = limitTypeRadio.value; | |
| let newLink = { | |
| code: generateLinkCode(), | |
| limitType: limitType, | |
| createdAt: new Date().toISOString(), | |
| status: 'active' | |
| }; | |
| if (limitType === 'count') { | |
| const viewLimit = parseInt(document.getElementById('viewLimit').value); | |
| if (isNaN(viewLimit) || viewLimit < 1) { | |
| showNotification('Lütfen geçerli bir izleme limiti girin!', 'error'); | |
| return; | |
| } | |
| newLink.viewLimit = viewLimit; | |
| newLink.remainingViews = viewLimit; | |
| } else { | |
| const timeLimit = parseInt(document.getElementById('timeLimit').value); | |
| if (isNaN(timeLimit) || timeLimit < 1) { | |
| showNotification('Lütfen geçerli bir süre girin!', 'error'); | |
| return; | |
| } | |
| newLink.timeLimit = timeLimit; | |
| newLink.expiresAt = new Date(Date.now() + timeLimit * 60000).toISOString(); | |
| } | |
| const links = loadLinks(); | |
| links.push(newLink); | |
| saveLinks(links); | |
| renderLinks(); | |
| showNotification(`Link başarıyla oluşturuldu! Kod: ${newLink.code}`); | |
| document.getElementById('viewLimit').value = '1'; | |
| document.getElementById('timeLimit').value = '60'; | |
| } | |
| // Linkleri tabloda göster | |
| function renderLinks() { | |
| const links = loadLinks(); | |
| const tableBody = document.getElementById('linksTableBody'); | |
| const noLinks = document.getElementById('noLinks'); | |
| const linksTable = document.getElementById('linksTable'); | |
| if (links.length === 0) { | |
| tableBody.innerHTML = ''; | |
| noLinks.style.display = 'block'; | |
| linksTable.style.display = 'none'; | |
| return; | |
| } | |
| noLinks.style.display = 'none'; | |
| linksTable.style.display = 'table'; | |
| tableBody.innerHTML = links.map((link, index) => { | |
| const createdAt = new Date(link.createdAt).toLocaleString('tr-TR'); | |
| let statusClass, statusText, limitInfo, remainingInfo; | |
| if (link.limitType === 'count') { | |
| statusClass = link.remainingViews > 0 ? 'status-active' : 'status-expired'; | |
| statusText = link.remainingViews > 0 ? 'Aktif' : 'Doldu'; | |
| limitInfo = `${link.viewLimit} kez`; | |
| remainingInfo = `${link.remainingViews} kez`; | |
| } else { | |
| const now = new Date(); | |
| const expiresAt = new Date(link.expiresAt); | |
| const isExpired = now > expiresAt; | |
| statusClass = isExpired ? 'status-expired' : 'status-active'; | |
| statusText = isExpired ? 'Süresi Doldu' : 'Aktif'; | |
| limitInfo = `${link.timeLimit} dakika`; | |
| const remainingMinutes = Math.max(0, Math.ceil((expiresAt - now) / 60000)); | |
| remainingInfo = isExpired ? '0 dakika' : `${remainingMinutes} dakika`; | |
| } | |
| return ` | |
| <tr> | |
| <td><span class="link-code">${link.code}</span></td> | |
| <td>${link.limitType === 'count' ? 'Kez' : 'Süre'}</td> | |
| <td>${limitInfo}</td> | |
| <td>${remainingInfo}</td> | |
| <td class="${statusClass}">${statusText}</td> | |
| <td>${createdAt}</td> | |
| <td> | |
| <button class="copy-btn" onclick="copyLink('${link.code}')">📋 Kopyala</button> | |
| <button class="delete-btn" onclick="deleteLink(${index})">🗑️ Sil</button> | |
| </td> | |
| </tr> | |
| `; | |
| }).join(''); | |
| } | |
| // Linki kopyala | |
| function copyLink(code) { | |
| const links = loadLinks(); | |
| const link = links.find(l => l.code === code); | |
| if (!link) { | |
| showNotification('Link bulunamadı!', 'error'); | |
| return; | |
| } | |
| // Link verisini encode et | |
| const encodedData = btoa(JSON.stringify(link)); | |
| const linkUrl = `${window.location.origin}${window.location.pathname.replace('admin.html', '')}viewer.html?code=${code}&data=${encodedData}`; | |
| navigator.clipboard.writeText(linkUrl).then(() => { | |
| showNotification('Link kopyalandı!'); | |
| }).catch(err => { | |
| showNotification('Link kopyalanamadı!', 'error'); | |
| }); | |
| } | |
| // Linki sil | |
| function deleteLink(index) { | |
| if (confirm('Bu linki silmek istediğinizden emin misiniz?')) { | |
| const links = loadLinks(); | |
| links.splice(index, 1); | |
| saveLinks(links); | |
| renderLinks(); | |
| showNotification('Link silindi!'); | |
| } | |
| } | |
| // Bildirim göster | |
| function showNotification(message, type = 'success') { | |
| const notification = document.getElementById('notification'); | |
| notification.textContent = message; | |
| notification.className = 'notification'; | |
| if (type === 'error') { | |
| notification.style.background = '#333'; | |
| notification.style.color = '#fff'; | |
| } else { | |
| notification.style.background = '#fff'; | |
| notification.style.color = '#000'; | |
| } | |
| notification.style.display = 'block'; | |
| setTimeout(() => { | |
| notification.style.display = 'none'; | |
| }, 3000); | |
| } | |
| // Sayfa yüklendiğinde linkleri göster | |
| document.addEventListener('DOMContentLoaded', function() { | |
| checkLogin(); | |
| renderLinks(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |