Membaca: File Hash Generator.txt

← BACK
File Hash Generator.txt

<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional File Hash Generator & Verifier</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<style>:root{--bg-gradient:linear-gradient(135deg, #1c441c, #0d121f, #460833);--card-bg:linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));--glass-border:rgba(255, 255, 255, 0.25);--text-main:#e8edf5;--text-muted:#c5d0df;--primary-color:#64b5ff;--accent-gradient:linear-gradient(135deg, #0456ae, #03a7d4);--success-color:#00ffa6;--success-bg:rgba(0, 208, 132, 0.12);--danger-color:#ff8888;--danger-bg:rgba(255, 80, 80, 0.12)}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;display:flex;justify-content:center;align-items:center;background:var(--bg-gradient);font-family:"Inter",sans-serif;color:var(--text-main);padding:18px}.container{width:100%;max-width:580px}.card{background:var(--card-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:2px solid var(--glass-border);border-radius:16px;padding:20px 15px 15px 15px;box-shadow:0 20px 60px rgb(0 0 0 / .45)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.title{font-size:1.3rem;font-weight:700;margin-top:15px;color:var(--primary-color)}.nav-pills{display:flex;gap:10px;margin-bottom:25px}.nav-link{flex:1;background:rgb(255 255 255 / .05);border:1px solid var(--glass-border);color:#ddd;padding:12px;border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.3s ease}.nav-link.active{background:var(--accent-gradient);border-color:#fff0;color:#fff}.form-group{margin-bottom:15px}.form-label{display:block;font-size:.75rem;font-weight:700;text-uppercase:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:8px}.form-control{width:100%;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .2);color:#fff;border-radius:10px;padding:8px 12px;font-size:.85rem;font-family:inherit;transition:all 0.3s ease}.form-control:focus{outline:none;background:rgb(255 255 255 / .12);border-color:var(--primary-color);box-shadow:0 0 0 3px rgb(77 163 255 / .25)}select.form-control{cursor:pointer}select.form-control option{background:#111827}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:7px;font-weight:600;cursor:pointer;transition:all 0.2s ease;text-decoration:none;font-size:.9rem}.btn-sm{padding:6px 12px;font-size:.75rem}.btn-light{background:rgb(22 22 251 / .1);color:#fff;border:1px solid rgb(255 255 255 / .15)}.btn-light:hover{background:rgb(255 255 255 / .2)}.btn-execute{width:100%;padding:11px;background:var(--accent-gradient);border:0;color:#fff;border-radius:11px;font-size:.9rem;margin-top:8px}.btn-execute:disabled{opacity:.6;cursor:not-allowed}.btn-outline{width:100%;background:#fff0;color:#fff;border:1px solid rgb(255 255 255 / .2);margin-top:8px}.btn-outline:hover{background:rgb(255 255 255 / .05)}.progress-container{margin-top:25px;display:none}.progress-header{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:6px}.progress-bar-bg{width:100%;height:12px;background:rgb(255 255 255 / .1);border-radius:6px;overflow:hidden}.progress-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,#00d084,#00ffa6);transition:width 0.2s ease}.divider{border:0;height:1px;background:rgb(255 255 255 / .15);margin:25px 0}.hash-output{background:rgb(0 0 0 / .35);border:1px solid rgb(255 255 255 / .12);border-left:4px solid var(--success-color);border-radius:10px;padding:18px;color:var(--success-color);font-family:"JetBrains Mono",monospace;word-break:break-all;margin-top:8px;font-size:.85rem}.status-box{padding:18px;border-radius:11px;text-align:center;font-size:1rem;font-weight:700;margin-bottom:15px}.status-box small{font-size:.85rem;opacity:.8;display:block;margin-top:4px}.match{border:1px solid #00d084;color:var(--success-color);background:var(--success-bg)}.nomatch{border:1px solid #f55;color:var(--danger-color);background:var(--danger-bg)}.footer-note{display:block;text-align:center;margin-top:10px;font-size:.7rem;color:var(--text-muted)}</style></head>
<body><div class="container"><div class="card"><div class="card-header"><a href="https://tools.jurnalpc.com/" class="btn btn-light btn-sm">Back to Dashboard</a><a href="https://tools.jurnalpc.com/File_Hash_Generator/" class="btn btn-light btn-sm">Reset</a></div><div class="card-header"><h4 class="title"><i class="bi bi-shield-check me-2"></i> File Hash Tool </h4></div><label class="form-label">Silahkan Pilih Mode</label><div class="nav-pills"><button class="nav-link active" onclick="switchMode(event, 'generate')"><i class="bi bi-gear"></i> Generate </button><button class="nav-link" onclick="switchMode(event, 'verify')"><i class="bi bi-search"></i> Verify </button></div><div class="form-group"><label class="form-label">Silahkan Pilih Algoritma</label><select id="algoSelect" class="form-control"><option value="SHA-256">SHA-256</option><option value="SHA-512">SHA-512</option></select></div><div id="expectedArea" class="form-group" style="display:none"><label class="form-label">Expected Hash</label><textarea id="expectedHash" class="form-control" rows="3" placeholder="Paste checksum disini"></textarea></div><div class="form-group"><label class="form-label">Upload File Anda</label><input type="file" id="fileInput" class="form-control"></div><button id="executeBtn" class="btn btn-execute"><i class="bi bi-gear-fill"></i><span id="btnText">GENERATE HASH</span></button><div id="progressBarContainer" class="progress-container"><div class="progress-header"><span id="statusLabel">Initializing</span><span id="progressPercent">0%</span></div><div class="progress-bar-bg"><div id="progressBar" class="progress-bar-fill"></div></div></div><div id="resultArea" style="display:none"><hr class="divider"><div id="verifyStatus"></div><div class="form-group"><label class="form-label" style="font-size: 0.9rem; color: var(--text-main)">Result:</label><div id="hashResult" class="hash-output"></div></div><button onclick="copyHash()" class="btn btn-outline"><i class="bi bi-clipboard"></i> Salin Hash </button></div></div><small class="footer-note"> Design by Budi Setiaji </small></div>
<script>
let mode="generate";const fileInput=document.getElementById("fileInput");const algoSelect=document.getElementById("algoSelect");const executeBtn=document.getElementById("executeBtn");const btnText=document.getElementById("btnText");const progressBarContainer=document.getElementById("progressBarContainer");const progressBar=document.getElementById("progressBar");const progressPercent=document.getElementById("progressPercent");const statusLabel=document.getElementById("statusLabel");const resultArea=document.getElementById("resultArea");const hashResult=document.getElementById("hashResult");function switchMode(e,m){mode=m;document.querySelectorAll(".nav-link").forEach(x=>x.classList.remove("active"));e.currentTarget.classList.add("active");document.getElementById("expectedArea").style.display=m==="verify"?"block":"none";btnText.textContent=m==="verify"?"VERIFY HASH":"GENERATE HASH"}
executeBtn.onclick=async()=>{let file=fileInput.files[0];if(!file){alert("Pilih file terlebih dahulu");return}
executeBtn.disabled=!0;progressBarContainer.style.display="block";updateProgress(0);let buffer=await file.arrayBuffer();updateProgress(80);let hashBuffer=await crypto.subtle.digest(algoSelect.value,buffer);let hash=Array.from(new Uint8Array(hashBuffer)).map(x=>x.toString(16).padStart(2,"0")).join("");updateProgress(100);hashResult.textContent=hash;resultArea.style.display="block";if(mode==="verify"){let expected=document.getElementById("expectedHash").value.trim().toLowerCase();let box=document.getElementById("verifyStatus");if(expected===hash){box.className="status-box match";box.innerHTML="✓ MATCH<br><small>Checksum cocok</small>"}else{box.className="status-box nomatch";box.innerHTML="✗ NOT MATCH<br><small>Checksum berbeda</small>"}}
progressBarContainer.style.display="none";executeBtn.disabled=!1};function updateProgress(v){progressBar.style.width=v+"%";progressPercent.textContent=v+"%"}
function copyHash(){navigator.clipboard.writeText(hashResult.textContent);alert("Hash disalin")}
</script>
</body></html>