Spaces:

Abrasax22
/

3d-model-threads

Running

App Files Files Community

Abrasax22 commited on Apr 16, 2025

Commit

5d28fa5

verified ·

1 Parent(s): 1eedf16

Add 1 files

Browse files

Files changed (1) hide show

index.html +371 -315

index.html CHANGED Viewed

@@ -3,225 +3,353 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Model Viewer | Threads</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <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.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        #model-container {
-            width: 100%;
-            height: 70vh;
-            position: relative;
-            overflow: hidden;
-            border-radius: 16px;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
         }
-        .loading-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            z-index: 10;
-        }
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: #fff;
-            animation: spin 1s ease-in-out infinite;
-            margin-bottom: 15px;
         }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
         }
-        .control-panel {
-            position: absolute;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.5);
-            padding: 10px 15px;
-            border-radius: 30px;
-            display: flex;
-            gap: 10px;
-            z-index: 5;
-        }
-        .control-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.2);
-            border: none;
-            color: white;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            transition: all 0.3s;
         }
-        .control-btn:hover {
-            background: rgba(255, 255, 255, 0.4);
-            transform: scale(1.1);
         }
-        .outfit-option {
-            transition: all 0.3s;
-            filter: grayscale(100%);
         }
-        .outfit-option.active {
-            filter: grayscale(0%);
-            transform: scale(1.05);
-            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
         }
     </style>
 </head>
-<body class="bg-gray-900 text-white">
-    <div class="container mx-auto px-4 py-8 max-w-4xl">
         <!-- Header -->
         <header class="flex justify-between items-center mb-8">
             <div class="flex items-center">
-                <i class="fas fa-arrow-left text-xl mr-4 cursor-pointer"></i>
-                <h1 class="text-2xl font-bold">3D Model Viewer</h1>
             </div>
             <div class="flex items-center space-x-4">
-                <button class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded-full font-medium">
-                    <i class="fas fa-heart mr-2"></i> Like
                 </button>
-                <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full font-medium">
-                    <i class="fas fa-share mr-2"></i> Share
                 </button>
             </div>
         </header>
-        <!-- Model Container -->
-        <div id="model-container">
-            <div class="loading-overlay">
-                <div class="spinner"></div>
-                <p>Loading 3D model...</p>
             </div>
-        </div>
-        <!-- Model Controls -->
-        <div class="control-panel">
-            <button class="control-btn" id="rotate-btn" title="Auto Rotate">
-                <i class="fas fa-sync-alt"></i>
-            </button>
-            <button class="control-btn" id="reset-btn" title="Reset View">
-                <i class="fas fa-crosshairs"></i>
-            </button>
-            <button class="control-btn" id="zoom-in-btn" title="Zoom In">
-                <i class="fas fa-search-plus"></i>
-            </button>
-            <button class="control-btn" id="zoom-out-btn" title="Zoom Out">
-                <i class="fas fa-search-minus"></i>
-            </button>
-        </div>
-        <!-- Model Info -->
-        <div class="mt-6">
-            <div class="flex items-center mb-4">
-                <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center mr-3">
-                    <i class="fas fa-user text-white"></i>
                 </div>
-                <div>
-                    <h3 class="font-bold">FashionDesigner</h3>
-                    <p class="text-gray-400 text-sm">3D Model Creator</p>
                 </div>
             </div>
-            <h2 class="text-xl font-bold mb-2">Summer Collection 2023</h2>
-            <p class="text-gray-300 mb-4">
-                Check out our latest 3D fashion model with interactive controls.
-                Tap the outfit options below to change styles.
-            </p>
-            <div class="flex items-center text-gray-400 text-sm mb-6">
-                <span class="mr-4"><i class="fas fa-eye mr-1"></i> 12.4k views</span>
-                <span><i class="fas fa-comment mr-1"></i> 342 comments</span>
             </div>
         </div>
-        <!-- Outfit Options -->
-        <div class="mb-8">
-            <h3 class="font-bold mb-3">Outfit Options</h3>
-            <div class="grid grid-cols-4 gap-3">
-                <div class="outfit-option active cursor-pointer" data-outfit="default">
-                    <img src="https://via.placeholder.com/100x100/333333/ffffff?text=Default" alt="Default" class="w-full rounded-lg">
-                </div>
-                <div class="outfit-option cursor-pointer" data-outfit="casual">
-                    <img src="https://via.placeholder.com/100x100/555555/ffffff?text=Casual" alt="Casual" class="w-full rounded-lg">
-                </div>
-                <div class="outfit-option cursor-pointer" data-outfit="formal">
-                    <img src="https://via.placeholder.com/100x100/777777/ffffff?text=Formal" alt="Formal" class="w-full rounded-lg">
                 </div>
