-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
330 lines (329 loc) · 27.8 KB
/
index.html
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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python Minifier - GLAD432</title>
<meta name="robots" content="index, follow">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="description" content="Optimize your python code's performance with our Python minifier online. Python minifier remove whitespace, comments, and line breaks to compress code, optimizing script size for faster loading and improved efficiency." />
<meta name="keywords" content="Python, minifier, Python code optimization, online tool, script compression, code minification, web development, optimize Python code, improve script performance, reduce code size, web application optimization, code efficiency, code speed, streamline Python scripts">
<meta name="author" content="Glad432">
<link rel="canonical" href="https://glad432.github.io" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="Python Minifier - GLAD432" />
<meta property="og:type" content="Website" />
<meta property="og:description" content="Optimize your python code's performance with our Python minifier online. Python minifier removes whitespace, comments, and line breaks to compress code, optimizing script size for faster loading and improved efficiency." />
<meta property="og:site_name" content="Python Minifier - GLAD432" />
<meta property="og:image" content="https://glad432.github.io/favicon.ico" />
<meta property="og:image:secure_url" content="https://glad432.github.io/favicon.ico" />
<meta property="og:image:width" content="225" />
<meta property="og:image:height" content="225" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@gladw_in">
<meta name="twitter:creator" content="@gladw_in">
<meta name="twitter:title" content="Python Minifier - GLAD432">
<meta name="twitter:domain" content="glad432.github.io">
<meta name="twitter:description" content="Optimize your web app's performance with our Python minifier online. Python minifier remove whitespace, comments, and line breaks to compress code, optimizing script size for faster loading and improved efficiency.">
<meta name="twitter:image" content="https://glad432.github.io/favicon.ico">
<meta name="twitter:image:src" content="https://glad432.github.io/favicon.ico">
<meta name="twitter:image:alt" content="Python Minifier - GLAD432">
<link rel="icon" type="image/png" href="https://glad432.github.io/favicon.ico" />
<link rel="shortcut icon" href="https://glad432.github.io/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="https://glad432.github.io/favicon.ico" />
<meta name="msapplication-TileImage" content="https://glad432.github.io/favicon.ico" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HDTEFZ9987"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-HDTEFZ9987');
</script>
<script>
(() => {
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (localStorage.getItem("darkMode") === null) {
localStorage.setItem("darkMode", JSON.stringify(isDarkMode));
}
document.documentElement.classList.toggle("dark", isDarkMode);
})();
</script>
</head>
<body class="bg-gray-100 font-sans select-none transition-colors duration-200 ease-in-out underline-links dark:bg-[#1e2022] dark:text-white">
<header class="top-0 z-30 w-full px-2 py-4 bg-black shadow-xl shadow-black-600/20 sm:px-4">
<div class="flex items-center justify-between mx-auto max-w-7xl">
<span class="pl-4 text-2xl font-extrabold text-white">
<a href="https://glad432.github.io" title="Python Minifier - GLAD432">
<img src="/img/logo.webp" height="44" width="196" alt="Glad432" oncontextmenu="return false;">
</a>
</span>
<label class="inline-block ml-auto relative w-8 h-8 switch">
<input type="checkbox" id="darkModeToggle" aria-label="Toggle dark mode">
<span class="slide top-0 left-0 right-0 bottom-0 round rounded-full absolute before:font-['Font_Awesome_6_Free'] before:top-[3.5px] before:left-[7px] before:font-black before:text-lg before:text-white before:absolute before:content-['\f185'] cursor-pointer hover:bg-blue-700"></span>
</label>
<div class="flex items-center space-x-1">
<nav>
<ul class="hidden space-x-2 md:inline-flex">
<li>
<a href="https://github.com/glad432/glad432.github.io" target="_blank" rel="noopener noreferrer" class="px-4 py-2 font-semibold text-white rounded hover:text-blue-700">Github</a>
</li>
</ul>
</nav>
<div class="inline-flex md:hidden">
<button aria-label="Open menu" class="flex-none px-2 text-2xl text-white" id="menuToggle">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
</svg>
</button>
<div class="absolute top-0 left-0 right-0 z-50 flex-col p-2 pb-4 m-2 space-y-3 bg-black rounded shadow hidden" id="menu">
<button aria-label="Close menu" class="self-end flex-none px-2 ml-2 text-2xl text-white" id="menuClose">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<nav>
<ul class="space-y-2">
<li>
<a href="https://github.com/glad432/glad432.github.io" target="_blank" rel="noopener noreferrer" class="px-4 py-2 font-semibold text-white rounded hover:text-blue-700">Github</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="mx-4 md:mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-4 md:p-8 bg-white mt-8 mb-8 rounded-lg shadow dark:bg-[#181a1b] dark:shadow-lg">
<div class="rounded p-5 mb-5 border-2 text-center border-solid border-[#d3d3d3] dark:border-[#3c4144]">
<h1 class="mb-4 text-3xl font-extrabold text-white md:text-5xl lg:text-6xl dark:text-white">
<span class="cursor-default text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 via-blue-400 to-blue-400">Python Minifier</span>
</h1>
<div class="mb-2 md:mb-4">
<div class="mb-3 text-gray-700 text-[13px] lg:text-[15px] font-['Source_Code_Pro'] dark:text-gray-300">Optimizing Python Code for <span id="anitext" class="font-bold"></span>
</div>
</div>
</div>
<h2 class="relative text-2xl font-bold mt-8 mb-5 text-white bg-black block rounded py-6 pl-[15px] [box-shadow:0_0_2px_rgb(0_0_0/30%)] [border-left:5px_solid_#3b82f6]">Original Code</h2>
<div id="tabs-overlay" class="hidden cursor-default absolute h-[340px] z-10 left-[1vh] right-[1vh] bg-transparent"></div>
<button id="from_url" class="text-base font-bold bg-green-500 text-white py-1 px-2 rounded hover:bg-green-600 ease-out overflow-hidden transform dark:bg-green-600 dark:hover:bg-green-700">Load from URL <i id="fade-4" class="fa-solid fa-link"></i>
</button>
<div id="inputContainer" class="hidden mt-4 dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">
<div class="flex flex-col items-center">
<div class="flex items-center">
<input type="text" id="fileLinkInput" placeholder="Enter .py link" spellcheck="false" class="cursor-text border border-gray-300 text-sm rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 py-2 px-4 dark:border-gray-600 dark:text-white dark:focus:ring-blue-400">
<button id="load_File" title="Or click Enter button to load" class="text-base ml-2 font-bold bg-red-500 text-white py-1 px-2 rounded hover:bg-red-600 ease-out overflow-hidden transform dark:bg-red-600 dark:hover:bg-red-700">Load <i id="fade-3" class="fa-solid fa-cloud-arrow-down"></i>
</button>
</div>
<div class="flex mr-auto text-sm cursor-pointer mt-1 ml-1 space-x-2 font-semibold">
<div class="help-container !relative !top-[1.5px] right-0 mr-2" oncontextmenu="return false">
<i class="fas fa-question-circle fa-sm text-sm text-blue-500 mr-2"></i>
<div class="help-content absolute cursor-default rounded-lg">
<p class="text-sm text-gray-700 dark:text-gray-300">Only Raw Github URLs (400kb) are recommended</p>
</div>
</div>
<span id="sample_link" class="text-blue-600 hover:underline dark:text-blue-400">Try sample URL <i id="fade-6" class="fa-solid fa-circle-arrow-up fa-sm"></i>
</span>
<span id="clear_link" class="text-red-500 hover:underline dark:text-red-400">Clear <i id="fade-7" class="fa-solid fa-trash-can fa-sm"></i>
</span>
</div>
</div>
</div>
<input class="hidden" type="file" id="fileInput" accept=".py" multiple />
<div id="dropArea" class="cursor-pointer rounded-xl border-dashed border-4 border-gray-300 text-center bg-white p-4 md:p-8 m-5 transition-transform duration-300 ease-in-out hover:scale-x-[.99] dark:bg-[#333] dark:border-[#3c4143] dark:[color-scheme:dark] dark:text-[#e8e6e3]">Drag and drop <span class="font-bold pr-1">.py files</span>here or click to <span class="text-blue-600 font-bold hover:underline dark:text-blue-400">browse <i class="fa-solid fa-file-arrow-up"></i>
</span>
</div>
<div class="text-left">
<span id="line-count" class="font-bold px-4 py-2 bg-blue-500 rounded text-white dark:bg-blue-600">Lines: 53</span>
<span id="text-size" class="font-bold px-4 py-2 bg-blue-500 rounded text-white dark:bg-blue-600">1.211 kB</span>
</div>
<p id="errmsg"></p>
<div class="flex items-center">
<ul id="file-tabs" class="list-none pr-px mr-1 [scrollbar-width:thin] pt-3 whitespace-nowrap inline-flex overflow-x-auto dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">
<li class="file-tab relative cursor-pointer bg-[#f0f0f0] border-[#ccc] px-[25px] py-2 mb-[5px] border border-solid rounded mr-[5px] transition-opacity active" id="file-1" title="1st Tab">
<i class="fa-brands fa-python text-blue-600 pr-2"></i>File 1.py
</li>
</ul>
<button id="addNewTab" class="mt-2" title="click to add a new tab">
<i class="fa-solid fa-circle-plus fa-xl text-gray-700 dark:text-gray-300"></i>
</button>
</div>
<div id="loading-editor" class="flex items-center justify-center w-auto h-[300px]">
<div class="text-sm sm:text-xs md:text-xs lg:text-sm font-bold text-gray-700 dark:text-gray-300">Loading <i class="fa-solid fa-spinner fa-spin-pulse fa-sm"></i>
</div>
</div>
<div id="editor" class="hidden w-auto h-[300px] mt-0.5 rounded overflow-hidden border border-solid border-[#cccccc8f] [border-left:6px_solid_rgba(0,_83,_159,_0.65)] dark:border-[#3e4446] dark:[border-left:6px_solid_#00539fa6]">
<div id="type-overlay" class="md:md:cursor-default md:absolute md:h-[300px] md:z-10 md:left-[10vh] md:right-[10vh] md:bg-transparent"></div>
</div>
<button id="clearAll" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-red-500 rounded text-white hover:bg-red-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-red-600 dark:hover:bg-red-700"> Clear <i id="fade-5" class="fa-solid fa-trash fa-xs"></i>
</button>
<div class="text-left block place-self-center w-fit my-10 p-4 rounded border-t-[5px] border-solid border-blue-500 [box-shadow:0_1px_3px_#999] md:mx-auto md:p-8 dark:border-blue-700 dark:bg-[#181a1b] dark:text-white dark:[box-shadow:#52585c_0_1px_3px] dark:[border-top-color:#0f3c9f]">
<p id="showOptions" class="cursor-pointer underline underline-offset-3 decoration-8 decoration-blue-600 pb-4 mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 hover:text-gray-700 md:text-5xl lg:text-6xl dark:text-white dark:hover:text-gray-400">Options:</p>
<div id="showOptionsContent" class="max-h-[0] overflow-hidden relative [transition:max-height_0.6s_ease-in-out]">
<div id="minifyOptionContainer"></div>
<a class="text-blue-500 text-base hover:underline hover:text-blue-600 dark:text-blue-400" href="https://dflook.github.io/python-minifier/transforms" target="_blank" rel="noopener noreferrer">Learn More <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i>
</a>
<div class="mt-4 space-x-2 text-center">
<button id="selectall" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-green-500 rounded text-white hover:bg-green-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-green-600 dark:hover:bg-green-700">Select all</button>
<button id="resetOpt" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-red-500 rounded text-white hover:bg-red-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-red-600 dark:hover:bg-red-700">Reset</button>
</div>
</div>
</div>
<div class="mb-2 md:mb-4 text-center">
<span id="minify" class="relative rounded cursor-pointer pt-5 p-4 overflow-hidden group bg-blue-500 hover:bg-gradient-to-r hover:from-blue-500 hover:to-blue-400 text-white hover:ring-2 hover:ring-offset-2 hover:ring-blue-400 transition-all ease-out duration-300 z-0 dark:bg-[#0844a6] dark:hover:from-[#2a62a7] dark:hover:to-[#2a62a7]">
<span class="absolute right-0 w-8 h-40 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease dark:bg-[#181a1b]"></span>
<span class="relative font-bold text-2xl">Minify <i class="fa-solid fa-down-left-and-up-right-to-center fa-sm"></i>
</span>
</span>
<button id="minifyAll" disabled class="hidden px-3 py-2 ml-2 font-bold cursor-pointer bg-blue-500 rounded-full text-white hover:bg-blue-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 z-10 dark:bg-[#0844a6]"> 5+ </button>
</div>
<h2 class="relative text-2xl font-bold mt-8 mb-5 text-white bg-black block rounded py-6 pl-[15px] [box-shadow:0_0_2px_rgb(0_0_0/30%)] [border-left:5px_solid_#ef4444]">Minified Code</h2>
<div class="text-left">
<span id="line-count-out" class="font-bold px-4 py-2 bg-red-500 rounded text-white dark:bg-red-600">Lines: 1</span>
<span id="minified-size" class="font-bold px-4 py-2 bg-red-500 rounded text-white dark:bg-red-600">0.000 kB</span>
</div>
<div class="flex items-center">
<div id="tabs-overlay-out" class="hidden cursor-default absolute h-20 z-10 left-[1vh] right-[1vh] bg-transparent"></div>
<ul id="file-tabs-out" class="list-none pr-px mr-1 [scrollbar-width:thin] pt-3 whitespace-nowrap inline-flex overflow-x-auto dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">
<li class="file-tab-out relative cursor-pointer bg-[#f0f0f0] border-[#ccc] px-[25px] py-2 mb-[5px] border border-solid rounded mr-[5px] transition-opacity active" id="file-out-1" title="1st Tab">
<i class="fa-brands fa-python text-blue-600 pr-2"></i>File 1.py
</li>
</ul>
</div>
<div id="loading-minified" class="flex items-center justify-center w-auto h-[300px]">
<div class="text-sm sm:text-xs md:text-xs lg:text-sm font-bold text-gray-700 dark:text-gray-300">Loading <i class="fa-solid fa-spinner fa-spin-pulse fa-sm"></i>
</div>
</div>
<div id="minified" class="hidden w-auto h-[300px] mt-0.5 rounded overflow-hidden border border-solid border-[#cccccc8f] [border-left:6px_solid_rgba(0,_83,_159,_0.65)] dark:border-[#3e4446] dark:[border-left:6px_solid_#00539fa6]"></div>
<div id="btns-overlay" class="hidden cursor-default absolute h-28 z-10 left-[1vh] right-[1vh] bg-transparent"></div>
<div class="flex flex-col mb-2 md:mb-4">
<div class="flex flex-wrap justify-center lg:justify-start gap-0.5 mt-3">
<div class="flex flex-wrap justify-center gap-[3px] md:gap-1">
<button id="dw" disabled class="px-4 py-2 mt-2 font-bold cursor-pointer bg-red-500 rounded text-white hover:bg-red-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-red-600 dark:text-white dark:hover:bg-red-700">Download <i id="fade-1" class="fa-solid fa-download"></i>
</button>
<button id="copy" disabled class="px-4 py-2 mt-2 mr-0.5 font-bold cursor-pointer bg-green-500 rounded text-white hover:bg-green-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-green-600 dark:text-white dark:hover:bg-green-700">Copy <i class="fa-solid fa-clipboard"></i>
</button>
</div>
<button id="diffPopup" class="hidden md:block mr-0.5 px-4 py-2 mt-2 font-bold cursor-pointer bg-orange-500 rounded text-white hover:bg-orange-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-orange-600 dark:text-white">Compare <i id="fade-10" class="fa-solid fa-code-compare"></i>
</button>
<button id="runCode" class="sm:w-auto px-4 py-2 font-bold cursor-pointer bg-purple-500 rounded text-white hover:bg-purple-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 mt-2 dark:bg-purple-600 dark:hover:bg-purple-700">Run Code <i class="fa-regular fa-circle-play"></i>
</button>
</div>
<div id="comProgress" class="hidden mt-2 w-full sm:w-auto dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">
<progress id="comProgressBar" max="100" value="0" class="w-full h-2"></progress>
<p id="comProgressStatus" class="mt-2 text-base dark:text-gray-300"></p>
</div>
</div>
</div>
<div id="pyterminal" class="hidden mx-4 md:mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-4 md:p-8 bg-white mt-8 mb-8 rounded-lg shadow max-h-[420px] dark:bg-[#181a1b]">
<div class="flex items-center">
<h4 class="text-2xl font-bold from-blue-600 via-blue-400 to-blue-500 bg-gradient-to-r bg-clip-text text-transparent mb-2">
<i class="fa-brands fa-python"></i> Python Compiler
</h4>
<div class="hidden md:block">
<div class="flex ml-2 relative bottom-5 text-sm cursor-pointer space-x-2 font-semibold dark:text-gray-300">
<div class="help-container !left-0 mr-2" oncontextmenu="return false">
<i class="fas fa-question-circle text-gray-400"></i>
<div class="help-content absolute cursor-default rounded-lg bg-white !w-80 shadow-md text-sm">
<ol class="text-gray-700 list-decimal list-inside dark:text-gray-300">
<li>Max time: 50 seconds.</li>
<li>Compiled after minification.</li>
<li>Avoid sensitive code.</li>
<li>I/O, library, or write limits not available.</li>
<li>Online compilers may be slower.</li>
<li>No input support.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<pre id="terminaltext" class="select-text font-mono text-xs lg:text-sm max-h-[295px] overflow-auto p-3 rounded [scrollbar-width:thin] text-[#424242] bg-[#c8c8c824] dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#48e448] dark:bg-[#202020]"></pre>
<button id="closeCompiler" class="cursor-pointer mt-1.5 pl-2 font-semibold text-red-500 hover:underline dark:text-red-400 dark:hover:text-red-300">Close</button>
<button id="copyCompilertext" class="cursor-pointer mt-1.5 pl-2 font-semibold text-green-500 hover:underline dark:text-green-400 dark:hover:text-green-300">Copy</button>
<button id="exportCompilertext" class="cursor-pointer mt-1.5 pl-2 font-semibold text-blue-500 hover:underline dark:text-blue-400 dark:hover:text-blue-300">Export</button>
</div>
<div id="graph-container" class="hidden font-['Source_Code_Pro'] mx-4 md:mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-4 md:p-8 bg-white mt-8 mb-8 rounded-lg shadow dark:bg-[#181a1b]">
<h4 class="text-2xl font-bold from-blue-600 via-blue-400 to-blue-500 bg-gradient-to-r bg-clip-text text-transparent mb-2 font-sans">
<i class="fa-solid fa-chart-line"></i> Visualization
</h4>
<div id="line-graph"></div>
<p class="text-sm mb-2 text-neutral-500 font-sans font-medium dark:text-neutral-300">Minify to update</p>
<div class="text-center space-x-1">
<button id="graphkbsize" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-green-500 rounded text-white hover:bg-green-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-green-600 dark:hover:bg-green-500">Size</button>
<button id="graphlines" class="px-4 py-2 mt-2 font-bold cursor-pointer bg-blue-500 rounded text-white hover:bg-blue-600 ease-out overflow-hidden transform md:hover:scale-x-105 md:hover:scale-y-100 dark:bg-blue-600 dark:hover:bg-blue-500">Lines</button>
</div>
</div>
<div class="relative">
<div id="diff-popup" class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center hidden z-50 dark:bg-[#3938388c]">
<div id="diff-popup-content" class="relative w-[90%] h-[90%] bg-white rounded shadow-lg overflow-hidden transform scale-90 opacity-0 transition-opacity duration-300 z-60 dark:bg-[#181a1b]">
<div class="flex items-center pl-1 mx-2">
<ul id="diff-tabs" class="mb-2.5 overflow-x-auto [scrollbar-width:thin] pr-px mr-1 pt-3 inline-flex text-nowrap dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]"></ul>
<div class="flex flex-col ml-auto">
<label for="diff-text-wrap" class="flex items-center self-center cursor-pointer pl-2">
<input type="checkbox" id="diff-text-wrap" class="sr-only peer">
<div class="relative w-9 h-5 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-600"></div>
</label>
<span class="cursor-pointer text-neutral-500 pl-2 font-medium text-center text-xs">Line Wrap</span>
</div>
</div>
<div id="diff-editor" class="h-full w-full"></div>
</div>
</div>
<button id="close-diff-popup" class="fixed hidden top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 items-center justify-center text-xl cursor-pointer hover:bg-red-600 focus:outline-none z-[70] dark:bg-red-600" title="Close Diff Editor">
<i id="fade-11" class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="flex justify-center items-center pb-[25px]">
<div class="bg-white rounded-lg p-6 flex flex-col md:flex-row md:items-center transition-transform hover:scale-x-[1.02] [box-shadow:0_10px_15px_-3px_#0000001a,_0_4px_6px_-4px_#0000001a] dark:bg-[#181a1b] dark:[box-shadow:0_10px_15px_-3px_rgba(8,_8,_8,_0.3),_0_4px_6px_-4px_rgba(8,_8,_8,_0.2)]">
<div class="mb-6 md:mb-0 md:mr-6">
<p class="font-extrabold font-['Source_Code_Pro'] text-center tracking-wide uppercase dark:[color-scheme:dark] dark:border-[#736b5e] dark:text-[#e8e6e3]">Share it on..</p>
</div>
<div class="flex flex-wrap justify-center">
<a href="whatsapp://send?text=Check%20out%20this%20python%20minifier!!%20https://glad432.github.io/" target="_blank" rel="noopener noreferrer" class="text-green-500 mx-2 my-2" title="Share on WhatsApp" aria-label="Share on WhatsApp">
<i class="fab fa-whatsapp fa-2x transition-transform transform hover:-translate-y-2"></i>
</a>
<a href="https://telegram.me/share/url?url=https://glad432.github.io/&text=Check%20out%20this%20python%20minifier!!" target="_blank" rel="noopener noreferrer" class="text-blue-500 mx-2 my-2" title="Share on Telegram" aria-label="Share on Telegram">
<i class="fab fa-telegram-plane fa-2x transition-transform transform hover:-translate-y-2"></i>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://glad432.github.io/" target="_blank" rel="noopener noreferrer" class="text-blue-700 mx-2 my-2" title="Share on Facebook" aria-label="Share on Facebook">
<i class="fab fa-facebook fa-2x transition-transform transform hover:-translate-y-2"></i>
</a>
<a href="https://x.com/intent/post?url=https://glad432.github.io/&text=Check%20out%20this%20python%20minifier!!" target="_blank" rel="noopener noreferrer" class="text-slate-600 mx-2 my-2" title="Share on X" aria-label="Share on X">
<i class="fab fa-x-twitter fa-2x transition-transform transform hover:-translate-y-2"></i>
</a>
<a href="https://www.reddit.com/submit?url=https://glad432.github.io/&title=Check%20out%20this%20python%20minifier!!" target="_blank" rel="noopener noreferrer" class="text-red-500 mx-2 my-2" title="Share on Reddit" aria-label="Share on Reddit">
<i class="fab fa-reddit fa-2x transition-transform transform hover:-translate-y-2"></i>
</a>
</div>
</div>
</div>
<div class="grid place-items-center">
<span id="show-btn" class="relative cursor-pointer text-center text-white bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-full text-sm px-5 py-2.5">Learn More <i id="rot-1" class="fa-solid fa-caret-down"></i>
</span>
</div>
<article id="article" class="font-['Source_Code_Pro'] select-text mx-4 md:mx-auto md:max-w-2xl lg:max-w-4xl xl:max-w-6xl p-4 md:p-8 mt-8 mb-8 transition-all duration-200 ease-in-out dark:bg-[#1e2022] dark:border-gray-700 dark:shadow-md dark:[color-scheme:dark] dark:text-[#e8e6e3]"></article>
<footer class="bg-black text-xs md:text-sm text-center text-white">
<div class="pt-9">
<div class="mb-9 flex justify-center" role="navigation" aria-label="Social Media Links">
<a href="https://gladw-in.github.io/" target="_blank" rel="noopener noreferrer" class="mr-9 text-neutral-200 hover:text-blue-700" aria-label="Portfolio">
<i class="fa-solid fa-globe fa-xl transition-transform transform hover:-translate-y-1"></i>
</a>
<a href="https://www.linkedin.com/in/glad432/" target="_blank" rel="noopener noreferrer" class="mr-9 text-neutral-200 hover:text-blue-700" aria-label="LinkedIn">
<i class="fa-brands fa-linkedin fa-xl transition-transform transform hover:-translate-y-1"></i>
</a>
<a href="https://github.com/gladw-in" target="_blank" rel="noopener noreferrer" class="text-neutral-200 hover:text-blue-700" aria-label="GitHub">
<i class="fa-brands fa-github fa-xl transition-transform transform hover:-translate-y-1"></i>
</a>
</div>
</div>
<div class="p-4 text-center bg-neutral-700 text-neutral-200">© GLAD432 <span id="year" class="text-neutral-400"></span>
<span class="text-neutral-400">All Rights Reserved</span>
</div>
</footer>
<script type="module" src="js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.51.0/min/vs/loader.js"></script>
</body>
</html>