Skip to content

Commit 1c394b2

Browse files
committed
- Adjustment of project organization + login screen
1 parent 1e79952 commit 1c394b2

File tree

12 files changed

+304
-45
lines changed

12 files changed

+304
-45
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
/relatorios
1+
/relatorios
2+
app/__pycache__

app/__init__.py

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
from flask import Flask
2+
3+
# Inicialização do aplicativo Flask
4+
app = Flask(__name__)
5+
6+
# Importação de rotas para registrar rotas
7+
from app import routes

app.py renamed to app/routes.py

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
from flask import Flask, render_template, request, send_file, jsonify
1+
from app import app
2+
from flask import render_template, request, send_file, jsonify
23
from docx import Document
34
from datetime import datetime
45
import os
56

6-
app = Flask(__name__)
7-
8-
# Configura o caminho para os templates
9-
#template_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'app', 'templates')
10-
#app.template_folder = template_path
117

128
@app.route('/')
139
def index():
1410
return render_template('index.html')
1511

12+
@app.route('/login')
13+
def login():
14+
return render_template('login.html')
15+
16+
1617
@app.route('/processar_formulario', methods=['POST'])
1718
def processar_formulario():
1819

@@ -64,5 +65,3 @@ def processar_formulario():
6465
print(f'Erro: {str(e)}')
6566
return jsonify(success=False)
6667

67-
if __name__ == '__main__':
68-
app.run(debug=True)

app/static/img/avatar.png

27.3 KB
Loading
File renamed without changes.
File renamed without changes.

