POOUPUPPPPPPPPPPPPP
This commit is contained in:
johan
parent
b18d476c8c
commit
4cae1a7325
3 changed files with 170 additions and 10 deletions
|
|
@ -260,10 +260,60 @@ button[type="submit"]:hover {
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#error-message, #error-message-demande {
|
||||
#error-message, #error-message-demande, #error-message-register {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.treasure {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.treasure-submitted {
|
||||
color: rgba(254, 181, 35, 0.471)
|
||||
}
|
||||
|
||||
.treasure-accepted {
|
||||
background-color: rgba(0, 255, 0, 0.46);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transition: opacity 500ms;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#treasure-popup {
|
||||
margin: 70px auto;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
width: calc(100% - 10vw);
|
||||
position: relative;
|
||||
transition: all 5s ease-in-out;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
transition: all 200ms;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
.close:hover {
|
||||
color: #d75b00;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.bg-full {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
<input type="text" class="form-control" placeholder="Lieu de livraison" id="demande-where">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="number" class="form-control" placeholder="Quantité" id="demande-amount">
|
||||
<input type="number" class="form-control" placeholder="Quantité" max="8" id="demande-amount">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select class="form-control" id="demande-supp">
|
||||
|
|
@ -173,11 +173,17 @@
|
|||
<p id="error-message-demande"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer colum-section"></div>
|
||||
<div class="column-section">
|
||||
<h2>Chasse au trésor</h2>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
<div class="column-section">
|
||||
<h2>Chasse au trésor</h2>
|
||||
<p>Retrouve ici toutes les énigmes. Celles en vert sont déjà resolues alors dépéchez vous de résoudre les autres !</p>
|
||||
<div class="column-section" id="treasure-list">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<div class="column-section">
|
||||
<h1>Vos demandes en cours</h1>
|
||||
|
|
@ -186,6 +192,23 @@
|
|||
</div> <!-- end demande page -->
|
||||
</div>
|
||||
|
||||
<div class="overlay">
|
||||
<div id="treasure-popup">
|
||||
<div class="column-section">
|
||||
<h2>Soumettre la résolution d'une énigme !</h2>
|
||||
<a class="close" href="#">×</a>
|
||||
<p id="treasure-popup-title"></p>
|
||||
<input type="hidden" id="treasure-popup-uid">
|
||||
<div class="form-group">
|
||||
<input type="file" id="treasure-popup-image" >
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary" id="treasure-popup-button">Envoyer</button>
|
||||
</div>
|
||||
</div>
|
||||
</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://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
|
||||
<script src="js/main.js" defer></script>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ $("#register-button").click(function (e) {
|
|||
});
|
||||
if( $("#register-password-confirm").val() != $("#register-password").val()) {
|
||||
t = new TypeIt('#error-message-register', {
|
||||
speed: 110,
|
||||
speed: 100,
|
||||
lifeLike: true
|
||||
})
|
||||
.type("Oups, les 2 mots de passe ne correspondent pas !")
|
||||
|
|
@ -598,8 +598,17 @@ function refreshListener() {
|
|||
|
||||
});
|
||||
});
|
||||
$(".treasure-btn-submit").click((e) => {
|
||||
let uid = e.target.parentNode.parentNode.id;
|
||||
|
||||
$('.overlay').css({"opacity": 1, "visibility": "visible"});
|
||||
});
|
||||
}
|
||||
|
||||
$('.close').click((e) => {
|
||||
$('.overlay').css({"opacity": 0, "visibility": "hidden"});
|
||||
});
|
||||
|
||||
$('#demande-button').click(function () {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
|
|
@ -688,12 +697,85 @@ function updateDemandes() {
|
|||
if (data.why == "Not authentificated") {
|
||||
show_page('#login-page');
|
||||
} else {
|
||||
alert(data.why);
|
||||
console.alert(data.why);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: base_url + "get",
|
||||
data: JSON.stringify({
|
||||
uid: localStorage.getItem('user'),
|
||||
token: localStorage.getItem('token'),
|
||||
type: "activity"
|
||||
|
||||
}),
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
|
||||
success: function (data) {
|
||||
if(data.success) {
|
||||
$('#treasure-list').html('');
|
||||
|
||||
let ad = data.activityData;
|
||||
|
||||
for(const ad_uid in ad) {
|
||||
if(ad[ad_uid].type == "treasure") {
|
||||
$('#treasure-list').append(`
|
||||
<span id="${ad_uid}" class="treasure ${ad[ad_uid].treasureState == "Accepted" ? "treasure-accepted" : ""}">
|
||||
<h2 class="treasure-title">${ad[ad_uid].title}</h2>
|
||||
<div class="treasure-desc">Indice: ${ad[ad_uid].desc}</div>
|
||||
<div class="treasure-status">Statue: ${ad[ad_uid].treasureState}</div>
|
||||
${ (ad[ad_uid].treasureState != "Accepted" && ad[ad_uid].treasureState != "Refused" ) ?
|
||||
`<span class="treasure-btn">
|
||||
<div class="treasure-btn-submit">Soumettre sa résolution</div>
|
||||
</span>`
|
||||
: ''
|
||||
}
|
||||
</span>
|
||||
`)
|
||||
}
|
||||
}
|
||||
refreshListener();
|
||||
}
|
||||
else {
|
||||
console.alert(data.why);
|
||||
}
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: base_url + "get",
|
||||
data: JSON.stringify({
|
||||
uid: localStorage.getItem('user'),
|
||||
token: localStorage.getItem('token'),
|
||||
type: "treasure"
|
||||
|
||||
}),
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
|
||||
success: function (data) {
|
||||
if(data.success) {
|
||||
let td = data.treasureData;
|
||||
|
||||
for(const td_uid in td) {
|
||||
$elem = $('#' + td_uid);
|
||||
$elem.addClass('treasure-submitted');
|
||||
$elem.children(".treasure-button-submit").text('Editer la soumission');
|
||||
$elem.children('.treasure-desc').insertAfter(`<div class="treasure-image">Image: <a href="${base_url}images/${td[td_uid].image}.html" target="_blank"> Lien</a></div>`)
|
||||
|
||||
}
|
||||
refreshListener();
|
||||
}
|
||||
else {
|
||||
console.alert(data.why);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -739,7 +821,7 @@ function updateNextActivity() {
|
|||
let h = Math.trunc(diff / 3600) - days*24
|
||||
let m = Math.trunc(diff / 60) - (h + days*24)*60
|
||||
let s = diff - h*3600 - m*60 - days*24*3600
|
||||
$('#timer').text(days + " jours " + (new Date('December 17, 1995 ' + [h, m, s].join(':'))).toLocaleTimeString('default', {
|
||||
$('#timer').text((days == 0 ? "" : days + " jours ") + (new Date('December 17, 1995 ' + [h, m, s].join(':'))).toLocaleTimeString('default', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
|
|
@ -764,8 +846,13 @@ $(window).on("load", function() {
|
|||
/* load timer */
|
||||
window.setInterval(function() {
|
||||
var b = $("#timer").text().split(' jours ');
|
||||
var time = b[1];
|
||||
var days = b[0];
|
||||
if(b.length == 2) {
|
||||
var time = b[1];
|
||||
var days = b[0];
|
||||
} else {
|
||||
var time = b[0];
|
||||
var days = 0;
|
||||
}
|
||||
var t = time.split(":").map(t => parseInt(t));
|
||||
|
||||
t[2] -= 1;
|
||||
|
|
|
|||
Loading…
Reference in a new issue