|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Stock Alert System | Explosion Detector</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://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
.blink { |
|
|
animation: blink-animation 1s steps(5, start) infinite; |
|
|
} |
|
|
@keyframes blink-animation { |
|
|
to { opacity: 0.5; } |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); |
|
|
} |
|
|
.stock-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.notification-bell { |
|
|
animation: ring 4s 0.7s ease-in-out infinite; |
|
|
transform-origin: 50% 4px; |
|
|
} |
|
|
@keyframes ring { |
|
|
0% { transform: rotate(0); } |
|
|
1% { transform: rotate(30deg); } |
|
|
3% { transform: rotate(-28deg); } |
|
|
5% { transform: rotate(34deg); } |
|
|
7% { transform: rotate(-32deg); } |
|
|
9% { transform: rotate(30deg); } |
|
|
11% { transform: rotate(-28deg); } |
|
|
13% { transform: rotate(26deg); } |
|
|
15% { transform: rotate(-24deg); } |
|
|
17% { transform: rotate(22deg); } |
|
|
19% { transform: rotate(-20deg); } |
|
|
21% { transform: rotate(18deg); } |
|
|
23% { transform: rotate(-16deg); } |
|
|
25% { transform: rotate(14deg); } |
|
|
27% { transform: rotate(-12deg); } |
|
|
29% { transform: rotate(10deg); } |
|
|
31% { transform: rotate(-8deg); } |
|
|
33% { transform: rotate(6deg); } |
|
|
35% { transform: rotate(-4deg); } |
|
|
37% { transform: rotate(2deg); } |
|
|
39% { transform: rotate(-1deg); } |
|
|
41% { transform: rotate(1deg); } |
|
|
43% { transform: rotate(0); } |
|
|
100% { transform: rotate(0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i class="fas fa-chart-line text-3xl text-yellow-300"></i> |
|
|
<h1 class="text-2xl font-bold">Stock Explosion Alert</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-6"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-bell notification-bell text-2xl cursor-pointer text-yellow-300" id="notificationBell"></i> |
|
|
<span class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold" id="notificationCount">0</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-blue-700"></i> |
|
|
</div> |
|
|
<span class="font-medium">Trader</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Market Overview</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm font-medium">1D</button> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">1W</button> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">1M</button> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">1Y</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-64"> |
|
|
<canvas id="marketChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Active Alerts</h2> |
|
|
<button class="text-blue-600 text-sm font-medium">View All</button> |
|
|
</div> |
|
|
<div class="space-y-4" id="alertsContainer"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Watchlist</h2> |
|
|
<button class="text-blue-600 text-sm font-medium">Manage</button> |
|
|
</div> |
|
|
<div class="space-y-3" id="watchlistContainer"> |
|
|
|
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Add stock symbol..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button class="absolute right-2 top-2 bg-blue-500 text-white p-1 rounded-md"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Alert Settings</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Sell-off Threshold</label> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="range" min="5" max="30" value="15" class="w-full" id="selloffThreshold"> |
|
|
<span class="text-sm font-medium text-gray-600 w-10" id="selloffValue">15%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Recovery Threshold</label> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="range" min="3" max="15" value="8" class="w-full" id="recoveryThreshold"> |
|
|
<span class="text-sm font-medium text-gray-600 w-10" id="recoveryValue">8%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Volume Spike</label> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="range" min="50" max="300" value="150" class="w-full" id="volumeThreshold"> |
|
|
<span class="text-sm font-medium text-gray-600 w-10" id="volumeValue">150%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pt-2"> |
|
|
<button class="w-full bg-blue-600 text-white py-2 rounded-md font-medium hover:bg-blue-700 transition duration-200"> |
|
|
Save Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Quick Actions</h2> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button class="bg-green-100 text-green-700 py-2 rounded-md font-medium flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
<span>Buy Alert</span> |
|
|
</button> |
|
|
<button class="bg-red-100 text-red-700 py-2 rounded-md font-medium flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-sign-out-alt"></i> |
|
|
<span>Sell Alert</span> |
|
|
</button> |
|
|
<button class="bg-blue-100 text-blue-700 py-2 rounded-md font-medium flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span>Set Alert</span> |
|
|
</button> |
|
|
<button class="bg-purple-100 text-purple-700 py-2 rounded-md font-medium flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-chart-pie"></i> |
|
|
<span>Analyze</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" id="notificationPanel"> |
|
|
<div class="absolute right-0 top-0 h-full w-96 bg-white shadow-xl transform transition-transform duration-300 translate-x-full" id="panelContent"> |
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<h3 class="text-lg font-bold">Notifications</h3> |
|
|
<button class="text-gray-500 hover:text-gray-700" id="closePanel"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-y-auto h-full p-4 space-y-4" id="notificationList"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const ctx = document.getElementById('marketChart').getContext('2d'); |
|
|
const marketChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00'], |
|
|
datasets: [{ |
|
|
label: 'S&P 500', |
|
|
data: [4500, 4480, 4475, 4460, 4450, 4435, 4420, 4430, 4445, 4460, 4475, 4490, 4505, 4520], |
|
|
borderColor: 'rgba(59, 130, 246, 1)', |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
|
tension: 0.4, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const watchlistData = [ |
|
|
{ symbol: 'AAPL', name: 'Apple Inc.', price: 185.34, change: 2.34, changePercent: 1.28, volume: '45.2M' }, |
|
|
{ symbol: 'TSLA', name: 'Tesla Inc.', price: 260.54, change: -5.23, changePercent: -1.97, volume: '102.5M' }, |
|
|
{ symbol: 'NVDA', name: 'NVIDIA Corp.', price: 450.22, change: 12.45, changePercent: 2.85, volume: '78.3M' }, |
|
|
{ symbol: 'AMZN', name: 'Amazon.com Inc.', price: 178.75, change: 1.23, changePercent: 0.69, volume: '32.1M' }, |
|
|
{ symbol: 'META', name: 'Meta Platforms', price: 310.42, change: -3.21, changePercent: -1.02, volume: '28.7M' } |
|
|
]; |
|
|
|
|
|
|
|
|
const alertData = [ |
|
|
{ |
|
|
symbol: 'TSLA', |
|
|
type: 'buy', |
|
|
message: 'Potential explosion detected after 18% sell-off', |
|
|
time: '2 min ago', |
|
|
price: 260.54, |
|
|
target: 285.00, |
|
|
stopLoss: 250.00 |
|
|
}, |
|
|
{ |
|
|
symbol: 'NVDA', |
|
|
type: 'sell', |
|
|
message: 'Take profits - target reached after 28% gain', |
|
|
time: '15 min ago', |
|
|
price: 450.22, |
|
|
entry: 420.00, |
|
|
gain: '7.2%' |
|
|
}, |
|
|
{ |
|
|
symbol: 'AMD', |
|
|
type: 'watch', |
|
|
message: 'Volume spike detected - monitor for potential breakout', |
|
|
time: '32 min ago', |
|
|
price: 128.75, |
|
|
volume: '2.5x average' |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const notificationData = [ |
|
|
{ |
|
|
symbol: 'TSLA', |
|
|
type: 'buy', |
|
|
message: 'ALERT: TSLA showing signs of recovery after heavy sell-off', |
|
|
time: 'Just now', |
|
|
priority: 'high' |
|
|
}, |
|
|
{ |
|
|
symbol: 'SPY', |
|
|
type: 'market', |
|
|
message: 'Market showing signs of recovery after morning dip', |
|
|
time: '5 min ago', |
|
|
priority: 'medium' |
|
|
}, |
|
|
{ |
|
|
symbol: 'NVDA', |
|
|
type: 'sell', |
|
|
message: 'NVDA reached target price of $450. Consider taking profits', |
|
|
time: '18 min ago', |
|
|
priority: 'high' |
|
|
}, |
|
|
{ |
|
|
symbol: 'AMD', |
|
|
type: 'volume', |
|
|
message: 'AMD volume spike detected (2.5x average)', |
|
|
time: '35 min ago', |
|
|
priority: 'medium' |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
function populateWatchlist() { |
|
|
const container = document.getElementById('watchlistContainer'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
watchlistData.forEach(stock => { |
|
|
const changeClass = stock.change >= 0 ? 'text-green-600' : 'text-red-600'; |
|
|
const changeIcon = stock.change >= 0 ? 'fa-arrow-up' : 'fa-arrow-down'; |
|
|
|
|
|
const stockElement = document.createElement('div'); |
|
|
stockElement.className = 'flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition cursor-pointer stock-card'; |
|
|
stockElement.innerHTML = ` |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center"> |
|
|
<span class="font-bold text-blue-600">${stock.symbol.charAt(0)}</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">${stock.symbol}</h3> |
|
|
<p class="text-xs text-gray-500">${stock.name}</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">$${stock.price.toFixed(2)}</p> |
|
|
<p class="text-xs ${changeClass}"> |
|
|
<i class="fas ${changeIcon} mr-1"></i> |
|
|
${stock.change >= 0 ? '+' : ''}${stock.change.toFixed(2)} (${stock.changePercent >= 0 ? '+' : ''}${stock.changePercent.toFixed(2)}%) |
|
|
</p> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(stockElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function populateAlerts() { |
|
|
const container = document.getElementById('alertsContainer'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
alertData.forEach(alert => { |
|
|
const alertClass = alert.type === 'buy' ? 'border-l-4 border-green-500 bg-green-50' : |
|
|
alert.type === 'sell' ? 'border-l-4 border-red-500 bg-red-50' : |
|
|
'border-l-4 border-blue-500 bg-blue-50'; |
|
|
|
|
|
const alertIcon = alert.type === 'buy' ? 'fa-bolt text-green-600' : |
|
|
alert.type === 'sell' ? 'fa-sign-out-alt text-red-600' : |
|
|
'fa-eye text-blue-600'; |
|
|
|
|
|
const alertElement = document.createElement('div'); |
|
|
alertElement.className = `${alertClass} p-4 rounded-lg`; |
|
|
alertElement.innerHTML = ` |
|
|
<div class="flex justify-between items-start"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<i class="fas ${alertIcon} mt-1"></i> |
|
|
<div> |
|
|
<h3 class="font-bold">${alert.symbol} ${alert.type === 'buy' ? 'Buy Alert' : alert.type === 'sell' ? 'Sell Alert' : 'Watch Alert'}</h3> |
|
|
<p class="text-sm">${alert.message}</p> |
|
|
${alert.type === 'buy' ? ` |
|
|
<div class="mt-2 grid grid-cols-3 gap-2 text-xs"> |
|
|
<div class="bg-green-100 text-green-800 p-1 rounded text-center">Price: $${alert.price}</div> |
|
|
<div class="bg-blue-100 text-blue- |
|
|
</html> |
