|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>StreamVista - Plateforme de Streaming Légal</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> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%); |
|
|
} |
|
|
.film-card:hover { |
|
|
transform: scale(1.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.blur-effect { |
|
|
backdrop-filter: blur(10px); |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white"> |
|
|
|
|
|
<nav class="blur-effect fixed w-full z-50"> |
|
|
<div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i class="fas fa-film text-2xl text-purple-500"></i> |
|
|
<span class="text-xl font-bold">StreamVista</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="hover:text-purple-400">Accueil</a> |
|
|
<a href="#" class="hover:text-purple-400">Films</a> |
|
|
<a href="#" class="hover:text-purple-400">Séries</a> |
|
|
<a href="#" class="hover:text-purple-400">Nouveautés</a> |
|
|
<a href="#" class="hover:text-purple-400">Ma Liste</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-full font-medium"> |
|
|
S'inscrire |
|
|
</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-full font-medium"> |
|
|
Connexion |
|
|
</button> |
|
|
</div> |
|
|
<button class="md:hidden"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient pt-32 pb-20 px-6"> |
|
|
<div class="container mx-auto flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Films et séries en illimité</h1> |
|
|
<p class="text-xl mb-8">Regardez vos films et séries préférés où que vous soyez. Sans publicité. Abonnement légal et sécurisé.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-gray-900 hover:bg-gray-200 px-6 py-3 rounded-full font-bold flex items-center justify-center"> |
|
|
<i class="fas fa-play mr-2"></i> Essai gratuit 30 jours |
|
|
</button> |
|
|
<button class="bg-gray-900 bg-opacity-50 hover:bg-opacity-70 px-6 py-3 rounded-full font-bold flex items-center justify-center"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Plus d'infos |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://via.placeholder.com/500x300" alt="Hero Image" class="rounded-lg shadow-2xl"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl font-bold mb-8">Nouveautés</h2> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
|
|
|
|
|
<div class="film-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/300x450" alt="Film" class="w-full h-64 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold">Titre du Film</h3> |
|
|
<div class="flex items-center mt-2"> |
|
|
<span class="text-yellow-400"><i class="fas fa-star"></i></span> |
|
|
<span class="ml-1 text-sm">4.5</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/300x450" alt="Film" class="w-full h-64 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold">Titre du Film</h3> |
|
|
<div class="flex items-center mt-2"> |
|
|
<span class="text-yellow-400"><i class="fas fa-star"></i></span> |
|
|
<span class="ml-1 text-sm">4.2</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/300x450" alt="Film" class="w-full h-64 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold">Titre du Film</h3> |
|
|
<div class="flex items-center mt-2"> |
|
|
<span class="text-yellow-400"><i class="fas fa-star"></i></span> |
|
|
<span class="ml-1 text-sm">4.7</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/300x450" alt="Film" class="w-full h-64 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold">Titre du Film</h3> |
|
|
<div class="flex items-center mt-2"> |
|
|
<span class="text-yellow-400"><i class="fas fa-star"></i></span> |
|
|
<span class="ml-1 text-sm">4.0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="film-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer"> |
|
|
<img src="https://via.placeholder.com/300x450" alt="Film" class="w-full h-64 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold">Titre du Film</h3> |
|
|
<div class="flex items-center mt-2"> |
|
|
<span class="text-yellow-400"><i class="fas fa-star"></i></span> |
|
|
<span class="ml-1 text-sm">4.8</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6 bg-gray-800"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">Choisissez votre abonnement</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-8 hover:border-purple-500 border-2 border-transparent transition-all"> |
|
|
<h3 class="text-2xl font-bold mb-4">Basique</h3> |
|
|
<p class="text-gray-400 mb-6">Parfait pour les petits budgets</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">9,99€</span> |
|
|
<span class="text-gray-400">/mois</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Accès à tous les films</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>1 écran à la fois</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Qualité HD</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-500"> |
|
|
<i class="fas fa-times text-red-500 mr-2"></i> |
|
|
<span>Pas de téléchargement</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-bold"> |
|
|
Choisir ce plan |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-8 hover:border-purple-500 border-2 border-transparent transition-all transform scale-105"> |
|
|
<div class="absolute top-0 right-0 bg-purple-600 text-white px-4 py-1 rounded-bl-lg rounded-tr-lg"> |
|
|
Populaire |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Standard</h3> |
|
|
<p class="text-gray-400 mb-6">Le meilleur rapport qualité-prix</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">14,99€</span> |
|
|
<span class="text-gray-400">/mois</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Accès à tous les films et séries</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>2 écrans simultanés</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Qualité Full HD</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Téléchargement sur 2 appareils</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-bold"> |
|
|
Choisir ce plan |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-8 hover:border-purple-500 border-2 border-transparent transition-all"> |
|
|
<h3 class="text-2xl font-bold mb-4">Premium</h3> |
|
|
<p class="text-gray-400 mb-6">Pour les vrais cinéphiles</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold">19,99€</span> |
|
|
<span class="text-gray-400">/mois</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Tous les contenus premium</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>4 écrans simultanés</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Qualité 4K Ultra HD</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Téléchargement illimité</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-bold"> |
|
|
Choisir ce plan |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto max-w-4xl"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">Questions fréquentes</h2> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700"> |
|
|
<span class="font-medium">Comment puis-je annuler mon abonnement ?</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-900"> |
|
|
<p>Vous pouvez annuler votre abonnement à tout moment en accédant à votre compte et en sélectionnant l'option "Annuler l'abonnement" dans les paramètres. Votre accès restera actif jusqu'à la fin de la période payée.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700"> |
|
|
<span class="font-medium">Quels appareils sont compatibles ?</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-900"> |
|
|
<p>StreamVista est compatible avec la plupart des appareils : smartphones (iOS et Android), tablettes, ordinateurs (Windows et Mac), téléviseurs intelligents (Samsung, LG, Android TV, Apple TV), consoles de jeux (PlayStation, Xbox) et lecteurs multimédias (Roku, Fire TV).</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700"> |
|
|
<span class="font-medium">Y a-t-il des frais cachés ?</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-900"> |
|
|
<p>Non, il n'y a aucun frais caché. Le prix affiché est le prix que vous payez. Les taxes applicables sont incluses dans le prix affiché. Vous pouvez modifier ou annuler votre abonnement à tout moment sans frais supplémentaires.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-700 rounded-lg overflow-hidden"> |
|
|
<button class="faq-toggle w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700"> |
|
|
<span class="font-medium">Comment fonctionne l'essai gratuit ?</span> |
|
|
<i class="fas fa-chevron-down transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="faq-content hidden p-4 bg-gray-900"> |
|
|
<p>L'essai gratuit de 30 jours vous donne un accès complet à tous nos contenus. Aucun paiement n'est requis pendant cette période. Si vous décidez de ne pas continuer, annulez simplement avant la fin des 30 jours pour éviter tout frais. Une carte de crédit valide est nécessaire pour vérification.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 py-12 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">StreamVista</h3> |
|
|
<p class="text-gray-400">La meilleure plateforme de streaming légale. Des milliers de films et séries à portée de clic.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Navigation</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Films</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Séries</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Ma Liste</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Légal</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Cookies</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope mr-2 text-gray-400"></i> |
|
|
<span class="text-gray-400">support@streamvista.com</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone mr-2 text-gray-400"></i> |
|
|
<span class="text-gray-400">+33 1 23 45 67 89</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt mr-2 text-gray-400"></i> |
|
|
<span class="text-gray-400">Paris, France</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 StreamVista. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.faq-toggle').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const content = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
content.classList.toggle('hidden'); |
|
|
icon.classList.toggle('rotate-180'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('nav button.md\\:hidden').addEventListener('click', () => { |
|
|
alert("Menu mobile s'ouvrirait ici avec plus de JavaScript"); |
|
|
}); |
|
|
</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=Mariblly/my-place" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
