upload files

assets/app.js

@@ -0,0 +1,93 @@
+const form = document.getElementById("form");
+const file = document.getElementById("file");
+const nameI = document.getElementById("username");
+const btn = document.getElementById("submit");
+const toasts = document.getElementById("toasts");
+const segSkin = document.getElementById("seg-skin");
+const segCape = document.getElementById("seg-cape");
+
+let kind = "skin";
+
+segSkin.onclick = () => {
+  kind = "skin";
+  segSkin.classList.add("active");
+  segCape.classList.remove("active");
+  segSkin.setAttribute("aria-selected", "true");
+  segCape.setAttribute("aria-selected", "false");
+};
+
+segCape.onclick = () => {
+  kind = "cape";
+  segCape.classList.add("active");
+  segSkin.classList.remove("active");
+  segCape.setAttribute("aria-selected", "true");
+  segSkin.setAttribute("aria-selected", "false");
+};
+
+function toast(msg, type = "ok") {
+  const t = document.createElement("div");
+  t.className = "toast " + type;
+  t.innerHTML =
+    '<div class="dot"></div><div style="line-height:1.35">' +
+    msg +
+    '</div><div class="x" aria-label="Закрити">✕</div>';
+  toasts.appendChild(t);
+  const close = () => {
+    t.style.transition = "opacity .15s ease, transform .15s ease";
+    t.style.opacity = "0";
+    t.style.transform = "translateY(-6px)";
+    setTimeout(() => t.remove(), 180);
+  };
+  t.querySelector(".x").onclick = close;
+  setTimeout(close, 4200);
+}
+
+function validName(v) {
+  return /^[A-Za-z0-9_]{2,16}$/.test(v);
+}
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const v = nameI.value.trim();
+  if (!validName(v)) {
+    toast("Неправильний нік.", "err");
+    return;
+  }
+  if (!file.files?.length) {
+    toast("Оберіть PNG.", "err");
+    return;
+  }
+
+  const fd = new FormData();
+  fd.append("username", v);
+  fd.append("file", file.files[0]);
+
+  const url = kind === "cape" ? "/upload-cape" : "/upload";
+
+  btn.disabled = true;
+  btn.textContent = "Завантаження…";
+  try {
+    const res = await fetch(url, { method: "POST", body: fd });
+    const text = await res.text();
+    let data;
+    try {
+      data = JSON.parse(text);
+    } catch {}
+    if (!res.ok || !data || data.status !== "ok") {
+      toast(data && data.error ? data.error : "Помилка завантаження.", "err");
+    } else {
+      toast(
+        kind === "cape" ? "Готово. Плащ збережено." : "Готово. Скін збережено.",
+        "ok"
+      );
+      form.reset();
+      kind = "skin";
+      segSkin.click();
+    }
+  } catch {
+    toast("Мережа недоступна.", "err");
+  } finally {
+    btn.disabled = false;
+    btn.textContent = "Завантажити";
+  }
+});

assets/style.css

