|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Créer un événement</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> |
|
|
|
|
|
input[type="date"]::-webkit-calendar-picker-indicator, |
|
|
input[type="time"]::-webkit-calendar-picker-indicator { |
|
|
filter: invert(0.5); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> |
|
|
<div class="w-full max-w-2xl bg-white rounded-xl shadow-lg overflow-hidden animate-fade-in"> |
|
|
|
|
|
<div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold">Créer un nouvel événement</h1> |
|
|
<p class="text-blue-100">Remplissez les détails de votre événement</p> |
|
|
</div> |
|
|
<div class="bg-white bg-opacity-20 p-3 rounded-full"> |
|
|
<i class="fas fa-calendar-plus text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<form class="p-6 space-y-6"> |
|
|
|
|
|
<div> |
|
|
<label for="category" class="block text-gray-700 font-medium">Catégorie <span class="text-red-500">*</span></label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-tag text-gray-400"></i> |
|
|
</div> |
|
|
<select id="category" name="category" required |
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="Forum">Forum</option> |
|
|
<option value="Concours">Concours</option> |
|
|
<option value="Barbecue">Barbecue</option> |
|
|
<option value="Stage">Stage</option> |
|
|
<option value="Entrainement">Entrainement</option> |
|
|
<option value="Autre">Autre</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="title" class="block text-gray-700 font-medium">Titre de l'événement <span class="text-red-500">*</span></label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-heading text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" id="title" name="title" required |
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
placeholder="Donnez un titre accrocheur"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="description" class="block text-gray-700 font-medium">Description</label> |
|
|
<div class="mt-1"> |
|
|
<textarea id="description" name="description" rows="4" |
|
|
class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
placeholder="Décrivez votre événement en détail..."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="date" class="block text-gray-700 font-medium">Date <span class="text-red-500">*</span></label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-calendar-day text-gray-400"></i> |
|
|
</div> |
|
|
<input type="date" id="date" name="date" required |
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="time" class="block text-gray-700 font-medium">Heure <span class="text-red-500">*</span></label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-clock text-gray-400"></i> |
|
|
</div> |
|
|
<input type="time" id="time" name="time" required |
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="location" class="block text-gray-700 font-medium">Lieu <span class="text-red-500">*</span></label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-map-marker-alt text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" id="location" name="location" required |
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
placeholder="Où se déroulera l'événement ?"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="price" class="block text-gray-700 font-medium">Tarif</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-euro-sign text-gray-400"></i> |
|
|
</div> |
|
|
<input type="number" id="price" name="price" min="0" step="0.01" |
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" |
|
|
placeholder="0.00 (gratuit si laissé vide)"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> |
|
|
<span class="text-gray-500">€</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-1 text-sm text-gray-500">Laissez vide pour un événement gratuit</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium">Image de l'événement</label> |
|
|
<div class="mt-1 w-full"> |
|
|
<label for="image-upload" class="cursor-pointer"> |
|
|
<div class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100"> |
|
|
<i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i> |
|
|
<p class="text-sm text-gray-500">Cliquez pour téléverser une image</p> |
|
|
<p class="text-xs text-gray-400">(Optionnel)</p> |
|
|
</div> |
|
|
<input id="image-upload" name="image" type="file" class="hidden" accept="image/*"> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pt-4 flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-3"> |
|
|
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
Annuler |
|
|
</button> |
|
|
<button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
Créer l'événement |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('image-upload').addEventListener('change', function(e) { |
|
|
const file = e.target.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(event) { |
|
|
const preview = document.createElement('div'); |
|
|
preview.className = 'w-full h-32 bg-cover bg-center rounded-lg'; |
|
|
preview.style.backgroundImage = `url(${event.target.result})`; |
|
|
|
|
|
const uploadContainer = document.querySelector('label[for="image-upload"] div'); |
|
|
uploadContainer.innerHTML = ''; |
|
|
uploadContainer.appendChild(preview); |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
}); |
|
|
</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=jerome-dreville/arc-calendrier-add" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
