| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Aura - Lifestyle Inspiration</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> |
| @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: #fafafa; |
| color: #333; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .post-image { |
| aspect-ratio: 1/1; |
| object-fit: cover; |
| } |
| |
| .comment-input { |
| resize: none; |
| scrollbar-width: none; |
| } |
| |
| .comment-input::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| |
| .modal { |
| transition: opacity 0.3s ease, transform 0.3s ease; |
| } |
| |
| .modal-enter { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| |
| .modal-enter-active { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .modal-exit { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .modal-exit-active { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| </style> |
| </head> |
| <body class="max-w-md mx-auto bg-gray-50 relative overflow-x-hidden"> |
| |
| <header class="sticky top-0 z-10 gradient-bg text-white p-4 shadow-md"> |
| <div class="flex justify-between items-center"> |
| <h1 class="text-xl font-bold">Aura</h1> |
| <div class="flex space-x-4"> |
| <button id="search-btn" class="text-white"> |
| <i class="fas fa-search"></i> |
| </button> |
| <button id="notifications-btn" class="text-white relative"> |
| <i class="fas fa-bell"></i> |
| <span class="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center"> |
| <div class="bg-white rounded-lg p-4 w-11/12 max-w-md"> |
| <div class="flex items-center mb-4"> |
| <input type="text" placeholder="Search Aura..." class="flex-1 border border-gray-300 rounded-l-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <button class="bg-purple-500 text-white px-4 py-2 rounded-r-full"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| <div class="space-y-2"> |
| <p class="text-gray-500 font-medium">Recent Searches</p> |
| <div class="flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> |
| <div class="w-8 h-8 rounded-full bg-blue-200 mr-2"></div> |
| <span>Travel Inspiration</span> |
| </div> |
| <div class="flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> |
| <div class="w-8 h-8 rounded-full bg-green-200 mr-2"></div> |
| <span>Healthy Recipes</span> |
| </div> |
| <div class="flex items-center p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> |
| <div class="w-8 h-8 rounded-full bg-yellow-200 mr-2"></div> |
| <span>Home Decor</span> |
| </div> |
| </div> |
| <button id="close-search" class="mt-4 text-purple-500 font-medium">Close</button> |
| </div> |
| </div> |
|
|
| |
| <main class="pb-16"> |
| |
| <div class="bg-white p-4 mb-2 overflow-x-auto"> |
| <div class="flex space-x-4"> |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white"> |
| <i class="fas fa-plus"></i> |
| </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 border-2 border-purple-500 p-0.5"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| <span class="text-xs">Sarah</span> |
| </div> |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full border-2 border-purple-500 p-0.5"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| <span class="text-xs">Mike</span> |
| </div> |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full border-2 border-purple-500 p-0.5"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| <span class="text-xs">Emma</span> |
| </div> |
| <div class="flex flex-col items-center space-y-1"> |
| <div class="w-16 h-16 rounded-full border-2 border-purple-500 p-0.5"> |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| <span class="text-xs">David</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="feed"> |
| |
| <div class="bg-white mb-4 rounded-lg shadow-sm"> |
| |
| <div class="flex items-center p-3"> |
| <div class="w-10 h-10 rounded-full border-2 border-purple-500 p-0.5 mr-2"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium">Sarah Johnson</p> |
| <p class="text-xs text-gray-500">2 hours ago</p> |
| </div> |
| <button class="text-gray-500"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| |
| |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Post" class="w-full post-image"> |
| <button class="absolute top-2 right-2 bg-white bg-opacity-70 rounded-full p-2"> |
| <i class="fas fa-bookmark text-gray-700"></i> |
| </button> |
| </div> |
| |
| |
| <div class="p-3"> |
| <div class="flex justify-between mb-2"> |
| <div class="flex space-x-4"> |
| <button class="text-gray-700 hover:text-red-500 transition-colors"> |
| <i class="far fa-heart"></i> |
| </button> |
| <button class="text-gray-700"> |
| <i class="far fa-comment"></i> |
| </button> |
| <button class="text-gray-700"> |
| <i class="far fa-paper-plane"></i> |
| </button> |
| </div> |
| <button class="text-gray-700"> |
| <i class="far fa-bookmark"></i> |
| </button> |
| </div> |
| |
| |
| <p class="font-medium mb-1">1,243 likes</p> |
| |
| |
| <p class="mb-1"> |
| <span class="font-medium">Sarah Johnson</span> |
| Finding beauty in the simple things today. The way the light filters through the trees reminds me to slow down and appreciate the moment. #Mindfulness #NatureLover |
| </p> |
| |
| |
| <button class="text-gray-500 text-sm mb-1">View all 42 comments</button> |
| <div class="flex items-start mb-1"> |
| <p class="text-sm"> |
| <span class="font-medium">MikeT</span> |
| This is stunning! Where was this taken? |
| </p> |
| </div> |
| <div class="flex items-start"> |
| <p class="text-sm"> |
| <span class="font-medium">TravelLover22</span> |
| Absolutely breathtaking! 😍 |
| </p> |
| </div> |
| |
| |
| <div class="flex items-center mt-3 pt-3 border-t border-gray-100"> |
| <div class="w-8 h-8 rounded-full bg-gray-200 mr-2"></div> |
| <input type="text" placeholder="Add a comment..." class="flex-1 text-sm focus:outline-none"> |
| <button class="text-purple-500 font-medium text-sm">Post</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white mb-4 rounded-lg shadow-sm"> |
| |
| <div class="flex items-center p-3"> |
| <div class="w-10 h-10 rounded-full border-2 border-purple-500 p-0.5 mr-2"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium">Mike Chen</p> |
| <p class="text-xs text-gray-500">5 hours ago</p> |
| </div> |
| <button class="text-gray-500"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| |
| |
| <div class="relative"> |
| <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 post-image"> |
| <button class="absolute top-2 right-2 bg-white bg-opacity-70 rounded-full p-2"> |
| <i class="fas fa-bookmark text-gray-700"></i> |
| </button> |
| </div> |
| |
| |
| <div class="p-3"> |
| <div class="flex justify-between mb-2"> |
| <div class="flex space-x-4"> |
| <button class="text-red-500"> |
| <i class="fas fa-heart"></i> |
| </button> |
| <button class="text-gray-700"> |
| <i class="far fa-comment"></i> |
| </button> |
| <button class="text-gray-700"> |
| <i class="far fa-paper-plane"></i> |
| </button> |
| </div> |
| <button class="text-gray-700"> |
| <i class="far fa-bookmark"></i> |
| </button> |
| </div> |
| |
| |
| <p class="font-medium mb-1">892 likes</p> |
| |
| |
| <p class="mb-1"> |
| <span class="font-medium">Mike Chen</span> |
| Healthy eating doesn't have to be boring! This colorful bowl is packed with nutrients and flavor. Recipe in bio if you're interested. #HealthyEating #FoodInspo |
| </p> |
| |
| |
| <button class="text-gray-500 text-sm mb-1">View all 18 comments</button> |
| <div class="flex items-start mb-1"> |
| <p class="text-sm"> |
| <span class="font-medium">HealthyLiving</span> |
| This looks amazing! Trying this tomorrow. |
| </p> |
| </div> |
| |
| |
| <div class="flex items-center mt-3 pt-3 border-t border-gray-100"> |
| <div class="w-8 h-8 rounded-full bg-gray-200 mr-2"></div> |
| <input type="text" placeholder="Add a comment..." class="flex-1 text-sm focus:outline-none"> |
| <button class="text-purple-500 font-medium text-sm">Post</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white mb-4 rounded-lg shadow-sm"> |
| |
| <div class="flex items-center p-3"> |
| <div class="w-10 h-10 rounded-full border-2 border-purple-500 p-0.5 mr-2"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile" class="w-full h-full rounded-full object-cover"> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium">Emma Wilson</p> |
| <p class="text-xs text-gray-500">1 day ago</p> |
| </div> |
| <button class="text-gray-500"> |
| <i class="fas fa-ellipsis-h"></i> |
| </button> |
| </div> |
| |
| |
| <div class="relative"> |
| <div class="w-full bg-black flex items-center justify-center post-image"> |
| <div class="text-white text-center"> |
| <i class="fas fa-play text-4xl mb-2"></i> |
| <p>Tap to play</p> |
| </div> |
| </div> |
| <div class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded text-xs"> |
| 0:23 |
| </div> |
| <button class="absolute top-2 right-2 bg-white bg-opacity-70 rounded-full p-2"> |
| <i class="fas fa-bookmark text-gray-700"></i> |
| </button> |
| </div> |
| |
| |
| <div class="p-3"> |
| <div class="flex justify-between mb-2"> |
| <div class="flex space-x-4"> |
| <button class="text-gray-700 hover:text-red-500 transition-colors"> |
| <i class="far fa-heart"></i> |
| </button> |
| <button class="text-gray-700"> |
| <i class="far fa-comment"></i> |
| </button> |
| <button class="text-gray-700"> |
| <i class="far fa-paper-plane"></i> |
| </button> |
| </div> |
| <button class="text-gray-700"> |
| <i class="far fa-bookmark"></i> |
| </button> |
| </div> |
| |
| |
| <p class="font-medium mb-1">2,456 likes</p> |
| |
| |
| <p class="mb-1"> |
| <span class="font-medium">Emma Wilson</span> |
| Morning routine that sets me up for success! 5 minutes of stretching, gratitude journaling, and this energizing smoothie. What's your morning ritual? #MorningRoutine #SelfCare |
| </p> |
| |
| |
| <button class="text-gray-500 text-sm mb-1">View all 87 comments</button> |
| <div class="flex items-start mb-1"> |
| <p class="text-sm"> |
| <span class="font-medium">WellnessCoach</span> |
| Love this! Consistency is key. |
| </p> |
| </div> |
| <div class="flex items-start"> |
| <p class="text-sm"> |
| <span class="font-medium">SarahJ</span> |
| That smoothie looks delicious! Recipe? |
| </p> |
| </div> |
| |
| |
| <div class="flex items-center mt-3 pt-3 border-t border-gray-100"> |
| <div class="w-8 h-8 rounded-full bg-gray-200 mr-2"></div> |
| <input type="text" placeholder="Add a comment..." class="flex-1 text-sm focus:outline-none"> |
| <button class="text-purple-500 font-medium text-sm">Post</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <nav class="fixed bottom-0 w-full max-w-md bg-white border-t border-gray-200 flex justify-around py-3"> |
| <button class="text-purple-500"> |
| <i class="fas fa-home text-xl"></i> |
| </button> |
| <button class="text-gray-500"> |
| <i class="fas fa-search text-xl"></i> |
| </button> |
| <button class="text-gray-500 relative"> |
| <div class="absolute -top-2 -right-2 bg-purple-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">+</div> |
| <i class="far fa-plus-square text-xl"></i> |
| </button> |
| <button class="text-gray-500"> |
| <i class="far fa-heart text-xl"></i> |
| </button> |
| <button class="text-gray-500"> |
| <div class="w-6 h-6 rounded-full bg-gray-300"></div> |
| </button> |
| </nav> |
|
|
| |
| <div id="create-post-modal" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden flex items-center justify-center"> |
| <div class="bg-white rounded-lg w-11/12 max-w-md"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <button id="close-create-post" class="text-gray-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| <h2 class="font-medium">Create New Post</h2> |
| <button class="text-purple-500 font-medium">Share</button> |
| </div> |
| |
| <div class="p-4"> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4"> |
| <i class="fas fa-images text-4xl text-gray-400 mb-2"></i> |
| <p class="font-medium">Upload Photos or Videos</p> |
| <p class="text-sm text-gray-500">Drag and drop files here or tap to browse</p> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Caption</label> |
| <textarea placeholder="Share what's inspiring you..." class="w-full border border-gray-300 rounded-lg p-3 h-24 comment-input focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Location</label> |
| <input type="text" placeholder="Add location" class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| |
| <div> |
| <label class="block text-gray-700 mb-2">Tags</label> |
| <input type="text" placeholder="#lifestyle #inspiration" class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const searchBtn = document.getElementById('search-btn'); |
| const searchModal = document.getElementById('search-modal'); |
| const closeSearch = document.getElementById('close-search'); |
| |
| searchBtn.addEventListener('click', () => { |
| searchModal.classList.remove('hidden'); |
| }); |
| |
| closeSearch.addEventListener('click', () => { |
| searchModal.classList.add('hidden'); |
| }); |
| |
| |
| const createPostBtn = document.querySelector('nav button:nth-child(3)'); |
| const createPostModal = document.getElementById('create-post-modal'); |
| const closeCreatePost = document.getElementById('close-create-post'); |
| |
| createPostBtn.addEventListener('click', () => { |
| createPostModal.classList.remove('hidden'); |
| }); |
| |
| closeCreatePost.addEventListener('click', () => { |
| createPostModal.classList.add('hidden'); |
| }); |
| |
| |
| const likeButtons = document.querySelectorAll('.far.fa-heart'); |
| likeButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| if (this.classList.contains('far')) { |
| this.classList.remove('far'); |
| this.classList.add('fas', 'text-red-500'); |
| |
| this.classList.add('animate-pulse'); |
| setTimeout(() => { |
| this.classList.remove('animate-pulse'); |
| }, 1000); |
| } else { |
| this.classList.remove('fas', 'text-red-500'); |
| this.classList.add('far'); |
| } |
| }); |
| }); |
| |
| |
| const viewCommentsButtons = document.querySelectorAll('button.text-gray-500.text-sm'); |
| viewCommentsButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| const commentsContainer = this.parentElement; |
| const hiddenComments = commentsContainer.querySelectorAll('div.flex.items-start:nth-child(n+4)'); |
| |
| hiddenComments.forEach(comment => { |
| if (comment.classList.contains('hidden')) { |
| comment.classList.remove('hidden'); |
| this.textContent = 'Show less comments'; |
| } else { |
| comment.classList.add('hidden'); |
| this.textContent = 'View all comments'; |
| } |
| }); |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', () => { |
| if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) { |
| |
| console.log('Loading more posts...'); |
| } |
| }); |
| </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=MrH77/aure" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
