139 lines
3.1 KiB
HTML
139 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>macimas's ui thing</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
padding: 20px;
|
||
|
|
margin: 0;
|
||
|
|
background: #151518;
|
||
|
|
color: #eaeaea;
|
||
|
|
font-family: sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
#wrapper {
|
||
|
|
height: 400px;
|
||
|
|
width: 600px;
|
||
|
|
background: #2a2c31;
|
||
|
|
border: solid #5865f2 4px;
|
||
|
|
border-radius: 16px;
|
||
|
|
display: grid;
|
||
|
|
grid-template-areas: "header nav" "main nav";
|
||
|
|
grid-template-columns: 1fr 64px;
|
||
|
|
grid-template-rows: 64px 1fr;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
border-bottom: solid #131416 2px;
|
||
|
|
grid-area: header;
|
||
|
|
display: flex;
|
||
|
|
padding: 8px 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > img {
|
||
|
|
border-radius: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > .info {
|
||
|
|
flex: 1;
|
||
|
|
margin: auto 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
header > .menu {
|
||
|
|
background: #131416;
|
||
|
|
height: 48px;
|
||
|
|
width: 48px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: solid #4c4c4e 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
main > div[data-item="map"] {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
padding: 8px;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
main > div[data-item="map"] > .item {
|
||
|
|
background: #131416;
|
||
|
|
padding: 8px;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav {
|
||
|
|
background: #131416;
|
||
|
|
grid-area: nav;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav > .item {
|
||
|
|
background: #2a2c31;
|
||
|
|
height: 48px;
|
||
|
|
width: 48px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
height: 12px;
|
||
|
|
width: 12px;
|
||
|
|
margin-right: 6px;
|
||
|
|
display: inline-block;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #aaaaaa;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon.green {
|
||
|
|
background: #23a559;
|
||
|
|
}
|
||
|
|
|
||
|
|
.space {
|
||
|
|
display: inline-block;
|
||
|
|
width: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hidden {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="wrapper">
|
||
|
|
<header>
|
||
|
|
<img src="/guhsunsbud.png" />
|
||
|
|
<div class="info">
|
||
|
|
<div style="font-weight: bold">guhsunsbud</div>
|
||
|
|
<div><div class="icon"></div>20 members<div class="space"></div><div class="icon green"></div>10 online</div>
|
||
|
|
</div>
|
||
|
|
<div class="menu"></div>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<div data-item="info" class="hidden"></div>
|
||
|
|
<div data-item="map" class="hidden">
|
||
|
|
<div class="item"><div class="icon"></div> Train Station</div>
|
||
|
|
<div class="item"><div class="icon"></div> Beach</div>
|
||
|
|
<div class="item"><div class="icon"></div> House</div>
|
||
|
|
<div class="item"><div class="icon"></div> House</div>
|
||
|
|
<div class="item"><div class="icon"></div> House</div>
|
||
|
|
<div class="item"><div class="icon"></div> House</div>
|
||
|
|
</div>
|
||
|
|
<div data-item="members"></div>
|
||
|
|
<div data-item="chat" class="hidden"></div>
|
||
|
|
</main>
|
||
|
|
<nav>
|
||
|
|
<div class="item"></div>
|
||
|
|
<div class="item"></div>
|
||
|
|
<div class="item"></div>
|
||
|
|
<div class="item"></div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|