Wayback Time Capsule

Web sitelerinin geçmişine yolculuk yapar (TR/EN Destekli).

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Wayback Time Capsule
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Web sitelerinin geçmişine yolculuk yapar (TR/EN Destekli).
// @author       Mustafa Hakan
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    // Dil Ayarları
    let currentLang = GM_getValue('wb_lang', (navigator.language.includes('tr') ? 'tr' : 'en'));

    const ui = {
        tr: { title: "Geçmişe Yolculuk", action: "Zamanı Geri Al", toggle: "⌛", lang: "EN" },
        en: { title: "Time Travel", action: "Go Back in Time", toggle: "⌛", lang: "TR" }
    };

    const style = document.createElement('style');
    style.innerHTML = `
        #wayback-panel {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 280px;
            background: rgba(29, 29, 31, 0.85);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 22px;
            padding: 20px;
            z-index: 999999;
            color: #f5f5f7;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            display: none;
            transition: all 0.4s ease;
        }

        .wb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .wb-title { font-size: 16px; font-weight: 600; letter-spacing: -0.022em; }
        
        .wb-lang-btn { 
            font-size: 10px; 
            font-weight: bold; 
            cursor: pointer; 
            color: #007aff; 
            border: 1px solid #007aff; 
            padding: 2px 6px; 
            border-radius: 5px; 
        }

        .wb-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            margin-bottom: 20px;
        }

        .wb-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            padding: 8px 0;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
            transition: 0.2s;
        }

        .wb-btn:hover { background: rgba(255, 255, 255, 0.2); }
        .wb-btn.selected { background: #007aff; font-weight: bold; }

        .wb-action {
            width: 100%;
            background: #fff;
            color: #000;
            border: none;
            padding: 12px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
        }

        #wb-toggle {
            position: fixed;
            bottom: 20px;
            right: 90px; /* Diğer butona çarpmaması için sola kaydırdım */
            width: 50px;
            height: 50px;
            background: #1c1c1e;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 999999;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            color: white;
            font-size: 24px;
        }
    `;
    document.head.appendChild(style);

    const container = document.createElement('div');
    container.id = 'wayback-panel';
    document.body.appendChild(container);

    const toggle = document.createElement('div');
    toggle.id = 'wb-toggle';
    toggle.innerHTML = ui[currentLang].toggle;
    document.body.appendChild(toggle);

    let selectedYear = 10;

    function render() {
        const t = ui[currentLang];
        container.innerHTML = `
            <div class="wb-header">
                <div class="wb-title">${t.title}</div>
                <div class="wb-lang-btn" id="wb-lang-swap">${t.lang}</div>
            </div>
            <div class="wb-grid" id="wb-years"></div>
            <button class="wb-action" id="wb-go">${t.action}</button>
        `;

        const yearGrid = document.getElementById('wb-years');
        for (let i = 1; i <= 10; i++) {
            const btn = document.createElement('button');
            btn.className = 'wb-btn' + (i === selectedYear ? ' selected' : '');
            btn.innerText = i;
            btn.onclick = () => {
                selectedYear = i;
                render();
            };
            yearGrid.appendChild(btn);
        }

        document.getElementById('wb-lang-swap').onclick = () => {
            currentLang = currentLang === 'tr' ? 'en' : 'tr';
            GM_setValue('wb_lang', currentLang);
            render();
        };

        document.getElementById('wb-go').onclick = () => {
            const currentUrl = window.location.href;
            const targetDate = new Date();
            targetDate.setFullYear(targetDate.getFullYear() - selectedYear);
            const dateStr = targetDate.toISOString().split('T')[0].replace(/-/g, '') + "000000";
            const waybackUrl = `https://web.archive.org/web/${dateStr}/${currentUrl}`;
            window.open(waybackUrl, '_blank');
        };
    }

    toggle.onclick = () => {
        container.style.display = container.style.display === 'block' ? 'none' : 'block';
        if (container.style.display === 'block') render();
    };

    render();
})();