Perfeito!
Vamos montar esse projeto passo a passo com as tuas preferências:
• Frontend simples (HTML + CSS) sem Bootstrap
• Modal com opções de Cadastro e Login
• Backend com Python (Flask)
• Banco de Dados: MySQL
• Campos: nome_usuario, idade, curso, turno, codigo_aceitacao
1. ESTRUTURA DE PASTAS
meu_site/
│
├── [Link]
├── static/
│ └── [Link]
├── templates/
│ └── [Link]
├── [Link]
└── [Link]
2. [Link]
Flask
Flask-MySQLdb
3. [Link] (conexão com MySQL)
import MySQLdb
def get_db_connection():
return [Link](
host="localhost",
user="seu_usuario",
passwd="sua_senha",
db="seu_banco"
)
4. [Link] (servidor Flask)
from flask import Flask, render_template, request, redirect, url_for,
flash
from database import get_db_connection
app = Flask(__name__)
app.secret_key = 'sua_chave_secreta'
@[Link]('/')
def index():
return render_template('[Link]')
@[Link]('/cadastro', methods=['POST'])
def cadastro():
nome = [Link]['nome']
idade = [Link]['idade']
curso = [Link]['curso']
turno = [Link]['turno']
codigo = [Link]['codigo']
conn = get_db_connection()
cursor = [Link]()
[Link]("INSERT INTO usuarios (nome_usuario, idade, curso,
turno, codigo_aceitacao) VALUES (%s, %s, %s, %s, %s)",
(nome, idade, curso, turno, codigo))
[Link]()
[Link]()
flash('Cadastro feito com sucesso!')
return redirect(url_for('index'))
@[Link]('/login', methods=['POST'])
def login():
nome = [Link]['nome']
codigo = [Link]['codigo']
conn = get_db_connection()
cursor = [Link]()
[Link]("SELECT * FROM usuarios WHERE nome_usuario=%s AND
codigo_aceitacao=%s", (nome, codigo))
user = [Link]()
[Link]()
if user:
flash('Login bem-sucedido!')
else:
flash('Usuário ou código incorreto.')
return redirect(url_for('index'))
if __name__ == '__main__':
[Link](debug=True)
5. templates/[Link] (HTML com modal simples)
<!DOCTYPE html>
<html>
<head>
<title>Cadastro e Login</title>
<link rel="stylesheet" href="{{ url_for('static',
filename='[Link]') }}">
</head>
<body>
<button onclick="toggleModal()">Abrir Modal</button>
<div class="modal" id="modal">
<div class="modal-content">
<span onclick="toggleModal()" class="close">×</span>
<h2>Cadastro</h2>
<form action="/cadastro" method="POST">
<input type="text" name="nome" placeholder="Nome do
Usuário" required>
<input type="number" name="idade" placeholder="Idade"
required>
<input type="text" name="curso" placeholder="Curso"
required>
<input type="text" name="turno" placeholder="Turno"
required>
<input type="text" name="codigo" placeholder="Código de
Aceitação" required>
<button type="submit">Cadastrar</button>
</form>
<hr>
<h2>Login</h2>
<form action="/login" method="POST">
<input type="text" name="nome" placeholder="Nome do
Usuário" required>
<input type="text" name="codigo" placeholder="Código de
Aceitação" required>
<button type="submit">Entrar</button>
</form>
</div>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flash">
{% for msg in messages %}
<li>{{ msg }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<script>
function toggleModal() {
const modal = [Link]('modal');
[Link] = ([Link] === 'block') ?
'none' : 'block';
}
</script>
</body>
</html>
6. static/[Link] (estilo básico)
body {
font-family: Arial;
background-color: #f1f1f1;
padding: 20px;
}
button {
padding: 10px;
margin: 10px;
background-color: #0077cc;
color: white;
border: none;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: white;
margin: 10% auto;
padding: 20px;
width: 300px;
border-radius: 8px;
}
input {
display: block;
width: 90%;
margin: 10px auto;
padding: 8px;
}
.close {
float: right;
font-size: 20px;
cursor: pointer;
}
.flash {
list-style: none;
color: green;
}
7. TABELA MySQL
CREATE TABLE usuarios (
id INT AUTO_INCREMENT PRIMARY KEY,
nome_usuario VARCHAR(100),
idade INT,
curso VARCHAR(100),
turno VARCHAR(50),
codigo_aceitacao VARCHAR(100)
);
Se quiser, posso empacotar isso tudo num arquivo .zip ou te ajudar a melhorar o visual
também. Queres que eu monte isso pra download?