Spaces:

alfabill
/

anycoder-3db153e5

Running

App Files Files Community

alfabill commited on Apr 10

Commit

f3ee4ba

verified ·

1 Parent(s): 8faaee7

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +461 -19

index.html CHANGED Viewed

@@ -1,19 +1,461 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>URL Interceptor - Clipboard Monitor</title>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        :root {
+            --primary: #6366f1;
+            --primary-hover: #4f46e5;
+            --bg-dark: #0f172a;
+            --bg-card: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --accent: #22d3ee;
+            --danger: #ef4444;
+            --success: #10b981;
+            --glass: rgba(30, 41, 59, 0.7);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        }
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            min-height: 100vh;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        /* Header Styles */
+        header {
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .logo-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 700;
+            font-size: 1.2rem;
+            letter-spacing: -0.5px;
+        }
+        .logo-icon {
+            color: var(--accent);
+        }
+        .built-with {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            text-decoration: none;
+            transition: color 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .built-with:hover {
+            color: var(--accent);
+        }
+        /* Main Layout */
+        main {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 2rem;
+        }
+        @media (max-width: 992px) {
+            main {
+                grid-template-columns: 1fr;
+            }
+        }
+        /* Hero Section */
+        .hero {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 3rem 0;
+            animation: fadeIn 0.8s ease-out;
+        }
+        .hero h1 {
+            font-size: clamp(2rem, 5vw, 3.5rem);
+            margin-bottom: 1rem;
+            background: linear-gradient(to right, #fff, var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .hero p {
+            color: var(--text-muted);
+            max-width: 600px;
+            margin: 0 auto 2rem;
+            font-size: 1.1rem;
+        }
+        /* Dashboard Card */
+        .card {
+            background: var(--bg-card);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            padding: 2rem;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+            transition: transform 0.3s ease;
+        }
+        .card-title {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 1.25rem;
+            margin-bottom: 1.5rem;
+            color: var(--text-main);
+        }
+        /* Interaction Area */
+        .interceptor-box {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border: 2px dashed rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 3rem 2rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: rgba(15, 23, 42, 0.5);
+            margin-bottom: 2rem;
+        }
+        .interceptor-box:hover {
+            border-color: var(--primary);
+            background: rgba(99, 102, 241, 0.05);
+        }
+        .interceptor-box.active {
+            border-color: var(--accent);
+            animation: pulse 1.5s infinite;
+        }
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 12px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 1rem;
+        }
+        .btn-primary:hover {
+            background: var(--primary-hover);
+        }
+        /* Code Section */
+        .code-container {
+            background: #011627;
+            border-radius: 12px;
+            padding: 1.5rem;
+            position: relative;
+            margin-top: 2rem;
+            font-family: 'Fira Code', monospace;
+            font-size: 0.9rem;
+            overflow-x: auto;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .code-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            color: var(--text-muted);
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        pre {
+            color: #d6deeb;
+            white-space: pre-wrap;
+        }
+        .keyword { color: #c792ea; }
+        .function { color: #82aaff; }
+        .string { color: #ecc48d; }
+        .comment { color: #637777; font-style: italic; }
+        /* History Panel */
+        .history-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            max-height: 80vh;
+        }
+        .history-item {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            padding: 1rem;
+            border-radius: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            animation: slideIn 0.3s ease-out;
+        }
+        .history-item .url {
+            font-size: 0.85rem;
+            color: var(--accent);
+            word-break: break-all;
+            text-decoration: none;
+            font-weight: 500;
+        }
+        .history-item .meta {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.7rem;
+            color: var(--text-muted);
+        }
+        .status-badge {
+            padding: 2px 8px;
+            border-radius: 10px;
+            background: rgba(16, 185, 129, 0.2);
+            color: var(--success);
+            font-weight: bold;
+        }
+        /* Animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateX(20px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4); }
+            70% { box-shadow: 0 0 0 15px rgba(34, 211, 238, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
+        }
+        .empty-state {
+            text-align: center;
+            color: var(--text-muted);
+            padding: 2rem;
+            font-style: italic;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo-container">
+            <i data-lucide="clipboard-copy" class="logo-icon"></i>
+            <span>URL Interceptor</span>
+        </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">
+            Built with anycoder <i data-lucide="external-link" size="14"></i>
+        </a>
+    </header>
+    <main>
+        <section class="hero">
+            <h1>Intercept Clipboard URLs</h1>
+            <p>Una herramienta conceptual para monitorear y capturar URLs copiadas al portapapeles. Implementa la lógica de detección en tiempo real.</p>
+        </section>
+        <div class="card">
+            <div class="card-title">
+                <i data-lucide="zap" style="color: var(--accent)"></i>
+                Simulador de Intercepción
+            </div>
+            <div class="interceptor-box" id="dropZone">
+                <i data-lucide="mouse-pointer-2" size="48" style="margin-bottom: 1rem; color: var(--text-muted)"></i>
+                <h3>Haz clic aquí y presiona Ctrl + V</h3>
+                <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem;">
+                    O haz clic en el botón para leer el portapapeles
+                </p>
+                <button class="btn-primary" id="readClipboardBtn">
+                    <i data-lucide="clipboard-list"></i> Leer Portapapeles
+                </button>
+            </div>
+            <div class="card-title" style="margin-top: 3rem;">
+                <i data-lucide="code-2" style="color: var(--primary)"></i>
+                Implementación en Node.js
+            </div>
+            <p style="color: var(--text-muted); margin-bottom: 1rem; font-size: 0.9rem;">
+                Para interceptar URLs a nivel de sistema operativo (fuera del navegador), necesitas Node.js y una librería como <code>clipboardy</code>.
+            </p>
+            <div class="code-container">
+                <div class="code-header">
+                    <span>index.js</span>
+                    <span style="color: var(--accent)">JavaScript</span>
+                </div>
+                <pre><code><span class="keyword">const</span> clipboardy = <span class="function">require</span>(<span class="string">'clipboardy'</span>);
+<span class="comment">// Almacén para evitar duplicados consecutivos</span>
+<span class="keyword">let</span> lastClipboardContent = <span class="string">''</span>;
+<span class="function">console</span>.<span class="function">log</span>(<span class="string">"🚀 Monitoreando portapapeles..."</span>);
+<span class="comment">// Intervalo de monitoreo cada 1 segundo</span>
+<span class="keyword">setInterval</span>(() => {
+    <span class="keyword">const</span> currentContent = clipboardy.readSync();
+    <span class="keyword">if</span> (currentContent !== lastClipboardContent) {
+        lastClipboardContent = currentContent;
+        <span class="comment">// Regex para validar si es una URL</span>
+        <span class="keyword">const</span> urlPattern = <span class="string">/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/</span>;
+        <span class="keyword">if</span> (urlPattern.test(currentContent)) {
+            <span class="function">console</span>.<span class="function">log</span>(<span class="string">"\n🎯 URL Interceptada!"</span>);
+            <span class="function">console</span>.<span class="function">log</span>(<span class="string">`Enlace: ${currentContent}`</span>);
+            <span class="function">console</span>.<span class="function">log</span>(<span class="string">`Hora: ${<span class="keyword">new</span> Date().toLocaleTimeString()}`</span>);
+        }
+    }
+}, <span class="number">1000</span>);</code></pre>
+            </div>
+        </div>
+        <aside>
+            <div class="card" style="height: 100%;">
+                <div class="card-title">
+                    <i data-lucide="history" style="color: var(--success)"></i>
+                    Historial
+                </div>
+                <div class="history-panel" id="historyPanel">
+                    <div class="empty-state">No hay URLs interceptadas aún...</div>
+                </div>
+            </div>
+        </aside>
+    </main>
+    <script>
+        // Initialize Lucide Icons
+        lucide.createIcons();
+        const dropZone = document.getElementById('dropZone');
+        const readBtn = document.getElementById('readClipboardBtn');
+        const historyPanel = document.getElementById('historyPanel');
+        // URL Validation Regex
+        const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
+        // Function to add URL to history
+        function addToHistory(url) {
+            if (!urlRegex.test(url)) {
+                alert("El contenido del portapapeles no es una URL válida.");
+                return false;
+            }
+            // Remove empty state
+            if (historyPanel.querySelector('.empty-state')) {
+                historyPanel.innerHTML = '';
+            }
+            const now = new Date();
+            const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+            const item = document.createElement('div');
+            item.className = 'history-item';
+            item.innerHTML = `
+                <a href="${url}" target="_blank" class="url">${url}</a>
+                <div class="meta">
+                    <span>${timeStr}</span>
+                    <span class="status-badge">Capturado</span>
+                </div>
+            `;
+            historyPanel.prepend(item);
+            return true;
+        }
+        // Read clipboard from button
+        async function handleReadClipboard() {
+            try {
+                const text = await navigator.clipboard.readText();
+                if (text) {
+                    const success = addToHistory(text);
+                    if (success) {
+                        triggerSuccessEffect();
+                    }
+                }
+            } catch (err) {
+                alert("Error al acceder al portapapeles. Por favor, otorga los permisos.");
+                console.error('Clipboard error:', err);
+            }
+        }
+        // Visual effect for success
+        function triggerSuccessEffect() {
+            dropZone.classList.add('active');
+            setTimeout(() => dropZone.classList.remove('active'), 600);
+        }
+        // Event Listeners
+        readBtn.addEventListener('click', handleReadClipboard);
+        // Handle Ctrl+V when focusing the dropzone
+        dropZone.addEventListener('click', () => {
+            dropZone.style.borderColor = 'var(--accent)';
+            dropZone.style.background = 'rgba(99, 102, 241, 0.1)';
+        });
+        window.addEventListener('paste', (e) => {
+            // Only intercept if the user is interacting with the app
+            const text = (e.clipboardData || window.clipboardData).getData('text');
+            if (text) {
+                const success = addToHistory(text);
+                if (success) {
+                    triggerSuccessEffect();
+                }
+            }
+        });
+        // Reset dropzone style when clicking away
+        document.addEventListener('click', (e) => {
+            if (!dropZone.contains(e.target)) {
+                dropZone.style.borderColor = '';
+                dropZone.style.background = '';
+            }
+        });
+    </script>
+</body>
+</html>