Spaces:
Running
Running
File size: 4,077 Bytes
2aa429f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html>
<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>
|