Spaces:

HI7RAI
/

anycoder-0ca588b4

Running

File size: 23,330 Bytes

7aa249a

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CyberDeck / Expansive Asset Manager</title>
    
    <!-- Essential Libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">

    <style>
        :root {
            --neon-cyan: #00f3ff;
            --neon-pink: #ff00ff;
            --neon-green: #0aff0a;
            --dark-bg: #050505;
            --panel-bg: rgba(10, 10, 10, 0.85);
            --border-color: #333;
            --glass: rgba(255, 255, 255, 0.03);
            --shadow-glow: 0 0 20px rgba(0, 243, 255, 0.3);
            --card-ratio: 4/5; /* The requested 4:5 ratio */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--dark-bg);
            color: #e0e0e0;
            font-family: 'Share Tech Mono', monospace;
            overflow-x: hidden;
            height: 100vh;
            position: relative;
        }

        /* --- 3D Background Layer --- */
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            opacity: 0.6;
        }

        /* --- Cyberpunk Overlays --- */
        .bg-grid {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 243, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 243, 255, 0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            animation: gridMove 20s linear infinite;
            z-index: -1;
            mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
        }

        @keyframes gridMove {
            0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
            100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
        }

        .vignette {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.9) 100%);
            pointer-events: none;
            z-index: 0;
        }

        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 243, 255, 0.03) 2px,
                rgba(0, 243, 255, 0.03) 4px
            );
            pointer-events: none;
            z-index: 100;
        }

        /* --- UI Layout --- */
        .ui-layer {
            position: relative;
            z-index: 10;
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        /* Header */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .logo {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            font-weight: 900;
            background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(0,243,255,0.5);
        }

        .anycoder-link {
            color: var(--neon-green);
            text-decoration: none;
            font-size: 0.9rem;
            border: 1px solid var(--neon-green);
            padding: 5px 15px;
            border-radius: 4px;
            transition: 0.3s;
        }
        .anycoder-link:hover {
            background: var(--neon-green);
            color: black;
            box-shadow: 0 0 15px var(--neon-green);
        }

        /* Dashboard Controls */
        .control-panel {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 20px;
            margin-bottom: 30px;
        }

        .input-zone {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            padding: 20px;
            border-radius: 8px;
            display: flex;
            gap: 10px;
            flex-direction: column;
        }

        textarea {
            width: 100%;
            height: 80px;
            background: rgba(0,0,0,0.5);
            border: 1px solid #333;
            color: var(--neon-cyan);
            font-family: 'Share Tech Mono', monospace;
            padding: 10px;
            resize: none;
        }

        .btn-group {
            display: flex;
            gap: 10px;
        }

        button {
            background: transparent;
            border: 1px solid var(--neon-cyan);
            color: var(--neon-cyan);
            padding: 10px 20px;
            font-family: 'Orbitron', sans-serif;
            cursor: pointer;
            transition: 0.3s;
            text-transform: uppercase;
            font-size: 0.8rem;
            flex: 1;
        }

        button:hover {
            background: var(--neon-cyan);
            color: black;
            box-shadow: var(--shadow-glow);
        }

        button.secondary {
            border-color: var(--neon-pink);
            color: var(--neon-pink);
        }
        button.secondary:hover {
            background: var(--neon-pink);
            box-shadow: 0 0 15px var(--neon-pink);
        }

        /* Performance Chart */
        .chart-container {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            padding: 10px;
            border-radius: 8px;
            height: 100%;
            min-height: 150px;
        }

        /* Gallery Grid (X-Cards) */
        .gallery-section {
            flex: 1;
        }
        
        .section-title {
            color: var(--neon-cyan);
            margin-bottom: 15px;
            font-size: 1.2rem;
            border-left: 3px solid var(--neon-cyan);
            padding-left: 10px;
        }

        .card-grid {
            display: grid;
            /* Auto-fit responsive grid */
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            padding-bottom: 50px;
        }

        .x-card {
            aspect-ratio: var(--card-ratio); /* 4:5 Scaling */
            background: var(--glass);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.27);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 15px;
        }

        .x-card:hover {
            transform: scale(1.05) translateY(-5px);
            border-color: var(--neon-cyan);
            box-shadow: 0 0 25px rgba(0, 243, 255, 0.2);
            z-index: 2;
        }

        /* Dynamic CSS Models (Injected via JS) */
        .x-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover;
            background-position: center;
            opacity: 0.4;
            transition: 0.5s;
            z-index: -1;
        }

        .card-overlay {
            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
            padding: 10px;
        }

        .card-id {
            font-family: 'Orbitron', sans-serif;
            font-size: 0.8rem;
            color: var(--neon-green);
            margin-bottom: 5px;
        }

        .card-meta {
            font-size: 0.7rem;
            color: #aaa;
        }

        /* Status Bar */
        .status-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0,0,0,0.8);
            border-top: 1px solid var(--border-color);
            padding: 5px 20px;
            font-size: 0.7rem;
            color: #666;
            z-index: 100;
            display: flex;
            justify-content: space-between;
        }

        /* Glitch Animation Class */
        .glitch {
            animation: glitch 1s linear infinite;
        }

        @keyframes glitch {
            2%, 64% { transform: translate(2px,0) skew(0deg); }
            4%, 60% { transform: translate(-2px,0) skew(0deg); }
            62% { transform: translate(0,0) skew(5deg); }
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .control-panel {
                grid-template-columns: 1fr;
            }
            .bg-grid {
                background-size: 20px 20px;
            }
        }
    </style>
