stoneforge-site / index.html
Stoneforge's picture
Add 2 files
6c4b3f2 verified
Raw History Blame Contribute Delete
48.6 kB
<!DOCTYPE html>
<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">&times;</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">&times;</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>