.tool-header { max-width:720px; margin:0 auto; padding:40px 24px 12px; }
    .tool-header h1 { font-size:clamp(22px,4vw,30px); font-weight:700; background:linear-gradient(135deg,#e9e9f5,#a09fb1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; }
    .tool-sub { color:var(--noir-text-tertiary); font-size:13px; }
    .tool-container { max-width:720px; margin:0 auto; padding:0 24px 48px; }
    .tool-card { background:var(--noir-bg-elevated); border:1px solid var(--noir-border-light); border-radius:16px; padding:24px; margin-bottom:16px; box-shadow:var(--noir-shadow-sm); }
    .tool-card h3 { font-size:15px; font-weight:600; margin:0 0 12px; color:var(--noir-text-primary); }
    .drop-zone { border:2px dashed var(--noir-border-light); border-radius:12px; padding:40px 20px; text-align:center; cursor:pointer; transition:all .2s; color:var(--noir-text-tertiary); }
    .drop-zone:hover, .drop-zone.dragover { border-color:var(--noir-accent); background:rgba(91,135,49,0.08); color:var(--noir-text-secondary); }
    .drop-zone svg { width:36px; height:36px; margin-bottom:8px; opacity:.5; }
    .preview-row { display:flex; gap:16px; flex-wrap:wrap; }
    .preview-box { flex:1; min-width:180px; }
    .preview-box .plab { font-size:11px; color:var(--noir-text-tertiary); margin-bottom:4px; display:flex; justify-content:space-between; }
    .preview-box .pinfo { font-size:12px; color:var(--noir-text-secondary); margin-top:4px; word-break:break-all; }
    .preview-box img { width:100%; border-radius:8px; background:var(--noir-bg-tertiary); max-height:220px; object-fit:contain; }
    .ctrl-group { margin:14px 0; }
    .ctrl-group .cl { font-size:12px; color:var(--noir-text-secondary); margin-bottom:4px; display:flex; justify-content:space-between; }
    .ctrl-group .cl .cv { font-size:13px; font-weight:600; color:var(--noir-text-primary); }
    .ctrl-group input[type="range"] { width:100%; accent-color:var(--noir-accent); height:4px; }
    .ctrl-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0; }
    .ctrl-row label { font-size:12px; color:var(--noir-text-secondary); white-space:nowrap; }
    select.tsel { background:var(--noir-bg-tertiary); border:1px solid var(--noir-border-light); color:var(--noir-text-primary); padding:6px 12px; border-radius:8px; font-size:13px; outline:none; cursor:pointer; }
    select.tsel:focus { border-color:var(--noir-accent); }
    input.tinp { background:var(--noir-bg-tertiary); border:1px solid var(--noir-border-light); color:var(--noir-text-primary); padding:6px 12px; border-radius:8px; font-size:13px; outline:none; width:80px; }
    input.tinp:focus { border-color:var(--noir-accent); }
    .home-btn { position:fixed; top:16px; left:16px; z-index:100; width:36px; height:36px; border-radius:50%; background:var(--noir-bg-elevated); backdrop-filter:blur(20px); border:1px solid var(--noir-border-light); display:flex; align-items:center; justify-content:center; color:var(--noir-text-primary); text-decoration:none; transition:all .2s; box-shadow:var(--noir-shadow-xs); }
    .home-btn:hover { box-shadow:var(--noir-shadow-md); transform:scale(1.08); }
    .btn-primary { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:9999px; font-size:14px; font-weight:500; background:var(--noir-accent); color:var(--noir-text-inverse); border:none; cursor:pointer; transition:all .2s; text-decoration:none; }
    .btn-primary:hover { filter:brightness(1.12); }
    .btn-primary:disabled { opacity:.4; cursor:not-allowed; filter:none; }
    .btn-secondary { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:9999px; font-size:14px; font-weight:500; background:var(--noir-bg-tertiary); color:var(--noir-text-primary); border:1px solid var(--noir-border-light); cursor:pointer; transition:all .2s; }
    .btn-secondary:hover { border-color:var(--noir-border-medium); }
    .badge { display:inline-block; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:500; }
    .badge.gr { background:rgba(34,197,94,0.15); color:#22c55e; }
    .badge.rd { background:rgba(239,68,68,0.15); color:#ef4444; }
    .fname { font-size:12px; color:var(--noir-text-tertiary); margin:6px 0; word-break:break-all; }
    @media(max-width:640px){ .tool-container { padding:0 12px 32px; } .preview-row { flex-direction:column; } }
  </style>
<link rel="stylesheet" href="/mc-theme.css">
<link rel="stylesheet" href="/mc-compat.css">
<script src="/static/site-sync.js"></script>
</head>
<body class="mc-page">
<script src="/static/nav.js"></script>
<script src="/static/auth-check.js"></script>
  <a href="/" class="home-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></a>
  <div class="tool-header"><h1>图片压缩</h1><div class="tool-sub">浏览器本地处理，不上传服务器</div></div>
  <div class="tool-container">
    <div class="tool-card">
      <div class="drop-zone" id="dropZone">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        <p>拖拽图片到这里，或点击选择文件</p>
        <input type="file" id="fileInput" accept="image/*" style="display:none">
      </div>
      <div id="resultArea" style="display:none">
        <div class="fname" id="fileName"></div>
        <div class="preview-row">
          <div class="preview-box"><div class="plab"><span>原始</span><span id="origSize"></span></div><img id="origPreview"><div class="pinfo" id="origDim"></div></div>
          <div class="preview-box"><div class="plab"><span>压缩后</span><span id="compSize"></span></div><img id="compPreview"><div class="pinfo" id="compDim"></div></div>
        </div>
        <div class="ctrl-group"><div class="cl"><span>压缩质量</span><span class="cv" id="qualityVal">80%</span></div><input type="range" id="qualitySlider" min="1" max="100" value="80"></div>
        <div class="ctrl-group"><div class="cl"><span>最大宽度</span><span class="cv" id="widthVal">1920 px</span></div><input type="range" id="widthSlider" min="50" max="4000" value="1920" step="50"></div>
        <div class="ctrl-row">
          <label>输出格式</label>
          <select id="formatSelect" class="tsel">
            <option value="image/jpeg">JPEG</option>
            <option value="image/webp">WebP</option>
            <option value="image/png">PNG (无损)</option>
            <option value="image/avif">AVIF</option>
          </select>
          <label style="margin-left:12px">文件名</label>
          <input id="outName" class="tinp" value="compressed">
          <span style="font-size:12px;color:var(--noir-text-tertiary)" id="outExt">.jpg</span>
        </div>
        <div style="margin-top:14px;text-align:center;display:flex;gap:8px;justify-content:center;flex-wrap:wrap">
          <button class="btn-primary" id="downloadBtn">压缩并下载</button>
          <button class="btn-secondary" id="reChooseBtn">重新选择</button>
        </div>
      </div>
    </div>
  </div>
  <script>var dz=document.getElementById("dropZone"),fi=document.getElementById("fileInput");var ra=document.getElementById("resultArea"),op=document.getElementById("origPreview"),cp=document.getElementById("compPreview");var os=document.getElementById("origSize"),cs=document.getElementById("compSize"),od=document.getElementById("origDim"),cd=document.getElementById("compDim"),fn=document.getElementById("fileName");var qs=document.getElementById("qualitySlider"),qv=document.getElementById("qualityVal");var ws=document.getElementById("widthSlider"),wv=document.getElementById("widthVal");var fs=document.getElementById("formatSelect"),on=document.getElementById("outName"),oe=document.getElementById("outExt");var db=document.getElementById("downloadBtn"),rc=document.getElementById("reChooseBtn");var srcFile=null,srcImg=null,ready=false;dz.onclick=function(){fi.click()};dz.ondragover=function(e){e.preventDefault();dz.classList.add("dragover")};dz.ondragleave=function(){dz.classList.remove("dragover")};dz.ondrop=function(e){e.preventDefault();dz.classList.remove("dragover");if(e.dataTransfer.files.length)loadFile(e.dataTransfer.files[0])};fi.onchange=function(){if(this.files[0])loadFile(this.files[0])};rc.onclick=function(){ra.style.display="none";fi.value="";srcFile=null;srcImg=null;ready=false;db.disabled=true;db._blob=null};qs.oninput=function(){qv.textContent=this.value+"%";compress()};ws.oninput=function(){wv.textContent=this.value+" px";compress()};fs.onchange=function(){var m=fs.value.split("/")[1];oe.textContent=(m==="jpeg"?".jpg":"."+m);compress()};function fmt(b){if(b<1024)return b+" B";if(b<1048576)return(b/1024).toFixed(1)+" KB";return(b/1048576).toFixed(2)+" MB"}function esc(s){return String(s).replace(/[&<>"\x27]/g,function(c){var x={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","\x27":"&#39;"};return x[c]||c})}function loadFile(f){if(!f.type.startsWith("image/")){alert("请选择图片文件");return}srcFile=f;fn.textContent=esc(f.name);ready=false;db.disabled=true;db._blob=null;var r=new FileReader();r.onload=function(e){var img=new Image();img.onload=function(){srcImg=img;op.src=e.target.result;os.textContent=fmt(f.size);od.textContent=img.naturalWidth+"x"+img.naturalHeight;ra.style.display="block";compress();};img.src=e.target.result;};r.readAsDataURL(f);}function compress(){if(!srcImg){db.disabled=true;return}db.disabled=true;var q=qs.value/100,mw=parseInt(ws.value),t=fs.value;var c=document.createElement("canvas"),ctx=c.getContext("2d");var w=srcImg.naturalWidth,h=srcImg.naturalHeight;if(w>mw){h=Math.round(h*mw/w);w=mw}if(w%2)w++;if(h%2)h++;c.width=w;c.height=h;ctx.drawImage(srcImg,0,0,w,h);c.toBlob(function(b){if(!b){db.disabled=false;return}cp.src=URL.createObjectURL(b);cs.textContent=fmt(b.size);cd.textContent=w+"x"+h;var sv=srcFile?((srcFile.size-b.size)/srcFile.size*100).toFixed(1):0;var bg=sv>0?"gr":"rd";cd.innerHTML+=" <span class=\"badge "+bg+"\">"+(sv>0?"-":"+")+Math.abs(sv)+"%</span>";ready=true;db.disabled=false;db._blob=b;},t,q);}db.addEventListener("click",function(){if(!ready||!db._blob){compress();return}var a=document.createElement("a");a.href=URL.createObjectURL(db._blob);var m=fs.value.split("/")[1];var ext=(m==="jpeg"?"jpg":m);a.download=(on.value||"compressed")+"."+ext;a.click();});</script>
</body>
</html>