Hybridious.github.io/index.html at main · Hybridious/Hybridious.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Convert Minecraft skins into 3D schematic files. Upload a skin or fetch from any username to create statues with customizable blocks. Compatible with Litematica, WorldEdit, and MCEdit.">
	<meta name="keywords" content="minecraft, skin converter, schematic, statue, litematica, worldedit, mcedit, minecraft skin, 3d model, minecraft tools, skin to statue, minecraft builder">
	<meta name="author" content="Hybridious">
	<meta name="robots" content="index, follow">
	<meta name="language" content="English">
	<meta name="revisit-after" content="7 days">
    <title>Statuefication - Hybridious</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Skin to Statue</h1>
        <p class="subtitle">Convert Minecraft skins into 3D schematic files</p>

        <div class="upload-area" id="uploadArea" role="button" tabindex="0" aria-label="Upload skin file. Press Enter or Space to browse files">
            <div class="upload-icon" aria-hidden="true">↑</div>
            <p><strong>Upload skin file</strong></p>
            <p>Drag and drop or click to browse (64x64 or 64x32 PNG)</p>
            <input type="file" id="fileInput" accept="image/png" aria-label="Select Minecraft skin file">
        </div>

        <div class="divider">
            <span>OR</span>
        </div>

        <div class="username-section">
            <label for="usernameInput" style="display: block; margin-bottom: 12px; color: #e6edf3; font-weight: 600; font-size: 15px;">
                Fetch from Minecraft username:
            </label>
            <div class="username-input-group">
                <input
                    type="text"
                    id="usernameInput"
                    placeholder="Enter username (e.g. Notch)"
                    aria-label="Minecraft username"
                    aria-describedby="username-desc"
                >
                <button id="fetchBtn" class="fetch-btn" aria-label="Fetch skin from username">
                    Fetch Skin
                </button>
            </div>
            <span id="username-desc" style="display: none;">Enter a Minecraft username to automatically download their skin</span>
        </div>

        <div class="preview-section" id="previewSection" aria-label="Skin preview">
            <h3>Preview:</h3>
            <canvas id="preview" width="256" height="256" role="img" aria-label="Uploaded Minecraft skin preview"></canvas>
        </div>

        <div class="options">
            <div class="option-group">
                <label for="scale">Scale multiplier (1-5):</label>
                <input type="number" id="scale" min="1" max="5" value="1" aria-describedby="scale-desc">
                <span id="scale-desc" style="display: none;">Choose a number between 1 and 5 to multiply the statue size</span>
            </div>

            <div class="option-group" role="group" aria-labelledby="block-types-label">
                <label id="block-types-label">Block types:</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="useConcrete" checked aria-describedby="concrete-desc">
                        <label for="useConcrete">Concrete</label>
                        <span id="concrete-desc" style="display: none;">Bright, vibrant colored blocks</span>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="useWool" checked aria-describedby="wool-desc">
                        <label for="useWool">Wool</label>
                        <span id="wool-desc" style="display: none;">Soft, matte textured blocks</span>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="useTerracotta" checked aria-describedby="terracotta-desc">
                        <label for="useTerracotta">Terracotta</label>
                        <span id="terracotta-desc" style="display: none;">Earthy, darker toned blocks</span>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="useGlass" aria-describedby="glass-desc">
                        <label for="useGlass">Stained Glass</label>
                        <span id="glass-desc" style="display: none;">Translucent, luminous blocks</span>
                    </div>
                </div>
            </div>

            <div class="option-group" role="group" aria-labelledby="layer-options-label">
                <label id="layer-options-label">Additional options:</label>
                <div class="checkbox-item" style="width: 100%;">
                    <input type="checkbox" id="useOuterLayer" aria-describedby="outer-layer-desc">
                    <label for="useOuterLayer">Include outer layer</label>
                    <span id="outer-layer-desc" style="display: none;">Adds second layer for hats, jackets, and clothing</span>
                </div>
            </div>
        </div>

        <button class="convert-btn" id="convertBtn" disabled aria-disabled="true">Convert to Schematic</button>

        <div class="status" id="status" role="status" aria-live="polite"></div>

        <div class="info-box">
            <strong>Full 3D player model</strong>
            Upload a skin file or fetch directly from any Minecraft username. Includes optional outer layer for authentic Minecraft-style shells. Compatible with Litematica, WorldEdit, and MCEdit.
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
    <script src="script.js"></script>
</body>
</html>