georges/MSPE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix icon hover colors, text alignment, and UI improvements

Browse Source
This commit is contained in:
Krikorios
2026-02-25 23:25:59 +02:00
parent 00fda3e045
commit fcc4352afa
46 changed files with 4011 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
news.html
+39 -12
View File
@@ -10,19 +10,19 @@
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet"></noscript>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"></noscript>
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha384-t1nt8BQoYMLFN5p42tRAtuAAFQaCQODekUVeKKZrEnEyp4H2R0RHFz0KWpmj7i8g" crossorigin="anonymous"></noscript>
<!-- Styles -->
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/pages.css">
<link rel="stylesheet" href="css/ultimate-ui.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="css/ultimate-ui.css"></noscript>
<link rel="stylesheet" href="css/header-fix.css">
<link rel="canonical" href="https://mspe.pro/news.html">
<!-- Open Graph -->
<meta property="og:type" content="website">
@@ -38,10 +38,17 @@
<meta name="twitter:description" content="Perspectives on cybersecurity, cloud innovation, and digital transformation.">
<meta name="twitter:image" content="https://mspe.pro/images/logo/logo.png">
</head>
<body>
<body class="has-promo">
<!-- Skip to Content (Accessibility) -->
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<!-- Promo Announcement Bar -->
<div class="promo-bar" id="promo-bar">
<span class="promo-icon"><i class="fas fa-shield-alt"></i></span>
<span>🔒 <strong>Free Infrastructure Audit</strong> — Limited availability. <a href="calendar.html">Book your spot →</a></span>
<button class="promo-close" aria-label="Close promotion"><i class="fas fa-times"></i></button>
</div>
<!-- Preloader -->
<div class="preloader">
<div class="preloader-inner">
@@ -258,6 +265,13 @@
<span>Beirut, Lebanon</span>
</li>
</ul>
<div class="footer-newsletter">
<p>Get expert insights delivered to your inbox</p>
<form class="newsletter-form" id="footer-newsletter-form">
<input type="email" placeholder="Your email address" required aria-label="Email for newsletter">
<button type="submit" class="btn-newsletter">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
@@ -278,6 +292,11 @@
<i class="fas fa-chevron-up"></i>
</button>
<!-- Mobile Sticky CTA -->
<div class="mobile-sticky-cta">
<a href="calendar.html" class="btn btn-primary"><i class="fas fa-calendar-check"></i> Book Free Consultation</a>
</div>
<!-- Scripts -->
<script src="js/main.js" defer></script>
<script src="js/ultimate-ui.js" defer></script>
@@ -296,24 +315,32 @@
document.getElementById('news-section').style.display = 'block';
const grid = document.getElementById('news-grid');
grid.innerHTML = result.data.map(item => `
grid.innerHTML = result.data.map(item => {
const safeImage = escapeAttr(item.featured_image || 'images/logo/logo.png');
const safeTitle = escapeHTML(item.title || 'News');
const safeCategory = escapeHTML(item.category || 'news');
const safeId = escapeAttr(item.id || '');
const safeExcerpt = escapeHTML(item.excerpt || ((item.content || '').substring(0, 100) + '...'));
const safeDate = escapeHTML(new Date(item.created_at).toLocaleDateString());
return `
<div class="news-card" style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.3s ease;">
<div class="news-image" style="height: 200px; overflow: hidden;">
<img src="${item.featured_image || 'images/logo/logo.png'}" alt="${item.title}" width="800" height="450" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: cover;">
<img src="${safeImage}" alt="${safeTitle}" width="800" height="450" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="news-content" style="padding: 1.5rem;">
<div class="news-meta" style="font-size: 0.875rem; color: #64748b; margin-bottom: 0.5rem;">
<span class="news-category" style="color: var(--primary); font-weight: 600; text-transform: uppercase;">${item.category}</span>
<span class="news-date"> • ${new Date(item.created_at).toLocaleDateString()}</span>
<span class="news-category" style="color: var(--primary); font-weight: 600; text-transform: uppercase;">${safeCategory}</span>
<span class="news-date"> • ${safeDate}</span>
</div>
<h3 class="news-title" style="font-size: 1.25rem; margin-bottom: 0.75rem; color: #0f172a;">${item.title}</h3>
<h3 class="news-title" style="font-size: 1.25rem; margin-bottom: 0.75rem; color: #0f172a;">${safeTitle}</h3>
<p class="news-excerpt" style="color: #475569; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem;">
${item.excerpt || item.content.substring(0, 100) + '...'}
${safeExcerpt}
</p>
<a href="news.html?id=${item.id}" class="btn-link" style="color: var(--primary); font-weight: 600; text-decoration: none;">Read More <i class="fas fa-arrow-right"></i></a>
<a href="news.html?id=${safeId}" class="btn-link" style="color: var(--primary); font-weight: 600; text-decoration: none;">Read More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
`).join('');
`;
}).join('');
}
} catch (error) {
console.error('Failed to load news:', error);