|
|
{% extends "admin/base.html" %} |
|
|
|
|
|
{% block title %}Paramètres Généraux{% endblock %} |
|
|
{% block page_title %}Paramètres Généraux{% endblock %} |
|
|
|
|
|
{% block content %} |
|
|
<div class="max-w-4xl"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h1 class="text-2xl font-bold text-white mb-2"> |
|
|
<i class="fas fa-sliders-h mr-3 text-yellow-400"></i> |
|
|
Configuration de l'Application |
|
|
</h1> |
|
|
<p class="text-gray-400"> |
|
|
Modifiez dynamiquement le nom, le logo et les paramètres d'affichage de votre application. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<form method="POST" enctype="multipart/form-data" class="space-y-8"> |
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token is defined else '' }}"> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl border border-blue-500/30 p-6"> |
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center flex-shrink-0"> |
|
|
<i class="fas fa-users text-blue-400 text-xl"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="text-lg font-semibold text-white mb-1">Compteur d'Utilisateurs (Landing Page)</h3> |
|
|
<p class="text-sm text-gray-400 mb-4"> |
|
|
Configurez le nombre d'utilisateurs affiché sur la page d'accueil. Ce nombre sera additionné aux vraies inscriptions. |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700"> |
|
|
<p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Utilisateurs Réels</p> |
|
|
<p class="text-2xl font-bold text-green-400">{{ real_user_count }}</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700"> |
|
|
<p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Utilisateurs Ajoutés</p> |
|
|
<p class="text-2xl font-bold text-yellow-400">{{ current_fake_user_count }}</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700"> |
|
|
<p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Total Affiché</p> |
|
|
<p class="text-2xl font-bold text-blue-400">{{ displayed_user_count }}</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-md"> |
|
|
<label for="fake_user_count" class="block text-sm font-medium text-gray-300 mb-2"> |
|
|
Nombre d'utilisateurs à ajouter |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<input type="number" |
|
|
id="fake_user_count" |
|
|
name="fake_user_count" |
|
|
value="{{ current_fake_user_count }}" |
|
|
min="0" |
|
|
placeholder="Ex: 10000" |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3"> |
|
|
<i class="fas fa-plus text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-xs text-gray-500"> |
|
|
Ce nombre sera ajouté aux {{ real_user_count }} utilisateurs réels pour l'affichage public. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 p-4 bg-gray-900/50 rounded-lg border border-gray-700"> |
|
|
<p class="text-xs text-gray-400 mb-2">Aperçu sur la landing page:</p> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-3xl font-bold text-yellow-400" id="preview_user_count">{{ displayed_user_count }}</span> |
|
|
<span class="text-gray-400">Investisseurs</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl border border-gray-700 p-6"> |
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center flex-shrink-0"> |
|
|
<i class="fas fa-font text-purple-400 text-xl"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="text-lg font-semibold text-white mb-1">Nom de l'Application</h3> |
|
|
<p class="text-sm text-gray-400 mb-4"> |
|
|
Ce nom sera affiché dans la navigation, le pied de page et les titres de pages. |
|
|
</p> |
|
|
<div class="max-w-md"> |
|
|
<label for="app_name" class="block text-sm font-medium text-gray-300 mb-2"> |
|
|
Nom de l'application |
|
|
</label> |
|
|
<input type="text" |
|
|
id="app_name" |
|
|
name="app_name" |
|
|
value="{{ current_app_name }}" |
|
|
placeholder="Ex: Apex Ores, MonApp, etc." |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-colors"> |
|
|
<p class="mt-2 text-xs text-gray-500"> |
|
|
Maximum 50 caractères. Laissez vide pour utiliser "Apex Ores" par défaut. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl border border-gray-700 p-6"> |
|
|
<div class="flex items-start space-x-4"> |
|
|
<div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0"> |
|
|
<i class="fas fa-image text-green-400 text-xl"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="text-lg font-semibold text-white mb-1">Logo de l'Application</h3> |
|
|
<p class="text-sm text-gray-400 mb-4"> |
|
|
Le logo sera affiché dans la barre de navigation et le pied de page. |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Logo actuel</label> |
|
|
<div class="flex items-center space-x-4"> |
|
|
{% if current_app_logo %} |
|
|
<div class="w-16 h-16 rounded-lg overflow-hidden border border-gray-600"> |
|
|
<img src="{{ current_app_logo }}" alt="Logo actuel" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="text-sm text-gray-400"> |
|
|
<p>Logo personnalisé</p> |
|
|
<button type="submit" name="remove_logo" value="1" class="text-red-400 hover:text-red-300 text-xs mt-1"> |
|
|
<i class="fas fa-trash mr-1"></i> Supprimer le logo |
|
|
</button> |
|
|
</div> |
|
|
{% else %} |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-coins text-white text-2xl"></i> |
|
|
</div> |
|
|
<div class="text-sm text-gray-400"> |
|
|
<p>Logo par défaut</p> |
|
|
<p class="text-xs">Aucun logo personnalisé</p> |
|
|
</div></p> |
|
|
{% endif %} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-md"> |
|
|
<label for="app_logo" class="block text-sm font-medium text-gray-300 mb-2"> |
|
|
URL du nouveau logo |
|
|
</label> |
|
|
<input type="url" |
|
|
id="app_logo" |
|
|
name="app_logo" |
|
|
value="{{ current_app_logo or '' }}" |
|
|
placeholder="https://exemple.com/logo.png" |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 transition-colors"> |
|
|
<p class="mt-2 text-xs text-gray-500"> |
|
|
Entrez l'URL complète de votre logo (format PNG, JPG ou SVG recommandé). Taille recommandée: 200x200 pixels. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4 max-w-md"> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-0 flex items-center"> |
|
|
<div class="w-full border-t border-gray-600"></div> |
|
|
</div> |
|
|
<div class="relative flex justify-center text-sm"> |
|
|
<span class="px-2 bg-gray-800 text-gray-400">ou</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<label for="logo_file" class="block text-sm font-medium text-gray-300 mb-2"> |
|
|
Téléverser un fichier |
|
|
</label> |
|
|
<div class="flex items-center justify-center w-full"> |
|
|
<label for="logo_file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-600 border-dashed rounded-lg cursor-pointer bg-gray-700/50 hover:bg-gray-700 transition-colors"> |
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6"> |
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
|
|
<p class="mb-2 text-sm text-gray-400"> |
|
|
<span class="font-semibold text-yellow-400">Cliquez pour téléverser</span> |
|
|
</p> |
|
|
<p class="text-xs text-gray-500">PNG, JPG ou SVG (Max. 2MB)</p> |
|
|
</div> |
|
|
<input id="logo_file" name="logo_file" type="file" class="hidden" accept="image/png,image/jpeg,image/svg+xml"> |
|
|
</label> |
|
|
</div> |
|
|
<p id="file_name" class="mt-2 text-sm text-yellow-400 hidden"></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl border border-gray-700 p-6"> |
|
|
<h3 class="text-lg font-semibold text-white mb-4"> |
|
|
<i class="fas fa-eye mr-2 text-green-400"></i> |
|
|
Aperçu en Direct |
|
|
</h3> |
|
|
<div class="bg-gray-900 rounded-lg p-4"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div id="preview_logo" class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center overflow-hidden"> |
|
|
{% if current_app_logo %} |
|
|
<img src="{{ current_app_logo }}" alt="Logo" class="w-full h-full object-cover" id="preview_logo_img"> |
|
|
{% else %} |
|
|
<i class="fas fa-coins text-white text-xl" id="preview_logo_icon"></i> |
|
|
{% endif %} |
|
|
</div> |
|
|
<h1 id="preview_name" class="text-2xl font-black bg-gradient-to-r from-yellow-400 to-yellow-600 text-transparent bg-clip-text"> |
|
|
{{ current_app_name }} |
|
|
</h1> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-3"> |
|
|
Voici comment le logo et le nom apparaîtront dans la barre de navigation. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between pt-4"> |
|
|
<p class="text-sm text-gray-400"> |
|
|
<i class="fas fa-info-circle mr-1"></i> |
|
|
Les modifications seront appliquées immédiatement sur tout le site. |
|
|
</p> |
|
|
<button type="submit" |
|
|
class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 text-gray-900 font-bold rounded-lg transition-all duration-300 shadow-lg hover:shadow-yellow-500/25"> |
|
|
<i class="fas fa-save mr-2"></i> |
|
|
Enregistrer les Modifications |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
{% block scripts %} |
|
|
<script> |
|
|
|
|
|
const appNameInput = document.getElementById('app_name'); |
|
|
const previewName = document.getElementById('preview_name'); |
|
|
|
|
|
appNameInput.addEventListener('input', function() { |
|
|
previewName.textContent = this.value || 'Apex Ores'; |
|
|
}); |
|
|
|
|
|
|
|
|
const appLogoInput = document.getElementById('app_logo'); |
|
|
const previewLogo = document.getElementById('preview_logo'); |
|
|
|
|
|
appLogoInput.addEventListener('input', function() { |
|
|
if (this.value) { |
|
|
previewLogo.innerHTML = `<img src="${this.value}" alt="Logo" class="w-full h-full object-cover" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-exclamation-triangle text-red-400 text-xl\\'></i>'">`; |
|
|
} else { |
|
|
previewLogo.innerHTML = '<i class="fas fa-coins text-white text-xl"></i>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const fileInput = document.getElementById('logo_file'); |
|
|
const fileNameDisplay = document.getElementById('file_name'); |
|
|
|
|
|
fileInput.addEventListener('change', function() { |
|
|
if (this.files && this.files[0]) { |
|
|
fileNameDisplay.textContent = 'Fichier sélectionné: ' + this.files[0].name; |
|
|
fileNameDisplay.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
previewLogo.innerHTML = `<img src="${e.target.result}" alt="Logo" class="w-full h-full object-cover">`; |
|
|
}; |
|
|
reader.readAsDataURL(this.files[0]); |
|
|
} else { |
|
|
fileNameDisplay.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const fakeUserCountInput = document.getElementById('fake_user_count'); |
|
|
const previewUserCount = document.getElementById('preview_user_count'); |
|
|
const realUserCount = {{ real_user_count }}; |
|
|
|
|
|
fakeUserCountInput.addEventListener('input', function() { |
|
|
const fakeCount = parseInt(this.value) || 0; |
|
|
const total = realUserCount + fakeCount; |
|
|
previewUserCount.textContent = total.toLocaleString('fr-FR'); |
|
|
}); |
|
|
</script> |
|
|
{% endblock %} |
|
|
{% endblock %} |
|
|
|
