add second page
This commit is contained in:
kevin
parent
92215128b7
commit
82c1862860
|
|
@ -0,0 +1,138 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Choose map - WorkAdventu.re</title>
|
||||
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<script src="bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="choose-map">
|
||||
<div class="container-fluid container-lg section pt-5">
|
||||
<h1 class="text-center pixel-title">CHOOSE YOUR MAP !</h1>
|
||||
<div class="row no-gutters">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_1">
|
||||
<img src="static/images/step 1.png">
|
||||
<p>Back to class</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_2">
|
||||
<img src="static/images/step 1.png">
|
||||
<p>Back to class</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_3">
|
||||
<img src="static/images/step 1.png">
|
||||
<p>Back to class</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_4">
|
||||
<img src="static/images/step 1.png">
|
||||
<p>Back to class</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_5">
|
||||
<img src="static/images/step 1.png">
|
||||
<p>Back to class</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="nguyenk.github.io/map_noemie/map.json" id="map_6">
|
||||
<img src="static/images/step 1.png">
|
||||
<p>Back to class</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid container-lg section text-center" id="map-link-container" style="display: none;">
|
||||
<h1 class="mb-3">YOUR MAP URL IS</h1>
|
||||
<p id="wa-link" class="mb-5"></p>
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-sm-8 text-right mb-4 pb-sm-0">
|
||||
<button class="copy-btn" onclick="copyToClipboard()">COPY MAP <small>URL TO CLIPBOARD</small></button>
|
||||
</div>
|
||||
<div class="col-sm-4 text-center text-sm-left">
|
||||
<span id="new-url">to share it !</span>
|
||||
<span id="url-copied" style="display: none">done !</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row start-area justify-content-center mt-5">
|
||||
<div class="col-12 col-sm-1 d-none d-sm-block">
|
||||
<img src="static/images/female-character.gif">
|
||||
</div>
|
||||
<div class="col-12 col-sm-4 mb-3 mb-sm-0">
|
||||
<button id="start-btn" onclick="play()">START <span>>></span></button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-1">
|
||||
<img src="static/images/male-character.gif">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var rand = '';
|
||||
var characters = 'abcdefghijklmnopqrstuvwxyz';
|
||||
var charactersLength = characters.length;
|
||||
for ( var i = 0; i < 9; i++ ) {
|
||||
rand += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
var id = rand.slice(0,3) + '-' + rand.slice(3,6) + '-' + rand.slice(6);
|
||||
var mapLink = document.getElementById('wa-link');
|
||||
var mapLinkContainer = document.getElementById('map-link-container');
|
||||
|
||||
function setSelectedMap(element){
|
||||
var items = document.querySelectorAll(".map-item");
|
||||
[].forEach.call(items, function(el) {
|
||||
el.classList.remove("active");
|
||||
});
|
||||
element.classList.add("active");
|
||||
mapLink.innerText = window.location.protocol + "//play."+window.location.host + "/_/" + id + "/" + element.dataset.url;
|
||||
mapLinkContainer.style.display = 'block';
|
||||
document.getElementById('new-url').style.display = 'inline';
|
||||
document.getElementById('url-copied').style.display = 'none';
|
||||
|
||||
mapLinkContainer.scrollIntoView({
|
||||
block: "start",
|
||||
inline: "nearest",
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
var aux = document.createElement("input");
|
||||
aux.setAttribute("value", mapLink.innerHTML);
|
||||
document.body.appendChild(aux);
|
||||
aux.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(aux);
|
||||
|
||||
document.getElementById('new-url').style.display = 'none';
|
||||
document.getElementById('url-copied').style.display = 'inline';
|
||||
}
|
||||
|
||||
function play(){
|
||||
window.location.assign(mapLink.innerText);
|
||||
}
|
||||
|
||||
(function() {
|
||||
document.addEventListener('click', function (event) {
|
||||
// If the clicked element doesn't have the right selector, bail
|
||||
var mapItem = event.target.closest('.map-item');
|
||||
if (mapItem === null) {
|
||||
return;
|
||||
}
|
||||
// Don't follow the link
|
||||
event.preventDefault();
|
||||
setSelectedMap(mapItem);
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 438 B |
|
|
@ -1,4 +1 @@
|
|||
import '../sass/styles.scss';
|
||||
|
||||
console.log('Webpack Boilerplate');
|
||||
|
||||
import '../sass/styles.scss';
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
body.choose-map{
|
||||
|
||||
.map-item{
|
||||
cursor: pointer;
|
||||
margin: 1rem 0.5rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
border: 3px transparent solid;
|
||||
|
||||
&.active{
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#wa-link{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.copy-btn{
|
||||
font-family: "Karmatic Arcade";
|
||||
font-size: 30px;
|
||||
border: 4px solid #ffffff;
|
||||
width: auto;
|
||||
box-shadow: 4px 4px white;
|
||||
padding: 1rem;
|
||||
background: #000000;
|
||||
color: white;
|
||||
margin-right: 10px;
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
small{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.start-area{
|
||||
img{
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
#start-btn{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
border-bottom: 8px solid white;
|
||||
animation: blinker 1s alternate infinite;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import "custom";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@import "_choose-map";
|
||||
|
||||
@font-face {
|
||||
font-family: OpenSans;
|
||||
|
|
@ -279,3 +280,6 @@ img{
|
|||
}
|
||||
}
|
||||
|
||||
.pixel-title{
|
||||
font-family: "Karmatic Arcade" !important;
|
||||
}
|
||||
Loading…
Reference in New Issue