<!DOCTYPE html> <html lang="dk"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- FONT --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet"> <!--Får fat i de stylesheets vi har--> <link rel="stylesheet" href="../css/map.css?v=2"> <link rel="stylesheet" href="../css/image.css"> <link rel="stylesheet" href="../css/font.css"> <!--Sætter hjemmesiden icon--> <link rel="icon" type="image/svg" href="../images/SdeHandLogo.svg"/> <title>SDE Munkebjergvej 130 Odense</title> </head> <!--Tjekker din position når det har started op--> <body> <mapIndex id="mapIndex" value="0"> <!--Får fat i scripts--> <script src="../js/userlocation.js"></script> <script src="../js/ElementControl.js"></script> <script src="../js/image.js"></script> <div class="map-choice-wrapper"> <div class="map-choice"> <button id="choiceButton">Hvor vil du hen?</button> <button id="kortButton">Vis Kort</button> </div> <img style="background-color: #00788A; padding: 10px; border-radius: 15px; position: absolute; align-self: flex-end; bottom: 25%; width: 60%;" src="../images/InfoIcons.svg"> </div> <div class="area-choice-container"> <div class="area-choice"> <h1 class="text-white" id="ChooseArea">Vælg område</h1> </div> <div id="AreaListContainer" class="area-list-container"> <form class="area-list text-white" id="area-main-choice"> <h2 class="choice-title">Fagretning</h2> <button choice="itArea" id="a" type="button">It, netværk og design</button> <button choice="menneskerlivstilogsunhedArea" id="menneskerlivstilogsunhed" type="button">Mennesker, livstil og sundhed</button> <button choice="otgArea" id="otg" type="button">Odense Teknisk Gymnasium</button> <button choice="bekArea" id="bek" type="button">Byggeri, energi og konstruktion</button> <h2 class="choice-title">Andet</h2> <button areaLocation="MU5">Kantine - MU5</button> <button areaLocation="MU3">Administrationen - MU3</button> <button areaLocation="MU7">Skolepraktik og Konferencesalen - MU7</button> <h2 class="choice-title" name="EventButtons">Event</h2> <button areaLocation="MU7" name="EventButtons">Åbenthus</button> </form> <form style="display: none;" class="area-list text-white" id="itArea"> <h2 class="choice-title">It, netværk og design</h2> <button areaLocation="MU1">Mediegrafiker - MU1</button> <button areaLocation="MU8">IT Supporter og Datatekniker - MU8</button> </form> <form style="display: none;" class="area-list text-white" id="menneskerlivstilogsunhedArea"> <h2 class="choice-title">Mennesker, livstil og sunhed</h2> <button areaLocation="MU2">Tandklinikassistent - MU2</button> <button areaLocation="MU4">Frisør - MU4</button> <button areaLocation="MU6">Kosmetiker, Hospitalteknisk Assistent og Serviceassistent - MU6</button> </form> <form style="display: none;" class="area-list text-white" id="otgArea"> <h2 class="choice-title">Odense Teknisk Gymnasium</h2> <button areaLocation="MU9">Odense Teknisk Gymnasium - MU9</button> <button areaLocation="MU10">Odense Teknisk Gymnasium - MU10</button> </form> <form style="display: none;" class="area-list text-white" id="bekArea"> <h2 class="choice-title">Byggeri, energi og konstruktion</h2> <button areaLocation="MU11">Ejendomsservicetekniker og Sikkerhedsvagt</button> </form> </div> <img style="position: relative; left: 20%; bottom: 25%; width: 60%;" src="../images/InfoIcons.svg"> </div> <!--Navbar med tilbage knap og menu knap--> <ul> <!--Tilføjer en tilbage knap--> <button onclick="ChangePage('../index.html')" class="backbtn">Tilbage</button> <button onclick=" LoadAreaChoiceButtons(); LoadButtonAreas(); ToggleElement('area-choice-container'); CloseElement('map-choice-wrapper');" class="backbtn">Vælg område</button> </ul> <!--Test tal for at checke om den opdatere--> <!--<p style="z-index: 3; color: black; position:absolute; top: 630px; left: 0px;" id="output"></p>--> <div id = "main" style="z-index: 2;" class="wrapper"> <!--Kort over skolen samt logoet i hjørnet af kortet--> <img src="../images/maps/munkebjergvej.svg" id="School" style="position: absolute; top:0px;left:0px; width: 1184px; height: auto;"> <img src="../images/sdelogo.svg" id ="logo" style="position: absolute; top: 50px; left: 1000px; width: 150px; height: auto;"> <div class="areas"> <!--Områder/felter der lyser op for at man kan finde vej--> <div class="area" id="MU1" style="width: 150px; height: 140px; top: 170px; left: 155px; transform: rotate(2deg);" ></div> <div class="area" id="MU2" style="width: 65px; height: 135px; top: 315px; left: 160px; transform: rotate(4deg);"> </div> <div class="area" id="MU3" style="width: 125px; height: 40px; top: 175px; left: 290px; transform: rotate(2deg);" ></div> <div class="area" id="MU4" style="width: 110px; height: 135px; top: 365px; left: 220px; transform: rotate(4deg);"></div> <div class="area" id="MU5" style="width: 90px; height: 70px; top: 233px; left: 301px; transform: rotate(2deg);" ></div> <div class="area" id="MU6" style="width: 200px; height: 138px; top: 330px; left: 330px; transform: rotate(4deg);" ></div> <div class="area" id="MU7" style="width: 150px; height: 138px; top: 180px; left: 390px; transform: rotate(2deg);" ></div> <div class="area" id="MU8" style="width: 245px; height: 115px; top: 340px; left: 530px; transform: rotate(4deg);" ></div> <div class="area" id="MU9" style="width: 305px; height: 215px; top: 120px; left: 570px; transform: rotate(2.5deg);" ></div> <div class="area" id="MU10" style="width: 45px; height: 40px; top: 362px; left: 784px; transform: rotate(4deg);" ></div> <div class="area" id="MU11" style="width: 285px; height: 175px; top: 225px; left: 860px; transform: rotate(2.5deg);" ></div> <!--Bruger billede. så du kan se din position--> <img ondragstart="return false" src="../images/bruger.svg" id="bruger" style="position:absolute;width:' + 0 + 'px;height:' + 0 + 'px;top:' + 0 + 'px;left:' + 0 + 'px; visibility: hidden;"> </div> <canvas style="position: absolute; height: auto; width: 1184px;" class="canvas"></canvas> </div> </body> </html>