Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Dream Matchmaker - Share Your Match</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .share-card { | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .share-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .social-icon { | |
| width: 50px; | |
| height: 50px; | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-pink-50 to-purple-50 min-h-screen flex items-center justify-center px-4"> | |
| <div class="max-w-2xl w-full"> | |
| <div class="share-card bg-white rounded-2xl overflow-hidden"> | |
| <div class="p-8 text-center"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-6">Share Your Dream Match</h1> | |
| <p class="text-gray-600 mb-8">Show the world who your perfect partner looks like!</p> | |
| <div class="mb-10"> | |
| <div class="h-64 bg-cover bg-center rounded-lg mx-auto max-w-md" style="background-image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80')"></div> | |
| </div> | |
| <div class="mb-8"> | |
| <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" rows="3">AI just revealed my dream partner 😍 Can yours beat this? Try it yourself!</textarea> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <a href="#" class="social-icon bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="social-icon bg-blue-400 text-white rounded-full flex items-center justify-center"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="social-icon bg-pink-600 text-white rounded-full flex items-center justify-center"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="social-icon bg-red-500 text-white rounded-full flex items-center justify-center"> | |
| <i data-feather="youtube" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="social-icon bg-gray-800 text-white rounded-full flex items-center justify-center"> | |
| <i data-feather="share-2" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| <div class="text-center"> | |
| <a href="index.html" class="inline-block text-pink-600 hover:text-pink-700 font-medium"> | |
| <i data-feather="arrow-left" class="inline mr-2"></i> Back to Home | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-8 py-4 text-center"> | |
| <p class="text-gray-500 text-sm">Generated with ❤️ and powered by faceseek.online</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |