Prepare production
This commit is contained in:
Lucas
92
app/hello.py
Normal file
92
app/hello.py
Normal file
@@ -0,0 +1,92 @@
|
||||
from datetime import datetime
|
||||
|
||||
from urllib.parse import quote_plus
|
||||
from sqlalchemy import create_engine, text
|
||||
|
||||
from flask import Flask
|
||||
from flask import request
|
||||
from flask import render_template
|
||||
|
||||
DB_USER = 'avsa_form'
|
||||
DB_PASSWORD = '#4gvAwnUr5@MuZk9cYb!'
|
||||
DB_HOST = 'avsa_form_db'
|
||||
DB_PORT = '5432'
|
||||
DB_NAME = 'avsa_form_db'
|
||||
DB_TABLE = 'accounts'
|
||||
|
||||
class user_data:
|
||||
def __init__(self, first_name, last_name, phone_number, request_at, start_availability, end_availability, user_type):
|
||||
self.first_name = first_name
|
||||
self.last_name = last_name
|
||||
self.phone_number = phone_number
|
||||
self.request_at = request_at
|
||||
self.start_availability = start_availability
|
||||
self.end_availability = end_availability
|
||||
self.user_type = user_type
|
||||
|
||||
# new_data = current_data('lucas','royer','0612345678','2011-05-16 15:36:38','2011-05-16 15:36:38','2011-05-16 15:36:38','benevole')
|
||||
|
||||
def insert_db(current_data):
|
||||
# Connect to DB
|
||||
engine = create_engine(f"postgresql+psycopg2://{DB_USER}:%s@{DB_HOST}:{DB_PORT}/{DB_NAME}" % quote_plus(DB_PASSWORD))
|
||||
conn = engine.connect()
|
||||
|
||||
|
||||
|
||||
data = {
|
||||
'first_name': current_data.first_name,
|
||||
'last_name': current_data.last_name,
|
||||
'phone_number': current_data.phone_number,
|
||||
'request_at': current_data.request_at,
|
||||
'start_availability': current_data.start_availability,
|
||||
'end_availability': current_data.end_availability,
|
||||
'user_type': current_data.user_type,
|
||||
}
|
||||
|
||||
# SQL query
|
||||
query=text(f"INSERT INTO {DB_TABLE} (first_name, last_name, phone_number, request_at, start_availability, end_availability, user_type) VALUES (:first_name, :last_name, :phone_number, :request_at, :start_availability, :end_availability, :user_type);")
|
||||
|
||||
conn.execute(query, data)
|
||||
conn.commit()
|
||||
|
||||
|
||||
def create_app():
|
||||
app = Flask(__name__)
|
||||
app.config.from_mapping(
|
||||
SECRET_KEY='dev',
|
||||
)
|
||||
|
||||
@app.route("/")
|
||||
def accueil():
|
||||
return render_template('accueil.html')
|
||||
|
||||
@app.route('/formulaire', methods=['GET'])
|
||||
def formulaire():
|
||||
return render_template('formulaire.html', retry=False)
|
||||
|
||||
@app.route('/resultat', methods=['POST'])
|
||||
def resultat():
|
||||
if request.method == 'POST':
|
||||
first_name = request.form['first_name']
|
||||
last_name = request.form['last_name']
|
||||
phone_number = request.form['phone_number']
|
||||
request_at = datetime.now().strftime("%m-%d-%Y %H:%M:%S")
|
||||
|
||||
availability_date = request.form['availability_date']
|
||||
start_availability_h = request.form['start_availability_h']
|
||||
start_availability_m = request.form['start_availability_m']
|
||||
end_availability_h = request.form['end_availability_h']
|
||||
end_availability_m = request.form['end_availability_m']
|
||||
|
||||
start_availability = f'{availability_date} {start_availability_h}:{start_availability_m}:00'
|
||||
end_availability = f'{availability_date} {end_availability_h}:{end_availability_m}:00'
|
||||
user_type = request.form['user_type']
|
||||
current_data = user_data(first_name, last_name, phone_number, request_at, start_availability, end_availability, user_type)
|
||||
|
||||
if any(value is None for value in current_data.__dict__.values()):
|
||||
return render_template('formulaire.html', retry=True)
|
||||
else:
|
||||
insert_db(current_data)
|
||||
return render_template('resultat.html', first_name=first_name, last_name=last_name, phone_number=phone_number, request_at=request_at, start_availability_h=start_availability_h, start_availability_m=start_availability_m, end_availability_h=end_availability_h, end_availability_m=end_availability_m, user_type=current_data.user_type)
|
||||
|
||||
return app
|
||||
13
app/templates/accueil.html
Normal file
13
app/templates/accueil.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr-FR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>AVSA - Familles</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="formulaire">
|
||||
<button>S'inscrire</button>
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
405
app/templates/calendar.html
Normal file
405
app/templates/calendar.html
Normal file
@@ -0,0 +1,405 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<title>tailwind Calendar</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-200">
|
||||
<div class="container mx-auto mt-10">
|
||||
<div class="wrapper bg-white rounded shadow w-full ">
|
||||
<div class="header flex justify-between border-b p-2">
|
||||
<span class="text-lg font-bold">
|
||||
2020 July
|
||||
</span>
|
||||
<div class="buttons">
|
||||
<button class="p-1">
|
||||
<svg width="1em" fill="gray" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-left-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||
<path fill-rule="evenodd" d="M8.354 11.354a.5.5 0 0 0 0-.708L5.707 8l2.647-2.646a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708 0z" />
|
||||
<path fill-rule="evenodd" d="M11.5 8a.5.5 0 0 0-.5-.5H6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="p-1">
|
||||
<svg width="1em" fill="gray" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
|
||||
<path fill-rule="evenodd" d="M7.646 11.354a.5.5 0 0 1 0-.708L10.293 8 7.646 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0z" />
|
||||
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="p-2 border-r h-10 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 xl:text-sm text-xs">
|
||||
<span class="xl:block lg:block md:block sm:block hidden">Sunday</span>
|
||||
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sun</span>
|
||||
</th>
|
||||
<th class="p-2 border-r h-10 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 xl:text-sm text-xs">
|
||||
<span class="xl:block lg:block md:block sm:block hidden">Monday</span>
|
||||
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Mon</span>
|
||||
</th>
|
||||
<th class="p-2 border-r h-10 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 xl:text-sm text-xs">
|
||||
<span class="xl:block lg:block md:block sm:block hidden">Tuesday</span>
|
||||
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Tue</span>
|
||||
</th>
|
||||
<th class="p-2 border-r h-10 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 xl:text-sm text-xs">
|
||||
<span class="xl:block lg:block md:block sm:block hidden">Wednesday</span>
|
||||
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Wed</span>
|
||||
</th>
|
||||
<th class="p-2 border-r h-10 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 xl:text-sm text-xs">
|
||||
<span class="xl:block lg:block md:block sm:block hidden">Thursday</span>
|
||||
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Thu</span>
|
||||
</th>
|
||||
<th class="p-2 border-r h-10 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 xl:text-sm text-xs">
|
||||
<span class="xl:block lg:block md:block sm:block hidden">Friday</span>
|
||||
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Fri</span>
|
||||
</th>
|
||||
<th class="p-2 border-r h-10 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 xl:text-sm text-xs">
|
||||
<span class="xl:block lg:block md:block sm:block hidden">Saturday</span>
|
||||
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sat</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="text-center h-20">
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300 ">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">1</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer">
|
||||
<div class="event bg-purple-400 text-white rounded p-1 text-sm mb-1">
|
||||
<span class="event-name">
|
||||
Meating
|
||||
</span>
|
||||
<span class="time">
|
||||
12:00~14:00
|
||||
</span>
|
||||
</div>
|
||||
<div class="event bg-purple-400 text-white rounded p-1 text-sm mb-1">
|
||||
<span class="event-name">
|
||||
Meating
|
||||
</span>
|
||||
<span class="time">
|
||||
18:00~20:00
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">2</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">3</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">4</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">6</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-hidden transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">7</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer">
|
||||
<div class="event bg-blue-400 text-white rounded p-1 text-sm mb-1">
|
||||
<span class="event-name">
|
||||
Shopping
|
||||
</span>
|
||||
<span class="time">
|
||||
12:00~14:00
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500 text-sm">8</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- line 1 -->
|
||||
<tr class="text-center h-20">
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">9</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">10</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">12</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">13</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">14</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">15</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500 text-sm">16</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- line 1 -->
|
||||
|
||||
<!-- line 2 -->
|
||||
<tr class="text-center h-20">
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">16</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">17</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">18</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">19</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">20</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">21</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500 text-sm">22</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- line 2 -->
|
||||
|
||||
<!-- line 3 -->
|
||||
<tr class="text-center h-20">
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">23</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">24</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">25</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">26</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">27</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">28</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500 text-sm">29</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- line 3 -->
|
||||
|
||||
<!-- line 4 -->
|
||||
<tr class="text-center h-20">
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">30</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">31</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border bg-gray-100 p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">1</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border bg-gray-100 p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">2</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border bg-gray-100 p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">3</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border bg-gray-100 p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500">4</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="border bg-gray-100 p-1 h-40 xl:w-40 lg:w-30 md:w-30 sm:w-20 w-10 overflow-auto transition cursor-pointer duration-500 ease hover:bg-gray-300">
|
||||
<div class="flex flex-col h-40 mx-auto xl:w-40 lg:w-30 md:w-30 sm:w-full w-10 mx-auto overflow-hidden">
|
||||
<div class="top h-5 w-full">
|
||||
<span class="text-gray-500 text-sm">5</span>
|
||||
</div>
|
||||
<div class="bottom flex-grow h-30 py-1 w-full cursor-pointer"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- line 4 -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
257
app/templates/formulaire.html
Normal file
257
app/templates/formulaire.html
Normal file
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type=text], select, textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 12px 12px 12px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
|
||||
input[type=submit]:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.container {
|
||||
border-radius: 5px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
float: left;
|
||||
width: 5%;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.col-25 {
|
||||
float: left;
|
||||
width: 25%;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.col-75 {
|
||||
float: left;
|
||||
width: 75%;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Clear floats after the columns */
|
||||
.row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
|
||||
@media screen and (max-width: 600px) {
|
||||
.col-5 .col-25, .col-75, input[type=submit] {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* .button {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
background-color: #04AA6D;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
padding: 20px;
|
||||
width: 200px;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.button span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.button span:after {
|
||||
content: '\00bb';
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
right: -20px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.button:hover span {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.button:hover span:after {
|
||||
opacity: 1;
|
||||
right: 0;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Proposition de créneau de balade - A Vélo Sans Age Nantes</h2>
|
||||
<p>Merci de préciser votre demande ci-dessous :</p>
|
||||
|
||||
<div class="container">
|
||||
<form action="/resultat" method="post">
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="utype">Vous êtes</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<select id="utype" name="user_type">
|
||||
<option value="usager">Bénéficiaire</option>
|
||||
<option value="famille">Famille du bénéficiaire</option>
|
||||
<option value="benevole">Bénévole pilote</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="fname">Prénom</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<input type="text" id="fname" name="first_name" placeholder="Votre prénom...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="lname">Nom</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<input type="text" id="lname" name="last_name" placeholder="Votre nom...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="phone">Téléphone</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<input type="text" id="phone" name="phone_number" placeholder="Votre numéro de téléphone...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="date">Disponible le </label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<input type="date" id="date" name="availability_date" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="hstart">À</label>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<select id="hstart" name="start_availability_h" style="text-align: center">
|
||||
<option value=08>08h</option>
|
||||
<option value=09>09h</option>
|
||||
<option value=10>10h</option>
|
||||
<option value=11>11h</option>
|
||||
<option value=12>12h</option>
|
||||
<option value=13>13h</option>
|
||||
<option value=14>14h</option>
|
||||
<option value=15>15h</option>
|
||||
<option value=16>16h</option>
|
||||
<option value=17>17h</option>
|
||||
<option value=18>18h</option>
|
||||
<option value=19>19h</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<select id="mstart" name="start_availability_m" style="text-align: center">
|
||||
<option value=00>00</option>
|
||||
<option value=15>15</option>
|
||||
<option value=30>30</option>
|
||||
<option value=45>45</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="hend">À</label>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<select id="hend" name="end_availability_h" style="text-align: center">
|
||||
<option value=08>08h</option>
|
||||
<option value=09>09h</option>
|
||||
<option value=10>10h</option>
|
||||
<option value=11>11h</option>
|
||||
<option value=12>12h</option>
|
||||
<option value=13>13h</option>
|
||||
<option value=14>14h</option>
|
||||
<option value=15>15h</option>
|
||||
<option value=16>16h</option>
|
||||
<option value=17>17h</option>
|
||||
<option value=18>18h</option>
|
||||
<option value=19>19h</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<select id="mend" name="end_availability_m" style="text-align: center">
|
||||
<option value=00>00</option>
|
||||
<option value=15>15</option>
|
||||
<option value=30>30</option>
|
||||
<option value=45>45</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="col-25">
|
||||
<label for="tstart">De </label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<input type="time" id="tstart" name="start_availability_time" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
<label for="tend">Jusqu'à</label>
|
||||
</div>
|
||||
<div class="col-75">
|
||||
<input type="time" id="tend" name="end_availability_time" placeholder="">
|
||||
</div>
|
||||
</div> -->
|
||||
<br>
|
||||
<div class="row">
|
||||
<input type="submit" value="Envoyer">
|
||||
</div>
|
||||
<!-- <div style="text-align: center">
|
||||
<button type="submit" class="button" style="vertical-align:middle"><span>Envoyer</span></button>
|
||||
</div> -->
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/">
|
||||
<button>Retour</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
20
app/templates/resultat.html
Normal file
20
app/templates/resultat.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr-FR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>AVSA - Familles</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Votre demande a bien été prise en compte :</h1>
|
||||
<p>Vous êtes : {{ user_type }}</p>
|
||||
<p>Prenom : {{ first_name }}</p>
|
||||
<p>Nom : {{ last_name }}</p>
|
||||
<p>Téléphone : {{ user_message }}</p>
|
||||
<p>Date : {{ availability_date }}</p>
|
||||
<p>Horaire : de {{ start_availability_h }}h{{ start_availability_m }} à {{ end_availability_h }}h{{ end_availability_m }}</p>
|
||||
<a href="/">
|
||||
<button>Retour</button>
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user