Spaces:
Running
Running
verifie le code , analyse les erreur et corrige les a partir des bonnes pratiques de DEVops - Follow Up Deployment
d82b25a
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NinjaCall.ai - Prototype</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: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1E293B', | |
| light: '#F8FAFC' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 1rem; | |
| } | |
| .mobile-frame { | |
| width: 100%; | |
| max-width: 400px; | |
| height: 85vh; | |
| background: white; | |
| border-radius: 40px; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| overflow: hidden; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .screen { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1.5rem; | |
| display: none; | |
| } | |
| .active-screen { | |
| display: block; | |
| } | |
| .circular-progress { | |
| position: relative; | |
| width: 180px; | |
| height: 180px; | |
| border-radius: 50%; | |
| background: conic-gradient(#4F46E5 0deg, #E2E8F0 0deg); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 0 auto; | |
| } | |
| .circular-progress::before { | |
| content: ""; | |
| position: absolute; | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| background: white; | |
| } | |
| .progress-value { | |
| position: relative; | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: #1E293B; | |
| } | |
| .action-card { | |
| transition: all 0.3s ease; | |
| transform: translateY(0); | |
| } | |
| .action-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-item { | |
| transition: all 0.2s ease; | |
| } | |
| .nav-item.active { | |
| color: #4F46E5; | |
| } | |
| .nav-item:hover:not(.active) { | |
| color: #64748B; | |
| } | |
| .form-input:focus { | |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 50px; | |
| height: 24px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #CBD5E1; | |
| transition: .4s; | |
| border-radius: 34px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 16px; | |
| width: 16px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: #4F46E5; | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(26px); | |
| } | |
| .call-btn { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .call-btn::after { | |
| content: ""; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: rotate(30deg); | |
| transition: all 0.6s ease; | |
| } | |
| .call-btn:hover::after { | |
| transform: rotate(30deg) translate(20%, 20%); | |
| } | |
| .ai-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mobile-frame"> | |
| <!-- Status Bar --> | |
| <div class="flex justify-between items-center px-6 pt-4 pb-2 text-sm text-gray-500"> | |
| <span>9:41</span> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-signal"></i> | |
| <i class="fas fa-wifi"></i> | |
| <i class="fas fa-battery-full"></i> | |
| </div> | |
| </div> | |
| <!-- Dashboard Screen --> | |
| <div id="dashboard" class="screen active-screen"> | |
| <div class="flex flex-col items-center mb-8"> | |
| <div class="flex items-center justify-center mb-6"> | |
| <div class="w-12 h-12 rounded-xl bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-dark">NinjaCall.ai</h1> | |
| </div> | |
| <div class="text-center mb-2"> | |
| <h2 class="text-lg font-semibold text-gray-600">Votre performance IA</h2> | |
| <p class="text-sm text-gray-500">Mise à jour: il y a 2 min</p> | |
| </div> | |
| <div class="circular-progress mb-6" style="background: conic-gradient(#4F46E5 252deg, #E2E8F0 0deg)"> | |
| <span class="progress-value">70%</span> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-gray-600 mb-1">Appels réussis ce mois</p> | |
| <div class="flex justify-center items-baseline"> | |
| <span class="text-3xl font-bold text-primary">42</span> | |
| <span class="text-gray-500 ml-1">/60</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Historique Screen --> | |
| <div id="history" class="screen"> | |
| <div class="mb-6"> | |
| <h1 class="text-xl font-bold text-dark mb-4">Historique des appels</h1> | |
| <div class="space-y-3"> | |
| <div class="bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Jean Dupont</span> | |
| <span class="text-sm text-green-600 bg-green-50 px-2 py-1 rounded">Réussi</span> | |
| </div> | |
| <p class="text-sm text-gray-500">15 mars 2023 - 14:30</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Marie Martin</span> | |
| <span class="text-sm text-yellow-600 bg-yellow-50 px-2 py-1 rounded">En attente</span> | |
| </div> | |
| <p class="text-sm text-gray-500">14 mars 2023 - 10:15</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Paramètres Screen --> | |
| <div id="settings" class="screen"> | |
| <div class="mb-6"> | |
| <h1 class="text-xl font-bold text-dark mb-4">Paramètres</h1> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <span>Notifications</span> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Mode sombre</span> | |
| <label class="toggle-switch"> | |
| <input type="checkbox"> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="pt-4 border-t border-gray-100"> | |
| <button class="text-primary font-medium">Changer de mot de passe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profil Screen --> | |
| <div id="profile" class="screen"> | |
| <div class="mb-6"> | |
| <h1 class="text-xl font-bold text-dark mb-4">Mon Profil</h1> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-24 h-24 rounded-full bg-gray-200 mb-4 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-400 text-3xl"></i> | |
| </div> | |
| <h2 class="text-lg font-semibold mb-2">John Doe</h2> | |
| <p class="text-gray-500 mb-6">john.doe@email.com</p> | |
| <button class="bg-primary text-white px-6 py-2 rounded-lg">Éditer le profil</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <div class="flex justify-around items-center border-t border-gray-200 bg-white py-3"> | |
| <a href="#dashboard" class="nav-item active flex flex-col items-center text-xs" onclick="showScreen('dashboard')"> | |
| <i class="fas fa-home text-primary mb-1 text-lg"></i> | |
| <span class="text-primary">Dashboard</span> | |
| </a> | |
| <a href="#history" class="nav-item flex flex-col items-center text-xs text-gray-500" onclick="showScreen('history')"> | |
| <i class="fas fa-history mb-1 text-lg"></i> | |
| <span>Historique</span> | |
| </a> | |
| <a href="#settings" class="nav-item flex flex-col items-center text-xs text-gray-500" onclick="showScreen('settings')"> | |
| <i class="fas fa-cog mb-1 text-lg"></i> | |
| <span>Paramètres</span> | |
| </a> | |
| <a href="#profile" class="nav-item flex flex-col items-center text-xs text-gray-500" onclick="showScreen('profile')"> | |
| <i class="fas fa-user mb-1 text-lg"></i> | |
| <span>Profil</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| function showScreen(screenId) { | |
| // Hide all screens | |
| document.querySelectorAll('.screen').forEach(screen => { | |
| screen.classList.remove('active-screen'); | |
| }); | |
| // Show selected screen | |
| document.getElementById(screenId).classList.add('active-screen'); | |
| // Update all navigation items | |
| document.querySelectorAll('.nav-item').forEach(item => { | |
| item.classList.remove('active', 'text-primary'); | |
| item.classList.add('text-gray-500'); | |
| const icon = item.querySelector('i'); | |
| const text = item.querySelector('span'); | |
| icon.classList.remove('text-primary'); | |
| text.classList.remove('text-primary'); | |
| }); | |
| // Set current nav item as active | |
| const activeNavItem = document.querySelector(`a[href="#${screenId}"]`); | |
| activeNavItem.classList.add('active'); | |
| activeNavItem.classList.remove('text-gray-500'); | |
| activeNavItem.classList.add('text-primary'); | |
| const activeIcon = activeNavItem.querySelector('i'); | |
| const activeText = activeNavItem.querySelector('span'); | |
| activeIcon.classList.add('text-primary'); | |
| activeText.classList.add('text-primary'); | |
| } | |
| </script> | |
| </html> |