<!doctype html>
Business Today Live News Ticker
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: #0f172a;
color: #e2e8f0;
padding: 20px;
min-height: 100vh;
}
.ticker-container {
max-width: 1200px;
margin: 0 auto;
background: #1e2937;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid #334155;
}
.header {
background: linear-gradient(90deg, #ef4444, #f97316);
padding: 12px 20px;
display: flex;
align-items: center;
gap: 15px;
color: white;
}
.logo {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
}
.live-badge {
background: #ef4444;
color: white;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 6px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.ticker-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #1e2937;
border-bottom: 1px solid #334155;
}
.ticker-title {
font-size: 18px;
font-weight: 600;
color: #f8fafc;
}
.controls {
display: flex;
gap: 10px;
}
button {
background: #334155;
color: #e2e8f0;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background: #475569;
}
.ticker-wrapper {
overflow: hidden;
height: 52px;
position: relative;
background: #0f172a;
}
.ticker {
display: flex;
align-items: center;
height: 100%;
white-space: nowrap;
animation: ticker-slide 40s linear infinite;
gap: 60px;
}
.ticker:hover {
animation-play-state: paused;
}
.ticker-item {
display: flex;
align-items: center;
gap: 12px;
color: #cbd5e1;
font-size: 15px;
padding: 0 10px;
}
.ticker-item a {
color: #60a5fa;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.ticker-item a:hover {
color: #93c5fd;
text-decoration: underline;
}
.category {
background: #334155;
color: #94a3b8;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.time {
color: #64748b;
font-size: 13px;
margin-left: 8px;
}
.footer {
padding: 12px 20px;
background: #1e2937;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #64748b;
border-top: 1px solid #334155;
}
.refresh-btn {
display: flex;
align-items: center;
gap: 6px;
}
@keyframes ticker-slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Pause animation when hovered */
.ticker-wrapper:hover .ticker {
animation-play-state: paused;
}
/* Responsive */
@media (max-width: 768px) {
.ticker {
animation-duration: 30s;
}
.ticker-item {
font-size: 14px;
gap: 8px;
}
}
</style>
<div class="ticker-container">
<!-- Header -->
<div class="header">
<div class="logo">BUSINESS TODAY</div>
<div class="live-badge">
<span style="display: inline-block; width: 8px; height: 8px; background: white; border-radius: 50%;"></span>
LIVE NEWS TICKER
</div>
</div>
<!-- Ticker Header -->
<div class="ticker-header">
<div class="ticker-title">Latest Headlines from Business Today</div>
<div class="controls">
<button id="pauseBtn">⏸ Pause</button>
<button id="playBtn" style="display: none;">▶ Play</button>
<button id="refreshBtn" class="refresh-btn">⟳ Refresh</button>
</div>
</div>
<!-- Ticker -->
<div class="ticker-wrapper">
<div class="ticker" id="ticker">
<!-- Items will be populated by JavaScript -->
</div>
</div>
<!-- Footer -->
<div class="footer">
<div>Data from <a href="https://www.businesstoday.in/news" target="_blank" style="color: #60a5fa;">BusinessToday.in</a> • Real-time simulation</div>
<div id="lastUpdated">Last updated: Just now</div>
</div>
</div>
<script>
// Sample news data (as of April 2026) - replace with actual fetch in production
let newsItems = [
{
title: "GRSE, IndiGo, Bharti Hexacom: How to trade these 3 buzzing stocks",
url: "https://www.businesstoday.in/markets/stocks/story/grse-indigo-bharti-hexacom-how-to-trade-these-3-buzzing-stocks-523641-2026-04-02",
category: "Markets",
time: "Apr 2"
},
{
title: "LPG, CNG, PNG prices on April 2: Check latest rates in major cities",
url: "https://www.businesstoday.in/india/story/lpg-cng-png-prices-on-april-2-check-latest-rates-in-delhi-mumbai-other-major-cities-523638-2026-04-02",
category: "India",
time: "Apr 2"
},
{
title: "Powerica, Sai Parenteral's, Amir Chand: 3 IPO listings today; check GMPs",
url: "https://www.businesstoday.in/markets/ipo-corner/story/powerica-sai-parenterals-amir-chand-3-ipo-listings-today-check-latest-gmps-523640-2026-04-02",
category: "Markets",
time: "Apr 2"
},
{
title: "GRSE shares jumped 20%; will momentum continue in this defence PSU?",
url: "https://www.businesstoday.in/markets/stocks/story/grse-shares-jumped-20-will-momentum-continue-in-this-defence-psu-523639-2026-04-02",
category: "Markets",
time: "Apr 2"
},
{
title: "FMCG stock up over 92% in a year; Geojit sees 25% upside potential",
url: "https://www.businesstoday.in/markets/stocks/story/fmcg-stock-up-over-92-in-a-year-geojit-sees-25-upside-potential-in-3-6-months-check-target-price-523637-2026-04-02",
category: "Markets",
time: "Apr 2"
},
{
title: "Coforge, LTIMindtree, TechM, Mphasis: Top IT stocks to buy",
url: "https://www.businesstoday.in/markets/stocks/story/coforge-ltimindtree-techm-mphasis-persistent-infosys-and-tcs-top-it-stocks-to-buy-523636-2026-04-02",
category: "Markets",
time: "Apr 2"
},
{
title: "Nifty, Sensex outlook for today: Gift Nifty down 350 pts",
url: "https://www.businesstoday.in/markets/story/nifty-sensex-nifty-bank-outlook-for-today-gift-nifty-down-350-pts-key-levels-to-watch-523635-2026-04-02",
category: "Markets",
time: "Apr 2"
},
{
title: "Varun Beverages final dividend: Stock in focus today",
url: "https://www.businesstoday.in/markets/stocks/story/varun-beverages-final-dividend-stock-in-focus-today-as-board-declares-record-date-523634-2026-04-02",
category: "Markets",
time: "Apr 2"
},
{
title: "PAN correction rules change from April 1: New forms explained",
url: "https://www.businesstoday.in/personal-finance/tax/story/pan-correction-rules-change-from-april-1-new-forms-aadhaar-process-explained-523624-2026-04-02",
category: "Finance",
time: "Apr 2"
},
{
title: "Petrol, diesel prices today, April 2: Check prices in major cities",
url: "https://www.businesstoday.in/india/story/petrol-diesel-prices-today-april-2-check-prices-in-top-metro-cities-delhi-mumbai-bengaluru-523632-2026-04-02",
category: "India",
time: "Apr 2"
}
];
// Duplicate the array to create seamless infinite scroll
function createTickerHTML(items) {
const tickerEl = document.getElementById('ticker');
tickerEl.innerHTML = '';
// Create two copies for seamless looping
const allItems = [...items, ...items];
allItems.forEach(item => {
const div = document.createElement('div');
div.className = 'ticker-item';
div.innerHTML = `
<span class="category">${item.category}</span>
<a href="${item.url}" target="_blank" rel="noopener noreferrer">${item.title}</a>
<span class="time">${item.time}</span>
`;
tickerEl.appendChild(div);
});
}
// Initialize ticker
function initTicker() {
createTickerHTML(newsItems);
// Update "last updated" time
function updateTime() {
const now = new Date();
const timeStr = now.toLocaleTimeString('en-IN', {
hour: '2-digit',
minute: '2-digit'
});
document.getElementById('lastUpdated').textContent = `Last updated: ${timeStr}`;
}
updateTime();
setInterval(updateTime, 60000); // Update every minute
}
// Controls
let isPaused = false;
const tickerEl = document.getElementById('ticker');
const pauseBtn = document.getElementById('pauseBtn');
const playBtn = document.getElementById('playBtn');
pauseBtn.addEventListener('click', () => {
tickerEl.style.animationPlayState = 'paused';
pauseBtn.style.display = 'none';
playBtn.style.display = 'block';
isPaused = true;
});
playBtn.addEventListener('click', () => {
tickerEl.style.animationPlayState = 'running';
playBtn.style.display = 'none';
pauseBtn.style.display = 'block';
isPaused = false;
});
// Refresh button (simulated)
document.getElementById('refreshBtn').addEventListener('click', () => {
const refreshBtn = document.getElementById('refreshBtn');
const originalText = refreshBtn.innerHTML;
refreshBtn.innerHTML = '⟳ Updating...';
refreshBtn.disabled = true;
setTimeout(() => {
// In a real implementation, you would fetch new data here
createTickerHTML(newsItems);
refreshBtn.innerHTML = originalText;
refreshBtn.disabled = false;
const notification = document.createElement('div');
notification.style.position = 'fixed';
notification.style.bottom = '20px';
notification.style.left = '50%';
notification.style.transform = 'translateX(-50%)';
notification.style.background = '#22c55e';
notification.style.color = 'white';
notification.style.padding = '10px 20px';
notification.style.borderRadius = '8px';
notification.style.fontSize = '14px';
notification.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
notification.textContent = '✅ Ticker refreshed with latest headlines';
document.body.appendChild(notification);
setTimeout(() => {
notification.style.transition = 'opacity 0.5s';
notification.style.opacity = '0';
setTimeout(() => notification.remove(), 500);
}, 2000);
}, 800);
});
// Keyboard shortcut (Space to pause/play)
document.addEventListener('keydown', (e) => {
if (e.key === ' ' && document.activeElement.tagName !== "INPUT" && document.activeElement.tagName !== "TEXTAREA") {
e.preventDefault();
if (isPaused) {
playBtn.click();
} else {
pauseBtn.click();
}
}
});
// Auto-refresh simulation every 5 minutes (in real app, use actual API polling)
setInterval(() => {
if (!isPaused) {
// Simulate new item occasionally
if (Math.random() > 0.7) {
const newItem = {...newsItems[0]};
newItem.title = "🆕 " + newItem.title;
newsItems.unshift(newItem);
if (newsItems.length > 12) newsItems.pop();
createTickerHTML(newsItems);
}
}
}, 300000);
// Initialize on load
window.onload = initTicker;
</script>
</!doctype>
0 $type={blogger}:
Post a Comment