</head>
<body>

    <!-- 3D Background -->
    <div id="canvas-container"></div>
    
    <!-- Overlay Effects -->
    <div class="bg-grid"></div>
    <div class="vignette"></div>
    <div class="scanlines"></div>

    <!-- Main UI -->
    <div class="ui-layer">
        <header>
            <div class="logo">CYBER_DECK <span style="font-size:0.5em; vertical-align: super;">v.0.9.2</span></div>
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with AnyCoder</a>
        </header>

        <div class="control-panel">
            <!-- Input / Import Section -->
            <div class="input-zone">
                <div style="color: var(--neon-cyan); font-size: 0.9rem; margin-bottom: 5px;">
                    <i class="fas fa-terminal"></i> SOURCE INJECTION PORT
                </div>
                <textarea id="codeInput" placeholder="Paste URL, Source Code, or Object Data here..."></textarea>
                <div class="btn-group">
                    <button onclick="importAndScan()">
                        <i class="fas fa-bolt"></i> Scan & Shuffle
                    </button>
                    <button class="secondary" onclick="saveConfiguration()">
                        <i class="fas fa-save"></i> Save Model
                    </button>
                    <button onclick="randomizePureCSS()">
                        <i class="fas fa-dice"></i> Randomize
                    </button>
                </div>
            </div>

            <!-- Performance Curve -->
            <div class="chart-container">
                <canvas id="performanceChart"></canvas>
            </div>
        </div>

        <div class="gallery-section">
            <div class="section-title">XCARD GALLERY <span style="font-size:0.6em; color:#666;">// ZOOM SCALED 4:5</span></div>
            <div class="card-grid" id="galleryGrid">
                <!-- Cards injected via JS -->
            </div>
        </div>
    </div>

    <div class="status-bar">
        <span id="statusText">SYSTEM: ONLINE // WAITING FOR INPUT...</span>
        <span>RENDER: RAYTRACING_SIM // FPS: 60</span>
    </div>

    <script>
        // --- 1. THREE.JS BACKGROUND (Raytracing Sim) ---
        let scene, camera, renderer, controls;
        let particles, geometry, material, mesh;

        function init3D() {
            const container = document.getElementById('canvas-container');
            
            scene = new THREE.Scene();
            // Fog for depth
            scene.fog = new THREE.FogExp2(0x050505, 0.002);

            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 30;
            camera.position.y = 10;

            renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            container.appendChild(renderer.domElement);

            // Orbit Controls
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;

            // "Raytracing" Look - Complex Geometry
            geometry = new THREE.IcosahedronGeometry(10, 2);
            material = new THREE.MeshStandardMaterial({ 
                color: 0x111111, 
                roughness: 0.1,
                metalness: 0.9,
                wireframe: true,
                emissive: 0x00f3ff,
                emissiveIntensity: 0.2
            });

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            // Background Particles
            const particlesGeometry = new THREE.BufferGeometry();
            const particlesCount = 700;
            const posArray = new Float32Array(particlesCount * 3);

            for(let i = 0; i < particlesCount * 3; i++) {
                posArray[i] = (Math.random() - 0.5) * 100;
            }
            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
            const particlesMaterial = new THREE.PointsMaterial({
                size: 0.1,
                color: 0xff00ff,
                transparent: true,
                opacity: 0.8
            });
            particles = new THREE.Points(particlesGeometry, particlesMaterial);
            scene.add(particles);

            // Lights
            const ambientLight = new THREE.AmbientLight(0x404040);
            scene.add(ambientLight);
            const pointLight = new THREE.PointLight(0x00f3ff, 2, 100);
            pointLight.position.set(10, 10, 10);
            scene.add(pointLight);

            animate();
        }

        function animate() {
            requestAnimationFrame(animate);
            
            // Rotate objects
            mesh.rotation.x += 0.002;
            mesh.rotation.y += 0.003;
            particles.rotation.y -= 0.001;

            controls.update();
            renderer.render(scene, camera);
        }

        // --- 2. CHART.JS (Performance Curve) ---
        let perfChart;
        function initChart() {
            const ctx = document.getElementById('performanceChart').getContext('2d');
            
            // Create gradient
            const gradient = ctx.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0, 'rgba(0, 243, 255, 0.5)');
            gradient.addColorStop(1, 'rgba(0, 243, 255, 0)');

            perfChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: Array.from({length: 20}, (_, i) => i),
                    datasets: [{
                        label: 'EXPERIMENTAL PERFORMANCE',
                        data: Array.from({length: 20}, () => Math.random() * 100),
                        borderColor: '#00f3ff',
                        backgroundColor: gradient,
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4,
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            labels: { color: '#0aff0a', font: { family: 'Share Tech Mono' } }
                        }
                    },
                    scales: {
                        y: {
                            grid: { color: 'rgba(255,255,255,0.05)' },
                            ticks: { color: '#666' }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { display: false }
                        }
                    }
                }
            });
        }

        // --- 3. APP LOGIC (Shuffle, Import, Save) ---
        
        // Utility: Strip file extensions
        function cleanName(name) {
            // Removes .js, .css, .html etc based on prompt requirement
            return name.replace(/\.(js|css|html|txt|json|py)$/i, '').trim();
        }

        // Utility: Generate random ID
        function generateID() {
            const chars = 'ABCDEF0123456789';
            let result = 'ID-';
            for (let i = 0; i < 8; i++) {
                result += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return result;
        }

        // Function: Create a Card
        function createCard(data, styleConfig) {
            const card = document.createElement('div');
            card.className = 'x-card';
            
            // Apply specific style config (The "CSS Model")
            card.style.borderColor = styleConfig.borderColor;
            card.style.boxShadow = styleConfig.boxShadow;
            
            // Set visual content
            // We simulate an image by using a generated gradient based on hash
            const hue = Math.floor(Math.random() * 360);
            card.style.background = `linear-gradient(135deg, rgba(0,0,0,0.8), hsla(${hue}, 70%, 50%, 0.2))`;
            
            // Inner HTML
            card.innerHTML = `
                <div class="card-overlay">
                    <div class="card-id">${data.id}</div>
                    <div class="card-meta">
                        ${data.name}<br>
                        VER: ${data.version}<br>
                        <span style="color:var(--neon-pink)">>> CONNECTED</span>
                    </div>
                </div>
            `;
            return card;
        }

        // Function: Import and Scan Logic
        function importAndScan() {
            const input = document.getElementById('codeInput').value;
            const grid = document.getElementById('galleryGrid');
            const status = document.getElementById('statusText');

            status.innerHTML = "SYSTEM: SCANNING INPUT STREAM...";
            status.style.color = "var(--neon-pink)";

            // 1. Parse Input (Mock Intelligence)
            // Split by newlines or common delimiters
            let rawLines = input.split(/[\n,;]+/);
            
            // If empty, generate random mock data
            if (input.trim() === "") {
                rawLines = ["module_a.js", "style_b.css", "image_c.png", "data_d.json"];
            }

            grid.innerHTML = ''; // Clear existing

            // 2. Generate Cards based on lines
            rawLines.forEach(line => {
                const cleanLine = cleanName(line); // "Remove extensions"
                if(cleanLine.length < 2) return;

                // Random "CSS Model" generation
                const modelStyles = [
                    { borderColor: '#00f3ff', boxShadow: '0 0 15px #00f3ff' },
                    { borderColor: '#ff00ff', boxShadow: '0 0 15px #ff00ff' },
                    { borderColor: '#0aff0a', boxShadow: '0 0 15px #0aff0a' }
                ];
                const randomStyle = modelStyles[Math.floor(Math.random() * modelStyles.length)];

                const cardData = {
                    name: cleanLine,
                    id: generateID(),
                    version: (Math.random() * 10).toFixed(2)
                };

                const card = createCard(cardData, randomStyle);
                grid.appendChild(card);
            });

            // 3. Update Chart with random noise
            updateChart();

            setTimeout(() => {
                status.innerHTML = "SYSTEM: IMPORT COMPLETE. MODELS READY.";
                status.style.color = "var(--neon-green)";
            }, 1000);
        }

        // Function: Pure CSS Randomizer (The "Chaos" Mode)
        function randomizePureCSS() {
            const grid = document.getElementById('galleryGrid');
            const cards = grid.querySelectorAll('.x-card');
            
            cards.forEach(card => {
                // Apply random transforms and border colors
                const colors = ['#00f3ff', '#ff00ff', '#0aff0a', '#ffffff'];
                const randomColor = colors[Math.floor(Math.random() * colors.length)];
                
                card.style.borderColor = randomColor;
                card.style.boxShadow = `0 0 20px ${randomColor}`;
                card.style.transform = `rotateX(${Math.random() * 10 - 5}deg) rotateY(${Math.random() * 10 - 5}deg)`;
            });

            document.getElementById('statusText').innerText = "SYSTEM: CSS MODELS RANDOMIZED";
        }

        // Function: Save Configuration
        function saveConfiguration() {
            const cards = document.querySelectorAll('.x-card');
            const config = {
                timestamp: new Date().toISOString(),
                model_count: cards.length,
                gallery_state: []
            };

            cards.forEach(card => {
                config.gallery_state.push({
                    id: card.querySelector('.card-id').innerText,
                    style: card.getAttribute('style') // Save current CSS
                });
            });

            const blob = new Blob([JSON.stringify(config, null, 2)], {type: "application/json"});
            saveAs(blob, "cyberdeck_config.json");
            
            const status = document.getElementById('statusText');
            status.innerText = "SYSTEM: CONFIGURATION SAVED TO DISK";
            status.style.color = "var(--neon-cyan)";
        }

        function updateChart() {
            const newData = Array.from({length: 20}, () => Math.random() * 100);
            perfChart.data.datasets[0].data = newData;
            perfChart.update();
        }

        // --- INITIALIZATION ---
        window.onload = function() {
            init3D();
            initChart();
            
            // Initialize with some dummy data
            document.getElementById('codeInput').value = "interface_main.js\nassets_bg.png\nconfig_v2.json\nrenderer.glsl";
            importAndScan();

            // Handle Window Resize
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
        };

    </script>
</body>
</html>