|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>InstaClone | Sua rede social</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; |
|
|
} |
|
|
.story-ring { |
|
|
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); |
|
|
} |
|
|
.post-like-animation { |
|
|
animation: like 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes like { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.2); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.dark-mode { |
|
|
background-color: #121212; |
|
|
color: #f5f5f5; |
|
|
} |
|
|
.dark-mode .bg-white { |
|
|
background-color: #1e1e1e !important; |
|
|
} |
|
|
.dark-mode .text-gray-800 { |
|
|
color: #f5f5f5 !important; |
|
|
} |
|
|
</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="#" 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="#" 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="#" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<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 md:flex"> |
|
|
|
|
|
<div class="md:w-2/3 md:pr-8"> |
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-6 overflow-x-auto"> |
|
|
<div class="flex space-x-4"> |
|
|
|
|
|
<div class="flex flex-col items-center space-y-1"> |
|
|
<div class="relative"> |
|
|
<div class="story-ring rounded-full p-0.5"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Your Story" class="w-16 h-16 rounded-full object-cover border-2 border-white"> |
|
|
</div> |
|
|
<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">Seu story</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<template x-for="i in 10" :key="i"> |
|
|
<div class="flex flex-col items-center space-y-1"> |
|
|
<div class="story-ring rounded-full p-0.5"> |
|
|
<img :src="`http://static.photos/people/200x200/${i+1}`" alt="Story" class="w-16 h-16 rounded-full object-cover border-2 border-white"> |
|
|
</div> |
|
|
<span class="text-xs truncate w-16 text-center" x-text="'user_'+i"></span> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<template x-for="i in 5" :key="i"> |
|
|
<div class="bg-white border border-gray-200 rounded-lg mb-6" data-aos="fade-up"> |
|
|
|
|
|
<div class="flex items-center p-3"> |
|
|
<div class="story-ring rounded-full p-0.5 mr-3"> |
|
|
<img :src="`http://static.photos/people/200x200/${i}`" alt="Profile" class="w-8 h-8 rounded-full object-cover border-2 border-white"> |
|
|
</div> |
|
|
<span class="font-semibold" x-text="'user_'+i"></span> |
|
|
<span class="mx-1">•</span> |
|
|
<span class="text-gray-500 text-sm">2h</span> |
|
|
<button class="ml-auto"> |
|
|
<i data-feather="more-vertical" class="text-gray-500"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<img :src="`http://static.photos/nature/640x360/${i}`" alt="Post" class="w-full object-cover"> |
|
|
|
|
|
|
|
|
<div class="p-3"> |
|
|
<div class="flex space-x-4 mb-2"> |
|
|
<button class="post-like" @click="toggleLike($event)"> |
|
|
<i data-feather="heart" class="text-gray-800"></i> |
|
|
</button> |
|
|
<button> |
|
|
<i data-feather="message-square" class="text-gray-800"></i> |
|
|
</button> |
|
|
<button> |
|
|
<i data-feather="send" class="text-gray-800"></i> |
|
|
</button> |
|
|
<button class="ml-auto"> |
|
|
<i data-feather="bookmark" class="text-gray-800"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="font-semibold mb-1">1,234 curtidas</div> |
|
|
|
|
|
|
|
|
<div class="mb-1"> |
|
|
<span class="font-semibold" x-text="'user_'+i"></span> |
|
|
<span> Esta é uma legenda de exemplo para o post. #instaclone #webdev</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-gray-500 mb-1">Ver todos os 45 comentários</div> |
|
|
<div class="text-sm mb-1"> |
|
|
<span class="font-semibold">outro_usuario</span> |
|
|
<span> Que foto incrível!</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-500" x-text="'2h'"></div> |
|
|
|
|
|
|
|
|
<div class="flex items-center mt-3 border-t border-gray-100 pt-3"> |
|
|
<input type="text" placeholder="Adicione um comentário..." class="flex-1 focus:outline-none bg-transparent"> |
|
|
<button class="text-blue-500 font-semibold">Publicar</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:block md:w-1/3"> |
|
|
|
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Profile" class="w-14 h-14 rounded-full object-cover mr-4"> |
|
|
<div> |
|
|
<div class="font-semibold">seu_usuario</div> |
|
|
<div class="text-gray-500">Seu Nome</div> |
|
|
</div> |
|
|
<button class="ml-auto text-blue-500 text-sm font-semibold">Mudar</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<span class="text-gray-500 font-semibold">Sugestões para você</span> |
|
|
<button class="text-sm font-semibold">Ver tudo</button> |
|
|
</div> |
|
|
|
|
|
<template x-for="i in 5" :key="i"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<img :src="`http://static.photos/people/200x200/${i+10}`" alt="Suggestion" class="w-8 h-8 rounded-full object-cover mr-3"> |
|
|
<div class="flex-1"> |
|
|
<div class="font-semibold text-sm" x-text="'suggested_user_'+i"></div> |
|
|
<div class="text-gray-500 text-xs">Segue você</div> |
|
|
</div> |
|
|
<button class="text-blue-500 text-xs font-semibold">Seguir</button> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-xs text-gray-400"> |
|
|
<div class="mb-4"> |
|
|
<a href="#" class="mr-2">Sobre</a> |
|
|
<a href="#" class="mr-2">Ajuda</a> |
|
|
<a href="#" class="mr-2">Imprensa</a> |
|
|
<a href="#" class="mr-2">API</a> |
|
|
<a href="#" class="mr-2">Carreiras</a> |
|
|
<a href="#" class="mr-2">Privacidade</a> |
|
|
<a href="#" class="mr-2">Termos</a> |
|
|
<a href="#" class="mr-2">Localizações</a> |
|
|
</div> |
|
|
<div> |
|
|
<span>© 2023 INSTACLONE</span> |
|
|
</div> |
|
|
</div> |
|
|
</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="#" 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="#" class="p-2"> |
|
|
<i data-feather="heart"></i> |
|
|
</a> |
|
|
<a href="#" 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); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.post-like').forEach(button => { |
|
|
button.addEventListener('click', function(e) { |
|
|
const icon = this.querySelector('i'); |
|
|
if (icon.getAttribute('data-feather') === 'heart') { |
|
|
feather.icons['heart'].replace(icon); |
|
|
icon.classList.add('post-like-animation'); |
|
|
icon.style.fill = 'red'; |
|
|
icon.style.color = 'red'; |
|
|
setTimeout(() => { |
|
|
icon.classList.remove('post-like-animation'); |
|
|
}, 500); |
|
|
} else { |
|
|
feather.icons['heart'].replace(icon); |
|
|
icon.style.fill = 'none'; |
|
|
icon.style.color = ''; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
function toggleLike(event) { |
|
|
const icon = event.currentTarget.querySelector('i'); |
|
|
if (icon.getAttribute('data-feather') === 'heart') { |
|
|
feather.icons['heart'].replace(icon); |
|
|
icon.classList.add('post-like-animation'); |
|
|
icon.style.fill = 'red'; |
|
|
icon.style.color = 'red'; |
|
|
setTimeout(() => { |
|
|
icon.classList.remove('post-like-animation'); |
|
|
}, 500); |
|
|
} else { |
|
|
feather.icons['heart'].replace(icon); |
|
|
icon.style.fill = 'none'; |
|
|
icon.style.color = ''; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
