forked from vergnet/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';
|
||||
?>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="maps_button">
|
||||
<button onclick="enable3DMap()" class="main-button">Map 3D</button>
|
||||
<button onclick="enable2DMap()" class="main-button">Map 2D</button>
|
||||
</div>
|
||||
<script>
|
||||
function enable3DMap() {
|
||||
var map3d = document.querySelector('#maps #map3d');
|
||||
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>
|
||||
|
||||
</section>
|
||||
<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>
|
||||
function enable2DMap() {
|
||||
var map3d = document.querySelector('#maps #map3d');
|
||||
var map = document.querySelector('#maps #map');
|
||||
map.classList.add("hidden");
|
||||
map3d.classList.add("hidden");
|
||||
map.classList.remove("hidden");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
function enable3DMap() {
|
||||
var map3d = document.querySelector('#maps #map3d');
|
||||
var map = document.querySelector('#maps #map');
|
||||
<main>
|
||||
<div id="boxjaune">
|
||||
<div id="circle_l" class="circle"></div>
|
||||
<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");
|
||||
map.classList.add("hidden");
|
||||
map3d.classList.remove("hidden");
|
||||
}
|
||||
<section id="map_section">
|
||||
<div id="maps_button">
|
||||
<button onclick="enable3DMap()" class="main-button">Map 3D</button>
|
||||
<button onclick="enable2DMap()" class="main-button">Map 2D</button>
|
||||
</div>
|
||||
|
||||
function enable2DMap() {
|
||||
var map3d = document.querySelector('#maps #map3d');
|
||||
var map = document.querySelector('#maps #map');
|
||||
map.classList.add("hidden");
|
||||
map3d.classList.add("hidden");
|
||||
map.classList.remove("hidden");
|
||||
}
|
||||
</script>
|
||||
<section id="loading-screen">
|
||||
<div class="loader"></div>
|
||||
</section>
|
||||
|
||||
<div id="maps" class="">
|
||||
<script src="assets/map/script_map3d.js" type="module"></script>
|
||||
|
||||
<script type="text/javascript" src="assets/map/script_map2d.js"></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>
|
||||
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>
|
||||
Par exemple, GM 212, c'est au GM, deuxième étage.
|
||||
<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 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>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue