Hugging Face's logo

Spaces:
DiVibez
/
emv
Running

App Files Community
emv / index.html
DiVibez's picture
DiVibez
Add 3 files
91706c4 verified
raw
history blame contribute delete
18.3 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>EMV Card Simulator</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>
 .card {
 perspective: 1000px;
 transform-style: preserve-3d;
 transition: all 0.5s ease;
 }
 .card-inner {
 position: relative;
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 transition: transform 0.6s;
 }
 .card:hover .card-inner {
 transform: rotateY(180deg);
 }
 .card-front, .card-back {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 border-radius: 15px;
 overflow: hidden;
 }
 .card-back {
 transform: rotateY(180deg);
 }
 .card-chip {
 background: linear-gradient(135deg, #f5d76e, #e67e22);
 width: 40px;
 height: 30px;
 border-radius: 5px;
 position: relative;
 }
 .card-chip::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
 border-radius: 5px;
 }
 .card-number {
 letter-spacing: 2px;
 font-family: 'Courier New', monospace;
 }
 .card-cvv {
 background: white;
 color: black;
 padding: 5px 10px;
 border-radius: 3px;
 font-family: 'Courier New', monospace;
 text-align: right;
 width: 50px;
 }
 .card-logo {
 filter: brightness(0) invert(1);
 height: 30px;
 }
 .input-field {
 transition: all 0.3s ease;
 }
 .input-field:focus {
 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
 }
 .flip-button {
 transition: all 0.3s ease;
 }
 .flip-button:hover {
 transform: scale(1.05);
 }
 </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
 <div class="container mx-auto max-w-4xl">
 <h1 class="text-3xl font-bold text-center text-blue-800 mb-8">EMV Card Simulator</h1>
<div class="flex flex-col lg:flex-row gap-8 items-center justify-center">
 <!-- Card Container -->
 <div class="w-full lg:w-1/2">
 <div class="card w-full h-64">
 <div class="card-inner">
 <!-- Front of the card -->
 <div class="card-front bg-gradient-to-br from-blue-600 to-blue-900 p-6 shadow-xl">
 <div class="flex justify-between items-start mb-8">
 <div class="text-white font-semibold">CREDIT CARD</div>
 <div class="text-white text-sm">EMV</div>
 </div>
<div class="card-chip mb-6"></div>
<div class="card-number text-white text-xl mb-6 tracking-widest">
 4532 7589 3265 7852
 </div>
<div class="flex justify-between items-center text-white text-sm">
 <div>
 <div class="text-xs opacity-70">CARD HOLDER</div>
 <div>JOHN DOE</div>
 </div>
 <div>
 <div class="text-xs opacity-70">EXPIRES</div>
 <div>05/25</div>
 </div>
 <div>
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Mastercard_2019_logo.svg/1200px-Mastercard_2019_logo.svg.png" alt="Mastercard" class="card-logo">
 </div>
 </div>
 </div>
<!-- Back of the card -->
 <div class="card-back bg-gradient-to-br from-blue-800 to-blue-950 p-6 shadow-xl">
 <div class="h-10 bg-black w-full mb-6"></div>
 <div class="flex justify-end mb-4">
 <div class="text-white text-xs mr-2">CVV</div>
 <div class="card-cvv">123</div>
 </div>
 <div class="text-white text-xs text-center opacity-70 mb-4">
 This card is property of Sample Bank. If found, please return to any branch.
 </div>
 <div class="flex justify-between items-center">
 <div class="text-white text-xs">
 CALL: 1-800-123-4567
 </div>
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Mastercard_2019_logo.svg/1200px-Mastercard_2019_logo.svg.png" alt="Mastercard" class="card-logo opacity-70">
 </div>
 </div>
 </div>
 </div>
<div class="flex justify-center mt-4">
 <button id="flipBtn" class="flip-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full flex items-center gap-2">
 <i class="fas fa-sync-alt"></i>
 <span>Flip Card</span>
 </button>
 </div>
 </div>
<!-- Form Container -->
 <div class="w-full lg:w-1/2 bg-white p-8 rounded-lg shadow-lg">
 <h2 class="text-xl font-semibold text-gray-800 mb-6">Card Details</h2>
<form id="cardForm" class="space-y-4">
 <div>
 <label for="cardNumber" class="block text-sm font-medium text-gray-700 mb-1">Card Number</label>
 <input type="text" id="cardNumber" placeholder="1234 5678 9012 3456"
class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
<div>
 <label for="cardName" class="block text-sm font-medium text-gray-700 mb-1">Cardholder Name</label>
 <input type="text" id="cardName" placeholder="John Doe"
class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
<div class="grid grid-cols-2 gap-4">
 <div>
 <label for="expiryDate" class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label>
 <input type="text" id="expiryDate" placeholder="MM/YY"
class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 <div>
 <label for="cvv" class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
 <input type="text" id="cvv" placeholder="123"
class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
 </div>
 </div>
<div class="pt-4">
 <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300 flex items-center justify-center gap-2">
 <i class="fas fa-lock"></i>
 <span>Process Payment</span>
 </button>
 </div>
 </form>
<div class="mt-6 pt-4 border-t border-gray-200">
 <div class="flex items-center gap-2 text-gray-600">
 <i class="fas fa-shield-alt text-blue-500"></i>
 <span class="text-sm">Secure EMV transaction powered by chip technology</span>
 </div>
 </div>
 </div>
 </div>
