adding login / register
This commit is contained in:
Kybo09
parent
c8f313996d
commit
fab48e5def
9 changed files with 187 additions and 4 deletions
|
|
@ -25,7 +25,7 @@ SECRET_KEY = 'django-insecure-85h5=0vw&7e)%9+^n69y!b1ti@7gij_ic3u+66eln838s=!n+l
|
||||||
# SECURITY WARNING: don't run with debug turned on in production!
|
# SECURITY WARNING: don't run with debug turned on in production!
|
||||||
DEBUG = True
|
DEBUG = True
|
||||||
|
|
||||||
ALLOWED_HOSTS = ["3cab-134-214-214-199.ngrok.io", "localhost", "3218-134-214-214-181.ngrok.io"]
|
ALLOWED_HOSTS = ["3cab-134-214-214-199.ngrok.io", "localhost", "4125-134-214-214-181.ngrok.io"]
|
||||||
|
|
||||||
|
|
||||||
# Application definition
|
# Application definition
|
||||||
|
|
|
||||||
|
|
@ -3,4 +3,4 @@ from django.shortcuts import render
|
||||||
|
|
||||||
def index(request):
|
def index(request):
|
||||||
context = {}
|
context = {}
|
||||||
return render(request, "personnes.html", context)
|
return render(request, "login.html", context)
|
||||||
|
|
|
||||||
|
|
@ -486,4 +486,80 @@ nav .right .search:hover {
|
||||||
color: #00E8C2 !important;
|
color: #00E8C2 !important;
|
||||||
background: #00E8C2;
|
background: #00E8C2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.regilog-title {
|
||||||
|
margin: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regilog-form {
|
||||||
|
background: #303030;
|
||||||
|
padding: 50px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: auto;
|
||||||
|
width: 50%;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
}
|
||||||
|
.regilog-form .flexgroup {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.regilog-form .flexgroup input:first-child {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.regilog-form .flexgroup input:last-child {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.regilog-form input {
|
||||||
|
background: transparent;
|
||||||
|
color: #efefef;
|
||||||
|
font-size: 20px;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.regilog-form input::-webkit-input-placeholder {
|
||||||
|
color: #d3d2d2;
|
||||||
|
}
|
||||||
|
.regilog-form input::-moz-placeholder {
|
||||||
|
color: #d3d2d2;
|
||||||
|
}
|
||||||
|
.regilog-form input:-ms-input-placeholder {
|
||||||
|
color: #d3d2d2;
|
||||||
|
}
|
||||||
|
.regilog-form input::-ms-input-placeholder {
|
||||||
|
color: #d3d2d2;
|
||||||
|
}
|
||||||
|
.regilog-form input::placeholder {
|
||||||
|
color: #d3d2d2;
|
||||||
|
}
|
||||||
|
.regilog-form input[type=submit] {
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
padding: 10px 20px;
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
color: #00E8C2;
|
||||||
|
border: 2px solid #00E8C2;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
File diff suppressed because one or more lines are too long
49
static/scss/layouts/regilog.scss
Normal file
49
static/scss/layouts/regilog.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.regilog-title{
|
||||||
|
margin: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regilog-form{
|
||||||
|
background: $background2;
|
||||||
|
padding: 50px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: auto;
|
||||||
|
width: 50%;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
.flexgroup{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
input:first-child{
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
input:last-child{
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input{
|
||||||
|
background: transparent;
|
||||||
|
color: $light;
|
||||||
|
font-size: 20px;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
&::placeholder{
|
||||||
|
color: $light2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type="submit"]{
|
||||||
|
width: fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
padding: 10px 20px;
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
color: $accent;
|
||||||
|
border: 2px solid $accent;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -7,4 +7,5 @@
|
||||||
@import "layouts/cards.scss";
|
@import "layouts/cards.scss";
|
||||||
@import "layouts/quicksearch.scss";
|
@import "layouts/quicksearch.scss";
|
||||||
@import "layouts/personnes.scss";
|
@import "layouts/personnes.scss";
|
||||||
|
@import "layouts/regilog.scss";
|
||||||
|
|
||||||
|
|
|
||||||
19
templates/login.html
Normal file
19
templates/login.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{% load static %}
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<script src="{% static 'js/script.js' %}"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<h1 class="regilog-title">Se connecter</h1>
|
||||||
|
<div class="regilog-form">
|
||||||
|
<input type="text" placeholder="Nom d'utilisateur">
|
||||||
|
<input type="password" placeholder="Mot de passe">
|
||||||
|
<input type="submit" value="Connexion">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<section>
|
<section>
|
||||||
<h1>Personnes</h1>
|
<h1>Personnes</h1>
|
||||||
<div class="personnal-info">
|
<div class="personnal-info">
|
||||||
<img src="{% static "images/pesquet.jpg" %}">
|
<img id="pp" src="{% static "images/pesquet.jpg" %}">
|
||||||
<div class="infos">
|
<div class="infos">
|
||||||
<p>Thomas Pesquet</p>
|
<p>Thomas Pesquet</p>
|
||||||
<p>43 ans</p>
|
<p>43 ans</p>
|
||||||
|
|
@ -66,5 +66,19 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
<script>
|
||||||
|
let count = 0;
|
||||||
|
let pp = document.querySelector('#pp');
|
||||||
|
pp.addEventListener('click', function(){
|
||||||
|
count++;
|
||||||
|
rickroll(count);
|
||||||
|
});
|
||||||
|
|
||||||
|
function rickroll(count){
|
||||||
|
if(count > 10){
|
||||||
|
window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
{% include 'quicksearch.html' %}
|
{% include 'quicksearch.html' %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
24
templates/register.html
Normal file
24
templates/register.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{% load static %}
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<script src="{% static 'js/script.js' %}"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<h1 class="regilog-title">S'inscrire</h1>
|
||||||
|
<div class="regilog-form">
|
||||||
|
<div class="flexgroup">
|
||||||
|
<input type="text" placeholder="Prénom">
|
||||||
|
<input type="text" placeholder="Nom">
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Nom d'utilisateur">
|
||||||
|
<input type="email" placeholder="Email">
|
||||||
|
<input type="password" placeholder="Mot de passe">
|
||||||
|
<input type="submit" value="Inscription">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
Loading…
Reference in a new issue