|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Formulário Imobiliário</title> |
|
|
<style> |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: #f0f4f8; |
|
|
color: #333; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: flex-start; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.container { |
|
|
background: #fff; |
|
|
padding: 30px 40px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
|
|
max-width: 480px; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-weight: 700; |
|
|
font-size: 1.8rem; |
|
|
margin-bottom: 20px; |
|
|
color: #2c3e50; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
form label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 600; |
|
|
color: #34495e; |
|
|
} |
|
|
|
|
|
form input[type="text"], |
|
|
form input[type="email"], |
|
|
form textarea { |
|
|
width: 100%; |
|
|
padding: 10px 14px; |
|
|
margin-bottom: 18px; |
|
|
border: 1.8px solid #d1d9e6; |
|
|
border-radius: 6px; |
|
|
font-size: 1rem; |
|
|
transition: border-color 0.3s ease; |
|
|
font-family: inherit; |
|
|
} |
|
|
|
|
|
form input[type="text"]:focus, |
|
|
form input[type="email"]:focus, |
|
|
form textarea:focus { |
|
|
border-color: #007bff; |
|
|
outline: none; |
|
|
box-shadow: 0 0 6px #a9c8ff; |
|
|
} |
|
|
|
|
|
form textarea { |
|
|
resize: vertical; |
|
|
min-height: 80px; |
|
|
} |
|
|
|
|
|
button { |
|
|
width: 100%; |
|
|
background: #007bff; |
|
|
color: white; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 700; |
|
|
border: none; |
|
|
padding: 14px 0; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.3s ease; |
|
|
font-family: inherit; |
|
|
} |
|
|
|
|
|
button:hover { |
|
|
background: #0056b3; |
|
|
} |
|
|
|
|
|
ul.flash-messages { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin-bottom: 20px; |
|
|
text-align: center; |
|
|
color: #2ecc71; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
ul.flash-messages li { |
|
|
background: #d4edda; |
|
|
padding: 12px 20px; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3); |
|
|
} |
|
|
|
|
|
@media (max-width: 520px) { |
|
|
.container { |
|
|
padding: 25px 20px; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Quer uma oferta imobiliária exclusiva? Deixe seus dados:</h1> |
|
|
|
|
|
{% with messages = get_flashed_messages() %} |
|
|
{% if messages %} |
|
|
<ul class="flash-messages"> |
|
|
{% for message in messages %} |
|
|
<li>{{ message }}</li> |
|
|
{% endfor %} |
|
|
</ul> |
|
|
{% endif %} |
|
|
{% endwith %} |
|
|
|
|
|
<form method="POST" action="/"> |
|
|
<label for="nome">Nome:</label> |
|
|
<input type="text" id="nome" name="nome" required placeholder="Seu nome completo" /> |
|
|
|
|
|
<label for="email">Email:</label> |
|
|
<input type="email" id="email" name="email" required placeholder="[email protected]" /> |
|
|
|
|
|
<label for="bairro">Bairro desejado:</label> |
|
|
<input type="text" id="bairro" name="bairro" placeholder="Ex: Vila Mariana" /> |
|
|
|
|
|
<label for="preco">Faixa de preço:</label> |
|
|
<input type="text" id="preco" name="preco" placeholder="Ex: R$ 500.000 - R$ 800.000" /> |
|
|
|
|
|
<label for="mensagem">Mensagem extra:</label> |
|
|
<textarea id="mensagem" name="mensagem" placeholder="Conte mais sobre o que deseja..."></textarea> |
|
|
|
|
|
<button type="submit">Enviar</button> |
|
|
</form> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
