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

代码语言：html

所属分类：其他

代码由mimo-v2.5-pro 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>dooo — 波点拼贴创作</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Bebas+Neue&family=Syne:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0c0c10;--surface:#14141a;--elevated:#1c1c26;--border:#2a2a3a;
  --accent:#ff4d6a;--accent2:#ff8fa3;--accent-dim:rgba(255,77,106,0.12);
  --mint:#00e5a0;--gold:#ffc857;--lavender:#a78bfa;
  --text:#f0ece6;--text-sec:#8a8a9a;--text-muted:#505060;
  --canvas-bg:#1a1a24;
}
html,body{height:100%;overflow:hidden;font-family:'DM Mono',monospace;background:var(--bg);color:var(--text)}

#app{
  display:grid;grid-template-columns:300px 1fr;grid-template-rows:56px 1fr;height:100vh;
}
#app.topbar{grid-column:1/-1}

/* Top Bar */
.topbar{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 20px;
  background:var(--surface);border-bottom:1px solid var(--border);z-index:50;
}
.logo{
  font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:0.06em;
  background:linear-gradient(135deg,var(--accent),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;flex-shrink:0;
}
.logo sub{font-size:11px;letter-spacing:0.15em;opacity:.5;-webkit-text-fill-color:var(--text-sec)}
.topbar-center{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}
.tool-btn{
  display:flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--border);
  border-radius:8px;background:var(--elevated);color:var(--text-sec);
  font-family:'DM Mono',monospace;font-size:11px;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.tool-btn:hover{border-color:var(--text-muted);color:var(--text);background:var(--surface)}
.tool-btn.primary{border-color:rgba(255,77,106,0.3);color:var(--accent);background:var(--accent-dim)}
.tool-btn.primary:hover{box-shadow:0 0 20px rgba(255,77,106,0.1);border-color:var(--accent)}
.tool-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool-btn .filled{fill:currentColor;stroke:none}
.sep{width:1px;height:22px;background:var(--border);flex-shrink:0}

/* Sidebar */
.sidebar{
  grid-row:2;display:flex;flex-direction:column;background:var(--surface);
  border-right:1px solid var(--border);overflow:hidden;
}
.sb-scroll{flex:1;overflow-y:auto;padding:16px 16px 80px}
.sb-scroll::-webkit-scrollbar{width:4px}
.sb-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.sb-section{margin-bottom:20px}
.sb-title{
  font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:0.22em;
  color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.sb-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* Upload zones */
.upload-zone{
  border:2px dashed var(--border);border-radius:10px;padding:20px 12px;
  text-align:center;cursor:pointer;transition:all .25s;position:relative;
  overflow:hidden;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:var(--accent-dim)}
.upload-zone svg{width:24px;height:24px;stroke:var(--text-muted);fill:none;stroke-width:1.5}
.upload-zone p{font-size:10px;color:var(--text-muted);line-height:1.5}
.upload-zone .accent{color:var(--accent)}
.upload-zone.has-image{padding:4px}
.upload-zone.has-image img{width:100%;border-radius:6px;display:block}
.upload-zone .remove-btn{
  position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.15);
  color:var(--text-sec);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;z-index:2;
}
.upload-zone:hover .remove-btn{opacity:1}
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Shape selector */
.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.shape-btn{
  aspect-ratio:1;border:1px solid var(--border);border-radius:8px;background:var(--elevated);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;
  font-size:18px;color:var(--text-sec);position:relative;
}
.shape-btn:hover{border-color:var(--text-muted);background:var(--surface)}
.shape-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);box-shadow:0 0 12px rgba(255,77,106,0.1)}
.shape-btn .label{position:absolute;bottom:2px;font-size:7px;letter-spacing:0.04em;color:var(--text-muted)}

/* Sliders */
.slider-row{margin-bottom:14px}
.slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.slider-label span{font-size:10px;color:var(--text-sec);letter-spacing:0.04em}
.slider-label .val{color:var(--accent);font-weight:500;min-width:28px;text-align:right}
input[type=range]{
  width:100%;height:4px;-webkit-appearance:.........完整代码请登录后点击上方下载按钮下载查看