<div class="mt-12 bg-white p-6 rounded-lg shadow-lg">
 <h2 class="text-xl font-semibold text-gray-800 mb-4">About EMV Technology</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="bg-blue-50 p-4 rounded-lg">
 <div class="text-blue-600 mb-2">
 <i class="fas fa-microchip text-2xl"></i>
 </div>
 <h3 class="font-medium text-gray-800 mb-1">Chip Security</h3>
 <p class="text-gray-600 text-sm">EMV chips create unique transaction codes that can't be reused, reducing fraud.</p>
 </div>
 <div class="bg-green-50 p-4 rounded-lg">
 <div class="text-green-600 mb-2">
 <i class="fas fa-globe text-2xl"></i>
 </div>
 <h3 class="font-medium text-gray-800 mb-1">Global Standard</h3>
 <p class="text-gray-600 text-sm">Accepted worldwide with consistent security standards across countries.</p>
 </div>
 <div class="bg-purple-50 p-4 rounded-lg">
 <div class="text-purple-600 mb-2">
 <i class="fas fa-user-shield text-2xl"></i>
 </div>
 <h3 class="font-medium text-gray-800 mb-1">Customer Protection</h3>
 <p class="text-gray-600 text-sm">Reduces liability for customers in case of fraudulent transactions.</p>
 </div>
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Flip card functionality
 const flipBtn = document.getElementById('flipBtn');
 const cardInner = document.querySelector('.card-inner');
let isFlipped = false;
flipBtn.addEventListener('click', function(e) {
 e.preventDefault();
 isFlipped = !isFlipped;
if(isFlipped) {
 cardInner.style.transform = 'rotateY(180deg)';
 } else {
 cardInner.style.transform = 'rotateY(0deg)';
 }
 });
// Form submission
 const cardForm = document.getElementById('cardForm');
cardForm.addEventListener('submit', function(e) {
 e.preventDefault();
// Get form values
 const cardNumber = document.getElementById('cardNumber').value;
 const cardName = document.getElementById('cardName').value;
 const expiryDate = document.getElementById('expiryDate').value;
 const cvv = document.getElementById('cvv').value;
// Simple validation
 if(!cardNumber || !cardName || !expiryDate || !cvv) {
 alert('Please fill in all fields');
 return;
 }
// Simulate EMV processing
 simulateEMVProcessing();
 });
// Format card number input
 const cardNumberInput = document.getElementById('cardNumber');
cardNumberInput.addEventListener('input', function(e) {
 let value = e.target.value.replace(/\s+/g, '');
 if(value.length > 16) {
 value = value.substring(0, 16);
 }
// Add spaces every 4 digits
 value = value.replace(/(\d{4})/g, '$1 ').trim();
 e.target.value = value;
// Update card display
 document.querySelector('.card-number').textContent = value || '4532 7589 3265 7852';
 });
// Format card name input
 const cardNameInput = document.getElementById('cardName');
cardNameInput.addEventListener('input', function(e) {
 document.querySelector('.card-front .flex.justify-between.items-center.text-white.text-sm div:first-child div:last-child').textContent = e.target.value || 'JOHN DOE';
 });
// Format expiry date input
 const expiryDateInput = document.getElementById('expiryDate');
expiryDateInput.addEventListener('input', function(e) {
 let value = e.target.value.replace(/\D/g, '');
 if(value.length > 4) {
 value = value.substring(0, 4);
 }
// Add slash after 2 digits
 if(value.length > 2) {
 value = value.substring(0, 2) + '/' + value.substring(2);
 }
e.target.value = value;
// Update card display
 if(value.length >= 5) {
 document.querySelector('.card-front .flex.justify-between.items-center.text-white.text-sm div:nth-child(2) div:last-child').textContent = value;
 }
 });
// Format CVV input
 const cvvInput = document.getElementById('cvv');
cvvInput.addEventListener('input', function(e) {
 let value = e.target.value.replace(/\D/g, '');
 if(value.length > 3) {
 value = value.substring(0, 3);
 }
e.target.value = value;
// Update card display
 document.querySelector('.card-cvv').textContent = value || '123';
 });
// Simulate EMV processing
 function simulateEMVProcessing() {
 const submitBtn = cardForm.querySelector('button[type="submit"]');
 const originalText = submitBtn.innerHTML;
// Disable button and show processing
 submitBtn.disabled = true;
 submitBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Processing...';
// Simulate network delay
 setTimeout(function() {
 // Show success message
 submitBtn.innerHTML = '<i class="fas fa-check-circle"></i> Payment Successful';
 submitBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
 submitBtn.classList.add('bg-green-500', 'hover:bg-green-600');
// Reset after delay
 setTimeout(function() {
 submitBtn.disabled = false;
 submitBtn.innerHTML = originalText;
 submitBtn.classList.remove('bg-green-500', 'hover:bg-green-600');
 submitBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
// Show EMV chip simulation
 simulateChipCommunication();
 }, 2000);
 }, 3000);
 }
// Simulate EMV chip communication
 function simulateChipCommunication() {
 const chip = document.querySelector('.card-chip');
// Add animation class
 chip.classList.add('animate-pulse');
// Simulate chip processing
 setTimeout(function() {
 // Remove animation
 chip.classList.remove('animate-pulse');
// Show completion indicator
 const checkmark = document.createElement('div');
 checkmark.innerHTML = '<i class="fas fa-check text-white absolute inset-0 flex items-center justify-center"></i>';
 checkmark.className = 'absolute inset-0 bg-green-500 bg-opacity-70 rounded-md';
 chip.appendChild(checkmark);
// Remove after delay
 setTimeout(function() {
 chip.removeChild(checkmark);
 }, 1500);
 }, 1500);
 }
 });
 </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=DiVibez/emv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>