Hugging Face's logo

Spaces:
Chasme
/
autotik
Running

App Files Community
autotik / index.html
Chasme's picture
Chasme
Add 2 files
4c9db5e verified
Raw
History Blame Contribute Delete
20.8 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AutoTik - Automatisation TikTok</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 = {
 darkMode: 'class',
 theme: {
 extend: {
 colors: {
 primary: '#FE2C55',
 dark: '#121212',
 darker: '#0a0a0a',
 light: '#f8fafc',
 }
 }
 }
 }
 </script>
 <style>
 /* Custom scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 }
 ::-webkit-scrollbar-track {
 background: #1e1e1e;
 }
 ::-webkit-scrollbar-thumb {
 background: #555;
 border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background: #777;
 }
/* Animation for notifications */
 @keyframes slideIn {
 from { transform: translateX(100%); }
 to { transform: translateX(0); }
 }
.notification {
 animation: slideIn 0.3s ease-out;
 }
 </style>
</head>
<body class="bg-dark text-light min-h-screen">
 <!-- Header -->
 <header class="bg-darker p-4 flex justify-between items-center border-b border-gray-800 sticky top-0 z-10">
 <div class="flex items-center space-x-2">
 <i class="fab fa-tiktok text-primary text-2xl"></i>
 <h1 class="text-xl font-bold">AutoTik</h1>
 </div>
 <div class="flex space-x-4">
 <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-800">
 <i class="fas fa-moon"></i>
 </button>
 <button class="p-2 rounded-full hover:bg-gray-800">
 <i class="fas fa-cog"></i>
 </button>
 </div>
 </header>
<!-- Main Content -->
 <main class="container mx-auto p-4 pb-20">
 <!-- Dashboard Section -->
 <section class="mb-8">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold">Tableau de bord</h2>
 <button id="newAutomationBtn" class="bg-primary hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
 <i class="fas fa-plus"></i>
 <span>Nouvelle automatisation</span>
 </button>
 </div>
<!-- Active Automations -->
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <!-- Automation Card 1 -->
 <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-primary">
 <div class="flex justify-between items-start">
 <div>
 <h3 class="font-medium">Publication TikTok quotidienne</h3>
 <p class="text-gray-400 text-sm">Poste à 18h chaque jour</p>
 </div>
 <div class="flex space-x-2">
 <button class="text-gray-400 hover:text-primary">
 <i class="fas fa-edit"></i>
 </button>
 <button class="text-gray-400 hover:text-primary">
 <i class="fas fa-toggle-on"></i>
 </button>
 </div>
 </div>
 <div class="mt-3 flex items-center text-sm text-gray-400">
 <i class="fas fa-clock mr-2"></i>
 <span>Dernière exécution: Aujourd'hui, 18:00</span>
 </div>
 </div>
<!-- Automation Card 2 -->
 <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-blue-500">
 <div class="flex justify-between items-start">
 <div>
 <h3 class="font-medium">Publication Wi-Fi</h3>
 <p class="text-gray-400 text-sm">Poste quand connecté au Wi-Fi</p>
 </div>
 <div class="flex space-x-2">
 <button class="text-gray-400 hover:text-blue-500">
 <i class="fas fa-edit"></i>
 </button>
 <button class="text-gray-400 hover:text-blue-500">
 <i class="fas fa-toggle-on"></i>
 </button>
 </div>
 </div>
 <div class="mt-3 flex items-center text-sm text-gray-400">
 <i class="fas fa-clock mr-2"></i>
 <span>Dernière exécution: Hier, 14:30</span>
 </div>
 </div>
 </div>
 </section>
<!-- TikTok Section -->
 <section class="mb-8">
 <h2 class="text-lg font-semibold mb-4">Publications TikTok</h2>
<!-- Video Queue -->
 <div class="bg-gray-800 rounded-lg p-4 mb-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-medium">File d'attente des vidéos</h3>
 <button class="text-primary hover:underline">Voir tout</button>
 </div>
<div class="overflow-x-auto">
 <div class="flex space-x-4 pb-2">
 <!-- Video Thumbnail 1 -->
 <div class="flex-shrink-0 w-24 h-32 bg-gray-700 rounded-lg relative overflow-hidden">
 <div class="absolute inset-0 flex items-center justify-center">
 <i class="fas fa-play text-primary text-2xl"></i>
 </div>
 <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-1 text-xs">
 <p class="truncate">Vidéo du weekend</p>
 <p class="text-gray-400">Programmé: 18:00</p>
 </div>
 </div>
<!-- Video Thumbnail 2 -->
 <div class="flex-shrink-0 w-24 h-32 bg-gray-700 rounded-lg relative overflow-hidden">
 <div class="absolute inset-0 flex items-center justify-center">
 <i class="fas fa-play text-primary text-2xl"></i>
 </div>
 <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-1 text-xs">
 <p class="truncate">Tutoriel maquillage</p>
 <p class="text-gray-400">En attente</p>
 </div>
 </div>
