diff --git a/assets/454c84bf43a2.svg b/assets/454c84bf43a2.svg new file mode 100644 index 0000000..36d2c75 --- /dev/null +++ b/assets/454c84bf43a2.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/4cebab334de8.png b/assets/4cebab334de8.png new file mode 100644 index 0000000..ac66a40 Binary files /dev/null and b/assets/4cebab334de8.png differ diff --git a/assets/5254acc940ed.svg b/assets/5254acc940ed.svg new file mode 100644 index 0000000..8c73fc2 --- /dev/null +++ b/assets/5254acc940ed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/5538870549b1.png b/assets/5538870549b1.png new file mode 100644 index 0000000..7fc11b7 Binary files /dev/null and b/assets/5538870549b1.png differ diff --git a/assets/55de981c4381.svg b/assets/55de981c4381.svg new file mode 100644 index 0000000..36d2c75 --- /dev/null +++ b/assets/55de981c4381.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/6d4586e94e1c.png b/assets/6d4586e94e1c.png new file mode 100644 index 0000000..371e47d Binary files /dev/null and b/assets/6d4586e94e1c.png differ diff --git a/assets/7422b1b94163.svg b/assets/7422b1b94163.svg new file mode 100644 index 0000000..4551eb4 --- /dev/null +++ b/assets/7422b1b94163.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/783c945642a1.svg b/assets/783c945642a1.svg new file mode 100644 index 0000000..bfcb6fb --- /dev/null +++ b/assets/783c945642a1.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/a15bb02a4d1c.svg b/assets/a15bb02a4d1c.svg new file mode 100644 index 0000000..256fb9c --- /dev/null +++ b/assets/a15bb02a4d1c.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/a9f6b59c43d4.svg b/assets/a9f6b59c43d4.svg new file mode 100644 index 0000000..256fb9c --- /dev/null +++ b/assets/a9f6b59c43d4.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/b2d582c44ba2.svg b/assets/b2d582c44ba2.svg new file mode 100644 index 0000000..36d2c75 --- /dev/null +++ b/assets/b2d582c44ba2.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/c9c9af9f4a95.svg b/assets/c9c9af9f4a95.svg new file mode 100644 index 0000000..4551eb4 --- /dev/null +++ b/assets/c9c9af9f4a95.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/cae6942642cb.svg b/assets/cae6942642cb.svg new file mode 100644 index 0000000..4551eb4 --- /dev/null +++ b/assets/cae6942642cb.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/d24a8ad84d94.svg b/assets/d24a8ad84d94.svg new file mode 100644 index 0000000..8c73fc2 --- /dev/null +++ b/assets/d24a8ad84d94.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/d8fa88484989.svg b/assets/d8fa88484989.svg new file mode 100644 index 0000000..256fb9c --- /dev/null +++ b/assets/d8fa88484989.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/en/ui/gearbigbg.png b/assets/en/ui/gearbigbg.png new file mode 100644 index 0000000..e50caed Binary files /dev/null and b/assets/en/ui/gearbigbg.png differ diff --git a/assets/en/ui/gearsmallbg.png b/assets/en/ui/gearsmallbg.png new file mode 100644 index 0000000..f2324f0 Binary files /dev/null and b/assets/en/ui/gearsmallbg.png differ diff --git a/assets/fdeaa6294d58.png b/assets/fdeaa6294d58.png new file mode 100644 index 0000000..c545bdc Binary files /dev/null and b/assets/fdeaa6294d58.png differ diff --git a/equipment/index.html b/equipment/index.html index c2d5763..d691c07 100644 --- a/equipment/index.html +++ b/equipment/index.html @@ -5,7 +5,7 @@ SplatNet - Splatoon's multiplayer service hub - + @@ -18,34 +18,86 @@
- Loading + Loading
+
-
- -
- -
-
-
- + \ No newline at end of file diff --git a/equipment/styles.css b/equipment/styles.css index 9647e9e..0b170c2 100644 --- a/equipment/styles.css +++ b/equipment/styles.css @@ -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; -} \ No newline at end of file +#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; } \ No newline at end of file