mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-04-02 07:06:18 -05:00
Merge branch 'dev' of https://github.com/PretendoNetwork/website into dev
This commit is contained in:
Jonathan Barrow
commit
2cf7e669da
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -60,4 +60,7 @@ typings/
|
|||
# keep config and blog posts out of this
|
||||
config.json
|
||||
static-text.json
|
||||
.DS_Store
|
||||
.DS_Store
|
||||
|
||||
# keep browserified files out
|
||||
*.bundled.js
|
||||
3145
package-lock.json
generated
3145
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -4,7 +4,7 @@
|
|||
"description": "",
|
||||
"main": "src/server.js",
|
||||
"scripts": {
|
||||
"start": "node src/server.js"
|
||||
"start": "browserify ./public/assets/js/miieditor.js -o ./public/assets/js/miieditor.bundled.js && node src/server.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
"homepage": "https://github.com/PretendoNetwork/website#readme",
|
||||
"dependencies": {
|
||||
"adm-zip": "^0.5.9",
|
||||
"browserify": "^17.0.0",
|
||||
"colors": "^1.4.0",
|
||||
"cookie-parser": "^1.4.5",
|
||||
"discord-oauth2": "github:ryanblenis/discord-oauth2",
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
"fs-extra": "^9.1.0",
|
||||
"got": "^11.8.2",
|
||||
"gray-matter": "^4.0.3",
|
||||
"kaitai-struct": "^0.9.0",
|
||||
"marked": "^3.0.4",
|
||||
"morgan": "^1.10.0",
|
||||
"trello": "^0.11.0",
|
||||
|
|
|
|||
252
public/assets/css/miieditor.css
Normal file
252
public/assets/css/miieditor.css
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
body,
|
||||
div.main-body,
|
||||
.miieditor-wrapper {
|
||||
z-index: -1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
svg.logotype {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
top:42px;
|
||||
left:162px;
|
||||
}
|
||||
|
||||
.miieditor-wrapper {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
background: #0d0f20;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
gap: 0 48px;
|
||||
}
|
||||
|
||||
.miieditor-wrapper::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: radial-gradient(closest-side, #161d40 0%, transparent 100%);
|
||||
width: 200vh;
|
||||
height: 200vh;
|
||||
top: -100vh;
|
||||
left: -100vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
div.mii-img-wrapper {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
max-width: 512px;
|
||||
width: 26vw;
|
||||
height: auto;
|
||||
}
|
||||
img#mii-img {
|
||||
position: relative;
|
||||
width: 512px;
|
||||
height: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
div.mii-img-wrapper .shadow {
|
||||
position: absolute;
|
||||
bottom: -18px;
|
||||
left: 6px;
|
||||
height: 72px;
|
||||
width: 512px;
|
||||
background: #1a214c;
|
||||
background: radial-gradient(farthest-side, #1a214c 0%, transparent 100%);
|
||||
}
|
||||
|
||||
div.params-wrapper {
|
||||
position: relative;
|
||||
overflow-x: visible;
|
||||
margin: auto;
|
||||
margin-top: 150px;
|
||||
margin-right: 100px;
|
||||
display: grid;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
div.tabs {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
width: fit-content;
|
||||
gap: 2px;
|
||||
background: #0A0C19;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
div.tabs .tabbtn {
|
||||
min-width: 42px;
|
||||
min-height: 42px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
color: var(--text);
|
||||
}
|
||||
div.tabs .tabbtn:hover,
|
||||
div.tabs .tabbtn.active {
|
||||
background: #1d203d;
|
||||
}
|
||||
|
||||
div.subtabs {
|
||||
position: relative;
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
div.subtabs .subtabbtn {
|
||||
position: relative;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
color: var(--text);
|
||||
}
|
||||
div.subtabs .subtabbtn.active::before,
|
||||
div.subtabs .subtabbtn.active:hover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: #9D6FF3;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.subtab.has-sliders {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
form.params {
|
||||
grid-template-columns: repeat(2, auto);
|
||||
}
|
||||
form.params .tab {
|
||||
display: none;
|
||||
grid-template-columns: 534px 258px;
|
||||
gap: 48px;
|
||||
}
|
||||
form.params .tab.active {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
appearance: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 18px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
grid-row: 2;
|
||||
}
|
||||
fieldset.active {
|
||||
display: grid;
|
||||
}
|
||||
fieldset.color {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
display: grid;
|
||||
grid-column: 2;
|
||||
}
|
||||
fieldset input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
fieldset input[type="radio"] + label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 18px;
|
||||
background: #393b5f;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
fieldset input[type="radio"]:checked + label {
|
||||
background: #3f4480;
|
||||
font-weight: bold;
|
||||
box-shadow: inset 0 0 0 4px #9D70F1;
|
||||
}
|
||||
fieldset.color input[type="radio"]:checked + label {
|
||||
box-shadow: inset 0 0 0 4px #9D70F1, inset 0 0 0 6px #181B33;
|
||||
}
|
||||
div.colorSidebar {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
fieldset.has-subpages.active {
|
||||
display: block;
|
||||
}
|
||||
fieldset.has-subpages .subpage {
|
||||
display: none;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 18px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
fieldset.has-subpages .subpage.active {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
input[type="range"].invert {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
width: max-content;
|
||||
grid-column: 3 / span 2;
|
||||
grid-row: 4;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.pagination .current-page-index {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
color: var(--text);
|
||||
width: 18px;
|
||||
margin-right: 0.7ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-btn svg{
|
||||
height: 36px;
|
||||
margin: 6px
|
||||
}
|
||||
.page-btn.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.page-btn.disabled svg path {
|
||||
fill: #393B5F;
|
||||
}
|
||||
|
||||
button * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.miieditor-wrapper::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #181B33;
|
||||
border-radius: 100%;
|
||||
width: 1308px;
|
||||
height: 1707px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: -200px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
214
public/assets/js/MiiClass.js
Normal file
214
public/assets/js/MiiClass.js
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
// Fetched from https://github.com/PretendoNetwork/account/blob/master/src/mii.js on 2021-12-16
|
||||
|
||||
const KaitaiStream = require('kaitai-struct/KaitaiStream');
|
||||
|
||||
class Mii extends KaitaiStream {
|
||||
constructor(arrayBuffer, byteOffset) {
|
||||
super(arrayBuffer, byteOffset);
|
||||
|
||||
this.decode();
|
||||
}
|
||||
|
||||
decode() {
|
||||
// Decode raw data
|
||||
// A lot of this goes unused
|
||||
this.unknown1 = this.readU1();
|
||||
this.characterSet = this.readBitsIntBe(2);
|
||||
this.regionLock = this.readBitsIntBe(2);
|
||||
this.profanityFlag = this.readBitsIntBe(1) !== 0;
|
||||
this.copying = this.readBitsIntBe(1) !== 0;
|
||||
this.unknown2 = this.readBitsIntBe(2);
|
||||
this.slotIndex = this.readBitsIntBe(4);
|
||||
this.pageIndex = this.readBitsIntBe(4);
|
||||
this.version = this.readBitsIntBe(4);
|
||||
this.unknown3 = this.readBitsIntBe(4);
|
||||
this.systemId = Array(8).fill().map(() => this.readU1());
|
||||
this.avatarId = Array(4).fill().map(() => this.readU1());
|
||||
this.clientId = Array(6).fill().map(() => this.readU1());
|
||||
this.padding = this.readU2le();
|
||||
this.miiMetaData = this.readU2le();
|
||||
this.miiName = Buffer.from(this.readBytes(20)).toString('utf16le');
|
||||
this.height = this.readU1();
|
||||
this.build = this.readU1();
|
||||
this.faceColor = this.readBitsIntBe(3);
|
||||
this.faceType = this.readBitsIntBe(4);
|
||||
this.mingle = this.readBitsIntBe(1) !== 0;
|
||||
this.faceMakeup = this.readBitsIntBe(4);
|
||||
this.faceWrinkles = this.readBitsIntBe(4);
|
||||
this.alignToByte();
|
||||
this.hairType = this.readU1();
|
||||
this.unknown5 = this.readBitsIntBe(4);
|
||||
this.hairFlip = this.readBitsIntBe(1) !== 0;
|
||||
this.hairColor = this.readBitsIntBe(3);
|
||||
this.alignToByte();
|
||||
this.eyeData = this.readU4le();
|
||||
this.eyebrowData = this.readU4le();
|
||||
this.noseData = this.readU2le();
|
||||
this.mouthData = this.readU2le();
|
||||
this.mouthData2 = this.readU2le();
|
||||
this.facialHairData = this.readU2le();
|
||||
this.glassesData = this.readU2le();
|
||||
this.moleData = this.readU2le();
|
||||
this.creatorName = Buffer.from(this.readBytes(20)).toString('utf16le');
|
||||
this.padding2 = this.readU2le();
|
||||
this.checksum = this.readU2le();
|
||||
|
||||
// Carve out more specific data from the above values
|
||||
// TODO: read these bits directly instead of getting them later
|
||||
|
||||
this.gender = (this.miiMetaData & 1);
|
||||
this.birthMonth = ((this.miiMetaData >> 1) & 15);
|
||||
this.birthDay = ((this.miiMetaData >> 5) & 31);
|
||||
this.favoriteColor = ((this.miiMetaData >> 10) & 15);
|
||||
this.favorite = ((this.miiMetaData >> 14) & 1);
|
||||
|
||||
this.eyeType = (this.eyeData & 63);
|
||||
this.eyeColor = ((this.eyeData >> 6) & 7);
|
||||
this.eyeSize = ((this.eyeData >> 9) & 7);
|
||||
this.eyeStretch = ((this.eyeData >> 13) & 7);
|
||||
this.eyeRotation = ((this.eyeData >> 16) & 31);
|
||||
this.eyeHorizontal = ((this.eyeData >> 21) & 15);
|
||||
this.eyeVertical = ((this.eyeData >> 25) & 31);
|
||||
|
||||
this.eyebrowType = (this.eyebrowData & 31);
|
||||
this.eyebrowColor = ((this.eyebrowData >> 5) & 7);
|
||||
this.eyebrowSize = ((this.eyebrowData >> 8) & 15);
|
||||
this.eyebrowStretch = ((this.eyebrowData >> 12) & 7);
|
||||
this.eyebrowRotation = ((this.eyebrowData >> 16) & 15);
|
||||
this.eyebrowHorizontal = ((this.eyebrowData >> 21) & 15);
|
||||
this.eyebrowVertical = ((this.eyebrowData >> 25) & 31);
|
||||
|
||||
this.noseType = (this.noseData & 31);
|
||||
this.noseSize = ((this.noseData >> 5) & 15);
|
||||
this.noseVertical = ((this.noseData >> 9) & 31);
|
||||
|
||||
|
||||
this.mouthType = (this.mouthData & 63);
|
||||
this.mouthColor = ((this.mouthData >> 6) & 7);
|
||||
this.mouthSize = ((this.mouthData >> 9) & 15);
|
||||
this.mouthStretch = ((this.mouthData >> 13) & 7);
|
||||
|
||||
this.mouthVertical = (this.mouthData2 & 31);
|
||||
this.facialHairMustache = ((this.mouthData2 >> 5) & 7);
|
||||
|
||||
this.facialHairType = (this.facialHairData & 7);
|
||||
this.facialHairColor = ((this.facialHairData >> 3) & 7);
|
||||
this.facialHairSize = ((this.facialHairData >> 6) & 15);
|
||||
this.facialHairVertical = ((this.facialHairData >> 10) & 31);
|
||||
|
||||
this.glassesType = (this.glassesData & 15);
|
||||
this.glassesColor = (this.glassesData >> 4) & 7;
|
||||
this.glassesSize = (this.glassesData >> 7) & 15;
|
||||
this.glassesVertical = (this.glassesData >> 11) & 15;
|
||||
|
||||
this.moleEnable = (this.moleData >> 15);
|
||||
this.moleSize = ((this.moleData >> 1) & 15);
|
||||
this.moleHorizontal = ((this.moleData >> 5) & 31);
|
||||
this.moleVertical = ((this.moleData >> 10) & 31);
|
||||
}
|
||||
|
||||
toStudioMii() {
|
||||
/*
|
||||
Can also disable randomization with:
|
||||
let miiStudioData = Buffer.alloc(0x2F);
|
||||
let next = 256;
|
||||
and removing "randomizer" and the "miiStudioData.writeUInt8(randomizer);" call
|
||||
*/
|
||||
const miiStudioData = Buffer.alloc(0x2F);
|
||||
const randomizer = Math.floor(256 * Math.random());
|
||||
let next = randomizer;
|
||||
let pos = 1;
|
||||
|
||||
function encodeMiiPart(partValue) {
|
||||
const encoded = (7 + (partValue ^ next)) % 256;
|
||||
next = encoded;
|
||||
|
||||
miiStudioData.writeUInt8(encoded, pos);
|
||||
pos++;
|
||||
}
|
||||
|
||||
miiStudioData.writeUInt8(randomizer);
|
||||
|
||||
if (this.facialHairColor === 0) {
|
||||
encodeMiiPart(8);
|
||||
} else {
|
||||
encodeMiiPart(this.facialHairColor);
|
||||
}
|
||||
|
||||
encodeMiiPart(this.facialHairType);
|
||||
encodeMiiPart(this.build);
|
||||
encodeMiiPart(this.eyeStretch);
|
||||
encodeMiiPart(this.eyeColor + 8);
|
||||
encodeMiiPart(this.eyeRotation);
|
||||
encodeMiiPart(this.eyeSize);
|
||||
encodeMiiPart(this.eyeType);
|
||||
encodeMiiPart(this.eyeHorizontal);
|
||||
encodeMiiPart(this.eyeVertical);
|
||||
encodeMiiPart(this.eyebrowStretch);
|
||||
|
||||
if (this.eyebrowColor === 0) {
|
||||
encodeMiiPart(8);
|
||||
} else {
|
||||
encodeMiiPart(this.eyebrowColor);
|
||||
}
|
||||
|
||||
encodeMiiPart(this.eyebrowRotation);
|
||||
encodeMiiPart(this.eyebrowSize);
|
||||
encodeMiiPart(this.eyebrowType);
|
||||
encodeMiiPart(this.eyebrowHorizontal);
|
||||
encodeMiiPart(this.eyebrowVertical);
|
||||
encodeMiiPart(this.faceColor);
|
||||
encodeMiiPart(this.faceMakeup);
|
||||
encodeMiiPart(this.faceType);
|
||||
encodeMiiPart(this.faceWrinkles);
|
||||
encodeMiiPart(this.favoriteColor);
|
||||
encodeMiiPart(this.gender);
|
||||
|
||||
if (this.glassesColor == 0) {
|
||||
encodeMiiPart(8);
|
||||
} else if (this.glassesColor < 6) {
|
||||
encodeMiiPart(this.glassesColor + 13);
|
||||
} else {
|
||||
encodeMiiPart(0);
|
||||
}
|
||||
|
||||
encodeMiiPart(this.glassesSize);
|
||||
encodeMiiPart(this.glassesType);
|
||||
encodeMiiPart(this.glassesVertical);
|
||||
|
||||
if (this.hairColor == 0) {
|
||||
encodeMiiPart(8);
|
||||
} else {
|
||||
encodeMiiPart(this.hairColor);
|
||||
}
|
||||
|
||||
encodeMiiPart(this.hairFlip ? 1 : 0);
|
||||
encodeMiiPart(this.hairType);
|
||||
encodeMiiPart(this.height);
|
||||
encodeMiiPart(this.moleSize);
|
||||
encodeMiiPart(this.moleEnable);
|
||||
encodeMiiPart(this.moleHorizontal);
|
||||
encodeMiiPart(this.moleVertical);
|
||||
encodeMiiPart(this.mouthStretch);
|
||||
|
||||
if (this.mouthColor < 4) {
|
||||
encodeMiiPart(this.mouthColor + 19);
|
||||
} else {
|
||||
encodeMiiPart(0);
|
||||
}
|
||||
|
||||
encodeMiiPart(this.mouthSize);
|
||||
encodeMiiPart(this.mouthType);
|
||||
encodeMiiPart(this.mouthVertical);
|
||||
encodeMiiPart(this.facialHairSize);
|
||||
encodeMiiPart(this.facialHairMustache);
|
||||
encodeMiiPart(this.facialHairVertical);
|
||||
encodeMiiPart(this.noseSize);
|
||||
encodeMiiPart(this.noseType);
|
||||
encodeMiiPart(this.noseVertical);
|
||||
|
||||
return miiStudioData;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Mii;
|
||||
202
public/assets/js/miieditor.js
Normal file
202
public/assets/js/miieditor.js
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
// This file gets automatically bundled with browserify when running the start script. This also means that after any update you're gonna need to restart the server.
|
||||
|
||||
// Prevent the user from reloading or leaving the page
|
||||
window.addEventListener('beforeunload', function (e) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
});
|
||||
|
||||
|
||||
const Mii = require('./MiiClass.js');
|
||||
|
||||
// MII RENDERER
|
||||
|
||||
// The Mii data is stored in a script tag in the HTML, so we can just grab it and then remove the element
|
||||
const encodedUserMiiData = document.querySelector(
|
||||
'script#encodedUserMiiData'
|
||||
).textContent;
|
||||
document.querySelector('script#encodedUserMiiData').remove();
|
||||
|
||||
// We initialize the Mii object with the encoded data and render the Mii
|
||||
const mii = new Mii(Buffer.from(encodedUserMiiData, 'base64'));
|
||||
renderMii();
|
||||
|
||||
// This function renders the Mii on the page
|
||||
function renderMii(type) {
|
||||
type = type || 'all_body'; // Can be 'all_body' or 'face'
|
||||
|
||||
const newMii = mii.toStudioMii().toString('hex');
|
||||
document.querySelector(
|
||||
'img#mii-img'
|
||||
).src = `https://studio.mii.nintendo.com/miis/image.png?data=${newMii}&type=${type}&expression=normal&width=512&bgColor=CAB1FB00`;
|
||||
|
||||
// This updates the offset of the shadow of the Mii
|
||||
document.querySelector('div.mii-img-wrapper .shadow').style.bottom = `${
|
||||
mii.height * mii.height * 0.0035 - mii.height * 0.162 - 18
|
||||
}px`;
|
||||
}
|
||||
|
||||
// This function updates a prop of the Mii and rerenders it
|
||||
function updateMii(e, type) {
|
||||
const prop = e.target.name;
|
||||
const value = e.target.value;
|
||||
mii[prop] = parseInt(value);
|
||||
console.log(mii);
|
||||
renderMii(type);
|
||||
}
|
||||
|
||||
document.querySelectorAll('fieldset').forEach((fieldset) => {
|
||||
fieldset.addEventListener('change', (e) => updateMii(e));
|
||||
});
|
||||
|
||||
document.querySelectorAll('input[type=\'range\']').forEach((fieldset) => {
|
||||
fieldset.addEventListener('input', (e) => updateMii(e));
|
||||
});
|
||||
|
||||
// FORM
|
||||
|
||||
// Here we preselect the options corresponding to the Mii's current values
|
||||
[
|
||||
'faceType',
|
||||
'faceColor',
|
||||
'faceMakeup',
|
||||
'faceWrinkles',
|
||||
'hairType',
|
||||
'hairColor',
|
||||
'eyebrowType',
|
||||
'eyebrowColor',
|
||||
'eyeType',
|
||||
'eyeColor',
|
||||
'noseType',
|
||||
'mouthType',
|
||||
'mouthColor',
|
||||
'glassesType',
|
||||
'glassesColor',
|
||||
'facialHairType',
|
||||
'facialHairColor',
|
||||
'facialHairMustache',
|
||||
'moleEnable',
|
||||
'gender',
|
||||
'favoriteColor'
|
||||
].forEach((prop) => {
|
||||
document.querySelector(`#${prop}${mii[prop]}`).checked = true;
|
||||
});
|
||||
|
||||
[
|
||||
'eyebrowVertical',
|
||||
'eyebrowHorizontal',
|
||||
'eyebrowRotation',
|
||||
'eyebrowSize',
|
||||
'eyebrowStretch',
|
||||
'eyeVertical',
|
||||
'eyeHorizontal',
|
||||
'eyeRotation',
|
||||
'eyeSize',
|
||||
'eyeStretch',
|
||||
'noseVertical',
|
||||
'noseSize',
|
||||
'glassesVertical',
|
||||
'glassesSize',
|
||||
'facialHairVertical',
|
||||
'facialHairSize',
|
||||
'moleVertical',
|
||||
'moleHorizontal',
|
||||
'moleSize',
|
||||
'height',
|
||||
'build'
|
||||
].forEach((prop) => {
|
||||
document.querySelector(`#${prop}`).value = mii[prop];
|
||||
});
|
||||
|
||||
|
||||
// TABS, SUBTABS, AND ALL THE INHERENT JANK
|
||||
|
||||
function openTab(e, tabType) {
|
||||
e.preventDefault();
|
||||
|
||||
// Deselect all subpages
|
||||
document.querySelectorAll('.subtab.has-subpages .subpage.active').forEach((el) => {
|
||||
el.classList?.remove('active');
|
||||
});
|
||||
document.querySelectorAll('.subtab.active').forEach((el) => {
|
||||
el.classList?.remove('active');
|
||||
});
|
||||
|
||||
const buttonReplacement = tabType.charAt(0).toUpperCase() + tabType.slice(1);
|
||||
|
||||
document.querySelectorAll(`.${tabType}.active`).forEach(el => {
|
||||
el?.classList?.remove('active');
|
||||
});
|
||||
document.querySelectorAll(`.${tabType}btn.active`).forEach(el => {
|
||||
el?.classList?.remove('active');
|
||||
});
|
||||
|
||||
const elementID = e.target?.id;
|
||||
document.querySelector(`#${elementID}`).classList.add('active');
|
||||
const selectedID = elementID
|
||||
.replace('SubButton', '')
|
||||
.replace('Button', buttonReplacement);
|
||||
document.querySelector(`#${selectedID}`).classList.add('active');
|
||||
|
||||
if (tabType === 'tab') {
|
||||
// Click the first subtab button, if there is one
|
||||
document.querySelector(`#${selectedID} .subtabbtn`)?.click();
|
||||
}
|
||||
|
||||
// We hide all subpages
|
||||
document.querySelectorAll('.subpage').forEach((el) => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
// Selects the first subpage if there is one
|
||||
document
|
||||
.querySelector(`#${selectedID} .subpage`)
|
||||
?.classList?.add('active');
|
||||
}
|
||||
|
||||
// Here we bind all of the functions to the corresponding buttons
|
||||
document.querySelectorAll('.tabs button.tabbtn').forEach((el) => {
|
||||
el.addEventListener('click', (e) => openTab(e, 'tab'));
|
||||
});
|
||||
document.querySelectorAll('.subtabs button.subtabbtn').forEach((el) => {
|
||||
el.addEventListener('click', (e) => openTab(e, 'subtab'));
|
||||
});
|
||||
|
||||
// SUBPAGES
|
||||
|
||||
function paginationHandler(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// We hide all subpages
|
||||
document.querySelectorAll('.subpage').forEach((el) => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
// We get the current subpage
|
||||
const currentPageIndex = parseInt(
|
||||
e.target.classList[2].replace('index-', '')
|
||||
);
|
||||
let newPageIndex = currentPageIndex;
|
||||
|
||||
// We calculate the new subpage
|
||||
if (e.target.classList.contains('next')) {
|
||||
newPageIndex += 1;
|
||||
} else {
|
||||
newPageIndex -= 1;
|
||||
}
|
||||
|
||||
// We find the new subpage and activate it
|
||||
e.target.parentNode.parentNode.parentNode.children[
|
||||
newPageIndex
|
||||
].classList.add('active');
|
||||
}
|
||||
|
||||
// This adds 1 to the rendered page indexes to make them start from 1 instead of 0
|
||||
document.querySelectorAll('span.current-page-index').forEach((el) => {
|
||||
el.textContent = parseInt(el.textContent) + 1;
|
||||
});
|
||||
|
||||
// Here we bind the functions to the corresponding buttons
|
||||
document.querySelectorAll('button.page-btn').forEach((el) => {
|
||||
el.addEventListener('click', paginationHandler);
|
||||
});
|
||||
|
|
@ -436,4 +436,62 @@ router.get('/online-files', async (request, response) => {
|
|||
response.end(onlineFiles.toBuffer());
|
||||
});
|
||||
|
||||
router.get('/miieditor', async (request, response) => {
|
||||
|
||||
const reqLocale = request.locale;
|
||||
const locale = util.getLocale(reqLocale.region, reqLocale.language);
|
||||
|
||||
// Should obviously be the user's
|
||||
const encodedUserMiiData = 'AwAAQOlVognnx0GC2X0LLQOzuI0n2QAAAUBiAGUAbABsAGEAAABFAAAAAAAAAEBAEgCBAQRoQxggNEYUgRIXaA0AACkDUkhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP6G';
|
||||
|
||||
// Adapted from https://www.3dbrew.org/wiki/Mii#Mapped_Editor_.3C-.3E_Hex_values
|
||||
|
||||
const editorToHex = {
|
||||
'face': [
|
||||
0x00,0x01,0x08,0x02,0x03,0x09,0x04,0x05,0x0a,0x06,0x07,0x0b
|
||||
],
|
||||
'hairs': [
|
||||
[0x21,0x2f,0x28,0x25,0x20,0x6b,0x30,0x33,0x37,0x46,0x2c,0x42],
|
||||
[0x34,0x32,0x26,0x31,0x2b,0x1f,0x38,0x44,0x3e,0x73,0x4c,0x77],
|
||||
[0x40,0x51,0x74,0x79,0x16,0x3a,0x3c,0x57,0x7d,0x75,0x49,0x4b],
|
||||
[0x2a,0x59,0x39,0x36,0x50,0x22,0x17,0x56,0x58,0x76,0x27,0x24],
|
||||
[0x2d,0x43,0x3b,0x41,0x29,0x1e,0x0c,0x10,0x0a,0x52,0x80,0x81],
|
||||
[0x0e,0x5f,0x69,0x64,0x06,0x14,0x5d,0x66,0x1b,0x04,0x11,0x6e],
|
||||
[0x7b,0x08,0x6a,0x48,0x03,0x15,0x00,0x62,0x3f,0x5a,0x0b,0x78],
|
||||
[0x05,0x4a,0x6c,0x5e,0x7c,0x19,0x63,0x45,0x23,0x0d,0x7a,0x71],
|
||||
[0x35,0x18,0x55,0x53,0x47,0x83,0x60,0x65,0x1d,0x07,0x0f,0x70],
|
||||
[0x4f,0x01,0x6d,0x7f,0x5b,0x1a,0x3d,0x67,0x02,0x4d,0x12,0x5c],
|
||||
[0x54,0x09,0x13,0x82,0x61,0x68,0x2e,0x4e,0x1c,0x72,0x7e,0x6f]
|
||||
],
|
||||
'eyebrows': [
|
||||
[0x06,0x00,0x0c,0x01,0x09,0x13,0x07,0x15,0x08,0x11,0x05,0x04],
|
||||
[0x0b,0x0a,0x02,0x03,0x0e,0x14,0x0f,0x0d,0x16,0x12,0x10,0x17]
|
||||
],
|
||||
'eyes': [
|
||||
[0x02,0x04,0x00,0x08,0x27,0x11,0x01,0x1a,0x10,0x0f,0x1b,0x14],
|
||||
[0x21,0x0b,0x13,0x20,0x09,0x0c,0x17,0x22,0x15,0x19,0x28,0x23],
|
||||
[0x05,0x29,0x0d,0x24,0x25,0x06,0x18,0x1e,0x1f,0x12,0x1c,0x2e],
|
||||
[0x07,0x2c,0x26,0x2a,0x2d,0x1d,0x03,0x2b,0x16,0x0a,0x0e,0x2f],
|
||||
[0x30,0x31,0x32,0x35,0x3b,0x38,0x36,0x3a,0x39,0x37,0x33,0x34]
|
||||
],
|
||||
'nose': [
|
||||
[0x01,0x0a,0x02,0x03,0x06,0x00, 0x05,0x04,0x08,0x09,0x07,0x0B],
|
||||
[0x0d,0x0e,0x0c,0x11,0x10,0x0f]
|
||||
],
|
||||
'mouth': [
|
||||
[0x17,0x01,0x13,0x15,0x16,0x05,0x00,0x08,0x0a,0x10,0x06,0x0d],
|
||||
[0x07,0x09,0x02,0x11,0x03,0x04,0x0f,0x0b,0x14,0x12,0x0e,0x0c],
|
||||
[0x1b,0x1e,0x18,0x19,0x1d,0x1c,0x1a,0x23,0x1f,0x22,0x21,0x20]
|
||||
]
|
||||
};
|
||||
|
||||
response.render('account/miieditor', {
|
||||
layout: 'main',
|
||||
locale,
|
||||
localeString: reqLocale.toString(),
|
||||
encodedUserMiiData,
|
||||
editorToHex
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
639
views/account/miieditor.handlebars
Normal file
639
views/account/miieditor.handlebars
Normal file
|
|
@ -0,0 +1,639 @@
|
|||
<link rel="stylesheet" href="/assets/css/miieditor.css" />
|
||||
<div class="miieditor-wrapper">
|
||||
|
||||
<svg class="logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 39.876" preserveAspectRatio="xMinYMin meet">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
||||
<g id="XMLID_6_" transform="translate(8.222 1.418)">
|
||||
<path id="XMLID_15_"
|
||||
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
|
||||
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
|
||||
<path id="XMLID_14_"
|
||||
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
|
||||
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
|
||||
<path id="XMLID_9_"
|
||||
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
|
||||
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
|
||||
</g>
|
||||
</g>
|
||||
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
|
||||
font-family="Poppins-Bold, Poppins" font-weight="700">
|
||||
<tspan x="0" y="0">Pretendo</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="mii-img-wrapper">
|
||||
<img id="mii-img" draggable="false" />
|
||||
<div class="shadow"></div>
|
||||
</div>
|
||||
|
||||
<div class="params-wrapper">
|
||||
<div class="tabs">
|
||||
<button class="tabbtn active" id="faceTypeButton">
|
||||
face
|
||||
</button>
|
||||
<button class="tabbtn" id="hairTypeButton">
|
||||
hair
|
||||
</button>
|
||||
<button class="tabbtn" id="eyebrowTypeButton">
|
||||
eyebrow
|
||||
</button>
|
||||
<button class="tabbtn" id="eyeTypeButton">
|
||||
eye
|
||||
</button>
|
||||
<button class="tabbtn" id="noseTypeButton">
|
||||
nose
|
||||
</button>
|
||||
<button class="tabbtn" id="mouthTypeButton">
|
||||
mouth
|
||||
</button>
|
||||
<button class="tabbtn" id="glassesTypeButton">
|
||||
glasses
|
||||
</button>
|
||||
<button class="tabbtn" id="facialHairTypeButton">
|
||||
facialHair
|
||||
</button>
|
||||
<button class="tabbtn" id="moleEnableButton">
|
||||
mole
|
||||
</button>
|
||||
<button class="tabbtn" id="sizeButton">
|
||||
size
|
||||
</button>
|
||||
<button class="tabbtn" id="miiscButton">
|
||||
miisc
|
||||
</button>
|
||||
</div>
|
||||
<form class="params">
|
||||
<div class="tab active" id="faceTypeTab">
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="faceTypeSubButton">
|
||||
faceType
|
||||
</button>
|
||||
<button class="subtabbtn" id="faceMakeupSubButton">
|
||||
faceMakeup
|
||||
</button>
|
||||
<button class="subtabbtn" id="faceWrinklesSubButton">
|
||||
faceWrinkles
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<fieldset class="subtab active" id="faceType">
|
||||
{{#each editorToHex.face}}
|
||||
<input type="radio" name="faceType" id="faceType{{this}}" value="{{this}}" />
|
||||
<label for="faceType{{this}}">{{this}}</label>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="faceColor" class="color">
|
||||
<input type="radio" name="faceColor" id="faceColor0" value="0" />
|
||||
<label for="faceColor0" style="background: #FFCE98 !important;" ></label>
|
||||
<input type="radio" name="faceColor" id="faceColor1" value="1" />
|
||||
<label for="faceColor1" style="background: #FFBA64 !important;" ></label>
|
||||
<input type="radio" name="faceColor" id="faceColor2" value="2" />
|
||||
<label for="faceColor2" style="background: #FF7C3E !important;" ></label>
|
||||
<input type="radio" name="faceColor" id="faceColor3" value="3" />
|
||||
<label for="faceColor3" style="background: #FFB184 !important;" ></label>
|
||||
<input type="radio" name="faceColor" id="faceColor4" value="4" />
|
||||
<label for="faceColor4" style="background: #CA5326 !important;" ></label>
|
||||
<input type="radio" name="faceColor" id="faceColor5" value="5" />
|
||||
<label for="faceColor5" style="background: #752E17 !important;" ></label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="faceMakeup" class="subtab">
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup0" value="0" />
|
||||
<label for="faceMakeup0">0</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup1" value="1" />
|
||||
<label for="faceMakeup1">1</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup2" value="2" />
|
||||
<label for="faceMakeup2">2</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup3" value="3" />
|
||||
<label for="faceMakeup3">3</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup4" value="4" />
|
||||
<label for="faceMakeup4">4</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup5" value="5" />
|
||||
<label for="faceMakeup5">5</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup6" value="6" />
|
||||
<label for="faceMakeup6">6</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup7" value="7" />
|
||||
<label for="faceMakeup7">7</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup8" value="8" />
|
||||
<label for="faceMakeup8">8</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup9" value="9" />
|
||||
<label for="faceMakeup9">9</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup10" value="10" />
|
||||
<label for="faceMakeup10">10</label>
|
||||
<input type="radio" name="faceMakeup" id="faceMakeup11" value="11" />
|
||||
<label for="faceMakeup11">11</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="faceWrinkles" class="subtab">
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles0" value="0" />
|
||||
<label for="faceWrinkles0">0</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles1" value="1" />
|
||||
<label for="faceWrinkles1">1</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles2" value="2" />
|
||||
<label for="faceWrinkles2">2</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles3" value="3" />
|
||||
<label for="faceWrinkles3">3</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles4" value="4" />
|
||||
<label for="faceWrinkles4">4</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles5" value="5" />
|
||||
<label for="faceWrinkles5">5</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles6" value="6" />
|
||||
<label for="faceWrinkles6">6</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles7" value="7" />
|
||||
<label for="faceWrinkles7">7</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles8" value="8" />
|
||||
<label for="faceWrinkles8">8</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles9" value="9" />
|
||||
<label for="faceWrinkles9">9</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles10" value="10" />
|
||||
<label for="faceWrinkles10">10</label>
|
||||
<input type="radio" name="faceWrinkles" id="faceWrinkles11" value="11" />
|
||||
<label for="faceWrinkles11">11</label>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab" id="hairTypeTab">
|
||||
<fieldset id="hairType" class="has-subpages active">
|
||||
{{#each editorToHex.hairs}}
|
||||
<div class="subpage">
|
||||
{{#each this}}
|
||||
<input type="radio" name="hairType" id="hairType{{this}}" value="{{this}}" />
|
||||
<label for="hairType{{this}}">{{this}}</label>
|
||||
{{/each}}
|
||||
<div class="pagination">
|
||||
<button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span>
|
||||
<span class="current-page-index">{{@index}}</span>
|
||||
/ 11
|
||||
</span>
|
||||
<button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="hairColor" class="color">
|
||||
<input type="radio" name="hairColor" id="hairColor0" value="0" />
|
||||
<label for="hairColor0" style="background: #0A0A09 !important;" ></label>
|
||||
<input type="radio" name="hairColor" id="hairColor1" value="1" />
|
||||
<label for="hairColor1" style="background: #562D1B !important;" ></label>
|
||||
<input type="radio" name="hairColor" id="hairColor2" value="2" />
|
||||
<label for="hairColor2" style="background: #772314 !important;" ></label>
|
||||
<input type="radio" name="hairColor" id="hairColor3" value="3" />
|
||||
<label for="hairColor3" style="background: #9C481E !important;" ></label>
|
||||
<input type="radio" name="hairColor" id="hairColor4" value="4" />
|
||||
<label for="hairColor4" style="background: #988B8D !important;" ></label>
|
||||
<input type="radio" name="hairColor" id="hairColor5" value="5" />
|
||||
<label for="hairColor5" style="background: #664C1A !important;" ></label>
|
||||
<input type="radio" name="hairColor" id="hairColor6" value="6" />
|
||||
<label for="hairColor6" style="background: #AA6822 !important;" ></label>
|
||||
<input type="radio" name="hairColor" id="hairColor7" value="7" />
|
||||
<label for="hairColor7" style="background: #FEB454 !important;" ></label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="eyebrowTypeTab">
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="eyebrowTypeSubButton">
|
||||
eyebrowType
|
||||
</button>
|
||||
<button class="subtabbtn" id="eyebrowPositionSubButton">
|
||||
eyebrowPosition
|
||||
</button>
|
||||
</div>
|
||||
<fieldset id="eyebrowType" class="subtab has-subpages active">
|
||||
{{#each editorToHex.eyebrows}}
|
||||
<div class="subpage">
|
||||
{{#each this}}
|
||||
<input type="radio" name="eyebrowType" id="eyebrowType{{this}}" value="{{this}}" />
|
||||
<label for="eyebrowType{{this}}">{{this}}</label>
|
||||
{{/each}}
|
||||
<div class="pagination">
|
||||
<button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="current-page-index">{{@index}}</span> / 2
|
||||
<button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="eyebrowPosition" class="subtab has-sliders">
|
||||
<input type="range" class="invert" name="eyebrowVertical" id="eyebrowVertical" min="3" max="18" />
|
||||
<label for="eyebrowVertical">eyebrowVertical</label>
|
||||
<input type="range" name="eyebrowHorizontal" id="eyebrowHorizontal" min="0" max="12" />
|
||||
<label for="eyebrowHorizontal">eyebrowHorizontal</label>
|
||||
<input type="range" name="eyebrowRotation" id="eyebrowRotation" min="0" max="11" />
|
||||
<label for="eyebrowRotation">eyebrowRotation</label>
|
||||
<input type="range" name="eyebrowSize" id="eyebrowSize" min="0" max="8" />
|
||||
<label for="eyebrowSize">eyebrowSize</label>
|
||||
<input type="range" name="eyebrowStretch" id="eyebrowStretch" min="0" max="6" />
|
||||
<label for="eyebrowStretch">eyebrowStretch</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="eyebrowColor" class="color">
|
||||
<input type="radio" name="eyebrowColor" id="eyebrowColor0" value="0" />
|
||||
<label for="eyebrowColor0" style="background: #0A0A09 !important;" ></label>
|
||||
<input type="radio" name="eyebrowColor" id="eyebrowColor1" value="1" />
|
||||
<label for="eyebrowColor1" style="background: #562D1B !important;" ></label>
|
||||
<input type="radio" name="eyebrowColor" id="eyebrowColor2" value="2" />
|
||||
<label for="eyebrowColor2" style="background: #772314 !important;" ></label>
|
||||
<input type="radio" name="eyebrowColor" id="eyebrowColor3" value="3" />
|
||||
<label for="eyebrowColor3" style="background: #9C481E !important;" ></label>
|
||||
<input type="radio" name="eyebrowColor" id="eyebrowColor4" value="4" />
|
||||
<label for="eyebrowColor4" style="background: #988B8D !important;" ></label>
|
||||
<input type="radio" name="eyebrowColor" id="eyebrowColor5" value="5" />
|
||||
<label for="eyebrowColor5" style="background: #664C1A !important;" ></label>
|
||||
<input type="radio" name="eyebrowColor" id="eyebrowColor6" value="6" />
|
||||
<label for="eyebrowColor6" style="background: #AA6822 !important;" ></label>
|
||||
<input type="radio" name="eyebrowColor" id="eyebrowColor7" value="7" />
|
||||
<label for="eyebrowColor7" style="background: #FEB454 !important;" ></label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="eyeTypeTab">
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="eyeTypeSubButton">
|
||||
eyeType
|
||||
</button>
|
||||
<button class="subtabbtn" id="eyePositionSubButton">
|
||||
eyePosition
|
||||
</button>
|
||||
</div>
|
||||
<fieldset id="eyeType" class="subtab has-subpages active">
|
||||
{{#each editorToHex.eyes}}
|
||||
<div class="subpage">
|
||||
{{#each this}}
|
||||
<input type="radio" name="eyeType" id="eyeType{{this}}" value="{{this}}" />
|
||||
<label for="eyeType{{this}}">{{this}}</label>
|
||||
{{/each}}
|
||||
<div class="pagination">
|
||||
<button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="current-page-index">{{@index}}</span> / 5
|
||||
<button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="eyeColor" class="color">
|
||||
<input type="radio" name="eyeColor" id="eyeColor0" value="0" />
|
||||
<label for="eyeColor0" style="background: #070606 !important;" ></label>
|
||||
<input type="radio" name="eyeColor" id="eyeColor1" value="1" />
|
||||
<label for="eyeColor1" style="background: #887E75 !important;" ></label>
|
||||
<input type="radio" name="eyeColor" id="eyeColor2" value="2" />
|
||||
<label for="eyeColor2" style="background: #814631 !important;" ></label>
|
||||
<input type="radio" name="eyeColor" id="eyeColor3" value="3" />
|
||||
<label for="eyeColor3" style="background: #796A34 !important;" ></label>
|
||||
<input type="radio" name="eyeColor" id="eyeColor4" value="4" />
|
||||
<label for="eyeColor4" style="background: #565BA4 !important;" ></label>
|
||||
<input type="radio" name="eyeColor" id="eyeColor5" value="5" />
|
||||
<label for="eyeColor5" style="background: #4C8260 !important;" ></label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="eyePosition" class="subtab has-sliders">
|
||||
<input type="range" class="invert" name="eyeVertical" id="eyeVertical" min="0" max="18" />
|
||||
<label for="eyeVertical">eyeVertical</label>
|
||||
<input type="range" name="eyeHorizontal" id="eyeHorizontal" min="0" max="12" />
|
||||
<label for="eyeHorizontal">eyeHorizontal</label>
|
||||
<input type="range" name="eyeRotation" id="eyeRotation" min="0" max="7" />
|
||||
<label for="eyeRotation">eyeRotation</label>
|
||||
<input type="range" name="eyeSize" id="eyeSize" min="0" max="7" />
|
||||
<label for="eyeSize">eyeSize</label>
|
||||
<input type="range" name="eyeStretch" id="eyeStretch" min="0" max="6" />
|
||||
<label for="eyeStretch">eyeStretch</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="noseTypeTab">
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="noseTypeSubButton">
|
||||
noseType
|
||||
</button>
|
||||
<button class="subtabbtn" id="nosePositionSubButton">
|
||||
nosePosition
|
||||
</button>
|
||||
</div>
|
||||
<fieldset id="noseType" class="subtab has-subpages active">
|
||||
{{#each editorToHex.nose}}
|
||||
<div class="subpage">
|
||||
{{#each this}}
|
||||
<input type="radio" name="noseType" id="noseType{{this}}" value="{{this}}" />
|
||||
<label for="noseType{{this}}">{{this}}</label>
|
||||
{{/each}}
|
||||
<div class="pagination">
|
||||
<button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="current-page-index">{{@index}}</span> / 2
|
||||
<button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="nosePosition" class="subtab has-sliders">
|
||||
<input type="range" class="invert" name="noseVertical" id="noseVertical" min="0" max="18" />
|
||||
<label for="noseVertical">noseVertical</label>
|
||||
<input type="range" name="noseSize" id="noseSize" min="0" max="8" />
|
||||
<label for="noseSize">noseSize</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="mouthTypeTab">
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="mouthTypeSubButton">
|
||||
mouthType
|
||||
</button>
|
||||
<button class="subtabbtn" id="mouthPositionSubButton">
|
||||
mouthPosition
|
||||
</button>
|
||||
</div>
|
||||
<fieldset id="mouthType" class="subtab has-subpages active">
|
||||
{{#each editorToHex.mouth}}
|
||||
<div class="subpage">
|
||||
{{#each this}}
|
||||
<input type="radio" name="mouthType" id="mouthType{{this}}" value="{{this}}" />
|
||||
<label for="mouthType{{this}}">{{this}}</label>
|
||||
{{/each}}
|
||||
<div class="pagination">
|
||||
<button class="previous page-btn index-{{@index}} {{#if @first }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,0,35.438,18,17.434,17.434,0,0,0,18,.563Zm8.156,20.531H18v4.985a.844.844,0,0,1-1.441.6L8.522,18.6a.836.836,0,0,1,0-1.188l8.037-8.086a.844.844,0,0,1,1.441.6v4.985h8.156A.846.846,0,0,1,27,15.75v4.5A.846.846,0,0,1,26.156,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="current-page-index">{{@index}}</span> / 3
|
||||
<button class="next page-btn index-{{@index}} {{#if @last }}disabled{{/if}}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="pointer-events: none;"="34.875" height="34.875" viewBox="0 0 34.875 34.875">
|
||||
<path id="Icon_awesome-arrow-alt-circle-right" data-name="Icon awesome-arrow-alt-circle-right" d="M18,.563A17.438,17.438,0,1,1,.563,18,17.434,17.434,0,0,1,18,.563ZM9.844,21.094H18v4.985a.844.844,0,0,0,1.441.6L27.478,18.6a.836.836,0,0,0,0-1.188L19.441,9.323a.844.844,0,0,0-1.441.6v4.985H9.844A.846.846,0,0,0,9,15.75v4.5A.846.846,0,0,0,9.844,21.094Z" transform="translate(-0.563 -0.563)" fill="#9d6ff3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="mouthColor" class="color">
|
||||
<input type="radio" name="mouthColor" id="mouthColor0" value="0" />
|
||||
<label for="mouthColor0" style="background: #FF5D0C !important;" ></label>
|
||||
<input type="radio" name="mouthColor" id="mouthColor1" value="1" />
|
||||
<label for="mouthColor1" style="background: #FF110C !important;" ></label>
|
||||
<input type="radio" name="mouthColor" id="mouthColor2" value="2" />
|
||||
<label for="mouthColor2" style="background: #FF524B !important;" ></label>
|
||||
<input type="radio" name="mouthColor" id="mouthColor3" value="3" />
|
||||
<label for="mouthColor3" style="background: #FFAA77 !important;" ></label>
|
||||
<input type="radio" name="mouthColor" id="mouthColor4" value="4" />
|
||||
<label for="mouthColor4" style="background: #181312 !important;" ></label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="mouthPosition" class="subtab has-sliders">
|
||||
<input type="range" class="invert" name="mouthVertical" id="mouthVertical" min="0" max="18" />
|
||||
<label for="mouthVertical">mouthVertical</label>
|
||||
<input type="range" name="mouthSize" id="mouthSize" min="0" max="8" />
|
||||
<label for="mouthSize">mouthSize</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="glassesTypeTab">
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="glassesTypeSubButton">
|
||||
glassesType
|
||||
</button>
|
||||
<button class="subtabbtn" id="glassesPositionSubButton">
|
||||
glassesPosition
|
||||
</button>
|
||||
</div>
|
||||
<fieldset id="glassesType" class="subtab active">
|
||||
<input type="radio" name="glassesType" id="glassesType0" value="0" />
|
||||
<label for="glassesType0">0</label>
|
||||
<input type="radio" name="glassesType" id="glassesType1" value="1" />
|
||||
<label for="glassesType1">1</label>
|
||||
<input type="radio" name="glassesType" id="glassesType2" value="2" />
|
||||
<label for="glassesType2">2</label>
|
||||
<input type="radio" name="glassesType" id="glassesType3" value="3" />
|
||||
<label for="glassesType3">3</label>
|
||||
<input type="radio" name="glassesType" id="glassesType4" value="4" />
|
||||
<label for="glassesType4">4</label>
|
||||
<input type="radio" name="glassesType" id="glassesType5" value="5" />
|
||||
<label for="glassesType5">5</label>
|
||||
<input type="radio" name="glassesType" id="glassesType6" value="6" />
|
||||
<label for="glassesType6">6</label>
|
||||
<input type="radio" name="glassesType" id="glassesType7" value="7" />
|
||||
<label for="glassesType7">7</label>
|
||||
<input type="radio" name="glassesType" id="glassesType8" value="8" />
|
||||
<label for="glassesType8">8</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="glassesColor" class="color">
|
||||
<input type="radio" name="glassesColor" id="glassesColor0" value="0" />
|
||||
<label for="glassesColor0" style="background: #000000 !important;" ></label>
|
||||
<input type="radio" name="glassesColor" id="glassesColor1" value="1" />
|
||||
<label for="glassesColor1" style="background: #7A4011 !important;" ></label>
|
||||
<input type="radio" name="glassesColor" id="glassesColor2" value="2" />
|
||||
<label for="glassesColor2" style="background: #D51208 !important;" ></label>
|
||||
<input type="radio" name="glassesColor" id="glassesColor3" value="3" />
|
||||
<label for="glassesColor3" style="background: #29376E !important;" ></label>
|
||||
<input type="radio" name="glassesColor" id="glassesColor4" value="4" />
|
||||
<label for="glassesColor4" style="background: #D56D00 !important;" ></label>
|
||||
<input type="radio" name="glassesColor" id="glassesColor5" value="5" />
|
||||
<label for="glassesColor5" style="background: #987F6E !important;" ></label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="glassesPosition" class="subtab has-sliders">
|
||||
<input type="range" class="invert" name="glassesVertical" id="glassesVertical" min="0" max="20" />
|
||||
<label for="glassesVertical">glassesVertical</label>
|
||||
<input type="range" name="glassesSize" id="glassesSize" min="0" max="7" />
|
||||
<label for="glassesSize">glassesSize</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="facialHairTypeTab">
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="facialHairTypeSubButton">
|
||||
facialHairType
|
||||
</button>
|
||||
<button class="subtabbtn" id="facialHairMustacheSubButton">
|
||||
facialHairMustache
|
||||
</button>
|
||||
<button class="subtabbtn" id="facialHairPositionSubButton">
|
||||
facialHairPosition
|
||||
</button>
|
||||
</div>
|
||||
<fieldset id="facialHairType" class="subtab active">
|
||||
<input type="radio" name="facialHairType" id="facialHairType0" value="0" />
|
||||
<label for="facialHairType0">0</label>
|
||||
<input type="radio" name="facialHairType" id="facialHairType1" value="1" />
|
||||
<label for="facialHairType1">1</label>
|
||||
<input type="radio" name="facialHairType" id="facialHairType2" value="2" />
|
||||
<label for="facialHairType2">2</label>
|
||||
<input type="radio" name="facialHairType" id="facialHairType3" value="3" />
|
||||
<label for="facialHairType3">3</label>
|
||||
<input type="radio" name="facialHairType" id="facialHairType4" value="4" />
|
||||
<label for="facialHairType4">4</label>
|
||||
<input type="radio" name="facialHairType" id="facialHairType5" value="5" />
|
||||
<label for="facialHairType5">5</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="facialHairColor" class="color">
|
||||
<input type="radio" name="facialHairColor" id="facialHairColor0" value="0" />
|
||||
<label for="facialHairColor0" style="background: #0A0A09 !important;" ></label>
|
||||
<input type="radio" name="facialHairColor" id="facialHairColor1" value="1" />
|
||||
<label for="facialHairColor1" style="background: #562D1B !important;" ></label>
|
||||
<input type="radio" name="facialHairColor" id="facialHairColor2" value="2" />
|
||||
<label for="facialHairColor2" style="background: #772314 !important;" ></label>
|
||||
<input type="radio" name="facialHairColor" id="facialHairColor3" value="3" />
|
||||
<label for="facialHairColor3" style="background: #9C481E !important;" ></label>
|
||||
<input type="radio" name="facialHairColor" id="facialHairColor4" value="4" />
|
||||
<label for="facialHairColor4" style="background: #988B8D !important;" ></label>
|
||||
<input type="radio" name="facialHairColor" id="facialHairColor5" value="5" />
|
||||
<label for="facialHairColor5" style="background: #664C1A !important;" ></label>
|
||||
<input type="radio" name="facialHairColor" id="facialHairColor6" value="6" />
|
||||
<label for="facialHairColor6" style="background: #AA6822 !important;" ></label>
|
||||
<input type="radio" name="facialHairColor" id="facialHairColor7" value="7" />
|
||||
<label for="facialHairColor7" style="background: #FEB454 !important;" ></label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="facialHairMustache" class="subtab">
|
||||
<input type="radio" name="facialHairMustache" id="facialHairMustache0" value="0" />
|
||||
<label for="facialHairMustache0">0</label>
|
||||
<input type="radio" name="facialHairMustache" id="facialHairMustache1" value="1" />
|
||||
<label for="facialHairMustache1">1</label>
|
||||
<input type="radio" name="facialHairMustache" id="facialHairMustache2" value="2" />
|
||||
<label for="facialHairMustache2">2</label>
|
||||
<input type="radio" name="facialHairMustache" id="facialHairMustache3" value="3" />
|
||||
<label for="facialHairMustache3">3</label>
|
||||
<input type="radio" name="facialHairMustache" id="facialHairMustache4" value="4" />
|
||||
<label for="facialHairMustache4">4</label>
|
||||
<input type="radio" name="facialHairMustache" id="facialHairMustache5" value="5" />
|
||||
<label for="facialHairMustache5">5</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="facialHairPosition" class="subtab has-sliders">
|
||||
<input type="range" class="invert" name="facialHairVertical" id="facialHairVertical" min="0" max="16" />
|
||||
<label for="facialHairVertical">facialHairVertical</label>
|
||||
<input type="range" name="facialHairSize" id="facialHairSize" min="0" max="8" />
|
||||
<label for="facialHairSize">facialHairSize</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="moleEnableTab">
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="moleEnableSubButton">
|
||||
moleEnable
|
||||
</button>
|
||||
<button class="subtabbtn" id="molePositionSubButton">
|
||||
moleEnablePosition
|
||||
</button>
|
||||
</div>
|
||||
<fieldset id="moleEnable" class="subtab active">
|
||||
<input type="radio" name="moleEnable" id="moleEnable0" value="0" />
|
||||
<label for="moleEnable0">0</label>
|
||||
<input type="radio" name="moleEnable" id="moleEnable1" value="1" />
|
||||
<label for="moleEnable1">1</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="molePosition" class="subtab has-sliders">
|
||||
<input type="range" class="invert" name="moleVertical" id="moleVertical" min="0" max="30" />
|
||||
<label for="moleVertical">moleVertical</label>
|
||||
<input type="range" name="moleHorizontal" id="moleHorizontal" min="0" max="16" />
|
||||
<label for="moleHorizontal">moleHorizontal</label>
|
||||
<input type="range" name="moleSize" id="moleSize" min="0" max="8" />
|
||||
<label for="moleSize">moleSize</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="sizeTab">
|
||||
<fieldset id="size" class="active has-sliders">
|
||||
<input type="range" name="height" id="height" min="0" max="127" />
|
||||
<label for="height">height</label>
|
||||
<input type="range" name="build" id="build" min="0" max="127" />
|
||||
<label for="build">build</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="tab" id="miiscTab"><!--Get it it's funny 'cause 'mii' and 'misc'-->
|
||||
<div class="subtabs">
|
||||
<button class="subtabbtn active" id="genderSubButton">
|
||||
dress
|
||||
</button>
|
||||
<button class="subtabbtn" id="favoriteColorSubButton">
|
||||
favcolor
|
||||
</button>
|
||||
</div>
|
||||
<fieldset id="gender" class="subtab active">
|
||||
<input type="radio" name="gender" id="gender0" value="0" />
|
||||
<label for="gender0">0</label>
|
||||
<input type="radio" name="gender" id="gender1" value="1" />
|
||||
<label for="gender1">1</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="favoriteColor" class="subtab">
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor0" value="0" />
|
||||
<label for="favoriteColor0" style="background: #FF2216 !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor1" value="1" />
|
||||
<label for="favoriteColor1" style="background: #FF7A1A !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor2" value="2" />
|
||||
<label for="favoriteColor2" style="background: #FFED22 !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor3" value="3" />
|
||||
<label for="favoriteColor3" style="background: #91F321 !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor4" value="4" />
|
||||
<label for="favoriteColor4" style="background: #008332 !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor5" value="5" />
|
||||
<label for="favoriteColor5" style="background: #0D50BE !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor6" value="6" />
|
||||
<label for="favoriteColor6" style="background: #49BBE4 !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor7" value="7" />
|
||||
<label for="favoriteColor7" style="background: #FF6381 !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor8" value="8" />
|
||||
<label for="favoriteColor8" style="background: #8B2DB2 !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor9" value="9" />
|
||||
<label for="favoriteColor9" style="background: #573D18 !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor10" value="10" />
|
||||
<label for="favoriteColor10" style="background: #FFFFFF !important;" ></label>
|
||||
<input type="radio" name="favoriteColor" id="favoriteColor11" value="11" />
|
||||
<label for="favoriteColor11" style="background: #1D1A15 !important;" ></label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="encodedUserMiiData" type="text/plain">
|
||||
{{encodedUserMiiData}}
|
||||
</script>
|
||||
<script src="/assets/js/miieditor.bundled.js"></script>
|
||||
Loading…
Reference in New Issue
Block a user