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

added login page

front
johan 3 years ago
parent
c6d6644a38
commit
b78267692d
4 changed files with 83 additions and 20 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. 24
      static/css/main.css
  2. BIN
      static/img/spy-background.png
  3. 45
      static/index.html
  4. 34
      static/js/main.js

24
static/css/main.css
View File

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

BIN
static/img/spy-background.png
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> <body>
<div class="bg-full"></div> <div class="bg-full"></div>
<div class="container"> <div class="container">
<div class="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div> <div id="main-page">
<div id="typed-data"> <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>
<span class="activite-temps" id="timer">00:00:10</span> <span class="activite-temps" id="timer">00:00:10</span>
@ -36,13 +36,13 @@
<h1>Ordre de mission</h1> <h1>Ordre de mission</h1>
<div class="prank-button"> <div class="prank-button">
<a id="prank-button"> <a id="prank-button">
Demander une mission ! <span>Demander une mission !</span>
<img src="img/underline-red.png" class="underline"/>
<img src="img/circle-hand.png" class="hover-circle"/> <img src="img/circle-hand.png" class="hover-circle"/>
</a> </a>
<img src="img/underline-red.png" class="underline"/>
</div> </div>
<p id="prank-desc"> <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> 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 ! est nécessaire afin de garantir l'identité des demandeurs !
</p> </p>
@ -55,7 +55,7 @@
<h1>Chasse au trésor</h1> <h1>Chasse au trésor</h1>
<p id="chasse-desc"> <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> ! 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> </p>
</div> </div>
@ -65,15 +65,40 @@
<h1>À propos de nous !</h1> <h1>À propos de nous !</h1>
<img src="img/team.jpeg" alt="la liste du bde de 2025" /> <img src="img/team.jpeg" alt="la liste du bde de 2025" />
</div> </div>
</div> <!-- end main page -->
<footer class="row"> <div id="admin-page" style="display: none">
Copyright © OSS 110'Metz
</footer> </div> <!-- end admin page -->
</div>
<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> </div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <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://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/main.js" defer></script>
<script src="js/anim.js" defer></script> <script src="js/anim.js" defer></script>
</body> </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() { $(window).on("load", function() {
/* load timer */ /* load timer */
@ -24,4 +34,26 @@ $(window).on("load", function() {
second: '2-digit' second: '2-digit'
})); }));
}, 1000); }, 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');
}
});
});

Write Preview
Loading…
Cancel
Save