|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Explorar | InstaClone</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<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> |
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></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> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #fafafa; |
|
|
} |
|
|
.dark-mode { |
|
|
background-color: #121212; |
|
|
color: #f5f5f5; |
|
|
} |
|
|
.dark-mode .bg-white { |
|
|
background-color: #1e1e1e !important; |
|
|
} |
|
|
.dark-mode .text-gray-800 { |
|
|
color: #f5f5f5 !important; |
|
|
} |
|
|
.explore-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 4px; |
|
|
} |
|
|
@media (min-width: 768px) { |
|
|
.explore-grid { |
|
|
gap: 28px; |
|
|
} |
|
|
} |
|
|
.explore-item { |
|
|
position: relative; |
|
|
padding-bottom: 100%; |
|
|
} |
|
|
.explore-item img { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
.explore-item .overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0, 0, 0, 0.3); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
.explore-item:hover .overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-gray-800"> |
|
|
|
|
|
<nav class="bg-white border-b border-gray-200 fixed w-full z-10"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="flex justify-between h-16"> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<a href="index.html" class="text-2xl font-bold">InstaClone</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex items-center mx-4 flex-1 max-w-md"> |
|
|
<div class="relative w-full"> |
|
|
<input type="text" placeholder="Pesquisar" class="bg-gray-100 rounded-md py-1 px-4 pl-10 w-full focus:outline-none focus:ring-2 focus:ring-gray-300"> |
|
|
<i data-feather="search" class="absolute left-3 top-2 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="index.html" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i data-feather="home"></i> |
|
|
</a> |
|
|
<a href="#" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i data-feather="message-square"></i> |
|
|
</a> |
|
|
<a href="#" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i data-feather="plus-square"></i> |
|
|
</a> |
|
|
<a href="explore.html" class="p-2 rounded-full hover:bg-gray-100 text-blue-500"> |
|
|
<i data-feather="compass"></i> |
|
|
</a> |
|
|
<a href="#" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i data-feather="heart"></i> |
|
|
</a> |
|
|
<button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i data-feather="moon"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button class="flex items-center space-x-2 focus:outline-none"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Profile" class="w-8 h-8 rounded-full object-cover"> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="pt-16 pb-16 max-w-6xl mx-auto px-4"> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex space-x-4 overflow-x-auto pb-4"> |
|
|
<template x-for="i in 10" :key="i"> |
|
|
<div class="flex flex-col items-center space-y-2 flex-shrink-0"> |
|
|
<div class="relative"> |
|
|
<img :src="`http://static.photos/people/200x200/${i+10}`" alt="Story" class="w-20 h-20 rounded-full object-cover border-2 border-white"> |
|
|
<div class="absolute bottom-0 right-0 bg-blue-500 rounded-full p-1"> |
|
|
<i data-feather="plus" class="w-3 h-3 text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-xs" x-text="'explore_'+i"></span> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="explore-grid"> |
|
|
<template x-for="i in 21" :key="i"> |
|
|
<div class="explore-item"> |
|
|
<img :src="`http://static.photos/nature/400x400/${i}`" alt="Explore" class="w-full"> |
|
|
<div class="overlay"> |
|
|
<div class="flex items-center text-white space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="heart" class="mr-1"></i> |
|
|
<span>1,234</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="message-square" class="mr-1"></i> |
|
|
<span>45</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-3"> |
|
|
<a href="index.html" class="p-2"> |
|
|
<i data-feather="home"></i> |
|
|
</a> |
|
|
<a href="#" class="p-2"> |
|
|
<i data-feather="search"></i> |
|
|
</a> |
|
|
<a href="#" class="p-2"> |
|
|
<i data-feather="plus-square"></i> |
|
|
</a> |
|
|
<a href="explore.html" class="p-2 text-blue-500"> |
|
|
<i data-feather="compass"></i> |
|
|
</a> |
|
|
<a href="profile.html" class="p-2"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Profile" class="w-6 h-6 rounded-full object-cover"> |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
const html = document.documentElement; |
|
|
|
|
|
darkModeToggle.addEventListener('click', function() { |
|
|
html.classList.toggle('dark-mode'); |
|
|
const icon = darkModeToggle.querySelector('i'); |
|
|
if (html.classList.contains('dark-mode')) { |
|
|
feather.icons['sun'].replace(icon); |
|
|
} else { |
|
|
feather.icons['moon'].replace(icon); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const templateElements = document.querySelectorAll('template[x-for]'); |
|
|
templateElements.forEach(template => { |
|
|
const parent = template.parentNode; |
|
|
const match = template.getAttribute('x-for').match(/i in (\d+)/); |
|
|
if (match) { |
|
|
const count = parseInt(match[1]); |
|
|
for (let i = 0; i < count; i++) { |
|
|
const clone = document.importNode(template.content, true); |
|
|
parent.insertBefore(clone, template); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