<!-- Add Video Button -->
 <div class="flex-shrink-0 w-24 h-32 border-2 border-dashed border-gray-600 rounded-lg flex items-center justify-center">
 <button class="text-gray-400 hover:text-primary">
 <i class="fas fa-plus text-2xl"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Quick Stats -->
 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
 <div class="bg-gray-800 p-4 rounded-lg">
 <p class="text-gray-400 text-sm">Vidéos programmées</p>
 <p class="text-xl font-bold">5</p>
 </div>
 <div class="bg-gray-800 p-4 rounded-lg">
 <p class="text-gray-400 text-sm">Vidéos publiées</p>
 <p class="text-xl font-bold">12</p>
 </div>
 <div class="bg-gray-800 p-4 rounded-lg">
 <p class="text-gray-400 text-sm">Vues totales</p>
 <p class="text-xl font-bold">24.5K</p>
 </div>
 <div class="bg-gray-800 p-4 rounded-lg">
 <p class="text-gray-400 text-sm">Nouveaux abonnés</p>
 <p class="text-xl font-bold">+342</p>
 </div>
 </div>
 </section>
<!-- Activity Log -->
 <section>
 <h2 class="text-lg font-semibold mb-4">Journal d'activité</h2>
<div class="bg-gray-800 rounded-lg p-4">
 <div class="flex justify-between items-center mb-4">
 <h3 class="font-medium">Historique des actions</h3>
 <button class="text-primary hover:underline">Filtrer</button>
 </div>
<div class="space-y-4 max-h-96 overflow-y-auto">
 <!-- Log Entry 1 -->
 <div class="border-b border-gray-700 pb-3">
 <div class="flex justify-between">
 <p class="font-medium">Publication TikTok réussie</p>
 <p class="text-gray-400 text-sm">Aujourd'hui, 18:00</p>
 </div>
 <p class="text-gray-400 text-sm mt-1">"Vidéo du weekend" publiée avec 5 hashtags</p>
 </div>
<!-- Log Entry 2 -->
 <div class="border-b border-gray-700 pb-3">
 <div class="flex justify-between">
 <p class="font-medium">Nouvelle vidéo ajoutée</p>
 <p class="text-gray-400 text-sm">Aujourd'hui, 15:30</p>
 </div>
 <p class="text-gray-400 text-sm mt-1">"Tutoriel maquillage" ajoutée à la file d'attente</p>
 </div>
<!-- Log Entry 3 -->
 <div class="border-b border-gray-700 pb-3">
 <div class="flex justify-between">
 <p class="font-medium">Publication TikTok réussie</p>
 <p class="text-gray-400 text-sm">Hier, 18:00</p>
 </div>
 <p class="text-gray-400 text-sm mt-1">"Aperçu du produit" publiée avec 3 hashtags</p>
 </div>
<!-- Log Entry 4 -->
 <div class="border-b border-gray-700 pb-3">
 <div class="flex justify-between">
 <p class="font-medium">Automatisation créée</p>
 <p class="text-gray-400 text-sm">Hier, 12:15</p>
 </div>
 <p class="text-gray-400 text-sm mt-1">"Publication Wi-Fi" configurée</p>
 </div>
 </div>
 </div>
 </section>
 </main>
<!-- Bottom Navigation -->
 <nav class="fixed bottom-0 left-0 right-0 bg-darker border-t border-gray-800 flex justify-around py-3">
 <a href="#" class="flex flex-col items-center text-primary">
 <i class="fas fa-home text-xl"></i>
 <span class="text-xs mt-1">Accueil</span>
 </a>
 <a href="#" class="flex flex-col items-center text-gray-400 hover:text-primary">
 <i class="fas fa-list text-xl"></i>
 <span class="text-xs mt-1">Automatisations</span>
 </a>
 <a href="#" class="flex flex-col items-center text-gray-400 hover:text-primary">
 <i class="fab fa-tiktok text-xl"></i>
 <span class="text-xs mt-1">TikTok</span>
 </a>
 <a href="#" class="flex flex-col items-center text-gray-400 hover:text-primary">
 <i class="fas fa-history text-xl"></i>
 <span class="text-xs mt-1">Journal</span>
 </a>
 </nav>
<!-- New Automation Modal -->
 <div id="automationModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
 <div class="bg-gray-800 rounded-lg w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto">
 <div class="p-4 border-b border-gray-700 flex justify-between items-center">
 <h3 class="text-lg font-semibold">Nouvelle automatisation</h3>
 <button id="closeModalBtn" class="text-gray-400 hover:text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="p-4">
 <div class="mb-6">
 <label class="block text-gray-400 mb-2">Nom de l'automatisation</label>
 <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-primary">
 </div>
