merge changes from main & add proper mobile support

This commit is contained in:
kittentm 2026-02-04 23:15:38 +01:00
commit 3604026332
36 changed files with 776 additions and 180 deletions

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View file

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View file

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Before After
Before After

BIN
assets/en/mb-thankyou.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 KiB

BIN
assets/en/pc-thankyou.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 599 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 154.7 38.7" style="enable-background:new 0 0 154.7 38.7;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;}
.st2{fill:#FFFFFF;}
</style>
<g id="bg" class="st0">
<rect x="0.1" y="-39.9" class="st1" width="447.8" height="80.6"/>
</g>
<g id="レイヤー_1">
<g>
<path class="st2" d="M10.2,32.6c-5.3,0-8.3-2.1-9.3-5.5L4,25c0.7,2.4,2.3,3.1,3.8,3.1c1.6,0,2.4-0.8,2.4-2.1
c0-2.5-2.4-2.7-4.6-3.7c-2.8-1.3-3.9-2.7-3.9-5.6c0-3.4,3.2-6.2,7.5-6.2c4.9,0,7.8,1.3,9.2,5.9l-8.1,1.4c-0.3-1.8-1.3-3-2.6-3
c-1.6,0-2.3,0.6-2.3,1.7c0,1.3,2.1,2.2,4.8,2.4c5.2,0.3,8.6,2.2,8.6,7C18.8,30.1,15.9,32.6,10.2,32.6z"/>
<path class="st2" d="M30.6,32.4c-5.3,0-7.8-1.1-7.8-4.9v-5.8h-1.6V17h1.8v-4.7h4.5V17h3.1v4.7h-3.1v2.6c0,2,0.9,2,3.9,2L30.6,32.4
z"/>
<path class="st2" d="M48.5,32.2c-0.5,0.1-1,0.2-1.7,0.2c-2.3,0-5.2-0.6-5.5-1.7c-0.8,1.2-2.4,1.7-4.1,1.7c-2.3,0-4.1-1.6-4.1-4.1
c0,0,0-0.1,0-0.1c0-2.8,1.2-4.4,4.2-5.3c1.6-0.5,2.6-0.9,2.6-1.5c0-0.9-0.4-1.1-1.6-1.1c-1,0-2.7,0.9-3.5,2.2l-1.5-3.3
c1.2-1.6,4-2.5,6.9-2.5c4.8,0,7,1.7,7,5v4.9c0,0.8,0.2,1.1,1.1,1.1c0.3,0,0.6,0,1-0.1L48.5,32.2z M40,24.8c-0.4,0.4-0.9,0.6-1.7,1
c-0.8,0.4-1.2,0.9-1.2,1.9c0,0.7,0.4,1.2,1.1,1.2c0.8,0,1.6-0.7,1.8-1.7V24.8z"/>
<path class="st2" d="M58.3,37.5c-2.5,0-4.9-0.3-6.3-0.8l-0.7-4.1c1.4,0.5,3.1,0.8,4.4,0.8c2.5,0,3.2-0.6,3.2-2.3v-1
c-0.6,0.7-1.8,1.2-3,1.2c-2.9,0-5.5-2.4-5.5-7.2c0-4.8,2.6-7.4,5.4-7.4c1.7,0,3,0.6,3.5,1.8l0.5-1.4h6.3v14.3
C66.2,35.7,63.3,37.5,58.3,37.5z M59,22.4c-0.4-1.1-1.1-1.8-2.2-1.8c-1.4,0-2.4,1.1-2.4,3.6c0,2.5,1,3.7,2.4,3.7
c1.2,0,2.2-1,2.2-2.5V22.4z"/>
<path class="st2" d="M73.1,26.3c0.1,1.2,1.3,2.3,2.4,2.3c1.4,0,2.1-0.6,2.3-2h6.7c-0.3,3.7-3,5.8-8,5.8c-4.3,0-7.4-3-7.4-7.9
c0-4.5,3.1-7.9,7.3-7.9c5.7,0,8.3,2.8,8.3,8.2L73.1,26.3z M75.1,20.4c-1.1,0-2.1,1.1-2.1,2.8l4.4-0.6
C77.3,21.2,76.5,20.4,75.1,20.4z"/>
<path class="st2" d="M97.9,32.1V11h7.2v21.1H97.9z"/>
<path class="st2" d="M116.7,32.1v-9.3c0-1.5-0.6-2.3-1.6-2.3c-1,0-1.9,0.8-2.2,2.1v9.5h-4V17h3.7v1.7c0.6-1,2.6-2,4.8-2
c4.1,0,6.8,2.3,6.8,5.3v10.1H116.7z"/>
<path class="st2" d="M134.5,15.5c-1.4,0-1.9,0.4-1.9,1.1V17h3.5v4.7h-3.3v10.3h-4.4V21.7h-1.9V17h1.9v-1.2c0-3.9,2.1-5.4,7.6-5.4
l0.5,5.2C135.7,15.5,135,15.5,134.5,15.5z"/>
<path class="st2" d="M145.9,32.4c-4.9,0-8.2-3.1-8.2-7.8c0-4.8,3.3-7.9,8.2-7.9c4.9,0,8.2,3.1,8.2,7.9
C154.1,29.3,150.8,32.4,145.9,32.4z M144.3,20.4c-1.4,0-2.5,1.6-2.5,4.1c0,2.5,1,4.1,2.5,4.1c1.5,0,2.5-1.6,2.5-4.1
C146.8,22,145.9,20.4,144.3,20.4z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 170.6 48" style="enable-background:new 0 0 170.6 48;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;}
.st2{fill:#FFFFFF;}
</style>
<g id="bg" class="st0">
<rect y="-39.8" class="st1" width="341.3" height="87.9"/>
</g>
<g id="レイヤー_1">
<g>
<path class="st2" d="M8.8,37.4l-2.4-7.8H5v7.8H1.4V17.2h8.4c3.3,0,5.8,2.4,5.8,6c0,3-1.3,4.9-3.1,5.6l4,8.6H8.8z M6.7,21.1H5v4.8
h1.6c1.1,0,2-0.9,2-2.5C8.7,21.9,7.7,21.1,6.7,21.1z"/>
<path class="st2" d="M29.8,37.6c-0.4,0.1-0.8,0.2-1.4,0.2c-1.9,0-4.3-0.6-4.5-1.6c-0.6,1.2-1.9,1.6-3.4,1.6c-1.9,0-3.4-1.5-3.4-4
c0,0,0-0.1,0-0.1c0-2.7,1-4.2,3.4-5.1c1.3-0.4,2.1-0.9,2.1-1.5c0-0.8-0.3-1-1.3-1c-0.8,0-2.2,0.9-2.8,2.1L17.4,25
c1-1.5,3.3-2.4,5.6-2.4c3.9,0,5.8,1.7,5.8,4.9v4.7c0,0.8,0.2,1.1,0.9,1.1c0.2,0,0.5,0,0.8-0.1L29.8,37.6z M22.8,30.4
c-0.4,0.3-0.8,0.6-1.4,0.9c-0.7,0.3-1,0.9-1,1.9c0,0.7,0.3,1.1,0.9,1.1c0.6,0,1.3-0.7,1.5-1.7V30.4z"/>
<path class="st2" d="M38.3,37.4v-8.9c0-1.4-0.5-2.3-1.3-2.3c-0.8,0-1.5,0.8-1.8,2v9.2h-3.3V22.9h3v1.6c0.5-1,2.1-2,3.9-2
c3.4,0,5.6,2.2,5.6,5.1v9.7H38.3z"/>
<path class="st2" d="M53.4,37.4l-2.7-5.6v5.6h-3.3V17.2h3.3V27l2.5-4h6l-4,5.8l4.7,8.7H53.4z"/>
<path class="st2" d="M63.7,31.9c0.1,1.2,1,2.2,2,2.2c1.1,0,1.7-0.5,1.9-2h5.5c-0.2,3.5-2.5,5.6-6.6,5.6c-3.5,0-6.1-2.9-6.1-7.6
c0-4.4,2.5-7.6,6-7.6c4.6,0,6.8,2.7,6.8,7.9L63.7,31.9z M65.4,26.2c-0.9,0-1.7,1.1-1.7,2.7l3.6-0.6C67.2,27,66.5,26.2,65.4,26.2z"
/>
<path class="st2" d="M82.4,37.4v-1.7c-0.6,1.6-1.9,2-3,2c-2.6,0-4.6-2.6-4.6-7.5c0-4.9,2.1-7.6,4.5-7.6c1.1,0,1.9,0.5,2.4,1.2
v-6.7h6.3v20.3H82.4z M81.9,28.3c-0.3-1.2-0.9-2-1.7-2c-1,0-1.9,1.2-1.9,3.9c0,2.6,0.8,3.8,1.9,3.8c1,0,1.7-1.1,1.7-2.8V28.3z"/>
<path class="st2" d="M108.3,37.4h-8.7V17.2h8.3c3.2,0,5.3,2.2,5.3,5.1c0,2.3-1,3.9-2.7,4.2l0,0.1c1.9,0.2,3.6,2,3.6,5.1
C114.2,35,112,37.4,108.3,37.4z M104.8,21h-1.6v4.2h1.7c0.9,0,1.5-0.8,1.5-2C106.4,21.8,105.7,21,104.8,21z M105.1,28.8h-1.9v4.7
h2c1.2,0,1.9-0.9,1.9-2.4C107.1,29.6,106.3,28.8,105.1,28.8z"/>
<path class="st2" d="M128.1,37.6c-0.4,0.1-0.8,0.2-1.4,0.2c-1.9,0-4.3-0.6-4.5-1.6c-0.6,1.2-1.9,1.6-3.4,1.6c-1.9,0-3.4-1.5-3.4-4
c0,0,0-0.1,0-0.1c0-2.7,1-4.2,3.4-5.1c1.3-0.4,2.1-0.9,2.1-1.5c0-0.8-0.3-1-1.3-1c-0.8,0-2.2,0.9-2.8,2.1l-1.2-3.2
c1-1.5,3.3-2.4,5.6-2.4c3.9,0,5.8,1.7,5.8,4.9v4.7c0,0.8,0.2,1.1,0.9,1.1c0.2,0,0.5,0,0.8-0.1L128.1,37.6z M121.1,30.4
c-0.4,0.3-0.8,0.6-1.4,0.9c-0.7,0.3-1,0.9-1,1.9c0,0.7,0.3,1.1,0.9,1.1c0.6,0,1.3-0.7,1.5-1.7V30.4z"/>
<path class="st2" d="M137.2,37.7c-4.4,0-6.4-1-6.4-4.7v-5.6h-1.3v-4.6h1.5v-4.5h3.7v4.5h2.5v4.6h-2.5V30c0,1.9,0.7,1.9,3.2,1.9
L137.2,37.7z"/>
<path class="st2" d="M146.9,37.7c-4.4,0-6.4-1-6.4-4.7v-5.6h-1.3v-4.6h1.5v-4.5h3.7v4.5h2.5v4.6h-2.5V30c0,1.9,0.7,1.9,3.2,1.9
L146.9,37.7z"/>
<path class="st2" d="M149.7,37.4V17.2h4.8v20.3H149.7z"/>
<path class="st2" d="M160.4,31.9c0.1,1.2,1,2.2,2,2.2c1.1,0,1.7-0.5,1.9-2h5.5c-0.2,3.5-2.5,5.6-6.6,5.6c-3.5,0-6.1-2.9-6.1-7.6
c0-4.4,2.5-7.6,6-7.6c4.6,0,6.8,2.7,6.8,7.9L160.4,31.9z M162.1,26.2c-0.9,0-1.7,1.1-1.7,2.7l3.6-0.6
C163.9,27,163.2,26.2,162.1,26.2z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 245.6 42.6" style="enable-background:new 0 0 245.6 42.6;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;}
.st2{fill:#FFFFFF;}
</style>
<g id="bg" class="st0">
<rect y="-45.3" class="st1" width="491.3" height="87.9"/>
</g>
<g id="レイヤー_1">
<g>
<path class="st2" d="M16.1,34.6l-3.3-9h-1.9v9H6V11.2h11.4c4.5,0,7.9,2.8,7.9,6.9c0,3.4-1.8,5.6-4.2,6.5l5.5,10H16.1z M13.1,15.8
H11v5.5h2.2c1.5,0,2.8-1,2.8-2.9C15.9,16.7,14.6,15.8,13.1,15.8z"/>
<path class="st2" d="M32.3,28.2c0.1,1.4,1.4,2.6,2.7,2.6c1.6,0,2.3-0.6,2.6-2.3h7.4c-0.3,4.1-3.4,6.5-8.9,6.5
c-4.8,0-8.3-3.4-8.3-8.7c0-5,3.5-8.7,8.2-8.7c6.3,0,9.2,3.1,9.2,9.1L32.3,28.2z M34.6,21.7c-1.2,0-2.4,1.3-2.4,3.1l4.9-0.7
C37.1,22.6,36.1,21.7,34.6,21.7z"/>
<path class="st2" d="M56.2,40.7c-2.8,0-5.4-0.4-7-0.9l-0.8-4.6c1.6,0.5,3.4,0.8,4.9,0.8c2.8,0,3.6-0.7,3.6-2.6v-1.1
c-0.7,0.8-2,1.3-3.3,1.3c-3.2,0-6.2-2.7-6.2-7.9c0-5.3,2.9-8.3,6-8.3c1.9,0,3.3,0.7,3.9,1.9l0.6-1.6h7v15.9
C65,38.6,61.7,40.7,56.2,40.7z M56.9,23.9c-0.4-1.2-1.3-2-2.5-2c-1.6,0-2.6,1.2-2.6,4c0,2.8,1.1,4.1,2.7,4.1
c1.3,0,2.4-1.1,2.4-2.8V23.9z"/>
<path class="st2" d="M78.7,34.6v-1.8C78,34.2,76.4,35,74.4,35c-2.9,0-5.7-2.3-5.7-5.8V17.9h4.5v9.9c0,1.7,1.2,2.6,2.6,2.6
c1.1,0,2.2-0.7,2.5-2.1V17.9h7.4v16.7H78.7z"/>
<path class="st2" d="M89.6,34.6V11.2h6.6v23.4H89.6z"/>
<path class="st2" d="M116.4,34.8c-0.5,0.1-1.1,0.2-1.9,0.2c-2.5,0-5.8-0.7-6.1-1.9c-0.9,1.4-2.6,1.9-4.6,1.9
c-2.6,0-4.6-1.7-4.6-4.6c0,0,0-0.1,0-0.1c0-3.1,1.3-4.9,4.7-5.8c1.7-0.5,2.9-1,2.9-1.7c0-1-0.5-1.2-1.7-1.2c-1.1,0-3,1-3.8,2.4
l-1.7-3.7c1.3-1.8,4.5-2.8,7.7-2.8c5.3,0,7.8,1.9,7.8,5.6v5.4c0,0.9,0.3,1.3,1.3,1.3c0.3,0,0.7,0,1.1-0.1L116.4,34.8z M107,26.5
c-0.5,0.4-1.1,0.7-1.9,1.1c-0.9,0.4-1.4,1-1.4,2.2c0,0.8,0.5,1.3,1.3,1.3c0.9,0,1.8-0.8,2-1.9V26.5z"/>
<path class="st2" d="M127.7,24.5c-1.5,0-2.8,0.7-3.2,1.8v8.3h-4.9V17.9h4.6v1.8c1-1.4,2.9-2.2,6.5-2.2v7.9
C129.7,24.8,128.7,24.5,127.7,24.5z"/>
<path class="st2" d="M156.6,34.6h-11.9V11.2h11.3c4.4,0,7.3,2.5,7.3,5.9c0,2.6-1.3,4.5-3.6,4.9l0,0.1c2.5,0.2,4.9,2.3,4.9,5.9
C164.6,31.9,161.7,34.6,156.6,34.6z M151.9,15.6h-2.2v4.8h2.3c1.3,0,2-0.9,2-2.3C154.1,16.6,153.2,15.6,151.9,15.6z M152.3,24.6
h-2.6v5.5h2.7c1.6,0,2.6-1,2.6-2.8C155,25.6,153.9,24.6,152.3,24.6z"/>
<path class="st2" d="M183.5,34.8c-0.5,0.1-1.1,0.2-1.9,0.2c-2.5,0-5.8-0.7-6.1-1.9c-0.9,1.4-2.6,1.9-4.6,1.9
c-2.6,0-4.6-1.7-4.6-4.6c0,0,0-0.1,0-0.1c0-3.1,1.3-4.9,4.7-5.8c1.7-0.5,2.9-1,2.9-1.7c0-1-0.5-1.2-1.7-1.2c-1.1,0-3,1-3.8,2.4
l-1.7-3.7c1.3-1.8,4.5-2.8,7.7-2.8c5.3,0,7.8,1.9,7.8,5.6v5.4c0,0.9,0.3,1.3,1.3,1.3c0.3,0,0.7,0,1.1-0.1L183.5,34.8z M174.1,26.5
c-0.5,0.4-1.1,0.7-1.9,1.1c-0.9,0.4-1.4,1-1.4,2.2c0,0.8,0.5,1.3,1.3,1.3c0.9,0,1.8-0.8,2-1.9V26.5z"/>
<path class="st2" d="M195.8,35c-5.9,0-8.7-1.2-8.7-5.4v-6.4h-1.8v-5.3h2v-5.2h5v5.2h3.4v5.3h-3.4V26c0,2.2,1,2.3,4.3,2.3L195.8,35
z"/>
<path class="st2" d="M209,35c-5.9,0-8.7-1.2-8.7-5.4v-6.4h-1.8v-5.3h2v-5.2h5v5.2h3.4v5.3h-3.4V26c0,2.2,1,2.3,4.3,2.3L209,35z"/>
<path class="st2" d="M212.8,34.6V11.2h6.6v23.4H212.8z"/>
<path class="st2" d="M227.4,28.2c0.1,1.4,1.4,2.6,2.7,2.6c1.6,0,2.3-0.6,2.6-2.3h7.4c-0.3,4.1-3.4,6.5-8.9,6.5
c-4.8,0-8.3-3.4-8.3-8.7c0-5,3.5-8.7,8.2-8.7c6.3,0,9.2,3.1,9.2,9.1L227.4,28.2z M229.7,21.7c-1.2,0-2.4,1.3-2.4,3.1l4.9-0.7
C232.1,22.6,231.2,21.7,229.7,21.7z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 70.4 20.9" style="enable-background:new 0 0 70.4 20.9;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;}
.st2{fill:#FFFFFF;}
</style>
<g id="bg" class="st0">
<rect y="-59.3" class="st1" width="447.8" height="80.6"/>
</g>
<g id="レイヤー_1">
<g>
<path class="st2" d="M5,16.3H0.8V8.1h4c1.5,0,2.5,0.9,2.5,2.1c0,0.9-0.5,1.6-1.3,1.7l0,0c0.9,0.1,1.7,0.8,1.7,2.1
C7.8,15.3,6.7,16.3,5,16.3z M3.3,9.6H2.6v1.7h0.8c0.5,0,0.7-0.3,0.7-0.8C4.1,10,3.8,9.6,3.3,9.6z M3.5,12.8H2.6v1.9h0.9
c0.6,0,0.9-0.4,0.9-1C4.4,13.1,4,12.8,3.5,12.8z"/>
<path class="st2" d="M14.4,16.3c-0.2,0-0.4,0.1-0.7,0.1c-0.9,0-2-0.2-2.1-0.7c-0.3,0.5-0.9,0.7-1.6,0.7c-0.9,0-1.6-0.6-1.6-1.6
c0,0,0,0,0,0c0-1.1,0.5-1.7,1.6-2c0.6-0.2,1-0.4,1-0.6c0-0.3-0.2-0.4-0.6-0.4c-0.4,0-1,0.4-1.3,0.9l-0.6-1.3c0.5-0.6,1.6-1,2.7-1
c1.9,0,2.7,0.7,2.7,2v1.9c0,0.3,0.1,0.4,0.4,0.4c0.1,0,0.2,0,0.4,0L14.4,16.3z M11.1,13.4c-0.2,0.1-0.4,0.3-0.7,0.4
c-0.3,0.1-0.5,0.4-0.5,0.8c0,0.3,0.2,0.5,0.4,0.5c0.3,0,0.6-0.3,0.7-0.7V13.4z"/>
<path class="st2" d="M18.7,16.4c-2.1,0-3-0.4-3-1.9v-2.2H15v-1.8h0.7V8.6h1.8v1.8h1.2v1.8h-1.2v1c0,0.8,0.3,0.8,1.5,0.8L18.7,16.4
z"/>
<path class="st2" d="M23.3,16.4c-2.1,0-3-0.4-3-1.9v-2.2h-0.6v-1.8h0.7V8.6h1.8v1.8h1.2v1.8h-1.2v1c0,0.8,0.3,0.8,1.5,0.8
L23.3,16.4z"/>
<path class="st2" d="M24.6,16.3V8.1h2.3v8.2H24.6z"/>
<path class="st2" d="M29.7,14c0,0.5,0.5,0.9,0.9,0.9c0.5,0,0.8-0.2,0.9-0.8h2.6c-0.1,1.4-1.2,2.3-3.1,2.3c-1.7,0-2.9-1.2-2.9-3.1
c0-1.8,1.2-3.1,2.9-3.1c2.2,0,3.2,1.1,3.2,3.2L29.7,14z M30.6,11.7c-0.4,0-0.8,0.4-0.8,1.1l1.7-0.2C31.4,12,31.1,11.7,30.6,11.7z"
/>
<path class="st2" d="M45,16.3V13c0-0.7,0.1-2.9,0.1-3.2H45c0,0.2-0.2,1.6-0.3,2.1l-0.9,4.4H42l-0.9-4.4c-0.1-0.4-0.3-1.7-0.3-2.1
h0c0,0.3,0.1,2.4,0.1,3.2v3.2h-1.5V8.1h2.4l1,4.8c0.1,0.5,0.1,1.3,0.1,1.4h0c0-0.1,0-0.9,0.1-1.4L44,8.1H48v8.2H45z"/>
<path class="st2" d="M52.5,16.4c-1.9,0-3.2-1.2-3.2-3c0-1.9,1.3-3.1,3.2-3.1c1.9,0,3.2,1.2,3.2,3.1C55.7,15.2,54.4,16.4,52.5,16.4
z M51.9,11.7c-0.5,0-1,0.6-1,1.6c0,1,0.4,1.6,1,1.6c0.6,0,1-0.6,1-1.6C52.9,12.3,52.5,11.7,51.9,11.7z"/>
<path class="st2" d="M60.1,16.3v-0.7c-0.3,0.7-0.9,0.8-1.4,0.8c-1.2,0-2.2-1-2.2-3c0-2,1-3.1,2.2-3.1c0.5,0,0.9,0.2,1.2,0.5V8.1h3
v8.2H60.1z M59.8,12.6c-0.1-0.5-0.4-0.8-0.8-0.8c-0.5,0-0.9,0.5-0.9,1.6c0,1.1,0.4,1.5,0.9,1.5c0.5,0,0.8-0.4,0.8-1.1V12.6z"/>
<path class="st2" d="M65.4,14c0,0.5,0.5,0.9,0.9,0.9c0.5,0,0.8-0.2,0.9-0.8h2.6c-0.1,1.4-1.2,2.3-3.1,2.3c-1.7,0-2.9-1.2-2.9-3.1
c0-1.8,1.2-3.1,2.9-3.1c2.2,0,3.2,1.1,3.2,3.2L65.4,14z M66.3,11.7c-0.4,0-0.8,0.4-0.8,1.1l1.7-0.2C67.1,12,66.8,11.7,66.3,11.7z"
/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View file

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 154.8 38.3" style="enable-background:new 0 0 154.8 38.3;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;}
.st2{fill:#FFFFFF;}
</style>
<g id="bg" class="st0">
<rect y="-42.3" class="st1" width="447.8" height="80.6"/>
</g>
<g id="レイヤー_1">
<g>
<path class="st2" d="M10.2,32.6c-5.3,0-8.3-2.1-9.3-5.5L4,25c0.7,2.4,2.3,3.1,3.8,3.1c1.6,0,2.4-0.8,2.4-2.1
c0-2.5-2.4-2.7-4.6-3.7c-2.8-1.3-3.9-2.7-3.9-5.6c0-3.4,3.2-6.2,7.5-6.2c4.9,0,7.8,1.3,9.2,5.9l-8.1,1.4c-0.3-1.8-1.3-3.1-2.6-3.1
c-1.6,0-2.3,0.6-2.3,1.7c0,1.3,2.1,2.2,4.8,2.4c5.2,0.3,8.6,2.2,8.6,7C18.8,30.1,15.9,32.6,10.2,32.6z"/>
<path class="st2" d="M30.6,32.4c-5.3,0-7.8-1.1-7.8-4.9v-5.8h-1.6V17h1.8v-4.7h4.5V17h3.1v4.7h-3.1v2.6c0,2,0.9,2,3.9,2L30.6,32.4
z"/>
<path class="st2" d="M48.5,32.2c-0.5,0.1-1,0.2-1.7,0.2c-2.3,0-5.2-0.6-5.5-1.7c-0.8,1.2-2.4,1.7-4.1,1.7c-2.3,0-4.1-1.6-4.1-4.1
c0,0,0-0.1,0-0.1c0-2.8,1.2-4.4,4.2-5.3c1.6-0.5,2.6-0.9,2.6-1.5c0-0.9-0.4-1.1-1.6-1.1c-1,0-2.7,0.9-3.5,2.2l-1.5-3.3
c1.2-1.6,4-2.5,6.9-2.5c4.8,0,7,1.7,7,5v4.9c0,0.8,0.2,1.1,1.1,1.1c0.3,0,0.6,0,1-0.1L48.5,32.2z M40,24.8c-0.4,0.4-0.9,0.6-1.7,1
c-0.8,0.4-1.2,0.9-1.2,1.9c0,0.7,0.4,1.2,1.1,1.2c0.8,0,1.6-0.7,1.8-1.7V24.8z"/>
<path class="st2" d="M58.3,37.5c-2.5,0-4.9-0.3-6.3-0.8l-0.7-4.1c1.4,0.5,3.1,0.8,4.4,0.8c2.5,0,3.2-0.6,3.2-2.3v-1
c-0.6,0.7-1.8,1.2-3,1.2c-2.9,0-5.5-2.4-5.5-7.2c0-4.8,2.6-7.5,5.4-7.5c1.7,0,3,0.6,3.5,1.8l0.5-1.4h6.3v14.3
C66.2,35.7,63.3,37.5,58.3,37.5z M59,22.4c-0.4-1.1-1.1-1.8-2.2-1.8c-1.4,0-2.4,1.1-2.4,3.6c0,2.5,1,3.7,2.4,3.7
c1.2,0,2.2-1,2.2-2.5V22.4z"/>
<path class="st2" d="M73.1,26.3c0.1,1.2,1.3,2.3,2.4,2.3c1.4,0,2.1-0.6,2.3-2h6.7c-0.3,3.7-3,5.8-8,5.8c-4.3,0-7.4-3-7.4-7.9
c0-4.5,3.1-7.9,7.3-7.9c5.7,0,8.3,2.8,8.3,8.2L73.1,26.3z M75.1,20.4c-1.1,0-2.1,1.1-2.1,2.8l4.4-0.6
C77.3,21.2,76.5,20.4,75.1,20.4z"/>
<path class="st2" d="M97.9,32.1V11h7.2v21.1H97.9z"/>
<path class="st2" d="M116.7,32.1v-9.3c0-1.5-0.6-2.3-1.6-2.3c-1,0-1.9,0.8-2.2,2.1v9.5h-4V17h3.7v1.7c0.6-1,2.6-2,4.8-2
c4.1,0,6.8,2.3,6.8,5.3v10.1H116.7z"/>
<path class="st2" d="M134.5,15.5c-1.4,0-1.9,0.4-1.9,1.1V17h3.5v4.7h-3.3v10.3h-4.4V21.7h-1.9V17h1.9v-1.2c0-3.9,2.1-5.4,7.6-5.4
l0.5,5.2C135.7,15.5,135,15.5,134.5,15.5z"/>
<path class="st2" d="M145.9,32.4c-4.9,0-8.2-3.1-8.2-7.8c0-4.8,3.3-7.9,8.2-7.9c4.9,0,8.2,3.1,8.2,7.9
C154.1,29.3,150.8,32.4,145.9,32.4z M144.3,20.4c-1.4,0-2.5,1.6-2.5,4.1s1,4.1,2.5,4.1c1.5,0,2.5-1.6,2.5-4.1
C146.8,22,145.9,20.4,144.3,20.4z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 44 12" style="enable-background:new 0 0 44 12;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;}
.st2{fill:#FFFFFF;}
</style>
<g id="bg" class="st0">
<rect y="-68.6" class="st1" width="447.8" height="80.6"/>
</g>
<g id="レイヤー_1">
<g>
<path class="st2" d="M0.6,9.5V3.2h1.5v4.1h3v2.2H0.6z"/>
<path class="st2" d="M8.1,9.6c-1.5,0-2.4-0.9-2.4-2.3c0-1.4,1-2.3,2.4-2.3c1.5,0,2.4,0.9,2.4,2.3C10.5,8.7,9.6,9.6,8.1,9.6z
M7.7,6C7.2,6,6.9,6.5,6.9,7.3s0.3,1.2,0.7,1.2c0.5,0,0.7-0.5,0.7-1.2C8.4,6.5,8.1,6,7.7,6z"/>
<path class="st2" d="M15.6,9.5c-0.1,0-0.3,0-0.5,0c-0.7,0-1.6-0.2-1.6-0.5c-0.2,0.4-0.7,0.5-1.2,0.5c-0.7,0-1.2-0.5-1.2-1.2
c0,0,0,0,0,0c0-0.8,0.4-1.3,1.2-1.6C12.8,6.6,13,6.5,13,6.3C13,6.1,12.9,6,12.6,6c-0.3,0-0.8,0.3-1,0.6l-0.4-1
c0.4-0.5,1.2-0.7,2-0.7c1.4,0,2.1,0.5,2.1,1.5v1.4c0,0.2,0.1,0.3,0.3,0.3c0.1,0,0.2,0,0.3,0L15.6,9.5z M13.1,7.3
c-0.1,0.1-0.3,0.2-0.5,0.3c-0.2,0.1-0.4,0.3-0.4,0.6c0,0.2,0.1,0.4,0.3,0.4c0.2,0,0.5-0.2,0.5-0.5V7.3z"/>
<path class="st2" d="M18.9,9.5V8.9c-0.2,0.5-0.7,0.6-1.1,0.6c-1,0-1.6-0.8-1.6-2.3c0-1.5,0.8-2.3,1.6-2.3c0.4,0,0.7,0.1,0.9,0.4
v-2H21v6.2H18.9z M18.7,6.7c-0.1-0.4-0.3-0.6-0.6-0.6c-0.4,0-0.7,0.4-0.7,1.2c0,0.8,0.3,1.2,0.7,1.2c0.4,0,0.6-0.3,0.6-0.8V6.7z"
/>
<path class="st2" d="M22.1,4.5V3.2h1.8v1.2H22.1z M22.1,9.5V5h1.7v4.5H22.1z"/>
<path class="st2" d="M27.2,9.5V6.7C27.2,6.3,27,6,26.7,6c-0.3,0-0.6,0.2-0.6,0.6v2.8h-1.2V5h1.1v0.5c0.2-0.3,0.8-0.6,1.4-0.6
c1.2,0,2,0.7,2,1.6v3H27.2z"/>
<path class="st2" d="M32.6,11.1c-0.8,0-1.4-0.1-1.9-0.2l-0.2-1.2c0.4,0.1,0.9,0.2,1.3,0.2c0.7,0,1-0.2,1-0.7V8.9
c-0.2,0.2-0.5,0.3-0.9,0.3c-0.8,0-1.6-0.7-1.6-2.1c0-1.4,0.8-2.2,1.6-2.2c0.5,0,0.9,0.2,1,0.5L33,5h1.9v4.2
C34.9,10.5,34,11.1,32.6,11.1z M32.8,6.6c-0.1-0.3-0.3-0.5-0.7-0.5c-0.4,0-0.7,0.3-0.7,1.1c0,0.7,0.3,1.1,0.7,1.1
c0.4,0,0.6-0.3,0.6-0.8V6.6z"/>
<path class="st2" d="M36,9.5V8h1.8v1.5H36z"/>
<path class="st2" d="M38.9,9.5V8h1.8v1.5H38.9z"/>
<path class="st2" d="M41.9,9.5V8h1.8v1.5H41.9z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 248 52" style="enable-background:new 0 0 248 52;" xml:space="preserve">
<polygon id="XMLID_1_" points="0,0 0,52 241.9,42.1 248,6.9 "/>
</svg>

After

Width:  |  Height:  |  Size: 424 B

View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 248 52" style="enable-background:new 0 0 248 52;" xml:space="preserve">
<polygon id="XMLID_1_" points="0,0 0,52 241.9,42.1 248,6.9 "/>
</svg>

After

Width:  |  Height:  |  Size: 424 B

View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1024 18" style="enable-background:new 0 0 1024 18;" xml:space="preserve">
<g>
<path id="XMLID_1_" d="M0,0v8.6c6.7,1,13.5,1.2,20,3.1c14.9,4.4,29.3,3.5,43.6-3.4C74.6,3,86,2.2,97.7,3.2
c11.7,1.1,23.5,1.9,35.2,1.3c15.7-0.8,31,0.9,46.1,6.7c17.9,6.8,36,9.3,54.4,3.7c13.4-4.1,26.9-4.7,40.5-2.5
c0.2,0.1,0.5,0.2,0.7,0.3c21,6.6,41.9,5.7,62.1-4.5c16.5-8.4,33-9.9,50.1-3.4c16.2,6.2,32.8,8,49.7,5.3c3.6-0.6,7.3-1.2,11-1.5
c0-0.2,0.1,0.2,0.1,0c6.9,1.1,14,1.2,20.8,3.2c14.9,4.4,29.3,3.5,43.6-3.4c11-5.4,22.4-6.2,34.1-5.1c11.7,1.1,23.5,1.9,35.2,1.3
c15.7-0.8,31,0.9,46.1,6.7c17.9,6.8,36,9.3,54.4,3.7c13.2-4.1,26.5-4.6,39.9-2.6c0.3,0.1,0.7,0.2,1,0.3c21,6.6,41.9,5.7,62.1-4.5
c16.5-8.4,33-9.9,50.1-3.4c16.2,6.2,32.8,8,49.7,5.3c3.6-0.6,7.3-1.2,11-1.5c0-0.2,0.1,0.2,0.1,0c6.9,1.1,14,1.2,20.8,3.2
c14.9,4.4,29.3,3.5,43.6-3.4c11-5.4,22.4-6.2,34.1-5.1c9.9,0.9,19.9,1.6,29.9,1.4V0H0z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<style type="text/css">
.st0{fill:#AA3BF2;}
</style>
<path id="XMLID_24_" class="st0" d="M37.8,2.2H2.2C1,2.2,0,2.8,0,3.7v12.4c0,0.9,1,1.5,2.2,1.5h35.7c1.2,0,2.2-0.7,2.2-1.5V3.7
C40,2.8,39,2.2,37.8,2.2z M13.1,12.4c0,0.9-1,1.5-2.2,1.5h-6c-1.2,0-2.2-0.7-2.2-1.5V8c0-0.9,1-1.5,2.2-1.5h6c1.2,0,2.2,0.7,2.2,1.5
V12.4z M25.2,12.4c0,0.9-1,1.5-2.2,1.5h-6c-1.2,0-2.2-0.7-2.2-1.5V8c0-0.9,1-1.5,2.2-1.5h6c1.2,0,2.2,0.7,2.2,1.5V12.4z M37.2,12.4
c0,0.9-1,1.5-2.2,1.5h-6c-1.2,0-2.2-0.7-2.2-1.5V8c0-0.9,1-1.5,2.2-1.5h6c1.2,0,2.2,0.7,2.2,1.5V12.4z"/>
<path id="XMLID_19_" class="st0" d="M37.8,22.4H2.2C1,22.4,0,23.1,0,23.9v12.4c0,0.9,1,1.5,2.2,1.5h35.7c1.2,0,2.2-0.7,2.2-1.5V23.9
C40,23.1,39,22.4,37.8,22.4z M13.1,32.6c0,0.9-1,1.5-2.2,1.5h-6c-1.2,0-2.2-0.7-2.2-1.5v-4.3c0-0.9,1-1.5,2.2-1.5h6
c1.2,0,2.2,0.7,2.2,1.5V32.6z M25.2,32.6c0,0.9-1,1.5-2.2,1.5h-6c-1.2,0-2.2-0.7-2.2-1.5v-4.3c0-0.9,1-1.5,2.2-1.5h6
c1.2,0,2.2,0.7,2.2,1.5V32.6z M37.2,32.6c0,0.9-1,1.5-2.2,1.5h-6c-1.2,0-2.2-0.7-2.2-1.5v-4.3c0-0.9,1-1.5,2.2-1.5h6
c1.2,0,2.2,0.7,2.2,1.5V32.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 489 KiB

View file

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

71
header.css Normal file
View file

@ -0,0 +1,71 @@
:root {
--cap-y-offset: 3px;
}
#header-container {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 60px;
padding: 0;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 0;
padding: 0;
position: relative;
height: 100px;
}
.header .logo {
width: 300px;
height: auto;
display: block;
position: relative;
z-index: 5;
}
.header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
}
.header-end-cap {
width: 100%;
height: auto;
display: block;
position: absolute;
top: 100%;
left: 0;
transform: translateY(calc(-50% + var(--cap-y-offset)));
z-index: 4;
}
@media screen and (max-width: 768px) {
.header {
height: 90px;
}
.header .logo {
width: 260px;
}
#header-container {
margin-bottom: 50px;
}
.header-end-cap {
width: 100% !important;
min-width: 100%;
}
}

