Spaces:
Running
Running
Download index.html from Stoneforge/stoneforge-site: direct link, hf CLI and curl.
- Browser
- Download file 48.6 kB
-
https://huggingface.co/spaces/Stoneforge/stoneforge-site/resolve/main/index.html
- Command line
-
hf download hf://spaces/Stoneforge/stoneforge-site/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Stoneforge/stoneforge-site/resolve/main/index.html
48.6 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Stoneforge Trading - Advanced Trading Platform</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"> | |
| <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| :root { | |
| --primary: #131722; | |
| --secondary: #2962FF; | |
| --accent: #1E222D; | |
| --text-primary: #D1D4DC; | |
| --text-secondary: #787B86; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--primary); | |
| color: var(--text-primary); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); | |
| } | |
| .btn-primary { | |
| background-color: var(--secondary); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #1a4bcc; | |
| transform: translateY(-1px); | |
| } | |
| .chart-container { | |
| height: 400px; | |
| width: 100%; | |
| } | |
| .tradingview-widget-container { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .nav-link { | |
| position: relative; | |
| color: var(--text-secondary); | |
| transition: all 0.3s ease; | |
| } | |
| .nav-link:hover, .nav-link.active { | |
| color: var(--text-primary); | |
| } | |
| .nav-link.active:after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| bottom: -8px; | |
| left: 0; | |
| background-color: var(--secondary); | |
| } | |
| .card { | |
| background-color: var(--accent); | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .input-field { | |
| background-color: var(--accent); | |
| border: 1px solid #2A2E39; | |
| color: var(--text-primary); | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| border-color: var(--secondary); | |
| outline: none; | |
| } | |
| .price-up { | |
| color: #26A69A; | |
| } | |
| .price-down { | |
| color: #EF5350; | |
| } | |
| .ticker-tape { | |
| background-color: var(--accent); | |
| overflow: hidden; | |
| white-space: nowrap; | |
| } | |
| .ticker-item { | |
| display: inline-block; | |
| padding: 0 20px; | |
| animation: ticker 30s linear infinite; | |
| } | |
| @keyframes ticker { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 100; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.7); | |
| } | |
| .modal-content { | |
| background-color: var(--accent); | |
| margin: 10% auto; | |
| padding: 20px; | |
| border-radius: 8px; | |
| max-width: 400px; | |
| animation: modalopen 0.3s; | |
| } | |
| @keyframes modalopen { | |
| from {opacity: 0; transform: translateY(-20px);} | |
| to {opacity: 1; transform: translateY(0);} | |
| } | |
| .tab { | |
| cursor: pointer; | |
| padding: 10px 20px; | |
| border-bottom: 2px solid transparent; | |
| } | |
| .tab.active { | |
| border-bottom: 2px solid var(--secondary); | |
| color: var(--text-primary); | |
| } | |
| .watchlist-item:hover { | |
| background-color: rgba(41, 98, 255, 0.1); | |
| } | |
| .orderbook-row { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 4px 8px; | |
| } | |
| .orderbook-bid { | |
| background: linear-gradient(to left, rgba(38, 166, 154, 0.1), transparent); | |
| } | |
| .orderbook-ask { | |
| background: linear-gradient(to right, rgba(239, 83, 80, 0.1), transparent); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Main Container --> | |
| <div id="app" class="min-h-screen flex flex-col"> | |
| <!-- Top Navigation --> | |
| <nav class="bg-gray-900 py-3 px-4 border-b border-gray-800"> | |
| <div class="flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chart-line text-blue-500 text-xl mr-2"></i> | |
| <span class="text-xl font-bold">Stoneforge<span class="text-blue-500">Trading</span></span> | |
| </div> | |
| </div> | |
| <!-- Main Nav --> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="nav-link active">Markets</a> | |
| <a href="#" class="nav-link">Watchlist</a> | |
| <a href="#" class="nav-link">Screener</a> | |
| <a href="#" class="nav-link">Strategies</a> | |
| <a href="#" class="nav-link">News</a> | |
| </div> | |
| <!-- User Controls --> | |
| <div class="flex items-center space-x-4"> | |
| <button id="loginBtn" class="px-4 py-2 rounded-md font-medium bg-blue-600 hover:bg-blue-700 transition">Login</button> | |
| <button id="registerBtn" class="px-4 py-2 rounded-md font-medium border border-blue-600 text-blue-500 hover:bg-blue-900 transition">Register</button> | |
| <button class="md:hidden focus:outline-none text-gray-400"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Ticker Tape --> | |
| <div class="ticker-tape py-2 border-b border-gray-800"> | |
| <div class="ticker-container"> | |
| <div class="ticker-item"> | |
| <span class="font-medium">BTC/USD</span> | |
| <span class="ml-2 price-up">$42,356.78 <i class="fas fa-caret-up"></i> +2.34%</span> | |
| </div> | |
| <div class="ticker-item"> | |
| <span class="font-medium">ETH/USD</span> | |
| <span class="ml-2 price-up">$2,356.12 <i class="fas fa-caret-up"></i> +1.56%</span> | |
| </div> | |
| <div class="ticker-item"> | |
| <span class="font-medium">SPX</span> | |
| <span class="ml-2 price-down">4,567.89 <i class="fas fa-caret-down"></i> -0.34%</span> | |
| </div> | |
| <div class="ticker-item"> | |
| <span class="font-medium">AAPL</span> | |
| <span class="ml-2 price-up">$189.45 <i class="fas fa-caret-up"></i> +0.89%</span> | |
| </div> | |
| <div class="ticker-item"> | |
| <span class="font-medium">TSLA</span> | |
| <span class="ml-2 price-down">$245.67 <i class="fas fa-caret-down"></i> -1.23%</span> | |
| </div> | |
| <div class="ticker-item"> | |
| <span class="font-medium">GOLD</span> | |
| <span class="ml-2 price-up">$2,034.56 <i class="fas fa-caret-up"></i> +0.45%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content (Changes based on auth state) --> | |
| <main class="flex-grow p-4"> | |
| <!-- Guest View (shown when not logged in) --> | |
| <div id="guestView"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Market Overview --> | |
| <div class="lg:col-span-2 card p-6"> | |
| <h2 class="text-xl font-bold mb-4">Market Overview</h2> | |
| <div class="chart-container" id="mainChart"></div> | |
| </div> | |
| <!-- Top Movers --> | |
| <div class="card p-6"> | |
| <h2 class="text-xl font-bold mb-4">Top Movers</h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center p-3 hover:bg-gray-800 rounded cursor-pointer"> | |
| <div> | |
| <div class="font-medium">BTC/USD</div> | |
| <div class="text-sm text-gray-400">Bitcoin</div> | |
| </div> | |
| <div class="price-up">+2.34%</div> | |
| <div class="text-right"> | |
| <div class="font-medium">$42,356.78</div> | |
| <div class="text-sm text-gray-400">24h vol: $1.2B</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 hover:bg-gray-800 rounded cursor-pointer"> | |
| <div> | |
| <div class="font-medium">ETH/USD</div> | |
| <div class="text-sm text-gray-400">Ethereum</div> | |
| </div> | |
| <div class="price-up">+1.56%</div> | |
| <div class="text-right"> | |
| <div class="font-medium">$2,356.12</div> | |
| <div class="text-sm text-gray-400">24h vol: $800M</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 hover:bg-gray-800 rounded cursor-pointer"> | |
| <div> | |
| <div class="font-medium">SPX</div> | |
| <div class="text-sm text-gray-400">S&P 500</div> | |
| </div> | |
| <div class="price-down">-0.34%</div> | |
| <div class="text-right"> | |
| <div class="font-medium">4,567.89</div> | |
| <div class="text-sm text-gray-400">24h vol: $300M</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-3 hover:bg-gray-800 rounded cursor-pointer"> | |
| <div> | |
| <div class="font-medium">AAPL</div> | |
| <div class="text-sm text-gray-400">Apple Inc</div> | |
| </div> | |
| <div class="price-up">+0.89%</div> | |
| <div class="text-right"> | |
| <div class="font-medium">$189.45</div> | |
| <div class="text-sm text-gray-400">24h vol: $120M</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="mt-12 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Advanced Trading Tools</h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto mb-12">Access professional-grade trading tools, real-time data, and customizable charts to enhance your trading strategy</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card p-6"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-chart-candlestick"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Advanced Charting</h3> | |
| <p class="text-gray-400">Over 100 technical indicators, drawing tools, and customizable timeframes for in-depth market analysis.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Automated Trading</h3> | |
| <p class="text-gray-400">Create, test, and deploy automated trading strategies without writing a single line of code.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Real-time Alerts</h3> | |
| <p class="text-gray-400">Set price alerts and technical indicator triggers to never miss a trading opportunity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Authenticated View (shown when logged in) --> | |
| <div id="authView" class="hidden"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Watchlist --> | |
| <div class="card p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold">Watchlist</h3> | |
| <button class="text-blue-500 text-sm"><i class="fas fa-plus"></i></button> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="watchlist-item flex justify-between items-center p-2 rounded cursor-pointer"> | |
| <div class="font-medium">BTC/USD</div> | |
| <div class="price-up">$42,356.78</div> | |
| </div> | |
| <div class="watchlist-item flex justify-between items-center p-2 rounded cursor-pointer"> | |
| <div class="font-medium">ETH/USD</div> | |
| <div class="price-up">$2,356.12</div> | |
| </div> | |
| <div class="watchlist-item flex justify-between items-center p-2 rounded cursor-pointer"> | |
| <div class="font-medium">AAPL</div> | |
| <div class="price-up">$189.45</div> | |
| </div> | |
| <div class="watchlist-item flex justify-between items-center p-2 rounded cursor-pointer"> | |
| <div class="font-medium">TSLA</div> | |
| <div class="price-down">$245.67</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Book --> | |
| <div class="card p-4"> | |
| <h3 class="font-bold mb-4">Order Book</h3> | |
| <div class="text-sm text-gray-400 mb-2 flex justify-between"> | |
| <span>Price (USD)</span> | |
| <span>Size</span> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="orderbook-row orderbook-ask"> | |
| <span class="price-down">42,400.00</span> | |
| <span>0.25</span> | |
| </div> | |
| <div class="orderbook-row orderbook-ask"> | |
| <span class="price-down">42,395.50</span> | |
| <span>0.42</span> | |
| </div> | |
| <div class="orderbook-row orderbook-ask"> | |
| <span class="price-down">42,390.75</span> | |
| <span>0.18</span> | |
| </div> | |
| </div> | |
| <div class="my-2 text-center font-bold">42,356.78</div> | |
| <div class="space-y-1"> | |
| <div class="orderbook-row orderbook-bid"> | |
| <span class="price-up">42,350.25</span> | |
| <span>0.37</span> | |
| </div> | |
| <div class="orderbook-row orderbook-bid"> | |
| <span class="price-up">42,345.00</span> | |
| <span>0.52</span> | |
| </div> | |
| <div class="orderbook-row orderbook-bid"> | |
| <span class="price-up">42,340.75</span> | |
| <span>0.29</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chart Area --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Chart Header --> | |
| <div class="card p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h2 class="text-xl font-bold">BTC/USD</h2> | |
| <div class="flex items-center"> | |
| <span class="text-2xl mr-2">$42,356.78</span> | |
| <span class="price-up">+2.34%</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-800 rounded text-sm">1D</button> | |
| <button class="px-3 py-1 bg-gray-800 rounded text-sm">1W</button> | |
| <button class="px-3 py-1 bg-blue-600 rounded text-sm">1M</button> | |
| <button class="px-3 py-1 bg-gray-800 rounded text-sm">3M</button> | |
| <button class="px-3 py-1 bg-gray-800 rounded text-sm">1Y</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chart --> | |
| <div class="card p-4"> | |
| <div class="chart-container" id="loggedInChart"></div> | |
| </div> | |
| <!-- Trading Tools --> | |
| <div class="card p-4"> | |
| <div class="flex space-x-4 border-b border-gray-800 pb-2"> | |
| <div class="tab active">Trade</div> | |
| <div class="tab">Orders</div> | |
| <div class="tab">History</div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <button class="py-2 bg-blue-600 rounded font-medium">Buy</button> | |
| <button class="py-2 bg-red-500 rounded font-medium">Sell</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Order Type</label> | |
| <select class="input-field w-full p-2 rounded"> | |
| <option>Market</option> | |
| <option>Limit</option> | |
| <option>Stop</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Amount</label> | |
| <input type="text" class="input-field w-full p-2 rounded" placeholder="0.00"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Price (USD)</label> | |
| <input type="text" class="input-field w-full p-2 rounded" placeholder="0.00"> | |
| </div> | |
| <button class="w-full py-2 bg-blue-600 rounded font-medium">Place Order</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Portfolio Summary --> | |
| <div class="card p-4"> | |
| <h3 class="font-bold mb-4">Portfolio</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="text-sm text-gray-400">Total Balance</div> | |
| <div class="text-2xl font-bold">$24,568.92</div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <div class="text-sm text-gray-400">Available</div> | |
| <div>$12,345.67</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-400">In Orders</div> | |
| <div>$2,345.00</div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-800"> | |
| <div class="text-sm text-gray-400 mb-2">Today's P&L</div> | |
| <div class="price-up">+$456.78 (1.89%)</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Open Positions --> | |
| <div class="card p-4"> | |
| <h3 class="font-bold mb-4">Open Positions</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center p-2 hover:bg-gray-800 rounded cursor-pointer"> | |
| <div> | |
| <div class="font-medium">BTC/USD</div> | |
| <div class="text-sm text-gray-400">Long 0.25 BTC</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="price-up">+$123.45</div> | |
| <div class="text-sm text-gray-400">$42,356.78</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-2 hover:bg-gray-800 rounded cursor-pointer"> | |
| <div> | |
| <div class="font-medium">ETH/USD</div> | |
| <div class="text-sm text-gray-400">Short 2.5 ETH</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="price-down">-$67.89</div> | |
| <div class="text-sm text-gray-400">$2,356.12</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Market News --> | |
| <div class="card p-4"> | |
| <h3 class="font-bold mb-4">Market News</h3> | |
| <div class="space-y-3"> | |
| <div class="hover:bg-gray-800 rounded cursor-pointer p-2"> | |
| <div class="text-sm text-gray-400">2 hours ago</div> | |
| <div class="font-medium">Bitcoin breaks $42k as ETF approval rumors swirl</div> | |
| </div> | |
| <div class="hover:bg-gray-800 rounded cursor-pointer p-2"> | |
| <div class="text-sm text-gray-400">5 hours ago</div> | |
| <div class="font-medium">Fed signals potential rate cuts in Q2 2024</div> | |
| </div> | |
| <div class="hover:bg-gray-800 rounded cursor-pointer p-2"> | |
| <div class="text-sm text-gray-400">Yesterday</div> | |
| <div class="font-medium">Apple reports record Q4 earnings, stock up 3% pre-market</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-8 px-4 border-t border-gray-800"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-chart-line text-blue-500 text-xl mr-2"></i> | |
| <span class="text-xl font-bold">Stoneforge<span class="text-blue-500">Trading</span></span> | |
| </div> | |
| <p class="text-gray-400">Advanced trading tools for serious traders.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Trading Platform</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Automated Bots</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Market Data</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Mobile App</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Terms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Risk Disclosure</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-500">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Stoneforge Trading LLC. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Login to Your Account</h2> | |
| <button id="closeLoginModal" class="text-gray-400 hover:text-white">×</button> | |
| </div> | |
| <form id="loginForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Email</label> | |
| <input type="email" id="loginEmail" class="input-field w-full p-2 rounded" required> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Password</label> | |
| <input type="password" id="loginPassword" class="input-field w-full p-2 rounded" required> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="rememberMe" class="mr-2"> | |
| <label for="rememberMe" class="text-sm text-gray-400">Remember me</label> | |
| </div> | |
| <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a> | |
| </div> | |
| <button type="submit" class="w-full py-2 bg-blue-600 rounded font-medium">Login</button> | |
| <div class="text-center text-sm text-gray-400"> | |
| Don't have an account? <button id="switchToRegister" class="text-blue-500 hover:underline">Register</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Register Modal --> | |
| <div id="registerModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Create an Account</h2> | |
| <button id="closeRegisterModal" class="text-gray-400 hover:text-white">×</button> | |
| </div> | |
| <form id="registerForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Full Name</label> | |
| <input type="text" id="registerName" class="input-field w-full p-2 rounded" required> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Email</label> | |
| <input type="email" id="registerEmail" class="input-field w-full p-2 rounded" required> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Password</label> | |
| <input type="password" id="registerPassword" class="input-field w-full p-2 rounded" required> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Confirm Password</label> | |
| <input type="password" id="registerConfirmPassword" class="input-field w-full p-2 rounded" required> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="agreeTerms" class="mr-2" required> | |
| <label for="agreeTerms" class="text-sm text-gray-400">I agree to the <a href="#" class="text-blue-500 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a></label> | |
| </div> | |
| <button type="submit" class="w-full py-2 bg-blue-600 rounded font-medium">Create Account</button> | |
| <div class="text-center text-sm text-gray-400"> | |
| Already have an account? <button id="switchToLogin" class="text-blue-500 hover:underline">Login</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const loginBtn = document.getElementById('loginBtn'); | |
| const registerBtn = document.getElementById('registerBtn'); | |
| const loginModal = document.getElementById('loginModal'); | |
| const registerModal = document.getElementById('registerModal'); | |
| const closeLoginModal = document.getElementById('closeLoginModal'); | |
| const closeRegisterModal = document.getElementById('closeRegisterModal'); | |
| const switchToRegister = document.getElementById('switchToRegister'); | |
| const switchToLogin = document.getElementById('switchToLogin'); | |
| const loginForm = document.getElementById('loginForm'); | |
| const registerForm = document.getElementById('registerForm'); | |
| const guestView = document.getElementById('guestView'); | |
| const authView = document.getElementById('authView'); | |
| // Modal Controls | |
| loginBtn.addEventListener('click', () => { | |
| loginModal.style.display = 'block'; | |
| }); | |
| registerBtn.addEventListener('click', () => { | |
| registerModal.style.display = 'block'; | |
| }); | |
| closeLoginModal.addEventListener('click', () => { | |
| loginModal.style.display = 'none'; | |
| }); | |
| closeRegisterModal.addEventListener('click', () => { | |
| registerModal.style.display = 'none'; | |
| }); | |
| switchToRegister.addEventListener('click', () => { | |
| loginModal.style.display = 'none'; | |
| registerModal.style.display = 'block'; | |
| }); | |
| switchToLogin.addEventListener('click', () => { | |
| registerModal.style.display = 'none'; | |
| loginModal.style.display = 'block'; | |
| }); | |
| // Close modals when clicking outside | |
| window.addEventListener('click', (e) => { | |
| if (e.target === loginModal) { | |
| loginModal.style.display = 'none'; | |
| } | |
| if (e.target === registerModal) { | |
| registerModal.style.display = 'none'; | |
| } | |
| }); | |
| // Form Submissions | |
| loginForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const email = document.getElementById('loginEmail').value; | |
| const password = document.getElementById('loginPassword').value; | |
| // Simple validation | |
| if (email && password) { | |
| // In a real app, you would authenticate with a server here | |
| // For demo purposes, we'll just log in with any credentials | |
| loginModal.style.display = 'none'; | |
| guestView.style.display = 'none'; | |
| authView.style.display = 'block'; | |
| // Update UI for logged in state | |
| document.querySelector('nav .flex.items-center.space-x-4').innerHTML = ` | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">${email.charAt(0).toUpperCase()}</div> | |
| <span>${email.split('@')[0]}</span> | |
| </div> | |
| <button id="logoutBtn" class="px-4 py-2 rounded-md font-medium border border-gray-600 hover:bg-gray-800 transition">Logout</button> | |
| `; | |
| // Add logout functionality | |
| document.getElementById('logoutBtn').addEventListener('click', () => { | |
| guestView.style.display = 'block'; | |
| authView.style.display = 'none'; | |
| document.querySelector('nav .flex.items-center.space-x-4').innerHTML = ` | |
| <button id="loginBtn" class="px-4 py-2 rounded-md font-medium bg-blue-600 hover:bg-blue-700 transition">Login</button> | |
| <button id="registerBtn" class="px-4 py-2 rounded-md font-medium border border-blue-600 text-blue-500 hover:bg-blue-900 transition">Register</button> | |
| `; | |
| // Re-attach event listeners | |
| document.getElementById('loginBtn').addEventListener('click', () => loginModal.style.display = 'block'); | |
| document.getElementById('registerBtn').addEventListener('click', () => registerModal.style.display = 'block'); | |
| }); | |
| } | |
| }); | |
| registerForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const name = document.getElementById('registerName').value; | |
| const email = document.getElementById('registerEmail').value; | |
| const password = document.getElementById('registerPassword').value; | |
| const confirmPassword = document.getElementById('registerConfirmPassword').value; | |
| // Simple validation | |
| if (name && email && password && password === confirmPassword) { | |
| // In a real app, you would register with a server here | |
| // For demo purposes, we'll just show success and switch to login | |
| alert('Registration successful! Please login with your new credentials.'); | |
| registerModal.style.display = 'none'; | |
| loginModal.style.display = 'block'; | |
| document.getElementById('loginEmail').value = email; | |
| document.getElementById('loginPassword').value = password; | |
| } else if (password !== confirmPassword) { | |
| alert('Passwords do not match!'); | |
| } | |
| }); | |
| // Initialize Charts | |
| function initCharts() { | |
| // Main chart for guest view | |
| const mainChart = LightweightCharts.createChart(document.getElementById('mainChart'), { | |
| width: document.getElementById('mainChart').clientWidth, | |
| height: 400, | |
| layout: { | |
| backgroundColor: '#1E222D', | |
| textColor: '#D1D4DC', | |
| }, | |
| grid: { | |
| vertLines: { | |
| color: '#2A2E39', | |
| }, | |
| horzLines: { | |
| color: '#2A2E39', | |
| }, | |
| }, | |
| crosshair: { | |
| mode: LightweightCharts.CrosshairMode.Normal, | |
| }, | |
| rightPriceScale: { | |
| borderColor: '#2A2E39', | |
| }, | |
| timeScale: { | |
| borderColor: '#2A2E39', | |
| }, | |
| }); | |
| const mainCandleSeries = mainChart.addCandlestickSeries({ | |
| upColor: '#26A69A', | |
| downColor: '#EF5350', | |
| borderDownColor: '#EF5350', | |
| borderUpColor: '#26A69A', | |
| wickDownColor: '#EF5350', | |
| wickUpColor: '#26A69A', | |
| }); | |
| // Chart for logged in view | |
| const loggedInChart = LightweightCharts.createChart(document.getElementById('loggedInChart'), { | |
| width: document.getElementById('loggedInChart').clientWidth, | |
| height: 400, | |
| layout: { | |
| backgroundColor: '#1E222D', | |
| textColor: '#D1D4DC', | |
| }, | |
| grid: { | |
| vertLines: { | |
| color: '#2A2E39', | |
| }, | |
| horzLines: { | |
| color: '#2A2E39', | |
| }, | |
| }, | |
| crosshair: { | |
| mode: LightweightCharts.CrosshairMode.Normal, | |
| }, | |
| rightPriceScale: { | |
| borderColor: '#2A2E39', | |
| }, | |
| timeScale: { | |
| borderColor: '#2A2E39', | |
| }, | |
| }); | |
| const loggedInCandleSeries = loggedInChart.addCandlestickSeries({ | |
| upColor: '#26A69A', | |
| downColor: '#EF5350', | |
| borderDownColor: '#EF5350', | |
| borderUpColor: '#26A69A', | |
| wickDownColor: '#EF5350', | |
| wickUpColor: '#26A69A', | |
| }); | |
| // Sample data for charts | |
| const sampleData = [ | |
| { time: '2023-01-01', open: 38000, high: 38500, low: 37800, close: 38250 }, | |
| { time: '2023-01-02', open: 38250, high: 38900, low: 38000, close: 38750 }, | |
| { time: '2023-01-03', open: 38750, high: 39200, low: 38500, close: 39000 }, | |
| { time: '2023-01-04', open: 39000, high: 39500, low: 38800, close: 39250 }, | |
| { time: '2023-01-05', open: 39250, high: 39800, low: 39000, close: 39500 }, | |
| { time: '2023-01-06', open: 39500, high: 40200, low: 39300, close: 40000 }, | |
| { time: '2023-01-07', open: 40000, high: 40500, low: 39800, close: 40300 }, | |
| { time: '2023-01-08', open: 40300, high: 40800, low: 40100, close: 40600 }, | |
| { time: '2023-01-09', open: 40600, high: 41200, low: 40400, close: 41000 }, | |
| { time: '2023-01-10', open: 41000, high: 41500, low: 40800, close: 41300 }, | |
| { time: '2023-01-11', open: 41300, high: 41800, low: 41100, close: 41600 }, | |
| { time: '2023-01-12', open: 41600, high: 42200, low: 41400, close: 42000 }, | |
| { time: '2023-01-13', open: 42000, high: 42500, low: 41800, close: 42300 }, | |
| { time: '2023-01-14', open: 42300, high: 42800, low: 42100, close: 42600 }, | |
| { time: '2023-01-15', open: 42600, high: 43200, low: 42400, close: 43000 }, | |
| { time: '2023-01-16', open: 43000, high: 43500, low: 42800, close: 43300 }, | |
| { time: '2023-01-17', open: 43300, high: 43800, low: 43100, close: 43600 }, | |
| { time: '2023-01-18', open: 43600, high: 44200, low: 43400, close: 44000 }, | |
| { time: '2023-01-19', open: 44000, high: 44500, low: 43800, close: 44300 }, | |
| { time: '2023-01-20', open: 44300, high: 44800, low: 44100, close: 44600 }, | |
| { time: '2023-01-21', open: 44600, high: 45200, low: 44400, close: 45000 }, | |
| { time: '2023-01-22', open: 45000, high: 45500, low: 44800, close: 45300 }, | |
| { time: '2023-01-23', open: 45300, high: 45800, low: 45100, close: 45600 }, | |
| { time: '2023-01-24', open: 45600, high: 46200, low: 45400, close: 46000 }, | |
| { time: '2023-01-25', open: 46000, high: 46500, low: 45800, close: 46300 }, | |
| { time: '2023-01-26', open: 46300, high: 46800, low: 46100, close: 46600 }, | |
| { time: '2023-01-27', open: 46600, high: 47200, low: 46400, close: 47000 }, | |
| { time: '2023-01-28', open: 47000, high: 47500, low: 46800, close: 47300 }, | |
| { time: '2023-01-29', open: 47300, high: 47800, low: 47100, close: 47600 }, | |
| { time: '2023-01-30', open: 47600, high: 48200, low: 47400, close: 48000 }, | |
| ]; | |
| mainCandleSeries.setData(sampleData); | |
| loggedInCandleSeries.setData(sampleData); | |
| // Add volume indicator to logged in chart | |
| const volumeSeries = loggedInChart.addHistogramSeries({ | |
| color: '#26A69A', | |
| priceFormat: { | |
| type: 'volume', | |
| }, | |
| priceScaleId: '', | |
| }); | |
| volumeSeries.priceScale().applyOptions({ | |
| scaleMargins: { | |
| top: 0.8, | |
| bottom: 0, | |
| }, | |
| }); | |
| const volumeData = sampleData.map((item, i) => ({ | |
| time: item.time, | |
| value: Math.floor(Math.random() * 1000) + 500, | |
| color: item.close >= item.open ? '#26A69A' : '#EF5350', | |
| })); | |
| volumeSeries.setData(volumeData); | |
| // Resize charts on window resize | |
| window.addEventListener('resize', () => { | |
| mainChart.applyOptions({ width: document.getElementById('mainChart').clientWidth }); | |
| loggedInChart.applyOptions({ width: document.getElementById('loggedInChart').clientWidth }); | |
| }); | |
| } | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initCharts(); | |
| // Ticker tape animation | |
| const tickerItems = document.querySelectorAll('.ticker-item'); | |
| const tickerContainer = document.querySelector('.ticker-container'); | |
| const tickerWidth = Array.from(tickerItems).reduce((acc, item) => acc + item.offsetWidth, 0); | |
| // Duplicate items for seamless looping | |
| tickerItems.forEach(item => { | |
| const clone = item.cloneNode(true); | |
| tickerContainer.appendChild(clone); | |
| }); | |
| }); | |
| </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=Stoneforge/stoneforge-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |