Hugging Face's logo

Spaces:
privateuserh
/
privspot-vbeta1-03
Running

App Files Community
privspot-vbeta1-03 / index.html
privateuserh's picture
privateuserh
Add 3 files
5563527 verified
raw
history blame contribute delete
64.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ForwardX - Advanced Forward Contract Trading</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>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4f46e5',
secondary: '#10b981',
dark: '#1e293b',
light: '#f8fafc',
fractal: '#ED6B21',
bitcoin: '#F7931A',
bitcoinCash: '#0AC18E'
}
}
}
}
</script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
}
.contract-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.chart-container {
height: 400px;
background-color: #f8fafc;
border-radius: 0.5rem;
}
.tab-active {
border-bottom: 3px solid #4f46e5;
color: #4f46e5;
font-weight: 600;
}
.order-book {
max-height: 300px;
overflow-y: auto;
}
.order-book::-webkit-scrollbar {
width: 5px;
}
.order-book::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 10px;
}
#consentModal {
backdrop-filter: blur(5px);
}
.tradingview-widget-container iframe {
border-radius: 0.5rem;
}
.floating-action-btn {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #4f46e5;
color: white;
border-radius: 50px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
.floating-action-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.floating-action-menu {
position: fixed;
bottom: 110px;
right: 40px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 99;
width: 250px;
overflow: hidden;
transform: translateY(20px);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.floating-action-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.floating-action-item {
padding: 12px 16px;
display: flex;
align-items: center;
cursor: pointer;
transition: background 0.2s;
}
.floating-action-item:hover {
background: #f1f5f9;
}
.floating-action-item i {
margin-right: 10px;
font-size: 18px;
}
.floating-action-item.bitcoin i {
color: #F7931A;
}
.floating-action-item.fractal i {
color: #ED6B21;
}
.floating-action-item.bitcoin-cash i {
color: #0AC18E;
}
.price-movement-up {
animation: priceUp 1s ease-out;
}
.price-movement-down {
animation: priceDown 1s ease-out;
}
@keyframes priceUp {
0% { background-color: rgba(16, 185, 129, 0); }
50% { background-color: rgba(16, 185, 129, 0.3); }
100% { background-color: rgba(16, 185, 129, 0); }
}
@keyframes priceDown {
0% { background-color: rgba(239, 68, 68, 0); }
50% { background-color: rgba(239, 68, 68, 0.3); }
100% { background-color: rgba(239, 68, 68, 0); }
}
.crypto-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
margin-left: 6px;
}
.badge-bitcoin {
background-color: #F7931A20;
color: #F7931A;
}
.badge-fractal {
background-color: #ED6B2120;
color: #ED6B21;
}
.badge-bitcoin-cash {
background-color: #0AC18E20;
color: #0AC18E;
}
</style>
</head>
<body class="bg-gray-50">
<!-- IP-based Account Notice -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-blue-500 text-xl mt-1"></i>
</div>
<div class="ml-3">
<p class="text-sm text-blue-700">
Your session is automatically tracked via your IP address (<span id="userIP">detecting...</span>). No registration required.
</p>
</div>
</div>
</div>
<!-- Consent Modal -->
<div id="consentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg p-6 max-w-md w-full">
<div class="flex items-center mb-4">
<i class="fas fa-shield-alt text-primary text-2xl mr-3"></i>
<h3 class="text-xl font-bold">Data Access Permission</h3>
</div>
<p class="mb-4 text-gray-700">
ForwardX would like to access market data from Trading Economics API to provide real-time forward contract pricing. This data will be used to display accurate market information and calculate contract values.
</p>
<div class="flex space-x-4">
<button id="denyConsent" class="flex-1 bg-gray-200 text-gray-800 py-2 rounded-md font-medium hover:bg-gray-300">Deny</button>
<button id="grantConsent" class="flex-1 bg-primary text-white py-2 rounded-md font-medium hover:bg-opacity-90">Allow</button>
</div>
</div>
</div>
<!-- Payment Modal -->
<div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg p-6 max-w-md w-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold" id="paymentTitle">Buy Forward Contract</h3>
<button id="closePaymentModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="cryptoAddress">
Your <span id="cryptoType">Bitcoin</span> Address
</label>
<input type="text" id="cryptoAddress" placeholder="Enter your cryptocurrency address" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="contractAmount">
Contract Amount (USD)
</label>
<input type="number" id="contractAmount" placeholder="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="forwardPrice">
Forward Price (USD)
</label>
<input type="number" id="forwardPrice" placeholder="Enter forward price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4 p-3 bg-gray-50 rounded-md">
<div class="flex justify-between mb-1">
<span class="text-gray-600">Current Spot Price:</span>
<span class="font-bold" id="currentSpotPrice">$52,123.45</span>
</div>
<div class="flex justify-between mb-1">
<span class="text-gray-600">You will pay:</span>
<span class="font-bold" id="cryptoAmount">0.0192 BTC</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Expiry Date:</span>
<span class="font-bold" id="expiryDate">30 days</span>
</div>
</div>
<button id="confirmPayment" class="w-full bg-primary text-white py-3 rounded-md font-bold hover:bg-opacity-90">
Confirm & Pay with <span id="confirmCryptoType">Bitcoin</span>
</button>
</div>
</div>
<!-- Seller Agreement Modal -->
<div id="sellerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg p-6 max-w-md w-full">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Sell Inventory Agreement</h3>
<button id="closeSellerModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="sellerAmount">
Amount to Sell (USD)
</label>
<input type="number" id="sellerAmount" placeholder="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="sellerPrice">
Forward Price (USD)
</label>
<input type="number" id="sellerPrice" placeholder="Enter forward price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="sellerExpiry">
Expiry Date
</label>
<input type="date" id="sellerExpiry" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4 p-3 bg-gray-50 rounded-md">
<div class="flex justify-between mb-1">
<span class="text-gray-600">Current Spot Price:</span>
<span class="font-bold">$52,123.45</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">You will receive at expiry:</span>
<span class="font-bold" id="sellerReceive">$52,123.45</span>
</div>
</div>
<button id="confirmSellerAgreement" class="w-full bg-green-500 text-white py-3 rounded-md font-bold hover:bg-green-600">
Create Sell Agreement
</button>
</div>
</div>
<!-- Header -->
<header class="gradient-bg text-white">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-forward text-2xl"></i>
<h1 class="text-2xl font-bold">ForwardX</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-gray-200">Markets</a>
<a href="#" class="hover:text-gray-200">Trade</a>
<a href="#" class="hover:text-gray-200">Derivatives</a>
<a href="#" class="hover:text-gray-200">Portfolio</a>
<a href="#" class="hover:text-gray-200">Learn</a>
</nav>
<div class="flex items-center space-x-4">
<button class="hidden md:block bg-primary text-white px-4 py-2 rounded-md font-medium hover:bg-opacity-90">
<i class="fas fa-user mr-2"></i> <span id="accountStatus">IP Account</span>
</button>
<button class="md:hidden">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Market Overview -->
<section class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-dark">Forward Contract Markets</h2>
<div class="flex items-center">
<span class="text-sm text-gray-600 mr-2">Base Currency:</span>
<select id="baseCurrency" class="px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Mini Contracts -->
<div class="contract-card bg-white p-6 rounded-lg shadow-md transition-all duration-300">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg">Mini Contracts</h3>
<p class="text-gray-500 text-sm">1 pound increments</p>
</div>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-gray-600">Current Price</span>
<span class="font-bold" id="miniPrice">$1,250.75</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-gray-600">24h Change</span>
<span class="text-green-500 font-bold" id="miniChange">+2.45%</span>
</div>
<button class="w-full bg-primary text-white py-2 rounded-md hover:bg-opacity-90">Trade Now</button>
</div>
<!-- Standard Contracts -->
<div class="contract-card bg-white p-6 rounded-lg shadow-md transition-all duration-300">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg">Standard Contracts</h3>
<p class="text-gray-500 text-sm">5 pound increments</p>
</div>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-gray-600">Current Price</span>
<span class="font-bold" id="standardPrice">$5,420.30</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-gray-600">24h Change</span>
<span class="text-red-500 font-bold" id="standardChange">-1.23%</span>
</div>
<button class="w-full bg-primary text-white py-2 rounded-md hover:bg-opacity-90">Trade Now</button>
</div>
<!-- Large Contracts -->
<div class="contract-card bg-white p-6 rounded-lg shadow-md transition-all duration-300">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg">Large Contracts</h3>
<p class="text-gray-500 text-sm">10 pound increments</p>
</div>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Active</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-gray-600">Current Price</span>
<span class="font-bold" id="largePrice">$12,780.45</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-gray-600">24h Change</span>
<span class="text-green-500 font-bold" id="largeChange">+3.67%</span>
</div>
<button class="w-full bg-primary text-white py-2 rounded-md hover:bg-opacity-90">Trade Now</button>
</div>
<!-- Custom Contracts -->
<div class="contract-card bg-white p-6 rounded-lg shadow-md transition-all duration-300">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg">Custom Contracts</h3>
<p class="text-gray-500 text-sm">Tailored to your needs</p>
</div>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">New</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-gray-600">Flexible Terms</span>
<span class="font-bold">Variable</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-gray-600">Customization</span>
<span class="text-primary font-bold">Available</span>
</div>
<button class="w-full bg-secondary text-white py-2 rounded-md hover:bg-opacity-90">Create Custom</button>
</div>
</div>
</section>
<!-- Trading Interface -->
<section class="mb-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Chart and Order Form -->
<div class="lg:col-span-2">
<!-- Tabs -->
<div class="flex border-b mb-4">
<button class="px-4 py-2 mr-2 tab-active" data-market="BTC">BTC/USD</button>
<button class="px-4 py-2 mr-2" data-market="ETH">ETH/USD</button>
<button class="px-4 py-2 mr-2" data-market="GOLD">GOLD/USD</button>
<button class="px-4 py-2" data-market="OIL">OIL/USD</button>
</div>
<!-- Chart -->
<div class="chart-container p-4 shadow-sm mb-6">
<!-- TradingView Widget -->
<div class="tradingview-widget-container">
<div id="tradingview-chart" style="height: 100%;"></div>
<div class="tradingview-widget-copyright">
<a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"></a>
</div>
</div>
</div>
<!-- Order Form -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="font-bold text-lg mb-4">Create Forward Contract</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700 text-sm font-bold mb-2" for="contract-type">
Contract Type
</label>
<select id="contract-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
<option>Mini (1x)</option>
<option>Standard (5x)</option>
<option>Large (10x)</option>
<option>Custom</option>
</select>
</div>
<div>
<label class="block text-gray-700 text-sm font-bold mb-2" for="expiry">
Expiry Date
</label>
<input type="date" id="expiry" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700 text-sm font-bold mb-2" for="amount">
Amount (USD)
</label>
<input type="number" id="amount" placeholder="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div>
<label class="block text-gray-700 text-sm font-bold mb-2" for="leverage">
Leverage
</label>
<select id="leverage" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
<option>1x</option>
<option>2x</option>
<option>5x</option>
<option>10x</option>
<option>20x</option>
</select>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="price">
Forward Price (USD)
</label>
<div class="relative">
<input type="number" id="price" placeholder="Enter forward price" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<span class="text-gray-500 text-sm">USD</span>
</div>
</div>
</div>
<div class="flex space-x-4">
<button class="flex-1 bg-green-500 text-white py-3 rounded-md font-bold hover:bg-green-600">Buy Long</button>
<button class="flex-1 bg-red-500 text-white py-3 rounded-md font-bold hover:bg-red-600">Sell Short</button>
</div>
</div>
</div>
<!-- Order Book and Recent Trades -->
<div>
<!-- Order Book -->
<div class="bg-white p-4 rounded-lg shadow-md mb-6">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-lg">Order Book</h3>
<div class="text-xs text-gray-500">
<span>Spread: </span>
<span id="spreadValue">52.25</span>
<span> USD</span>
</div>
</div>
<div class="order-book">
<div class="text-right mb-2">
<span class="text-xs text-gray-500">Price (USD)</span>
<span class="text-xs text-gray-500 ml-8">Amount</span>
</div>
<!-- Sell Orders -->
<div class="mb-4">
<div class="text-red-500 font-medium text-sm mb-1">Sell Orders</div>
<div class="space-y-1" id="sellOrders">
<div class="flex justify-between text-red-500">
<span>52,450.25</span>
<span>1.25</span>
</div>
<div class="flex justify-between text-red-500">
<span>52,420.50</span>
<span>2.75</span>
</div>
<div class="flex justify-between text-red-500">
<span>52,400.00</span>
<span>0.85</span>
</div>
<div class="flex justify-between text-red-500">
<span>52,380.75</span>
<span>3.20</span>
</div>
<div class="flex justify-between text-red-500">
<span>52,350.00</span>
<span>1.50</span>
</div>
</div>
</div>
<!-- Current Price -->
<div class="text-center py-2 mb-4">
<div class="text-xl font-bold" id="currentPrice">52,123.45</div>
<div class="text-green-500 text-sm" id="priceChange">+1.25%</div>
</div>
<!-- Buy Orders -->
<div>
<div class="text-green-500 font-medium text-sm mb-1">Buy Orders</div>
<div class="space-y-1" id="buyOrders">
<div class="flex justify-between text-green-500">
<span>52,000.00</span>
<span>2.10</span>
</div>
<div class="flex justify-between text-green-500">
<span>51,980.50</span>
<span>1.75</span>
</div>
<div class="flex justify-between text-green-500">
<span>51,950.25</span>
<span>3.40</span>
</div>
<div class="flex justify-between text-green-500">
<span>51,920.00</span>
<span>0.90</span>
</div>
<div class="flex justify-between text-green-500">
<span>51,900.75</span>
<span>2.60</span>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Trades -->
<div class="bg-white p-4 rounded-lg shadow-md">
<h3 class="font-bold text-lg mb-4">Recent Trades</h3>
<div class="space-y-2" id="recentTrades">
<div class="flex justify-between text-sm">
<span class="text-green-500">52,123.45</span>
<span>1.25 BTC</span>
<span class="text-gray-500">12:45:23</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-red-500">52,125.80</span>
<span>0.75 BTC</span>
<span class="text-gray-500">12:44:56</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-green-500">52,120.30</span>
<span>2.10 BTC</span>
<span class="text-gray-500">12:43:12</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-green-500">52,115.75</span>
<span>1.50 BTC</span>
<span class="text-gray-500">12:42:45</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-red-500">52,118.20</span>
<span>0.85 BTC</span>
<span class="text-gray-500">12:41:33</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Market Data Section -->
<section class="bg-white p-6 rounded-lg shadow-md mb-8">
<h2 class="text-2xl font-bold text-dark mb-4">Market Data Insights</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Economic Calendar -->
<div class="border rounded-lg p-4">
<div class="flex items-center mb-3">
<i class="fas fa-calendar-alt text-primary mr-2"></i>
<h3 class="font-semibold">Economic Calendar</h3>
</div>
<div class="space-y-3" id="economicEvents">
<div class="text-sm">
<div class="flex justify-between">
<span class="font-medium">US Nonfarm Payrolls</span>
<span class="text-gray-500">Today</span>
</div>
<div class="text-gray-600">Expected: 180K</div>
</div>
<div class="text-sm">
<div class="flex justify-between">
<span class="font-medium">EU CPI</span>
<span class="text-gray-500">Tomorrow</span>
</div>
<div class="text-gray-600">Expected: 2.9%</div>
</div>
</div>
</div>
<!-- Commodity Prices -->
<div class="border rounded-lg p-4">
<div class="flex items-center mb-3">
<i class="fas fa-chart-line text-primary mr-2"></i>
<h3 class="font-semibold">Commodity Prices</h3>
</div>
<div class="space-y-3" id="commodityPrices">
<div class="text-sm">
<div class="flex justify-between">
<span class="font-medium">Gold</span>
<span class="font-bold">$1,950.40</span>
</div>
<div class="text-green-500">+0.45%</div>
</div>
<div class="text-sm">
<div class="flex justify-between">
<span class="font-medium">Oil</span>
<span class="font-bold">$78.25</span>
</div>
<div class="text-red-500">-1.20%</div>
</div>
</div>
</div>
<!-- Currency Rates -->
<div class="border rounded-lg p-4">
<div class="flex items-center mb-3">
<i class="fas fa-exchange-alt text-primary mr-2"></i>
<h3 class="font-semibold">Currency Rates</h3>
</div>
<div class="space-y-3" id="currencyRates">
<div class="text-sm">
<div class="flex justify-between">
<span class="font-medium">EUR/USD</span>
<span class="font-bold">1.0854</span>
</div>
<div class="text-green-500">+0.12%</div>
</div>
<div class="text-sm">
<div class="flex justify-between">
<span class="font-medium">GBP/USD</span>
<span class="font-bold">1.2650</span>
</div>
<div class="text-red-500">-0.08%</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Forward Contracts -->
<section class="bg-white p-6 rounded-lg shadow-md mb-8">
<h2 class="text-2xl font-bold text-dark mb-4">About Forward Contracts</h2>
<div class="prose max-w-none">
<p>A forward contract is a customized contract between two parties to buy or sell an asset at a specified price on a future date. Forward contracts are not standardized and are not traded on exchanges.</p>
<h3 class="text-xl font-semibold mt-4">Key Features:</h3>
<ul class="list-disc pl-5 space-y-2">
<li><strong>Customizable:</strong> Terms can be tailored to the needs of both parties</li>
<li><strong>OTC Trading:</strong> Traded directly between parties rather than on exchanges</li>
<li><strong>No Upfront Cost:</strong> Typically no money changes hands until delivery</li>
<li><strong>Settlement:</strong> Can be settled by physical delivery or cash settlement</li>
<li><strong>Credit Risk:</strong> Each party bears the risk that the other may default</li>
</ul>
</div>
</section>
<!-- Risk Warning -->
<section class="bg-red-50 border-l-4 border-red-500 p-4 mb-8">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-exclamation-triangle text-red-500 text-xl mt-1"></i>
</div>
<div class="ml-3">
<h3 class="text-lg font-medium text-red-800">Risk Warning</h3>
<div class="mt-2 text-sm text-red-700">
<p>Forward contracts involve high risk and are not suitable for all investors. You may lose more than your initial investment. Before trading, please consider your investment objectives, experience level, and risk tolerance. Past performance is not indicative of future results.</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-dark text-white py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-bold mb-4">ForwardX</h3>
<p class="text-gray-400">The leading platform for forward contract trading with mini to large contract sizes.</p>
</div>
<div>
<h4 class="font-semibold mb-4">Markets</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Mini Contracts</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Standard Contracts</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Large Contracts</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Custom Contracts</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Trading Guide</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Risk Management</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Legal</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm">© 2023 ForwardX. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</footer>
<!-- Floating Action Buttons -->
<div class="floating-action-btn" id="mainFloatingBtn">
<i class="fas fa-exchange-alt text-xl"></i>
</div>
<div class="floating-action-menu" id="floatingActionMenu">
<div class="floating-action-item bitcoin" id="buyWithBitcoin">
<i class="fab fa-bitcoin"></i>
<span>Buy with Bitcoin</span>
</div>
<div class="floating-action-item fractal" id="buyWithFractal">
<i class="fas fa-coins"></i>
<span>Buy with Fractal</span>
</div>
<div class="floating-action-item bitcoin-cash" id="buyWithBitcoinCash">
<i class="fab fa-btc"></i>
<span>Buy with Bitcoin Cash</span>
</div>
<div class="floating-action-item" id="sellInventory" style="border-top: 1px solid #e5e7eb;">
<i class="fas fa-hand-holding-usd text-primary"></i>
<span>Sell Inventory</span>
</div>
</div>
<!-- TradingView Widget Script -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
// Global variables
let currentMarket = 'BTC';
let currentBaseCurrency = 'USD';
let currentSpotPrice = 52123.45;
let previousSpotPrice = 52123.45;
let orderBookUpdateInterval;
let tradesUpdateInterval;
let marketDataUpdateInterval;
// Detect user IP and show consent modal
document.addEventListener('DOMContentLoaded', function() {
// Get user IP (using a proxy service to mask our actual API call)
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => {
document.getElementById('userIP').textContent = data.ip;
// Store IP in localStorage as user identifier
localStorage.setItem('forwardXUserIP', data.ip);
document.getElementById('accountStatus').textContent = `IP: ${data.ip.substring(0, 6)}...`;
})
.catch(() => {
document.getElementById('userIP').textContent = 'unknown';
});
// Show consent modal if not already answered
if (!localStorage.getItem('forwardXDataConsent')) {
document.getElementById('consentModal').classList.remove('hidden');
} else if (localStorage.getItem('forwardXDataConsent') === 'granted') {
// If consent was granted previously, load market data
loadMarketData();
}
// Consent modal handlers
document.getElementById('grantConsent').addEventListener('click', function() {
localStorage.setItem('forwardXDataConsent', 'granted');
document.getElementById('consentModal').classList.add('hidden');
loadMarketData();
});
document.getElementById('denyConsent').addEventListener('click', function() {
localStorage.setItem('forwardXDataConsent', 'denied');
document.getElementById('consentModal').classList.add('hidden');
// Show message that some features won't work
alert('Some market data features will be limited without data access permission.');
});
// Initialize TradingView widget
function initTradingView() {
new TradingView.widget({
"autosize": true,
"symbol": `BITSTAMP:${currentMarket}USD`,
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": false,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"container_id": "tradingview-chart"
});
}
// Load market data from Trading Economics API (simulated)
function loadMarketData() {
// In a real implementation, this would call our backend which then calls the Trading Economics API
// For this demo, we'll simulate the response with realistic data
// Simulate API delay
setTimeout(() => {
// Update contract prices based on current market
updateContractPrices();
// Initialize TradingView after data is loaded
initTradingView();
// Set intervals to update data periodically
orderBookUpdateInterval = setInterval(updateOrderBook, 30000);
tradesUpdateInterval = setInterval(updateRecentTrades, 15000);
marketDataUpdateInterval = setInterval(updateMarketData, 60000);
// Initial updates
updateOrderBook();
updateRecentTrades();
updateMarketData();
}, 1000);
}
// Update contract prices based on current market and base currency
function updateContractPrices() {
// Get random price movement
const miniChange = (Math.random() * 3 - 1).toFixed(2);
const standardChange = (Math.random() * 3 - 1).toFixed(2);
const largeChange = (Math.random() * 4 - 1).toFixed(2);
// Calculate prices based on current spot price
const miniPrice = currentSpotPrice;
const standardPrice = currentSpotPrice * 5;
const largePrice = currentSpotPrice * 10;
// Format prices based on base currency
let currencySymbol = '$';
if (currentBaseCurrency === 'GBP') currencySymbol = '£';
if (currentBaseCurrency === 'EUR') currencySymbol = '€';
// Update prices in UI
document.getElementById('miniPrice').textContent = `${currencySymbol}${miniPrice.toFixed(2)}`;
document.getElementById('standardPrice').textContent = `${currencySymbol}${standardPrice.toFixed(2)}`;
document.getElementById('largePrice').textContent = `${currencySymbol}${largePrice.toFixed(2)}`;
// Update changes
document.getElementById('miniChange').textContent = (miniChange > 0 ? '+' : '') + miniChange + '%';
document.getElementById('miniChange').className = miniChange > 0 ? 'text-green-500 font-bold' : 'text-red-500 font-bold';
document.getElementById('standardChange').textContent = (standardChange > 0 ? '+' : '') + standardChange + '%';
document.getElementById('standardChange').className = standardChange > 0 ? 'text-green-500 font-bold' : 'text-red-500 font-bold';
document.getElementById('largeChange').textContent = (largeChange > 0 ? '+' : '') + largeChange + '%';
document.getElementById('largeChange').className = largeChange > 0 ? 'text-green-500 font-bold' : 'text-red-500 font-bold';
// Update current price and change
const priceChange = (Math.random() * 2 - 0.5).toFixed(2);
document.getElementById('currentPrice').textContent = `${currencySymbol}${currentSpotPrice.toFixed(2)}`;
document.getElementById('priceChange').textContent = (priceChange > 0 ? '+' : '') + priceChange + '%';
document.getElementById('priceChange').className = priceChange > 0 ? 'text-green-500 text-sm' : 'text-red-500 text-sm';
// Update payment modal spot price
document.getElementById('currentSpotPrice').textContent = `${currencySymbol}${currentSpotPrice.toFixed(2)}`;
}
// Update order book with random data
function updateOrderBook() {
const sellOrders = document.getElementById('sellOrders');
const buyOrders = document.getElementById('buyOrders');
// Clear existing orders
sellOrders.innerHTML = '';
buyOrders.innerHTML = '';
// Generate random sell orders (higher than current price)
for (let i = 0; i < 5; i++) {
const price = (currentSpotPrice * (1 + 0.005 + Math.random() * 0.01)).toFixed(2);
const amount = (Math.random() * 3).toFixed(2);
const order = document.createElement('div');
order.className = 'flex justify-between text-red-500';
order.innerHTML = `<span>${price}</span><span>${amount}</span>`;
sellOrders.appendChild(order);
}
// Generate random buy orders (lower than current price)
for (let i = 0; i < 5; i++) {
const price = (currentSpotPrice * (1 - 0.005 - Math.random() * 0.01)).toFixed(2);
const amount = (Math.random() * 3).toFixed(2);
const order = document.createElement('div');
order.className = 'flex justify-between text-green-500';
order.innerHTML = `<span>${price}</span><span>${amount}</span>`;
buyOrders.appendChild(order);
}
// Calculate spread (difference between lowest ask and highest bid)
const lowestAsk = parseFloat(sellOrders.children[0].children[0].textContent);
const highestBid = parseFloat(buyOrders.children[0].children[0].textContent);
const spread = (lowestAsk - highestBid).toFixed(2);
document.getElementById('spreadValue').textContent = spread;
}
// Update recent trades with random data
function updateRecentTrades() {
const recentTrades = document.getElementById('recentTrades');
// Keep last 2 trades and add 3 new ones
if (recentTrades.children.length > 2) {
recentTrades.removeChild(recentTrades.children[0]);
recentTrades.removeChild(recentTrades.children[0]);
}
// Add new trades
for (let i = 0; i < 3; i++) {
const isBuy = Math.random() > 0.5;
const price = (currentSpotPrice * (1 + (Math.random() * 0.002 - 0.001))).toFixed(2);
const amount = (Math.random() * 2 + 0.1).toFixed(2);
// Get current time
const now = new Date();
const time = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
const trade = document.createElement('div');
trade.className = 'flex justify-between text-sm';
trade.innerHTML = `
<span class="${isBuy ? 'text-green-500' : 'text-red-500'}">${price}</span>
<span>${amount} ${currentMarket}</span>
<span class="text-gray-500">${time}</span>
`;
recentTrades.appendChild(trade);
}
}
// Update market data (economic calendar, commodities, currencies)
function updateMarketData() {
// Simulate price changes
previousSpotPrice = currentSpotPrice;
currentSpotPrice = currentSpotPrice * (1 + (Math.random() * 0.01 - 0.005));
// Add price movement animation
const priceElement = document.getElementById('currentPrice');
if (currentSpotPrice > previousSpotPrice) {
priceElement.classList.add('price-movement-up');
setTimeout(() => {
priceElement.classList.remove('price-movement-up');
}, 1000);
} else if (currentSpotPrice < previousSpotPrice) {
priceElement.classList.add('price-movement-down');
setTimeout(() => {
priceElement.classList.remove('price-movement-down');
}, 1000);
}
// Update all prices
updateContractPrices();
}
// Market tabs switching
const tabs = document.querySelectorAll('.flex.border-b button');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
// Remove active class from all tabs
tabs.forEach(t => t.classList.remove('tab-active'));
// Add active class to clicked tab
this.classList.add('tab-active');
// Get market from data attribute
currentMarket = this.getAttribute('data-market');
// Update chart based on selected market
if (window.tvWidget) {
window.tvWidget.setSymbol(`BITSTAMP:${currentMarket}USD`);
}
// Update prices for new market
updateContractPrices();
// Update order book and recent trades for new market
updateOrderBook();
updateRecentTrades();
});
});
// Base currency change
document.getElementById('baseCurrency').addEventListener('change', function() {
currentBaseCurrency = this.value;
updateContractPrices();
});
// Contract card hover effect
const contractCards = document.querySelectorAll('.contract-card');
contractCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = '';
this.style.boxShadow = '';
});
});
// Order form submission
const orderForm = document.querySelector('.bg-white.p-6.rounded-lg.shadow-md');
const buyButton = orderForm.querySelector('button.bg-green-500');
const sellButton = orderForm.querySelector('button.bg-red-500');
buyButton.addEventListener('click', function(e) {
e.preventDefault();
const amount = document.getElementById('amount').value;
const price = document.getElementById('price').value;
if (!amount || !price) {
alert('Please enter both amount and price');
return;
}
// Get user IP from localStorage
const userIP = localStorage.getItem('forwardXUserIP') || 'unknown';
alert(`Buy order submitted for ${amount} USD at forward price of ${price} USD\nUser IP: ${userIP}`);
});
sellButton.addEventListener('click', function(e) {
e.preventDefault();
const amount = document.getElementById('amount').value;
const price = document.getElementById('price').value;
if (!amount || !price) {
alert('Please enter both amount and price');
return;
}
// Get user IP from localStorage
const userIP = localStorage.getItem('forwardXUserIP') || 'unknown';
alert(`Sell order submitted for ${amount} USD at forward price of ${price} USD\nUser IP: ${userIP}`);
});
// Floating action button
const mainFloatingBtn = document.getElementById('mainFloatingBtn');
const floatingActionMenu = document.getElementById('floatingActionMenu');
mainFloatingBtn.addEventListener('click', function() {
floatingActionMenu.classList.toggle('active');
});
// Buy with Bitcoin
document.getElementById('buyWithBitcoin').addEventListener('click', function() {
floatingActionMenu.classList.remove('active');
showPaymentModal('Bitcoin', 'fab fa-bitcoin');
});
// Buy with Fractal
document.getElementById('buyWithFractal').addEventListener('click', function() {
floatingActionMenu.classList.remove('active');
showPaymentModal('Fractal', 'fas fa-coins');
});
// Buy with Bitcoin Cash
document.getElementById('buyWithBitcoinCash').addEventListener('click', function() {
floatingActionMenu.classList.remove('active');
showPaymentModal('Bitcoin Cash', 'fab fa-btc');
});
// Sell Inventory
document.getElementById('sellInventory').addEventListener('click', function() {
floatingActionMenu.classList.remove('active');
document.getElementById('sellerModal').classList.remove('hidden');
});
// Show payment modal
function showPaymentModal(cryptoType, iconClass) {
document.getElementById('paymentTitle').textContent = `Buy with ${cryptoType}`;
document.getElementById('cryptoType').textContent = cryptoType;
document.getElementById('confirmCryptoType').textContent = cryptoType;
// Calculate crypto amount based on current spot price
const amount = (1000 / currentSpotPrice).toFixed(6);
document.getElementById('cryptoAmount').textContent = `${amount} ${cryptoType.substring(0, 3)}`;
// Set default forward price to current spot price
document.getElementById('forwardPrice').value = currentSpotPrice.toFixed(2);
// Show modal
document.getElementById('paymentModal').classList.remove('hidden');
}
// Close payment modal
document.getElementById('closePaymentModal').addEventListener('click', function() {
document.getElementById('paymentModal').classList.add('hidden');
});
// Confirm payment
document.getElementById('confirmPayment').addEventListener('click', function() {
const cryptoAddress = document.getElementById('cryptoAddress').value;
const contractAmount = document.getElementById('contractAmount').value;
const forwardPrice = document.getElementById('forwardPrice').value;
const cryptoType = document.getElementById('cryptoType').textContent;
if (!cryptoAddress || !contractAmount || !forwardPrice) {
alert('Please fill all fields');
return;
}
// In a real implementation, this would send the transaction to the blockchain
alert(`Payment of ${contractAmount} USD forward contract at ${forwardPrice} USD will be processed using ${cryptoType} address: ${cryptoAddress}\n\nTransaction will be posted to the blockchain.`);
// Close modal
document.getElementById('paymentModal').classList.add('hidden');
// Clear fields
document.getElementById('cryptoAddress').value = '';
document.getElementById('contractAmount').value = '';
document.getElementById('forwardPrice').value = '';
});
// Close seller modal
document.getElementById('closeSellerModal').addEventListener('click', function() {
document.getElementById('sellerModal').classList.add('hidden');
});
// Confirm seller agreement
document.getElementById('confirmSellerAgreement').addEventListener('click', function() {
const sellerAmount = document.getElementById('sellerAmount').value;
const sellerPrice = document.getElementById('sellerPrice').value;
const sellerExpiry = document.getElementById('sellerExpiry').value;
if (!sellerAmount || !sellerPrice || !sellerExpiry) {
alert('Please fill all fields');
return;
}
// In a real implementation, this would create a smart contract
alert(`Sell agreement created for ${sellerAmount} USD at forward price of ${sellerPrice} USD, expiring on ${sellerExpiry}\n\nThis agreement will be enforced via smart contract.`);
// Close modal
document.getElementById('sellerModal').classList.add('hidden');
// Clear fields
document.getElementById('sellerAmount').value = '';
document.getElementById('sellerPrice').value = '';
document.getElementById('sellerExpiry').value = '';
});
// Update crypto amount when contract amount changes
document.getElementById('contractAmount').addEventListener('input', function() {
const amount = parseFloat(this.value) || 0;
const cryptoType = document.getElementById('cryptoType').textContent;
const cryptoAmount = (amount / currentSpotPrice).toFixed(6);
document.getElementById('cryptoAmount').textContent = `${cryptoAmount} ${cryptoType.substring(0, 3)}`;
});
// Update seller receive amount when price changes
document.getElementById('sellerPrice').addEventListener('input', function() {
const price = parseFloat(this.value) || 0;
const amount = parseFloat(document.getElementById('sellerAmount').value) || 0;
const receiveAmount = (price * amount).toFixed(2);
document.getElementById('sellerReceive').textContent = `$${receiveAmount}`;
});
document.getElementById('sellerAmount').addEventListener('input', function() {
const amount = parseFloat(this.value) || 0;
const price = parseFloat(document.getElementById('sellerPrice').value) || 0;
const receiveAmount = (price * amount).toFixed(2);
document.getElementById('sellerReceive').textContent = `$${receiveAmount}`;
});
});
</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=privateuserh/privspot-vbeta1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>