<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Play a .sb3 locally (TurboWarp embed)</title>
<style>
:root { --bg:#0f1220; --fg:#eef2ff; --muted:#a5b4fc; --card:#151935; --accent:#8b5cf6; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--fg); }
header { padding: 16px 20px; border-bottom: 1px solid #262a45; display:flex; align-items:center; gap:12px; }
header h1 { font-size: 18px; font-weight: 700; margin:0; letter-spacing:.2px; }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.card { background: var(--card); border: 1px solid #22264a; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.controls { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.btn { background: linear-gradient(180deg, #9b74ff, #7c3aed); color: white; border: none; padding: 10px 14px; border-radius: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(139,92,246,.35); }
.btn:disabled { opacity:.6; cursor: not-allowed; box-shadow:none; }
.file { display: inline-block; position: relative; }
.file input[type="file"] { opacity: 0; position: absolute; <span class="ͼk" <inset<="" span="">: >span class="ͼj">0</span>; cursor: pointer; }
.file .face { border:1px dashed #3a3f75; border-radius: 12px; padding: 10px 14px; color: var(--muted); }
.hint { color: #c7cafc; opacity:.85; font-size: 14px; }
iframe { width: 100%; height: 540px; border: none; border-radius: 14px; background: #0b0e1a; }
.dropzone { border: 2px dashed #3a3f75; border-radius: 16px; padding: 18px; text-align:center; color: var(--muted); transition: border-color .15s; }
.dropzone.drag { border-color: var(--accent); color: var(--fg); }
.spacer { height: 8px; }
</style>

</head>

<body>
<header>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v18m9-9H3" stroke="white" stroke-width="2.2" stroke-linecap="round"/></svg>
<h1>Scratch (.sb3) → HTML Player</h1>
</header>
<div class="container">
<div class="card">
<div class="row">
<div class="controls">
<label class="file">
<input id="file" type="file" accept=".sb3,application/zip" />
<span class="face">Choose your <<span class="ͼg" <strong<="" span="">>.sb3</>span class="ͼg"<strong< span="">> file</>span class="ͼg">span</strong<></span>>
</label>
<button id="play" class="btn" disabled>Play in page</button>
<button id="download" class="btn" disabled>Download this HTML + project</button>
<span id="status" class="hint">No file selected.</span>
</div>
<div id="dropzone" class="dropzone">or drag & drop the .sb3 here</div>
<iframe id="player" title="TurboWarp Player" allow="autoplay; fullscreen" referrerpolicy="no-referrer"></iframe>
<div class="hint">This uses the TurboWarp web player in an iframe and loads your file from a local <<span class="ͼg" <code<="" span="">>blob:</>span class="ͼg"<code< span="">> URL — nothing is uploaded anywhere.</>span class="ͼg">div</code<></span>>
</div>
</div>
<div class="spacer"></div>
</div>