feat: redesign website templates with full pages

- Redesigned base.html: dark Minecraft theme, sticky header, responsive grid, cards, server cards with status indicators, profile styles
- index.html: hero section, server list grid, how-to-start steps, features section
- login.html: centered card layout, client-side validation, fetch API
- registration.html: password confirmation, pattern validation, error alerts
- profile.html: new page — skin/cape upload & delete, launcher download links, auth-gated via localStorage token
- templates.go: added /profile route, extended pageData with Username/UUID

internal/templates/html/base.html

@@ -4,100 +4,383 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.Title}} — MrixsCraft</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛏</text></svg>">
     <style>
         :root {
-            --bg: #1a1a2e;
+            --bg: #0f0f1a;
+            --bg-gradient: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%);
             --surface: #16213e;
+            --surface-light: #1e2d50;
             --accent: #4ade80;
             --accent-hover: #22c55e;
+            --accent-glow: rgba(74, 222, 128, 0.15);
             --text: #e2e8f0;
+            --text-dim: #cbd5e1;
             --text-muted: #94a3b8;
             --error: #f87171;
+            --warning: #fbbf24;
             --border: #334155;
+            --border-light: #475569;
+            --radius: 10px;
+            --radius-sm: 6px;
+            --shadow: 0 4px 24px rgba(0,0,0,0.3);
         }
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        html { scroll-behavior: smooth; }
         body {
-            font-family: system-ui, -apple-system, sans-serif;
-            background: var(--bg);
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            background: var(--bg-gradient);
             color: var(--text);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
+            line-height: 1.6;
         }
-        a { color: var(--accent); text-decoration: none; }
-        a:hover { text-decoration: underline; }
+        a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
+        a:hover { color: var(--accent-hover); text-decoration: none; }
+
+        /* ── Header ── */
         header {
-            background: var(--surface);
+            background: rgba(22, 33, 62, 0.85);
+            backdrop-filter: blur(12px);
             border-bottom: 1px solid var(--border);
-            padding: 0.75rem 0;
+            padding: 0.65rem 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
         }
