<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SNEEDCORP™ CRYPTOTRADING | WHERE YOU LOSE BIGGER</title>
    <style>
        body {
            background-color: #0f0f0f;
            color: #00ff00;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
            margin: 0;
            padding: 0;
            cursor: none;
            overflow: hidden; /* Prevent scrollbars due to parallax */
        }
        #border {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 20px dashed #ff00ff;
            pointer-events: none;
            z-index: 9999;
        }
        h1 {
            font-size: 3em;
            color: #ff00ff;
            margin-top: 50px;
            z-index: 1;
            position: relative;
        }
        h2 {
            color: #ffcc00;
            z-index: 1;
            position: relative;
        }
        p {
            z-index: 1;
            position: relative;
        }
        .warning {
            color: #ff3300;
            font-size: 1.2em;
            animation: blink 1s infinite alternate;
            z-index: 1;
            position: relative;
        }
        @keyframes blink {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        .btn {
            padding: 15px;
            background-color: #ff3300;
            border: 3px solid #00ff00;
            color: #00ff00;
            font-size: 1em;
            cursor: none;
            margin-top: 30px;
            transition: background-color 0.5s, transform 0.3s;
            z-index: 1;
            position: relative;
        }
        .btn:hover {
            background-color: #ff6600;
            transform: scale(1.1);
        }
        #cursor {
            position: fixed;
            pointer-events: none;
            z-index: 10000;
        }
        #threeCanvas {
            width: 1000px; /* Increased size for larger 3D visualization */
            height: 600px;
            margin: 20px auto;
            background: url('https://developer.valvesoftware.com/w/images/thumb/b/ba/CSGOErrorTextures.png/1280px-CSGOErrorTextures.png'); /* Missing texture pattern */
            background-size: cover;
            z-index: 0;
            position: relative;
        }
        /* Goblin Banker */
        #goblinBanker {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 100px;
            cursor: pointer;
            z-index: 1000;
            transform: scaleX(-1); /* Flip image horizontally */
            transition: transform 0.3s;
        }
        #goblinBanker:hover {
            transform: scaleX(1); /* Flip back on hover */
        }
        /* Sound Toggle Button */
        #soundToggle {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #ff3300;
            border: 2px solid #00ff00;
            color: #00ff00;
            cursor: pointer;
            z-index: 1001;
            transition: background-color 0.3s;
        }
        #soundToggle:hover {
            background-color: #ff6600;
        }
        /* Tooltip Styling */
        .tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.8);
            color: #ffffff;
            padding: 5px 10px;
            border-radius: 5px;
            pointer-events: none;
            font-size: 0.9em;
            z-index: 10002;
            display: none;
        }
    </style>
