<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mini Collage Editor</title>
<style>
body { margin:0; overflow:hidden; font-family: system-ui, sans-serif; }
#topbar {
position: fixed; top: 12px; left: 12px; z-index: 10;
display:flex; gap:8px; padding:10px; border-radius:12px;
background: rgba(255,255,255,0.9);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
canvas { display:block; }
</style>
</head>
<body>
<div id="topbar">
<input id="file" type="file" accept="image/*" multiple />
<button id="crop">Crop</button>
<button id="apply" disabled>Apply</button>
<button id="cancel" disabled>Cancel</button>
</div>
<canvas id="c"></canvas>
<script src="https://cdn.jsdelivr.net/npm/fabric@6.0.0/dist/index.min.js"></script>
<script src="./app.js"></script>
</body>
</html>