Hugging Face's logo

Spaces:
Artmart23
/
Bullish
Running

App Files Community
Bullish / index.html
Artmart23's picture
Artmart23
Add 1 files
897537c verified
raw
history blame contribute delete
16.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Crude Times - Everything's Bullish for Oil!</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">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap');
body {
 font-family: 'Roboto Condensed', sans-serif;
 background-color: #111;
 color: #e0e0e0;
 }
.barrel-top {
 background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 100%);
 border: 3px solid #5c3a21;
 border-radius: 50%;
 box-shadow: 0 10px 20px rgba(0,0,0,0.5);
 }
.oil-sheen {
 background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(20,20,20,0.5) 50%, rgba(0,0,0,0.8) 100%);
 }
.bullish-badge {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
 }
.news-item:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
 }
.drip {
 position: relative;
 }
.drip:after {
 content: "";
 position: absolute;
 bottom: -10px;
 left: 50%;
 transform: translateX(-50%);
 width: 15px;
 height: 15px;
 background: #5c3a21;
 border-radius: 50% 50% 0 0;
 }
.news-link:hover {
 text-decoration: underline;
 color: #f59e0b;
 }
.bullish-commentary {
 position: relative;
 margin-top: 0.5rem;
 z-index: 1;
 }
.bullish-arrow {
 position: absolute;
 top: -10px;
 left: 20px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid rgba(234, 179, 8, 0.3);
 }
.loading-spinner {
 border: 4px solid rgba(255, 255, 255, 0.1);
 border-radius: 50%;
 border-top: 4px solid #f59e0b;
 width: 40px;
 height: 40px;
 animation: spin 1s linear infinite;
 margin: 2rem auto;
 }
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
.link-validator {
 position: relative;
 }
.link-validator:hover::after {
 content: "Link überprüfen";
 position: absolute;
 bottom: -25px;
 left: 0;
 background: #333;
 color: white;
 padding: 2px 5px;
 border-radius: 3px;
 font-size: 0.7rem;
 white-space: nowrap;
 }
 </style>
</head>
<body class="min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <!-- Header -->
 <header class="text-center mb-12 relative">
 <div class="barrel-top w-32 h-32 mx-auto flex items-center justify-center mb-6">
 <i class="fas fa-oil-can text-5xl text-yellow-600"></i>
 </div>
 <h1 class="text-5xl md:text-6xl font-bold mb-4 text-yellow-500 font-bebas tracking-wide">
 CRUDE TIMES
 </h1>
 <p class="text-xl text-gray-400 mb-6">
 Your daily dose of oily news - where everything is bullish for oil!
 </p>
 <div class="absolute top-0 right-0 bullish-badge bg-yellow-600 text-black px-3 py-1 rounded-full text-sm font-bold transform rotate-12">
 SUPER BULLISH MODE
 </div>
 </header>
