mirror of
https://github.com/DoomKitty87/seafoam.git
synced 2024-12-27 23:47:24 +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>
|
||||
<body>
|
||||
<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 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 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;
|
||||
|
||||
</div>
|
||||
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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
@font-face {
|
||||
font-family: "Poppins";
|
||||
src: url(assets/poppins.ttf) format("truetype");
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
background-color: #162532;
|
||||
font-family: "Poppins";
|
||||
}
|
||||
|
||||
.navbar {
|
||||
|
|
@ -9,4 +16,163 @@ body {
|
|||
top: 0;
|
||||
height: 100vh;
|
||||
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