View file

@ -1,3 +1,4 @@
<div class="header">
<img src="/assets/SplatNetLogo.png" class="logo" alt="SplatNet Logo" />
<img src="/assets/en/ui/SplatNetLogo.png" class="logo" alt="SplatNet Logo" />
<img src="/assets/en/svg/ui/bg_header_wave-59d556a181d6146620e75ca3adea5b61bd175820334270a7828974276cb6765f.svg" class="header-end-cap" alt="Support End" />
</div>

View file

@ -1,38 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta property="og:site_name" content="SplatNet - Splatoon's multiplayer service hub"/>
<meta property="og:title" content="SplatNet - Splatoon's multiplayer service hub"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="SplatNet is an online service enabling interaction between players of Splatoon. Players can recruit others to play with them and check the play information and ranking of their friends."/>
<meta property="og:url" content="https://wompwomp.ink"/>
<meta property="og:image" content="https://wompwomp.ink/assets/facebook_image-f7cbb3f4687a632cf0a44be1e68a7676dbb52eaf2ebc4b207522418825078203.jpg"/>
<div id="squid-container">
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
</div>
<meta charset="UTF-8" />
<title>SplatNet - Splatoon's multiplayer service hub</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="header.css" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="header-container"></div>
<div id="squid-container">
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
</div>
<div id="loading-overlay" class="loading-overlay">
<canvas id="loading-canvas" width="100" height="100"></canvas>
<div id="loading-text">Loading</div>
</div>
<div class="content">
<img src="/assets/stageinfo.png" class="stage-info" alt="Stage Info" />
<div class="stage-info-text">
Use the stage information to guide your weapon strategy and battle strategy!
<div id="loading-text">
<img src="/assets/en/svg/text/wait/tx_loading-dccf3fb801ca859f2d17992f5cd7da62995c1fe81a306dd103398ef7c0e25b70.svg" alt="Loading">
</div>
<div class="stages-container" id="stages-container"></div>
</div>
<div class="main-wrapper">
<div class="content">
<div id="header-container"></div>
<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_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
<img class="label-layer" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
</div>
</div>
<div class="stage-info-text">
Use the stage information to guide your weapon strategy and battle strategy!
</div>
<div class="stages-container" id="stages-container"></div>
</div>
</div>
</div>
<script>
fetch("/header.html")
fetch("../header.html")
.then(res => res.text())
.then(html => {
document.getElementById("header-container").innerHTML = html;

View file

@ -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]);
}
@ -52,7 +69,7 @@ function animateLoadingCanvas() {
if (!canvas || !loadingOverlay) return;
const ctx = canvas.getContext("2d");
const image = new Image();
image.src = "/assets/loading.png";
image.src = "/assets/en/loading/@2x-se6335ab797-cb27d69f23a4d1112bc2a0d272538f39dd3017be20e5f2e3f4a460bd0071b68d.png";
const frameWidth = 100;
const frameHeight = 100;
const totalFrames = 17;
@ -89,7 +106,6 @@ function animateLoadingCanvas() {
};
}
//pain in the ass to implement. im proud of ts
const canvas = document.getElementById("squid-canvas");
const ctx = canvas.getContext("2d");
const frameWidth = 64;
@ -118,7 +134,7 @@ for (let i = 0; i < squidCount; i++) {
let lastTimestamp = 0;
const image = new Image();
image.src = "/assets/squids.png";
image.src = "/assets/ika-8e075a29ff487983044303f98958fb8c852bc3e9ab07ee7597724b6c0aa4a5d7.png";
image.onload = () => {
function animate(timestamp = 0) {
@ -173,7 +189,7 @@ async function renderStages() {
loadingOverlay.style.display = "none";
}
if (!rotations.length) {
container.innerHTML = `<h2 class="error-message">Something went wrong! Try reloading the page. If this problem persists you may be ratelimited.</h2>`;
container.innerHTML = `<h2 class="error-message">Something went wrong! Try reloading the page.</h2>`;
return;
}
@ -183,52 +199,45 @@ async function renderStages() {
const optionsDate = { day: "2-digit", month: "2-digit" };
const optionsTime = { hour: "numeric", minute: "2-digit", hour12: true };
const timeZone = "Europe/Paris";
const formattedTime = `${rotation.startTime.toLocaleDateString("en-GB", {
...optionsDate,
timeZone,
})} at ${rotation.startTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST) ~ ${rotation.endTime.toLocaleDateString("en-GB", {
...optionsDate,
timeZone,
})} at ${rotation.endTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST)`;
const formattedTime = `${rotation.startTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.startTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST) ~ ${rotation.endTime.toLocaleDateString("en-GB", { ...optionsDate, timeZone })} at ${rotation.endTime.toLocaleTimeString("en-GB", { ...optionsTime, timeZone })} (CEST)`;
html += `
<div class="rotation-time">${formattedTime}</div>
<div class="stages-section">
<img class="mode-title" src="/assets/regular.svg" alt="Regular Battle">
<div class="mode-text">Regular Battle</div>
<div class="mode-header">
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_regular-54557ab86d0cba16cf002e6d299f87dccb41655de8a171d32928bfebda3f3692.svg" alt="Regular Battle">
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_regularmatch-2cee60cbe41a1594b8d5ef867138f99d843cfce6efe0c490a41632b2e99ec685.svg" alt="Regular Battle"></div>
</div>
<div class="stages">
${rotation.turf
.map(
(name) => `
<div class="stage-tile">
${rotation.turf.map(name => `
<div class="stage-item">
<img src="${stageImagePath(name)}" alt="${name}">
<div class="stage-title">${name}</div>
</div>
`
)
.join("")}
`).join("")}
</div>
</div>
<div class="stages-section">
<img class="mode-title" src="/assets/ranked.svg" alt="Ranked Battle">
<div class="mode-text">Ranked Battle</div>
<div class="mode-header">
<img class="mode-title" src="/assets/en/svg/ui/ico_stage_gachi-d2041f3d0fc360ad6c7c00dc4f5bfd1aa626a251d35af88c076b5498d8eb991d.svg" alt="Ranked Battle">
<div class="mode-text"><img src="/assets/en/svg/text/scene/stage/tx_gachimatch-08a066c73d4dcf466c435be611b996ffd7930d19d9a6a865b712cd5dd802534f.svg" alt="Ranked Battle"></div>
</div>
<div class="ranked-mode-labels">
<div class="battle-mode-text">Battle Mode</div>
<div class="battle-mode-text"><img src="/assets/en/svg/text/scene/stage/tx_rule-76cf0777fb715a9478f8b579512541f3f14ed834566e0b6e153834a57d726021.svg" alt="Battle Mode"></div>
<div class="ranked-mode-text">${rotation.ranked_mode}</div>
</div>
<div class="stages">
${rotation.ranked
.map(
(name) => `
<div class="stage-tile">
${rotation.ranked.map(name => `
<div class="stage-item">
<img src="${stageImagePath(name)}" alt="${name}">
<div class="stage-title">${name}</div>
</div>
`
)
.join("")}
`).join("")}
</div>
</div>
`;
@ -237,5 +246,6 @@ async function renderStages() {
container.innerHTML = html;
}
loadHeader();
animateLoadingCanvas();
renderStages();

View file

@ -1,232 +1,389 @@
@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 {
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-image: url("/assets/stage.png");
background-repeat: repeat;
background-size: 800px 800px;
}
/* HEADER */
.header {
position: relative;
height: 150px;
background-color: black;
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%
);
}
.logo {
max-height: 120px;
z-index: 2;
}
/* MAIN CONTENT */
.content {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 24px;
min-height: 100vh;
background-image: url("/assets/en/bg/@2x/bg_stage-e8fe89423bce5899a3edea3884841d9eed10a3099b29482277d0dbd4a25d8b9e.png");
background-repeat: repeat;
background-size: 800px 800px;
background-attachment: fixed;
}
.stage-info {
width: 65%;
max-width: 600px;
height: auto;
margin-bottom: 20px;
}
/* STAGES */
.stages-container {
.main-wrapper {
display: flex;
justify-content: center;
width: 100%;
max-width: 400px;
background: transparent;
overflow-x: hidden;
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
box-sizing: border-box;
max-width: 100vw;
}
.logo-left-align {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 20px;
margin-left: 0;
gap: 20px;
}
#stage-header-logo {
position: relative;
width: 400px;
height: 80px;
cursor: default;
pointer-events: none;
flex-shrink: 0;
}
#stage-header-logo .bg-layer {
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;
}
#stage-header-logo .label-layer {
position: absolute;
width: 200px;
left: 110px;
top: 45%;
transform: translateY(-50%);
z-index: 2;
}
.stage-info-text {
margin: 0 auto;
padding-top: 0px;
max-width: 1200px;
text-align: center;
color: white;
font-family: "Regular", sans-serif;
font-size: 24px;
line-height: 1.3;
}
.stages-container {
width: 100%;
max-width: 900px;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
padding-bottom: 40px;
}
.stages-section {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
gap: 14px;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 14px;
padding: 16px 18px 20px;
padding: 20px;
box-sizing: border-box;
}
.mode-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
}
.mode-title {
display: block;
max-width: 120px;
height: auto;
margin: 20px;
}
.mode-text {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mode-text img {
height: 60px;
width: auto;
display: block;
}
.stages {
display: flex;
flex-direction: column;
gap: 16px;
flex-direction: row;
gap: 18px;
width: 100%;
justify-content: center;
}
.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;
margin-top: 6px;
font-size: 28px;
color: white;
.stage-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
max-width: 400px;
}
.stages img {
width: 100%;
height: auto;
display: block;
margin: 20px 0;
margin-bottom: 10px;
}
.stage-title {
font-family: "Regular", sans-serif;
text-align: center;
font-size: 22px;
color: white;
margin: 0 0 15px 0;
}
.ranked-mode-labels {
text-align: center;
margin-bottom: 12px;
margin-bottom: 10px;
margin-top: 0;
}
.battle-mode-text {
font-family: "Splatoon1", sans-serif;
color: white;
font-size: 30px;
letter-spacing: 1px;
margin-bottom: 4px;
display: flex;
justify-content: center;
}
.battle-mode-text img {
height: 55px;
width: auto;
display: block;
}
.ranked-mode-text {
font-family: "Regular", sans-serif;
color: white;
font-size: 25px;
letter-spacing: 0.8px;
font-size: 22px;
letter-spacing: 0.7px;
text-align: center;
}
.rotation-time {
text-align: center;
color: white;
font-family: "Regular", sans-serif;
font-size: 33px;
margin: 36px 0 12px 0;
letter-spacing: 0.8px;
font-size: 28px;
margin: 28px 0 10px 0;
letter-spacing: 0.7px;
}
.error-message {
color: white;
font-family: "Splatoon1", sans-serif;
text-align: center;
margin-top: 40px;
}
.mode-title {
display: block;
margin: 4px auto;
max-width: 166px;
width: 80%;
height: auto;
}
.mode-text {
margin: 0 0 28px;
text-align: center;
color: white;
font-family: "Splatoon1", sans-serif;
font-size: 44px;
letter-spacing: 1.2px;
user-select: none;
margin-top: 30px;
}
.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: hidden;
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;
display: flex;
justify-content: center;
align-items: center;
}
#loading-text img {
height: 35px;
width: auto;
display: block;
}
/* spammed important here since browser didnt want to listen */
@media screen and (max-width: 768px) {
.content {
padding: 0;
width: 100%;
}
.stages-container {
width: 100%;
max-width: 100%;
padding: 0 10px 40px 10px;
box-sizing: border-box;
}
.stages-section {
border-radius: 0;
width: 100%;
border-radius: 14px;
}
.mode-header {
flex-direction: column !important;
gap: 5px !important;
}
.mode-title {
margin: 10px 0 0 0 !important;
max-width: 100px !important;
}
.mode-text img {
height: 50px !important;
}
.stages {
flex-direction: column !important;
align-items: center !important;
gap: 25px !important;
width: 100% !important;
}
.stage-item {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
.stages img {
margin-bottom: 5px !important;
border-radius: 0 !important;
}
#stage-header-logo {
margin-top: 60px !important;
margin-bottom: 30px !important;
transform: scale(0.8);
}
#stage-header-logo .bg-layer {
width: 400px !important;
}
#stage-header-logo .label-layer {
width: 200px !important;
left: 110px !important;
}
#stage-header-logo .icon-layer {
width: 65px !important;
left: 10px !important;
}
.stage-info-text {
margin: 0 auto;
padding: 10px;
max-width: 1200px;
text-align: center;
color: white;
font-family: "Regular", sans-serif;
font-size: 24px;
line-height: 1.3;
}
.rotation-time {
text-align: center;
color: white;
font-family: "Regular", sans-serif;
font-size: 28px;
margin: 28px 0 10px 0;
letter-spacing: 0.7px;
}
}