app/templates/login.html

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Login</title>
7+
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
10+
11+
<!-- Font Awesome -->
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
13+
14+
<!-- Custom Styles -->
15+
<style>
16+
body {
17+
/*background: linear-gradient(135deg, #8e44ad, #3498db);*/
18+
background: linear-gradient(135deg, #3498db, #9b59b6);
19+
height: 100vh;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
margin: 0;
24+
}
25+
26+
.login-container {
27+
background-color: #ffffff;
28+
border-radius: 20px;
29+
padding: 40px;
30+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
31+
text-align: center;
32+
width: 400px;
33+
}
34+
35+
.avatar {
36+
width: 100px;
37+
height: 100px;
38+
border-radius: 50%;
39+
margin-bottom: 20px;
40+
}
41+
42+
.rounded-input {
43+
border-radius: 25px;
44+
}
45+
46+
.password-toggle {
47+
cursor: pointer;
48+
}
49+
50+
.remember-forgot {
51+
color: #8e44ad;
52+
display: flex;
53+
justify-content: space-between;
54+
margin-top: 10px;
55+
}
56+
57+
.forgot-password{
58+
color: #8e44ad;
59+
}
60+
61+
.btn-login {
62+
border-radius: 50px;
63+
width: 100%;
64+
margin-top: 20px;
65+
background-color: #8e44ad;
66+
}
67+
68+
.create-account-btn {
69+
background-color: #fff;
70+
color: #9b59b6;
71+
border: 2px solid #9b59b6;
72+
}
73+
74+
.create-account-btn:hover{
75+
background-color: #9b59b6;
76+
color: #fff;
77+
}
78+
</style>
79+
</head>
80+
<body>
81+
<div class="login-container">
82+
<img src="{{ url_for('static', filename='img/avatar.png') }}" alt="Avatar" class="avatar">
83+
<h2>Login</h2>
84+
<form>
85+
<div class="mb-3">
86+
<input type="text" class="form-control rounded-input" placeholder="Digite seu usuario ou email" required>
87+
</div>
88+
89+
<div class="mb-3">
90+
<div class="input-group">
91+
<input type="password" class="form-control rounded-input" placeholder="Digite sua senha" required>
92+
<span class="input-group-text password-toggle" onclick="togglePassword()">
93+
<i class="far fa-eye"></i>
94+
</span>
95+
</div>
96+
</div>
97+
98+
<div class="mb-3 remember-forgot">
99+
<div class="form-check">
100+
<input class="form-check-input" type="checkbox" value="" id="rememberMe">
101+
<label class="form-check-label" for="rememberMe">
102+
Lembrar
103+
</label>
104+
</div>
105+
<a href="#" class="forgot-password">Esqueceu a senha?</a>
106+
</div>
107+
108+
<button type="submit" class="btn btn-primary btn-login" id="btnLogin">Login</button>
109+
110+
<hr style="margin-top: 20px; margin-bottom: 20px; border-color: #9b59b6;">
111+
112+
<p class="mb-3" style="color: #9b59b6;">Ainda não tem uma conta?</p>
113+
<button type="button" class="btn create-account-btn">Criar Conta</button>
114+
115+
</form>
116+
</div>
117+
118+
<!-- Bootstrap JS and Vue.js -->
119+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
120+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
121+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
122+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
123+
<script>
124+
function togglePassword() {
125+
var passwordInput = document.querySelector('.form-control[type="password"]');
126+
var passwordToggle = document.querySelector('.password-toggle');
127+
128+
if (passwordInput.type === "password") {
129+
passwordInput.type = "text";
130+
passwordToggle.innerHTML = '<i class="far fa-eye-slash"></i>';
131+
} else {
132+
passwordInput.type = "password";
133+
passwordToggle.innerHTML = '<i class="far fa-eye"></i>';
134+
}
135+
}
136+
</script>
137+
</body>
138+
</html>

docker/Dockerfile

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,18 @@ FROM python:3.13.0a4-alpine3.19
44
# Defina o diretório de trabalho
55
WORKDIR /app
66

7+
# Copie o código-fonte para o contêiner
8+
COPY . /app
9+
710
# Instale as dependências
8-
RUN apk --no-cache add gcc musl-dev libffi-dev libressl-dev
11+
RUN apt-get update && apt-get install -y \
12+
npm \
13+
&& rm -rf /var/lib/apt/lists/*
914
COPY requirements.txt requirements.txt
10-
RUN pip3 install -r requirements.txt
15+
RUN pip install -r requirements.txt
1116

12-
# Copie o código-fonte para o contêiner
13-
COPY . .
17+
# Instalar as dependências do npm (incluindo o Vue.js)
18+
RUN npm install
1419

1520
# Exponha a porta que a aplicação Flask estará escutando
1621
EXPOSE 5000

old/login-test.html

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Login</title>
7+
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
10+
11+
<!-- Font Awesome -->
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
13+
14+
<!-- Custom Styles -->
15+
<style>
16+
body {
17+
/*background: linear-gradient(135deg, #8e44ad, #3498db);*/
18+
background: linear-gradient(135deg, #3498db, #9b59b6);
19+
height: 100vh;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
margin: 0;
24+
}
25+
26+
.login-container {
27+
background-color: #ffffff;
28+
border-radius: 20px;
29+
padding: 40px;
30+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
31+
text-align: center;
32+
width: 400px;
33+
}
34+
35+
.avatar {
36+
width: 100px;
37+
height: 100px;
38+
border-radius: 50%;
39+
margin-bottom: 20px;
40+
}
41+
42+
.rounded-input {
43+
border-radius: 25px;
44+
}
45+
46+
.password-toggle {
47+
cursor: pointer;
48+
}
49+
50+
.remember-forgot {
51+
color: #fff;
52+
display: flex;
53+
justify-content: space-between;
54+
margin-top: 10px;
55+
}
56+
57+
.btn-login {
58+
border-radius: 50px;
59+
width: 100%;
60+
margin-top: 20px;
61+
background-color: #8e44ad;
62+
}
63+
64+
.create-account-btn {
65+
background-color: #fff;
66+
color: #9b59b6;
67+
border: 2px solid #9b59b6;
68+
}
69+
70+
.create-account-btn:hover{
71+
background-color: #9b59b6;
72+
color: #fff;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
<div class="login-container">
78+
<img src="path/to/your/avatar.png" alt="Avatar" class="avatar">
79+
<h2>Login</h2>
80+
<form>
81+
<div class="mb-3">
82+
<input type="text" class="form-control rounded-input" placeholder="Username" required>
83+
</div>
84+
85+
<div class="mb-3">
86+
<div class="input-group">
87+
<input type="password" class="form-control rounded-input" placeholder="Password" required>
88+
<span class="input-group-text password-toggle" onclick="togglePassword()">
89+
<i class="far fa-eye"></i>
90+
</span>
91+
</div>
92+
</div>
93+
94+
<div class="mb-3 remember-forgot">
95+
<div class="form-check">
96+
<input class="form-check-input" type="checkbox" value="" id="rememberMe">
97+
<label class="form-check-label" for="rememberMe">
98+
Remember me
99+
</label>
100+
</div>
101+
</div>
102+
103+
<button type="submit" class="btn btn-primary btn-login" id="btnLogin">Login</button>
104+
105+
<hr style="margin-top: 20px; margin-bottom: 20px; border-color: #9b59b6;">
106+
107+
<p class="mb-3" style="color: #9b59b6;">Ainda não tem uma conta?</p>
108+
<button type="button" class="btn create-account-btn">Criar Conta</button>
109+
110+
</form>
111+
</div>
112+
113+
<!-- Bootstrap JS and Vue.js -->
114+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
115+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
116+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
117+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
118+
<script>
119+
function togglePassword() {
120+
var passwordInput = document.querySelector('.form-control[type="password"]');
121+
var passwordToggle = document.querySelector('.password-toggle');
122+
123+
if (passwordInput.type === "password") {
124+
passwordInput.type = "text";
125+
passwordToggle.innerHTML = '<i class="far fa-eye-slash"></i>';
126+
} else {
127+
passwordInput.type = "password";
128+
passwordToggle.innerHTML = '<i class="far fa-eye"></i>';
129+
}
130+
}
131+
</script>
132+
</body>
133+
</html>
File renamed without changes.

0 commit comments

Comments
 (0)