Spaces:
Running
Running
| <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> |