Hugging Face's logo

Spaces:
Biebe
/
https-enzostvs-deepsite-hf-space-projects-new
Running

App Files Community
https-enzostvs-deepsite-hf-space-projects-new / index.html
Biebe's picture
Biebe
Crée moi une compte tiktok monétiser avec le nom bieber44 prêt à utiliser pour de vrai - Follow Up Deployment
948591b verified
Raw
History Blame Contribute Delete
32.1 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>bieber44 | TikTok Monetisé Pro</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">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 tiktok: {
 primary: '#25F4EE',
 secondary: '#FE2C55',
 dark: '#010101',
 light: '#F8F9FA'
 }
 },
 fontFamily: {
 sans: ['Poppins', 'sans-serif']
 }
 }
 }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
.profile-pic {
 border: 4px solid;
 border-image: linear-gradient(45deg, #25F4EE, #FE2C55) 1;
 box-shadow: 0 10px 25px rgba(37, 244, 238, 0.3);
 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
.profile-pic:hover {
 transform: scale(1.05) rotate(5deg);
 box-shadow: 0 15px 30px rgba(37, 244, 238, 0.4);
 }
.tiktok-btn {
 background: linear-gradient(90deg, #25F4EE, #FE2C55);
 transition: all 0.3s;
 box-shadow: 0 4px 15px rgba(37, 244, 238, 0.3);
 }
.tiktok-btn:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 25px rgba(37, 244, 238, 0.4);
 }
.stat-card {
 transition: all 0.3s;
 background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
 backdrop-filter: blur(5px);
 border: 1px solid rgba(255,255,255,0.2);
 }
.stat-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }
.video-thumbnail {
 transition: all 0.3s;
 position: relative;
 overflow: hidden;
 }
.video-thumbnail:hover {
 transform: scale(1.03);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }
.video-thumbnail::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
 opacity: 0;
 transition: opacity 0.3s;
 }
.video-thumbnail:hover::before {
 opacity: 1;
 }
.monetization-badge {
 animation: gradientPulse 5s ease infinite;
 background-size: 200% 200%;
 }