-        header .container {
-            max-width: 960px;
+        header .hdr {
+            max-width: 1100px;
             margin: 0 auto;
-            padding: 0 1rem;
+            padding: 0 1.25rem;
             display: flex;
             align-items: center;
             justify-content: space-between;
         }
-        header .logo { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
-        header nav a { margin-left: 1rem; font-size: 0.9rem; }
-        main { flex: 1; padding: 2rem 1rem; }
-        .container { max-width: 960px; margin: 0 auto; }
-        h1, h2 { margin-bottom: 1rem; }
-        p { margin-bottom: 0.75rem; color: var(--text-muted); line-height: 1.6; }
-        form { max-width: 360px; }
-        label { display: block; margin-bottom: 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
-        input[type="text"], input[type="email"], input[type="password"] {
-            width: 100%;
-            padding: 0.6rem 0.75rem;
-            margin-bottom: 1rem;
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text);
-            font-size: 1rem;
+        .logo {
+            font-size: 1.35rem;
+            font-weight: 800;
+            color: var(--accent);
+            letter-spacing: -0.5px;
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
         }
-        input:focus { outline: none; border-color: var(--accent); }
+        .logo span { font-size: 1.1rem; }
+        header nav {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        header nav a {
+            color: var(--text-muted);
+            font-size: 0.88rem;
+            padding: 0.4rem 0.85rem;
+            border-radius: var(--radius-sm);
+            transition: all 0.15s;
+        }
+        header nav a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
+        header nav a.active { color: var(--accent); background: var(--accent-glow); }
+        .nav-user {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.35rem 0.75rem;
+            background: var(--surface-light);
+            border-radius: var(--radius-sm);
+            font-size: 0.85rem;
+            color: var(--text-dim);
+        }
+        .nav-user .avatar {
+            width: 24px; height: 24px;
+            border-radius: 4px;
+            background: var(--accent);
+        }
+
+        /* ── Buttons ── */
         .btn {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.4rem;
             background: var(--accent);
             color: #000;
             border: none;
-            padding: 0.7rem 1.5rem;
-            border-radius: 6px;
-            font-size: 1rem;
-            font-weight: 600;
+            padding: 0.7rem 1.6rem;
+            border-radius: var(--radius-sm);
+            font-size: 0.95rem;
+            font-weight: 700;
             cursor: pointer;
+            transition: all 0.15s;
+            letter-spacing: 0.2px;
         }
-        .btn:hover { background: var(--accent-hover); text-decoration: none; }
+        .btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3); }
+        .btn:active { transform: translateY(0); }
+        .btn-outline {
+            background: transparent;
+            color: var(--accent);
+            border: 1px solid var(--accent);
+        }
+        .btn-outline:hover { background: var(--accent-glow); box-shadow: none; }
+        .btn-danger {
+            background: transparent;
+            color: var(--error);
+            border: 1px solid var(--error);
+        }
+        .btn-danger:hover { background: rgba(248, 113, 113, 0.1); }
+        .btn-sm { padding: 0.4rem 1rem; font-size: 0.82rem; }
+        .btn-lg { padding: 0.9rem 2.2rem; font-size: 1.05rem; }
+
+        /* ── Cards ── */
         .card {
             background: var(--surface);
             border: 1px solid var(--border);
-            border-radius: 8px;
+            border-radius: var(--radius);
             padding: 2rem;
             margin-bottom: 1.5rem;
+            box-shadow: var(--shadow);
         }
+        .card + .card { margin-top: 0; }
+
+        /* ── Forms ── */
+        label {
+            display: block;
+            margin-bottom: 0.3rem;
+            font-size: 0.82rem;
+            font-weight: 600;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        input[type="text"], input[type="email"], input[type="password"], input[type="file"], textarea, select {
+            width: 100%;
+            padding: 0.7rem 0.85rem;
+            margin-bottom: 1.1rem;
+            background: var(--bg);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-sm);
+            color: var(--text);
+            font-size: 0.95rem;
+            transition: border-color 0.15s;
+        }
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 0 3px var(--accent-glow);
+        }
+        .form-error {
+            color: var(--error);
+            font-size: 0.82rem;
+            margin-top: -0.5rem;
+            margin-bottom: 1rem;
+            display: none;
+        }
+
+        /* ── Layout ── */
+        main { flex: 1; padding: 2.5rem 1.25rem; }
+        .container { max-width: 1100px; margin: 0 auto; }
+        .container-narrow { max-width: 440px; margin: 0 auto; }
+        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
+        @media (max-width: 768px) {
+            .grid-2, .grid-3 { grid-template-columns: 1fr; }
+            header nav a span { display: none; }
+        }
+
+        /* ── Hero ── */
+        .hero {
+            text-align: center;
+            padding: 4rem 1rem 3rem;
+        }
+        .hero h1 {
+            font-size: 2.8rem;
+            font-weight: 900;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, var(--accent) 0%, #22d3ee 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            line-height: 1.2;
+        }
+        .hero p {
+            font-size: 1.15rem;
+            color: var(--text-muted);
+            max-width: 560px;
+            margin: 0 auto 1.75rem;
+        }
+        .hero .actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
+
+        /* ── Server Cards ── */
+        .server-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            padding: 1.5rem;
+            transition: all 0.2s;
+            position: relative;
+            overflow: hidden;
+        }
+        .server-card:hover {
+            border-color: var(--accent);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 32px rgba(74, 222, 128, 0.1);
+        }
+        .server-card .version-badge {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            background: var(--accent-glow);
+            color: var(--accent);
+            font-size: 0.72rem;
+            font-weight: 700;
+            padding: 0.2rem 0.6rem;
+            border-radius: 20px;
+            text-transform: uppercase;
+        }
+        .server-card h3 {
+            font-size: 1.15rem;
+            margin-bottom: 0.4rem;
+            padding-right: 80px;
+        }
+        .server-card .meta {
+            font-size: 0.82rem;
+            color: var(--text-muted);
+            margin-bottom: 1rem;
+        }
+        .server-card .status {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.35rem;
+            font-size: 0.78rem;
+            color: var(--accent);
+            font-weight: 600;
+        }
+        .server-card .status::before {
+            content: '';
+            width: 8px; height: 8px;
+            background: var(--accent);
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+        }
+
+        /* ── Profile ── */
+        .profile-header {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+        .profile-avatar {
+            width: 80px; height: 80px;
+            border-radius: var(--radius);
+            background: var(--surface-light);
+            border: 2px solid var(--border);
+            image-rendering: pixelated;
+        }
+        .profile-info h2 { margin-bottom: 0.2rem; }
+        .profile-info .uuid { font-size: 0.78rem; color: var(--text-muted); font-family: monospace; }
+
+        /* ── Alerts ── */
+        .alert {
+            padding: 0.75rem 1rem;
+            border-radius: var(--radius-sm);
+            font-size: 0.88rem;
+            margin-bottom: 1rem;
+            display: none;
+        }
+        .alert-error { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--error); }
+        .alert-success { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.3); color: var(--accent); }
+        .alert.show { display: block; }
+
+        /* ── Footer ── */
         footer {
             text-align: center;
-            padding: 1rem;
+            padding: 1.5rem;
             color: var(--text-muted);
             font-size: 0.8rem;
             border-top: 1px solid var(--border);
+            background: var(--surface);
         }
