Spaces:

dr-tkxx
/

anycoder-5103bfd2

Running

File size: 18,679 Bytes

41f0f36

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tkX | DeepMind Search Engine</title>
    <!-- Importing Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* --- CORE VARIABLES & RESET --- */
        :root {
            --bg: #030303;
            --bg-glass: rgba(16, 20, 24, 0.7);
            --cyan: #00f2ff;
            --cyan-dim: rgba(0, 242, 255, 0.3);
            --blue: #1a73e8;
            --text: #43d172;
            --text-dim: #8b9bb4;
            --glass-border: rgba(255, 255, 255, 0.1);
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
        }

        * {
            box-sizing: box-sizing;
            outline: none;
        }

        body, html {
            margin: 0; padding: 0;
            background-color: var(--bg);
            color: var(--text);
            font-family: var(--font-main);
            overflow-x: hidden;
            scroll-behavior: smooth;
            height: 100%;
        }

        /* --- BACKGROUND CANVAS (Lagrangian Field) --- */
        #lagrangian-canvas {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: -1; opacity: 0.4;
            pointer-events: none;
        }

        /* --- PRELOADER (Matrix Rain) --- */
        #preloader {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background-color: #000;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 1s ease;
            opacity: 1;
        }

        #matrix-canvas-loader {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
        }

        .loader-text {
            color: var(--cyan);
            font-family: var(--font-mono);
            font-size: 2rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            z-index: 10;
            animation: flicker 2s infinite;
        }

        @keyframes flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
            20%, 24%, 55% { opacity: 0.1; }
        }

        /* --- HEADER / BRANDING --- */
        .top-bar {
            position: absolute; top: 20px; left: 20px;
            z-index: 100;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            color: var(--text-dim);
        }

        .anycoder-link {
            color: var(--cyan);
            text-decoration: none;
            border: 1px solid var(--cyan-dim);
            padding: 4px 10px;
            border-radius: 4px;
            transition: 0.3s;
        }
        .anycoder-link:hover {
            background: var(--cyan-dim);
            box-shadow: 0 0 10px var(--cyan);
        }

        /* --- HERO SECTION --- */
        .hero-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 40vh;
            padding-top: 8vh;
            transition: min-height 0.5s ease, padding 0.5s ease;
            position: relative;
            z-index: 5;
        }

        .hero-section.active-search {
            min-height: 15vh;
            padding-top: 2vh;
            opacity: 0.8;
            transform: translateY(-20px);
        }

        .logo-tkx {
            font-size: 8vw; 
            font-weight: 900; 
            letter-spacing: -0.1em;
            background: linear-gradient(180deg, #fff 0%, #43d172 100%);
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent;
            margin: 0; 
            filter: drop-shadow(0 0 20px rgba(43, 211, 72, 0.3));
            line-height: 1;
        }

        .tagline {
            font-family: var(--font-mono); 
            font-size: 0.8rem; 
            letter-spacing: 4px;
            color: var(--cyan); 
            text-transform: uppercase; 
            margin-top: 10px;
            opacity: 0.8;
        }

        /* --- SEARCH BAR CONTAINER --- */
        .search-wrapper {
            width: 100%;
            max-width: 800px;
            margin: 30px auto;
            z-index: 100;
            position: relative;
        }

        /* Google CSE Overrides */
        .gsc-control-cse {
            background: transparent !important; 
            border: none !important; 
            padding: 0 !important;
            font-family: var(--font-main) !important;
        }

        .gsc-input-box {
            background: var(--bg-glass) !important;
            border: 1px solid var(--glass-border) !important;
            border-radius: 12px !important;
            height: 60px !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
            transition: all 0.3s ease !important;
            display: flex !important; 
            align-items: center !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        .gsc-input-box:hover, .gsc-input-box-focus {
            border-color: var(--cyan) !important;
            box-shadow: 0 0 25px var(--cyan-dim) !important;
            transform: scale(1.01);
        }

        input.gsc-input {
            color: #fff !important; 
            font-size: 1.2rem !important; 
            background: none !important;
            padding: 0 20px !important;
            font-family: var(--font-mono) !important;
            border-radius: 12px !important;
        }

        .gsc-search-button-v2 {
            background: var(--cyan) !important; 
            color: #000 !important;
            border-radius: 10px !important;
            height: 40px !important;
            width: 40px !important;
            margin: 0 10px !important;
            border: none !important; 
            cursor: pointer;
            box-shadow: 0 0 10px var(--cyan) !important;
            transition: 0.2s;
        }
        
        .gsc-search-button-v2:hover {
            background: #fff !important;
            box-shadow: 0 0 20px #fff !important;
        }

        /* --- RESULTS AREA --- */
        .results-area {
            width: 95%; 
            max-width: 900px;
            margin: 0 auto;
            padding-bottom: 100px;
            z-index: 5;
            position: relative;
        }

        /* Result Card Styling */
        .gsc-webResult.gsc-result {
            background: linear-gradient(145deg, rgba(20,20,20,0.6), rgba(10,10,10,0.8)) !important;
            border: 1px solid var(--glass-border) !important;
            margin-bottom: 25px !important;
            padding: 25px !important;
            border-radius: 16px !important;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
        }

        .gsc-webResult.gsc-result::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 3px; height: 100%;
            background: var(--cyan-dim);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .gsc-webResult.gsc-result:hover {
            border-color: var(--cyan) !important;
            box-shadow: 0 10px 30px -10px rgba(0, 242, 255, 0.15);
            transform: translateY(-2px);
        }

        .gsc-webResult.gsc-result:hover::before {
            opacity: 1;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }

        .gs-title, .gs-title b {
            color: var(--cyan) !important; 
            font-size: 1.4rem !important;
            font-weight: 600 !important;
            text-decoration: none !important;
            font-family: var(--font-main);
        }
        
        .gs-title:hover {
            text-shadow: 0 0 8px var(--cyan-dim);
        }

        .gs-snippet {
            color: var(--text-dim) !important; 
            font-size: 1rem !important; 
            line-height: 1.7 !important;
            margin-top: 10px;
        }

        .gs-title a {
            text-decoration: none;
        }

        /* Pagination Styling */
        .gsc-cursor-box {
            margin-top: 60px !important;
            text-align: center !important;
            background: rgba(0,0,0,0.3);
            padding: 20px;
            border-radius: 16px;
            border: 1px solid var(--glass-border);
        }

        .gsc-cursor-page {
            background: transparent !important;
            color: var(--cyan) !important;
            padding: 10px 15px !important;
            border-radius: 6px !important;
            border: 1px solid var(--cyan-dim) !important;
            margin: 0 4px !important;
            text-decoration: none !important;
            font-family: var(--font-mono);
            transition: 0.3s;
            display: inline-block;
        }

        .gsc-cursor-page:hover {
            background: var(--cyan-dim) !important;
            box-shadow: 0 0 10px var(--cyan);
        }

        .gsc-cursor-current-page {
            background: var(--cyan) !important;
            color: #000 !important;
            font-weight: bold !important;
            border-color: var(--cyan) !important;
        }

        /* Hide Google Branding */
        .gcsc-branding, .gsc-adBlock { display: none !important; }

        /* --- FOOTER STATUS --- */
        .lagrangian-status {
            position: fixed; 
            bottom: 20px; 
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--font-mono); 
            font-size: 10px; 
            color: var(--text-dim);
            text-transform: uppercase; 
            letter-spacing: 1px;
            background: rgba(0,0,0,0.8);
            padding: 10px 20px;
            border-radius: 8px;
            border: 1px solid var(--glass-border);
            z-index: 100;
            pointer-events: none; /* Let clicks pass through if needed */
        }

        .status-links a {
            color: var(--cyan);
            margin-left: 15px;
            text-decoration: none;
            transition: 0.3s;
        }
        .status-links a:hover {
            color: #fff;
            text-shadow: 0 0 5px var(--cyan);
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 600px) {
            .logo-tkx { font-size: 4rem; }
            .hero-section { padding-top: 40px; }
            .lagrangian-status { flex-direction: column; gap: 10px; bottom: 10px; }
            .status-links { margin-top: 5px; }
            .status-links a { margin: 0 5px; }
        }
    </style>
</head>
<body>

    <!-- PRELOADER -->
    <div id="preloader">
        <canvas id="matrix-canvas-loader"></canvas>
        <div class="loader-text">SYSTEM INIT...</div>
    </div>

    <!-- BACKGROUND CANVAS -->
    <canvas id="lagrangian-canvas"></canvas>

    <!-- HEADER LINK -->
    <div class="top-bar">
        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
    </div>

    <!-- MAIN HERO -->
    <div class="hero-section" id="hero">
        <h1 class="logo-tkx">Matrix</h1>
        <div class="tagline">Lagrangian Prime Search</div>
        
        <div class="search-wrapper">
            <!-- Google CSE Component -->
            <div class="gcse-search" data-resultsUrl="" data-newWindow="false" data-queryParameterName="q"></div>
        </div>
    </div>

    <!-- RESULTS TARGET -->
    <div class="results-area" id="results-target"></div>

    <!-- FOOTER STATUS -->
    <div class="lagrangian-status">
        <div class="signal-info">
            Signal: I/Q Demodulated | Matrix: Prime_Rank_1
        </div>
        <div class="status-links">
            <a href="#">Mode: Infinite_Flow</a> | 
            <a href="#">LabX</a> | 
            <a href="#">Nexus</a> | 
            <a href="#">DeepMind</a>
        </div>
    </div>

    <!-- SCRIPTS -->
    <script>
        /* --- 1. PRELOADER MATRIX EFFECT --- */
        document.addEventListener("DOMContentLoaded", function() {
            const preloader = document.getElementById('preloader');
            const loaderCanvas = document.getElementById('matrix-canvas-loader');
            
            if (loaderCanvas) {
                const ctx = loaderCanvas.getContext('2d');
                const alphabet = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン01';
                const fontSize = 16;
                let columns, rainDrops = [];

                const initializeMatrix = () => {
                    loaderCanvas.width = window.innerWidth;
                    loaderCanvas.height = window.innerHeight;
                    columns = Math.floor(loaderCanvas.width / fontSize);
                    rainDrops = [];
                    for (let x = 0; x < columns; x++) {
                        rainDrops[x] = 1;
                    }
                };

                const drawMatrix = () => {
                    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
                    ctx.fillRect(0, 0, loaderCanvas.width, loaderCanvas.height);
                    ctx.fillStyle = '#0F0';
                    ctx.font = fontSize + 'px monospace';

                    for (let i = 0; i < rainDrops.length; i++) {
                        const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
                        ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
                        if (rainDrops[i] * fontSize > loaderCanvas.height && Math.random() > 0.975) {
                            rainDrops[i] = 0;
                        }
                        rainDrops[i]++;
                    }
                };

                initializeMatrix();
                let matrixInterval = setInterval(drawMatrix, 33);

                window.addEventListener('resize', initializeMatrix);

                // Hide Preloader after 3 seconds
                setTimeout(() => {
                    clearInterval(matrixInterval);
                    preloader.classList.add('hidden');
                    document.body.style.overflow = 'auto';
                }, 3000);
            }
        });

        /* --- 2. LAGRANGIAN BACKGROUND (Waves & Primes) --- */
        const canvas = document.getElementById('lagrangian-canvas');
        const ctx = canvas.getContext('2d');
        let width, height, time = 0;

        function resize() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resize);
        resize();

        function isPrime(n) {
            for(let i=2, s=Math.sqrt(n); i<=s; i++) if(n%i===0) return false;
            return n>1;
        }

        function animateBg() {
            ctx.clearRect(0, 0, width, height); // Clear fully for cleaner look
            
            // Wave
            ctx.beginPath();
            ctx.strokeStyle = 'rgba(0, 242, 255, 0.15)';
            ctx.lineWidth = 2;
            for(let i=0; i<width; i+=5) {
                const wave = Math.sin(i * 0.01 + time) * 50 + Math.cos(i * 0.02 + time) * 20;
                ctx.lineTo(i, height/2 + wave);
            }
            ctx.stroke();

            // Prime Matrix Points
            for(let i=0; i<50; i++) {
                const x = (i * 79) % width;
                const y = (i * 137) % height;
                if(isPrime(i + 7)) {
                    const glow = Math.sin(time + i) * 0.5 + 0.5;
                    ctx.fillStyle = `rgba(0, 242, 255, ${glow * 0.4})`;
                    ctx.fillRect(x, y, 3, 3);
                }
            }

            time += 0.02;
            requestAnimationFrame(animateBg);
        }
        animateBg();

        /* --- 3. GOOGLE CSE INJECTION --- */
        (function() {
            var cx = '9df5cc74ffd07b41a'; // Placeholder ID - Replace with yours if needed
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
        })();

        /* --- 4. UI LOGIC (Search Interaction) --- */
        window.addEventListener('load', function() {
            const hero = document.getElementById('hero');
            
            // Check for results periodically to adjust UI height
            const checkSearch = setInterval(() => {
                const results = document.querySelector('.gsc-results-wrapper-visible');
                if (results) {
                    hero.classList.add('active-search');
                    clearInterval(checkSearch);
                }
            }, 500);
        });

        /* --- 5. SECURITY / SHIELD --- */
        (function() {
            'use strict';
            document.addEventListener('contextmenu', function(e) { e.preventDefault(); }, false);
            document.addEventListener('keydown', function(e) {
                if (e.keyCode === 123 || (e.ctrlKey && e.shiftKey && e.keyCode === 73) || (e.ctrlKey && e.keyCode === 85)) {
                    e.preventDefault();
                    return false;
                }
            }, false);

            // Anti-debugger loop
            setInterval(function() {
                (function() {
                    (function a() {
                        try {
                            (function b(i) {
                                if (("" + i / i).length !== 1 || i % 20 === 0) {
                                    (function() {}).constructor("debugger")();
                                } else {
                                    debugger;
                                }
                                b(++i);
                            })(0);
                        } catch (e) {
                            setTimeout(a, 50);
                        }
                    })();
                })();
            }, 100);
        })();
    </script>
</body>
</html>