mirror of
https://github.com/DoomKitty87/seafoam.git
synced 2024-12-29 08:26:49 +01:00
did html/css for first page + navbar
This commit is contained in:
DoomKitty87
parent
d2b56fec6b
commit
8e0a6de382
5 changed files with 268 additions and 3 deletions
BIN
GUI Mockup/images/image41633.png
Normal file
BIN
GUI Mockup/images/image41633.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
BIN
web-app/seafoam/src/assets/map.png
Normal file
BIN
web-app/seafoam/src/assets/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
BIN
web-app/seafoam/src/assets/poppins.ttf
Normal file
BIN
web-app/seafoam/src/assets/poppins.ttf
Normal file
Binary file not shown.
|
|
@ -9,10 +9,109 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
|
<img class="icon" src="assets/seafoamarmadillo.webp">
|
||||||
|
<h1 class="title">seafoam</h1>
|
||||||
|
<div class="menubutton"><h2 class="buttontext">GENERATE</h2></div>
|
||||||
|
<div class="menubutton"><h2 class="buttontext">ROUTES</h2></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="main">
|
<div class="main">
|
||||||
|
<div class="menuscreen" id="menua1">
|
||||||
|
<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="infobox">
|
||||||
|
<h1 class="infotitle">ROUTE AREA</h1>
|
||||||
|
<h3 class="infodesc">Click to choose the area where your route will generate.</h3>
|
||||||
</div>
|
</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="setSquare(20)"></div>
|
||||||
|
<div class="mapsquare" id="21" onclick="setSquare(21)"></div>
|
||||||
|
<div class="mapsquare" id="22" onclick="setSquare(22)"></div>
|
||||||
|
<div class="mapsquare" id="23" onclick="setSquare(23)"></div>
|
||||||
|
<div class="mapsquare" id="24" onclick="setSquare(24)"></div>
|
||||||
|
</div>
|
||||||
|
<div class="yaxis">
|
||||||
|
<div class="mapsquare" id="15" onclick="setSquare(15)"></div>
|
||||||
|
<div class="mapsquare" id="16" onclick="setSquare(16)"></div>
|
||||||
|
<div class="mapsquare" id="17" onclick="setSquare(17)"></div>
|
||||||
|
<div class="mapsquare" id="18" onclick="setSquare(18)"></div>
|
||||||
|
<div class="mapsquare" id="19" onclick="setSquare(19)"></div>
|
||||||
|
</div>
|
||||||
|
<div class="yaxis">
|
||||||
|
<div class="mapsquare" id="10" onclick="setSquare(10)"></div>
|
||||||
|
<div class="mapsquare" id="11" onclick="setSquare(11)"></div>
|
||||||
|
<div class="mapsquare" style="opacity: 0"></div>
|
||||||
|
<div class="mapsquare" id="13" onclick="setSquare(13)"></div>
|
||||||
|
<div class="mapsquare" id="14" onclick="setSquare(14)"></div>
|
||||||
|
</div>
|
||||||
|
<div class="yaxis">
|
||||||
|
<div class="mapsquare" id="5" onclick="setSquare(5)"></div>
|
||||||
|
<div class="mapsquare" id="6" onclick="setSquare(6)"></div>
|
||||||
|
<div class="mapsquare" id="7" onclick="setSquare(7)"></div>
|
||||||
|
<div class="mapsquare" id="8" onclick="setSquare(8)"></div>
|
||||||
|
<div class="mapsquare" id="9" onclick="setSquare(9)"></div>
|
||||||
|
</div>
|
||||||
|
<div class="yaxis">
|
||||||
|
<div class="mapsquare" id="0" onclick="setSquare(0)"></div>
|
||||||
|
<div class="mapsquare" id="1" onclick="setSquare(1)"></div>
|
||||||
|
<div class="mapsquare" id="2" onclick="setSquare(2)"></div>
|
||||||
|
<div class="mapsquare" id="3" onclick="setSquare(3)"></div>
|
||||||
|
<div class="mapsquare" id="4" onclick="setSquare(4)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menuscreen" id="menua2">
|
||||||
|
<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="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>
|
||||||
|
<script>
|
||||||
|
var activeSquare = -1;
|
||||||
|
var currentStep = 1;
|
||||||
|
|
||||||
|
document.getElementById("menua1").style.opacity = 1;
|
||||||
|
document.getElementById("menua1").style.display = "block";
|
||||||
|
|
||||||
|
function setSquare(indx) {
|
||||||
|
if (activeSquare != -1) {
|
||||||
|
document.getElementById(activeSquare).style.backgroundColor = "#0e141b";
|
||||||
|
}
|
||||||
|
activeSquare = parseInt(indx);
|
||||||
|
document.getElementById(indx).style.backgroundColor = "#ffffff";
|
||||||
|
}
|
||||||
|
async function updateMenu(step) {
|
||||||
|
document.getElementById("menua" + (step - 1)).style.opacity = 0;
|
||||||
|
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.opacity = 1;
|
||||||
|
}
|
||||||
|
function moveStep() {
|
||||||
|
if (currentStep == 1 && activeSquare == -1) return;
|
||||||
|
currentStep++;
|
||||||
|
updateMenu(currentStep);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,12 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "Poppins";
|
||||||
|
src: url(assets/poppins.ttf) format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
user-select: none;
|
||||||
background-color: #162532;
|
background-color: #162532;
|
||||||
|
font-family: "Poppins";
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
|
|
@ -9,4 +16,163 @@ body {
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 15rem;
|
width: 15rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
width: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: 200;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuscreen {
|
||||||
|
display: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menubutton {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: left;
|
||||||
|
width: 100%;
|
||||||
|
height: 5rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #131b23;
|
||||||
|
transition: background-color 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttontext {
|
||||||
|
margin-left: 3rem;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menubutton:hover {
|
||||||
|
background-color: #0e141b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressbar {
|
||||||
|
margin-top: 2rem;
|
||||||
|
position: relative;
|
||||||
|
left: 40%;
|
||||||
|
width: 30rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressitem {
|
||||||
|
margin: 1.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #404040;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressitem[data-active="true"] {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
height: .8rem;
|
||||||
|
width: .8rem;
|
||||||
|
background-color: #404040;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
|
margin: 0.5rem auto auto auto;
|
||||||
|
transition: background-color 0.25s transform 0.25s;
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot[data-active="true"] {
|
||||||
|
transform: scale(0.8);
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infobox {
|
||||||
|
width: 20rem;
|
||||||
|
position: relative;
|
||||||
|
left: 20rem;
|
||||||
|
margin-top: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infotitle {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infodesc {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nextbutton {
|
||||||
|
position: relative;
|
||||||
|
left: 20rem;
|
||||||
|
margin-top: 10rem;
|
||||||
|
transition: background-color 0.1s;
|
||||||
|
width: fit-content;
|
||||||
|
padding: 0 1rem 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nextbutton:hover {
|
||||||
|
background-color: #0e141b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nextbuttontext {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapbox {
|
||||||
|
position: absolute;
|
||||||
|
left: 75rem;
|
||||||
|
bottom: 15rem;
|
||||||
|
width: 30rem;
|
||||||
|
height: 30rem;
|
||||||
|
padding: 1rem 1rem 1rem 1rem;
|
||||||
|
background-color: #1f2d3a;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 30rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xaxis {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
bottom: 30.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaxis {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapsquare {
|
||||||
|
display: flex;
|
||||||
|
width: 5.8rem;
|
||||||
|
height: 5.8rem;
|
||||||
|
background-color: #0e141b;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0.1rem;
|
||||||
|
opacity: 0.4;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapsquare:hover {
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue