js实现类似dooo0t图片拼贴打孔工具代码-html代码-BFW代码库

js实现类似dooo0t图片拼贴打孔工具代码

代码语言：html

所属分类：其他

代码由glm-5.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：类似「dooo0t」的图片拼贴打孔工具

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POUNCH - 拼贴打孔器</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<style>
:root{
  --bg:#1a1816;--bg2:#242120;--paper:#f3ede4;--paper-shadow:rgba(0,0,0,.35);
  --accent:#e8553a;--accent2:#f0764e;--text:#e8e2d8;--muted:#8a8279;
  --hole:#1a1816;--border:#3a3632;--radius:10px;
  --gap:28px;--hole-r:3px;--hole-sp:14px;--pad:28px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans SC','Space Grotesk',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--border);backdrop-filter:blur(10px);}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.03em;color:var(--accent);margin-right:8px;user-select:none;}
.logo span{color:var(--muted);font-weight:400;font-size:.85rem;margin-left:2px;}
.sep{width:1px;height:24px;background:var(--border);flex-shrink:0;}
.ctrl-group{display:flex;align-items:center;gap:8px;}
.ctrl-group label{font-size:.75rem;color:var(--muted);white-space:nowrap;}
.ctrl-group select,.ctrl-group input[type=number]{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:6px;padding:5px 8px;font-size:.8rem;font-family:inherit;width:60px;outline:none;
  transition:border-color .2s;
}
.ctrl-group select:focus,.ctrl-group input[type=number]:focus{border-color:var(--accent);}
.ctrl-group input[type=color]{
  width:28px;height:28px;border:2px solid var(--border);border-radius:6px;
  cursor:pointer;background:none;padding:0;
}
.ctrl-group input[type=color]::-webkit-color-swatch-wrapper{padding:2px;}
.ctrl-group input[type=color]::-webkit-color-swatch{border-radius:3px;border:none;}
.btn{
  display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:1px solid var(--border);
  border-radius:8px;background:var(--bg);color:var(--.........完整代码请登录后点击上方下载按钮下载查看