Skip to content

Instantly share code, notes, and snippets.

@thiagofa
Last active November 14, 2022 19:05
Show Gist options
  • Save thiagofa/9b5cb7db488ca9b4ae123661a8087a9f to your computer and use it in GitHub Desktop.
Save thiagofa/9b5cb7db488ca9b4ae123661a8087a9f to your computer and use it in GitHub Desktop.
Templates de páginas de segurança do projeto AlgaFood
<!doctype html>
<html lang="pt" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Acesso à AlgaFood</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
html, body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
</head>
<body class="text-center">
<form class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Acesso à AlgaFood</h1>
<p class="alert alert-danger">
O e-mail ou senha não confere
</p>
<input type="email" class="form-control" placeholder="Seu e-mail" required autofocus>
<input type="password" class="form-control" placeholder="Sua senha" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
<p class="mt-5 mb-3 text-muted">&copy; AlgaWorks</p>
</form>
</body>
</html>
<!--
Template baseado em exemplo do Bootstrap:
https://getbootstrap.com.br/docs/4.1/examples/sign-in/
-->
<!doctype html>
<html lang="pt" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Autorização de acesso</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
html, body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-approval {
width: 100%;
max-width: 600px;
padding: 15px;
margin: auto;
}
.table {
margin-top: 30px;
}
</style>
</head>
<body class="text-center">
<form class="form-approval">
<h1 class="h3 mb-3 font-weight-normal">
Autorização de acesso
</h1>
<h2 class="h5 mb-3 font-weight-normal">
A aplicação <strong>nomedaaplicacao</strong> gostaria de acessar a sua conta.
</h2>
<table class="table">
<tbody>
<tr>
<td>Descrição do escopo</td>
<td><input type="radio" /> Aprova</td>
<td><input type="radio" /> Rejeita</td>
</tr>
<tr>
<td>Descrição do escopo</td>
<td><input type="radio" /> Aprova</td>
<td><input type="radio" /> Rejeita</td>
</tr>
</tbody>
</table>
<button class="btn btn-lg btn-primary" type="submit">Autorizar</button>
<p class="mt-5 mb-3 text-muted">&copy; AlgaWorks</p>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment