mii-unsecure nnid to studio api

by arian_

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mii Data Fetcher</title>
    <style>

    </style>
</head>
<body>
    <form id="miiForm" action="https://mii-unsecure.ariankordi.net/mii_data/">
        <input type="text" id="nnidInput" name="nnid"
                placeholder="Enter NNID..." maxlength="16"
                pattern="[a-zA-Z0-9._-]+"
                value="JasmineChlora">
        <label for="pretendoToggle">Search Pretendo</label>
        <input type="checkbox" id="pretendoToggle" name="api_id" value="1">
        <button type="submit">Fetch Data</button>
    </form>
    <button id="randomFetch">Fetch Random Data</button>
    <div id="status" class="hidden">Status: Waiting for input...</div>
    <div id="error" class="hidden">Error: <span id="errorDetails"></span></div>
    <div id="loaded" class="hidden">Loaded: <span id="loadedName"></span> / <span id="loadedUserId"></span></div>
    <div id="imageContainer">
        <img id="miiImage" src="https://studio.mii.nintendo.com/miis/image.png?type=all_body&expression=normal&width=270&data=" alt="" class="hidden">
    </div>

    <script>

    </script>
</body>
</html>

CSS

body {
            background-color: #121212;
            color: #ffffff;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        input, button, label {
            padding: 10px;
            font-size: 16px;
            margin-bottom: 10px;
            border: none;
            border-radius: 5px;
        }
        #status, #error, #loaded {
            font-size: 18px;
            margin-top: 10px;
        }
        .hidden {
            display: none;
        }
        .error {
            color: red;
        }
        .success {
            color: green;
        }
        img {
            margin-top: 20px;
        }

JavaScript

const nnidInput = document.getElementById('nnidInput');
const pretendoToggle = document.getElementById('pretendoToggle');
const statusDiv = document.getElementById('status');
const errorDiv = document.getElementById('error');
const errorDetails = document.getElementById('errorDetails');
const loadedDiv = document.getElementById('loaded');
const loadedName = document.getElementById('loadedName');
const loadedUserId = document.getElementById('loadedUserId');
const miiImage = document.getElementById('miiImage');
const miiForm = document.getElementById('miiForm');
const randomFetchButton = document.getElementById('randomFetch');

let timeout = null;

function showStatus() {
  statusDiv.classList.remove('hidden');
  errorDiv.classList.add('hidden');
  loadedDiv.classList.add('hidden');
  statusDiv.classList.remove('error', 'success');
}

function showError(message) {
  errorDetails.textContent = message;
  errorDiv.classList.remove('hidden');
  statusDiv.classList.add('hidden');
  loadedDiv.classList.add('hidden');
  errorDiv.classList.add('error');
}

function showLoaded(name, userId, urlData) {
  loadedName.textContent = name;
  loadedUserId.textContent = userId;
  loadedDiv.classList.remove('hidden');
  statusDiv.classList.add('hidden');
  errorDiv.classList.add('hidden');
  loadedDiv.classList.add('success');
  miiImage.src = `https://studio.mii.nintendo.com/miis/image.png?type=all_body&expression=normal&width=270&data=${urlData}`;
  miiImage.alt = name;
  miiImage.classList.remove('hidden');
}

function fetchData(apiUrl) {
  fetch(apiUrl)
    .then(response => response.text().then(text => {
    try {
      return JSON.parse(text);
    } catch {
      throw new Error(text);
    }
  }))
    .then(data => {
    if (data.error) {
      showError(data.error);
    } else {
      showLoaded(data.name, data.user_id, data.studio_url_data);
    }
  })
    .catch(error => {
    showError(error.message);
 ...