@@ -0,0 +1,222 @@
+:root {
+  --mantle: #181825;
+  --crust: #11111b;
+  --text: #cdd6f4;
+  --muted: #a6adc8;
+  --line: #45475a;
+  --lav: #b4befe;
+  --sky: #89dceb;
+  --green: #a6e3a1;
+  --red: #f38ba8;
+  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: linear-gradient(160deg, var(--mantle), var(--crust));
+  color: var(--text);
+  font: 16px/1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Inter, Roboto,
+    Ubuntu, Arial, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.shell {
+  width: 100%;
+  max-width: 520px;
+}
+
+.card {
+  background: linear-gradient(
+    180deg,
+    rgba(49, 50, 68, 0.9),
+    rgba(24, 24, 37, 0.92)
+  );
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  padding: 26px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(8px);
+}
+
+.h {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 18px;
+}
+
+.h1 {
+  font-size: clamp(22px, 4vw, 28px);
+  font-weight: 700;
+  letter-spacing: 0.2px;
+}
+
+.form {
+  display: grid;
+  gap: 16px;
+}
+
+.lbl {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.input {
+  width: 100%;
+  background: #2b2d3a;
+  border: 1px solid var(--line);
+  color: var(--text);
+  border-radius: 14px;
+  padding: 14px 16px;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus {
+  border-color: var(--lav);
+  box-shadow: 0 0 0 4px rgba(180, 190, 254, 0.18);
+}
+
+/* Segmented control */
+.segment {
+  background: #2b2d3a;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 4px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+}
+
+.segbtn {
+  border: 0;
+  border-radius: 10px;
+  padding: 10px 12px;
+  cursor: pointer;
+  color: var(--text);
+  background: transparent;
+  font-weight: 700;
+}
+
+.segbtn.active {
+  background: linear-gradient(90deg, var(--lav), var(--sky));
+  color: #0b0b10;
+}
+
+/* Button */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  margin-top: 6px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 0;
+  cursor: pointer;
+  background: linear-gradient(90deg, var(--lav), var(--sky));
+  color: #0b0b10;
+  font-weight: 800;
+  transition: transform 0.06s ease, filter 0.2s ease;
+}
+
+.btn:active {
+  transform: translateY(1px);
+}
+
+.btn[disabled] {
+  filter: saturate(0.2) brightness(0.85);
+  cursor: default;
+}
+
+/* Toasts (top-right) */
+#toasts {
+  position: fixed;
+  right: 16px;
+  top: 16px;
+  display: grid;
+  gap: 10px;
+  z-index: 9999;
+}
+
+.toast {
+  background: #2b2d3a;
+  border: 1px solid var(--line);
+  color: var(--text);
+  padding: 12px 14px;
+  border-radius: 14px;
+  min-width: 260px;
+  box-shadow: var(--shadow);
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  animation: slideIn 0.25s ease both;
+}
+
+.toast.ok {
+  border-color: var(--green);
+}
+
+.toast.err {
+  border-color: var(--red);
+}
+
+.toast .dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  margin-top: 5px;
+}
+
+.toast.ok .dot {
+  background: var(--green);
+}
+
+.toast.err .dot {
+  background: var(--red);
+}
+
+.toast .x {
+  margin-left: auto;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.credit {
+  position: fixed;
+  right: 18px;
+  bottom: 16px;
+  color: var(--muted);
+  font-size: 13px;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  opacity: 0.75;
+}
+.credit:hover {
+  color: var(--lav);
+  opacity: 1;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}

index.php

@@ -0,0 +1,141 @@
+<?php
+
+declare(strict_types=1);
+
+$method = $_SERVER['REQUEST_METHOD'] ?? 'GET';
+$path   = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH);
+
+/* === API: upload skin === */
+if ($method === 'POST' && $path === '/upload') {
+    $name = $_POST['username'] ?? '';
+    if (!preg_match('/^[A-Za-z0-9_]{2,16}$/', $name)) return err('Неправильний нік (2–16, латиниця/цифри/_).');
+    $tmp = require_png_upload('file');
+
+    [$w, $h] = must_image_size($tmp);
+    if (!($w === 64 && ($h === 64 || $h === 128))) return err('Скін має бути 64×64 або 64×128.');
+    $img = @imagecreatefrompng($tmp) ?: err('Пошкоджений PNG.');
+
+    if (!is_dir(__DIR__ . '/skins')) @mkdir(__DIR__ . '/skins', 0755, true);
+    $dest = __DIR__ . "/skins/{$name}.png";
+    @imagepng($img, $dest) ?: err('Не вдалося зберегти (права на ./skins).');
+    imagedestroy($img);
+
+    json_ok(['skin_url' => base() . "/skins/{$name}.png", 'username' => $name]);
+}
+
+/* === API: upload cape === */
+if ($method === 'POST' && $path === '/upload-cape') {
+    $name = $_POST['username'] ?? '';
+    if (!preg_match('/^[A-Za-z0-9_]{2,16}$/', $name)) return err('Неправильний нік (2–16, латиниця/цифри/_).');
+    $tmp = require_png_upload('file');
+
+    [$w, $h] = must_image_size($tmp);
+    // Плащ: співвідношення 2:1, мінімум 64×32, кратні двійці (типові 64×32, 128×64, 256×128, …)
+    if (!($w === 2 * $h && $w >= 64 && $h >= 32)) {
+        return err("Плащ має бути зі співвідношенням 2:1 (64×32, 128×64, …). Отримано {$w}×{$h}.");
+    }
+    $img = @imagecreatefrompng($tmp) ?: err('Пошкоджений PNG.');
+
+    if (!is_dir(__DIR__ . '/capes')) @mkdir(__DIR__ . '/capes', 0755, true);
+    $dest = __DIR__ . "/capes/{$name}.png";
+    @imagepng($img, $dest) ?: err('Не вдалося зберегти (права на ./capes).');
+    imagedestroy($img);
+
+    json_ok(['cape_url' => base() . "/capes/{$name}.png", 'username' => $name]);
+}
+
+/* === UI === */
+if ($method === 'GET' && $path === '/') {
+    header('Content-Type: text/html; charset=utf-8');
+    echo <<<HTML
+<!doctype html>
+<html lang="uk">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<title>MSS - MrAkells Skin Server</title>
+
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="shortcut icon" href="/favicon.ico">
+
+<link rel="stylesheet" href="assets/style.css">
+
+</head>
+<body>
+  <div class="shell">
+    <div class="card">
+      <form id="form" class="form" autocomplete="off">
+        <div class="segment" role="tablist" aria-label="Тип">
+          <button type="button" class="segbtn active" id="seg-skin" aria-selected="true">Скін</button>
+          <button type="button" class="segbtn" id="seg-cape" aria-selected="false">Плащ</button>
+        </div>
+
+        <div>
+          <div class="lbl">Нікнейм</div>
+          <input class="input" name="username" id="username" placeholder="Наприклад, Notch" minlength="2" maxlength="16" pattern="[A-Za-z0-9_]{2,16}" required>
+        </div>
+        <div>
+          <div class="lbl">Файл PNG</div>
+          <input class="input" type="file" id="file" name="file" accept="image/png" required>
+        </div>
+        <button class="btn" id="submit" type="submit">Завантажити</button>
+      </form>
+    </div>
+  </div>
+
+  <div id="toasts"></div>
+
+  <a href="https://t.me/mrakells" class="credit" target="_blank" rel="noopener">by&nbsp;MrAkells</a>
+
+<script src="assets/app.js"></script>
+</body>
+</html>
+HTML;
+    exit;
+}
+
+/* === 404 === */
+http_response_code(404);
+header('Content-Type: text/plain; charset=utf-8');
+echo "Not Found";
+exit;
+
+/* === helpers === */
+function err(string $m): void
+{
+    header('Content-Type: application/json; charset=utf-8', true, 400);
+    echo json_encode(['status' => 'error', 'error' => $m], JSON_UNESCAPED_UNICODE);
+    exit;
+}
+function json_ok(array $extra): void
+{
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode(['status' => 'ok'] + $extra, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+function require_png_upload(string $key): string
+{
+    if (!isset($_FILES[$key]) || $_FILES[$key]['error'] !== UPLOAD_ERR_OK) err('Файл не завантажено.');
+    $tmp = $_FILES[$key]['tmp_name'];
+    $finfo = finfo_open(FILEINFO_MIME_TYPE);
+    $mime  = finfo_file($finfo, $tmp);
+    finfo_close($finfo);
+    if ($mime !== 'image/png') err('Лише PNG.');
+    return $tmp;
+}
+function must_image_size(string $tmp): array
+{
+    $info = @getimagesize($tmp);
+    if (!$info) err('Не PNG.');
+    return [$info[0], $info[1]];
+}
+function base(): string
+{
+    $https = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || (($_SERVER['SERVER_PORT'] ?? '') === '443');
+    $scheme = $https ? 'https' : 'http';
+    $host = $_SERVER['HTTP_HOST'] ?? 'localhost';
+    return $scheme . '://' . $host;
+}