tools/url-encoder-decoder.html at main · nmwafa/tools · 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Encoder & Decoder</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom scrollbar for a cleaner look */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f3f4f6;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: #d1d5db;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

        /* Menyembunyikan panah default pada input type number */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800 font-sans min-h-screen flex items-center justify-center p-4">

    <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl w-full max-w-3xl border border-gray-200">

        <!-- Header -->
        <div class="mb-6 text-center">
            <h1 class="text-3xl font-bold text-gray-800 tracking-tight">URL Encoder / Decoder</h1>
        </div>

        <!-- Main Content -->
        <div class="space-y-6">

            <!-- Input Area -->
            <div>
                <label for="inputText" class="block text-sm font-semibold text-gray-700 mb-2">Teks / URL Input</label>
                <textarea id="inputText" rows="4"
                    class="w-full p-4 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gray-400 focus:border-gray-400 focus:outline-none transition-all resize-none shadow-sm"
                    placeholder="Masukkan URL atau teks di sini..."></textarea>
            </div>

            <!-- Controls Toolbar -->
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4 bg-gray-50 p-4 rounded-xl border border-gray-200 shadow-sm">

                <div class="flex items-center gap-3 w-full sm:w-auto">
                    <!-- Mode Selection -->
                    <div class="relative w-full sm:w-auto">
                        <select id="modeSelect" class="w-full sm:w-auto appearance-none bg-white border border-gray-300 text-gray-700 py-2.5 pl-4 pr-10 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 font-medium cursor-pointer shadow-sm">
                            <option value="encode">Encode (Ubah ke URL)</option>
                            <option value="decode">Decode (Baca URL)</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                        </div>
                    </div>

                    <!-- Iteration Count (+ / -) -->
                    <div class="flex items-center bg-white border border-gray-300 rounded-lg shadow-sm overflow-hidden">
                        <button id="btnMinus" class="px-3 py-2 bg-gray-50 hover:bg-gray-100 text-gray-600 font-bold border-r border-gray-300 transition-colors focus:outline-none">-</button>
                        <input type="number" id="iterationCount" min="1" max="10" value="1"
                            class="w-12 text-center text-gray-800 focus:outline-none font-semibold bg-transparent py-2">
                        <button id="btnPlus" class="px-3 py-2 bg-gray-50 hover:bg-gray-100 text-gray-600 font-bold border-l border-gray-300 transition-colors focus:outline-none">+</button>
                    </div>
                </div>

                <!-- Swap Button (Icon Only) -->
                <button id="switchBtn" class="flex items-center justify-center bg-gray-200 hover:bg-gray-300 text-gray-700 p-2.5 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 shadow-sm" title="Tukar Input & Output">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M7 10v12"></path>
                        <path d="M11 18l-4 4-4-4"></path>
                        <path d="M17 14V2"></path>
                        <path d="M13 6l4-4 4 4"></path>
                    </svg>
                </button>
            </div>

            <!-- Output Area -->
            <div>
                <div class="flex justify-between items-end mb-2">
                    <label for="outputText" class="block text-sm font-semibold text-gray-700">Hasil Output</label>
                    <button id="copyBtn" class="flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-md transition-colors font-medium">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                        </svg>
                        <span id="copyText">Salin Hasil</span>
                    </button>
                </div>
                <textarea id="outputText" rows="4" readonly
                    class="w-full p-4 bg-gray-100 border border-gray-300 rounded-xl focus:outline-none text-gray-800 resize-none shadow-inner"
                    placeholder="Hasil akan muncul di sini..."></textarea>
            </div>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const inputText = document.getElementById('inputText');
            const outputText = document.getElementById('outputText');
            const modeSelect = document.getElementById('modeSelect');
            const iterationCount = document.getElementById('iterationCount');
            const btnMinus = document.getElementById('btnMinus');
            const btnPlus = document.getElementById('btnPlus');
            const switchBtn = document.getElementById('switchBtn');
            const copyBtn = document.getElementById('copyBtn');
            const copyText = document.getElementById('copyText');

            // Fungsi utama untuk memproses teks
            function processUrl() {
                let text = inputText.value;
                if (!text) {
                    outputText.value = '';
                    outputText.classList.remove('text-red-500', 'font-semibold');
                    return;
                }

                const mode = modeSelect.value;
                // Pastikan iterasi minimal 1
                let iterations = parseInt(iterationCount.value);
                if (isNaN(iterations) || iterations < 1) iterations = 1;

                try {
                    for (let i = 0; i < iterations; i++) {
                        if (mode === 'encode') {
                            text = encodeURIComponent(text);
                        } else if (mode === 'decode') {
                            text = decodeURIComponent(text);
                        }
                    }
                    outputText.value = text;
                    outputText.classList.remove('text-red-500', 'font-semibold');
                } catch (error) {
                    // Menangani error jika URL yang di-decode tidak valid
                    outputText.value = "Error: Teks tidak valid untuk di-decode.";
                    outputText.classList.add('text-red-500', 'font-semibold');
                }
            }

            // Fungsi untuk menukar input dan output (bolak-balik)
            function switchData() {
                const currentOutput = outputText.value;

                // Jangan tukar jika output kosong atau berisi pesan error
                if (!currentOutput || currentOutput.startsWith("Error:")) return;

                // Pindahkan hasil ke input
                inputText.value = currentOutput;

                // Ubah mode secara otomatis (Encode <-> Decode)
                modeSelect.value = modeSelect.value === 'encode' ? 'decode' : 'encode';

                // Proses ulang
                processUrl();
            }

            // Fungsi untuk menyalin hasil ke clipboard
            function copyToClipboard() {
                const textToCopy = outputText.value;
                if (!textToCopy || textToCopy.startsWith("Error:")) return;

                // Use the Clipboard API with a fallback for older browsers or iFrames
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(textToCopy).then(() => {
                        showCopiedFeedback();
                    }).catch(err => {
                        fallbackCopyTextToClipboard(textToCopy);
                    });
                } else {
                    fallbackCopyTextToClipboard(textToCopy);
                }
            }

            // Fallback for iFrames or environments without clipboard API
            function fallbackCopyTextToClipboard(text) {
                const textArea = document.createElement("textarea");
                textArea.value = text;

                // Avoid scrolling to bottom
                textArea.style.top = "0";
                textArea.style.left = "0";
                textArea.style.position = "fixed";

                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();

                try {
                    const successful = document.execCommand('copy');
                    if (successful) {
                        showCopiedFeedback();
                    } else {
                        console.error('Fallback: Copying text command was unsuccessful');
                    }
                } catch (err) {
                    console.error('Fallback: Oops, unable to copy', err);
                }

                document.body.removeChild(textArea);
            }

            // UI Feedback for copy
            function showCopiedFeedback() {
                const originalHTML = copyBtn.innerHTML;

                // Change button appearance to success state
                copyBtn.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>
                    <span class="text-green-600">Tersalin!</span>
                `;
                copyBtn.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'text-gray-600');
                copyBtn.classList.add('bg-green-50', 'border', 'border-green-200', 'text-green-700');

                // Revert back after 2 seconds
                setTimeout(() => {
                    copyBtn.innerHTML = originalHTML;
                    copyBtn.classList.remove('bg-green-50', 'border', 'border-green-200', 'text-green-700');
                    copyBtn.classList.add('bg-gray-100', 'hover:bg-gray-200', 'text-gray-600');
                }, 2000);
            }

            // Fungsi tombol Minus dan Plus
            btnMinus.addEventListener('click', () => {
                let val = parseInt(iterationCount.value) || 1;
                if (val > parseInt(iterationCount.min)) {
                    iterationCount.value = val - 1;
                    processUrl();
                }
            });

            btnPlus.addEventListener('click', () => {
                let val = parseInt(iterationCount.value) || 1;
                if (val < parseInt(iterationCount.max)) {
                    iterationCount.value = val + 1;
                    processUrl();
                }
            });

            // Event Listeners (Live Preview / Auto Update)
            inputText.addEventListener('input', processUrl);
            modeSelect.addEventListener('change', processUrl);
            iterationCount.addEventListener('input', processUrl);

            // Buttons
            switchBtn.addEventListener('click', switchData);
            copyBtn.addEventListener('click', copyToClipboard);
        });
    </script>
</body>
</html>