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>Configurações - Ubaflats</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 .config-card {19 transition: transform 0.3s, box-shadow 0.3s;20 }21 .config-card:hover {22 transform: translateY(-5px);23 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);24 }25 .color-option {26 width: 30px;27 height: 30px;28 border-radius: 50%;29 cursor: pointer;30 border: 2px solid transparent;31 }32 .color-option.selected {33 border-color: #000;34 }35 </style>36</head>37<body class="bg-gray-100">38 <div class="flex h-screen overflow-hidden">39 <!-- Sidebar -->40 <div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0">41 <div class="p-4 flex items-center">42 <i data-feather="home" class="h-8 w-8 text-orange-500"></i>43<span class="ml-2 text-xl font-bold">Ubaflats</span>44</div>45 <nav class="mt-8">46 <div class="px-4">47 <h3 class="text-xs uppercase text-gray-400 tracking-wider font-semibold">Menu</h3>48 <div class="mt-4 space-y-1">49 <a href="dashboard.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">50 <i data-feather="home" class="w-5 h-5"></i>51 <span class="ml-3">Dashboard</span>52 </a>53 <a href="reservas.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">54 <i data-feather="calendar" class="w-5 h-5"></i>55 <span class="ml-3">Reservas</span>56 </a>57 <a href="configuracoes.html" class="flex items-center px-4 py-2 bg-orange-600 rounded-md text-white">58<i data-feather="settings" class="w-5 h-5"></i>59 <span class="ml-3">Configurações</span>60 </a>61 <a href="lugares-proximos.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">62 <i data-feather="map" class="w-5 h-5"></i>63 <span class="ml-3">Lugares Próximos</span>64 </a>65 <a href="ajuda.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">66 <i data-feather="help-circle" class="w-5 h-5"></i>67 <span class="ml-3">Ajuda</span>68 </a>69 </div>70 </div>71 <div class="px-4 mt-8">72 <h3 class="text-xs uppercase text-gray-400 tracking-wider font-semibold">Conta</h3>73 <div class="mt-4 space-y-1">74 <a href="perfil.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">75 <i data-feather="user" class="w-5 h-5"></i>76 <span class="ml-3">Perfil</span>77 </a>78 <a href="#" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md">79 <i data-feather="log-out" class="w-5 h-5"></i>80 <span class="ml-3">Sair</span>81 </a>82 </div>83 </div>84 </nav>85 </div>86 87 <!-- Main Content -->88 <div class="flex-1 overflow-auto">89 <!-- Top Navigation -->90 <header class="bg-white shadow-sm">91 <div class="flex items-center justify-between px-6 py-4">92 <div>93 <h1 class="text-2xl font-bold text-gray-800">Configurações</h1>94 </div>95 <div class="flex items-center space-x-4">96 <div class="relative">97 <i data-feather="bell" class="text-gray-500 hover:text-teal-500 cursor-pointer"></i>98 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>99 </div>100 <div class="flex items-center">101 <img src="http://static.photos/people/200x200/10" alt="User" class="h-8 w-8 rounded-full">102 <span class="ml-2 text-gray-700">Contratante</span>103 </div>104 </div>105 </div>106 </header>107 108 <!-- Main Content Area -->109 <main class="p-6">110 <!-- Account Settings -->111 <div class="bg-white rounded-xl shadow-sm p-6 mb-6 config-card">112 <h2 class="text-xl font-bold text-gray-800 mb-6">Configurações da Conta</h2>113 114 <div class="space-y-6">115 <!-- Profile Information -->116 <div>117 <h3 class="font-semibold text-gray-800 mb-3">Informações do Perfil</h3>118 <div class="grid md:grid-cols-2 gap-4">119 <div>120 <label class="block text-gray-700 text-sm font-medium mb-1">Nome Completo</label>121 <input type="text" value="João Silva" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">122 </div>123 <div>124 <label class="block text-gray-700 text-sm font-medium mb-1">E-mail</label>125 <input type="email" value="joao@example.com" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">126 </div>127 <div>128 <label class="block text-gray-700 text-sm font-medium mb-1">Telefone</label>129 <input type="tel" value="(99) 99999-9999" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">130 </div>131 <div>132 <label class="block text-gray-700 text-sm font-medium mb-1">CPF</label>133 <input type="text" value="123.456.789-00" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">134 </div>135 </div>136 <button class="mt-4 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition duration-300">137Salvar Alterações138 </button>139 </div>140 141 <!-- Change Password -->142 <div>143 <h3 class="font-semibold text-gray-800 mb-3">Alterar Senha</h3>144 <div class="space-y-4">145 <div>146 <label class="block text-gray-700 text-sm font-medium mb-1">Senha Atual</label>147 <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">148 </div>149 <div>150 <label class="block text-gray-700 text-sm font-medium mb-1">Nova Senha</label>151 <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">152 </div>153 <div>154 <label class="block text-gray-700 text-sm font-medium mb-1">Confirmar Nova Senha</label>155 <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">156 </div>157 <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition duration-300">158Alterar Senha159 </button>160 </div>161 </div>162 163 <!-- Account Management -->164 <div>165 <h3 class="font-semibold text-gray-800 mb-3">Gerenciamento de Conta</h3>166 <div class="space-y-2">167 <button class="w-full text-left bg-red-100 hover:bg-red-200 text-red-800 px-4 py-2 rounded-md transition duration-300 flex justify-between items-center">168 <span>Excluir Conta</span>169 <i data-feather="trash-2" class="w-4 h-4"></i>170 </button>171 <button class="w-full text-left bg-yellow-100 hover:bg-yellow-200 text-yellow-800 px-4 py-2 rounded-md transition duration-300 flex justify-between items-center">172 <span>Exportar Dados</span>173 <i data-feather="download" class="w-4 h-4"></i>174 </button>175 </div>176 </div>177 </div>178 </div>179 180 <!-- App Settings -->181 <div class="bg-white rounded-xl shadow-sm p-6 config-card">182 <h2 class="text-xl font-bold text-gray-800 mb-6">Configurações do Aplicativo</h2>183 184 <div class="space-y-6">185 <!-- Theme Color -->186 <div>187 <h3 class="font-semibold text-gray-800 mb-3">Cor do Tema</h3>188 <div class="flex space-x-3">189 <div class="color-option bg-orange-500 selected" data-color="orange"></div>190<div class="color-option bg-blue-500" data-color="blue"></div>191 <div class="color-option bg-indigo-500" data-color="indigo"></div>192 <div class="color-option bg-purple-500" data-color="purple"></div>193 <div class="color-option bg-pink-500" data-color="pink"></div>194 <div class="color-option bg-red-500" data-color="red"></div>195 <div class="color-option bg-orange-500" data-color="orange"></div>196 <div class="color-option bg-yellow-500" data-color="yellow"></div>197 <div class="color-option bg-green-500" data-color="green"></div>198 </div>199 </div>200 201 <!-- Notifications -->202 <div>203 <h3 class="font-semibold text-gray-800 mb-3">Notificações</h3>204 <div class="space-y-3">205 <div class="flex items-center justify-between">206 <div>207 <h4 class="font-medium text-gray-800">Notificações por E-mail</h4>208 <p class="text-sm text-gray-600">Receba atualizações e promoções por e-mail</p>209 </div>210 <label class="relative inline-flex items-center cursor-pointer">211 <input type="checkbox" value="" class="sr-only peer" checked>212 <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>213</label>214 </div>215 <div class="flex items-center justify-between">216 <div>217 <h4 class="font-medium text-gray-800">Notificações por SMS</h4>218 <p class="text-sm text-gray-600">Receba lembretes importantes por SMS</p>219 </div>220 <label class="relative inline-flex items-center cursor-pointer">221 <input type="checkbox" value="" class="sr-only peer">222 <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-500"></div>223 </label>224 </div>225 <div class="flex items-center justify-between">226 <div>227 <h4 class="font-medium text-gray-800">Notificações Push</h4>228 <p class="text-sm text-gray-600">Receba notificações no seu dispositivo</p>229 </div>230 <label class="relative inline-flex items-center cursor-pointer">231 <input type="checkbox" value="" class="sr-only peer" checked>232 <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-teal-500"></div>233 </label>234 </div>235 </div>236 </div>237 238 <!-- Save Settings -->239 <div class="pt-4">240 <button class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-md font-medium transition duration-300">241Salvar Configurações242 </button>243 </div>244 </div>245 </div>246 </main>247 </div>248 </div>249 250 <script>251 // Initialize feather icons252 document.addEventListener('DOMContentLoaded', function() {253 feather.replace();254 255 // Color selection256 const colorOptions = document.querySelectorAll('.color-option');257 colorOptions.forEach(option => {258 option.addEventListener('click', function() {259 colorOptions.forEach(opt => opt.classList.remove('selected'));260 this.classList.add('selected');261 // Here you would change the theme color in the app262 });263 });264 });265 </script>266</body>267</html>