PortableServer/icon-maker.html at main · Planetbiru/PortableServer · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG Icon Generator (32x32)</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f4f4f9;
            color: #333;
            text-align: center;
        }

        canvas {
            border: 1px solid #ccc;
            margin-top: 10px;
            background: white;
            image-rendering: pixelated;
        }

        .controls { margin-bottom: 20px; }
        .presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; max-width: 800px; margin: 20px auto; }
        .preset-btn { padding: 15px; cursor: pointer; border: 2px solid #ddd; background: #fff; text-align: center; border-radius: 8px; transition: all 0.2s; }
        .preset-btn:hover { background: #f0f7ff; border-color: #2196F3; transform: translateY(-2px); }
        .preset-btn svg { display: block; margin: 0 auto 10px; width: 32px; height: 32px; }
        .preset-btn span { font-size: 14px; font-weight: bold; color: #555; }

        textarea {
            width: 100%;
            max-width: 600px;
            height: 80px;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>

<body>

    <h2>Portable Server Icon Generator</h2>
    <p>Klik pada preset untuk memuat desain SVG, lalu unduh sebagai PNG 32x32.</p>

    <div class="controls">
        <textarea id="svgInput" placeholder="SVG Path atau Kode di sini..." oninput="generateCustom()"></textarea><br>
        <button onclick="downloadPNG()" style="background: #4CAF50; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px;">Download PNG</button>
    </div>

    <div class="presets" id="presetContainer"></div>

    <br>
    <canvas id="canvas" width="32" height="32"></canvas>
    <p id="status">Current File: <strong id="filename">start.png</strong></p>

    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const svgInput = document.getElementById("svgInput");
        let currentFileName = "start.png";

        const presets = {
            start: `<path d="M10 7l15 9-15 9V7z" fill="#4CAF50" stroke="#2E7D32" stroke-width="1"/>`,
            stop: `<rect x="8" y="8" width="16" height="16" rx="2" fill="#F44336" stroke="#C62828" stroke-width="1"/>`,
            maximize: `<rect x="5" y="5" width="22" height="22" rx="2" fill="none" stroke="#1976D2" stroke-width="3"/>`,
            minimize: `<line x1="5" y1="26" x2="27" y2="26" stroke="#1976D2" stroke-width="4" stroke-linecap="round"/>`,
            online: `<circle cx="16" cy="16" r="12" fill="none" stroke="#00BCD4" stroke-width="2"/><ellipse cx="16" cy="16" rx="5" ry="12" fill="none" stroke="#00BCD4" stroke-width="1"/><path d="M4 16h24M16 4v24" stroke="#00BCD4" stroke-width="1"/>`,
            offline: `<g opacity="0.5"><circle cx="16" cy="16" r="12" fill="none" stroke="#9E9E9E" stroke-width="2"/><ellipse cx="16" cy="16" rx="5" ry="12" fill="none" stroke="#9E9E9E" stroke-width="1"/><path d="M4 16h24M16 4v24" stroke="#9E9E9E" stroke-width="1"/></g><line x1="6" y1="6" x2="26" y2="26" stroke="#F44336" stroke-width="3" stroke-linecap="round"/>`,
            exit: `<path d="M8 8l16 16M24 8L8 24" stroke="#D32F2F" stroke-width="4" stroke-linecap="round"/>`
        };

        // Render preset buttons
        const container = document.getElementById('presetContainer');
        Object.keys(presets).forEach(key => {
            const btn = document.createElement('div');
            btn.className = 'preset-btn';
            btn.onclick = () => generatePreset(key);
            btn.innerHTML = `
                <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">${presets[key]}</svg>
                <span>${key.toUpperCase()}</span>
            `;
            container.appendChild(btn);
        });

        function generatePreset(name) {
            const svgContent = presets[name];
            currentFileName = `${name}.png`;
            document.getElementById("filename").innerText = currentFileName;
            svgInput.value = svgContent;
            drawSVG(svgContent);
        }

        function generateCustom() {
            const content = svgInput.value;
            currentFileName = "custom.png";
            document.getElementById("filename").innerText = currentFileName;
            drawSVG(content);
        }

        function drawSVG(innerContent) {
            if (!innerContent) return;

            // Bungkus dengan tag svg jika belum ada
            const fullSvg = innerContent.trim().startsWith('<svg') ? innerContent :
                `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">${innerContent}</svg>`;

            const img = new Image();
            img.onload = function () {
                ctx.clearRect(0, 0, 32, 32);
                ctx.drawImage(img, 0, 0, 32, 32);
            };
            img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(fullSvg);
        }

        function downloadPNG() {
            const link = document.createElement("a");
            link.download = currentFileName;
            link.href = canvas.toDataURL("image/png");
            link.click();
        }

        generatePreset('start');
    </script>

</body>

</html>