diff --git a/app/stages/index.html b/app/stages/index.html deleted file mode 100644 index 6a6ed2e..0000000 --- a/app/stages/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - -
- -
- - SplatNet - Splatoon's multiplayer service hub - - - - -
- -
- -
Loading
-
- -
- Stage Info -
- Use the stage information to guide your weapon strategy and battle strategy! -
-
-
- - - - - - - diff --git a/header.html b/header.html index 4c7f23e..c7db4ce 100644 --- a/header.html +++ b/header.html @@ -2,37 +2,71 @@ - sidebar - + diff --git a/site_policy/index.html b/site_policy/index.html index 0a9c3d8..3e5ef9d 100644 --- a/site_policy/index.html +++ b/site_policy/index.html @@ -10,6 +10,9 @@ +
+ +
@@ -85,7 +88,5 @@ - - diff --git a/site_policy/policy.css b/site_policy/policy.css index 226a8f3..5d86fb7 100644 --- a/site_policy/policy.css +++ b/site_policy/policy.css @@ -18,11 +18,28 @@ body { color: white; } +.header { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + position: relative; + z-index: 1; +} + +.logo { + display: block; + max-width: 280px; + height: auto; +} + .content { display: flex; flex-direction: column; align-items: center; padding: 24px 20px; + position: relative; + z-index: 1; } .policy-container { @@ -85,13 +102,6 @@ body { z-index: 0; } -#header-container .logo, -#header-container .icon-header-logo { - display: block; - margin: 0 auto; - max-height: 120px; -} - .text-link { color: inherit; text-decoration: none; diff --git a/site_policy/policy.js b/site_policy/policy.js deleted file mode 100644 index 96123ca..0000000 --- a/site_policy/policy.js +++ /dev/null @@ -1,10 +0,0 @@ -fetch("../header.html") - .then(res => res.text()) - .then(html => { - document.getElementById("header-container").innerHTML = html; - }) - .catch(err => console.error("Failed to load header:", err)); - -(function(){ - ika_swim('div#ika_swim'); -})(); \ No newline at end of file diff --git a/stages/index.html b/stages/index.html new file mode 100644 index 0000000..8d12f3f --- /dev/null +++ b/stages/index.html @@ -0,0 +1,44 @@ + + + + + SplatNet - Splatoon's multiplayer service hub + + + + + +
+ +
+ +
+ +
Loading
+
+ +
+ +
+ +
+ Stage Info +
+ Use the stage information to guide your weapon strategy and battle strategy! +
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/app/stages/stages.js b/stages/stages.js similarity index 93% rename from app/stages/stages.js rename to stages/stages.js index 0ce8e96..b1b3245 100644 --- a/app/stages/stages.js +++ b/stages/stages.js @@ -1,5 +1,22 @@ const API_URL = "https://api.splatcord.ink/prod/s1rotations"; +function loadHeader() { + fetch("../../../header.html") + .then(res => res.text()) + .then(html => { + const headerContainer = document.getElementById("header-container"); + if (headerContainer) { + headerContainer.innerHTML = html; + + const stageButton = headerContainer.querySelector('.menu-item.stage'); + if (stageButton) { + stageButton.classList.add('active'); + } + } + }) + .catch(err => console.error("Failed to load header:", err)); +} + function stageNames(stages, lang = "en-US") { return stages.map(s => s.translatedNames[lang]); } @@ -237,5 +254,6 @@ async function renderStages() { container.innerHTML = html; } +loadHeader(); animateLoadingCanvas(); renderStages(); \ No newline at end of file diff --git a/styles.css b/stages/styles.css similarity index 59% rename from styles.css rename to stages/styles.css index e9332bf..d9c640a 100644 --- a/styles.css +++ b/stages/styles.css @@ -1,69 +1,69 @@ @font-face { font-family: "Splatoon1"; - src: url("./splatoon1.otf") format("opentype"); + src: url("../splatoon1.otf") format("opentype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Regular"; - src: url("./regular.otf") format("opentype"); + src: url("../regular.otf") format("opentype"); font-weight: normal; font-style: normal; } -html, body { - margin: 0; - padding: 0; +html { + height: 100%; } body { + margin: 0; + padding: 0; + display: flex; + align-items: flex-start; + min-height: 100vh; + background-image: url("/assets/stage.png"); background-repeat: repeat; background-size: 800px 800px; + background-attachment: fixed; } -/* HEADER */ -.header { - position: relative; - height: 150px; - background-color: black; +.main-wrapper { display: flex; - justify-content: center; - align-items: flex-start; - - clip-path: polygon( - 0% 0%, 100% 0%, 100% 80%, - 90% 85%, 80% 75%, 70% 85%, - 60% 75%, 50% 85%, 40% 75%, - 30% 85%, 20% 75%, 10% 85%, - 0% 80% - ); + width: 100%; + background: transparent; } -.logo { - max-height: 120px; - z-index: 2; -} - -/* MAIN CONTENT */ .content { + flex-grow: 1; display: flex; flex-direction: column; align-items: center; - padding-top: 24px; + padding: 40px 60px 0 0; + box-sizing: border-box; } .stage-info { - width: 65%; + width: 100%; max-width: 600px; height: auto; - margin-bottom: 20px; + margin: 0 auto 20px auto; + display: block; +} + +.stage-info-text { + margin: 6px auto 24px auto; + max-width: 600px; + text-align: center; + color: white; + font-family: "Regular", sans-serif; + font-size: 40px; + line-height: 1.4; } -/* STAGES */ .stages-container { width: 100%; - max-width: 400px; + max-width: 500px; display: flex; flex-direction: column; gap: 32px; @@ -87,17 +87,6 @@ body { width: 100%; } -.stage-info-text { - margin-top: 6px; - margin-bottom: 24px; - max-width: 600px; - text-align: left; - color: white; - font-family: "Regular", sans-serif; - font-size: 40px; - line-height: 1.4; -} - .stage-title { font-family: "Regular", sans-serif; text-align: center; @@ -168,64 +157,64 @@ body { } .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; + 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; } #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-canvas { - image-rendering: pixelated; - width: 100px; - height: 100px; - display: block; - margin: 0 auto; + 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; + margin-top: 12px; + color: white; + font-family: "Splatoon1", sans-serif; + font-size: 20px; + letter-spacing: 1.2px; + text-align: center; } \ No newline at end of file diff --git a/style.css b/style.css index 3967894..9b8b94e 100644 --- a/style.css +++ b/style.css @@ -1,27 +1,77 @@ +@font-face { + font-family: 'Splatoon1'; + src: url('Splatoon1.otf') format('opentype'); +} + +@font-face { + font-family: 'RegularFont'; + src: url('regular.otf') format('opentype'); +} + * { box-sizing: border-box; } -body { - margin: 0; - background: black; +.splatnet-sidebar { + width: 330px; + background-color: black; + display: inline-block; + padding: 0 24px 32px; + position: relative; + border-radius: 0; } -.splatnet-sidebar { - width: 400px; - padding: 30px 20px; +.splatnet-sidebar::after { + content: ""; + position: absolute; + top: 0; + right: -30px; + width: 30px; + height: 100%; + background-image: url('assets/en/svg/ui/bg_menu_right_wave-c8ca7628fe4a702b3985b66f59c365748d266db743ec3a7a7e68211c81c74ec1.svg'); + background-repeat: repeat-y; + background-size: contain; + z-index: 0; +} + +.splatnet-sidebar::before { + content: ""; + position: absolute; + bottom: -28px; + left: 0; + width: 340px; + height: 30px; + background-image: url('assets/en/svg/ui/bg_menu_bottom_wave-03056ad08bac76d5bf1d0bc2895f30cda65a731d9d69789719da70a084be31cb.svg'); + background-repeat: no-repeat; + background-size: 100% 100%; + z-index: 1; +} + +.splatnet-logo, .menu-item, .twitterbgbox { + position: relative; + z-index: 2; +} + +.splatnet-logo { + width: 300px; + margin: 0 auto; +} + +.splatnet-logo img { + display: block; + width: 100%; + height: auto; } .menu-item { position: relative; - height: 72px; - margin-bottom: 20px; - + height: 84px; + margin-bottom: 8px; display: flex; align-items: center; - gap: 18px; - - padding-left: 36px; + gap: 10px; + padding-left: 24px; + cursor: pointer; } .menu-item .bg { @@ -29,29 +79,138 @@ body { inset: 0; width: 100%; height: 100%; - object-fit: contain; + object-fit: contain; object-position: center; z-index: 0; } +.menu-item .hover-state { + display: none; +} + +.menu-item:hover .default { + display: none; +} + +.menu-item:hover .hover-state { + display: block; +} + .menu-item .icon { - width: 42px; - height: 42px; + width: 32px; + height: 32px; z-index: 1; object-fit: contain; } .menu-item .label { - height: 32px; + height: 28px; z-index: 1; } -/* this text renders smaller for some reason, hardcode fix!!!*/ .menu-item.equipment .label { - height: 70px; - margin-top: 0px; + height: 55px; } -.menu-item.friend .label { margin-top: 1px; } -.menu-item.rank { margin-top: 3px; } -.menu-item.stage .label { margin-top: 3px; } \ No newline at end of file +.twitterbgbox { + width: 280px; + height: 170px; + background-color: #333333; + border-radius: 40px; + margin: 60px auto 0; + position: relative; +} + +.twitterbgbox::before { + content: ""; + position: absolute; + width: 60px; + height: 60px; + top: -20px; + left: -20px; + background-color: white; + border-radius: 50%; + z-index: 2; +} + +.twitterbgbox::after { + content: "WWWWWWWWWWWW"; + position: absolute; + top: 12px; + left: 48px; + color: white; + font-family: 'RegularFont', sans-serif; + font-weight: normal; + font-size: 18px; + z-index: 1; +} + +.button-container { + position: absolute; + bottom: 15px; + left: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.box-btn { + width: 85%; + background-color: #919191; + color: white; + border: none; + padding: 10px 0; + border-radius: 15px; + font-family: 'Splatoon1', sans-serif; + font-size: 16px; + cursor: pointer; + transition: opacity 0.2s; + display: flex; + align-items: center; + justify-content: center; + gap: 12px; +} + +.box-btn.twitter-btn { + background-color: #00a0f3; +} + +.btn-icon { + width: 18px; + height: 18px; + filter: brightness(0) invert(1); +} + +.box-btn:hover { + opacity: 0.8; +} + +.btn-label-img { + height: 18px; + width: auto; + display: block; + pointer-events: none; + filter: brightness(0) invert(1); +} + +.box-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 0; +} + +.box-btn .btn-label-img { + max-width: 80%; +} + +.menu-item.active .hover-state { + display: block !important; +} + +.menu-item.active .default { + display: none !important; +} \ No newline at end of file