-                <div class="outfit-option cursor-pointer" data-outfit="sporty">
-                    <img src="https://via.placeholder.com/100x100/999999/ffffff?text=Sporty" alt="Sporty" class="w-full rounded-lg">
                 </div>
             </div>
-        </div>
-        <!-- Comments Section -->
-        <div class="bg-gray-800 rounded-xl p-4">
-            <div class="flex items-center mb-4">
-                <i class="fas fa-comments text-xl mr-2"></i>
-                <h3 class="font-bold">Comments</h3>
-            </div>
-            <div class="flex mb-4">
-                <input type="text" placeholder="Add a comment..." class="flex-grow bg-gray-700 rounded-l-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500">
-                <button class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded-r-full">
-                    <i class="fas fa-paper-plane"></i>
-                </button>
-            </div>
-            <div class="space-y-4">
-                <div class="flex">
-                    <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-3">
-                        <i class="fas fa-user text-white text-xs"></i>
                     </div>
-                    <div class="flex-grow">
-                        <div class="bg-gray-700 rounded-lg p-3">
-                            <h4 class="font-bold text-sm">User123</h4>
-                            <p class="text-sm">This 3D model is amazing! The details are incredible.</p>
                         </div>
-                        <div class="flex text-xs text-gray-400 mt-1 space-x-3">
-                            <span>2h ago</span>
-                            <span class="cursor-pointer hover:text-white">Like</span>
-                            <span class="cursor-pointer hover:text-white">Reply</span>
                         </div>
                     </div>
                 </div>
-                <div class="flex">
-                    <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-3">
-                        <i class="fas fa-user text-white text-xs"></i>
                     </div>
-                    <div class="flex-grow">
-                        <div class="bg-gray-700 rounded-lg p-3">
-                            <h4 class="font-bold text-sm">FashionLover</h4>
-                            <p class="text-sm">Can you make more poses available? Would love to see different angles.</p>
-                        </div>
-                        <div class="flex text-xs text-gray-400 mt-1 space-x-3">
-                            <span>1h ago</span>
-                            <span class="cursor-pointer hover:text-white">Like</span>
-                            <span class="cursor-pointer hover:text-white">Reply</span>
                         </div>
                     </div>
                 </div>
@@ -230,150 +358,78 @@
     </div>
     <script>
-        // Initialize Three.js scene
-        let scene, camera, renderer, model, controls;
-        let autoRotate = false;
-        let loadingOverlay = document.querySelector('.loading-overlay');
-        // Sample model data (in a real app, you would load a GLTF/GLB model)
-        function init() {
-            // Scene setup
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x222222);
-            // Camera setup
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.z = 5;
-            // Renderer setup
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(document.getElementById('model-container').clientWidth,
-                            document.getElementById('model-container').clientHeight);
-            document.getElementById('model-container').appendChild(renderer.domElement);
-            // Lighting
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(1, 1, 1);
-            scene.add(directionalLight);
-            // Controls
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
-            controls.enableDamping = true;
-            controls.dampingFactor = 0.05;
-            // Create a simple placeholder model (in a real app, load a GLTF model)
-            createPlaceholderModel();
-            // Handle window resize
-            window.addEventListener('resize', onWindowResize);
-            // Start animation loop
-            animate();
-        }
-        function createPlaceholderModel() {
-            // Remove existing model if any
-            if (model) {
-                scene.remove(model);
             }
-            // Create a female-shaped mesh
-            const bodyGeometry = new THREE.SphereGeometry(1, 32, 32);
-            bodyGeometry.scale(0.7, 1.2, 0.5);
-            const headGeometry = new THREE.SphereGeometry(0.5, 32, 32);
-            headGeometry.translate(0, 1.8, 0);
-            const mergedGeometry = new THREE.BufferGeometry();
-            const body = new THREE.Mesh(bodyGeometry);
-            const head = new THREE.Mesh(headGeometry);
-            mergedGeometry.merge(body.geometry, body.matrix);
-            mergedGeometry.merge(head.geometry, head.matrix);
-            const material = new THREE.MeshStandardMaterial({
-                color: 0xffccaa,
-                roughness: 0.3,
-                metalness: 0.1
-            });
-            model = new THREE.Mesh(mergedGeometry, material);
-            scene.add(model);
-            // Hide loading overlay
-            setTimeout(() => {
-                loadingOverlay.style.opacity = '0';
-                setTimeout(() => {
-                    loadingOverlay.style.display = 'none';
-                }, 300);
-            }, 1000);
         }