<div class="mb-6">
 <label class="block text-gray-400 mb-2">Type d'automatisation</label>
 <div class="grid grid-cols-2 gap-3">
 <button class="bg-gray-700 hover:bg-gray-600 p-3 rounded-lg flex flex-col items-center">
 <i class="fab fa-tiktok text-primary text-2xl mb-2"></i>
 <span>Publication TikTok</span>
 </button>
 <button class="bg-gray-700 hover:bg-gray-600 p-3 rounded-lg flex flex-col items-center">
 <i class="fas fa-clock text-blue-500 text-2xl mb-2"></i>
 <span>Déclencheur horaire</span>
 </button>
 <button class="bg-gray-700 hover:bg-gray-600 p-3 rounded-lg flex flex-col items-center">
 <i class="fas fa-wifi text-green-500 text-2xl mb-2"></i>
 <span>Connexion Wi-Fi</span>
 </button>
 <button class="bg-gray-700 hover:bg-gray-600 p-3 rounded-lg flex flex-col items-center">
 <i class="fas fa-map-marker-alt text-yellow-500 text-2xl mb-2"></i>
 <span>Localisation</span>
 </button>
 </div>
 </div>
<div class="mb-6">
 <label class="block text-gray-400 mb-2">Actions</label>
 <div class="space-y-3">
 <div class="bg-gray-700 p-3 rounded-lg flex items-center justify-between">
 <div class="flex items-center">
 <i class="fab fa-tiktok text-primary mr-3"></i>
 <span>Publier sur TikTok</span>
 </div>
 <i class="fas fa-chevron-right text-gray-400"></i>
 </div>
 <div class="bg-gray-700 p-3 rounded-lg flex items-center justify-between">
 <div class="flex items-center">
 <i class="fas fa-envelope text-blue-500 mr-3"></i>
 <span>Envoyer un SMS/Email</span>
 </div>
 <i class="fas fa-chevron-right text-gray-400"></i>
 </div>
 <div class="bg-gray-700 p-3 rounded-lg flex items-center justify-between">
 <div class="flex items-center">
 <i class="fas fa-power-off text-green-500 mr-3"></i>
 <span>Activer/Désactiver Wi-Fi</span>
 </div>
 <i class="fas fa-chevron-right text-gray-400"></i>
 </div>
 </div>
 </div>
<button class="w-full bg-primary hover:bg-red-600 text-white py-3 rounded-lg font-medium">
 Créer l'automatisation
 </button>
 </div>
 </div>
 </div>
<!-- Notification -->
 <div id="notification" class="fixed bottom-20 right-4 bg-gray-800 border-l-4 border-primary p-3 rounded-lg shadow-lg notification hidden max-w-xs">
 <div class="flex items-start">
 <i class="fas fa-check-circle text-primary mr-2 mt-1"></i>
 <div>
 <p class="font-medium">Publication réussie</p>
 <p class="text-gray-400 text-sm">Votre vidéo TikTok a été publiée avec succès</p>
 </div>
 </div>
 </div>
<script>
 // Theme toggle
 const themeToggle = document.getElementById('themeToggle');
 const body = document.body;
themeToggle.addEventListener('click', () => {
 body.classList.toggle('dark');
 if (body.classList.contains('dark')) {
 themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
 } else {
 themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
 }
 });
// Modal handling
 const newAutomationBtn = document.getElementById('newAutomationBtn');
 const automationModal = document.getElementById('automationModal');
 const closeModalBtn = document.getElementById('closeModalBtn');
newAutomationBtn.addEventListener('click', () => {
 automationModal.classList.remove('hidden');
 });
closeModalBtn.addEventListener('click', () => {
 automationModal.classList.add('hidden');
 });
// Show notification (demo)
 setTimeout(() => {
 const notification = document.getElementById('notification');
 notification.classList.remove('hidden');
setTimeout(() => {
 notification.classList.add('hidden');
 }, 5000);
 }, 2000);
// Simulate TikTok API connection
 function connectToTikTokAPI() {
 // In a real app, this would use OAuth to connect to TikTok's API
 console.log("Connexion à l'API TikTok...");
 // Store credentials securely (in a real app, use encrypted storage)
 localStorage.setItem('tiktok_connected', 'true');
 showCustomNotification("Connecté à TikTok avec succès", "success");
 }
function showCustomNotification(message, type = "success") {
 const notification = document.createElement('div');
 notification.className = `fixed bottom-20 right-4 bg-gray-800 border-l-4 border-${type === 'success' ? 'primary' : 'red-500'} p-3 rounded-lg shadow-lg notification max-w-xs`;
 notification.innerHTML = `
 <div class="flex items-start">
 <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} text-${type === 'success' ? 'primary' : 'red-500'} mr-2 mt-1"></i>
 <div>
 <p class="font-medium">${type === 'success' ? 'Succès' : 'Erreur'}</p>
 <p class="text-gray-400 text-sm">${message}</p>
 </div>
 </div>
 `;
document.body.appendChild(notification);
 setTimeout(() => {
 notification.remove();
 }, 5000);
 }
// For demo purposes, simulate TikTok connection
 if (!localStorage.getItem('tiktok_connected')) {
 setTimeout(() => {
 connectToTikTokAPI();
 }, 3000);
 }
 </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=Chasme/autotik" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>