</head>
<body>
    <div id="border"></div>
    <img id="cursor" src="https://media.tenor.com/BEd8XvEMCeYAAAAi/cruelty-squad.gif" alt="Custom Cursor" width="32" height="32">

    <h1>WELCOME TO SNEEDCORP™ CRYPTOTRADING</h1>
    <h2>RIDE THE CHAOS</h2>
    <p>Feeling lucky? You've entered the darkest corner of crypto-finance. Welcome to a world where reality is optional, and the only certainty is the void. Prepare for financial obliteration.</p>
    
    <p class="warning">DANGER: SneedCoin trading may result in psychological breakdowns</p>
    
    <canvas id="threeCanvas"></canvas>
    
    <h2>Features</h2>
    <ul style="list-style:none;">
        <li>NO transaction fees – because there are no transactions</li>
        <li>RNG-based market – Win, lose, or transcend reality</li>
        <li>Anti-SneedSnipe protection – Stay in or forever regret it</li>
        <li>Hyperinflation Simulation – Trade through the end of days</li>
    </ul>
    <p>"Nothing is real. Everything is Sneed." – CEO of SneedCorp™</p>
    <button class="btn" onclick="alert('Download not available – because why would it be?')">Download SneedCoin Trader</button>
    <h2>TROUBLESHOOTING</h2>
    <p>If the SneedCoins won't transfer, then you've already lost. Reboot your life.</p>
    <p>Graphs showing impossible values? Congratulations, you broke through to Sneedverse.</p>
    
    <footer style="margin-top: 100px; color: #888; z-index: 1; position: relative;">
        ©202X SneedCorp™ | Unauthorized trading may result in extreme mental peril.<br>
        Not actual financial advice. Sneed responsibly.
    </footer>

    <!-- Goblin Banker Image -->
    <img id="goblinBanker" src="https://i.ibb.co/7jHPLZn/ezgif-2-e52f3f6f7f.gif" alt="Goblin Banker">

    <!-- Sound Toggle Button -->
    <button id="soundToggle">🔇 Sound Off</button>

    <!-- Background Audio -->
    <audio id="backgroundAudio" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <!-- Tooltip Element -->
    <div id="tooltip" class="tooltip"></div>

    

    <script type="importmap">
        {
            "imports": {
              "three": "https://unpkg.com/three@0.155.0/build/three.module.js",
              "three/addons/": "https://unpkg.com/three@0.155.0/examples/jsm/",
              "dat.gui": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
            }
        }
        </script>
    
    <script type="module">
        import*as THREE from 'three';
        import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
        import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';

        // Custom cursor
        const cursor = document.getElementById('cursor');
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX - 16 + 'px';
            cursor.style.top = e.clientY - 16 + 'px';
        });

        // Goblin Banker interaction
        const goblinBanker = document.getElementById('goblinBanker');
        goblinBanker.addEventListener('click', () => {
            alert('The goblin banker chuckles ominously...');
        });

        // Background Audio Control
        const backgroundAudio = document.getElementById('backgroundAudio');
        const soundToggle = document.getElementById('soundToggle');
        let isPlaying = false;

        soundToggle.addEventListener('click', () => {
            if (isPlaying) {
                backgroundAudio.pause();
                soundToggle.textContent = '🔇 Sound Off';
            } else {
                backgroundAudio.play();
                soundToggle.textContent = '🔊 Sound On';
            }
            isPlaying = !isPlaying;
        });

        // Initialize with sound off
        soundToggle.textContent = '🔇 Sound Off';

        // Tooltip Setup
        const tooltip = document.getElementById('tooltip');

        // Three.js 3D Scene Setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, 1000 / 600, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('threeCanvas'), alpha: true });
        renderer.setSize(1000, 600);
        renderer.setPixelRatio(window.devicePixelRatio);

        // Orbit Controls for better navigation
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.enablePan = true;
        controls.enableZoom = true;

        // Add ambient light to the scene
        const ambientLight = new THREE.AmbientLight(0x00ff00, 0.5);
        scene.add(ambientLight);

        // Add directional light for shadows and depth
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(0, 50, 50);
        scene.add(directionalLight);

        // Texture Loader
        const textureLoader = new THREE.TextureLoader();
        const missingTexture = textureLoader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcFGIbBCX1VZlegxz53ldRXKvnURK5awA_QA&s');

        // Financial Market Data (Mock Data)
        const marketData = [
            { name: 'Bitcoin', value: 50 },
            { name: 'Ethereum', value: 70 },
            { name: 'Ripple', value: 40 },
            { name: 'Litecoin', value: 60 },
            { name: 'Dogecoin', value: 30 },
            { name: 'Cardano', value: 80 },
            { name: 'Polkadot', value: 55 },
            { name: 'Solana', value: 65 },
            { name: 'Chainlink', value: 45 },
            { name: 'Stellar', value: 35 }
        ];

        // Function to create a bar for the financial market visualization
        function createBar(name, value, xPosition) {
            const geometry = new THREE.BoxGeometry(1, value, 1);
            const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, map: missingTexture });
            const bar = new THREE.Mesh(geometry, material);
            bar.position.set(xPosition, value / 2, 0);
            bar.name = name;
            return bar;
        }

        // Create bars based on market data
        const bars = [];
        const spacing = 3;
        const startX = -((marketData.length - 1) * spacing) / 2;
        marketData.forEach((data, index) => {
            const bar = createBar(data.name, data.value, startX + index * spacing);
            scene.add(bar);
            bars.push(bar);
        });

        // Raycaster for detecting mouse interactions
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();

        function onDocumentMouseMove(event) {
            // Calculate mouse position in normalized device coordinates (-1 to +1)
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
        }

        function onDocumentMouseClick(event) {
            // Update mouse coordinates
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

            // Update the picking ray with the camera and mouse position
            raycaster.setFromCamera(mouse, camera);

            // Calculate objects intersecting the picking ray
            const intersects = raycaster.intersectObjects(bars);

            if (intersects.length > 0) {
                const intersectedBar = intersects[0].object;
                alert(`${intersectedBar.name} Market Value: ${intersectedBar.scale.y * 10} Billion USD`);
            }
        }

        // Event Listeners
        window.addEventListener('mousemove', onDocumentMouseMove, false);
        window.addEventListener('click', onDocumentMouseClick, false);
        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            const width = 1000;
            const height = 600;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        }

        // Animation Loop
        function animate() {
            requestAnimationFrame(animate);

            // Rotate bars for a dynamic effect
            bars.forEach(bar => {
                bar.rotation.y += 0.005;
            });

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

        animate();

        // Initial camera position
        camera.position.set(0, 50, 100);
        controls.update();
    </script>
</body>
</html>


make the bars larger, market simulation more engaing and clearly labelled. make it more dynamic.