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

added login page

Browse source
This commit is contained in:
johan 2022-12-19 23:26:51 +01:00
parent c6d6644a38
commit b78267692d
4 changed files with 83 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
static/css/main.css
View file

@ -14,11 +14,12 @@ body {
align-items: center;
justify-content: center;
height: 100%;
overflow: visible;
}
.bg-full {
position: fixed;
background: url('../img/backgrounf-full.jpeg');
background: url('../img/spy-background.png');
background-size: cover;
width: 100%;
height: 100%;
@ -34,12 +35,14 @@ h1 {
}
.container {
position: absolute;
z-index: 0;
top: 0px;
margin: 5vh 0vh;
justify-content: center;
width: 90vw;
min-height: 100vh;
box-shadow: 1px 1px 10px #d75b00;
border-radius: 1px;
min-height: 100%;
border-radius: 2px;
border: none;
padding: 5vw;
background: url("../img/background-letter.jpg");
@ -47,7 +50,7 @@ h1 {
background-position-x: right;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 800px) {
.container {
margin: 0px;
width: 100%;
@ -120,6 +123,9 @@ img {
.prank-button a {
color: black;
position: relative;
padding: 20px 10px;
width: 100%;
}
.prank-button a:hover {
@ -129,10 +135,10 @@ img {
.hover-circle {
position: absolute;
z-index: 10;
top: -50px;
top: 2px;
left: 0px;
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
display: none;
}
@ -163,7 +169,7 @@ img {
padding-left: 5vw;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 800px) {
.row {
flex-direction: column;
}

BIN
static/img/spy-background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 MiB

45
static/index.html
View file

@ -17,8 +17,8 @@
<body>
<div class="bg-full"></div>
<div class="container">
<div class="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div>
<div id="typed-data">
<div id="main-page">
<div class="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div>
<div class="row banner">
<h1>Prochaine activité</h1>
<span class="activite-temps" id="timer">00:00:10</span>
@ -36,13 +36,13 @@
<h1>Ordre de mission</h1>
<div class="prank-button">
<a id="prank-button">
Demander une mission !
<img src="img/underline-red.png" class="underline"/>
<span>Demander une mission !</span>
<img src="img/circle-hand.png" class="hover-circle"/>
</a>
<img src="img/underline-red.png" class="underline"/>
</div>
<p id="prank-desc">
OSS 110'Metz est une organisation rempli d'espions qualifiés pour remplir presque toutes vos demandes !
OSS 110'Metz est une organisation remplie d'espions qualifiés pour remplir presque toutes tes demandes !
Cliquez sur le bouton ci-dessus puis suivez les instructions. Attention, un compte <a href="https://re2o.rezo-rm.fr/users/new_user">Rezo</a>
est nécessaire afin de garantir l'identité des demandeurs !
</p>
@ -55,7 +55,7 @@
<h1>Chasse au trésor</h1>
<p id="chasse-desc">
Chaque jour de la semaine tes espions préférés ont préparé pour toi une <i style="font-weight: 900;">chasse au trésor</i> !
Résous les énigmes pour tenter de gagner le fameux <u>ticket d'or</u>. Il te permettra de t'abrever gratuitement pendants les évenements festifs !
Résous les énigmes pour tenter de gagner le fameux <u>ticket d'or</u>. Il te permettra de t'abrever gratuitement pendants les évènements festifs !
</p>
</div>
@ -65,15 +65,40 @@
<h1>À propos de nous !</h1>
<img src="img/team.jpeg" alt="la liste du bde de 2025" />
</div>
</div> <!-- end main page -->
<footer class="row">
Copyright © OSS 110'Metz
</footer>
</div>
<div id="admin-page" style="display: none">
</div> <!-- end admin page -->
<div id="login-page" style="display: none">
<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"/>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Se connecter</button>
</div>
</form>
</div>
</div> <!-- end login page -->
<div id="demande-page" style="display: none">
</div> <!-- end demande page -->
<footer class="row">
Copyright © OSS 110'Metz
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
<script src="js/main.js" defer></script>
<script src="js/anim.js" defer></script>
</body>

34
static/js/main.js
View file

@ -1,3 +1,13 @@
const base_url = "https://oss110metz.rezo-rm.fr/"
function show_page(id) {
$('#main-page').hide();
$('#admin-page').hide();
$('#login-page').hide();
$('#demande-page').hide();
$(id).show();
}
$(window).on("load", function() {
/* load timer */
@ -24,4 +34,26 @@ $(window).on("load", function() {
second: '2-digit'
}));
}, 1000);
});
$("#login-form").submit(function (e) {
e.preventDefault();
var data = JSON.stringify({
username: $("#login").val(),
password: $("#password").val()
});
$.post(base_url + "login", data, function (data) {
console.log(data);
});
});
$("#prank-button").click(function () {
if(Cookies.get('token')) {
show_page('#demande-page');
}
else {
show_page('#login-page');
}
});
});