-        function onWindowResize() {
-            const container = document.getElementById('model-container');
-            camera.aspect = container.clientWidth / container.clientHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(container.clientWidth, container.clientHeight);
-        }
-        function animate() {
-            requestAnimationFrame(animate);
-            if (autoRotate) {
-                model.rotation.y += 0.005;
             }
-            controls.update();
-            renderer.render(scene, camera);
         }
-        // UI Controls
-        document.getElementById('rotate-btn').addEventListener('click', function() {
-            autoRotate = !autoRotate;
-            this.style.background = autoRotate ? 'rgba(255, 255, 255, 0.4)' : 'rgba(255, 255, 255, 0.2)';
-        });
-        document.getElementById('reset-btn').addEventListener('click', function() {
-            controls.reset();
-            camera.position.z = 5;
-        });
-        document.getElementById('zoom-in-btn').addEventListener('click', function() {
-            camera.fov -= 5;
-            camera.updateProjectionMatrix();
-        });
-        document.getElementById('zoom-out-btn').addEventListener('click', function() {
-            camera.fov += 5;
-            camera.updateProjectionMatrix();
         });
-        // Outfit selection
-        document.querySelectorAll('.outfit-option').forEach(option => {
-            option.addEventListener('click', function() {
-                document.querySelectorAll('.outfit-option').forEach(opt => {
-                    opt.classList.remove('active');
-                });
-                this.classList.add('active');
-                // In a real app, you would load different outfit models here
-                // For now, we'll just change the color of the placeholder
-                const colors = {
-                    'default': 0xffccaa,
-                    'casual': 0xaaccff,
-                    'formal': 0xffaacc,
-                    'sporty': 0xccffaa
-                };
-                model.material.color.setHex(colors[this.dataset.outfit]);
-            });
         });
-        // Initialize when DOM is loaded
-        document.addEventListener('DOMContentLoaded', init);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Abrasax22/3d-model-threads" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Telegram Trading Bot</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
         }
+        .telegram-bg {
+            background-color: #0088cc;
         }
+        .telegram-hover:hover {
+            background-color: #0077b3;
         }
+        .trading-card {
+            transition: all 0.3s ease;
         }
+        .trading-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
+        .blink {
+            animation: blink-animation 1s steps(5, start) infinite;
         }
+        @keyframes blink-animation {
+            to {
+                opacity: 0.5;
+            }
         }
     </style>
 </head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
         <!-- Header -->
         <header class="flex justify-between items-center mb-8">
             <div class="flex items-center">
+                <div class="w-12 h-12 rounded-full telegram-bg flex items-center justify-center mr-4">
+                    <i class="fas fa-robot text-white text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold text-gray-800">Telegram Trading Bot</h1>
+                    <p class="text-gray-600">Automated cryptocurrency trading</p>
+                </div>
             </div>
             <div class="flex items-center space-x-4">
+                <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium">
+                    <i class="fas fa-play mr-2"></i> Start Bot
                 </button>
+                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg font-medium">
+                    <i class="fas fa-cog mr-2"></i> Settings
                 </button>
             </div>
         </header>
+        <!-- Stats Dashboard -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+            <div class="bg-white rounded-xl shadow-md p-6 trading-card">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-gray-500 text-sm">Total Profit</p>
+                        <h3 class="text-2xl font-bold text-green-500">$2,458.32</h3>
+                    </div>
+                    <div class="bg-green-100 text-green-800 p-2 rounded-lg">
+                        <i class="fas fa-chart-line"></i>
+                    </div>
+                </div>
+                <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12.5% this week</p>
             </div>
+            <div class="bg-white rounded-xl shadow-md p-6 trading-card">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-gray-500 text-sm">Active Trades</p>
+                        <h3 class="text-2xl font-bold text-blue-500">8</h3>
+                    </div>
+                    <div class="bg-blue-100 text-blue-800 p-2 rounded-lg">
+                        <i class="fas fa-exchange-alt"></i>
+                    </div>
                 </div>
