File size: 5,548 Bytes
04abf37 3b1afd1 | 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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#4f46e5">
<title>Link Saver | Your Personal Collection</title>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #f8fafc;
}
.theme-option {
transition: all 0.3s ease;
}
.theme-option:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-12">
<header class="text-center mb-16" data-aos="fade-down">
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-500 to-purple-600 gradient-text">
My Link Shelf
</h1>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Your personal collection of favorite websites, organized beautifully.
</p>
</header>
<main class="max-w-4xl mx-auto">
<section class="mb-16" data-aos="fade-up">
<h2 class="text-2xl font-semibold text-center mb-8 text-gray-800">Choose Your Theme</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Theme 1 -->
<div class="theme-option rounded-xl overflow-hidden shadow-lg bg-white cursor-pointer" data-aos="zoom-in">
<div class="h-40 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
<i data-feather="bookmark" class="text-white w-12 h-12"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Minimal Blue</h3>
<p class="text-gray-600">Clean and professional look with blue accents</p>
</div>
</div>
<!-- Theme 2 -->
<div class="theme-option rounded-xl overflow-hidden shadow-lg bg-white cursor-pointer" data-aos="zoom-in" data-aos-delay="100">
<div class="h-40 bg-gradient-to-r from-purple-400 to-pink-600 flex items-center justify-center">
<i data-feather="heart" class="text-white w-12 h-12"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Vibrant Purple</h3>
<p class="text-gray-600">Energetic and creative theme with purple tones</p>
</div>
</div>
<!-- Theme 3 -->
<div class="theme-option rounded-xl overflow-hidden shadow-lg bg-white cursor-pointer" data-aos="zoom-in" data-aos-delay="200">
<div class="h-40 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center">
<i data-feather="leaf" class="text-white w-12 h-12"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Natural Green</h3>
<p class="text-gray-600">Calming and organic feel with green palette</p>
</div>
</div>
</div>
</section>
<section class="text-center" data-aos="fade-up" data-aos-delay="300">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-8 rounded-full shadow-md transition-all duration-300 transform hover:scale-105 flex items-center mx-auto">
<i data-feather="plus" class="mr-2"></i>
Create Your Link Shelf
</button>
</section>
</main>
<footer class="mt-24 text-center text-gray-500 text-sm">
<p>© 2023 Link Saver. All rights reserved.</p>
</footer>
</div>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
// Register Service Worker for PWA
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('ServiceWorker registration successful');
})
.catch(err => {
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>
|