forked from rebillar/site-accueil-insa
css
This commit is contained in:
Baptiste
parent
c0dfc9a172
commit
78fcfa0245
2 changed files with 151 additions and 46 deletions
|
|
@ -0,0 +1,93 @@
|
||||||
|
#map_section {
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 30px;
|
||||||
|
border: 2px solid white;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Map loading */
|
||||||
|
#loading-screen {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
/*top: 0; */
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
background-color: #000000;
|
||||||
|
opacity: 1;
|
||||||
|
transition: 1s opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-screen.fade-out {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
margin: -75px 0 0 -75px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-top-color: #9370DB;
|
||||||
|
-webkit-animation: spin 2s linear infinite;
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
}
|
||||||
|
.loader:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 5px;
|
||||||
|
right: 5px;
|
||||||
|
bottom: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-top-color: #BA55D3;
|
||||||
|
-webkit-animation: spin 3s linear infinite;
|
||||||
|
animation: spin 3s linear infinite;
|
||||||
|
}
|
||||||
|
.loader:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
right: 15px;
|
||||||
|
bottom: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-top-color: #FF00FF;
|
||||||
|
-webkit-animation: spin 1.5s linear infinite;
|
||||||
|
animation: spin 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-ms-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-ms-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
104
map.php
104
map.php
|
|
@ -3,69 +3,81 @@ ob_start(); // Start reading html
|
||||||
require_once 'assets/map/ajax.php';
|
require_once 'assets/map/ajax.php';
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div id="maps_button">
|
<script>
|
||||||
<button onclick="enable3DMap()" class="main-button">Map 3D</button>
|
function enable3DMap() {
|
||||||
<button onclick="enable2DMap()" class="main-button">Map 2D</button>
|
var map3d = document.querySelector('#maps #map3d');
|
||||||
</div>
|
var map = document.querySelector('#maps #map');
|
||||||
|
|
||||||
<section id="loading-screen">
|
map3d.classList.add("hidden");
|
||||||
|
map.classList.add("hidden");
|
||||||
|
map3d.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
<div class="loader"></div>
|
function enable2DMap() {
|
||||||
|
var map3d = document.querySelector('#maps #map3d');
|
||||||
</section>
|
var map = document.querySelector('#maps #map');
|
||||||
<div id="maps" class="">
|
map.classList.add("hidden");
|
||||||
<script src="assets/map/script_map3d.js" type="module"></script>
|
map3d.classList.add("hidden");
|
||||||
|
map.classList.remove("hidden");
|
||||||
<div id="map" class="hidden">
|
}
|
||||||
<?php echo file_get_contents("assets/map/map2d.svg"); ?>
|
</script>
|
||||||
<canvas id="canvasID"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<main>
|
||||||
function enable3DMap() {
|
<div id="boxjaune">
|
||||||
var map3d = document.querySelector('#maps #map3d');
|
<div id="circle_l" class="circle"></div>
|
||||||
var map = document.querySelector('#maps #map');
|
<div id="circle_r" class="circle"></div>
|
||||||
|
<div id="title_in_box">Carte de l'insa</div>
|
||||||
|
<div id="circle_l" class="circle"></div>
|
||||||
|
<div id="circle_r" class="circle"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
map3d.classList.add("hidden");
|
<section id="map_section">
|
||||||
map.classList.add("hidden");
|
<div id="maps_button">
|
||||||
map3d.classList.remove("hidden");
|
<button onclick="enable3DMap()" class="main-button">Map 3D</button>
|
||||||
}
|
<button onclick="enable2DMap()" class="main-button">Map 2D</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
function enable2DMap() {
|
<section id="loading-screen">
|
||||||
var map3d = document.querySelector('#maps #map3d');
|
<div class="loader"></div>
|
||||||
var map = document.querySelector('#maps #map');
|
</section>
|
||||||
map.classList.add("hidden");
|
|
||||||
map3d.classList.add("hidden");
|
|
||||||
map.classList.remove("hidden");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="assets/map/script_map2d.js"></script>
|
<div id="maps" class="">
|
||||||
|
<script src="assets/map/script_map3d.js" type="module"></script>
|
||||||
|
|
||||||
|
<div id="map" class="hidden">
|
||||||
|
<?php echo file_get_contents("assets/map/map2d.svg"); ?>
|
||||||
|
<canvas id="canvasID"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="assets/map/script_map2d.js"></script>
|
||||||
|
</section>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Une petite note sur le numéro des salles : sur ton emploi du temps, le bâtiment est marqué en premier, et
|
Une petite note sur le numéro des salles : sur ton emploi du temps, le bâtiment est marqué en premier, et
|
||||||
ensuite le chiffre des centaines pour l'étage, et après à toi de trouver !
|
ensuite le chiffre des centaines pour l'étage, et après à toi de trouver !
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Par exemple, GM 212, c'est au GM, deuxième étage.
|
Par exemple, GM 212, c'est au GM, deuxième étage.
|
||||||
<br>
|
<br>
|
||||||
Et si t'as Amphi 108, c'est au premier étage du STPI. En gros STPI=bâtiment des amphis.
|
Et si t'as Amphi 108, c'est au premier étage du STPI(c'est ton département et c'est là où il y a les amphis).
|
||||||
</p>
|
</p>
|
||||||
<p id="hint">Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591">Open Street
|
|
||||||
Map</a>.
|
<p id="hint">
|
||||||
|
Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591">Open Street
|
||||||
|
Map</a>.
|
||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue