← BACK
Text Counter Minify.txt
<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Text Counter Package</title>
<style>:root{--glass-bg:rgba(255,255,255,.08);--glass-border:rgba(255,255,255,.28);--text-main:#e8edf5;--text-muted:#aab4c5;--primary:#4da3ff;--danger:#ff5c5c}body{min-height:100vh;margin:0;padding:30px 20px;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:var(--text-main);background:radial-gradient(circle at 15% 20%,rgb(1 102 217 / .3),transparent 35%),radial-gradient(circle at 85% 15%,rgb(3 234 164 / .18),transparent 35%),radial-gradient(circle at 50% 90%,rgb(132 1 226 / .25),transparent 40%),linear-gradient(135deg,#050713,#111827,#020617);background-attachment:fixed}.container{max-width:800px;width:90%;margin:5px auto;padding:50px 25px 25px;box-sizing:border-box;background:linear-gradient(135deg,rgb(255 255 255 / .1),rgb(255 255 255 / .03));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 20px 60px rgb(0 0 0 / .45),inset 0 1px 1px rgb(255 255 255 / .15)}.back-btn{position:absolute;top:15px;left:15px;text-decoration:none;color:#dbeafe;background:rgb(255 255 255 / .12);padding:6px 12px;border-radius:12px;font-size:14px;font-weight:600;border:1px solid rgb(255 255 255 / .15);backdrop-filter:blur(10px);transition:.3s}.back-btn:hover{color:#fff;background:rgb(255 255 255 / .22);transform:translateY(-2px)}h2{color:#fff;text-align:center;margin:10px 0 12px 0;letter-spacing:.5px;text-shadow:0 0 20px rgb(77 163 255 / .35)}textarea{width:100%;height:295px;padding:13px;box-sizing:border-box;resize:vertical;background:rgb(0 0 0 / .35);color:#d9fdd3;border:1px solid rgb(255 255 255 / .2);border-radius:10px;font-size:14px;font-family:"JetBrains Mono",Consolas,monospace;outline:none;transition:.3s}textarea:focus{border-color:#66adf8;box-shadow:0 0 0 4px rgb(86 165 250 / .45)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px;text-align:center}.stat-box{background:rgb(255 255 255 / .08);padding:10px;border:1px solid rgb(255 255 255 / .15);border-radius:12px;backdrop-filter:blur(10px);box-shadow:inset 0 1px 1px rgb(255 255 255 / .1);transition:.3s}.stat-box:hover{transform:translateY(-3px);background:rgb(255 255 255 / .13)}.stat-label{display:block;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px}.stat-value{font-size:22px;font-weight:700;color:#64b5ff;text-shadow:0 0 15px rgb(100 181 255 / .5)}.clear-btn{margin-top:15px;padding:8px 16px;background:linear-gradient(135deg,#fa3f3f,#b63123);color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:600;box-shadow:0 2px 15px rgb(255 70 70 / .35);transition:.3s}.clear-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgb(255 70 70 / .55)}@media(max-width:600px){body{padding:14px 8px 8px 8px}.container{width:100%;padding:55px 13px 12px;border-radius:18px}textarea{width:100%;height:270px}.stats-grid{grid-template-columns:1fr}h2{font-size:1.2rem}}</style>
</head><body><div class="container"><a href="/" class="back-btn">← Kembali</a><h2>Character and Word Counter</h2><textarea id="textInput" placeholder="Ketik atau tempel teks di sini..."></textarea><div class="stats-grid"><div class="stat-box"><span class="stat-label">Karakter</span><span id="charCount" class="stat-value">0</span></div><div class="stat-box"><span class="stat-label">Kata</span><span id="wordCount" class="stat-value">0</span></div><div class="stat-box"><span class="stat-label">Waktu Baca</span><span id="readingTime" class="stat-value">0</span><span style="font-size: 14px; color:#007bff"> menit</span></div></div><button class="clear-btn" onclick="clearText()">Hapus Semua</button></div><script>const textInput=document.getElementById('textInput');const charCount=document.getElementById('charCount');const wordCount=document.getElementById('wordCount');const readingTime=document.getElementById('readingTime');textInput.addEventListener('input',function(){const text=this.value;charCount.innerText=text.length;const words=text.trim().split(/\s+/).filter(item=>item!=="");const totalWords=words.length;wordCount.innerText=totalWords;const time=totalWords/180;readingTime.innerText=time.toFixed(1)});function clearText(){textInput.value='';charCount.innerText='0';wordCount.innerText='0';readingTime.innerText='0'}</script></body></html>