124 lines
6.7 KiB
HTML
124 lines
6.7 KiB
HTML
|
<!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>
|