|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DataCollect - Application de Collecte de Données</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> |
|
|
.form-builder { |
|
|
min-height: 500px; |
|
|
border: 2px dashed #ccc; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
.form-builder:hover { |
|
|
border-color: #4f46e5; |
|
|
} |
|
|
.question-item { |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.question-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.drag-enter { |
|
|
border: 2px dashed #4f46e5; |
|
|
background-color: #eef2ff; |
|
|
} |
|
|
.chart-container { |
|
|
height: 400px; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.3s ease-out forwards; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-indigo-600 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-database text-2xl"></i> |
|
|
<h1 class="text-2xl font-bold">DataCollect</h1> |
|
|
</div> |
|
|
<nav> |
|
|
<ul class="flex space-x-6"> |
|
|
<li><a href="#" class="hover:text-indigo-200 transition" onclick="showSection('dashboard')"><i class="fas fa-home mr-1"></i> Tableau de bord</a></li> |
|
|
<li><a href="#" class="hover:text-indigo-200 transition" onclick="showSection('forms')"><i class="fas fa-list mr-1"></i> Mes formulaires</a></li> |
|
|
<li><a href="#" class="hover:text-indigo-200 transition" onclick="showSection('responses')"><i class="fas fa-chart-bar mr-1"></i> Réponses</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-indigo-700 hover:bg-indigo-800 px-4 py-2 rounded-lg transition flex items-center" onclick="showSection('new-form')"> |
|
|
<i class="fas fa-plus mr-2"></i> Nouveau formulaire |
|
|
</button> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-400 flex items-center justify-center cursor-pointer"> |
|
|
<i class="fas fa-user text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-8"> |
|
|
|
|
|
<section id="dashboard" class="section"> |
|
|
<div class="mb-8"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">Tableau de bord</h2> |
|
|
<p class="text-gray-600">Vue d'ensemble de vos activités de collecte de données</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Formulaires actifs</p> |
|
|
<h3 class="text-3xl font-bold text-indigo-600" id="active-forms-count">5</h3> |
|
|
</div> |
|
|
<div class="bg-indigo-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-file-alt text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-4">+2 depuis la semaine dernière</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Réponses totales</p> |
|
|
<h3 class="text-3xl font-bold text-green-600" id="total-responses">124</h3> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-check-circle text-green-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-4">+24% depuis hier</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<p class="text-gray-500">Taux de complétion</p> |
|
|
<h3 class="text-3xl font-bold text-blue-600" id="completion-rate">78%</h3> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-chart-line text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-4">Moyenne globale</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Activité récente</h3> |
|
|
<select class="border rounded-lg px-3 py-2 text-sm"> |
|
|
<option>7 derniers jours</option> |
|
|
<option>30 derniers jours</option> |
|
|
<option>90 derniers jours</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="activityChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4">Formulaires récents</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition"> |
|
|
<div> |
|
|
<h4 class="font-medium">Enquête de satisfaction</h4> |
|
|
<p class="text-sm text-gray-500">12 questions • 56 réponses</p> |
|
|
</div> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 transition"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition"> |
|
|
<div> |
|
|
<h4 class="font-medium">Formulaire d'inscription</h4> |
|
|
<p class="text-sm text-gray-500">8 questions • 34 réponses</p> |
|
|
</div> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 transition"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition"> |
|
|
<div> |
|
|
<h4 class="font-medium">Évaluation produit</h4> |
|
|
<p class="text-sm text-gray-500">10 questions • 28 réponses</p> |
|
|
</div> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 transition"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4">Réponses récentes</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Jean Dupont</h4> |
|
|
<p class="text-sm text-gray-500">A répondu à "Enquête de satisfaction"</p> |
|
|
</div> |
|
|
<div class="ml-auto text-sm text-gray-500">Il y a 2h</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Marie Lambert</h4> |
|
|
<p class="text-sm text-gray-500">A répondu à "Formulaire d'inscription"</p> |
|
|
</div> |
|
|
<div class="ml-auto text-sm text-gray-500">Il y a 5h</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Thomas Martin</h4> |
|
|
<p class="text-sm text-gray-500">A répondu à "Évaluation produit"</p> |
|
|
</div> |
|
|
<div class="ml-auto text-sm text-gray-500">Aujourd'hui</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="forms" class="section hidden"> |
|
|
<div class="mb-8"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">Mes formulaires</h2> |
|
|
<p class="text-gray-600">Gérez tous vos formulaires de collecte de données</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div class="relative w-64"> |
|
|
<input type="text" placeholder="Rechercher un formulaire..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center" onclick="showSection('new-form')"> |
|
|
<i class="fas fa-plus mr-2"></i> Créer un formulaire |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Enquête de satisfaction</h3> |
|
|
<p class="text-sm text-gray-500">12 questions</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600 transition"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Collectez les retours de vos clients sur votre service.</p> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<span class="text-indigo-600 font-medium">56 réponses</span> |
|
|
<span class="text-gray-500">Dernière mise à jour: 12/06/2023</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Formulaire d'inscription</h3> |
|
|
<p class="text-sm text-gray-500">8 questions</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600 transition"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Inscrivez de nouveaux membres à votre programme.</p> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<span class="text-indigo-600 font-medium">34 réponses</span> |
|
|
<span class="text-gray-500">Dernière mise à jour: 05/06/2023</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Évaluation produit</h3> |
|
|
<p class="text-sm text-gray-500">10 questions</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600 transition"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Évaluez la satisfaction des utilisateurs avec votre produit.</p> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<span class="text-indigo-600 font-medium">28 réponses</span> |
|
|
<span class="text-gray-500">Dernière mise à jour: 30/05/2023</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Sondage employés</h3> |
|
|
<p class="text-sm text-gray-500">15 questions</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600 transition"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Mesurez le moral et la satisfaction de vos employés.</p> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<span class="text-indigo-600 font-medium">42 réponses</span> |
|
|
<span class="text-gray-500">Dernière mise à jour: 22/05/2023</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800 group-hover:text-indigo-600 transition">Formulaire de contact</h3> |
|
|
<p class="text-sm text-gray-500">5 questions</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600 transition"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Permettez aux visiteurs de votre site de vous contacter.</p> |
|
|
<div class="flex justify-between items-center text-sm"> |
|
|
<span class="text-indigo-600 font-medium">19 réponses</span> |
|
|
<span class="text-gray-500">Dernière mise à jour: 15/05/2023</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition group border-2 border-dashed border-gray-300 flex flex-col items-center justify-center"> |
|
|
<i class="fas fa-plus text-4xl text-gray-400 mb-3"></i> |
|
|
<h3 class="text-lg font-medium text-gray-600">Créer un nouveau formulaire</h3> |
|
|
<button class="mt-4 text-indigo-600 hover:text-indigo-800 transition" onclick="showSection('new-form')"> |
|
|
Commencer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="responses" class="section hidden"> |
|
|
<div class="mb-8"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">Réponses</h2> |
|
|
<p class="text-gray-600">Analysez les données collectées à partir de vos formulaires</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md mb-8"> |
|
|
<div class="p-6 border-b"> |
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Enquête de satisfaction</h3> |
|
|
<p class="text-gray-600">56 réponses collectées</p> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<select class="border rounded-lg px-3 py-2 text-sm"> |
|
|
<option>Toutes les questions</option> |
|
|
<option>Question 1</option> |
|
|
<option>Question 2</option> |
|
|
<option>Question 3</option> |
|
|
</select> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center"> |
|
|
<i class="fas fa-download mr-2"></i> Exporter |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="mb-8"> |
|
|
<h4 class="font-medium text-gray-800 mb-4">1. Comment évaluez-vous notre service ?</h4> |
|
|
<div class="chart-container"> |
|
|
<canvas id="question1Chart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="font-medium text-gray-800 mb-4">2. Quel aspect de notre service appréciez-vous le plus ?</h4> |
|
|
<div class="chart-container"> |
|
|
<canvas id="question2Chart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h4 class="font-medium text-gray-800 mb-4">3. Recommanderiez-vous notre service à d'autres ?</h4> |
|
|
<div class="chart-container"> |
|
|
<canvas id="question3Chart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800 mb-4">Réponses individuelles</h4> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Évaluation</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aspect préféré</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recommandation</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Commentaires</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4/5</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rapidité</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oui</td> |
|
|
<td class="px-6 py-4 text-sm text-gray-500">Très bon service dans l'ensemble</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5/5</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Support client</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oui</td> |
|
|
<td class="px-6 py-4 text-sm text-gray-500">L'équipe est très réactive et professionnelle</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3/5</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Prix</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Peut-être</td> |
|
|
<td class="px-6 py-4 text-sm text-gray-500">Un peu cher pour ce que c'est</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">09/06/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">5/5</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Facilité d'utilisation</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oui</td> |
|
|
<td class="px-6 py-4 text-sm text-gray-500">-</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="new-form" class="section hidden"> |
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">Créer un nouveau formulaire</h2> |
|
|
<p class="text-gray-600">Concevez votre formulaire de collecte de données</p> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded-lg transition flex items-center"> |
|
|
<i class="fas fa-save mr-2"></i> Enregistrer |
|
|
</button> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center"> |
|
|
<i class="fas fa-eye mr-2"></i> Prévisualiser |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md mb-6"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Titre du formulaire</label> |
|
|
<input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Ex: Enquête de satisfaction" value="Nouveau formulaire de collecte"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Description</label> |
|
|
<textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="2" placeholder="Décrivez l'objectif de ce formulaire"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md mb-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Paramètres du formulaire</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2">Date de début</label> |
|
|
<input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2">Date de fin</label> |
|
|
<input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600"> |
|
|
<span class="ml-2 text-gray-700">Rendre les réponses anonymes</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Questions</h3> |
|
|
<div class="relative"> |
|
|
<button id="add-question-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Ajouter une question |
|
|
</button> |
|
|
<div id="question-type-menu" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden"> |
|
|
<div class="py-1"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('text')"><i class="fas fa-font mr-2"></i> Texte court</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('textarea')"><i class="fas fa-align-left mr-2"></i> Texte long</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('radio')"><i class="fas fa-dot-circle mr-2"></i> Choix unique</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('checkbox')"><i class="fas fa-check-square mr-2"></i> Choix multiples</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('dropdown')"><i class="fas fa-caret-down mr-2"></i> Liste déroulante</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="addQuestion('rating')"><i class="fas fa-star mr-2"></i> Évaluation</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="form-builder" class="form-builder p-4 rounded-lg"> |
|
|
<div id="no-questions" class="text-center py-10 text-gray-500"> |
|
|
<i class="fas fa-question-circle text-4xl mb-3"></i> |
|
|
<p>Commencez par ajouter votre première question</p> |
|
|
</div> |
|
|
|
|
|
<div id="questions-container" class="space-y-4 hidden"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md sticky top-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Options de publication</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2">Lien de partage</label> |
|
|
<div class="flex"> |
|
|
<input type="text" class="flex-grow px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" value="https://datacollect.com/form/abc123" readonly> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-r-lg transition"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2">Intégration</label> |
|
|
<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>Sélectionnez une option</option> |
|
|
<option>Code HTML</option> |
|
|
<option>Lien direct</option> |
|
|
<option>API</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600"> |
|
|
<span class="ml-2 text-gray-700">Activer les notifications par email</span> |
|
|
</label> |
|
|
</div> |
|
|
<div class="pt-4"> |
|
|
<button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg transition flex items-center justify-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Publier le formulaire |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 pt-6 border-t"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Aperçu du formulaire</h3> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="mb-4"> |
|
|
<h4 class="font-medium text-gray-800 mb-1">Nouveau formulaire de collecte</h4> |
|
|
<p class="text-sm text-gray-500">Description du formulaire</p> |
|
|
</div> |
|
|
<div id="form-preview" class="space-y-3"> |
|
|
<div class="bg-white p-3 rounded border"> |
|
|
<p class="text-sm text-gray-500">Question 1</p> |
|
|
</div> |
|
|
<div class="bg-white p-3 rounded border"> |
|
|
<p class="text-sm text-gray-500">Question 2</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition text-sm"> |
|
|
Soumettre |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-100 py-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<p class="text-gray-600">© 2023 DataCollect. Tous droits réservés.</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Conditions d'utilisation</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Politique de confidentialité</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Aide</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
function showSection(sectionId) { |
|
|
document.querySelectorAll('.section').forEach(section => { |
|
|
section.classList.add('hidden'); |
|
|
}); |
|
|
document.getElementById(sectionId).classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function initCharts() { |
|
|
|
|
|
const activityCtx = document.getElementById('activityChart').getContext('2d'); |
|
|
const activityChart = new Chart(activityCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'], |
|
|
datasets: [{ |
|
|
label: 'Réponses', |
|
|
data: [12, 19, 8, 15, 22, 18, 24], |
|
|
backgroundColor: 'rgba(79, 70, 229, 0.1)', |
|
|
borderColor: 'rgba(79, 70, 229, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.4, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const q1Ctx = document.getElementById('question1Chart').getContext('2d'); |
|
|
const q1Chart = new Chart(q1Ctx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['1 (Mauvais)', '2', '3', '4', '5 (Excellent)'], |
|
|
datasets: [{ |
|
|
label: 'Nombre de réponses', |
|
|
data: [2, 5, 12, 20, 17], |
|
|
backgroundColor: 'rgba(79, 70, 229, 0.7)' |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const q2Ctx = document.getElementById('question2Chart').getContext('2d'); |
|
|
const q2Chart = new Chart(q2Ctx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['Rapidité', 'Support client', 'Prix', 'Facilité d\'utilisation', 'Fonctionnalités'], |
|
|
datasets: [{ |
|
|
data: [22, 18, 8, 24, 12], |
|
|
backgroundColor: [ |
|
|
'rgba(79, 70, 229, 0.7)', |
|
|
'rgba(99, 102, 241, 0.7)', |
|
|
'rgba(129, 140, 248, 0.7)', |
|
|
'rgba(165, 180, 252, 0.7)', |
|
|
'rgba(199, 210, 254, 0.7)' |
|
|
] |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right' |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const q3Ctx = document.getElementById('question3Chart').getContext('2d'); |
|
|
const q3Chart = new Chart(q3Ctx, { |
|
|
type: 'pie', |
|
|
data: { |
|
|
labels: ['Oui', 'Non', 'Peut-être'], |
|
|
datasets: [{ |
|
|
data: [42, 5, 9], |
|
|
backgroundColor: [ |
|
|
'rgba(79, 70, 229, 0.7)', |
|
|
'rgba(239, 68, 68, 0.7)', |
|
|
'rgba(156, 163, 175, 0.7)' |
|
|
] |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right' |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
let questionCount = 0; |
|
|
|
|
|
document.getElementById('add-question-btn').addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
const menu = document.getElementById('question-type-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', function() { |
|
|
document.getElementById('question-type-menu').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
function addQuestion(type) { |
|
|
questionCount++; |
|
|
document.getElementById('no-questions').classList.add('hidden'); |
|
|
document.getElementById('questions-container').classList.remove('hidden'); |
|
|
|
|
|
const questionsContainer = document.getElementById('questions-container'); |
|
|
const questionId = `question-${questionCount}`; |
|
|
|
|
|
let questionHtml = ''; |
|
|
|
|
|
switch(type) { |
|
|
case 'text': |
|
|
questionHtml = ` |
|
|
<div id="${questionId}" class="question-item bg-white p-4 rounded-lg border border-gray-200 fade-in" draggable="true"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div class="w-full"> |
|
|
<input type="text" class="w-full px-3 py-2 border-b border-gray-300 focus:outline-none focus:border-indigo-500 font-medium" placeholder="Question ${questionCount}" value="Question ${questionCount}"> |
|
|
</div> |
|
|
<div class="flex space-x-2 ml-3"> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition" onclick="moveQuestionUp('${questionId}')"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition" onclick="moveQuestionDown('${questionId}')"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600 transition" onclick="removeQuestion('${questionId}')"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Réponse courte" disabled> |
|
|
</div> |
|
|
<div class="mt-3 flex justify-between items-center text-sm"> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="text-gray-500 hover:text-indigo-600 transition"> |
|
|
<i class="fas fa-copy mr-1"></i> Dupliquer |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-indigo-600 transition"> |
|
|
<i class="fas fa-cog mr-1"></i> Paramètres |
|
|
</button> |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Texte court</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'textarea': |
|
|
questionHtml = ` |
|
|
<div id="${questionId}" class="question-item bg-white p-4 rounded-lg border border-gray-200 fade-in" draggable="true"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<div class="w-full"> |
|
|
<input type="text" class="w-full px-3 py-2 border-b border-gray-300 focus:outline-none focus:border-indigo-500 font-medium" placeholder="Question ${questionCount}" value="Question ${questionCount}"> |
|
|
</div> |
|
|
<div class="flex space-x-2 ml-3"> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition" onclick="moveQuestionUp('${questionId}')"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-indigo-600 transition" onclick="moveQuestionDown('${questionId}')"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600 transition" onclick="removeQuestion('${questionId}')"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-2"> |
|
|
<textarea class="w-full px-3 py-2 border rounded |
|
|
</html> |
