|
|
<!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> |
