<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Crypto Updates</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root {
--primary: #00D4FF;
--dark: #0A0A0A;
--card: #111;
}
body {
font-family: 'Inter', sans-serif;
background: var(--dark);
color: #ddd;
margin: 0;
padding: 20px;
}
/* Live Gadget Container */
.live-gadget {
width: 325px;
background: var(--card);
border: 1px solid #222;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.15);
position: fixed;
right: 30px;
top: 100px;
z-index: 1000;
}
.live-header {
background: linear-gradient(90deg, #0A0A0A, #1A1A1A);
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #222;
}
.live-dot {
width: 10px;
height: 10px;
background: #22C55E;
border-radius: 50%;
animation: pulse 2s infinite;
margin-right: 8px;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.live-title {
font-weight: 600;
font-size: 1.05rem;
display: flex;
align-items: center;
color: var(--primary);
}
.live-time {
font-size: 0.8rem;
color: #666;
}
.live-feed {
max-height: 120px;
overflow-y: auto;
padding: 8px 0;
}
.live-item {
padding: 14px 18px;
border-bottom: 1px solid #1F1F1F;
transition: all 0.3s ease;
animation: slideIn 0.4s ease forwards;
}
.live-item:hover {
background: #1A1A1A;
}
.live-item:last-child {
border-bottom: none;
}
.live-category {
font-size: 0.75rem;
font-weight: 600;
padding: 2px 10px;
border-radius: 9999px;
display: inline-block;
margin-bottom: 6px;
}
.live-title-text {
font-size: 0.97rem;
line-height: 1.35;
font-weight: 500;
margin-bottom: 6px;
color: #eee;
}
.live-time-ago {
font-size: 0.78rem;
color: #777;
}
/* Scrollbar */
.live-feed::-webkit-scrollbar {
width: 6px;
}
.live-feed::-webkit-scrollbar-thumb {
background: #333;
border-radius: 10px;
}
.new-badge {
background: #EF4444;
color: white;
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
margin-left: 8px;
animation: newPulse 1.5s infinite;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes newPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Toggle button (for demo) */
.toggle-btn {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--primary);
color: black;
border: none;
padding: 12px 20px;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}
</style>
</head>
<body>
<!-- Live Update Gadget -->
<div class="live-gadget" id="liveGadget">
<div class="live-header">
<div class="live-title">
<span class="live-dot"></span>
नवीनतम क्रिप्टो समाचार
<span class="new-badge">LIVE</span>
</div>
<div class="live-time" id="lastUpdated">Just now</div>
</div>
<div class="live-feed" id="liveFeed">
<!-- Items injected by JavaScript -->
</div>
</div>
<button class="toggle-btn" onclick="toggleGadget()">Hide Live Feed</button>
<script>
// Sample live news data (updated from CoinDesk latest as of April 2026)
let newsItems = [
{
category: "Markets",
title: "Bitcoin drops below $68,000 — analysts warn of risk of crash under $60,000",
time: "18 minutes ago",
color: "#F59E0B"
},
{
category: "Policy",
title: "CFTC sues Illinois, Arizona, Connecticut over sports prediction market efforts",
time: "2 hours ago",
color: "#8B5CF6"
},
{
category: "Policy",
title: "Coinbase wins initial bank regulator nod for trust charter, boosting custody push",
time: "2 hours ago",
color: "#8B5CF6"
},
{
category: "Web3",
title: "Elon Musk's X to deploy scam kill switch by auto-locking first-time crypto mentioners",
time: "3 hours ago",
color: "#EC4899"
},
{
category: "Markets",
title: "Metaplanet acquires 5,075 BTC, jumps to third largest bitcoin treasury company",
time: "4 hours ago",
color: "#F59E0B"
}
];
function renderLiveFeed() {
const feed = document.getElementById('liveFeed');
feed.innerHTML = '';
newsItems.forEach((item, index) => {
const div = document.createElement('div');
div.className = 'live-item';
div.innerHTML = `
<span class="live-category" style="background: ${item.color}20; color: ${item.color}">
${item.category}
</span>
<div class="live-title-text">${item.title}</div>
<div class="live-time-ago">${item.time}</div>
`;
feed.appendChild(div);
});
}
// Simulate new updates every 25 seconds
function simulateLiveUpdate() {
const newUpdate = {
category: "Breaking",
title: "Solana experiences brief outage — network recovers within minutes",
time: "Just now",
color: "#22C55E"
};
newsItems.unshift(newUpdate); // Add at top
if (newsItems.length > 8) newsItems.pop(); // Keep only 8 items
renderLiveFeed();
// Update timestamp
document.getElementById('lastUpdated').textContent = 'Just now';
setTimeout(() => {
document.getElementById('lastUpdated').textContent = '1 minute ago';
}, 8000);
}
// Toggle gadget visibility
function toggleGadget() {
const gadget = document.getElementById('liveGadget');
const btn = document.querySelector('.toggle-btn');
if (gadget.style.display === 'none') {
gadget.style.display = 'block';
btn.textContent = 'Hide Live Feed';
} else {
gadget.style.display = 'none';
btn.textContent = 'Show Live Feed';
}
}
// Initialize
window.onload = function() {
renderLiveFeed();
// Start live simulation
setInterval(simulateLiveUpdate, 25000);
// Initial fake update after 12 seconds
setTimeout(() => {
simulateLiveUpdate();
}, 12000);
console.log('%cLive Crypto Update Gadget Ready 🚀', 'color:#00D4FF; font-weight:600');
};
</script>
</body>
</html>
0 $type={blogger}:
Post a Comment