Persano commited on
Commit
2e82b88
·
verified ·
1 Parent(s): ba39547

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +136 -9
templates/index.html CHANGED
@@ -1,28 +1,155 @@
1
  <!DOCTYPE html>
2
  <html lang="pt-BR">
3
  <head>
4
- <meta charset="UTF-8" />
5
- <title>Formulário Imobiliário</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  </head>
7
  <body>
 
8
  <h1>Quer uma oferta imobiliária exclusiva? Deixe seus dados:</h1>
 
9
  {% with messages = get_flashed_messages() %}
10
  {% if messages %}
11
- <ul>
12
  {% for message in messages %}
13
  <li>{{ message }}</li>
14
  {% endfor %}
15
  </ul>
16
  {% endif %}
17
  {% endwith %}
 
18
  <form method="POST" action="/">
19
- <label>Nome: <input type="text" name="nome" required /></label><br/>
20
- <label>Email: <input type="email" name="email" required /></label><br/>
21
- <label>Bairro desejado: <input type="text" name="bairro" /></label><br/>
22
- <label>Faixa de preço: <input type="text" name="preco" /></label><br/>
23
- <label>Mensagem extra: <textarea name="mensagem"></textarea></label><br/>
24
- <button type="submit">Enviar</button>
 
 
 
 
 
 
 
 
 
 
25
  </form>
 
26
  </body>
27
  </html>
28
 
 
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" />
6
+ <title>Formulário Imobiliário</title>
7
+ <style>
8
+ /* Reset básico */
9
+ * {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ body {
14
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15
+ background: #f0f4f8;
16
+ color: #333;
17
+ margin: 0;
18
+ padding: 20px;
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: flex-start;
22
+ min-height: 100vh;
23
+ }
24
+
25
+ .container {
26
+ background: #fff;
27
+ padding: 30px 40px;
28
+ border-radius: 10px;
29
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
30
+ max-width: 480px;
31
+ width: 100%;
32
+ }
33
+
34
+ h1 {
35
+ font-weight: 700;
36
+ font-size: 1.8rem;
37
+ margin-bottom: 20px;
38
+ color: #2c3e50;
39
+ text-align: center;
40
+ }
41
+
42
+ form label {
43
+ display: block;
44
+ margin-bottom: 8px;
45
+ font-weight: 600;
46
+ color: #34495e;
47
+ }
48
+
49
+ form input[type="text"],
50
+ form input[type="email"],
51
+ form textarea {
52
+ width: 100%;
53
+ padding: 10px 14px;
54
+ margin-bottom: 18px;
55
+ border: 1.8px solid #d1d9e6;
56
+ border-radius: 6px;
57
+ font-size: 1rem;
58
+ transition: border-color 0.3s ease;
59
+ font-family: inherit;
60
+ }
61
+
62
+ form input[type="text"]:focus,
63
+ form input[type="email"]:focus,
64
+ form textarea:focus {
65
+ border-color: #007bff;
66
+ outline: none;
67
+ box-shadow: 0 0 6px #a9c8ff;
68
+ }
69
+
70
+ form textarea {
71
+ resize: vertical;
72
+ min-height: 80px;
73
+ }
74
+
75
+ button {
76
+ width: 100%;
77
+ background: #007bff;
78
+ color: white;
79
+ font-size: 1.1rem;
80
+ font-weight: 700;
81
+ border: none;
82
+ padding: 14px 0;
83
+ border-radius: 8px;
84
+ cursor: pointer;
85
+ transition: background-color 0.3s ease;
86
+ font-family: inherit;
87
+ }
88
+
89
+ button:hover {
90
+ background: #0056b3;
91
+ }
92
+
93
+ ul.flash-messages {
94
+ list-style: none;
95
+ padding: 0;
96
+ margin-bottom: 20px;
97
+ text-align: center;
98
+ color: #2ecc71; /* verde */
99
+ font-weight: 700;
100
+ }
101
+
102
+ ul.flash-messages li {
103
+ background: #d4edda;
104
+ padding: 12px 20px;
105
+ border-radius: 8px;
106
+ box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
107
+ }
108
+
109
+ @media (max-width: 520px) {
110
+ .container {
111
+ padding: 25px 20px;
112
+ }
113
+
114
+ h1 {
115
+ font-size: 1.5rem;
116
+ }
117
+ }
118
+ </style>
119
  </head>
120
  <body>
121
+ <div class="container">
122
  <h1>Quer uma oferta imobiliária exclusiva? Deixe seus dados:</h1>
123
+
124
  {% with messages = get_flashed_messages() %}
125
  {% if messages %}
126
+ <ul class="flash-messages">
127
  {% for message in messages %}
128
  <li>{{ message }}</li>
129
  {% endfor %}
130
  </ul>
131
  {% endif %}
132
  {% endwith %}
133
+
134
  <form method="POST" action="/">
135
+ <label for="nome">Nome:</label>
136
+ <input type="text" id="nome" name="nome" required placeholder="Seu nome completo" />
137
+
138
+ <label for="email">Email:</label>
139
+ <input type="email" id="email" name="email" required placeholder="[email protected]" />
140
+
141
+ <label for="bairro">Bairro desejado:</label>
142
+ <input type="text" id="bairro" name="bairro" placeholder="Ex: Vila Mariana" />
143
+
144
+ <label for="preco">Faixa de preço:</label>
145
+ <input type="text" id="preco" name="preco" placeholder="Ex: R$ 500.000 - R$ 800.000" />
146
+
147
+ <label for="mensagem">Mensagem extra:</label>
148
+ <textarea id="mensagem" name="mensagem" placeholder="Conte mais sobre o que deseja..."></textarea>
149
+
150
+ <button type="submit">Enviar</button>
151
  </form>
152
+ </div>
153
  </body>
154
  </html>
155