+        footer a { color: var(--text-muted); }
+
+        /* ── Misc ── */
+        h1 { font-size: 1.75rem; margin-bottom: 1.25rem; font-weight: 800; }
+        h2 { font-size: 1.3rem; margin-bottom: 1rem; font-weight: 700; }
+        h3 { font-size: 1.05rem; margin-bottom: 0.75rem; }
+        p { margin-bottom: 0.75rem; color: var(--text-muted); }
+        .section-title {
+            font-size: 1.4rem;
+            font-weight: 800;
+            margin-bottom: 1.25rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .muted { color: var(--text-muted); }
+        .text-sm { font-size: 0.82rem; }
+        .mt-1 { margin-top: 0.5rem; }
+        .mt-2 { margin-top: 1rem; }
+        .mb-0 { margin-bottom: 0; }
+        .flex { display: flex; }
+        .gap-1 { gap: 0.5rem; }
+        .gap-2 { gap: 1rem; }
+        .items-center { align-items: center; }
+        .justify-between { justify-content: space-between; }
+        .text-center { text-align: center; }
+        ol, ul { margin-left: 1.25rem; color: var(--text-muted); line-height: 1.9; }
+        hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
     </style>
 </head>
 <body>
     <header>
-        <div class="container">
-            <span class="logo">MrixsCraft</span>
-            <nav>
-                <a href="/">Главная</a>
-                <a href="/login">Вход</a>
-                <a href="/register">Регистрация</a>
+        <div class="hdr">
+            <a href="/" class="logo"><span>⛏</span> MrixsCraft</a>
+            <nav id="mainNav">
+                <a href="/" id="nav-home">Главная</a>
+                <a href="/login" id="nav-login">Вход</a>
+                <a href="/register" id="nav-register">Регистрация</a>
             </nav>
         </div>
     </header>
     <main><div class="container">{{template "content" .}}</div></main>
-    <footer>MrixsCraft Server &copy; 2026</footer>
+    <footer>
+        <p>MrixsCraft Server &copy; 2026 · <a href="https://github.com/Mrixs/MrixsCraft-server">GitHub</a></p>
+    </footer>
+    <script>
+    // Update nav based on auth state
+    (function() {
+        const token = localStorage.getItem('token');
+        const username = localStorage.getItem('username');
+        const nav = document.getElementById('mainNav');
+        if (token && username) {
+            nav.innerHTML =
+                '<a href="/" id="nav-home">Главная</a>' +
+                '<a href="/profile" id="nav-profile">Профиль</a>' +
+                '<div class="nav-user"><div class="avatar"></div>' + escapeHtml(username) + '</div>' +
+                '<a href="#" id="nav-logout" class="btn btn-sm btn-danger" style="padding:0.35rem 0.75rem">Выйти</a>';
+            document.getElementById('nav-logout').addEventListener('click', function(e) {
+                e.preventDefault();
+                localStorage.removeItem('token');
+                localStorage.removeItem('uuid');
+                localStorage.removeItem('username');
+                window.location.href = '/';
+            });
+        }
+        // Highlight active nav link
+        const path = window.location.pathname;
+        document.querySelectorAll('header nav a').forEach(function(a) {
+            if (a.getAttribute('href') === path) a.classList.add('active');
+        });
+    })();
+    function escapeHtml(s) {
+        const d = document.createElement('div');
+        d.textContent = s;
+        return d.innerHTML;
+    }
+    </script>
 </body>
 </html>

internal/templates/html/index.html

@@ -1,17 +1,73 @@
 {{define "content"}}
-<div class="card">
-    <h1>Добро пожаловать в MrixsCraft</h1>
-    <p>Приватный Minecraft-сервер с модпаками. Зарегистрируйся, скачай лаунчер и играй.</p>
-    <p>
-        <a href="/register" class="btn">Начать играть</a>
-    </p>
+<!-- Hero -->
+<div class="hero">
+    <h1>⛏ MrixsCraft</h1>
+    <p>Приватный Minecraft-сервер с модпаками. Зарегистрируйся, скачай лаунчер и играй с друзьями.</p>
+    <div class="actions">
+        <a href="/register" class="btn btn-lg">Начать играть</a>
+        <a href="#servers" class="btn btn-outline btn-lg">Список серверов</a>
+    </div>
 </div>
+
+<!-- Servers -->
+<h2 class="section-title" id="servers">🖥 Наши серверы</h2>
+<div class="grid-2" id="serversGrid">
+    <div class="server-card">
+        <span class="version-badge">1.21</span>
+        <h3>HiTech</h3>
+        <p class="meta">Технический модпак · Java 21</p>
+        <p class="muted text-sm">Индустриальная автоматизация, технологии и прогресс. Строй фабрики, автоматизируй производство, покоряй энергию.</p>
+        <div class="status mt-2">Онлайн</div>
+    </div>
+    <div class="server-card">
+        <span class="version-badge">1.20</span>
+        <h3>Vanilla</h3>
+        <p class="meta">Ванильный сервер · Java 17</p>
+        <p class="muted text-sm">Классический Minecraft без модов. Строи, исследуй, выживай — всё как в старые добрые времена.</p>
+        <div class="status mt-2">Онлайн</div>
+    </div>
+</div>
+
+<!-- How to start -->
+<h2 class="section-title mt-2">🚀 Как начать</h2>
+<div class="grid-3">
+    <div class="card text-center">
+        <div style="font-size:2rem;margin-bottom:0.5rem">📝</div>
+        <h3>1. Регистрация</h3>
+        <p>Создай аккаунт на сайте. Придумай никнейм и пароль.</p>
+    </div>
+    <div class="card text-center">
+        <div style="font-size:2rem;margin-bottom:0.5rem">💾</div>
+        <h3>2. Скачай лаунчер</h3>
+        <p>Скачай лаунчер для своей ОС. Он сам скачает все нужные файлы.</p>
+    </div>
+    <div class="card text-center">
+        <div style="font-size:2rem;margin-bottom:0.5rem">🎮</div>
+        <h3>3. Играй</h3>
+        <p>Авторизуйся в лаунчере, выбери сервер и нажимай PLAY.</p>
+    </div>
+</div>
+
+<!-- Features -->
+<h2 class="section-title mt-2">✨ Возможности</h2>
 <div class="card">
-    <h2>Как начать</h2>
-    <ol style="margin-left: 1.25rem; color: var(--text-muted); line-height: 1.8;">
-        <li>Зарегистрируйся на сайте</li>
-        <li>Скачай лаунчер для своей ОС</li>
-        <li>Авторизуйся, выбирай модпак и нажимай PLAY</li>
-    </ol>
+    <div class="grid-2" style="gap:1.5rem">
+        <div>
+            <h3>🔐 Своя авторизация</h3>
+            <p>Полноценная Yggdrasil-совместимая система. Скины, плащи, профили — всё работает.</p>
+        </div>
+        <div>
+            <h3>📦 Модпаки</h3>
+            <p>Готовые наборы модов с автообновлением. Лаунчер сам скачает и проверит все файлы.</p>
+        </div>
+        <div>
+            <h3>🌐 Веб-профиль</h3>
+            <p>Управляй скином и плащом прямо на сайте. Загружай PNG и они сразу в игре.</p>
+        </div>
+        <div>
+            <h3>🔄 Автообновление</h3>
+            <p>Лаунчер обновляется сам. Серверные модпаки тоже подтягиваются автоматически.</p>
+        </div>
+    </div>
 </div>
 {{end}}

internal/templates/html/login.html

@@ -1,42 +1,61 @@
 {{define "content"}}
-<div class="card">
-    <h1>Вход</h1>
-    <form id="loginForm">
-        <label for="username">Логин или Email</label>
-        <input type="text" id="username" name="username" required autocomplete="username">
+<div class="container-narrow">
+    <div class="card text-center">
+        <h1 style="margin-bottom:0.5rem">👋 С возвращением</h1>
+        <p class="muted mb-0">Войди в аккаунт, чтобы управлять профилем и скачать лаунчер.</p>
+    </div>
 
-        <label for="password">Пароль</label>
-        <input type="password" id="password" name="password" required autocomplete="current-password">
+    <div class="card">
+        <div id="alert" class="alert alert-error"></div>
+        <form id="loginForm" novalidate>
+            <label for="username">Логин или Email</label>
+            <input type="text" id="username" name="username" required autocomplete="username" placeholder="player или player@email.com">
 
-        <button type="submit" class="btn">Войти</button>
-    </form>
-    <p id="error" style="color: var(--error); margin-top: 0.75rem; display: none;"></p>
-    <p style="margin-top: 1rem;">Нет аккаунта? <a href="/register">Зарегистрироваться</a></p>
+            <label for="password">Пароль</label>
+            <input type="password" id="password" name="password" required autocomplete="current-password" placeholder="••••••••">
+
+            <button type="submit" class="btn" style="width:100%">Войти</button>
+        </form>
+        <p class="text-center mt-2 muted">Нет аккаунта? <a href="/register">Зарегистрироваться</a></p>
+    </div>
 </div>
 
 <script>
-document.getElementById('loginForm').addEventListener('submit', async (e) => {
+document.getElementById('loginForm').addEventListener('submit', async function(e) {
     e.preventDefault();
-    const form = new FormData(e.target);
-    const res = await fetch('/api/web/login', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({
-            username: form.get('username'),
-            password: form.get('password')
-        })
-    });
-    const data = await res.json();
-    if (!res.ok) {
-        document.getElementById('error').textContent = data.error || 'Ошибка входа';
-        document.getElementById('error').style.display = 'block';
+    const alert = document.getElementById('alert');
+    alert.className = 'alert alert-error';
+    alert.classList.remove('show');
+
+    const username = document.getElementById('username').value.trim();
+    const password = document.getElementById('password').value;
+
+    if (!username || !password) {
+        alert.textContent = 'Заполните все поля';
+        alert.classList.add('show');
         return;
     }
-    // Save token to localStorage and redirect.
-    localStorage.setItem('token', data.token);
-    localStorage.setItem('uuid', data.uuid);
-    localStorage.setItem('username', data.username);
-    window.location.href = '/';
+
+    try {
+        const res = await fetch('/api/web/login', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({username, password})
+        });
+        const data = await res.json();
+        if (!res.ok) {
+            alert.textContent = data.error || 'Ошибка входа';
+            alert.classList.add('show');
+            return;
+        }
+        localStorage.setItem('token', data.token);
+        localStorage.setItem('uuid', data.uuid);
+        localStorage.setItem('username', data.username);
+        window.location.href = '/profile';
+    } catch (err) {
+        alert.textContent = 'Ошибка сети. Попробуй ещё раз.';
+        alert.classList.add('show');
+    }
 });
 </script>
 {{end}}

internal/templates/html/profile.html

@@ -0,0 +1,240 @@
+{{define "content"}}
+<div id="authCheck" class="card text-center">
+    <p class="muted">Загрузка...</p>
+</div>
+
+<div id="profileContent" style="display:none">
+    <!-- Profile header -->
+    <div class="card">
+        <div class="profile-header">
+            <img class="profile-avatar" id="skinPreview" src="" alt="Аватар" onerror="this.src='data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27><rect fill=%27%23334155%27 width=%278%27 height=%278%27/></svg>'">
+            <div class="profile-info">
+                <h2 id="profUsername">—</h2>
+                <p class="uuid" id="profUuid">—</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Skin & Cape -->
+    <h2 class="section-title">👤 Скин и плащ</h2>
+    <div class="grid-2">
+        <div class="card">
+            <h3>Скин</h3>
+            <div id="currentSkin" class="text-center" style="margin-bottom:1rem">
+                <img id="skinImg" src="" alt="Скин" style="width:120px;height:160px;image-rendering:pixelated;background:var(--surface-light);border-radius:var(--radius-sm)" onerror="this.style.display='none'">
+                <p class="muted text-sm mt-1" id="noSkinMsg">Скин не загружен</p>
+            </div>
+            <div id="alertSkin" class="alert"></div>
+            <form id="skinForm" enctype="multipart/form-data">
+                <label for="skinFile">Загрузить скин (PNG, 64×64 или 64×32)</label>
+                <input type="file" id="skinFile" name="file" accept=".png">
+                <div class="flex gap-1">
+                    <button type="submit" class="btn btn-sm">Загрузить</button>
+                    <button type="button" id="deleteSkin" class="btn btn-sm btn-danger">Удалить</button>
+                </div>
+            </form>
+        </div>
+        <div class="card">
+            <h3>Плащ</h3>
+            <div id="currentCape" class="text-center" style="margin-bottom:1rem">
+                <img id="capeImg" src="" alt="Плащ" style="width:100px;height:160px;image-rendering:pixelated;background:var(--surface-light);border-radius:var(--radius-sm)" onerror="this.style.display='none'">
+                <p class="muted text-sm mt-1" id="noCapeMsg">Плащ не загружен</p>
+            </div>
+            <div id="alertCape" class="alert"></div>
+            <form id="capeForm" enctype="multipart/form-data">
+                <label for="capeFile">Загрузить плащ (PNG, 64×32)</label>
+                <input type="file" id="capeFile" name="file" accept=".png">
+                <div class="flex gap-1">
+                    <button type="submit" class="btn btn-sm">Загрузить</button>
+                    <button type="button" id="deleteCape" class="btn btn-sm btn-danger">Удалить</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Launcher download -->
+    <h2 class="section-title">💾 Лаунчер</h2>
+    <div class="card">
+        <p class="muted">Скачай лаунчер для своей операционной системы. Он автоматически загрузит все файлы модпаков.</p>
+        <div class="flex gap-1 mt-2" id="launcherLinks">
+            <a href="#" class="btn btn-sm" id="dl-win">🪟 Windows</a>
+            <a href="#" class="btn btn-sm" id="dl-mac">🍎 macOS</a>
+            <a href="#" class="btn btn-sm" id="dl-lin">🐧 Linux</a>
+        </div>
+        <p class="text-sm muted mt-2" id="latestVersion">Последняя версия: —</p>
+    </div>
+</div>
+
+<script>
+(function() {
+    const token = localStorage.getItem('token');
+    const savedUuid = localStorage.getItem('uuid');
+    const savedUsername = localStorage.getItem('username');
+
+    if (!token) {
+        document.getElementById('authCheck').innerHTML = '<h2>🔒 Требуется авторизация</h2><p class="muted">Войди в аккаунт, чтобы увидеть профиль.</p><p class="mt-2"><a href="/login" class="btn">Войти</a></p>';
+        return;
+    }
+
+    document.getElementById('authCheck').style.display = 'none';
+    document.getElementById('profileContent').style.display = 'block';
+
+    // Load profile
+    loadProfile();
+
+    async function loadProfile() {
+        try {
+            const res = await fetch('/api/web/profile/' + savedUuid, {
+                headers: {'Authorization': 'Bearer ' + token}
+            });
+            if (!res.ok) throw new Error('Failed to load');
+            const data = await res.json();
+
+            document.getElementById('profUsername').textContent = data.username || savedUsername || '—';
+            document.getElementById('profUuid').textContent = data.uuid || savedUuid || '—';
+
+            // Skin
+            if (data.textures && data.textures.skin) {
+                document.getElementById('skinImg').src = data.textures.skin;
+                document.getElementById('skinImg').style.display = 'inline';
+                document.getElementById('noSkinMsg').style.display = 'none';
+            } else {
+                document.getElementById('skinImg').style.display = 'none';
+                document.getElementById('noSkinMsg').style.display = 'block';
+            }
+
+            // Cape
+            if (data.textures && data.textures.cape) {
+                document.getElementById('capeImg').src = data.textures.cape;
+                document.getElementById('capeImg').style.display = 'inline';
+                document.getElementById('noCapeMsg').style.display = 'none';
+            } else {
+                document.getElementById('capeImg').style.display = 'none';
+                document.getElementById('noCapeMsg').style.display = 'block';
+            }
+        } catch (err) {
+            console.error('Profile load error:', err);
+        }
+    }
+
+    // Load latest launcher version
+    loadLauncherInfo();
+
+    async function loadLauncherInfo() {
+        try {
+            const res = await fetch('/api/launcher/latest');
+            if (!res.ok) return;
+            const data = await res.json();
+            document.getElementById('latestVersion').textContent = 'Последняя версия: ' + (data.version || '—');
+            if (data.downloads) {
+                if (data.downloads.windows) document.getElementById('dl-win').href = data.downloads.windows;
+                if (data.downloads.darwin) document.getElementById('dl-mac').href = data.downloads.darwin;
+                if (data.downloads.linux) document.getElementById('dl-lin').href = data.downloads.linux;
+            }
+        } catch (err) {}
+    }
+
+    // Skin upload
+    document.getElementById('skinForm').addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const file = document.getElementById('skinFile').files[0];
+        if (!file) return;
+        const fd = new FormData();
+        fd.append('file', file);
+        const alert = document.getElementById('alertSkin');
+        try {
+            const res = await fetch('/api/web/profile/skin', {
+                method: 'POST',
+                headers: {'Authorization': 'Bearer ' + token},
+                body: fd
+            });
+            const data = await res.json();
+            if (!res.ok) {
+                alert.className = 'alert alert-error show';
+                alert.textContent = data.error || 'Ошибка загрузки';
+            } else {
+                alert.className = 'alert alert-success show';
+                alert.textContent = 'Скин загружен!';
+                loadProfile();
+            }
+        } catch (err) {
+            alert.className = 'alert alert-error show';
+            alert.textContent = 'Ошибка сети';
+        }
+    });
+
+    // Cape upload
+    document.getElementById('capeForm').addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const file = document.getElementById('capeFile').files[0];
+        if (!file) return;
+        const fd = new FormData();
+        fd.append('file', file);
+        const alert = document.getElementById('alertCape');
+        try {
+            const res = await fetch('/api/web/profile/cape', {
+                method: 'POST',
+                headers: {'Authorization': 'Bearer ' + token},
+                body: fd
+            });
+            const data = await res.json();
+            if (!res.ok) {
+                alert.className = 'alert alert-error show';
+                alert.textContent = data.error || 'Ошибка загрузки';
+            } else {
+                alert.className = 'alert alert-success show';
+                alert.textContent = 'Плащ загружен!';
+                loadProfile();
+            }
+        } catch (err) {
+            alert.className = 'alert alert-error show';
+            alert.textContent = 'Ошибка сети';
+        }
+    });
+
+    // Delete skin
+    document.getElementById('deleteSkin').addEventListener('click', async function() {
+        const alert = document.getElementById('alertSkin');
+        try {
+            const res = await fetch('/api/web/profile/skin', {
+                method: 'DELETE',
+                headers: {'Authorization': 'Bearer ' + token}
+            });
+            if (!res.ok) {
+                alert.className = 'alert alert-error show';
+                alert.textContent = 'Ошибка удаления';
+            } else {
+                alert.className = 'alert alert-success show';
+                alert.textContent = 'Скин удалён';
+                loadProfile();
+            }
+        } catch (err) {
+            alert.className = 'alert alert-error show';
+            alert.textContent = 'Ошибка сети';
+        }
+    });
+
+    // Delete cape
+    document.getElementById('deleteCape').addEventListener('click', async function() {
+        const alert = document.getElementById('alertCape');
+        try {
+            const res = await fetch('/api/web/profile/cape', {
+                method: 'DELETE',
+                headers: {'Authorization': 'Bearer ' + token}
+            });
+            if (!res.ok) {
+                alert.className = 'alert alert-error show';
+                alert.textContent = 'Ошибка удаления';
+            } else {
+                alert.className = 'alert alert-success show';
+                alert.textContent = 'Плащ удалён';
+                loadProfile();
+            }
+        } catch (err) {
+            alert.className = 'alert alert-error show';
+            alert.textContent = 'Ошибка сети';
+        }
+    });
+})();
+</script>
+{{end}}

