From 78fcfa024547ade372e2dda53fce6cd8a70d9c6c Mon Sep 17 00:00:00 2001
From: Baptiste <baptiste.rebillard@outlook.fr>
Date: Mon, 18 Apr 2022 21:26:55 +0200
Subject: [PATCH] css

---
 assets/css/page/map.css |  93 +++++++++++++++++++++++++++++++++++
 map.php                 | 104 ++++++++++++++++++++++------------------
 2 files changed, 151 insertions(+), 46 deletions(-)

diff --git a/assets/css/page/map.css b/assets/css/page/map.css
index e69de29..2edec84 100644
--- a/assets/css/page/map.css
+++ b/assets/css/page/map.css
@@ -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);
+    }
+}
\ No newline at end of file
diff --git a/map.php b/map.php
index 3e7197a..ec285d9 100755
--- a/map.php
+++ b/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>