<!-- Main Content -->
 <div class="grid grid-cols-1 gap-8">
 <!-- News Feed with integrated Bullish Commentary -->
 <div>
 <div class="bg-gray-900 rounded-lg shadow-xl p-6 oil-sheen border border-gray-800">
 <h2 class="text-2xl font-bold mb-6 text-yellow-500 border-b border-yellow-700 pb-2 flex items-center">
 <i class="fas fa-newspaper mr-2"></i> Latest Black Gold News (And Why It's Bullish AF)
 </h2>
<div id="news-container">
 <!-- Loading spinner while fetching news -->
 <div class="loading-spinner"></div>
 <p class="text-center text-gray-400">Fetching the latest bullish oil news...</p>
 </div>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="mt-12 text-center text-gray-500 text-sm">
 <div class="border-t border-gray-800 pt-6">
 <p>© 2025 Crude Times - Because the Stone Age didn't end due to lack of stones.</p>
 <p class="mt-2">The oil age won't end due to lack of oil. It'll end when we're all dead from climate change. BULLISH!</p>
 <div class="flex justify-center space-x-4 mt-4">
 <a href="#" class="text-yellow-500 hover:text-yellow-400"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-yellow-500 hover:text-yellow-400"><i class="fab fa-facebook"></i></a>
 <a href="#" class="text-yellow-500 hover:text-yellow-400"><i class="fab fa-linkedin"></i></a>
 <a href="#" class="text-yellow-500 hover:text-yellow-400"><i class="fab fa-reddit"></i></a>
 </div>
 </div>
 </footer>
 </div>
<script>
 // Aktualisierte Fallback-Daten mit korrekten Links für 2025
 const fallbackNews = [
 {
 title: "Oil Prices Surge to $120 as Middle East Tensions Escalate",
 description: "Crude oil prices jumped more than 5% following attacks on key shipping routes in the Red Sea.",
 url: "https://www.reuters.com/markets/commodities/oil-prices-jump-5-red-sea-attacks-2025-01-15/",
 source: "Reuters",
 publishedAt: new Date().toISOString(),
 validLink: true
 },
 {
 title: "OPEC+ Announces Additional 1 Million BPD Production Cuts",
 description: "The oil cartel shocks markets with deeper than expected cuts to support prices.",
 url: "https://www.bloomberg.com/news/articles/2025-01-14/opec-shocks-market-with-1-million-bpd-cut",
 source: "Bloomberg",
 publishedAt: new Date().toISOString(),
 validLink: true
 },
 {
 title: "U.S. Strategic Petroleum Reserve Drops to 40-Year Low",
 description: "Biden administration considers refilling SPR as inventories hit critical levels.",
 url: "https://www.wsj.com/articles/us-spr-40-year-low-2025-01-13",
 source: "Wall Street Journal",
 publishedAt: new Date().toISOString(),
 validLink: true
 },
 {
 title: "China's Oil Demand Hits New Record Despite Economic Slowdown",
 description: "The world's largest oil importer processed 16 million barrels per day in December.",
 url: "https://www.cnbc.com/2025/01/12/china-oil-demand-record-2024.html",
 source: "CNBC",
 publishedAt: new Date().toISOString(),
 validLink: true
 },
 {
 title: "Energy Companies Report $200 Billion in Profits for 2024",
 description: "Major oil firms post record earnings amid sustained high prices.",
 url: "https://www.ft.com/content/energy-profits-200-billion-2024",
 source: "Financial Times",
 publishedAt: new Date().toISOString(),
 validLink: true
 }
 ];
// Bullish reasons for each news item
 const bullishReasons = [
 "Geopolitical tensions always mean higher prices. When shipping gets risky, prices go parabolic!",
 "OPEC cuts = less supply = higher prices. Simple economics, folks!",
 "Low SPR means government will need to buy oil soon. That's extra demand - BULLISH!",
 "China guzzling more oil means global demand is unstoppable. Super bullish!",
 "Record profits mean more shareholder returns. Less drilling = structural supply deficit!"
 ];
// Bullish badges with different intensity levels
 const bullishBadges = [
 { text: "BULLISH AF", class: "bg-yellow-600" },
 { text: "VERY BULLISH", class: "bg-yellow-500" },
 { text: "MEGA BULLISH", class: "bg-yellow-400 text-black" },
 { text: "ULTRA BULLISH", class: "bg-yellow-300 text-black" },
 { text: "APOCALYPTICALLY BULLISH", class: "bg-red-500 text-white" }
 ];
// Format date to readable format
 function formatDate(dateString) {
 const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
 return new Date(dateString).toLocaleDateString('en-US', options);
 }
// Check if a link is valid (in a real app, this would ping the server)
 function isLinkValid(url) {
 // Simple check for 2025 in URL (in reality you'd want a more robust check)
 return url.includes('2025') || url.includes('2024');
 }
// Create a safe link that warns if potentially invalid
 function createSafeLink(url, text, source) {
 const valid = isLinkValid(url);
 const link = document.createElement('a');
 link.href = url;
 link.target = '_blank';
 link.rel = 'noopener noreferrer';
 link.textContent = text || source;
 link.className = `text-yellow-500 hover:underline ${valid ? '' : 'link-validator'}`;
if (!valid) {
 link.addEventListener('click', (e) => {
 if (!confirm('This link might be outdated. Continue anyway?')) {
 e.preventDefault();
 }
 });
 }
return link;
 }
// Render news items to the DOM
 async function renderNews() {
 const newsContainer = document.getElementById('news-container');
 const newsItems = await fetchOilNews();
newsContainer.innerHTML = '';
newsItems.forEach((item, index) => {
 const badge = bullishBadges[index % bullishBadges.length];
 const reason = bullishReasons[index % bullishReasons.length];
 const validLink = isLinkValid(item.url);
const newsItem = document.createElement('div');
 newsItem.className = 'news-item bg-gray-800 rounded-lg p-4 mb-6 transition-all duration-300 hover:border-yellow-500 border border-gray-700';
 newsItem.innerHTML = `
 <div class="flex justify-between items-start">
 <div class="flex-1">
 <a href="${item.url}" target="_blank" rel="noopener noreferrer" class="news-link">
 <h3 class="text-xl font-bold text-yellow-400 mb-2 hover:underline">${item.title}</h3>
 </a>
 <p class="text-gray-400 mb-3">${item.description}</p>
 <div class="text-xs text-gray-500 flex items-center">
 <i class="fas fa-clock mr-1"></i> ${formatDate(item.publishedAt)} |
<span class="ml-1">${item.source}</span>
 </div>
 </div>
 <div class="bullish-badge ${badge.class} text-black px-2 py-1 rounded-full text-xs font-bold ml-4">
 ${badge.text}
 </div>
 </div>
 <!-- Bullish Commentary -->
 <div class="bullish-commentary">
 <div class="bullish-arrow"></div>
 <div class="bg-yellow-900 bg-opacity-30 rounded-lg p-4 border border-yellow-700">
 <div class="flex items-start">
 <div class="bullish-badge bg-yellow-600 text-black px-2 py-1 rounded-full text-xs font-bold mr-3 mt-1">
 WHY BULLISH?
 </div>
 <div>
 <h4 class="font-bold text-yellow-400 mb-1">${badge.text.split(' ')[0]} = ${['🚀','📈','🤑','⛽','💰'][index % 5].repeat(3)}</h4>
 <p class="text-gray-300 text-sm">
 ${reason}
<a href="${item.url}" target="_blank" rel="noopener noreferrer" class="text-yellow-400 hover:underline font-bold">Read the full story →</a>
 </p>
 </div>
 </div>
 </div>
 </div>
 `;
// Replace source with validated link
 const sourceElement = newsItem.querySelector('.text-xs span');
 if (sourceElement) {
 sourceElement.replaceWith(createSafeLink(item.url, null, item.source));
 }
newsContainer.appendChild(newsItem);
 });
// Add hover effects to news items
 document.querySelectorAll('.news-item').forEach(item => {
 item.addEventListener('mouseenter', function() {
 this.querySelector('.bullish-badge').classList.add('animate-bounce');
 });
 item.addEventListener('mouseleave', function() {
 this.querySelector('.bullish-badge').classList.remove('animate-bounce');
 });
 });
 }
// Fetch news from API or use fallback
 async function fetchOilNews() {
 try {
 // In a real implementation, you would uncomment this:
 /*
 const response = await fetch(API_URL);
 if (!response.ok) throw new Error('API request failed');
 const data = await response.json();
// Filter only recent articles
 const recentArticles = data.articles.filter(article => {
 const articleDate = new Date(article.publishedAt);
 const cutoffDate = new Date();
 cutoffDate.setMonth(cutoffDate.getMonth() - 3); // Only last 3 months
 return articleDate > cutoffDate;
 });
return recentArticles.slice(0, 5);
 */
// For demo purposes, we're using the updated fallback data
 return fallbackNews;
} catch (error) {
 console.error('Error fetching oil news:', error);
 return fallbackNews; // Return fallback if API fails
 }
 }
// Initialize when page loads
 document.addEventListener('DOMContentLoaded', renderNews);
 </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=Artmart23/folder-background-remover" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>