OK
https://2stv.net/
Websites
Runtime: 1.6s
On April 26, 2025, 08:17 PM UTC, https://2stv.net/ was accessible when tested on AS8346 in Senegal.
Failures
HTTP Experiment
null
DNS Experiment
null
Control
null
DNS Queries
Resolver:
213.154.64.74
Query:
IN A 2stv.net
Engine:
system
Name
Class
TTL
Type
DATA
@
IN
A
128.65.195.33
Query:
IN AAAA 2stv.net
Engine:
system
Name
Class
TTL
Type
DATA
@
IN
AAAA
2001:1600:4:b:46a8:42ff:fe27:d17c
TCP Connections
Connection to 2001:1600:4:b:46a8:42ff:fe27:d17c:443 was blocked.
Connection to 128.65.195.33:443 succeeded.
HTTP Requests
URL
GET https://2stv.net/
Response Headers
Cache-Control:no-cache, privateContent-Type:text/html; charset=UTF-8Date:Sat, 26 Apr 2025 20:17:12 GMTServer:ApacheSet-Cookie:XSRF-TOKEN=eyJpdiI6IlVJRjlxTTI3c3ZBUGtGZWs0RHNDWkE9PSIsInZhbHVlIjoiKyt5a2RKU0RiV2dLQmVVUTJyS25WMmI2Z0c0bUd6dlRudjRoZFFhMVlGVzNXT1JSa3hmMUZBbkNPTGxxUTk5RDZ1UzdoWXdWUW5CTG9WUFJWaUR6VzVBdUcwL0h6SHk3OFBIZTdTaFc3V3kydUxyWmh6d3hQeTdaRmc3Ky84QWMiLCJtYWMiOiIzMTNmYjk0MjI0NTg3MTA5MzgyNWUzYzRkMjY0MmQwMGQ3YzNhYzU2NjIzYzMzYTc0NmM1OWMzMTUwMzA5MTJmIiwidGFnIjoiIn0%3D; expires=Sat, 26 Apr 2025 22:17:12 GMT; Max-Age=7200; path=/; secure; samesite=laxStrict-Transport-Security:max-age=16000000Vary:Accept-Encoding
Response Body
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=5.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="2STV Sénégal">
<meta name="application-name" content="2STV Sénégal">
<meta name="msapplication-TileColor" content="#FF4500">
<meta name="msapplication-config" content="https://2stv.net/browserconfig.xml">
<meta name="google-site-verification" content="4PP4FvAOOBBuRYfm9wrrdrh0nmkiKzkPeLNQfRH-cWk" />
<!-- FAVICONS -->
<link rel="apple-touch-icon" sizes="180x180" href="https://2stv.net/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://2stv.net/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://2stv.net/favicon-16x16.png">
<link rel="manifest" href="https://2stv.net/site.webmanifest">
<link rel="mask-icon" href="https://2stv.net/safari-pinned-tab.svg" color="#FF4500">
<!-- TITLE / DESCRIPTION / KEYWORDS -->
<title>2STV Sénégal | La télévsision autrement</title>
<meta name="description" content="2STV, première chaîne privée du Sénégal, vous propose une programmation riche et variée : actualités, émissions culturelles, divertissements et séries. Direct et replay disponibles 24h/24.">
<meta name="keywords" content="2stv sénégal, télévision sénégalaise, ...">
<meta name="author" content="2STV Sénégal">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://2stv.net">
<!-- OPEN GRAPH (FALLBACK) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://2stv.net">
<meta property="og:title" content="2STV Sénégal | La télévsision autrement">
<meta property="og:description" content="2STV, première chaîne privée du Sénégal, vous propose une programmation riche et variée : actualités, émissions culturelles, divertissements et séries. Direct et replay disponibles 24h/24.">
<meta property="og:image" content="https://2stv.net/assets/img/2stv-share.jpg">
<meta property="og:locale" content="fr_FR">
<meta property="og:site_name" content="2STV Sénégal">
<!-- TWITTER (FALLBACK) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@2stvsenegal">
<meta name="twitter:title" content="2STV Sénégal | La télévsision autrement">
<meta name="twitter:description" content="2STV, première chaîne privée du Sénégal, vous propose une programmation riche et variée : actualités, émissions culturelles, divertissements et séries. Direct et replay disponibles 24h/24.">
<meta name="twitter:image" content="https://2stv.net/assets/img/2stv-share.jpg">
<!-- SCHEMA.ORG (ORGANIZATION) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "2STV Sénégal",
"url": "https://2stv.net",
"logo": {
"@type": "ImageObject",
"url": "https://2stv.net/assets/img/logo.png",
"width": "512",
"height": "512"
},
"sameAs": [
"https://www.facebook.com/2stvsenegal",
"https://twitter.com/2stvsenegal",
"https://www.instagram.com/2stv_senegal",
"https://www.youtube.com/@2stvsenegal"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+221-XX-XXX-XXXX",
"contactType": "customer service",
"availableLanguage": ["French", "Wolof"],
"areaServed": "SN",
"hoursAvailable": "Mo-Su 00:00-24:00"
},
"address": {
"@type": "PostalAddress",
"addressCountry": "SN",
"addressLocality": "Dakar"
},
...{"@type":"Organization"}
}
</script>
<!-- BREADCRUMBS (optionnel) -->
<!-- Autres meta tags -->
<meta name="theme-color" content="#FF4500">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- PRÉCHARGEMENT FONTS / LOGO -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://2stv.net/assets/img/logo.png" as="image">
<!-- TAILWIND / STYLES GLOBAUX -->
<link rel="icon" href="https://2stv.net/assets/img/favicon.ico" type="image/x-icon">
<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=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
<link rel="preload" as="style" href="https://2stv.net/build/assets/app-BzKtcMs8.css" /><link rel="modulepreload" href="https://2stv.net/build/assets/app-C1-XIpUa.js" /><link rel="stylesheet" href="https://2stv.net/build/assets/app-BzKtcMs8.css" data-navigate-track="reload" /><script type="module" src="https://2stv.net/build/assets/app-C1-XIpUa.js" data-navigate-track="reload"></script><link href="https://vjs.zencdn.net/8.18.0/video-js.css" rel="stylesheet">
<link href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- VOS STYLES OU LIBRAIRIES -->
<link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
<link href="https://unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.img-loading {
background-color: #f3f4f6;
transition: background-color 0.3s ease;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
/* Styles pour la vidéo de fond */
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.9;
}
/* Optimisation mobile pour petite vidéo (560x540) */
@media (max-width: 768px) {
.background-video {
opacity: 0.7; /* Plus opaque sur mobile */
object-position: center center; /* Centrer la vidéo */
}
/* Ajuster la hauteur du conteneur sur mobile pour éviter les étirements excessifs */
.hero-container {
max-height: 85vh;
}
/* Améliorer la lisibilité du contenu sur les petits écrans */
.hero-content {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
}
/* Styles pour améliorer la qualité perçue de la vidéo de basse résolution */
.video-quality-boost {
filter: brightness(1.05) contrast(1.05);
}
/* Fallback pour les navigateurs qui ne prennent pas en charge la lecture vidéo */
.video-fallback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.9;
z-index: -1;
}
</style>
<!-- SECTIONS POUR LES META SPÉCIFIQUES (vidéo, etc.) -->
<script type="text/javascript" class="flasher-js" nonce='fbd6eaf12d00b1e4a86d563fdd934ca7'>
(function(window, document) {
const merge = (first, second) => {
if (Array.isArray(first) && Array.isArray(second)) {
return [...first, ...second.filter(item => !first.includes(item))];
}
if (typeof first === 'object' && typeof second === 'object') {
for (const [key, value] of Object.entries(second)) {
first[key] = key in first ? { ...first[key], ...value } : value;
}
return first;
}
return undefined;
};
const mergeOptions = (...options) => {
const result = {};
options.forEach(option => {
Object.entries(option).forEach(([key, value]) => {
result[key] = key in result ? merge(result[key], value) : value;
});
});
return result;
};
const renderCallback = (options) => {
if(!window.flasher) {
throw new Error('Flasher is not loaded');
}
window.flasher.render(options);
};
const render = (options) => {
if (options instanceof Event) {
options = options.detail;
}
if (['interactive', 'complete'].includes(document.readyState)) {
renderCallback(options);
} else {
document.addEventListener('DOMContentLoaded', () => renderCallback(options));
}
};
const addScriptAndRender = (options) => {
const mainScript = '/vendor/flasher/flasher.min.js?id=f710e711ba04506eb4d82fa27cd5ec3d';
if (window.flasher || !mainScript || document.querySelector('script[src="' + mainScript + '"]')) {
render(options);
} else {
const tag = document.createElement('script');
tag.src = mainScript;
tag.type = 'text/javascript';
tag.setAttribute('nonce', 'fbd6eaf12d00b1e4a86d563fdd934ca7');
tag.onload = () => render(options);
document.head.appendChild(tag);
}
};
const addRenderListener = () => {
if (1 === document.querySelectorAll('script.flasher-js').length) {
document.addEventListener('flasher:render', render);
}
document.addEventListener('livewire:navigating', () => {
document.querySelectorAll('.fl-no-cache').forEach(el => el.remove());
});
};
const options = [];
options.push({"envelopes":[],"scripts":[],"styles":[],"options":[],"context":{"envelopes_only":false,"csp_script_nonce":"fbd6eaf12d00b1e4a86d563fdd934ca7","csp_style_nonce":"646859aa50325fc6e69a41bd37b05de5"}});
/** {--FLASHER_REPLACE_ME--} **/
addScriptAndRender(mergeOptions(...options));
addRenderListener();
})(window, document);
</script>
</head>
<body class="bg-white font-roboto h-screen">
<div lang="fr">
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 w-full" id="mainHeader">
<!-- Background avec effet de verre -->
<div class="absolute inset-0 backdrop-blur-sm bg-black/70 transition-all duration-300"></div>
<!-- Contenu du header -->
<div class="relative w-full">
<!-- Top Navigation -->
<div class="container mx-auto px-4 py-6 flex justify-between items-center">
<!-- Menu Button -->
<div class="flex items-center">
<button id="menuButton" class="text-white mr-4 hover:text-gray-300 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<div class="flex-1 flex justify-center items-center">
<h1 class="text-xl font-bold text-white truncate">
<a href="https://2stv.net" class="hidden md:inline">2STV SÉNÉGAL | LA TÉLÉVISION AUTREMENT</a>
<a href="https://2stv.net" class="md:hidden">2STV SÉNÉGAL</a>
</h1>
</div>
<!-- Buttons -->
<div class="flex items-start md:items-center justify-start gap-4">
<!-- REPLAY Button - Hidden on mobile -->
<button class="relative group hidden md:inline-block">
<a href="https://2stv.net/videos" class="flex items-center justify-center gap-2 px-4 py-1.5 text-white bg-transparent border-2 border-white rounded-full hover:bg-white/10 transition-colors">
<!-- Double arrow left icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="m11 17-5-5 5-5"></path>
<path d="m18 17-5-5 5-5"></path>
</svg>
<span class="font-bold text-sm">REPLAY</span>
</a>
</button>
<!-- RADIO Button -->
<div class="flex flex-col items-center md:flex-row md:gap-2">
<a href="https://2stv.net/en-direct/originesfm-radio" class="flex items-center justify-center text-white bg-transparent border-2 border-white rounded-full hover:bg-white/10 transition-colors md:gap-2 md:px-4 md:py-1.5 w-10 h-10 md:w-auto md:h-auto">
<!-- Headphones icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M3 14h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2z"></path>
<path d="M21 14h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2z"></path>
<path d="M12 2a7 7 0 0 1 7 7v5h-4v-5a3 3 0 0 0-6 0v5H5V9a7 7 0 0 1 7-7z"></path>
</svg>
<span class="hidden md:inline font-bold text-sm">RADIO</span>
</a>
<span class="text-white font-bold text-xs mt-1 md:hidden">RADIO</span>
</div>
<!-- DIRECT Button -->
<div class="flex flex-col items-center md:flex-row md:gap-2">
<a href="https://2stv.net/en-direct" class="flex items-center justify-center text-white bg-[#FF4500] border-2 border-[#FF4500] rounded-full hover:bg-[#FF5722] transition-colors md:gap-2 md:px-4 md:py-1.5 w-10 h-10 md:w-auto md:h-auto">
<!-- Monitor/TV icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<rect width="18" height="13" x="3" y="6" rx="2"></rect>
<path d="m16 2-4 4-4-4"></path>
<path d="M12 12v7"></path>
<path d="M8 19h8"></path>
</svg>
<span class="hidden md:inline font-bold text-sm">DIRECT</span>
</a>
<span class="text-white font-bold text-xs mt-1 md:hidden">DIRECT</span>
</div>
</div>
</div>
<hr class="border-t border-white/5">
<!-- Main Navigation -->
<nav class="container mx-auto mt-2 hidden sm:flex justify-center">
<div class="w-full">
</div>
</nav>
</div>
</header>
<!-- Spacer conditionnel -->
<div id="mobileMenu" class="fixed inset-y-0 left-0 w-3/4 max-w-xs bg-white z-50 p-5 hidden overflow-y-auto shadow-xl transform transition-transform duration-300 ease-in-out">
<button id="closeButton" class="text-gray-600 hover:text-orange-500 transition-colors duration-200 mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<!-- Boutons Direct TV, Radio et Réservation -->
<div class="flex flex-col gap-2 mb-6 mt-2">
<div class="flex gap-2">
<a href="https://2stv.net/en-direct"
class="flex-1 bg-red-600 text-white text-center py-2 px-4 rounded-lg text-sm font-semibold hover:bg-red-700 transition-colors duration-200 flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
Direct TV
</a>
<a href="https://2stv.net/en-direct/originesfm-radio"
class="flex-1 border-2 border-gray-300 text-gray-700 text-center py-2 px-4 rounded-lg text-sm font-semibold hover:border-orange-500 hover:text-orange-500 transition-colors duration-200 flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
</svg>
Radio
</a>
</div>
<a href="https://2stv.net/reservation-esplanade"
class="w-full bg-orange-100 text-orange-700 text-center py-2 px-4 rounded-lg text-sm font-semibold hover:bg-orange-200 transition-colors duration-200 flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
Réserver l'esplanade
</a>
</div>
<div class="mt-6">
<ul class="space-y-0.5">
<li>
<a href="https://2stv.net/videos"
class="flex items-center text-gray-600 hover:text-orange-500 group border-b border-gray-100 py-2.5 px-3 text-sm transition-all duration-200">
<span class="bg-orange-100 p-2 rounded-lg mr-3 group-hover:bg-orange-500 transition-colors duration-200">
<svg class="w-4 h-4 text-orange-500 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</span>
Vidéos
</a>
</li>
<li>
<a href="https://2stv.net/videos"
class="flex items-center text-gray-600 hover:text-orange-500 group border-b border-gray-100 py-2.5 px-3 text-sm transition-all duration-200">
<span class="bg-orange-100 p-2 rounded-lg mr-3 group-hover:bg-orange-500 transition-colors duration-200">
<svg class="w-4 h-4 text-orange-500 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</span>
Émissions
</a>
</li>
<!-- <li>
<a href="https://2stv.net/galerie-photos"
class="flex items-center text-gray-600 hover:text-orange-500 group border-b border-gray-100 py-2.5 px-3 text-sm transition-all duration-200">
<span class="bg-orange-100 p-2 rounded-lg mr-3 group-hover:bg-orange-500 transition-colors duration-200">
<svg class="w-4 h-4 text-orange-500 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</span>
Galerie Photos
</a>
</li> -->
<li>
<a href="https://2stv.net/contactez-nous"
class="flex items-center text-gray-600 hover:text-orange-500 group border-b border-gray-100 py-2.5 px-3 text-sm transition-all duration-200">
<span class="bg-orange-100 p-2 rounded-lg mr-3 group-hover:bg-orange-500 transition-colors duration-200">
<svg class="w-4 h-4 text-orange-500 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</span>
Contact
</a>
</li>
</ul>
</div>
</div>
<main class="max-w-7xl mx-auto px-4 py-6 mb-8">
<!-- Hero Section -->
<div class="bg-black text-white w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] -mt-20 md:-mt-24">
<div class="relative h-[100vh] overflow-hidden hero-container">
<!-- Background Video with Overlay -->
<div class="absolute inset-0">
<!-- Primary Video -->
<div class="absolute inset-0">
<video
src="https://2stv.net/assets/videos/background.mp4"
autoplay
loop
muted
playsinline
preload="auto"
class="background-video video-quality-boost"
poster="https://2stv.net/assets/img/image.jpg"
aria-label="Vidéo d'arrière-plan 2STV">
<!-- Fallback pour les navigateurs qui ne supportent pas la vidéo HTML5 -->
<img src="https://2stv.net/assets/img/image.jpg"
alt="2STV Arrière-plan"
class="video-fallback">
</video>
</div>
<!-- Overlay Gradients (renforcés pour petite vidéo) -->
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/40 to-transparent"></div>
<div class="absolute inset-0 bg-gradient-to-r from-black/40 via-transparent to-black/40"></div>
</div>
<!-- Content Container -->
<div class="relative h-full flex flex-col justify-end px-4 pb-12">
<!-- Bottom Content with Glass Effect -->
<div class="max-w-7xl mx-auto w-full space-y-8 md:space-y-12 bg-black/30 rounded-xl p-6 md:p-8 shadow-lg shadow-black/20 hero-content">
<!-- Program Info -->
<div class="space-y-4">
<div class="flex flex-col gap-2">
<h2 class="text-3xl md:text-5xl font-bold text-white drop-shadow-md">Face to Face </h2>
<p class="text-xl md:text-2xl text-white/90 font-light">Sa Thies Vs Zarco</p>
</div>
<div class="flex flex-wrap items-center gap-4 md:gap-6 text-sm md:text-base text-white/80">
<div class="flex items-center gap-2">
<i class="far fa-calendar"></i>
<span>26/04/2025</span>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-start gap-6 md:gap-12">
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row items-stretch gap-4 w-full md:w-auto">
<a href="https://2stv.net/en-direct"
class="group relative overflow-hidden rounded-xl bg-[#FF4500] px-8 py-4 flex-1 md:flex-none transition-transform hover:scale-105 shadow-lg shadow-black/20">
<div class="absolute inset-0 bg-gradient-to-r from-[#FF4500] to-[#FF5722] transition-transform group-hover:translate-x-full"></div>
<div class="relative flex items-center justify-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<circle cx="12" cy="12" r="10" stroke-width="2"/>
<path d="M10 8l6 4-6 4V8z" fill="currentColor"/>
</svg>
<span class="font-bold">Regarder maintenant</span>
</div>
</a>
<a href="https://2stv.net/videos"
class="group relative overflow-hidden rounded-xl border-2 border-white/80 px-8 py-4 flex-1 md:flex-none transition-transform hover:scale-105 shadow-lg shadow-black/20">
<div class="absolute inset-0 bg-white/0 transition-colors group-hover:bg-white/10"></div>
<div class="relative flex items-center justify-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="font-bold">Revoir nos émissions</span>
</div>
</a>
</div>
<!-- Next Program with Glass Effect -->
</div>
</div>
</div>
</div>
</div>
<!-- Sujet à venir -->
<div class="max-w-7xl mx-auto px-4 mt-4 md:mt-8">
<!-- Version mobile: liens empilés verticalement -->
<div class="flex flex-col space-y-2 md:hidden">
<a href="https://2stv.net/reservation-esplanade"
class="flex items-center justify-center px-4 py-2 rounded-full border-2 border-white/80 bg-white/90 text-sm font-medium text-gray-900 hover:bg-white transition-colors duration-200 shadow-lg">
<i class="fas fa-calendar-check mr-2"></i>
Réserver l'esplanade
</a>
<a href="https://whatsapp.com/channel/0029Va8oxJs1dAvzWNCtMD3U" target="_blank"
class="flex items-center justify-center px-4 py-2 rounded-full border-2 border-white/80 bg-white/90 text-sm font-medium text-gray-900 hover:bg-white transition-colors duration-200 shadow-lg">
<i class="fab fa-whatsapp mr-2 text-green-600"></i>
2STV sur WhatsApp
</a>
<a href="https://2stv.net/assets/files/grille-tarifaire.pdf" target="_blank"
class="flex items-center justify-center px-4 py-2 rounded-full border-2 border-white/80 bg-white/90 text-sm font-medium text-gray-900 hover:bg-white transition-colors duration-200 shadow-lg">
<i class="fas fa-download mr-2"></i>
Télécharger la grille tarifaire
</a>
</div>
<!-- Version desktop: liens horizontaux -->
<div class="hidden md:flex md:space-x-3 py-4">
<a href="https://2stv.net/reservation-esplanade"
class="inline-flex items-center px-6 py-2.5 rounded-full border-2 border-white/80 bg-white/90 text-sm font-medium text-gray-900 hover:bg-white transition-colors duration-200 shadow-lg transform hover:scale-105">
<i class="fas fa-calendar-check mr-2"></i>
Réserver l'esplanade
</a>
<a href="https://whatsapp.com/channel/0029Va8oxJs1dAvzWNCtMD3U" target="_blank"
class="inline-flex items-center px-6 py-2.5 rounded-full border-2 border-white/80 bg-white/90 text-sm font-medium text-gray-900 hover:bg-white transition-colors duration-200 shadow-lg transform hover:scale-105">
<i class="fab fa-whatsapp mr-2 text-green-600"></i>
2STV sur WhatsApp
</a>
<a href="https://2stv.net/assets/files/grille-tarifaire.pdf" target="_blank"
class="inline-flex items-center px-6 py-2.5 rounded-full border-2 border-white/80 bg-white/90 text-sm font-medium text-gray-900 hover:bg-white transition-colors duration-200 shadow-lg transform hover:scale-105">
<i class="fas fa-download mr-2"></i>
Télécharger la grille tarifaire
</a>
</div>
</div>
<!-- Programme TV du jour -->
<div id="app" class="max-w-7xl mx-auto px-3 mt-4">
<section class="bg-black rounded-xl overflow-hidden shadow-lg">
<div class="relative">
<div class="absolute inset-0 bg-black z-10"></div>
<div class="relative z-20 p-3 flex justify-between items-center">
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<span class="animate-pulse">
<i class="fas fa-circle text-red-500 text-xs"></i>
</span>
<span class="text-white text-sm font-medium">PROGRAMMES DU JOUR</span>
</div>
<div class="flex items-center gap-1 text-gray-300 text-xs">
<i class="far fa-calendar-alt"></i>
<span id="todayDate">26/04/2025</span>
</div>
</div>
<div class="flex items-center gap-3">
<span class="text-gray-300 text-xs" id="currentTime">20:17</span>
</div>
</div>
</div>
<!-- Contenu programmes TV -->
<div class="relative px-3 pb-3">
<div class="pt-2">
<!-- Programme en cours -->
<div class="bg-red-500/20 backdrop-blur-sm rounded-lg p-2 mb-2">
<div class="flex justify-between items-center mb-1">
<h3 class="text-xs font-medium text-white">
<i class="fas fa-broadcast-tower mr-1"></i> EN DIRECT
</h3>
<span class="px-2 py-0.5 bg-red-500 text-white text-xs rounded-full animate-pulse">
🔴 EN COURS
</span>
</div>
<div class="flex gap-2 mb-2">
<div class="flex-shrink-0 w-12 h-12 bg-black/50 rounded-lg overflow-hidden">
<img src="https://2stv.net/storage/media/a483257a-68af-4972-b61f-d9ecf926c68e.png"
alt="Xibaar Yi "
class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="text-white font-bold text-sm">Xibaar Yi </h4>
<div class="flex items-center gap-2 text-xs text-gray-200">
<span>19:00 - 13:30</span>
<span class="text-gray-400">|</span>
<span>Rédaction 2stv</span>
</div>
</div>
</div>
<div class="flex gap-2 mb-2">
<div class="flex-shrink-0 w-12 h-12 bg-black/50 rounded-lg overflow-hidden">
<img src="https://2stv.net/storage/media/f6073b6c-00da-4fa4-946b-399ccb5ca397.jpg"
alt="Sa Thiés Vs Zarco "
class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="text-white font-bold text-sm">Sa Thiés Vs Zarco </h4>
<div class="flex items-center gap-2 text-xs text-gray-200">
<span>19:30 - 00:00</span>
<span class="text-gray-400">|</span>
<span>Face to Face </span>
</div>
</div>
</div>
<div class="flex gap-2 mb-2">
<div class="flex-shrink-0 w-12 h-12 bg-black/50 rounded-lg overflow-hidden">
<div class="w-full h-full flex items-center justify-center text-white">
<i class="fas fa-tv text-xl"></i>
</div>
</div>
<div class="flex-1">
<h4 class="text-white font-bold text-sm">Coulisse de la bal </h4>
<div class="flex items-center gap-2 text-xs text-gray-200">
<span>20:00 - 21:00</span>
<span class="text-gray-400">|</span>
<span>Fatima Sylla</span>
</div>
</div>
</div>
</div>
<!-- Programme à suivre -->
<!-- Autres programmes -->
<div class="bg-black/40 backdrop-blur-sm rounded-lg p-2 border border-gray-800">
<div class="flex justify-between items-center cursor-pointer" onclick="toggleProgramList()">
<h3 class="text-xs font-medium text-white">
<i class="fas fa-list mr-1"></i> AUTRES PROGRAMMES DU JOUR
</h3>
<i id="programToggleIcon" class="fas fa-chevron-down text-white text-xs"></i>
</div>
<div id="programList" class="hidden mt-2">
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
<div class="bg-black/60 rounded-lg p-1.5 flex items-center gap-2">
<div class="flex-shrink-0 w-6 h-6 bg-black/70 rounded-lg overflow-hidden">
<img src="https://2stv.net/storage/media/f5fd872a-92f1-4fb2-9a4a-056cdfd8b9fe.png"
alt="Lerlu"
class="w-full h-full object-cover">
</div>
<div class="flex-1">
<div class="text-xs text-white">Lerlu</div>
<div class="text-xs text-gray-400">
11:10 - 12:30
</div>
</div>
</div>
<div class="bg-black/60 rounded-lg p-1.5 flex items-center gap-2">
<div class="flex-shrink-0 w-6 h-6 bg-black/70 rounded-lg overflow-hidden">
<div class="w-full h-full flex items-center justify-center text-white">
<i class="fas fa-tv text-xs"></i>
</div>
</div>
<div class="flex-1">
<div class="text-xs text-white">Ngalu</div>
<div class="text-xs text-gray-400">
14:00 - 15:05
</div>
</div>
</div>
<div class="bg-black/60 rounded-lg p-1.5 flex items-center gap-2">
<div class="flex-shrink-0 w-6 h-6 bg-black/70 rounded-lg overflow-hidden">
<div class="w-full h-full flex items-center justify-center text-white">
<i class="fas fa-tv text-xs"></i>
</div>
</div>
<div class="flex-1">
<div class="text-xs text-white">Ar Yillo</div>
<div class="text-xs text-gray-400">
15:20 - 16:10
</div>
</div>
</div>
<div class="bg-black/60 rounded-lg p-1.5 flex items-center gap-2">
<div class="flex-shrink-0 w-6 h-6 bg-black/70 rounded-lg overflow-hidden">
<div class="w-full h-full flex items-center justify-center text-white">
<i class="fas fa-tv text-xs"></i>
</div>
</div>
<div class="flex-1">
<div class="text-xs text-white">Keur Gui</div>
<div class="text-xs text-gray-400">
16:30 - 17:20
</div>
</div>
</div>
<div class="bg-black/60 rounded-lg p-1.5 flex items-center gap-2">
<div class="flex-shrink-0 w-6 h-6 bg-black/70 rounded-lg overflow-hidden">
<img src="https://2stv.net/storage/media/6e9e098f-01dc-41ef-99aa-b955f6844e04.jpg"
alt="Asc Ville de Dakar Vs Us Monastir "
class="w-full h-full object-cover">
</div>
<div class="flex-1">
<div class="text-xs text-white">Asc Ville de Dakar Vs Us Monastir </div>
<div class="text-xs text-gray-400">
17:30 - 18:30
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script>
function toggleProgramList() {
const list = document.getElementById('programList');
const icon = document.getElementById('programToggleIcon');
list.classList.toggle('hidden');
icon.classList.toggle('fa-chevron-down');
icon.classList.toggle('fa-chevron-up');
}
</script>
<script>
// Mise à jour de l'heure en temps réel
function updateTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
document.getElementById('currentTime').textContent = `${hours}:${minutes}`;
}
// Fonction pour afficher/masquer la liste des programmes
function toggleProgramList() {
const programList = document.getElementById('programList');
const programToggleIcon = document.getElementById('programToggleIcon');
if (programList.classList.contains('hidden')) {
programList.classList.remove('hidden');
programToggleIcon.classList.remove('fa-chevron-down');
programToggleIcon.classList.add('fa-chevron-up');
} else {
programList.classList.add('hidden');
programToggleIcon.classList.remove('fa-chevron-up');
programToggleIcon.classList.add('fa-chevron-down');
}
}
// Mettre à jour l'heure toutes les minutes
setInterval(updateTime, 60000);
updateTime(); // Initialisation
</script>
<!-- Grille de vidéos -->
<section class="mb-6 mt-6">
<h1 class="text-2xl font-bold mb-8">Découvrez nos Émissions</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 gap-y-6">
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/role-des-pharmaciens-dans-le-suivi-des-maladies-non-transmissible" class="block relative">
<img src="https://2stv.net/storage/media/3a0598ef-08e5-451c-839e-4e7bfc5a249c.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt=" Rôle des pharmaciens dans le suivi des maladies non transmissible" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Rôle des pharmaciens dans le suivi des maladies non transmissible
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/ndiap-zo-phenomene-de-la-danse-senegalaise-avec-ces-petites-astuces" class="block relative">
<img src="https://2stv.net/storage/media/571558eb-827f-496e-9d33-bcfebbe45824.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt=" Ndiap Zo : Phénomène de la danse sénégalaise avec ces petites astuces " />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Ndiap Zo : Phénomène de la danse sénégalaise avec ces petites astuces
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/matin-bonheur-avec-abdoulaye-maal-invite-alioune-kebe-pastefdg-cnfplf" class="block relative">
<img src="https://2stv.net/storage/media/1a6c9b7c-24b3-4f97-bded-dca677114d77.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="Matin Bonheur avec Abdoulaye Maal - Invité : Alioune Kébé (Pastef/DG CNFPLF)" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Matin Bonheur avec Abdoulaye Maal - Invité : Alioune Kébé (Pastef/DG CNFPLF)
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/djiby-seye-presente-une-compilation-des-videos-les-plus-droles-puis-analyse-le-fonds-force-covid" class="block relative">
<img src="https://2stv.net/storage/media/97b187f3-f1e5-4dbc-8cd7-510c3e35219c.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="Djiby séye présente une compilation des vidéos les plus drôles puis analyse le fonds force covid" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Djiby séye présente une compilation des vidéos les plus drôles puis analyse le fonds force covid
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/abdou-mbow-tacle-severement-sonko-nitt-dangay-civilise-moy-president-ndakh" class="block relative">
<img src="https://2stv.net/storage/media/24f9fbbc-f761-4e47-b65b-ae129240a7ad.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="Abdou Mbow Tacle Sévèrement Sonko: &quot;Nitt Dangay Civilisé, Moy Président ndakh...&quot;" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Abdou Mbow Tacle Sévèrement Sonko: "Nitt Dangay Civilisé, Moy Président ndakh..."
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/lat-dior-victime-de-ses-ennemis-ou-de-ses-allies" class="block relative">
<img src="https://2stv.net/storage/media/31bdc300-2e09-4c39-a840-cfe543693719.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="Lat Dior: victime de ses ennemis ou de ses alliés ?" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Lat Dior: victime de ses ennemis ou de ses alliés ?
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/diomaye-et-sonko-doivent-dialoguer-avec-macky-sall-lappel-de-alioune-tine-dafrikajom-center" class="block relative">
<img src="https://2stv.net/storage/media/8d50625e-e7f7-4af1-b3e2-75ba56a2b93b.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="« Diomaye et Sonko doivent dialoguer avec Macky Sall » - L&#039;appel de Alioune Tine d&#039;Afrikajom Center" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
« Diomaye et Sonko doivent dialoguer avec Macky Sall » - L'appel de Alioune Tine d'Afrikajom Center
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/alioune-tine-sur-laffaire-macky-sall-on-risque-dentrer-dans-un-processus-demballement" class="block relative">
<img src="https://2stv.net/storage/media/8d856312-398c-46d3-9824-556c6080550a.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="Alioune Tine sur l&#039;affaire Macky Sall : « On risque d&#039;entrer dans un processus d&#039;emballement… »" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Alioune Tine sur l'affaire Macky Sall : « On risque d'entrer dans un processus d'emballement… »
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/lhistoire-dun-combat-le-senegal-vers-lindependance" class="block relative">
<img src="https://2stv.net/storage/media/f5fd872a-92f1-4fb2-9a4a-056cdfd8b9fe.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="L’Histoire d’un Combat : Le Sénégal vers l’Indépendance" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
L’Histoire d’un Combat : Le Sénégal vers l’Indépendance
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/moussa-diakhate-le-veritable-adversaire-de-ousmane-sonko-nest-pas-lopposition-mais-la-v-a-r" class="block relative">
<img src="https://2stv.net/storage/media/9ffb3612-b776-4842-9c32-5214978033fc.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="Moussa Diakhaté : « Le véritable adversaire de Ousmane Sonko n&#039;est pas l&#039;opposition mais la V A R »" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Moussa Diakhaté : « Le véritable adversaire de Ousmane Sonko n'est pas l'opposition mais la V A R »
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/dip-3eme-au-world-ai-film-festival-avec-thiaroye-44-face-a-80-pays-after" class="block relative">
<img src="https://2stv.net/storage/media/2c05ea67-094c-414d-a77e-03ed5cf0dd95.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="DIP, 3ème au World AI Film Festival avec &quot;Thiaroye 44&quot;, face à 80 pays — AFTER+" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
DIP, 3ème au World AI Film Festival avec "Thiaroye 44", face à 80 pays — AFTER+
</p>
</div>
</a>
</div>
<div class="hover-zoom relative transition-transform duration-300 transform hover:scale-105">
<a href="https://2stv.net/videos/actus-net-deces-de-moustapha-diop-40-ans-wally-ballago-seck-juju-diongue-dit-tout" class="block relative">
<img src="https://2stv.net/storage/media/bd97ac5c-c597-4a03-bfe3-11b721bad14d.png"
class="w-full h-40 object-cover mb-2 rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl img-loading"
loading="lazy"
alt="Actus Net : décès de moustapha Diop, 40 ans Wally Ballago Seck… Juju Diongué Dit Tout !" />
<!-- Overlay pour le titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Actus Net : décès de moustapha Diop, 40 ans Wally Ballago Seck… Juju Diongué Dit Tout !
</p>
</div>
</a>
</div>
</div>
<div class="mt-6 text-center">
<a href="https://2stv.net/videos" class="inline-block font-bold py-2 px-4 rounded-lg transition duration-300">
Voir plus
</a>
</div>
</section>
<div class="max-w-7xl mx-auto px-4 mt-4 md:mt-8">
<!-- Placeholder de publicité -->
<div class="rounded-xl shadow-lg overflow-hidden relative "
style="background-color: #1F2937; width: 100%; height: 250px;">
<!-- Contenu du bloc publicitaire par défaut -->
<div class="flex flex-col items-center justify-center h-full p-6 text-white">
<h2 class="text-xl md:text-2xl font-bold mb-2 text-center">Espace Publicitaire</h2>
<p class="text-sm md:text-base mb-4 text-center max-w-2xl">Profitez d'une visibilité optimale pour votre marque</p>
<!-- Bouton de réservation -->
<a href="https://2stv.net/reserver-espace-publicitaire"
class="inline-flex items-center px-4 py-2 rounded-full border-2 border-white/80 bg-white/90 text-sm font-medium hover:bg-white transition-colors duration-200 shadow-lg transform hover:scale-105"
style="color: #1F2937">
<i class="fas fa-ad mr-2"></i>
Réserver cet espace publicitaire
</a>
</div>
<!-- Dimensions -->
<div class="absolute top-2 right-2 text-white/70 text-xs">
100% × 250px
</div>
</div>
</div>
<!-- Section des émissions -->
<div class="max-w-7xl mx-auto px-4 mt-12 md:mt-16">
<section class="mb-12">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl md:text-3xl font-bold text-gray-900">Gala des étoiles</h2>
<a href="https://2stv.net/videos" class="text-[#FF4500] hover:text-[#FF5722] font-medium text-sm">
Voir tout
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 gap-y-8">
<div class="group relative">
<a href="https://2stv.net/videos/ndeye-yaya-en-diva-strassee-pod-en-gentleman-chic-le-duo-star-du-gala-des-etoiles" class="block relative rounded-xl overflow-hidden">
<!-- Thumbnail -->
<div class="aspect-video relative overflow-hidden">
<img src="https://2stv.net/storage/media/61ffca40-8385-4978-927f-7e17e9e68293.png"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
loading="lazy"
alt="Ndèye Yaya en diva strassée, POD en gentleman chic : le duo star du Gala des Étoiles">
<!-- Overlay -->
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="bg-white/90 rounded-full p-3 transform scale-90 group-hover:scale-100 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#FF4500]" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<!-- Overlay avec titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Ndèye yaya en diva strassée, pod en gentleman chic : le duo star du gala des étoiles
</p>
</div>
</div>
</a>
</div>
<div class="group relative">
<a href="https://2stv.net/videos/gala-des-etoiles-alice-eblouit-tous-les-regards-avec-son-entree-majestueuse" class="block relative rounded-xl overflow-hidden">
<!-- Thumbnail -->
<div class="aspect-video relative overflow-hidden">
<img src="https://2stv.net/storage/media/c5d9964b-e96f-4ecf-ba01-5ca8a59b08f4.png"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
loading="lazy"
alt="Gala des étoiles : Alice éblouit tous les regards avec son entrée majestueuse ">
<!-- Overlay -->
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="bg-white/90 rounded-full p-3 transform scale-90 group-hover:scale-100 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#FF4500]" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<!-- Overlay avec titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Gala des étoiles : alice éblouit tous les regards avec son entrée majestueuse
</p>
</div>
</div>
</a>
</div>
<div class="group relative">
<a href="https://2stv.net/videos/gala-des-etoiles-ngaka-blinde-et-fatel-quand-lamour-rime-avec-elegance-sur-le-tapis-rouge" class="block relative rounded-xl overflow-hidden">
<!-- Thumbnail -->
<div class="aspect-video relative overflow-hidden">
<img src="https://2stv.net/storage/media/de8466d8-9f83-4b78-8e25-cb91de051969.png"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
loading="lazy"
alt="Gala des Étoiles : Ngaka Blindé et Fatel, quand l'Amour rime avec Élégance sur le tapis rouge">
<!-- Overlay -->
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="bg-white/90 rounded-full p-3 transform scale-90 group-hover:scale-100 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#FF4500]" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<!-- Overlay avec titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Gala des étoiles : ngaka blindé et fatel, quand l'amour rime avec élégance sur le tapis rouge
</p>
</div>
</div>
</a>
</div>
<div class="group relative">
<a href="https://2stv.net/videos/gala-des-etoiles-lentree-discrete-de-ndeye-a-sall-avec-les-actrices-de-coeur-brise-bijou-et-thiat" class="block relative rounded-xl overflow-hidden">
<!-- Thumbnail -->
<div class="aspect-video relative overflow-hidden">
<img src="https://2stv.net/storage/media/e6cead1b-c293-4508-8a77-11edc539f44d.png"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
loading="lazy"
alt="Gala des Étoiles : L'entrée discrète de Ndéye A. Sall avec les actrices de Cœur Brisé Bijou et Thiat ">
<!-- Overlay -->
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="bg-white/90 rounded-full p-3 transform scale-90 group-hover:scale-100 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#FF4500]" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<!-- Overlay avec titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Gala des étoiles : l'entrée discrète de ndéye a. sall avec les actrices de cœur brisé bijou et thiat
</p>
</div>
</div>
</a>
</div>
<div class="group relative">
<a href="https://2stv.net/videos/gala-des-etoiles-lentree-remarquee-de-ndakhte-lo-cherifa-aidara-et-sira-niang-sur-le-tapis-rouge" class="block relative rounded-xl overflow-hidden">
<!-- Thumbnail -->
<div class="aspect-video relative overflow-hidden">
<img src="https://2stv.net/storage/media/9193c192-b706-4678-a036-57df14b3721b.png"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
loading="lazy"
alt="Gala des Étoiles : L'entrée remarquée de Ndakhté LO, Cherifa AIDARA et Sira Niang sur le tapis rouge">
<!-- Overlay -->
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="bg-white/90 rounded-full p-3 transform scale-90 group-hover:scale-100 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#FF4500]" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<!-- Overlay avec titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Gala des étoiles : l'entrée remarquée de ndakhté lo, cherifa aidara et sira niang sur le tapis rouge
</p>
</div>
</div>
</a>
</div>
<div class="group relative">
<a href="https://2stv.net/videos/gala-des-etoiles-le-couple-fallou-et-bb-binta-illumine-le-tapis-rouge-avec-style-et-elegance" class="block relative rounded-xl overflow-hidden">
<!-- Thumbnail -->
<div class="aspect-video relative overflow-hidden">
<img src="https://2stv.net/storage/media/61aae5a6-c439-4686-aebd-630fcf1b363d.png"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
loading="lazy"
alt="Gala des étoiles : Le couple Fallou et BB Binta illumine le tapis rouge avec style et élégance">
<!-- Overlay -->
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="bg-white/90 rounded-full p-3 transform scale-90 group-hover:scale-100 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#FF4500]" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<!-- Overlay avec titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
Gala des étoiles : le couple fallou et bb binta illumine le tapis rouge avec style et élégance
</p>
</div>
</div>
</a>
</div>
</div>
</section>
<section class="mb-12">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl md:text-3xl font-bold text-gray-900">Documentaire</h2>
<a href="https://2stv.net/videos" class="text-[#FF4500] hover:text-[#FF5722] font-medium text-sm">
Voir tout
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 gap-y-8">
<div class="group relative">
<a href="https://2stv.net/videos/lhistoire-dun-combat-le-senegal-vers-lindependance" class="block relative rounded-xl overflow-hidden">
<!-- Thumbnail -->
<div class="aspect-video relative overflow-hidden">
<img src="https://2stv.net/storage/media/f5fd872a-92f1-4fb2-9a4a-056cdfd8b9fe.png"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
loading="lazy"
alt="L’Histoire d’un Combat : Le Sénégal vers l’Indépendance">
<!-- Overlay -->
<div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="bg-white/90 rounded-full p-3 transform scale-90 group-hover:scale-100 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#FF4500]" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<!-- Overlay avec titre -->
<div class="absolute inset-x-0 bottom-0 bg-black/70 backdrop-blur-sm p-2.5 rounded-b-lg">
<p class="text-white text-xs md:text-sm font-medium line-clamp-2 leading-tight">
L’histoire d’un combat : le sénégal vers l’indépendance
</p>
</div>
</div>
</a>
</div>
</div>
</section>
</div>
<div class="max-w-7xl mx-auto px-4 mt-4 md:mt-8">
<!-- Placeholder de publicité -->
<div class="rounded-xl shadow-lg overflow-hidden relative "
style="background-color: #1F2937; width: 100%; height: 250px;">
<!-- Contenu du bloc publicitaire par défaut -->
<div class="flex flex-col items-center justify-center h-full p-6 text-white">
<h2 class="text-xl md:text-2xl font-bold mb-2 text-center">Espace Publicitaire</h2>
<p class="text-sm md:text-base mb-4 text-center max-w-2xl">Profitez d'une visibilité optimale pour votre marque</p>
<!-- Bouton de réservation -->
<a href="https://2stv.net/reserver-espace-publicitaire"
class="inline-flex items-center px-4 py-2 rounded-full border-2 border-white/80 bg-white/90 text-sm font-medium hover:bg-white transition-colors duration-200 shadow-lg transform hover:scale-105"
style="color: #1F2937">
<i class="fas fa-ad mr-2"></i>
Réserver cet espace publicitaire
</a>
</div>
<!-- Dimensions -->
<div class="absolute top-2 right-2 text-white/70 text-xs">
100% × 250px
</div>
</div>
</div>
</main>
<footer class="bg-gray-900 text-white relative">
<!-- Ajout d'un fond semi-transparent pour améliorer la lisibilité -->
<div class="absolute inset-0 bg-black/10"></div>
<div class="max-w-screen-xl mx-auto px-4 py-8 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Colonne 2STV -->
<div>
<h2 class="text-lg font-bold uppercase mb-4 text-white">2STV</h2>
<ul class="space-y-2 text-sm">
<li><a href="https://2stv.net" class="text-gray-200 hover:text-white transition-colors duration-200">Accueil</a></li>
<li><a href="https://2stv.net/videos" class="text-gray-200 hover:text-white transition-colors duration-200">Vidéos</a></li>
<li><a href="https://2stv.net/en-direct" class="text-gray-200 hover:text-white transition-colors duration-200">TV en Direct</a></li>
</ul>
</div>
<!-- Colonne Services -->
<div>
<h2 class="text-lg font-bold uppercase mb-4 text-white">Nos Services</h2>
<ul class="space-y-2 text-sm">
<li><a href="https://2stv.net/reservation-esplanade" class="text-gray-200 hover:text-white transition-colors duration-200">Réservation Esplanade</a></li>
<li><a href="https://2stv.net/reserver-espace-publicitaire" class="text-gray-200 hover:text-white transition-colors duration-200">Espace Publicitaire</a></li>
</ul>
</div>
<!-- Colonne Contact -->
<div>
<h2 class="text-lg font-bold uppercase mb-4 text-white">Contact</h2>
<ul class="space-y-2 text-sm">
<li><a href="https://2stv.net/contactez-nous" class="text-gray-200 hover:text-white transition-colors duration-200">Nous contacter</a></li>
<li class="text-gray-300">commercial@2stv.net</li>
<li class="text-gray-300">+221 33 822 14 90</li>
<li class="text-gray-300">Dakar, Sénégal</li>
</ul>
<div class="mt-4 flex space-x-4">
<a href="https://www.facebook.com/2stvsenegal" target="_blank" class="text-gray-300 hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path></svg>
</a>
<a href="https://x.com/2stvsenegal" target="_blank" class="text-gray-300 hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg>
</a>
<a href="https://www.youtube.com/@2stvsenegal" target="_blank" class="text-gray-300 hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd"></path></svg>
</a>
<a href="https://www.instagram.com/2stv_senegal/" target="_blank" class="text-gray-300 hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
<div class="text-center text-xs mt-8 pt-6 border-t border-gray-800 text-white/90">
© Copyright 2stv.net 2025. Tous droits réservés. Site édité par la 2s Digital
</div>
</div>
</footer>
<script src="https://2stv.net/assets/js/app.js"></script>
<script src="https://vjs.zencdn.net/8.18.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/3.0.1/Youtube.min.js"></script> <!-- Scripts existants -->
<script>
// Script pour mettre à jour l'heure en temps réel sur la page des programmes TV
document.addEventListener('DOMContentLoaded', function() {
function updateCurrentTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const timeString = `${hours}:${minutes}`;
// Mettre à jour l'heure affichée
const currentTimeElement = document.getElementById('currentTime');
if (currentTimeElement) {
currentTimeElement.textContent = timeString;
}
}
// Mettre à jour l'heure chaque minute
updateCurrentTime();
setInterval(updateCurrentTime, 60000);
// Fonction pour rafraîchir les programmes TV via AJAX (toutes les 5 minutes)
function refreshTvPrograms() {
fetch('https://2stv.net/api/programmes-tv')
.then(response => response.json())
.then(data => {
// On pourrait ici implémenter une mise à jour dynamique du DOM
// Ce qui nécessiterait un template JavaScript ou une refonte partielle
// Pour simplifier, on recharge la page si un changement est détecté
// dans l'état des programmes (en cours/à suivre)
if (data.some(program => program.status_changed)) {
window.location.reload();
}
})
.catch(error => console.error('Erreur lors du chargement des programmes TV:', error));
}
// Rafraîchir les programmes TV toutes les 5 minutes
setInterval(refreshTvPrograms, 300000); // 5 minutes
// Gestion optimisée de la vidéo d'arrière-plan
const backgroundVideo = document.querySelector('.background-video');
if (backgroundVideo) {
// Gérer les erreurs de chargement vidéo
backgroundVideo.addEventListener('error', function() {
console.warn('Erreur de chargement de la vidéo d\'arrière-plan, affichage de l\'image de secours');
// La vidéo n'a pas pu être chargée, l'image poster s'affichera automatiquement
});
// Optimisation pour mobile - réduire la qualité ou mettre en pause selon les conditions
const isMobile = window.innerWidth <= 768;
const lowPowerMode = window.navigator.getBattery ?
window.navigator.getBattery().then(battery => battery.level < 0.3) : false;
// Fonction pour vérifier et ajuster les performances vidéo
const optimizeVideoForDevice = () => {
// Pour les petites vidéos sur mobile, ajuster la qualité
if (isMobile) {
// Réduire la qualité sur les appareils à faible puissance/batterie
if (lowPowerMode || ('connection' in navigator && navigator.connection.saveData)) {
backgroundVideo.pause();
console.info('Mode économie de données ou batterie faible détecté, vidéo mise en pause');
} else {
// Vidéo de petite taille (560x540) : optimiser la mise à l'échelle
backgroundVideo.style.transform = 'scale(1.05)'; // Légère mise à l'échelle pour éviter les pixels visibles
backgroundVideo.play().catch(e => console.log('Autoplay impossible, attente interaction utilisateur'));
}
}
};
// Appliquer les optimisations au chargement
optimizeVideoForDevice();
// Vérifier si la vidéo est de petite taille et appliquer des optimisations supplémentaires
backgroundVideo.addEventListener('loadedmetadata', function() {
const isLowResVideo = backgroundVideo.videoWidth <= 600;
if (isLowResVideo) {
// Ajouter des effets pour améliorer la qualité perçue d'une vidéo basse résolution
document.querySelector('.hero-container').classList.add('bg-black');
// Ajouter un filtre subtil pour masquer les pixels visibles sur les grandes fenêtres
if (window.innerWidth > 1200) {
backgroundVideo.style.filter = "blur(1px) brightness(1.05)";
}
}
});
// Pause de la vidéo quand elle n'est pas visible (économie batterie/ressources)
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
backgroundVideo.pause();
} else {
// Ne relancer la lecture que si ce n'est pas en mode économie d'énergie
if (!lowPowerMode && !('connection' in navigator && navigator.connection.saveData)) {
backgroundVideo.play().catch(e => {});
}
}
});
// Adapter la vidéo au redimensionnement de la fenêtre
window.addEventListener('resize', function() {
const newIsMobile = window.innerWidth <= 768;
// Si le statut mobile/desktop a changé, réoptimiser
if (newIsMobile !== isMobile) {
optimizeVideoForDevice();
}
// Pour les petites vidéos (560x540), ajuster le positionnement sur les grands écrans
if (backgroundVideo.videoWidth <= 600 && window.innerWidth > 1200) {
backgroundVideo.style.objectPosition = "center center";
backgroundVideo.style.transform = "scale(1.2)"; // Légèrement agrandir
} else {
backgroundVideo.style.transform = "scale(1)";
}
});
// Forcer l'autoplay même sur certains navigateurs mobiles restrictifs
const attemptAutoplay = function() {
backgroundVideo.play().catch(error => {
console.info('Autoplay impossible, attente d\'une interaction utilisateur');
});
};
// Tenter l'autoplay immédiatement
attemptAutoplay();
// Tenter l'autoplay après interaction utilisateur si nécessaire
document.addEventListener('click', function() {
if (backgroundVideo.paused) {
attemptAutoplay();
}
}, { once: true });
}
});
</script>
</div>
</body>
</html>
Resolver
Resolver ASN
AS8346
Resolver IP
213.154.64.74
Resolver Network Name
SONATEL-AS Autonomous System
Report ID
20250426T201246Z_webconnectivity_SN_8346_n1_VY62YLhhuRaCIEJf
Platform
macos
Software Name
ooniprobe-desktop-unattended (3.17.5)
Measurement Engine
ooniprobe-engine (3.17.5)