87 lines
3.2 KiB
HTML
87 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN" style="background: transparent;">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Web to Pixso</title>
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body style="background: transparent;">
|
|
<main class="shell">
|
|
<div class="header">
|
|
<div class="logo-title">
|
|
<img src="logo/plugin-logo.png" alt="" class="logo">
|
|
<span class="title">Web to Pixso</span>
|
|
<span class="version-badge">v1.1.1</span>
|
|
</div>
|
|
<button class="close-btn" id="closeBtn" type="button" aria-label="关闭">x</button>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="setting-row">
|
|
<span class="setting-label">采集模式</span>
|
|
<select class="setting-select mode-select" id="captureMode">
|
|
<option value="mixed" selected>混合高保真</option>
|
|
<option value="editable">可编辑优先</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<span class="setting-label">跨域图片代理模式</span>
|
|
<label class="toggle-switch" for="proxyToggle">
|
|
<input type="checkbox" id="proxyToggle">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<span class="setting-label">页面采集宽度</span>
|
|
<label class="width-input-wrap" for="captureWidth">
|
|
<input class="width-input" id="captureWidth" type="text" inputmode="numeric" autocomplete="off" aria-label="页面采集宽度">
|
|
<span class="width-unit">px</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<span class="setting-label">图片采集并发</span>
|
|
<select class="setting-select" id="concurrency">
|
|
<option value="4">4</option>
|
|
<option value="6">6</option>
|
|
<option value="8" selected>8</option>
|
|
<option value="10">10</option>
|
|
<option value="12">12</option>
|
|
<option value="16">16</option>
|
|
<option value="20">20</option>
|
|
<option value="infinite">无限</option>
|
|
</select>
|
|
</div>
|
|
|
|
<p class="description">页面采集宽度默认使用当前窗口宽度，可输入 320-3840px 触发响应式布局后采集。</p>
|
|
|
|
<button class="capture-btn" id="captureBtn" type="button">
|
|
<span id="btnText">开始采集</span>
|
|
</button>
|
|
<button class="select-btn" id="selectBtn" type="button">
|
|
<span id="selectBtnText">打开页面浮窗</span>
|
|
</button>
|
|
|
|
<div class="status" id="status" hidden>
|
|
<div class="progress-bar" aria-hidden="true">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<span class="status-text" id="statusText">准备中...</span>
|
|
</div>
|
|
|
|
<a class="help-link" id="helpLink" href="https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f" target="_blank" rel="noopener noreferrer">使用说明</a>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<span class="author">by 大非</span>
|
|
<a class="support-email" href="mailto:270310136@qq.com">270310136@qq.com 给我发邮件哦，我光速改</a>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|