+                <p class="text-blue-500 text-sm mt-2"><i class="fas fa-info-circle mr-1"></i> 4 buy / 4 sell</p>
+            </div>
+            <div class="bg-white rounded-xl shadow-md p-6 trading-card">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-gray-500 text-sm">24h Volume</p>
+                        <h3 class="text-2xl font-bold text-purple-500">$42,158</h3>
+                    </div>
+                    <div class="bg-purple-100 text-purple-800 p-2 rounded-lg">
+                        <i class="fas fa-coins"></i>
+                    </div>
                 </div>
+                <p class="text-purple-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 8.3% from yesterday</p>
             </div>
+            <div class="bg-white rounded-xl shadow-md p-6 trading-card">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-gray-500 text-sm">Success Rate</p>
+                        <h3 class="text-2xl font-bold text-orange-500">78.6%</h3>
+                    </div>
+                    <div class="bg-orange-100 text-orange-800 p-2 rounded-lg">
+                        <i class="fas fa-trophy"></i>
+                    </div>
+                </div>
+                <p class="text-orange-500 text-sm mt-2"><i class="fas fa-check-circle mr-1"></i> 112/143 trades</p>
             </div>
         </div>
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Trading Controls -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                    <div class="gradient-bg px-6 py-4">
+                        <h2 class="text-xl font-bold text-white">Trading Controls</h2>
+                    </div>
+                    <div class="p-6">
+                        <div class="mb-6">
+                            <label class="block text-gray-700 text-sm font-bold mb-2" for="pair">
+                                Trading Pair
+                            </label>
+                            <div class="relative">
+                                <select id="pair" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500">
+                                    <option>BTC/USDT</option>
+                                    <option>ETH/USDT</option>
+                                    <option>SOL/USDT</option>
+                                    <option>ADA/USDT</option>
+                                    <option>DOT/USDT</option>
+                                </select>
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                                    <i class="fas fa-chevron-down"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                            <div>
+                                <label class="block text-gray-700 text-sm font-bold mb-2" for="amount">
+                                    Amount (USDT)
+                                </label>
+                                <input id="amount" type="number" class="w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500" placeholder="100.00">
+                            </div>
+                            <div>
+                                <label class="block text-gray-700 text-sm font-bold mb-2" for="leverage">
+                                    Leverage
+                                </label>
+                                <input id="leverage" type="number" min="1" max="20" class="w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500" placeholder="5" value="5">
+                            </div>
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-gray-700 text-sm font-bold mb-2">
+                                Strategy
+                            </label>
+                            <div class="grid grid-cols-3 gap-3">
+                                <button class="bg-blue-100 text-blue-800 py-2 px-4 rounded-lg font-medium hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    <i class="fas fa-bolt mr-2"></i> Scalping
+                                </button>
+                                <button class="bg-green-100 text-green-800 py-2 px-4 rounded-lg font-medium hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-500">
+                                    <i class="fas fa-wave-square mr-2"></i> Swing
+                                </button>
+                                <button class="bg-purple-100 text-purple-800 py-2 px-4 rounded-lg font-medium hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500">
+                                    <i class="fas fa-robot mr-2"></i> AI
+                                </button>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <button id="buy-btn" class="bg-green-500 hover:bg-green-600 text-white py-3 px-6 rounded-lg font-bold text-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
+                                <i class="fas fa-arrow-up mr-2"></i> BUY
+                            </button>
+                            <button id="sell-btn" class="bg-red-500 hover:bg-red-600 text-white py-3 px-6 rounded-lg font-bold text-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+                                <i class="fas fa-arrow-down mr-2"></i> SELL
+                            </button>
+                        </div>
+                    </div>
                 </div>
