|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Perfil | 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; |
|
|
} |
|
|
.story-ring { |
|
|
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); |
|
|
} |
|
|
.dark-mode { |
|
|
background-color: #121212; |
|
|
color: #f5f5f5; |
|
|
} |
|
|
.dark-mode .bg-white { |
|
|
background-color: #1e1e1e !important; |
|
|
} |
|
|
.dark-mode .text-gray-800 { |
|
|
color: #f5f5f5 !important; |
|
|
} |
|
|
.grid-posts { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 2px; |
|
|
} |
|
|
.profile-stats span { |
|
|
display: block; |
|
|
text-align: center; |
|
|
} |
|
|
.profile-stats span:first-child { |
|
|
font-weight: 600; |
|
|
} |
|
|
.profile-stats span:last-child { |
|
|
font-size: 0.8rem; |
|
|
color: #8e8e8e; |
|
|
} |
|
|
</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="#" 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"> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center md:items-start py-6"> |
|
|
|
|
|
<div class="md:mr-12 mb-4 md:mb-0"> |
|
|
<div class="story-ring rounded-full p-1"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Profile" class="w-20 h-20 md:w-32 md:h-32 rounded-full object-cover border-2 border-white"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
<div class="flex flex-col md:flex-row md:items-center mb-4"> |
|
|
<h1 class="text-xl md:text-2xl font-light mr-6 mb-2 md:mb-0">seu_usuario</h1> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-gray-100 hover:bg-gray-200 px-4 py-1 rounded text-sm font-semibold"> |
|
|
Editar perfil |
|
|
</button> |
|
|
<button class="bg-gray-100 hover:bg-gray-200 px-4 py-1 rounded text-sm font-semibold"> |
|
|
Ver arquivo |
|
|
</button> |
|
|
<button class="bg-gray-100 hover:bg-gray-200 p-1 rounded"> |
|
|
<i data-feather="settings" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex space-x-8 mb-4"> |
|
|
<div class="profile-stats"> |
|
|
<span>128</span> |
|
|
<span>publicações</span> |
|
|
</div> |
|
|
<div class="profile-stats"> |
|
|
<span>1,234</span> |
|
|
<span>seguidores</span> |
|
|
</div> |
|
|
<div class="profile-stats"> |
|
|
<span>567</span> |
|
|
<span>seguindo</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h2 class="font-semibold">Seu Nome</h2> |
|
|
<p class="mb-1">Esta é uma biografia de exemplo para o perfil do usuário.</p> |
|
|
<a href="#" class="text-blue-500 font-semibold text-sm">meusite.com</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden border-t border-gray-200 py-3 mb-4"> |
|
|
<div class="flex justify-around"> |
|
|
<div class="profile-stats"> |
|
|
<span>128</span> |
|
|
<span>publicações</span> |
|
|
</div> |
|
|
<div class="profile-stats"> |
|
|
<span>1,234</span> |
|
|
<span>seguidores</span> |
|
|
</div> |
|
|
<div class="profile-stats"> |
|
|
<span>567</span> |
|
|
<span>seguindo</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-200 pt-4 mb-6"> |
|
|
<div class="flex space-x-6 overflow-x-auto pb-2"> |
|
|
<template x-for="i in 8" :key="i"> |
|
|
<div class="flex flex-col items-center space-y-1 flex-shrink-0"> |
|
|
<div class="story-ring rounded-full p-0.5"> |
|
|
<img :src="`http://static.photos/people/200x200/${i+5}`" alt="Highlight" 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="'Destaque '+i"></span> |
|
|
</div> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-200 flex justify-center"> |
|
|
<button class="flex items-center py-4 px-6 border-t border-gray-900 text-gray-900 font-semibold"> |
|
|
<i data-feather="grid" class="mr-2"></i> |
|
|
<span>POSTS</span> |
|
|
</button> |
|
|
<button class="flex items-center py-4 px-6 text-gray-500"> |
|
|
<i data-feather="tv" class="mr-2"></i> |
|
|
<span>IGTV</span> |
|
|
</button> |
|
|
<button class="flex items-center py-4 px-6 text-gray-500"> |
|
|
<i data-feather="bookmark" class="mr-2"></i> |
|
|
<span>SALVOS</span> |
|
|
</button> |
|
|
<button class="flex items-center py-4 px-6 text-gray-500"> |
|
|
<i data-feather="user" class="mr-2"></i> |
|
|
<span>MARCADOS</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid-posts"> |
|
|
<template x-for="i in 9" :key="i"> |
|
|
<div class="relative group" data-aos="fade-up"> |
|
|
<img :src="`http://static.photos/nature/400x400/${i}`" alt="Post" class="w-full aspect-square object-cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"> |
|
|
<div class="flex space-x-4 text-white"> |
|
|
<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="#" class="p-2"> |
|
|
<i data-feather="heart"></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> |
|
|
|
