Spaces:

HI7RAI
/

anycoder-71a27bcc

Running

App Files Files Community

HI7RAI commited on Jan 3

Commit

660ed8f

verified ·

1 Parent(s): 49cca39

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +0 -468

index.html CHANGED Viewed

@@ -1,468 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Crypto Live 3D | Immersive Charts</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
-    <!-- Import Three.js from CDN -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <!-- Import OrbitControls -->
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
-    <style>
-        :root {
-            --primary: #00f2ff;
-            --danger: #ff0055;
-            --bg: #050505;
-            --glass: rgba(255, 255, 255, 0.05);
-            --glass-border: rgba(255, 255, 255, 0.1);
-            --text: #ffffff;
-            --text-dim: #888888;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            background-color: var(--bg);
-            color: var(--text);
-            font-family: 'Space Grotesk', sans-serif;
-            overflow: hidden; /* Prevent scroll, canvas handles it */
-            height: 100vh;
-            width: 100vw;
-        }
-        /* --- 3D Canvas Container --- */
-        #canvas-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-            background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
-        }
-        /* --- UI Overlay Layer --- */
-        .ui-layer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 10;
-            pointer-events: none; /* Let clicks pass through to 3D canvas */
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 2rem;
-        }
-        /* --- Header --- */
-        header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            pointer-events: auto;
-        }
-        .brand {
-            font-size: 1.5rem;
-            font-weight: 700;
-            letter-spacing: 2px;
-            background: linear-gradient(90deg, #fff, var(--primary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .anycoder-link {
-            font-size: 0.9rem;
-            color: var(--text-dim);
-            text-decoration: none;
-            border-bottom: 1px solid var(--text-dim);
-            transition: 0.3s;
-        }
-        .anycoder-link:hover {
-            color: var(--primary);
-            border-color: var(--primary);
-        }
-        /* --- Controls & Stats --- */
-        .controls-container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 2rem;
-            align-items: flex-end;
-            pointer-events: auto;
-        }
-        .stat-card {
-            background: var(--glass);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--glass-border);
-            padding: 1.5rem;
-            border-radius: 16px;
-            min-width: 200px;
-            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-            transition: transform 0.3s ease;
-        }
-        .stat-card:hover {
-            transform: translateY(-5px);
-            border-color: var(--primary);
-        }
-        .label {
-            font-size: 0.8rem;
-            color: var(--text-dim);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 0.5rem;
-        }
-        .value {
-            font-size: 2rem;
-            font-weight: 700;
-        }
-        .value.positive { color: #00ff88; text-shadow: 0 0 10px rgba(0, 255, 136, 0.4); }
-        .value.negative { color: var(--danger); text-shadow: 0 0 10px rgba(255, 0, 85, 0.4); }
-        /* --- Select Dropdown --- */
-        .select-wrapper {
-            position: relative;
-        }
-        select {
-            background: var(--glass);
-            color: white;
-            border: 1px solid var(--glass-border);
-            padding: 1rem 3rem 1rem 1.5rem;
-            border-radius: 12px;
-            font-family: 'Space Grotesk', sans-serif;
-            font-size: 1rem;
-            outline: none;
-            cursor: pointer;
-            appearance: none;
-            width: 200px;
-        }
-        .select-arrow {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            pointer-events: none;
-            color: var(--primary);
-        }
-        /* --- Loading Indicator --- */
-        .loader {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 20;
-            pointer-events: none;
-            font-size: 1.2rem;
-            color: var(--primary);
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-        .loader.active { opacity: 1; }
-        /* --- Responsive --- */
-        @media (max-width: 768px) {
-            .ui-layer { padding: 1rem; }
-            .controls-container { flex-direction: column; align-items: stretch; gap: 1rem; }
-            .stat-card { width: 100%; }
-            .value { font-size: 1.5rem; }
-            header { flex-direction: column; gap: 10px; align-items: flex-start; }
-        }
-    </style>
-</head>
-<body>
-    <!-- 3D Canvas -->
-    <div id="canvas-container"></div>
-    <!-- UI Overlay -->
-    <div class="ui-layer">
-        <header>
-            <div class="brand">CRYPTO<span style="color:var(--primary)">3D</span></div>
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
-        </header>
-        <div class="controls-container">
-            <!-- Selection -->
-            <div class="select-wrapper">
-                <select id="coin-select">
-                    <option value="bitcoin">Bitcoin (BTC)</option>
-                    <option value="ethereum">Ethereum (ETH)</option>
-                    <option value="solana">Solana (SOL)</option>
-                    <option value="cardano">Cardano (ADA)</option>
-                    <option value="ripple">XRP (XRP)</option>
-                    <option value="dogecoin">Dogecoin (DOGE)</option>
-                </select>
-                <span class="select-arrow">▼</span>
-            </div>
-            <!-- Price Display -->
-            <div class="stat-card">
-                <div class="label">Current Price</div>
-                <div class="value" id="current-price">Loading...</div>
-            </div>
-            <!-- 24h Change -->
-            <div class="stat-card">
-                <div class="label">24h Change</div>
-                <div class="value" id="price-change">Loading...</div>
-            </div>
-        </div>
-    </div>
-    <div class="loader" id="loader">Fetching Live Data...</div>
-    <script>
-        // --- Configuration ---
-        const sceneConfig = {
-            bgColor: 0x050505,
-            lineColor: 0x00f2ff,
-            gridColor: 0x222222
-        };
-        // --- Three.js Variables ---
-        let scene, camera, renderer, controls;
-        let chartMesh, gridHelper, particles;
-        let animationId;
-        // --- Data State ---
-        let currentCoin = 'bitcoin';
-        let chartData = [];
-        // --- Initialization ---
-        function init() {
-            const container = document.getElementById('canvas-container');
-            // 1. Scene
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(sceneConfig.bgColor);
-            scene.fog = new THREE.FogExp2(sceneConfig.bgColor, 0.03);
-            // 2. Camera
-            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 15, 30);
-            // 3. Renderer
-            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.setPixelRatio(window.devicePixelRatio);
-            container.appendChild(renderer.domElement);
-            // 4. Controls
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
-            controls.enableDamping = true;
-            controls.dampingFactor = 0.05;
-            controls.autoRotate = true;
-            controls.autoRotateSpeed = 1.0;
-            controls.maxPolarAngle = Math.PI / 2; // Don't go below ground
-            // 5. Lights
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            scene.add(ambientLight);
-            const pointLight = new THREE.PointLight(sceneConfig.lineColor, 1, 100);
-            pointLight.position.set(0, 20, 10);
-            scene.add(pointLight);
-            // 6. Helpers
-            gridHelper = new THREE.GridHelper(100, 50, sceneConfig.lineColor, sceneConfig.gridColor);
-            scene.add(gridHelper);
-            // 7. Background Particles
-            addParticles();
-            // 8. Event Listeners
-            window.addEventListener('resize', onWindowResize);
-            document.getElementById('coin-select').addEventListener('change', (e) => {
-                currentCoin = e.target.value;
-                fetchCryptoData();
-            });
-            // Initial Load
-            fetchCryptoData();
-            animate();
-        }
-        // --- Particle System ---
-        function addParticles() {
-            const geometry = new THREE.BufferGeometry();
-            const count = 1000;
-            const positions = new Float32Array(count * 3);
-            for(let i = 0; i < count * 3; i++) {
-                positions[i] = (Math.random() - 0.5) * 100;
-            }
-            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-            const material = new THREE.PointsMaterial({
-                size: 0.1,
-                color: sceneConfig.lineColor,
-                transparent: true,
-                opacity: 0.5
-            });
-            particles = new THREE.Points(geometry, material);
-            scene.add(particles);
-        }
-        // --- API Data Fetching ---
-        async function fetchCryptoData() {
-            const loader = document.getElementById('loader');
-            loader.classList.add('active');
-            try {
-                // Fetch market chart data (price history)
-                const response = await fetch(`https://api.coingecko.com/api/v3/coins/${currentCoin}/market_chart?vs_currency=usd&days=1&interval=hourly`);
-                const data = await response.json();
-                if(!data.prices) throw new Error("No data");
-                chartData = data.prices; // Array of [timestamp, price]
-                updateUI(chartData);
-                generate3DChart(chartData);
-            } catch (error) {
-                console.error("API Error:", error);
-                // Fallback for demo if API limit reached
-                simulateFallbackData();
-            } finally {
-                loader.classList.remove('active');
-            }
-        }
-        function simulateFallbackData() {
-            // Generate fake data if API fails
-            let fakeData = [];
-            let price = 30000;
-            let now = Date.now();
-            for(let i=0; i<100; i++) {
-                price = price + (Math.random() - 0.5) * 500;
-                fakeData.push([now - (100-i)*360000, price]);
-            }
-            chartData = fakeData;
-            updateUI(chartData);
-            generate3DChart(chartData);
-        }
-        // --- UI Updates ---
-        function updateUI(data) {
-            const currentPrice = data[data.length - 1][1];
-            const previousPrice = data[0][1];
-            const change = ((currentPrice - previousPrice) / previousPrice) * 100;
-            const priceEl = document.getElementById('current-price');
-            const changeEl = document.getElementById('price-change');
-            priceEl.innerText = `$${currentPrice.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
-            changeEl.innerText = `${change.toFixed(2)}%`;
-            changeEl.className = change >= 0 ? 'value positive' : 'value negative';
-            // Change chart color based on trend
-            const color = change >= 0 ? 0x00ff88 : 0xff0055;
-            sceneConfig.lineColor = color;
-        }
-        // --- 3D Chart Generation ---
-        function generate3DChart(data) {
-            // Remove old chart
-            if (chartMesh) {
-                scene.remove(chartMesh);
-                chartMesh.geometry.dispose();
-                chartMesh.material.dispose();
-            }
-            // Process data
-            const points = [];
-            const maxPrice = Math.max(...data.map(d => d[1]));
-            const minPrice = Math.min(...data.map(d => d[1]));
-            const priceRange = maxPrice - minPrice || 1;
-            // Normalize data to fit in 3D space
-            data.forEach((point, index) => {
-                const x = (index / data.length) * 40 - 20; // Spread across X axis (-20 to 20)
-                const y = ((point[1] - minPrice) / priceRange) * 10; // Height based on price
-                const z = 0;
-                points.push(new THREE.Vector3(x, y, z));
-            });
-            // Create Curve
-            const curve = new THREE.CatmullRomCurve3(points);
-            // Create Tube Geometry
-            const geometry = new THREE.TubeGeometry(curve, 100, 0.4, 8, false);
-            // Material (Glowing Neon)
-            const material = new THREE.MeshPhongMaterial({
-                color: sceneConfig.lineColor,
-                emissive: sceneConfig.lineColor,
-                emissiveIntensity: 0.5,
-                shininess: 100
-            });
-            chartMesh = new THREE.Mesh(geometry, material);
-            // Add vertical lines (Candlestick-like effect simplified)
-            const lineMaterial = new THREE.LineBasicMaterial({
-                color: sceneConfig.lineColor,
-                transparent: true,
-                opacity: 0.3
-            });
-            scene.add(chartMesh);
-        }
-        // --- Animation Loop ---
-        function animate() {
-            requestAnimationFrame(animate);
-            // Rotate particles slowly
-            if(particles) {
-                particles.rotation.y += 0.001;
-            }
-            // Update controls
-            controls.update();
-            // Pulse effect on the chart mesh
-            if(chartMesh) {
-                const time = Date.now() * 0.001;
-                chartMesh.material.emissiveIntensity = 0.5 + Math.sin(time * 2) * 0.2;
-            }
-            renderer.render(scene, camera);
-        }
-        // --- Window Resize Handler ---
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        // Start App
-        init();
-    </script>
-</body>
-</html>