BDEMetz/bde-liste
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

form designed

Browse source
This commit is contained in:
johan 2022-12-20 22:52:02 +01:00
parent d6aa41af93
commit 8b07e8848e
3 changed files with 73 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
static/css/main.css
View file

@ -50,18 +50,6 @@ h1 {
background-position-x: right;
}
@media screen and (max-width: 800px) {
.container {
margin: 0px;
width: 100%;
border-radius: 0px;
box-shadow: none;
}
body {
margin: 0px;
}
}
.logo>img {
height: 220px;
margin-left: 3vw;
@ -88,8 +76,9 @@ hr::before {
content: url('../img/divider.svg');
}
p {
font-size: 1.5vw;
font-weight: 300;
}
@ -176,7 +165,56 @@ img {
text-align: center;
}
@media screen and (max-width: 600px) {
form {
margin-top: 25vh;
margin-bottom: 10vh;
padding: 0px;
width: 50vw;
display: flex;
align-items: center;
flex-direction: column;
}
.form-group {
margin: 10px;
width: 100%;
}
input {
width: 100%;
border: none;
border-bottom: 1px solid #d75b00;
height: 40px;
background: none;
padding: 5px;
}
input:focus {
outline: none;
border-bottom: 2px solid #923e01;
}
button[type="submit"] {
padding: 5px 10px;
height: 30px;
outline: 1px solid #d75b00;
background: none;
border: none;
font-family: inherit;
color: #d75b00;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
button[type="submit"]:hover {
cursor: pointer;
background-color: #d75b00;
color: #ffffff;
}
@media screen and (max-width: 800px) {
.bg-full {
display: none;
}
@ -195,6 +233,8 @@ img {
}
.row {
flex-direction: column;
width: 100%;
align-items: center;
}
.col {
@ -209,4 +249,8 @@ img {
h1 {
font-size: 40px;
}
}
form {
width: 85vw;
}
}

16
static/index.html
View file

@ -33,7 +33,7 @@
<body>
<div class="bg-full"></div>
<div class="container">
<div id="main-page">
<div id="main-page" style="display: none;">
<div class="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div>
<div class="row banner">
<h1>Prochaine activité</h1>
@ -87,20 +87,28 @@
</div> <!-- end admin page -->
<div id="login-page" style="display: none">
<div id="login-page" style="display: block;">
<div class="row">
<form id="login-form" method="POST">
<div class="form-group">
<input type="text" class="form-control" placeholder="Nom d'utilisateur Rezo" name="login" id="login"/>
<input type="text" class="form-control" placeholder="Nom d'espion" name="login" id="login"/>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
<input type="password" class="form-control" placeholder="Mot de passe secret" name="password" id="password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Se connecter</button>
</div>
</form>
</div>
<hr/>
<div class="row banner">
<h2>Notice de l'espion</h2>
<p id="notice-espion">
Seul les espions reconnus par le Rézo pourrons se connecter pour jouer des tours à leurs camarrades.
Si tu n'es pas encore un espion reconnu, tu peux le devenir <a href="https://re2o.rezo-rm.fr/users/new_user">ici</a>.
</p>
</div>
</div> <!-- end login page -->
<div id="demande-page" style="display: none">

4
static/js/anim.js
View file

@ -1,4 +1,4 @@
var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc");
var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc, #notice-espion");
var $window = $(window)
function check_if_in_view() {
@ -14,7 +14,7 @@ function check_if_in_view() {
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
(element_top_position <= window_bottom_position) && $element.is(':visible')) {
if(!$element.hasClass('animated')) {
$element.addClass('animated');
new TypeIt('#' + $element.attr('id'), {