Scribd
Upload
7 views6 pages

Codigo de 13-03-2025

This document is a Flask web application that provides user registration and login functionalities using SQLite for data storage. It includes HTML templates for the registration and login forms, along with CSS for styling. The application uses Ngrok for exposing the local server to the internet.

Uploaded by

Maria Rafaela
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views6 pages

Codigo de 13-03-2025

This document is a Flask web application that provides user registration and login functionalities using SQLite for data storage. It includes HTML templates for the registration and login forms, along with CSS for styling. The application uses Ngrok for exposing the local server to the internet.

Uploaded by

Maria Rafaela
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

from flask import Flask, request, render_template_string

from flask_ngrok import run_with_ngrok


import sqlite3
import os

app = Flask(__name__)
run_with_ngrok(app) # Inicia o Ngrok quando o app rodar

# HTML e CSS como strings (copiados dos seus arquivos)


INDEX_HTML = '''
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
{css}
</style>
<title>Cadastro</title>
</head>
<body>
<div class="container">
<h2>Cadastro</h2>
<form method="POST" action="/register">
<div class="form-group">
<label for="name">Nome</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Senha</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="tel">Telefone</label>
<input type="tel" id="tel" name="tel">
</div>
<div class="form-group">
<label for="date">Data de Nascimento</label>
<input type="date" id="date" name="date">
</div>
<div class="form-group">
<label for="gender">Gênero</label>
<select id="gender" name="gender">
<option value="">Selecione</option>
<option value="male">Masculino</option>
<option value="female">Feminino</option>
<option value="other">Outros</option>
</select>
</div>
<button type="submit" class="btn">Sending!</button>
</form>
</div>
</body>
</html>
'''
LOGIN_HTML = '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
{css}
</style>
<title>Login</title>
</head>
<body>
<div class="card">
<h2>Login</h2>
<form method="POST" action="/login">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="password">Senha</label>
<input type="password" id="password" name="password" required>
<button type="submit">Entrar</button>
<button id="cadastro"><a href="/">Cadastre-se</a></button>
</form>
<div class="social">
<a href="https://www.gmail.com"><img
src="https://cdnlogo.com/logos/g/35/google-icon.svg"></a>
<a href="https://www.facebook.com"><img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_
%282019%29.png/768px-Facebook_Logo_%282019%29.png"></a>
<a href="https://www.instagram.com"><img
src="https://images.vexels.com/media/users/3/137380/isolated/preview/
1b2ca367caa7eff8b45c09ec09b44c16-logo-do-icone-do-instagram.png?w=360"></a>
<a href="https://www.tiktok.com"><img
src="https://cdnlogo.com/logos/t/46/tiktok-icon-black.svg"></a>
</div>
</div>
</body>
</html>
'''

CSS = '''
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');

body{
font-family: "Rock Salt", cursive;
background-color: #FAF3E0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container{
background: #FFFFFF;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
width: 320px;
text-align: center;
}

.container h2{
color:#333;
margin-bottom: 20px;
}

.form-group{
margin-bottom: 15px;
text-align: left;
}

.form-group label {
font-size: 14px;
color: #666;
margin-bottom: 5px;
display: block;
}

.form-group input, .form-group select {


width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #f9f9f9;
font-size: 14px;
outline: none;
transition: border 0.3s;
}

.form-group input:focus, .form-group select:focus{


border-color: #ff7f50;
}

.btn{
background-color: #ff7f50;
color: white;
padding: 12px;
border: none;
border-radius: 6px;
cursor: pointer;
width: 100px;
font-size: 16px;
transition: background 0.3s;
}

.btn:hover{
background-color: #ff0aff;
}

.card{
background: #FFFFFF;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
width: 320px;
text-align: center;
}
.card h2{
color:#333;
margin-bottom: 20px;
}

.card label{
font-size: 14px;
color: #666;
margin-bottom: 5px;
display: block;
}

.card input{
width: 95%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #f9f9f9;
font-size: 14px;
outline: none;
transition: border 0.3s;
}

.card input:focus{
border-color: #ff7f50;
}

.card button{
margin-top: 20px;
background-color: #ff7f50;
color: white;
padding: 12px;
border: none;
border-radius: 6px;
cursor: pointer;
width: 100px;
font-size: 16px;
transition: background 0.3s;
}

.card button:hover{
background-color: #ff0aff;
}

.social{
display: flex;
justify-content: center;
margin-top: 15px;
}

.social img{
width: 32px;
height: 32px;
cursor: pointer;
margin-right: 10px;
margin-top: 5px;
}
.social a{
margin: 0 10px;
text-decoration: none;
}

.card #cadastro {
margin-top: 20px;
margin-left: 10px;
background-color: #78f008;
color: white;
padding: 12px;
border: none;
border-radius: 6px;
cursor: pointer;
width: 120px;
font-size: 16px;
transition: background 0.3s;
}

.card #cadastro:hover{
background-color: #ec4ed7;
}

.card #cadastro a{
text-decoration: none;
color: white;
font-size: 16px;
}
'''

# Configuração do banco de dados SQLite


def init_db():
conn = sqlite3.connect('users.db')
c = conn.cursor()
c.execute('''CREATE TABLE IF NOT EXISTS users
(id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT, email TEXT UNIQUE, password TEXT,
tel TEXT, birth_date TEXT, gender TEXT)''')
conn.commit()
conn.close()

# Rota para a página de cadastro


@app.route('/', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
password = request.form['password']
tel = request.form.get('tel', '')
birth_date = request.form.get('date', '')
gender = request.form.get('gender', '')

try:
conn = sqlite3.connect('users.db')
c = conn.cursor()
c.execute("INSERT INTO users (name, email, password, tel, birth_date,
gender) VALUES (?, ?, ?, ?, ?, ?)",
(name, email, password, tel, birth_date, gender))
conn.commit()
conn.close()
return "Cadastro realizado com sucesso! <a href='/login'>Faça
login</a>"
except sqlite3.IntegrityError:
return "Erro: E-mail já cadastrado!"

return render_template_string(INDEX_HTML, css=CSS)

# Rota para a página de login


@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
email = request.form['email']
password = request.form['password']

conn = sqlite3.connect('users.db')
c = conn.cursor()
c.execute("SELECT * FROM users WHERE email = ? AND password = ?", (email,
password))
user = c.fetchone()
conn.close()

if user:
return f"Bem-vindo, {user[1]}! Login realizado com sucesso."
else:
return "E-mail ou senha inválidos!"

return render_template_string(LOGIN_HTML, css=CSS)

if __name__ == '__main__':
init_db() # Inicializa o banco de dados
app.run()

You might also like