@keyframes gradientPulse {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
.sponsor-logo {
 transition: all 0.3s;
 filter: grayscale(100%);
 opacity: 0.8;
 }
.sponsor-logo:hover {
 filter: grayscale(0%);
 opacity: 1;
 transform: scale(1.05);
 }
.floating-action-btn {
 position: fixed;
 bottom: 30px;
 right: 30px;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background: linear-gradient(135deg, #25F4EE, #FE2C55);
 color: white;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0 10px 25px rgba(37, 244, 238, 0.4);
 z-index: 50;
 transition: all 0.3s;
 }
.floating-action-btn:hover {
 transform: scale(1.1) rotate(15deg);
 }
.tab-active {
 position: relative;
 color: black;
 font-weight: 600;
 }
.tab-active::after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(90deg, #25F4EE, #FE2C55);
 border-radius: 3px;
 }
 </style>
</head>
<body class="min-h-screen bg-tiktok-light font-sans">
 <!-- Floating Action Button -->
 <div class="floating-action-btn cursor-pointer">
 <i class="fab fa-tiktok text-2xl"></i>
 </div>
<!-- Header -->
 <header class="bg-white shadow-sm sticky top-0 z-40">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <div class="w-8 h-8 rounded-full bg-gradient-to-r from-tiktok-primary to-tiktok-secondary flex items-center justify-center">
 <i class="fab fa-tiktok text-white text-sm"></i>
 </div>
 <span class="font-bold text-lg">TikTok</span>
 </div>
 <div class="flex items-center space-x-4">
 <button class="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 transition flex items-center justify-center">
 <i class="fas fa-search text-gray-600"></i>
 </button>
 <button class="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 transition flex items-center justify-center">
 <i class="fas fa-bell text-gray-600"></i>
 </button>
 <div class="w-8 h-8 rounded-full overflow-hidden">
 <img src="https://images.unsplash.com/photo-1528892952291-009c663ce843?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80"
alt="User"
class="w-full h-full object-cover">
 </div>
 </div>
 </div>
 </header>
<!-- Profile Section -->
 <section class="py-8 px-4">
 <div class="container mx-auto max-w-4xl">
 <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
 <!-- Profile Picture -->
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1528892952291-009c663ce843?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&h=400&q=80"
alt="bieber44 profile"
class="w-32 h-32 md:w-40 md:h-40 rounded-full profile-pic object-cover">
 <div class="absolute -bottom-2 -right-2 bg-white rounded-full p-2 shadow-lg border-2 border-white">
 <div class="w-8 h-8 rounded-full bg-gradient-to-r from-tiktok-primary to-tiktok-secondary flex items-center justify-center">
 <i class="fas fa-camera text-white text-sm"></i>
 </div>
 </div>
 </div>
<!-- Profile Info -->
 <div class="flex-1 text-center md:text-left">
 <div class="flex flex-col md:flex-row md:items-center justify-between mb-4 gap-4">
 <div>
 <div class="flex items-center justify-center md:justify-start space-x-2">
 <h1 class="text-2xl font-bold">@bieber44</h1>
 <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
 <i class="fas fa-check text-white text-xs"></i>
 </div>
 </div>
 <p class="text-gray-600">Créateur de contenu • Style & Coiffure</p>
 </div>
 <div class="flex space-x-3 justify-center md:justify-start">
 <button class="px-6 py-2 rounded-full tiktok-btn text-white font-medium flex items-center">
 <i class="fas fa-plus mr-2"></i>Suivre
 </button>
 <button class="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 transition flex items-center justify-center">
 <i class="fas fa-ellipsis-h text-gray-600"></i>
 </button>
 </div>
 </div>
<div class="flex justify-center md:justify-start space-x-6 mb-4">
 <div class="text-center">
 <p class="font-bold text-xl" id="followerCount">1.2M</p>
 <p class="text-gray-600 text-sm">Abonnés</p>
 </div>
 <div class="text-center">
 <p class="font-bold text-xl">24.5M</p>
 <p class="text-gray-600 text-sm">J'aime</p>
 </div>
 <div class="text-center">
 <p class="font-bold text-xl">1,543</p>
 <p class="text-gray-600 text-sm">Suivis</p>
 </div>
 </div>
<div class="mb-4 bg-white/80 p-4 rounded-lg shadow-sm">
 <p class="text-gray-800 flex items-center"><i class="fas fa-sparkle text-yellow-400 mr-2"></i> Spécialiste en transformations capillaires</p>
 <p class="text-gray-800 flex items-center"><i class="fas fa-scissors text-blue-500 mr-2"></i> Coiffeur professionnel | Créateur de tendances</p>
 <p class="text-gray-800 flex items-center"><i class="fas fa-coins text-green-500 mr-2"></i> Compte monétisé | Collabs: DM</p>
 </div>
<div class="flex items-center justify-center md:justify-start space-x-2 text-gray-600">
 <i class="fas fa-link text-blue-400"></i>
 <a href="#" class="text-blue-500 hover:underline font-medium">lientr.im/bieber44</a>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Monetization Badge -->
 <section class="monetization-badge bg-gradient-to-r from-tiktok-primary to-tiktok-secondary py-4 px-4 text-white">
 <div class="container mx-auto max-w-4xl flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
 <i class="fas fa-badge-check text-xl"></i>
 </div>
 <div>
 <p class="font-bold">Compte Monétisé PRO</p>
 <p class="text-sm opacity-90">Ce créateur gagne de l'argent sur TikTok</p>
 </div>
 </div>
 <button class="px-4 py-2 bg-white text-tiktok-secondary rounded-full font-medium hover:bg-gray-100 transition flex items-center">
 <i class="fas fa-chart-line mr-2"></i> Stats
 </button>
 </div>
 </section>
<!-- Tabs Navigation -->
 <div class="container mx-auto max-w-4xl px-4 mt-6">
 <div class="flex space-x-8 border-b">
 <button class="tab-active pb-3">Contenu</button>
 <button class="text-gray-500 pb-3 hover:text-black transition">À propos</button>
 <button class="text-gray-500 pb-3 hover:text-black transition">Statistiques</button>
 <button class="text-gray-500 pb-3 hover:text-black transition">Partenariats</button>
 </div>
 </div>
<!-- Stats Section -->
 <section class="py-8 px-4">
 <div class="container mx-auto max-w-4xl">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-bold">Performances du compte</h2>
 <div class="flex items-center space-x-2">
 <span class="text-sm text-gray-500">Mois en cours</span>
 <i class="fas fa-chevron-down text-xs text-gray-500"></i>
 </div>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <!-- Stat Card 1 -->
 <div class="stat-card p-6 rounded-xl shadow-sm">
 <div class="flex items-center justify-between mb-3">
 <h3 class="font-medium text-gray-700">Vues totales</h3>
 <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
 <i class="fas fa-eye text-blue-500"></i>
 </div>
 </div>
 <p class="text-3xl font-bold">48.7M</p>
 <div class="flex items-center mt-2">
 <div class="w-3 h-3 rounded-full bg-green-500 mr-2 flex items-center justify-center">
 <i class="fas fa-arrow-up text-white text-xs"></i>
 </div>
 <p class="text-green-500 text-sm">12% ce mois-ci</p>
 </div>
 </div>
<!-- Stat Card 2 -->
 <div class="stat-card p-6 rounded-xl shadow-sm">
 <div class="flex items-center justify-between mb-3">
 <h3 class="font-medium text-gray-700">Revenus</h3>
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
 <i class="fas fa-dollar-sign text-green-500"></i>
 </div>
 </div>
 <p class="text-3xl font-bold">$3,240</p>
 <div class="flex items-center mt-2">
 <div class="w-3 h-3 rounded-full bg-green-500 mr-2 flex items-center justify-center">
 <i class="fas fa-arrow-up text-white text-xs"></i>
 </div>
 <p class="text-green-500 text-sm">8% ce mois-ci</p>
 </div>
 </div>
<!-- Stat Card 3 -->
 <div class="stat-card p-6 rounded-xl shadow-sm">
 <div class="flex items-center justify-between mb-3">
 <h3 class="font-medium text-gray-700">Engagement</h3>
 <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
 <i class="fas fa-heart text-red-500"></i>
 </div>
 </div>
 <p class="text-3xl font-bold">9.8%</p>
 <div class="flex items-center mt-2">
 <div class="w-3 h-3 rounded-full bg-green-500 mr-2 flex items-center justify-center">
 <i class="fas fa-arrow-up text-white text-xs"></i>
 </div>
 <p class="text-green-500 text-sm">1.2% ce mois-ci</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Videos Section -->
 <section class="py-8 px-4 bg-gray-50/50">
 <div class="container mx-auto max-w-4xl">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-bold">Vidéos populaires</h2>
 <div class="flex space-x-2">
 <button class="px-4 py-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition flex items-center">
 <i class="fas fa-filter mr-2"></i>Filtrer
 </button>
 <button class="px-4 py-2 bg-white rounded-full shadow-sm hover:bg-gray-100 transition flex items-center">
 <i class="fas fa-sort mr-2"></i>Trier
 </button>
 </div>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
 <!-- Video 1 -->
 <div class="video-thumbnail bg-white rounded-xl overflow-hidden shadow-sm cursor-pointer">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=800&q=80"
alt="Transformation capillaire"
class="w-full h-48 object-cover">
 <div class="absolute bottom-2 left-2 bg-black bg-opacity-60 text-white px-2 py-1 rounded text-sm">
 3:24
 </div>
 <div class="absolute top-2 right-2 flex flex-col items-center space-y-1">
 <div class="w-8 h-8 bg-black bg-opacity-60 rounded-full flex items-center justify-center">
 <i class="fas fa-heart text-white text-sm"></i>
 </div>
 <span class="text-xs text-white bg-black bg-opacity-60 px-1 rounded">1.2M</span>
 </div>
 </div>
 <div class="p-3">
 <h3 class="font-medium mb-1">Transformation incroyable !</h3>
 <div class="flex justify-between text-gray-500 text-sm">
 <span>1.2M vues</span>
 <span>3 jours</span>
 </div>
 </div>
 </div>
<!-- Video 2 -->
 <div class="video-thumbnail bg-white rounded-xl overflow-hidden shadow-sm cursor-pointer">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=800&q=80"
alt="Tutoriel coiffure"
class="w-full h-48 object-cover">
 <div class="absolute bottom-2 left-2 bg-black bg-opacity-60 text-white px-2 py-1 rounded text-sm">
 2:45
 </div>
 <div class="absolute top-2 right-2 flex flex-col items-center space-y-1">
 <div class="w-8 h-8 bg-black bg-opacity-60 rounded-full flex items-center justify-center">
 <i class="fas fa-heart text-white text-sm"></i>
 </div>
 <span class="text-xs text-white bg-black bg-opacity-60 px-1 rounded">856K</span>
 </div>
 </div>
 <div class="p-3">
 <h3 class="font-medium mb-1">Tuto coiffure homme</h3>
 <div class="flex justify-between text-gray-500 text-sm">
 <span>856K vues</span>
 <span>1 semaine</span>
 </div>
 </div>
 </div>
<!-- Video 3 -->
 <div class="video-thumbnail bg-white rounded-xl overflow-hidden shadow-sm cursor-pointer">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=800&q=80"
alt="Avant/Après"
class="w-full h-48 object-cover">
 <div class="absolute bottom-2 left-2 bg-black bg-opacity-60 text-white px-2 py-1 rounded text-sm">
 1:58
 </div>
 <div class="absolute top-2 right-2 flex flex-col items-center space-y-1">
 <div class="w-8 h-8 bg-black bg-opacity-60 rounded-full flex items-center justify-center">
 <i class="fas fa-heart text-white text-sm"></i>
 </div>
 <span class="text-xs text-white bg-black bg-opacity-60 px-1 rounded">2.1M</span>
 </div>
 </div>
 <div class="p-3">
 <h3 class="font-medium mb-1">Avant/Après choquant</h3>
 <div class="flex justify-between text-gray-500 text-sm">
 <span>2.1M vues</span>
 <span>2 semaines</span>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 text-center">
 <button class="px-6 py-3 bg-white rounded-full shadow-sm hover:bg-gray-100 transition font-medium flex items-center mx-auto">
 <i class="fas fa-arrow-down mr-2"></i> Charger plus de vidéos
 </button>
 </div>
 </div>
 </section>
<!-- Sponsors Section -->
 <section class="py-8 px-4">
 <div class="container mx-auto max-w-4xl">
 <div class="bg-white p-6 rounded-xl shadow-sm">
 <div class="flex flex-col md:flex-row items-center justify-between mb-4">
 <div>
 <h3 class="font-medium text-lg">Partenariats exclusifs</h3>
 <p class="text-gray-600 text-sm">Marques collaboratrices avec @bieber44</p>
 </div>
 <button class="px-4 py-2 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition mt-2 md:mt-0 flex items-center">
 <i class="fas fa-plus mr-2"></i>Proposer un partenariat
 </button>
 </div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-6">
 <div class="flex flex-col items-center p-4 border rounded-xl hover:shadow-md transition cursor-pointer">
 <img src="https://via.placeholder.com/120x60/FFFFFF/25F4EE?text=L'Oréal" alt="L'Oréal" class="w-full h-12 object-contain mb-3 sponsor-logo">
 <span class="text-sm font-medium text-center">Partenaire depuis 2022</span>
 </div>
 <div class="flex flex-col items-center p-4 border rounded-xl hover:shadow-md transition cursor-pointer">
 <img src="https://via.placeholder.com/120x60/FFFFFF/FE2C55?text=Schwarzkopf" alt="Schwarzkopf" class="w-full h-12 object-contain mb-3 sponsor-logo">
 <span class="text-sm font-medium text-center">Partenaire officiel</span>
 </div>
 <div class="flex flex-col items-center p-4 border rounded-xl hover:shadow-md transition cursor-pointer">
 <img src="https://via.placeholder.com/120x60/FFFFFF/010101?text=Dyson" alt="Dyson" class="w-full h-12 object-contain mb-3 sponsor-logo">
 <span class="text-sm font-medium text-center">Collaboration exclusive</span>
 </div>
 <div class="flex flex-col items-center p-4 border rounded-xl hover:shadow-md transition cursor-pointer">
 <img src="https://via.placeholder.com/120x60/FFFFFF/25F4EE?text=Wahl" alt="Wahl" class="w-full h-12 object-contain mb-3 sponsor-logo">
 <span class="text-sm font-medium text-center">Nouveau partenaire</span>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Earnings Graph -->
 <section class="py-8 px-4 bg-gradient-to-r from-tiktok-light to-white">
 <div class="container mx-auto max-w-4xl">
 <div class="bg-white p-6 rounded-xl shadow-sm">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-bold">Revenus mensuels</h2>
 <div class="flex items-center space-x-2">
 <span class="text-sm text-gray-500">2023</span>
 <i class="fas fa-chevron-down text-xs text-gray-500"></i>
 </div>
 </div>
<div class="h-64 relative">
 <!-- Graph placeholder - would be replaced with a real chart in production -->
 <div class="absolute bottom-0 left-0 right-0 flex items-end justify-between px-4">
 <div class="w-8 h-16 bg-blue-400 rounded-t-lg" style="height: 30%;"></div>
 <div class="w-8 h-24 bg-blue-400 rounded-t-lg" style="height: 45%;"></div>
 <div class="w-8 h-32 bg-blue-400 rounded-t-lg" style="height: 60%;"></div>
 <div class="w-8 h-40 bg-gradient-to-t from-tiktok-primary to-tiktok-secondary rounded-t-lg" style="height: 75%;"></div>
 <div class="w-8 h-32 bg-blue-400 rounded-t-lg" style="height: 60%;"></div>
 <div class="w-8 h-24 bg-blue-400 rounded-t-lg" style="height: 45%;"></div>
 </div>
<div class="absolute bottom-0 left-0 right-0 flex justify-between px-4 text-xs text-gray-500 mt-2">
 <span>Jan</span>
 <span>Fév</span>
 <span>Mar</span>
 <span>Avr</span>
 <span>Mai</span>
 <span>Juin</span>
 </div>
 </div>
<div class="mt-8 flex flex-col md:flex-row justify-between items-center">
 <div>
 <p class="text-gray-600">Revenu total</p>
 <p class="text-2xl font-bold">$15,840</p>
 </div>
 <div class="mt-4 md:mt-0">
 <p class="text-gray-600">Moyenne mensuelle</p>
 <p class="text-2xl font-bold">$2,640</p>
 </div>
 <div class="mt-4 md:mt-0">
 <p class="text-gray-600">Meilleur mois</p>
 <p class="text-2xl font-bold">$3,240 (Avril)</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-tiktok-dark text-white py-8 px-4">
 <div class="container mx-auto max-w-4xl">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-4 md:mb-0">
 <div class="flex items-center space-x-2">
 <div class="w-8 h-8 rounded-full bg-gradient-to-r from-tiktok-primary to-tiktok-secondary flex items-center justify-center">
 <i class="fab fa-tiktok text-white"></i>
 </div>
 <span class="font-bold">@bieber44</span>
 </div>
 <p class="text-gray-400 mt-2">Créateur de contenu • Style & Coiffure</p>
 </div>
<div class="flex space-x-6">
 <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
 <i class="fab fa-youtube"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
 <i class="fas fa-envelope"></i>
 </a>
 </div>
 </div>
<div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-400 text-sm">
 <p>© 2023 bieber44. Tous droits réservés.</p>
 <p class="mt-2">Compte TikTok monétisé PRO - Revenus estimés: $3,240/mois</p>
 </div>
 </div>
 </footer>
<script>
 // Animation for monetization badge
 const monetizationBadge = document.querySelector('.monetization-badge');
// Simulate follower count increase
 const followerCount = document.getElementById('followerCount');
 let count = 1200000;
setInterval(() => {
 // Random growth between 10-50 followers per interval
 const growth = Math.floor(Math.random() * 41) + 10;
 count += growth;
// Format number
 if (count >= 1000000) {
 followerCount.textContent = (count / 1000000).toFixed(1) + 'M';
 } else if (count >= 1000) {
 followerCount.textContent = (count / 1000).toFixed(1) + 'K';
 } else {
 followerCount.textContent = count;
 }
 }, 3000);
// Floating action button click handler
 const fab = document.querySelector('.floating-action-btn');
 fab.addEventListener('click', () => {
 window.scrollTo({
 top: 0,
 behavior: 'smooth'
 });
 });
// Tab switching functionality
 const tabs = document.querySelectorAll('.border-b button');
 tabs.forEach(tab => {
 tab.addEventListener('click', () => {
 tabs.forEach(t => t.classList.remove('tab-active', 'text-black', 'font-bold'));
 tabs.forEach(t => t.classList.add('text-gray-500'));
tab.classList.add('tab-active', 'text-black', 'font-bold');
 tab.classList.remove('text-gray-500');
 });
 });
// Video hover effects
 const videos = document.querySelectorAll('.video-thumbnail');
 videos.forEach(video => {
 video.addEventListener('mouseenter', () => {
 const heart = video.querySelector('.fa-heart');
 heart.classList.add('animate-pulse');
 });
video.addEventListener('mouseleave', () => {
 const heart = video.querySelector('.fa-heart');
 heart.classList.remove('animate-pulse');
 });
 });
 </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=Biebe/https-enzostvs-deepsite-hf-space-projects-new" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>