🔥 CSS Minimizer Android Style
Masukkan CSS asli:
Hasil Minified:
Android Material UI • Mah ringan & cepat
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Minimizer - Android Style</title>
<style>
body {
margin: 0;
font-family: "Roboto", Arial, sans-serif;
background: #ECEFF1;
padding: 15px;
}
.card {
background: #FFFFFF;
border-radius: 12px;
padding: 20px;
box-shadow: 0 3px 15px rgba(0,0,0,0.15);
margin-bottom: 25px;
}
h2 {
text-align: center;
font-weight: 700;
color: #263238;
}
textarea {
width: 100%;
min-height: 160px;
padding: 12px;
margin-top: 8px;
border-radius: 8px;
border: 1px solid #B0BEC5;
font-family: monospace;
font-size: 14px;
resize: vertical;
background: #FAFAFA;
outline: none;
}
textarea:focus {
border-color: #1E88E5;
box-shadow: 0 0 5px rgba(30,136,229,0.3);
}
button {
width: 100%;
padding: 15px;
border: none;
border-radius: 10px;
background: #1E88E5;
color: #fff;
font-size: 16px;
margin-top: 15px;
font-weight: bold;
letter-spacing: 0.5px;
cursor: pointer;
transition: 0.2s;
}
button:active {
background: #1565C0;
transform: scale(0.98);
}
.footer {
margin-top: 25px;
text-align: center;
color: #607D8B;
font-size: 12px;
}
/* Responsive sangat optimal */
@media (max-width: 480px) {
textarea { min-height: 140px; }
button { padding: 14px; font-size: 15px; }
.card { padding: 15px; }
}
</style>
</head>
<body>
<div class="card">
<h2>🔥 CSS Minimizer Android Style</h2>
<p><b>Masukkan CSS asli:</b></p>
<textarea id="inputCSS" placeholder="Tempel CSS di sini..."></textarea>
<button onclick="minify()">MINIFY SEKARANG</button>
<p style="margin-top:20px;"><b>Hasil Minified:</b></p>
<textarea id="outputCSS" placeholder="Hasil akan muncul di sini..." readonly></textarea>
<button onclick="copyResult()" style="background:#43A047;margin-top:10px;">
COPY HASIL
</button>
</div>
<div class="footer">Android Material UI • Mah ringan & cepat</div>
<script>
function minify(){
let css = document.getElementById("inputCSS").value;
// hapus komentar
css = css.replace(/\/\*[\s\S]*?\*\//g, "");
// hapus spasi berlebih
css = css.replace(/\s+/g, " ");
// rapikan simbol
css = css.replace(/\s*([{}:;,])\s*/g, "$1");
// hilangkan ; sebelum }
css = css.replace(/;}/g, "}");
document.getElementById("outputCSS").value = css;
}
function copyResult(){
let output = document.getElementById("outputCSS");
output.select();
output.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("✅ Berhasil dicopy!");
}
</script>
</body>
</html>
No comments:
Post a Comment