Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Animated Card</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| body { | |
| perspective: 1000px; | |
| overflow: hidden; | |
| background-color: #0f172a; | |
| } | |
| .card-container { | |
| transform-style: preserve-3d; | |
| animation: cardEntrance 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; | |
| } | |
| .card { | |
| transform-style: preserve-3d; | |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); | |
| transition: all 0.5s ease; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0) 50%); | |
| border-radius: 1rem; | |
| pointer-events: none; | |
| } | |
| @keyframes cardEntrance { | |
| 0% { | |
| transform: translateZ(-1000px) rotateY(180deg); | |
| opacity: 0; | |
| } | |
| 30% { | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| transform: translateZ(0) rotateY(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| .glow { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 1rem; | |
| box-shadow: 0 0 60px rgba(99, 102, 241, 0.4); | |
| opacity: 0; | |
| animation: glowFade 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; | |
| } | |
| @keyframes glowFade { | |
| 0%, 70% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="flex items-center justify-center min-h-screen bg-gray-900 text-gray-100"> | |
| <div class="card-container w-80 h-96 relative"> | |
| <div class="glow"></div> | |
| <div class="card absolute w-full h-full bg-gray-800 rounded-xl p-6 flex flex-col"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-bold">Quantum Card</h2> | |
| <p class="text-xs text-gray-400">Premium Access</p> | |
| </div> | |
| </div> | |
| <div class="flex-1 flex flex-col justify-center"> | |
| <div class="bg-gray-700 rounded-lg p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-400">Card Number</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <p class="text-lg font-mono tracking-wider">•••• •••• •••• 4242</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <p class="text-xs text-gray-400 mb-1">Expires</p> | |
| <p class="font-medium">12/25</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-400 mb-1">CVV</p> | |
| <p class="font-medium">•••</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-sm text-gray-400">John Doe</p> | |
| <div class="flex space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" /> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Add some interactive effects | |
| document.querySelector('.card').addEventListener('mouseenter', function() { | |
| this.style.transform = 'rotateY(10deg) rotateX(5deg) translateZ(20px)'; | |
| this.style.boxShadow = '0 0 30px rgba(99, 102, 241, 0.7)'; | |
| }); | |
| document.querySelector('.card').addEventListener('mouseleave', function() { | |
| this.style.transform = 'rotateY(0deg) rotateX(0deg) translateZ(0)'; | |
| this.style.boxShadow = '0 0 20px rgba(99, 102, 241, 0.5)'; | |
| }); | |
| </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=arreumb/deepsiteclone" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |