<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TradeIndia - Real-Time Stock Trading</title>
<link rel="stylesheet" href="[Link]
[Link]">
<script src="[Link]
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
:root {
--primary: #1e3a8a;
--secondary: #3b82f6;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--dark: #1f2937;
--light: #f8fafc;
--gray: #6b7280;
body {
background-color: #f1f5f9;
color: var(--dark);
line-height: 1.6;
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 20px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
.logo {
display: flex;
align-items: center;
gap: 10px;
.logo h1 {
font-size: 1.8rem;
font-weight: 700;
}
.logo span {
color: var(--warning);
.market-status {
background-color: rgba(255, 255, 255, 0.2);
padding: 8px 15px;
border-radius: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--success);
animation: pulse 2s infinite;
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
.dashboard {
display: grid;
grid-template-columns: 1fr 350px;
gap: 20px;
margin-top: 20px;
.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
padding: 20px;
margin-bottom: 20px;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e7eb;
.card-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary);
.stocks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
.stock-card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 15px;
transition: all 0.3s ease;
.stock-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
.stock-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.stock-symbol {
font-weight: 700;
font-size: 1.1rem;
.stock-name {
color: var(--gray);
font-size: 0.85rem;
}
.stock-price {
font-size: 1.3rem;
font-weight: 700;
margin: 5px 0;
.stock-change {
display: flex;
align-items: center;
gap: 5px;
font-weight: 600;
.positive {
color: var(--success);
.negative {
color: var(--danger);
.chart-container {
height: 300px;
margin-top: 20px;
.portfolio-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 20px;
.summary-card {
text-align: center;
padding: 15px;
border-radius: 8px;
background-color: #f8fafc;
.summary-value {
font-size: 1.5rem;
font-weight: 700;
margin: 10px 0;
.trade-form {
display: flex;
flex-direction: column;
gap: 15px;
.form-group {
display: flex;
flex-direction: column;
gap: 5px;
label {
font-weight: 600;
font-size: 0.9rem;
select, input {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 1rem;
.btn-group {
display: flex;
gap: 10px;
button {
padding: 12px 20px;
border: none;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
.btn-buy {
background-color: var(--success);
color: white;
.btn-sell {
background-color: var(--danger);
color: white;
button:hover {
opacity: 0.9;
transform: translateY(-2px);
.order-history {
max-height: 300px;
overflow-y: auto;
.order-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #e5e7eb;
.order-type {
padding: 3px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
.order-buy {
background-color: rgba(16, 185, 129, 0.1);
color: var(--success);
}
.order-sell {
background-color: rgba(239, 68, 68, 0.1);
color: var(--danger);
footer {
text-align: center;
padding: 20px;
margin-top: 40px;
color: var(--gray);
font-size: 0.9rem;
border-top: 1px solid #e5e7eb;
@media (max-width: 1024px) {
.dashboard {
grid-template-columns: 1fr;
.stocks-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@media (max-width: 768px) {
.portfolio-summary {
grid-template-columns: 1fr;
}
.stocks-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
.header-content {
flex-direction: column;
gap: 15px;
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<h1>Trade<span>India</span></h1>
</div>
<div class="market-status">
<div class="status-indicator"></div>
<span>Market Open - Live</span>
</div>
</div>
</div>
</header>
<div class="container">
<div class="dashboard">
<div class="main-content">
<div class="card">
<div class="card-header">
<h2 class="card-title">Live Indian Stocks</h2>
</div>
<div class="stocks-grid" id="stocksGrid">
<!-- Stocks will be populated by JavaScript -->
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">Market Overview</h2>
</div>
<div class="chart-container">
<canvas id="marketChart"></canvas>
</div>
</div>
</div>
<div class="sidebar">
<div class="card">
<div class="card-header">
<h2 class="card-title">Portfolio Summary</h2>
</div>
<div class="portfolio-summary">
<div class="summary-card">
<div>Total Value</div>
<div class="summary-value" id="totalValue">₹1,25,430</div>
<div class="positive">+2.3%</div>
</div>
<div class="summary-card">
<div>Cash Balance</div>
<div class="summary-value" id="cashBalance">₹25,430</div>
<div>Available</div>
</div>
<div class="summary-card">
<div>Today's P&L</div>
<div class="summary-value positive" id="dailyPnL">+₹2,850</div>
<div>+1.8%</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">Quick Trade</h2>
</div>
<div class="trade-form">
<div class="form-group">
<label for="stockSelect">Stock</label>
<select id="stockSelect">
<option value="RELIANCE">Reliance Industries</option>
<option value="TCS">Tata Consultancy</option>
<option value="INFY">Infosys</option>
<option value="HDFC">HDFC Bank</option>
<option value="ICICI">ICICI Bank</option>
</select>
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="number" id="quantity" value="10" min="1">
</div>
<div class="form-group">
<label>Current Price</label>
<div id="currentPrice">₹2,450.75</div>
</div>
<div class="btn-group">
<button class="btn-buy" id="buyBtn">BUY</button>
<button class="btn-sell" id="sellBtn">SELL</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">Order History</h2>
</div>
<div class="order-history" id="orderHistory">
<!-- Orders will be populated by JavaScript -->
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<p>Disclaimer: This is a simulation for demonstration purposes. Not real trading data.</p>
<p>© 2023 TradeIndia - Real-Time Stock Trading Platform</p>
</div>
</footer>
<script>
// Indian stocks data with initial prices
const stocks = [
{ symbol: "RELIANCE", name: "Reliance Industries", price: 2450.75, change: 12.50,
changePercent: 0.51 },
{ symbol: "TCS", name: "Tata Consultancy", price: 3315.20, change: -25.75, changePercent: -
0.77 },
{ symbol: "INFY", name: "Infosys", price: 1520.45, change: 8.30, changePercent: 0.55 },
{ symbol: "HDFC", name: "HDFC Bank", price: 1645.60, change: 5.25, changePercent: 0.32 },
{ symbol: "ICICI", name: "ICICI Bank", price: 915.80, change: -3.40, changePercent: -0.37 },
{ symbol: "HINDUNILVR", name: "Hindustan Unilever", price: 2590.15, change: 15.75,
changePercent: 0.61 },
{ symbol: "SBIN", name: "State Bank of India", price: 545.30, change: 2.85, changePercent:
0.53 },
{ symbol: "BHARTIARTL", name: "Bharti Airtel", price: 815.45, change: -7.20, changePercent: -
0.88 },
{ symbol: "ITC", name: "ITC Ltd", price: 430.25, change: 3.15, changePercent: 0.74 },
{ symbol: "LT", name: "Larsen & Toubro", price: 1985.50, change: 22.40, changePercent: 1.14 },
{ symbol: "AXISBANK", name: "Axis Bank", price: 920.75, change: -5.60, changePercent: -
0.60 },
{ symbol: "KOTAKBANK", name: "Kotak Mahindra Bank", price: 1785.90, change: 12.30,
changePercent: 0.69 }
];
// Portfolio data
let portfolio = {
totalValue: 125430,
cashBalance: 25430,
dailyPnL: 2850
};
// Order history
let orders = [
{ type: "BUY", symbol: "RELIANCE", quantity: 5, price: 2438.25, time: "10:25 AM" },
{ type: "SELL", symbol: "TCS", quantity: 8, price: 3340.95, time: "09:45 AM" },
{ type: "BUY", symbol: "INFY", quantity: 15, price: 1512.15, time: "Yesterday" },
{ type: "BUY", symbol: "HDFC", quantity: 10, price: 1640.35, time: "Yesterday" }
];
// Chart data
let chartData = {
labels: ['9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30'],
datasets: [{
label: 'NIFTY 50',
data: [17850, 17820, 17860, 17900, 17870, 17920, 17950, 17930, 17980, 18010],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.4,
fill: true
}]
};
// Initialize chart
let marketChart;
function initChart() {
const ctx = [Link]('marketChart').getContext('2d');
marketChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
scales: {
y: {
beginAtZero: false,
grid: {
color: 'rgba(0, 0, 0, 0.05)'
},
x: {
grid: {
display: false
});
// Function to update stock prices randomly
function updateStockPrices() {
[Link](stock => {
// Generate random price change between -2 and +2
const change = ([Link]() * 4 - 2);
const newPrice = [Link] + change;
// Update stock data
[Link] = change;
[Link] = (change / [Link]) * 100;
[Link] = newPrice;
});
// Update the UI
renderStocks();
updatePortfolioValues();
updateChart();
// Function to render stocks in the grid
function renderStocks() {
const stocksGrid = [Link]('stocksGrid');
[Link] = '';
[Link](stock => {
const changeClass = [Link] >= 0 ? 'positive' : 'negative';
const changeSymbol = [Link] >= 0 ? '+' : '';
const stockCard = [Link]('div');
[Link] = 'stock-card';
[Link] = `
<div class="stock-header">
<div>
<div class="stock-symbol">${[Link]}</div>
<div class="stock-name">${[Link]}</div>
</div>
</div>
<div class="stock-price">₹${[Link](2)}</div>
<div class="stock-change ${changeClass}">
${changeSymbol}${[Link](2)} (${changeSymbol}$
{[Link](2)}%)
</div>
`;
[Link](stockCard);
});
// Function to update portfolio values
function updatePortfolioValues() {
// Simulate portfolio value changes
const randomChange = ([Link]() * 1000 - 500);
[Link] += randomChange;
[Link] = [Link] + 100000 + [Link];
// Update UI
[Link]('totalValue').textContent = `₹$
{[Link]('en-IN')}`;
[Link]('cashBalance').textContent = `₹${