mirror of
https://github.com/DoomKitty87/seafoam.git
synced 2024-12-25 14:36:24 +01:00
responsive css + color change
This commit is contained in:
Matthew Dinh
parent
bb4969107d
commit
4f4085ccb8
3 changed files with 462 additions and 11691 deletions
11632
GUI Mockup/mainPage.svg
11632
GUI Mockup/mainPage.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 898 KiB After Width: | Height: | Size: 908 KiB |
|
|
@ -7,145 +7,167 @@
|
|||
<title>Seafoam</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<img class="icon" src="assets/seafoamarmadillo.webp">
|
||||
<h1 class="title">seafoam</h1>
|
||||
<div class="menubutton" onclick="resetMenu()"><h2 class="buttontext">GENERATE</h2></div>
|
||||
<div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">ROUTES</h2></div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="menua">
|
||||
<ul class="progressbar">
|
||||
<li class="progressitem" data-active="true">MAP ZONE<span class="dot" data-active="true"></span></li>
|
||||
<li class="progressitem" data-active="false">WAYPOINTS<span class="dot"></span></li>
|
||||
<li class="progressitem" data-active="false">SETTINGS<span class="dot" data-active="false"></span></li>
|
||||
<li class="progressitem" data-active="false">GENERATE<span class="dot" data-active="false"></span></li>
|
||||
</ul>
|
||||
<div class="menuscreen" id="menua1">
|
||||
<div class="infobox">
|
||||
<h1 class="infotitle">ROUTE AREA</h1>
|
||||
<h3 class="infodesc">Click to choose the area where your route will generate.</h3>
|
||||
</div>
|
||||
<div class="nextbutton">
|
||||
<h2 class="nextbuttontext" onclick="moveStep()">NEXT →</h2>
|
||||
</div>
|
||||
<div class="mapbox">
|
||||
<img class="map" src="assets/map.png">
|
||||
<div class="xaxis">
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="20" onclick="selectSquare(20)"></div>
|
||||
<div class="mapsquare" id="21" onclick="selectSquare(21)"></div>
|
||||
<div class="mapsquare" id="22" onclick="selectSquare(22)"></div>
|
||||
<div class="mapsquare" id="23" onclick="selectSquare(23)"></div>
|
||||
<div class="mapsquare" id="24" onclick="selectSquare(24)"></div>
|
||||
</div>
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="15" onclick="selectSquare(15)"></div>
|
||||
<div class="mapsquare" id="16" onclick="selectSquare(16)"></div>
|
||||
<div class="mapsquare" id="17" onclick="selectSquare(17)"></div>
|
||||
<div class="mapsquare" id="18" onclick="selectSquare(18)"></div>
|
||||
<div class="mapsquare" id="19" onclick="selectSquare(19)"></div>
|
||||
</div>
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="10" onclick="selectSquare(10)"></div>
|
||||
<div class="mapsquare" id="11" onclick="selectSquare(11)"></div>
|
||||
<div class="mapsquare" style="opacity: 0"></div>
|
||||
<div class="mapsquare" id="13" onclick="selectSquare(13)"></div>
|
||||
<div class="mapsquare" id="14" onclick="selectSquare(14)"></div>
|
||||
</div>
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="5" onclick="selectSquare(5)"></div>
|
||||
<div class="mapsquare" id="6" onclick="selectSquare(6)"></div>
|
||||
<div class="mapsquare" id="7" onclick="selectSquare(7)"></div>
|
||||
<div class="mapsquare" id="8" onclick="selectSquare(8)"></div>
|
||||
<div class="mapsquare" id="9" onclick="selectSquare(9)"></div>
|
||||
</div>
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="0" onclick="selectSquare(0)"></div>
|
||||
<div class="mapsquare" id="1" onclick="selectSquare(1)"></div>
|
||||
<div class="mapsquare" id="2" onclick="selectSquare(2)"></div>
|
||||
<div class="mapsquare" id="3" onclick="selectSquare(3)"></div>
|
||||
<div class="mapsquare" id="4" onclick="selectSquare(4)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuscreen" id="menua2">
|
||||
<div class="infobox">
|
||||
<h1 class="infotitle">WAYPOINTS</h1>
|
||||
<h3 class="infodesc">Enter desired waypoints- route may be +-10% of the value.</h3>
|
||||
</div>
|
||||
<div class="waypointentry">
|
||||
<form>
|
||||
<input id="wpform" class="waypointform" type="number" value="150">
|
||||
</form>
|
||||
</div>
|
||||
<div class="nextbutton">
|
||||
<h2 class="nextbuttontext" onclick="moveStep()">NEXT →</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuscreen" id="menua3">
|
||||
<div class="infobox">
|
||||
<h1 class="infotitle">SETTINGS</h1>
|
||||
</div>
|
||||
<div class="settingbox">
|
||||
<h2 class="settingdesc">Choose priority for teleport distance or density for route output.</h2>
|
||||
<form>
|
||||
<input class="priorityform" id="tp" type="radio" value="TP" name="priority">
|
||||
<label class="priorityform" for="tp">TP Distance</label>
|
||||
<br>
|
||||
<input class="priorityform" id="dens" type="radio" value="DENS" name="priority">
|
||||
<label class="priorityform" for="dens">Density</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="settingbox">
|
||||
<h2 class="settingdesc">Set allowed out of bounds range from the 8x8 chunk area (only use if you know what that means).</h2>
|
||||
<form>
|
||||
<input class="oobform" type="number" value="0">
|
||||
</form>
|
||||
</div>
|
||||
<div class="settingbox">
|
||||
<h2 class="settingdesc">Preference for approach/exit angle difference on a teleport pad.</h2>
|
||||
<form>
|
||||
<input class="angleenable" type="checkbox" id="anglecheck">
|
||||
<label class="angleenable" for="anglecheck">Enable</label>
|
||||
<br><br>
|
||||
<input class="anglesettings" type="number" value="0" id="angle22">
|
||||
<label class="anglesettings" for="angle22">2x2 Veins</label>
|
||||
<br><br>
|
||||
<input class="anglesettings" type="number" value="0" id="angle33">
|
||||
<label class="anglesettings" for="angle33">3x3 Veins</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="nextbutton" style="margin-top: 2rem">
|
||||
<h2 class="nextbuttontext" onclick="moveStep()">GENERATE</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuscreen" id="menua4">
|
||||
<div class="infobox">
|
||||
<h1 class="infotitle">GENERATE</h1>
|
||||
<h3 class="infodesc">Your route is being generated. Please wait.</h3>
|
||||
</div>
|
||||
<div class="routeresults">
|
||||
<div class="routebox"><p id="routeout" class="routeoutput">Route loading...</p></div>
|
||||
<h3 id="routestats" class="routestats"></h3>
|
||||
<div id="navbarandmaincontainer">
|
||||
<div class="navbar">
|
||||
<div class="logocontainer">
|
||||
<div class="logo">
|
||||
<img class="icon" src="assets/seafoamarmadillo.webp">
|
||||
<h1 class="title">seafoam</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menubutton" onclick="resetMenu()"><h2 class="buttontext">GENERATE</h2></div>
|
||||
<div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">ROUTES</h2></div>
|
||||
</div>
|
||||
<div class="menub">
|
||||
<div class="menuscreen" id="menub1">
|
||||
<div class="routesinfo">
|
||||
<div class="routeviewer">
|
||||
<h2 id="routeviewerstats" class="routestats"></h2>
|
||||
<div class="routebox"><p id="routeviewerpath" class="routeoutput"></p></div>
|
||||
<div class="main">
|
||||
<div class="menucontainer" id="menua">
|
||||
<ul class="progressbar">
|
||||
<li class="progressitem" data-active="true">MAP ZONE<span class="dot" data-active="true"></span></li>
|
||||
<li class="progressitem" data-active="false">WAYPOINTS<span class="dot"></span></li>
|
||||
<li class="progressitem" data-active="false">SETTINGS<span class="dot" data-active="false"></span></li>
|
||||
<li class="progressitem" data-active="false">GENERATE<span class="dot" data-active="false"></span></li>
|
||||
</ul>
|
||||
<div class="menuscreen" id="menua1">
|
||||
<div class="lefttextcontainer">
|
||||
<div class="infobox">
|
||||
<h1 class="infotitle">ROUTE AREA</h1>
|
||||
<h3 class="infodesc">Click to choose the area where your route will generate.</h3>
|
||||
</div>
|
||||
<div class="nextbutton">
|
||||
<h2 class="nextbuttontext" onclick="moveStep()">NEXT →</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightcontentcontainer">
|
||||
<div class="mapbox">
|
||||
<img id="mapimage" src="assets/map.png">
|
||||
<div class="xaxis">
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="20" onclick="selectSquare(20)"></div>
|
||||
<div class="mapsquare" id="21" onclick="selectSquare(21)"></div>
|
||||
<div class="mapsquare" id="22" onclick="selectSquare(22)"></div>
|
||||
<div class="mapsquare" id="23" onclick="selectSquare(23)"></div>
|
||||
<div class="mapsquare" id="24" onclick="selectSquare(24)"></div>
|
||||
</div>
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="15" onclick="selectSquare(15)"></div>
|
||||
<div class="mapsquare" id="16" onclick="selectSquare(16)"></div>
|
||||
<div class="mapsquare" id="17" onclick="selectSquare(17)"></div>
|
||||
<div class="mapsquare" id="18" onclick="selectSquare(18)"></div>
|
||||
<div class="mapsquare" id="19" onclick="selectSquare(19)"></div>
|
||||
</div>
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="10" onclick="selectSquare(10)"></div>
|
||||
<div class="mapsquare" id="11" onclick="selectSquare(11)"></div>
|
||||
<div class="mapsquare" style="opacity: 0"></div>
|
||||
<div class="mapsquare" id="13" onclick="selectSquare(13)"></div>
|
||||
<div class="mapsquare" id="14" onclick="selectSquare(14)"></div>
|
||||
</div>
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="5" onclick="selectSquare(5)"></div>
|
||||
<div class="mapsquare" id="6" onclick="selectSquare(6)"></div>
|
||||
<div class="mapsquare" id="7" onclick="selectSquare(7)"></div>
|
||||
<div class="mapsquare" id="8" onclick="selectSquare(8)"></div>
|
||||
<div class="mapsquare" id="9" onclick="selectSquare(9)"></div>
|
||||
</div>
|
||||
<div class="yaxis">
|
||||
<div class="mapsquare" id="0" onclick="selectSquare(0)"></div>
|
||||
<div class="mapsquare" id="1" onclick="selectSquare(1)"></div>
|
||||
<div class="mapsquare" id="2" onclick="selectSquare(2)"></div>
|
||||
<div class="mapsquare" id="3" onclick="selectSquare(3)"></div>
|
||||
<div class="mapsquare" id="4" onclick="selectSquare(4)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="routestitle">ROUTES</h1>
|
||||
<h3 class="routesdesc">Click on a saved route to view it.</h3>
|
||||
</div>
|
||||
<div class="routeviewbox">
|
||||
<!--<div class="route">
|
||||
<h3 class="routetitle">Route title</h3>
|
||||
</div>-->
|
||||
<div class="menuscreen" id="menua2">
|
||||
<div class="lefttextcontainer">
|
||||
<div class="infobox">
|
||||
<h1 class="infotitle">WAYPOINTS</h1>
|
||||
<h3 class="infodesc">Enter desired waypoints- route may be +-10% of the value.</h3>
|
||||
</div>
|
||||
<div class="waypointentry">
|
||||
<form>
|
||||
<input id="wpform" class="waypointform" type="number" value="150">
|
||||
</form>
|
||||
</div>
|
||||
<div class="nextbutton">
|
||||
<h2 class="nextbuttontext" onclick="moveStep()">NEXT →</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuscreen" id="menua3">
|
||||
<div class="lefttextcontainer">
|
||||
<div class="infobox">
|
||||
<h1 class="infotitle">SETTINGS</h1>
|
||||
</div>
|
||||
<div class="settingbox">
|
||||
<h2 class="settingdesc">Choose priority for teleport distance or density for route output.</h2>
|
||||
<form>
|
||||
<input class="priorityform" id="tp" type="radio" value="TP" name="priority">
|
||||
<label class="priorityform" for="tp">TP Distance</label>
|
||||
<br>
|
||||
<input class="priorityform" id="dens" type="radio" value="DENS" name="priority">
|
||||
<label class="priorityform" for="dens">Density</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="settingbox">
|
||||
<h2 class="settingdesc">Set allowed out of bounds range from the 8x8 chunk area (only use if you know what that means).</h2>
|
||||
<form>
|
||||
<input class="oobform" type="number" value="0">
|
||||
</form>
|
||||
</div>
|
||||
<div class="settingbox">
|
||||
<h2 class="settingdesc">Preference for approach/exit angle difference on a teleport pad.</h2>
|
||||
<form>
|
||||
<input class="angleenable" type="checkbox" id="anglecheck">
|
||||
<label class="angleenable" for="anglecheck">Enable</label>
|
||||
<br><br>
|
||||
<input class="oobform" class="anglesettings" type="number" value="0" id="angle22">
|
||||
<label class="anglesettings" for="angle22">2x2 Veins</label>
|
||||
<br><br>
|
||||
<input class="oobform" class="anglesettings" type="number" value="0" id="angle33">
|
||||
<label class="anglesettings" for="angle33">3x3 Veins</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="nextbutton" style="margin-top: 2rem">
|
||||
<h2 class="nextbuttontext" onclick="moveStep()">GENERATE</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuscreen" id="menua4">
|
||||
<div class="lefttextcontainer">
|
||||
<div class="infobox">
|
||||
<h1 class="infotitle">GENERATE</h1>
|
||||
<h3 class="infodesc">Your route is being generated. Please wait.</h3>
|
||||
</div>
|
||||
<div class="routeresults">
|
||||
<div class="routebox">
|
||||
<p id="routeout" class="routeoutput">Route loading...</p>
|
||||
</div>
|
||||
<h3 id="routestats" class="routestats"></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menucontainer" id="menub">
|
||||
<div class="menuscreen" id="menub1">
|
||||
<div class="lefttextcontainer">
|
||||
<div class="routesinfo">
|
||||
<div class="routeviewer">
|
||||
<h2 id="routeviewerstats" class="routestats"></h2>
|
||||
<div class="routebox"><p id="routeviewerpath" class="routeoutput"></p></div>
|
||||
</div>
|
||||
<h1 class="routestitle">ROUTES</h1>
|
||||
<h3 class="routesdesc">Click on a saved route to view it.</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightcontentcontainer">
|
||||
<div class="routeviewbox">
|
||||
<!--<div class="route">
|
||||
<h3 class="routetitle">Route title</h3>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -393,7 +415,7 @@
|
|||
document.getElementById("routestats").innerHTML = `Waypoints: ${outPath.length / 3}<br>Density: ${outPathDensity}<br>Distance: ${outPathDist}`;
|
||||
return pathOutput, outPath.length / 3, outPathDensity, outPathDist;
|
||||
}
|
||||
var activeSquare = -1;
|
||||
var activeSquareIndex = -1;
|
||||
var currentStep = 1;
|
||||
|
||||
var waypointNumber = 150;
|
||||
|
|
@ -406,20 +428,22 @@
|
|||
var angle33 = 0;
|
||||
|
||||
document.getElementById("menua1").style.opacity = 1;
|
||||
document.getElementById("menua1").style.display = "block";
|
||||
document.getElementById("menua1").style.display = "flex";
|
||||
document.getElementById("menub").style.height = 0;
|
||||
|
||||
function selectSquare(index) {
|
||||
if (selectedSquareIndex != -1) {
|
||||
document.getElementById(selectedSquareIndex).style.backgroundColor = "#0e141b";
|
||||
if (activeSquareIndex != -1) {
|
||||
document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
|
||||
}
|
||||
selectedSquareIndex = parseInt(index);
|
||||
activeSquareIndex = parseInt(index);
|
||||
let selectedSquareDiv = document.getElementById(index);
|
||||
selectedSquareDiv.style.backgroundColor = "#edbdc2";
|
||||
}
|
||||
function getRoute() {
|
||||
var output = generateRoute(activeSquare, allowedOOB, priority, waypointNumber, angleEnable, angle22, angle33);
|
||||
var output = generateRoute(activeSquareIndex, allowedOOB, priority, waypointNumber, angleEnable, angle22, angle33);
|
||||
}
|
||||
async function resetMenu() {
|
||||
document.getElementById("menub").style.height = 0;
|
||||
document.getElementById("menub1").style.opacity = 0;
|
||||
document.getElementById("menua" + (currentStep)).style.opacity = 0;
|
||||
document.getElementsByClassName("progressitem")[currentStep - 1].setAttribute("data-active", "false");
|
||||
|
|
@ -428,10 +452,10 @@
|
|||
document.getElementById("menub1").style.display = "none";
|
||||
document.getElementById("menua" + (currentStep)).style.display = "none";
|
||||
currentStep = 1;
|
||||
if (activeSquare != -1) document.getElementById(activeSquare).style.backgroundColor = "#0e141b";
|
||||
activeSquare = -1;
|
||||
if (activeSquareIndex != -1) document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
|
||||
activeSquareIndex = -1;
|
||||
document.getElementsByClassName("progressbar")[0].style.opacity = 1;
|
||||
document.getElementById("menua" + (currentStep)).style.display = "block";
|
||||
document.getElementById("menua" + (currentStep)).style.display = "flex";
|
||||
document.getElementById("menua" + (currentStep)).style.opacity = 1;
|
||||
document.getElementsByClassName("progressitem")[currentStep - 1].setAttribute("data-active", "true");
|
||||
document.getElementsByClassName("dot")[currentStep - 1].setAttribute("data-active", "true");
|
||||
|
|
@ -442,7 +466,8 @@
|
|||
document.getElementsByClassName("dot")[step - 2].setAttribute("data-active", "false");
|
||||
await new Promise(r => setTimeout(r, 500));
|
||||
document.getElementById("menua" + (step - 1)).style.display = "none";
|
||||
document.getElementById("menua" + (step)).style.display = "block";
|
||||
|
||||
document.getElementById("menua" + (step)).style.display = "flex";
|
||||
document.getElementById("menua" + (step)).style.opacity = 1;
|
||||
document.getElementsByClassName("progressitem")[step - 1].setAttribute("data-active", "true");
|
||||
document.getElementsByClassName("dot")[step - 1].setAttribute("data-active", "true");
|
||||
|
|
@ -455,14 +480,16 @@
|
|||
document.getElementsByClassName("dot")[currentStep - 1].setAttribute("data-active", "false");
|
||||
await new Promise(r => setTimeout(r, 500));
|
||||
document.getElementById("menua" + (currentStep)).style.display = "none";
|
||||
document.getElementById("menua").style.height = 0;
|
||||
currentStep = 1;
|
||||
if (activeSquare != -1) document.getElementById(activeSquare).style.backgroundColor = "#0e141b";
|
||||
activeSquare = -1;
|
||||
document.getElementById("menub1").style.display = "block";
|
||||
if (activeSquareIndex != -1) document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
|
||||
activeSquareIndex = -1;
|
||||
document.getElementById("menub").style.height = "100%";
|
||||
document.getElementById("menub1").style.display = "flex";
|
||||
document.getElementById("menub1").style.opacity = 1;
|
||||
}
|
||||
function moveStep() {
|
||||
if (currentStep == 1 && selectedSquareIndex == -1) return;
|
||||
if (currentStep == 1 && activeSquareIndex == -1) return;
|
||||
if (currentStep == 2) waypointNumber = document.getElementById("wpform").value;
|
||||
if (currentStep == 3) {
|
||||
if (document.getElementById("tp").checked) priority = "tp"; else priority = "dens";
|
||||
|
|
|
|||
|
|
@ -3,103 +3,165 @@
|
|||
src: url(assets/poppins.ttf) format("truetype");
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-bg-color: #295d8c;
|
||||
--accent-bg-color: #427baf;
|
||||
--button-bg-color: #427baf;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
background-color: #162532;
|
||||
background-color: var(--main-bg-color);
|
||||
font-family: "Poppins";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#navbarandmaincontainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: left;
|
||||
justify-content: flex-start;
|
||||
background-color: #131b23;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 15rem;
|
||||
min-height: 60rem;
|
||||
text-align: center;
|
||||
box-shadow: 1px 0px 10px 3px rgba(0, 0, 0, 0.511);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 1.5rem;
|
||||
width: 6rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
margin-top: 0;
|
||||
font-weight: 200;
|
||||
padding-bottom: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menuscreen {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
.logocontainer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.menubutton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row;
|
||||
justify-content: left;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
height: 5rem;
|
||||
font-size: 0.7rem;
|
||||
color: #ffffff;
|
||||
background-color: #131b23;
|
||||
transition: background-color 0.25s;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.buttontext {
|
||||
margin-left: 3rem;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.menucontainer {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menuscreen {
|
||||
display: none;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.menubutton:hover {
|
||||
background-color: #0e141b;
|
||||
background-color: var(--button-bg-color);
|
||||
}
|
||||
|
||||
.progressbar {
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
left: 40%;
|
||||
width: 30rem;
|
||||
transition: opacity 0.5s;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.progressitem {
|
||||
margin: 1.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #404040;
|
||||
color: #ffffff;
|
||||
display: inline-block;
|
||||
transition: color 0.25s;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.progressitem[data-active="true"] {
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: .8rem;
|
||||
width: .8rem;
|
||||
background-color: #404040;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 0.5rem auto auto auto;
|
||||
transition: background-color 0.25s transform 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
transition: transform 0.5s;
|
||||
transform: scale(0.5);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.dot[data-active="true"] {
|
||||
transform: scale(0.8);
|
||||
background-color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lefttextcontainer {
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
margin: 5rem;
|
||||
}
|
||||
|
||||
.rightcontentcontainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-grow: 2;
|
||||
margin: 5rem;
|
||||
}
|
||||
|
||||
.infobox {
|
||||
width: 20rem;
|
||||
position: relative;
|
||||
left: 20rem;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.infotitle {
|
||||
|
|
@ -117,16 +179,14 @@ body {
|
|||
}
|
||||
|
||||
.nextbutton {
|
||||
position: relative;
|
||||
left: 20rem;
|
||||
margin-top: 10rem;
|
||||
margin-top: 5rem;
|
||||
transition: background-color 0.1s;
|
||||
width: fit-content;
|
||||
padding: 0 1rem 0 1rem;
|
||||
padding: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.nextbutton:hover {
|
||||
background-color: #0e141b;
|
||||
background-color: var(--button-bg-color);
|
||||
}
|
||||
|
||||
.nextbuttontext {
|
||||
|
|
@ -135,18 +195,18 @@ body {
|
|||
}
|
||||
|
||||
.mapbox {
|
||||
position: absolute;
|
||||
left: 75rem;
|
||||
bottom: 15rem;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
display: inline-block;
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
padding: 1rem 1rem 1rem 1rem;
|
||||
background-color: #1f2d3a;
|
||||
background-color: var(--accent-bg-color);
|
||||
align-items: center;
|
||||
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.142);
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 30rem;
|
||||
#mapimage {
|
||||
opacity: 0.8;
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.xaxis {
|
||||
|
|
@ -154,7 +214,7 @@ body {
|
|||
align-items: center;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
bottom: 30.45rem;
|
||||
bottom: 40.45rem;
|
||||
}
|
||||
|
||||
.yaxis {
|
||||
|
|
@ -169,9 +229,9 @@ body {
|
|||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
width: 5.8rem;
|
||||
height: 5.8rem;
|
||||
background-color: #0e141b;
|
||||
width: 7.8rem;
|
||||
height: 7.8rem;
|
||||
background-color: rgba(1, 1, 2, 0.665);
|
||||
margin: 0.1rem;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
|
|
@ -190,20 +250,19 @@ body {
|
|||
}
|
||||
|
||||
.waypointentry {
|
||||
position: relative;
|
||||
left: 20rem;
|
||||
margin-top: 2rem;
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.waypointform {
|
||||
background-color: #131b23;
|
||||
background-color: var(--accent-bg-color);
|
||||
height: 2rem;
|
||||
width: 7rem;
|
||||
color: #ffffff;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
font-family: "Poppins";
|
||||
border: none;
|
||||
}
|
||||
|
||||
.waypointform::-webkit-outer-spin-button,
|
||||
|
|
@ -213,8 +272,6 @@ body {
|
|||
}
|
||||
|
||||
.settingbox {
|
||||
position: relative;
|
||||
left: 20rem;
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
|
|
@ -223,6 +280,7 @@ body {
|
|||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
margin-right: 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.settingdesc {
|
||||
|
|
@ -234,13 +292,14 @@ body {
|
|||
}
|
||||
|
||||
.oobform {
|
||||
background-color: #131b23;
|
||||
background-color: var(--accent-bg-color);
|
||||
height: 1.5rem;
|
||||
width: 5rem;
|
||||
color: #ffffff;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
font-family: "Poppins";
|
||||
border: none;
|
||||
}
|
||||
|
||||
.oobform::-webkit-outer-spin-button,
|
||||
|
|
@ -263,13 +322,13 @@ label.angleenable {
|
|||
}
|
||||
|
||||
input.angleenable {
|
||||
background-color: #131b23;
|
||||
background-color: var(--accent-bg-color);
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
input.anglesettings {
|
||||
background-color: #131b23;
|
||||
background-color: var(--accent-bg-color);
|
||||
height: 1.5rem;
|
||||
width: 5rem;
|
||||
color: #ffffff;
|
||||
|
|
@ -294,9 +353,6 @@ label.anglesettings {
|
|||
}
|
||||
|
||||
.routeresults {
|
||||
position: relative;
|
||||
left: 20rem;
|
||||
margin-top: 2rem;
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
|
|
@ -308,8 +364,8 @@ label.anglesettings {
|
|||
}
|
||||
|
||||
.routebox {
|
||||
height: 10rem;
|
||||
overflow: auto;
|
||||
/* height: 10rem; */
|
||||
/* overflow: auto; */
|
||||
}
|
||||
|
||||
.routestats {
|
||||
|
|
@ -320,9 +376,9 @@ label.anglesettings {
|
|||
}
|
||||
|
||||
.routesinfo {
|
||||
position: relative;
|
||||
/* position: relative;
|
||||
left: 20rem;
|
||||
width: 40rem;
|
||||
width: 40rem; */
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
|
|
@ -330,8 +386,8 @@ label.anglesettings {
|
|||
font-size: 3rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
/* margin-top: 1rem;
|
||||
margin-bottom: 0; */
|
||||
}
|
||||
|
||||
.routesdesc {
|
||||
|
|
@ -340,32 +396,32 @@ label.anglesettings {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.routeviewbox {
|
||||
/* .routeviewbox {
|
||||
position: relative;
|
||||
left: 20rem;
|
||||
width: 50rem;
|
||||
height: 40rem;
|
||||
overflow: auto;
|
||||
}
|
||||
} */
|
||||
|
||||
.routetitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
/* margin-top: 1rem;
|
||||
margin-bottom: 0; */
|
||||
}
|
||||
|
||||
.route {
|
||||
width: 40rem;
|
||||
padding: 1rem;
|
||||
margin-top: 2rem;
|
||||
background-color: #0e141b;
|
||||
background-color: var(--accent-bg-color);
|
||||
}
|
||||
|
||||
.routeviewer {
|
||||
/* .routeviewer {
|
||||
position: absolute;
|
||||
left: 50rem;
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
}
|
||||
} */
|
||||
Loading…
Reference in a new issue