Spaces:

martianband1t
/

ninjacaller

Running

App Files Files Community

martianband1t commited on Jun 12

Commit

d82b25a

verified ·

1 Parent(s): d54fd6b

verifie le code , analyse les erreur et corrige les a partir des bonnes pratiques de DEVops - Follow Up Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +356 -19
prompts.txt +4 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ninjacaller
-emoji: 😻
-colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ninjacaller
+emoji: 🐳
+colorFrom: gray
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,356 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+impemente un menu
+implemente les pages et leurs contenu des boutons créé en bas de la page
+il y a des erreur lorsque j'appuie sur les boutons
+verifie le code , analyse les erreur et corrige les a partir des bonnes pratiques de DEVops