Hugging Face's logo

Spaces:
Madaliou
/
moneytransfert
Running

App Files Community
moneytransfert / index.html
Madaliou's picture
Madaliou
undefined - Initial Deployment
2ae3d05 verified
raw
history blame contribute delete
22.1 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MoneyTransfer - Envoyez de l'argent facilement</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>
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.transition-all {
transition: all 0.3s ease;
}
.input-focus:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-money-bill-wave text-3xl"></i>
<h1 class="text-2xl font-bold">MoneyTransfer</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="hover:text-blue-200 transition-all">Accueil</a>
<a href="#" class="hover:text-blue-200 transition-all">Envoyer</a>
<a href="#" class="hover:text-blue-200 transition-all">Suivre</a>
<a href="#" class="hover:text-blue-200 transition-all">Tarifs</a>
<a href="#" class="hover:text-blue-200 transition-all">Contact</a>
</nav>
<div class="flex items-center space-x-4">
<button class="bg-white text-blue-600 px-4 py-2 rounded-full font-medium hover:bg-blue-50 transition-all">
Connexion
</button>
<button class="md:hidden text-2xl" id="menuBtn">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Mobile Menu -->
<div class="hidden bg-white shadow-lg absolute w-full z-10" id="mobileMenu">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
<a href="#" class="py-2 border-b border-gray-100">Accueil</a>
<a href="#" class="py-2 border-b border-gray-100">Envoyer</a>
<a href="#" class="py-2 border-b border-gray-100">Suivre</a>
<a href="#" class="py-2 border-b border-gray-100">Tarifs</a>
<a href="#" class="py-2">Contact</a>
</div>
</div>
<!-- Hero Section -->
<section class="gradient-bg text-white py-16">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Envoyez de l'argent dans le monde entier</h2>
<p class="text-xl mb-8">Transferts rapides, sécurisés et à des tarifs compétitifs. Plus de 500 000 points de retrait dans 200 pays.</p>
<div class="flex space-x-4">
<button class="bg-white text-blue-600 px-6 py-3 rounded-full font-medium hover:bg-blue-50 transition-all">
Envoyer maintenant
</button>
<button class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-blue-600 transition-all">
Télécharger l'app
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md">
<h3 class="text-2xl font-bold text-gray-800 mb-6">Nouveau transfert</h3>
<form id="transferForm">
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="fromCountry">De</label>
<div class="relative">
<select id="fromCountry" class="w-full p-3 border border-gray-300 rounded-lg input-focus appearance-none">
<option value="FR">France</option>
<option value="US">États-Unis</option>
<option value="UK">Royaume-Uni</option>
<option value="DE">Allemagne</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<i class="fas fa-chevron-down text-gray-500"></i>
</div>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="toCountry">À</label>
<div class="relative">
<select id="toCountry" class="w-full p-3 border border-gray-300 rounded-lg input-focus appearance-none">
<option value="US">États-Unis</option>
<option value="FR">France</option>
<option value="UK">Royaume-Uni</option>
<option value="DE">Allemagne</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<i class="fas fa-chevron-down text-gray-500"></i>
</div>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="amount">Montant</label>
<div class="relative">
<span class="absolute left-3 top-3 text-gray-500">€</span>
<input type="number" id="amount" class="w-full p-3 pl-8 border border-gray-300 rounded-lg input-focus" placeholder="100">
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2" for="receiveAmount">Montant reçu</label>
<div class="relative">
<span class="absolute left-3 top-3 text-gray-500">$</span>
<input type="number" id="receiveAmount" class="w-full p-3 pl-8 border border-gray-300 rounded-lg bg-gray-100" placeholder="107.50" readonly>
</div>
<p class="text-sm text-gray-500 mt-1">Taux: 1 EUR = 1.075 USD</p>
</div>
<button type="submit" class="w-full bg-blue-600 text-white p-3 rounded-lg font-medium hover:bg-blue-700 transition-all">
Continuer <i class="fas fa-arrow-right ml-2"></i>
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Pourquoi choisir MoneyTransfer ?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-xl card-hover transition-all">
<div class="text-blue-600 mb-4">
<i class="fas fa-bolt text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Transferts rapides</h3>
<p class="text-gray-600">Votre argent arrive en quelques minutes dans la plupart des cas, 24h/24 et 7j/7.</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl card-hover transition-all">
<div class="text-blue-600 mb-4">
<i class="fas fa-lock text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Sécurité garantie</h3>
<p class="text-gray-600">Nous utilisons les dernières technologies de cryptage pour protéger vos données.</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl card-hover transition-all">
<div class="text-blue-600 mb-4">
<i class="fas fa-euro-sign text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Tarifs compétitifs</h3>
<p class="text-gray-600">Des frais bas et des taux de change avantageux pour tous vos transferts.</p>
</div>
</div>
</div>
</section>
<!-- Recent Transactions -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Vos transferts récents</h2>
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-4xl mx-auto">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-100">
<tr>
<th class="py-3 px-6 text-left">Destinataire</th>
<th class="py-3 px-6 text-left">Montant</th>
<th class="py-3 px-6 text-left">Statut</th>
<th class="py-3 px-6 text-left">Date</th>
<th class="py-3 px-6 text-left">Actions</th>
</tr>
</thead>
<tbody id="transactionsList">
<!-- Transactions will be added here by JavaScript -->
</tbody>
</table>
</div>
<div class="p-4 border-t border-gray-200 flex justify-center">
<button class="text-blue-600 font-medium hover:text-blue-800 transition-all">
Voir tout l'historique <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
</section>
<!-- Transfer Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-20" id="transferModal">
<div class="bg-white rounded-xl p-6 w-full max-w-md mx-4">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold">Confirmer le transfert</h3>
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mb-6">
<div class="flex justify-between mb-3">
<span class="text-gray-600">Destinataire:</span>
<span class="font-medium" id="modalRecipient">John Doe</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-gray-600">Montant envoyé:</span>
<span class="font-medium" id="modalAmountSent">100 €</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-gray-600">Montant reçu:</span>
<span class="font-medium" id="modalAmountReceived">107.50 $</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-gray-600">Frais:</span>
<span class="font-medium" id="modalFees">2.99 €</span>
</div>
<div class="flex justify-between pt-3 border-t border-gray-200">
<span class="text-gray-600">Total:</span>
<span class="font-bold text-lg" id="modalTotal">102.99 €</span>
</div>
</div>
<div class="flex space-x-4">
<button id="cancelTransfer" class="flex-1 border border-gray-300 text-gray-700 p-3 rounded-lg font-medium hover:bg-gray-100 transition-all">
Annuler
</button>
<button id="confirmTransfer" class="flex-1 bg-blue-600 text-white p-3 rounded-lg font-medium hover:bg-blue-700 transition-all">
Confirmer
</button>
</div>
</div>
</div>
<!-- Success Notification -->
<div class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg hidden z-30" id="successNotification">
<div class="flex items-center">
<i class="fas fa-check-circle mr-3 text-xl"></i>
<span>Transfert effectué avec succès !</span>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-xl font-bold mb-4">MoneyTransfer</h4>
<p class="text-gray-400">La solution simple et sécurisée pour envoyer de l'argent à vos proches dans le monde entier.</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Envoyer de l'argent</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Suivre un transfert</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Trouver un point de retrait</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Tarifs</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">À propos</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Notre entreprise</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Carrières</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Presse</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Responsabilité sociale</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Contact</h4>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-phone-alt mr-2 text-gray-400"></i>
<span class="text-gray-400">+33 1 23 45 67 89</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope mr-2 text-gray-400"></i>
<span class="text-gray-400">[email protected]</span>
</li>
<li class="flex items-center">
<i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
<span class="text-gray-400">Paris, France</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 MoneyTransfer. Tous droits réservés.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition-all">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-all">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-all">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-all">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// Sample transaction data
const transactions = [
{
id: 1,
recipient: "Jean Dupont",
amount: "150 €",
received: "161.25 $",
status: "Complété",
date: "15 juin 2023",
statusClass: "text-green-500"
},
{
id: 2,
recipient: "Marie Martin",
amount: "75 €",
received: "80.63 $",
status: "En cours",
date: "10 juin 2023",
statusClass: "text-yellow-500"
},
{
id: 3,
recipient: "Pierre Lambert",
amount: "200 €",
received: "215.00 $",
status: "Complété",
date: "5 juin 2023",
statusClass: "text-green-500"
}
];
// DOM Elements
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
const transferForm = document.getElementById('transferForm');
const transactionsList = document.getElementById('transactionsList');
const transferModal = document.getElementById('transferModal');
const closeModal = document.getElementById('closeModal');
const cancelTransfer = document.getElementById('cancelTransfer');
const confirmTransfer = document.getElementById('confirmTransfer');
const successNotification = document.getElementById('successNotification');
const amountInput = document.getElementById('amount');
const receiveAmountInput = document.getElementById('receiveAmount');
// Toggle mobile menu
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
if (!mobileMenu.contains(e.target) && e.target !== menuBtn) {
mobileMenu.classList.add('hidden');
}
});
// Populate transactions table
function renderTransactions() {
transactionsList.innerHTML = '';
transactions.forEach(transaction => {
const row = document.createElement('tr');
row.className = 'hover:bg-gray-50 border-b border-gray-100';
row.innerHTML = `
<td class="py-4 px-6">${transaction.recipient}</td>
<td class="py-4 px-6">${transaction.amount}</td>
<td class="py-4 px-6 ${transaction.statusClass}">${transaction.status}</td>
<td class="py-4 px-6">${transaction.date}</td>
<td class="py-4 px-6">
<button class="text-blue-600 hover:text-blue-800 transition-all">
<i class="fas fa-redo"></i>
</button>
</td>
`;
transactionsList.appendChild(row);
});
}
// Calculate received amount when amount changes
amountInput.addEventListener('input', () => {
const amount = parseFloat(amountInput.value) || 0;
const exchangeRate = 1.075; // Sample exchange rate
receiveAmountInput.value = (amount * exchangeRate).toFixed(2);
});
// Form submission
transferForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get form values
const fromCountry = document.getElementById('fromCountry').value;
const toCountry = document.getElementById('toCountry').value;
const amount = amountInput.value;
const receiveAmount = receiveAmountInput.value;
// Update modal with form values
document.getElementById('modal
<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=Madaliou/moneytransfert" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>