| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>InstaClone - Share Your Moments</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> |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 3px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| .story-ring { |
| background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); |
| } |
| |
| |
| @keyframes heartBeat { |
| 0% { transform: scale(1); } |
| 25% { transform: scale(1.2); } |
| 50% { transform: scale(1); } |
| 75% { transform: scale(1.1); } |
| 100% { transform: scale(1); } |
| } |
| |
| .heart-animation { |
| animation: heartBeat 0.5s ease-in-out; |
| } |
| |
| |
| .hide-scrollbar { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| .hide-scrollbar::-webkit-scrollbar { |
| display: none; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <header class="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50"> |
| <div class="max-w-screen-md mx-auto px-4 py-2 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <a href="#" class="text-2xl font-bold italic" style="background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">InstaClone</a> |
| </div> |
| |
| <div class="relative hidden md:block"> |
| <input type="text" placeholder="Search" class="bg-gray-100 rounded-md px-4 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-gray-300 w-64"> |
| <i class="fas fa-search absolute right-3 top-2 text-gray-400 text-sm"></i> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <a href="#" class="text-2xl"><i class="fas fa-home"></i></a> |
| <a href="#" class="text-2xl"><i class="far fa-paper-plane"></i></a> |
| <a href="#" class="text-2xl"><i class="far fa-plus-square"></i></a> |
| <a href="#" class="text-2xl"><i class="far fa-compass"></i></a> |
| <a href="#" class="text-2xl"><i class="far fa-heart"></i></a> |
| <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-screen-md mx-auto pt-16 pb-16"> |
| |
| <div class="bg-white border border-gray-200 rounded-md mb-6 p-4 overflow-x-auto hide-scrollbar"> |
| <div class="flex space-x-4"> |
| |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="relative"> |
| <div class="w-16 h-16 rounded-full p-1 story-ring"> |
| <div class="w-full h-full rounded-full bg-white p-0.5 flex items-center justify-center"> |
| <div class="w-full h-full rounded-full bg-gray-200 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Your story" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| <div class="absolute bottom-0 right-0 bg-blue-500 rounded-full w-5 h-5 flex items-center justify-center border-2 border-white"> |
| <i class="fas fa-plus text-white text-xs"></i> |
| </div> |
| </div> |
| <span class="text-xs">Your Story</span> |
| </div> |
| |
| |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full p-1 story-ring"> |
| <div class="w-full h-full rounded-full bg-white p-0.5 flex items-center justify-center"> |
| <div class="w-full h-full rounded-full bg-gray-200 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Story" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| <span class="text-xs">jessica</span> |
| </div> |
| |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full p-1 story-ring"> |
| <div class="w-full h-full rounded-full bg-white p-0.5 flex items-center justify-center"> |
| <div class="w-full h-full rounded-full bg-gray-200 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Story" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| <span class="text-xs">mike_t</span> |
| </div> |
| |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full p-1 story-ring"> |
| <div class="w-full h-full rounded-full bg-white p-0.5 flex items-center justify-center"> |
| <div class="w-full h-full rounded-full bg-gray-200 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Story" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| <span class="text-xs">sarah_j</span> |
| </div> |
| |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full p-1 story-ring"> |
| <div class="w-full h-full rounded-full bg-white p-0.5 flex items-center justify-center"> |
| <div class="w-full h-full rounded-full bg-gray-200 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Story" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| <span class="text-xs">david_l</span> |
| </div> |
| |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full p-1 story-ring"> |
| <div class="w-full h-full rounded-full bg-white p-0.5 flex items-center justify-center"> |
| <div class="w-full h-full rounded-full bg-gray-200 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Story" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| <span class="text-xs">emma_w</span> |
| </div> |
| |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full p-1 story-ring"> |
| <div class="w-full h-full rounded-full bg-white p-0.5 flex items-center justify-center"> |
| <div class="w-full h-full rounded-full bg-gray-200 overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Story" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| </div> |
| <span class="text-xs">john_d</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="bg-white border border-gray-200 rounded-md"> |
| |
| <div class="flex items-center justify-between p-3"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full story-ring p-0.5"> |
| <div class="w-full h-full rounded-full bg-white"> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| </div> |
| <span class="font-semibold text-sm">jessica</span> |
| </div> |
| <button class="text-gray-500"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| |
| |
| <div class="w-full aspect-square bg-gray-100 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Post" class="w-full h-full object-cover" id="post1"> |
| </div> |
| |
| |
| <div class="p-3"> |
| <div class="flex justify-between mb-2"> |
| <div class="flex space-x-4"> |
| <button class="like-btn" data-post="post1"> |
| <i class="far fa-heart text-2xl"></i> |
| </button> |
| <button> |
| <i class="far fa-comment text-2xl"></i> |
| </button> |
| <button> |
| <i class="far fa-paper-plane text-2xl"></i> |
| </button> |
| </div> |
| <button> |
| <i class="far fa-bookmark text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="font-semibold text-sm">1,234 likes</span> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="font-semibold text-sm">jessica</span> |
| <span class="text-sm ml-1">Enjoying the beautiful sunset at the beach! 🌅 #sunset #beach #vacation</span> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="text-gray-500 text-sm">View all 56 comments</span> |
| </div> |
| |
| |
| <div> |
| <span class="text-gray-400 text-xs uppercase">2 hours ago</span> |
| </div> |
| </div> |
| |
| |
| <div class="border-t border-gray-200 p-3 flex items-center"> |
| <input type="text" placeholder="Add a comment..." class="w-full focus:outline-none text-sm"> |
| <button class="text-blue-500 font-semibold text-sm ml-2">Post</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white border border-gray-200 rounded-md"> |
| |
| <div class="flex items-center justify-between p-3"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full story-ring p-0.5"> |
| <div class="w-full h-full rounded-full bg-white"> |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| </div> |
| <span class="font-semibold text-sm">mike_t</span> |
| </div> |
| <button class="text-gray-500"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| |
| |
| <div class="w-full aspect-square bg-gray-100 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Post" class="w-full h-full object-cover" id="post2"> |
| </div> |
| |
| |
| <div class="p-3"> |
| <div class="flex justify-between mb-2"> |
| <div class="flex space-x-4"> |
| <button class="like-btn" data-post="post2"> |
| <i class="far fa-heart text-2xl"></i> |
| </button> |
| <button> |
| <i class="far fa-comment text-2xl"></i> |
| </button> |
| <button> |
| <i class="far fa-paper-plane text-2xl"></i> |
| </button> |
| </div> |
| <button> |
| <i class="far fa-bookmark text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="font-semibold text-sm">892 likes</span> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="font-semibold text-sm">mike_t</span> |
| <span class="text-sm ml-1">Nature at its finest. The mountains are calling! 🏔️ #nature #mountains #adventure</span> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="text-gray-500 text-sm">View all 23 comments</span> |
| </div> |
| |
| |
| <div> |
| <span class="text-gray-400 text-xs uppercase">5 hours ago</span> |
| </div> |
| </div> |
| |
| |
| <div class="border-t border-gray-200 p-3 flex items-center"> |
| <input type="text" placeholder="Add a comment..." class="w-full focus:outline-none text-sm"> |
| <button class="text-blue-500 font-semibold text-sm ml-2">Post</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white border border-gray-200 rounded-md"> |
| |
| <div class="flex items-center justify-between p-3"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full story-ring p-0.5"> |
| <div class="w-full h-full rounded-full bg-white"> |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| </div> |
| <span class="font-semibold text-sm">sarah_j</span> |
| </div> |
| <button class="text-gray-500"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| |
| |
| <div class="w-full aspect-square bg-gray-100 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Post" class="w-full h-full object-cover" id="post3"> |
| </div> |
| |
| |
| <div class="p-3"> |
| <div class="flex justify-between mb-2"> |
| <div class="flex space-x-4"> |
| <button class="like-btn" data-post="post3"> |
| <i class="far fa-heart text-2xl"></i> |
| </button> |
| <button> |
| <i class="far fa-comment text-2xl"></i> |
| </button> |
| <button> |
| <i class="far fa-paper-plane text-2xl"></i> |
| </button> |
| </div> |
| <button> |
| <i class="far fa-bookmark text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="font-semibold text-sm">2,567 likes</span> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="font-semibold text-sm">sarah_j</span> |
| <span class="text-sm ml-1">Delicious homemade pasta for dinner tonight! 🍝 #foodie #homecooking #pasta</span> |
| </div> |
| |
| |
| <div class="mb-1"> |
| <span class="text-gray-500 text-sm">View all 89 comments</span> |
| </div> |
| |
| |
| <div> |
| <span class="text-gray-400 text-xs uppercase">1 day ago</span> |
| </div> |
| </div> |
| |
| |
| <div class="border-t border-gray-200 p-3 flex items-center"> |
| <input type="text" placeholder="Add a comment..." class="w-full focus:outline-none text-sm"> |
| <button class="text-blue-500 font-semibold text-sm ml-2">Post</button> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| |
| <nav class="md:hidden bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-50"> |
| <div class="flex justify-around items-center p-3"> |
| <a href="#" class="text-2xl"><i class="fas fa-home"></i></a> |
| <a href="#" class="text-2xl"><i class="far fa-compass"></i></a> |
| <a href="#" class="text-2xl"><i class="far fa-plus-square"></i></a> |
| <a href="#" class="text-2xl"><i class="far fa-heart"></i></a> |
| <a href="#" class="w-6 h-6 rounded-full overflow-hidden"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover"> |
| </a> |
| </div> |
| </nav> |
|
|
| <script> |
| |
| document.querySelectorAll('.like-btn').forEach(button => { |
| button.addEventListener('click', function() { |
| const postId = this.getAttribute('data-post'); |
| const heartIcon = this.querySelector('i'); |
| |
| if (heartIcon.classList.contains('far')) { |
| heartIcon.classList.remove('far'); |
| heartIcon.classList.add('fas', 'text-red-500', 'heart-animation'); |
| |
| |
| setTimeout(() => { |
| heartIcon.classList.remove('heart-animation'); |
| }, 500); |
| } else { |
| heartIcon.classList.remove('fas', 'text-red-500'); |
| heartIcon.classList.add('far'); |
| } |
| }); |
| }); |
| |
| |
| document.querySelectorAll('[id^="post"]').forEach(post => { |
| post.addEventListener('dblclick', function() { |
| const postId = this.id; |
| const likeButton = document.querySelector(`.like-btn[data-post="${postId}"]`); |
| const heartIcon = likeButton.querySelector('i'); |
| |
| if (heartIcon.classList.contains('far')) { |
| heartIcon.classList.remove('far'); |
| heartIcon.classList.add('fas', 'text-red-500', 'heart-animation'); |
| |
| |
| setTimeout(() => { |
| heartIcon.classList.remove('heart-animation'); |
| }, 500); |
| } |
| }); |
| }); |
| |
| |
| document.querySelector('.fa-search').addEventListener('click', function() { |
| const searchInput = document.querySelector('input[type="text"]'); |
| searchInput.focus(); |
| }); |
| </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=usa36861/insta" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