internal/templates/html/register.html

@@ -1,43 +1,77 @@
 {{define "content"}}
-<div class="card">
-    <h1>Регистрация</h1>
-    <form id="regForm">
-        <label for="username">Никнейм</label>
-        <input type="text" id="username" name="username" required minlength="3" maxlength="20" autocomplete="username">
+<div class="container-narrow">
+    <div class="card text-center">
+        <h1 style="margin-bottom:0.5rem">🎮 Создать аккаунт</h1>
+        <p class="muted mb-0">Присоединяйся к MrixsCraft и начни играть.</p>
+    </div>
 
-        <label for="email">Email</label>
-        <input type="email" id="email" name="email" required autocomplete="email">
+    <div class="card">
+        <div id="alert" class="alert alert-error"></div>
+        <form id="regForm" novalidate>
+            <label for="username">Никнейм</label>
+            <input type="text" id="username" name="username" required minlength="3" maxlength="20" autocomplete="username"
+                   placeholder="Player" pattern="[a-zA-Z0-9_]{3,20}">
+            <p class="form-error" id="err-username">3–20 символов: латиница, цифры, _</p>
 
-        <label for="password">Пароль</label>
-        <input type="password" id="password" name="password" required minlength="6" autocomplete="new-password">
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" required autocomplete="email" placeholder="player@email.com">
 