+                <!-- Recent Trades -->
+                <div class="bg-white rounded-xl shadow-md mt-8">
+                    <div class="gradient-bg px-6 py-4">
+                        <h2 class="text-xl font-bold text-white">Recent Trades</h2>
+                    </div>
+                    <div class="p-6">
+                        <div class="overflow-x-auto">
+                            <table class="min-w-full divide-y divide-gray-200">
+                                <thead>
+                                    <tr>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pair</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profit</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="bg-white divide-y divide-gray-200">
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap font-medium">BTC/USDT</td>
+                                        <td class="px-4 py-3 whitespace-nowrap"><span class="bg-green-100 text-green-800 py-1 px-2 rounded-full text-xs font-medium">BUY</span></td>
+                                        <td class="px-4 py-3 whitespace-nowrap">0.05 BTC</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">$42,158.32</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-green-500 font-medium">+$124.50</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap font-medium">ETH/USDT</td>
+                                        <td class="px-4 py-3 whitespace-nowrap"><span class="bg-red-100 text-red-800 py-1 px-2 rounded-full text-xs font-medium">SELL</span></td>
+                                        <td class="px-4 py-3 whitespace-nowrap">1.2 ETH</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">$2,458.75</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-green-500 font-medium">+$58.20</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap font-medium">SOL/USDT</td>
+                                        <td class="px-4 py-3 whitespace-nowrap"><span class="bg-green-100 text-green-800 py-1 px-2 rounded-full text-xs font-medium">BUY</span></td>
+                                        <td class="px-4 py-3 whitespace-nowrap">25 SOL</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">$98.42</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-red-500 font-medium">-$12.30</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap font-medium">ADA/USDT</td>
+                                        <td class="px-4 py-3 whitespace-nowrap"><span class="bg-red-100 text-red-800 py-1 px-2 rounded-full text-xs font-medium">SELL</span></td>
+                                        <td class="px-4 py-3 whitespace-nowrap">500 ADA</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">$0.42</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-green-500 font-medium">+$8.75</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </div>
             </div>
+            <!-- Telegram Bot Info -->
+            <div>
+                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                    <div class="telegram-bg px-6 py-4">
+                        <h2 class="text-xl font-bold text-white">Telegram Bot Setup</h2>
                     </div>
+                    <div class="p-6">
+                        <div class="mb-6">
+                            <h3 class="font-bold text-lg mb-2">Bot Connection</h3>
+                            <div class="flex items-center mb-4">
+                                <div class="w-10 h-10 rounded-full telegram-bg flex items-center justify-center mr-3">
+                                    <i class="fas fa-robot text-white"></i>
+                                </div>
+                                <div>
+                                    <p class="font-medium">@CryptoTraderBot</p>
+                                    <p class="text-sm text-gray-500">Last active: 2 min ago</p>
+                                </div>
+                            </div>
+                            <div class="bg-gray-100 p-4 rounded-lg mb-4">
+                                <p class="text-sm text-gray-700 mb-2">To connect your bot:</p>
+                                <ol class="list-decimal list-inside text-sm space-y-1">
+                                    <li>Search for @CryptoTraderBot in Telegram</li>
+                                    <li>Start a conversation with the bot</li>
+                                    <li>Send your API key to authenticate</li>
+                                    <li>Use /start to begin trading</li>
+                                </ol>
+                            </div>
+                            <button class="w-full telegram-bg telegram-hover text-white py-3 px-4 rounded-lg font-medium">
+                                <i class="fab fa-telegram mr-2"></i> Open Telegram
+                            </button>
                         </div>
+                        <div class="mb-6">
+                            <h3 class="font-bold text-lg mb-2">API Configuration</h3>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 text-sm font-bold mb-2" for="api-key">
+                                    Exchange API Key
+                                </label>
+                                <div class="relative">
+                                    <input id="api-key" type="password" class="w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500" placeholder="Enter your API key">
+                                    <button class="absolute right-3 top-3 text-gray-500 hover:text-gray-700" onclick="toggleApiKeyVisibility()">
+                                        <i class="fas fa-eye" id="api-key-eye"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 text-sm font-bold mb-2" for="api-secret">
+                                    Exchange API Secret
+                                </label>
+                                <div class="relative">
+                                    <input id="api-secret" type="password" class="w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-blue-500" placeholder="Enter your API secret">
+                                    <button class="absolute right-3 top-3 text-gray-500 hover:text-gray-700" onclick="toggleApiSecretVisibility()">
+                                        <i class="fas fa-eye" id="api-secret-eye"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg font-medium">
+                                <i class="fas fa-save mr-2"></i> Save API Settings
+                            </button>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-lg mb-2">Bot Status</h3>
+                            <div class="space-y-3">
+                                <div class="flex justify-between items-center">
+                                    <span class="text-gray-700">Trading Enabled</span>
+                                    <label class="relative inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" class="sr-only peer" checked>
+                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
+                                    </label>
+                                </div>
+                                <div class="flex justify-between items-center">
+                                    <span class="text-gray-700">Notifications</span>
+                                    <label class="relative inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" class="sr-only peer" checked>
+                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
+                                    </label>
+                                </div>
+                                <div class="flex justify-between items-center">
+                                    <span class="text-gray-700">Auto Restart</span>
+                                    <label class="relative inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" class="sr-only peer">
+                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
+                                    </label>
+                                </div>
+                                <div class="flex justify-between items-center">
+                                    <span class="text-gray-700">Risk Management</span>
+                                    <label class="relative inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" class="sr-only peer" checked>
+                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
+                                    </label>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
+                <!-- Quick Actions -->
+                <div class="bg-white rounded-xl shadow-md mt-8">
+                    <div class="gradient-bg px-6 py-4">
+                        <h2 class="text-xl font-bold text-white">Quick Actions</h2>
                     </div>
