BDEMetz
/
bde-liste
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

form designed

front-continuation
johan 3 years ago
parent
d6aa41af93
commit
8b07e8848e
3 changed files with 73 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      static/css/main.css
  2. 16
      static/index.html
  3. 4
      static/js/anim.js

74
static/css/main.css
View File

@ -50,18 +50,6 @@ h1 {
background-position-x: right; 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 { .logo>img {
height: 220px; height: 220px;
margin-left: 3vw; margin-left: 3vw;
@ -88,8 +76,9 @@ hr::before {
content: url('../img/divider.svg'); content: url('../img/divider.svg');
} }
p { p {
font-size: 1.5vw;
font-weight: 300; font-weight: 300;
} }
@ -176,7 +165,56 @@ img {
text-align: center; 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 { .bg-full {
display: none; display: none;
} }
@ -195,6 +233,8 @@ img {
} }
.row { .row {
flex-direction: column; flex-direction: column;
width: 100%;
align-items: center;
} }
.col { .col {
@ -209,4 +249,8 @@ img {
h1 { h1 {
font-size: 40px; font-size: 40px;
} }
}
form {
width: 85vw;
}
}

16
static/index.html
View File

@ -33,7 +33,7 @@
<body> <body>
<div class="bg-full"></div> <div class="bg-full"></div>
<div class="container"> <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="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div>
<div class="row banner"> <div class="row banner">
<h1>Prochaine activité</h1> <h1>Prochaine activité</h1>
@ -87,20 +87,28 @@
</div> <!-- end admin page --> </div> <!-- end admin page -->
<div id="login-page" style="display: none"> <div id="login-page" style="display: block;">
<div class="row"> <div class="row">
<form id="login-form" method="POST"> <form id="login-form" method="POST">
<div class="form-group"> <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>
<div class="form-group"> <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>
<div class="form-group"> <div class="form-group">
<button type="submit" class="btn btn-primary">Se connecter</button> <button type="submit" class="btn btn-primary">Se connecter</button>
</div> </div>
</form> </form>
</div> </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> <!-- end login page -->
<div id="demande-page" style="display: none"> <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) var $window = $(window)
function check_if_in_view() { function check_if_in_view() {
@ -14,7 +14,7 @@ function check_if_in_view() {
//check to see if this current container is within viewport //check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) && 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')) { if(!$element.hasClass('animated')) {
$element.addClass('animated'); $element.addClass('animated');
new TypeIt('#' + $element.attr('id'), { new TypeIt('#' + $element.attr('id'), {

Write Preview
Loading…
Cancel
Save