-        <button type="submit" class="btn">Создать аккаунт</button>
-    </form>
-    <p id="error" style="color: var(--error); margin-top: 0.75rem; display: none;"></p>
-    <p style="margin-top: 1rem;">Уже есть аккаунт? <a href="/login">Войти</a></p>
+            <label for="password">Пароль</label>
+            <input type="password" id="password" name="password" required minlength="6" autocomplete="new-password" placeholder="Минимум 6 символов">
+
+            <label for="password2">Подтверждение пароля</label>
+            <input type="password" id="password2" name="password2" required autocomplete="new-password" placeholder="Повтори пароль">
+            <p class="form-error" id="err-password">Пароли не совпадают</p>
+
+            <button type="submit" class="btn" style="width:100%">Создать аккаунт</button>
+        </form>
+        <p class="text-center mt-2 muted">Уже есть аккаунт? <a href="/login">Войти</a></p>
+    </div>
 </div>
 
 <script>
-document.getElementById('regForm').addEventListener('submit', async (e) => {
+document.getElementById('regForm').addEventListener('submit', async function(e) {
     e.preventDefault();
-    const form = new FormData(e.target);
-    const res = await fetch('/api/web/register', {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({
-            username: form.get('username'),
-            email: form.get('email'),
-            password: form.get('password')
-        })
-    });
-    const data = await res.json();
-    if (!res.ok) {
-        document.getElementById('error').textContent = data.error || 'Ошибка регистрации';
-        document.getElementById('error').style.display = 'block';
+    const alert = document.getElementById('alert');
+    alert.className = 'alert alert-error';
+    alert.classList.remove('show');
+
+    const username = document.getElementById('username').value.trim();
+    const email = document.getElementById('email').value.trim();
+    const password = document.getElementById('password').value;
+    const password2 = document.getElementById('password2').value;
+
+    // Client-side validation
+    if (!/^[a-zA-Z0-9_]{3,20}$/.test(username)) {
+        document.getElementById('err-username').style.display = 'block';
         return;
     }
-    // Registration successful — go to login.
-    window.location.href = '/login';
+    document.getElementById('err-username').style.display = 'none';
+
+    if (password !== password2) {
+        document.getElementById('err-password').style.display = 'block';
+        return;
+    }
+    document.getElementById('err-password').style.display = 'none';
+
+    try {
+        const res = await fetch('/api/web/register', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({username, email, password})
+        });
+        const data = await res.json();
+        if (!res.ok) {
+            alert.textContent = data.error || 'Ошибка регистрации';
+            alert.classList.add('show');
+            return;
+        }
+        // Success — redirect to login
+        window.location.href = '/login';
+    } catch (err) {
+        alert.textContent = 'Ошибка сети. Попробуй ещё раз.';
+        alert.classList.add('show');
+    }
 });
 </script>
 {{end}}

internal/templates/templates.go

@@ -14,7 +14,9 @@ import (
 
 // pageData is passed to all templates.
 type pageData struct {
-	Title string
+	Title    string
+	Username string
+	UUID     string
 }
 
 // Handler serves template-rendered pages.
@@ -37,6 +39,7 @@ func (h *Handler) RegisterRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("GET /", h.index)
 	mux.HandleFunc("GET /login", h.loginPage)
 	mux.HandleFunc("GET /register", h.registerPage)
+	mux.HandleFunc("GET /profile", h.profilePage)
 }
 
 // ── Page handlers ──────────────────────────────────────────────
@@ -69,6 +72,14 @@ func (h *Handler) registerPage(w http.ResponseWriter, r *http.Request) {
 	h.render(w, "register.html", pageData{Title: "Регистрация"})
 }
 
+func (h *Handler) profilePage(w http.ResponseWriter, r *http.Request) {
+	if !h.loaded {
+		fallback(w, "Profile")
+		return
+	}
+	h.render(w, "profile.html", pageData{Title: "Профиль"})
+}
+
 // render executes the named template with data, writing to w.
 func (h *Handler) render(w http.ResponseWriter, name string, data pageData) {
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")