+                    <div class="p-6">
+                        <div class="grid grid-cols-2 gap-4">
+                            <button class="bg-yellow-100 text-yellow-800 py-3 px-4 rounded-lg font-medium hover:bg-yellow-200">
+                                <i class="fas fa-stopwatch mr-2"></i> Pause
+                            </button>
+                            <button class="bg-red-100 text-red-800 py-3 px-4 rounded-lg font-medium hover:bg-red-200">
+                                <i class="fas fa-stop-circle mr-2"></i> Stop
+                            </button>
+                            <button class="bg-blue-100 text-blue-800 py-3 px-4 rounded-lg font-medium hover:bg-blue-200">
+                                <i class="fas fa-sync-alt mr-2"></i> Refresh
+                            </button>
+                            <button class="bg-purple-100 text-purple-800 py-3 px-4 rounded-lg font-medium hover:bg-purple-200">
+                                <i class="fas fa-history mr-2"></i> Logs
+                            </button>
                         </div>
                     </div>
                 </div>
     </div>
     <script>
+        // Toggle API key visibility
+        function toggleApiKeyVisibility() {
+            const apiKeyInput = document.getElementById('api-key');
+            const eyeIcon = document.getElementById('api-key-eye');
+            if (apiKeyInput.type === 'password') {
+                apiKeyInput.type = 'text';
+                eyeIcon.classList.remove('fa-eye');
+                eyeIcon.classList.add('fa-eye-slash');
+            } else {
+                apiKeyInput.type = 'password';
+                eyeIcon.classList.remove('fa-eye-slash');
+                eyeIcon.classList.add('fa-eye');
             }
         }
+        // Toggle API secret visibility
+        function toggleApiSecretVisibility() {
+            const apiSecretInput = document.getElementById('api-secret');
+            const eyeIcon = document.getElementById('api-secret-eye');
+            if (apiSecretInput.type === 'password') {
+                apiSecretInput.type = 'text';
+                eyeIcon.classList.remove('fa-eye');
+                eyeIcon.classList.add('fa-eye-slash');
+            } else {
+                apiSecretInput.type = 'password';
+                eyeIcon.classList.remove('fa-eye-slash');
+                eyeIcon.classList.add('fa-eye');
             }
         }
+        // Simulate buy/sell actions
+        document.getElementById('buy-btn').addEventListener('click', function() {
+            simulateTrade('BUY');
         });
+        document.getElementById('sell-btn').addEventListener('click', function() {
+            simulateTrade('SELL');
         });
+        function simulateTrade(type) {
+            const pair = document.getElementById('pair').value;
+            const amount = document.getElementById('amount').value || '100.00';
+            const leverage = document.getElementById('leverage').value || '5';
+            // Create notification
+            const notification = document.createElement('div');
+            notification.className = `fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 max-w-sm border-l-4 ${type === 'BUY' ? 'border-green-500' : 'border-red-500'}`;
+            notification.innerHTML = `
+                <div class="flex items-start">
+                    <div class="flex-shrink-0 ${type === 'BUY' ? 'text-green-500' : 'text-red-500'} text-xl mr-3">
+                        <i class="fas ${type === 'BUY' ? 'fa-arrow-up' : 'fa-arrow-down'}"></i>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-gray-800">${type} Order Placed</h4>
+                        <p class="text-sm text-gray-600 mt-1">${pair} | ${amount} USDT | ${leverage}x</p>
+                        <p class="text-xs text-gray-500 mt-2">Order ID: ${Math.random().toString(36).substr(2, 8).toUpperCase()}</p>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(notification);
+            // Remove notification after 5 seconds
+            setTimeout(() => {
+                notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+                setTimeout(() => {
+                    notification.remove();
+                }, 300);
+            }, 5000);
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Abrasax22/3d-model-threads" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>