Spaces:
Running
Running
A really nice stock chart using trading views simple chart, enhanced with a top icon toolbar and a left hand icon toolbar just like tradingView
3d8e647
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChartFlow Express | TradingView Inspired Charts</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://s3.tradingview.com/tv.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 h-screen overflow-hidden"> | |
| <!-- Main Container --> | |
| <div class="flex flex-col h-full"> | |
| <!-- Top Toolbar --> | |
| <div class="bg-gray-800 border-b border-gray-700 p-2 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="bar-chart-2" class="text-blue-400"></i> | |
| <span class="font-bold text-lg">ChartFlow Express</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-2"> | |
| <button class="toolbar-btn"> | |
| <i data-feather="folder"></i> | |
| </button> | |
| <button class="toolbar-btn"> | |
| <i data-feather="save"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="toolbar-btn"> | |
| <i data-feather="plus"></i> | |
| </button> | |
| <button class="toolbar-btn"> | |
| <i data-feather="minus"></i> | |
| </button> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-2"> | |
| <button class="toolbar-btn"> | |
| <i data-feather="clock"></i> | |
| </button> | |
| <button class="toolbar-btn"> | |
| <i data-feather="sliders"></i> | |
| </button> | |
| <button class="toolbar-btn"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Toolbar --> | |
| <div class="bg-gray-800 w-12 border-r border-gray-700 flex flex-col items-center py-4 space-y-4"> | |
| <button class="sidebar-btn active"> | |
| <i data-feather="trending-up"></i> | |
| </button> | |
| <button class="sidebar-btn"> | |
| <i data-feather="activity"></i> | |
| </button> | |
| <button class="sidebar-btn"> | |
| <i data-feather="bar-chart"></i> | |
| </button> | |
| <button class="sidebar-btn"> | |
| <i data-feather="layers"></i> | |
| </button> | |
| <div class="border-t border-gray-700 w-8 my-2"></div> | |
| <button class="sidebar-btn"> | |
| <i data-feather="compass"></i> | |
| </button> | |
| <button class="sidebar-btn"> | |
| <i data-feather="alert-circle"></i> | |
| </button> | |
| <button class="sidebar-btn"> | |
| <i data-feather="message-square"></i> | |
| </button> | |
| </div> | |
| <!-- Chart Container --> | |
| <div class="flex-1 relative"> | |
| <div id="chart-container" class="w-full h-full"></div> | |
| <!-- Symbol Info Bar --> | |
| <div class="absolute bottom-4 left-0 right-0 mx-auto bg-gray-800 bg-opacity-90 rounded-lg p-2 max-w-md flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex flex-col"> | |
| <span class="font-bold">BTC/USD</span> | |
| <span class="text-xs text-gray-400">Bitcoin</span> | |
| </div> | |
| <div class="flex flex-col"> | |
| <span class="text-green-400">$42,890.12</span> | |
| <span class="text-xs text-gray-400">+2.34%</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="symbol-btn"> | |
| <i data-feather="star"></i> | |
| </button> | |
| <button class="symbol-btn"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize TradingView widget | |
| new TradingView.widget({ | |
| "autosize": true, | |
| "symbol": "BITSTAMP:BTCUSD", | |
| "interval": "D", | |
| "timezone": "Etc/UTC", | |
| "theme": "dark", | |
| "style": "1", | |
| "locale": "en", | |
| "toolbar_bg": "#1e1e2d", | |
| "enable_publishing": false, | |
| "hide_top_toolbar": true, | |
| "hide_side_toolbar": true, | |
| "allow_symbol_change": true, | |
| "container_id": "chart-container" | |
| }); | |
| </script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |