HTML Css App

Page de login :
➢ Html (page login) :

<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<div id="container">

<form action="verification.php" method="POST">

<h1>Connexion</h1>
<label><b>Nom d'utilisateur</b></label>
<input type="text" placeholder="Entrer le nom d'utilisateur"
name="username" required>
<label><b>Mot de passe</b></label>
<input type="password" placeholder="Entrer le mot de passe"
name="password" required>
<input type="submit" id='submit' value='LOGIN' >

<?php
if(isset($_GET['erreur'])){
$err = $_GET['erreur'];
if($err==1 || $err==2)
echo "<p style='color:red'>Utilisateur ou mot de passe
incorrect</p>";
}
?>
</form>
</div>
</body>
</html>
➢ Css(page login) :
body{
background: #67BE4B;
}
#container{
width:400px;
margin:0 auto;
margin-top:10%;
}
/* Bordered form */
form {
width:100%;
padding: 30px;
border: 1px solid #f1f1f1;
background: #fff;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#container h1{
width: 38%;
margin: 0 auto;
padding-bottom: 10px;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */

input[type=submit] {
background-color: #53af57;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
input[type=submit]:hover {
background-color: white;
color: #53af57;
border: 1px solid #53af57;
}
➢ Interface page login

Page de commande de moteur pas à pas :
➢ Html (page de commende) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Commande pas à pas</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></scr
ipt>
<script src="pureknob.js" type="text/javascript"></script>
</head>
<body>
<div style="background-color: #444444c9; width: 100%; overflow: hidden;
height: 73px;">
<div class="column-div">
</div>
<div class="column-div">
<div class='time-frame'>
<div id='date-part'></div>
<div id='time-part'></div>
</div>
</div>
<div class="column-div" id="current-temperature">
</div>
</div>
<div style="flex-direction: column; background-color: #444444c9;margin-left:
auto;margin-right: auto; width: 50em; height: 30em; margin-top: 100px;">
<div class="container-title">
Commande de rotation pas à pas
</div>
<div>
<div style="float: left;margin-top: 82px;margin-left: 54px;">
<p class="text">
Séléctionner un sens de rotation:
</p>
<div class="radio-toolbar">
<input type="radio" id="directSens" name="directSens"
value="directSens" checked>
<label for="directSens">Sens Direct</label>
<input type="radio" id="undirectSens" name="undirectSens"

value="undirectSens">
<label for="undirectSens">Sens Indirect</label>
</div>
</div>
<div style="float: right;">
<div class="container">
<div id="some_element" style="text-align: center;"/>
</div>
<p class="text">
La vitesse de rotation est: <span id="speed_value">50</span>
</p>
<button type="btn" class="btn-confirm">Confirmer</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
➢ Css(page de commende ) :
import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #242333;
color: #fff;
font-family: "Poppins", sans-serif;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.container-title {
margin: 20px 0;
text-align: center;
}
.container-title select {
background-color: #fff;
border: 0;
border-radius: 5px;
font-size: 14px;
font-family: inherit;
margin-left: 10px;
padding: 5px 15px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.container {
perspective: 1000px;
margin-bottom: 30px;
}
p.text {
margin: 5px 20px;
}
p.text span {
color: #6feaf6;
}
.radio-toolbar {
margin: 10px;
}
.radio-toolbar input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.radio-toolbar label {
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.radio-toolbar label:hover {
background-color: #dfd;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:focus + label {

border: 2px dashed #444;
background-color: #bfb;
border-color: #4c4;
}
.btn-confirm {
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
background-color: darkseagreen;
margin-left: 169px;
margin-top: 12px;
}
.btn-confirm:hover {
background-color: #dfd;
cursor: pointer;
}
.column-div {
display:inline-block;
width:33.33%;
margin-right:-4px;
}
.time-frame {
background-color: #000000;
color: #ffffff;
width: 300px;
font-family: Arial;
}
.time-frame > div {

width: 100%;
text-align: center;
}
#date-part {
font-size: 1.2em;
}
#time-part {
font-size: 2em;
}
➢ Interface page de commande de moteur pas a pas
Program python :
from werkzeug.utils import redirect
from flask import Flask, render_template, request,
redirect, session,make_response
from flask_mysqldb import MySQL, MySQLdb
import bcrypt
import random
import json
from time import time
from random import random
app = Flask(__name__ , template_folder='templates')

app.secret_key = "^A%DJAJU^JJ123"
app.config['MYSQL_HOST'] = 'aymengmar.mysql.pythonanywhere-services.com'
app.config['MYSQL_USER'] = 'aymengmar'
app.config['MYSQL_PASSWORD'] = 'Mysql123'
app.config['MYSQL_DB'] = 'aymengmar$command'
mysql = MySQL(app)
@app.route("/login",methods=['POST', 'GET'])
def login():
if request.method == 'GET':
return render_template('login/index.html')
else:
print("request form", request.form)
username = request.form['username']
password = request.form['password'].encode('utf-8')
cur = mysql.connection.cursor()
cur.execute("SELECT * FROM Users WHERE username=%s AND password=%s",
(username,password,))
user = cur.fetchone()
print(user)
cur.close()
if str(user) == 'None':
print('Account Not Found')
if len(user) > 0:
print(user[2])
if password == user[2].encode('utf-8'):
session['loggedin'] = True
return redirect('/dashboard')
else:
print("invalid credentials")
@app.route('/dashboard')
def dashboard():
try:
if session['loggedin'] == True:
return render_template('home/gauge.html')
else:
return redirect('/')
except:
@app.route('/logout', methods=['POST'])
def logout():
print("logout")
session['loggedin'] = False
@app.route('/')
def main():
return redirect("/login")

HTML Css App

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css App

Uploaded by

Copyright:

Available Formats

Page de login :

➢ Html (page login) :

<form action="verification.php" method="POST">

<input type="submit" id='submit' value='LOGIN' >

/* Set a style for all buttons */

➢ Interface page login

<input type="radio" id="undirectSens" name="undirectSens"

.radio-toolbar input[type="radio"]:focus + label {

.time-frame > div {

app = Flask(name , template_folder='templates')

You might also like