netoxz/undefined
0
1<!DOCTYPE html>2<html lang="pt-br">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Perfil - Beach Smart Haven</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');12 body {13 font-family: 'Poppins', sans-serif;14 }15 .sidebar {16 transition: all 0.3s;17 }18 .profile-card {19 transition: transform 0.3s, box-shadow 0.3s;20 }21 .profile-card:hover {22 transform: translateY(-5px);23 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);24 }25 </style>26</head>27<body class="bg-gray-100">28 <div class="flex h-screen overflow-hidden">29 <!-- Sidebar -->30 <div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0">31 <div class="p-4 flex items-center">32 <i data-feather="home" class="h-8 w-8 text-teal-400"></i>33 <span class="ml-2 text-xl font-bold">Beach Smart Haven</span>34 </div>35 <nav class="mt-8">36 <div class="px-4">37 <h3 class="text-xs uppercase text-gray-400 tracking-wider font-semibold">Menu</h3>38 <div class="mt-4 space-y-1">39 <a href="dashboard.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">40 <i data-feather="home" class="w-5 h-5"></i>41 <span class="ml-3">Dashboard</span>42 </a>43 <a href="reservas.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">44 <i data-feather="calendar" class="w-5 h-5"></i>45 <span class="ml-3">Reservas</span>46 </a>47 <a href="configuracoes.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">48 <i data-feather="settings" class="w-5 h-5"></i>49 <span class="ml-3">Configurações</span>50 </a>51 <a href="lugares-proximos.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">52 <i data-feather="map" class="w-5 h-5"></i>53 <span class="ml-3">Lugares Próximos</span>54 </a>55 <a href="ajuda.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">56 <i data-feather="help-circle" class="w-5 h-5"></i>57 <span class="ml-3">Ajuda</span>58 </a>59 </div>60 </div>61 <div class="px-4 mt-8">62 <h3 class="text-xs uppercase text-gray-400 tracking-wider font-semibold">Conta</h3>63 <div class="mt-4 space-y-1">64 <a href="perfil.html" class="flex items-center px-4 py-2 bg-teal-700 rounded-md text-white">65 <i data-feather="user" class="w-5 h-5"></i>66 <span class="ml-3">Perfil</span>67 </a>68 <a href="#" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">69 <i data-feather="log-out" class="w-5 h-5"></i>70 <span class="ml-3">Sair</span>71 </a>72 </div>73 </div>74 </nav>75 </div>76 77 <!-- Main Content -->78 <div class="flex-1 overflow-auto">79 <!-- Top Navigation -->80 <header class="bg-white shadow-sm">81 <div class="flex items-center justify-between px-6 py-4">82 <div>83 <h1 class="text-2xl font-bold text-gray-800">Meu Perfil</h1>84 </div>85 <div class="flex items-center space-x-4">86 <div class="relative">87 <i data-feather="bell" class="text-gray-500 hover:text-teal-500 cursor-pointer"></i>88 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>89 </div>90 <div class="flex items-center">91 <img src="http://static.photos/people/200x200/10" alt="User" class="h-8 w-8 rounded-full">92 <span class="ml-2 text-gray-700">Contratante</span>93 </div>94 </div>95 </div>96 </header>97 98 <!-- Main Content Area -->99 <main class="p-6">100 <!-- Profile Overview -->101 <div class="bg-white rounded-xl shadow-sm p-6 mb-6 profile-card">102 <div class="flex flex-col md:flex-row items-center md:items-start">103 <div class="mb-4 md:mb-0 md:mr-6 relative">104 <img src="http://static.photos/people/200x200/10" alt="User" class="w-32 h-32 rounded-full object-cover">105 <button class="absolute bottom-0 right-0 bg-teal-500 text-white p-2 rounded-full hover:bg-teal-600 transition duration-300">106 <i data-feather="camera" class="w-4 h-4"></i>107 </button>108 </div>109 <div class="text-center md:text-left flex-1">110 <h2 class="text-2xl font-bold text-gray-800">João Silva</h2>111 <p class="text-gray-600 mb-2">joao@example.com</p>112 <div class="flex justify-center md:justify-start items-center text-gray-600 mb-4">113 <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>114 <span>São Paulo, SP</span>115 </div>116 <div class="flex justify-center md:justify-start space-x-3">117 <button class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded-md transition duration-300">118 Editar Perfil119 </button>120 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md transition duration-300">121 Compartilhar122 </button>123 </div>124 </div>125 </div>126 </div>127 128 <!-- Personal Information -->129 <div class="bg-white rounded-xl shadow-sm p-6 mb-6 profile-card">130 <h2 class="text-xl font-bold text-gray-800 mb-6">Informações Pessoais</h2>131 132 <div class="grid md:grid-cols-2 gap-6">133 <div>134 <label class="block text-gray-700 text-sm font-medium mb-1">Nome Completo</label>135 <p class="text-gray-800">João Silva</p>136 </div>137 <div>138 <label class="block text-gray-700 text-sm font-medium mb-1">CPF</label>139 <p class="text-gray-800">123.456.789-00</p>140 </div>141 <div>142 <label class="block text-gray-700 text-sm font-medium mb-1">Data de Nascimento</label>143 <p class="text-gray-800">15/03/1985</p>144 </div>145 <div>146 <label class="block text-gray-700 text-sm font-medium mb-1">Gênero</label>147 <p class="text-gray-800">Masculino</p>148 </div>149 <div>150 <label class="block text-gray-700 text-sm font-medium mb-1">Telefone</label>151 <p class="text-gray-800">(99) 99999-9999</p>152 </div>153 <div>154 <label class="block text-gray-700 text-sm font-medium mb-1">Endereço</label>155 <p class="text-gray-800">Rua Exemplo, 123 - São Paulo, SP</p>156 </div>157 </div>158 </div>159 160 <!-- Account Security -->161 <div class="bg-white rounded-xl shadow-sm p-6 profile-card">162 <h2 class="text-xl font-bold text-gray-800 mb-6">Segurança da Conta</h2>163 164 <div class="space-y-6">165 <div>166 <h3 class="font-semibold text-gray-800 mb-3">Alterar Senha</h3>167 <div class="space-y-4">168 <div>169 <label class="block text-gray-700 text-sm font-medium mb-1">Senha Atual</label>170 <input type="password" class="w-full md:w-1/2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">171 </div>172 <div>173 <label class="block text-gray-700 text-sm font-medium mb-1">Nova Senha</label>174 <input type="password" class="w-full md:w-1/2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">175 </div>176 <div>177 <label class="block text-gray-700 text-sm font-medium mb-1">Confirmar Nova Senha</label>178 <input type="password" class="w-full md:w-1/2 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">179 </div>180 <button class="bg-teal-500 hover:bg-teal-600 text-white px-6 py-2 rounded-md font-medium transition duration-300">181 Alterar Senha182 </button>183 </div>184 </div>185 186 <div>187 <h3 class="font-semibold text-gray-800 mb-3">Contatos de Emergência</h3>188 <div class="bg-gray-50 rounded-lg p-4">189 <div class="flex justify-between items-center mb-3">190 <div>191 <h4 class="font-medium text-gray-800">Maria Silva</h4>192 <p class="text-sm text-gray-600">(99) 98888-8888</p>193 </div>194 <div class="flex space-x-2">195 <button class="text-teal-500 hover:text-teal-700">196 <i data-feather="edit" class="w-4 h-4"></i>197 </button>198 <button class="text-red-500 hover:text-red-700">199 <i data-feather="trash-2" class="w-4 h-4"></i>200 </button>201 </div>202 </div>203 <button class="w-full text-center text-teal-500 hover:text-teal-700 border border-teal-500 border-dashed rounded-md py-2 mt-2 transition duration-300">204 <i data-feather="plus" class="w-4 h-4 inline mr-1"></i>205 Adicionar Contato de Emergência206 </button>207 </div>208 </div>209 </div>210 </div>211 </main>212 </div>213 </div>214 215 <script>216 // Initialize feather icons217 document.addEventListener('DOMContentLoaded', function() {218 feather.replace();219 });220 </script>221</body>222</html>