forked from spacebar/SplatNet
Add layout (non working) with example assets to be removed once implemented
This commit is contained in:
parent
fc65d9a363
commit
c0d80966df
20 changed files with 968 additions and 177 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
||||
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="/assets/jquery-1.9.1.js"></script>
|
||||
<script src="/../assets/jquery-1.9.1.js"></script>
|
||||
<script src="/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -18,34 +18,86 @@
|
|||
<div id="loading-overlay" class="loading-overlay">
|
||||
<canvas id="loading-canvas" width="100" height="100"></canvas>
|
||||
<div id="loading-text">
|
||||
<img src="/assets/en/svg/text/wait/tx_loading-dccf3fb801ca859f2d17992f5cd7da62995c1fe81a306dd103398ef7c0e25b70.svg" alt="Loading">
|
||||
<img src="/../assets/en/svg/text/wait/tx_loading-dccf3fb801ca859f2d17992f5cd7da62995c1fe81a306dd103398ef7c0e25b70.svg" alt="Loading">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="content">
|
||||
|
||||
<div class="header-flex-row">
|
||||
|
||||
<div class="logo-left-align">
|
||||
<div id="stage-header-logo">
|
||||
<img class="bg-layer" src="../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
|
||||
<img class="icon-layer" src="../assets/en/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
|
||||
<img class="label-layer" src="../assets/en/svg/text/scene/equipment/tx_equipment-ea02b805bb9aec4677fb4a4629f515d402822e8eed1f3fcc524336fe3c813fee.svg">
|
||||
<div class="content">
|
||||
<div class="header-flex-row">
|
||||
<div class="logo-left-align">
|
||||
<div id="stage-header-logo">
|
||||
<img class="bg-layer" src="../../assets/en/svg/ui/bg_h1-62e768f2a1ca52f993b5953c78d46bc53b35b70df7f8e13619a982f8f10ab750.svg">
|
||||
<img class="icon-layer" src="../../assets/en/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
|
||||
<img class="label-layer" src="../../assets/en/svg/text/scene/equipment/tx_equipment-ea02b805bb9aec4677fb4a4629f515d402822e8eed1f3fcc524336fe3c813fee.svg">
|
||||
</div>
|
||||
<div class="equipmentsubtitle-text">
|
||||
Check out the gear and weapons you had equipped while playing online!
|
||||
</div>
|
||||
</div>
|
||||
<div class="equipmentsubtitle-text">
|
||||
Check out the gear and weapons you had equipped while playing online!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="splat-info-box">
|
||||
<p>example text lols</p>
|
||||
<div class="splat-info-box">
|
||||
<div id="scale-root">
|
||||
<div id="canvas">
|
||||
<div class="panel"></div>
|
||||
<div class="white-dot"></div>
|
||||
<div class="player-name" id="mii-name">miinamehere</div>
|
||||
|
||||
<div class="rank-box rank-level">
|
||||
<span class="rank-text">50</span>
|
||||
<img src="/../assets/en/svg/text/scene/equipment/tx_rank-2bcc8d331694f06c2af30e720acafda60760c71f086906489afb73190a6913ce.svg" class="rank-label" />
|
||||
</div>
|
||||
|
||||
<div class="rank-box rank-grade">
|
||||
<span class="rank-text">S+</span>
|
||||
<img src="/../assets/en/svg/text/scene/equipment/tx_udemae-3f0e377d89a469c62069c2304dae87dfdf2b98076a0a4662b9190800c2d9da91.svg" class="rank-label" />
|
||||
</div>
|
||||
|
||||
<div class="weapon-slot">
|
||||
<img class="weapon" src="../assets/4cebab334de8.png" />
|
||||
</div>
|
||||
|
||||
<div class="gear-slot-small head-slot">
|
||||
<img class="main-ability" src="../assets/5254acc940ed.svg" />
|
||||
<img class="gear-icon" src="../assets/6d4586e94e1c.png" />
|
||||
</div>
|
||||
|
||||
<div class="gear-slot-small body-slot">
|
||||
<img class="main-ability" src="../assets/783c945642a1.svg" />
|
||||
<img class="gear-icon" src="../assets/fdeaa6294d58.png" />
|
||||
</div>
|
||||
|
||||
<div class="gear-slot-small shoes-slot">
|
||||
<img class="main-ability" src="../assets/d24a8ad84d94.svg" />
|
||||
<img class="gear-icon" src="../assets/5538870549b1.png" />
|
||||
</div>
|
||||
|
||||
<div class="abilities bottom">
|
||||
<img src="../assets/55de981c4381.svg" />
|
||||
<img src="../assets/454c84bf43a2.svg" />
|
||||
<img src="../assets/b2d582c44ba2.svg" />
|
||||
</div>
|
||||
|
||||
<div class="abilities mid">
|
||||
<img src="../assets/c9c9af9f4a95.svg" />
|
||||
<img src="../assets/cae6942642cb.svg" />
|
||||
<img src="../assets/7422b1b94163.svg" />
|
||||
</div>
|
||||
|
||||
<div class="abilities bottom-right">
|
||||
<img src="../assets/a9f6b59c43d4.svg" />
|
||||
<img src="../assets/d8fa88484989.svg" />
|
||||
<img src="../assets/a15bb02a4d1c.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <div class="stages-container" id="stages-container"></div>
|
||||
<div class="stages-container" id="stages-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/general.js"></script>
|
||||
<script src="/../assets/general.js"></script>
|
||||
<script src="equipment.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,202 +1,311 @@
|
|||
@font-face {
|
||||
font-family: "Splatoon1";
|
||||
src: url("../splatoon1.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: "Splatoon1";
|
||||
src: url("../splatoon1.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Regular";
|
||||
src: url("../regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Regular";
|
||||
src: url("../regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background-image: url("/assets/en/bg/@2x/bg_equipment-bedf92d6f41ee59b7f391f7e01d7ec00cb932e5152a2196ac939df0ad6c674b3.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 800px 800px;
|
||||
background-attachment: fixed;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background-image: url("/assets/en/bg/@2x/bg_equipment-bedf92d6f41ee59b7f391f7e01d7ec00cb932e5152a2196ac939df0ad6c674b3.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 800px 800px;
|
||||
background-attachment: fixed;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.menu-item .hover-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item:hover .hover-state,
|
||||
.menu-item.active .hover-state {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item:hover .default,
|
||||
.menu-item.active .default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border: 3px solid white;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#loading-canvas {
|
||||
image-rendering: pixelated;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
margin-top: 12px;
|
||||
color: white;
|
||||
font-family: "Splatoon1", sans-serif;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.2px;
|
||||
text-align: center;
|
||||
.content {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#squid-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#squid-canvas {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border: 3px solid white;
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#loading-canvas {
|
||||
image-rendering: pixelated;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#loading-text img {
|
||||
height: 35px;
|
||||
width: auto;
|
||||
display: block;
|
||||
height: 35px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.logo-left-align {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#stage-header-logo {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 80px;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 80px;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#stage-header-logo .bg-layer {
|
||||
width: 400px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 400px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#stage-header-logo .icon-layer {
|
||||
position: absolute;
|
||||
width: 65px;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
width: 65px;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#stage-header-logo .label-layer {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
left: 110px;
|
||||
top: 45%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
left: 110px;
|
||||
top: 45%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.equipmentsubtitle-text {
|
||||
margin: 0;
|
||||
padding-top: 20px;
|
||||
text-align: left;
|
||||
color: white;
|
||||
font-family: "Regular", sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 1.3;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-top: 20px;
|
||||
text-align: left;
|
||||
color: white;
|
||||
font-family: "Regular", sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 1.3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.splat-info-box {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 10px;
|
||||
padding: 25px 40px;
|
||||
width: 600px;
|
||||
height: auto;
|
||||
min-height: 150px;
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
left: 40%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 5;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 1044px;
|
||||
height: 600px;
|
||||
margin: 40px auto;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.splat-info-box p {
|
||||
color: #ffffff;
|
||||
font-family: "Regular", sans-serif;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
#scale-root {
|
||||
width: 1044px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform: scale(0.54) translateX(-210px);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
left: 210px;
|
||||
top: 39px;
|
||||
width: 1500px;
|
||||
height: 1000px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.white-dot {
|
||||
position: absolute;
|
||||
left: 450px;
|
||||
top: 80px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
position: absolute;
|
||||
left: 265px;
|
||||
top: 200px;
|
||||
width: 480px;
|
||||
text-align: center;
|
||||
font-family: "Regular";
|
||||
font-size: 58px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rank-box {
|
||||
position: absolute;
|
||||
width: 520px;
|
||||
height: 145px;
|
||||
background: #000;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.rank-level { left: 265px; top: 300px; }
|
||||
.rank-grade { left: 265px; top: 480px; }
|
||||
|
||||
.rank-text {
|
||||
font-family: "Splatoon1";
|
||||
font-size: 130px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rank-label {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.weapon-slot {
|
||||
position: absolute;
|
||||
left: 920px;
|
||||
top: 140px;
|
||||
width: 620px;
|
||||
height: 520px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url("/assets/en/ui/gearbigbg.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.weapon {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.gear-slot-small {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url("/assets/en/ui/gearsmallbg.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.head-slot { left: 300px; top: 700px; }
|
||||
.body-slot { left: 780px; top: 700px; }
|
||||
.shoes-slot { left: 1260px; top: 700px; }
|
||||
|
||||
.gear-icon {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.main-ability {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: -5px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.abilities {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
top: 935px;
|
||||
}
|
||||
|
||||
.abilities.bottom { left: 325px; }
|
||||
.abilities.mid { left: 805px; }
|
||||
.abilities.bottom-right { left: 1285px; }
|
||||
|
||||
.abilities img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.menu-item .hover-state { display: none; }
|
||||
.menu-item:hover .hover-state, .menu-item.active .hover-state { display: block; }
|
||||
.menu-item:hover .default, .menu-item.active .default { display: none; }
|
||||
Loading…
Reference in a new issue