130 lines
5.3 KiB
HTML
130 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||
<meta name="description" content="游民导航 · 数字游民工具与出海资源合集" />
|
||
<title>游民导航</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<div id="app" class="app-shell">
|
||
<div class="bg-glow" aria-hidden="true">
|
||
<span class="orb orb-a"></span>
|
||
<span class="orb orb-b"></span>
|
||
</div>
|
||
|
||
<header class="topbar" id="topbar">
|
||
<button type="button" class="icon-btn" id="btn-menu" aria-label="打开分类">
|
||
<span class="menu-bars" aria-hidden="true"><i></i><i></i><i></i></span>
|
||
</button>
|
||
<div class="brand-mark">
|
||
<img id="brand-logo" class="brand-logo" src="./icons/_brand.webp" alt="" width="28" height="28" />
|
||
<div class="brand-text">
|
||
<h1 class="brand-name" id="brand-name">游民导航</h1>
|
||
<p class="brand-current" id="brand-current">数字游民</p>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="icon-btn" id="btn-theme" aria-label="切换主题">
|
||
<span id="theme-icon">☾</span>
|
||
</button>
|
||
</header>
|
||
|
||
<div class="drawer-root" id="drawer" aria-hidden="true">
|
||
<button type="button" class="drawer-mask" id="drawer-mask" aria-label="关闭菜单"></button>
|
||
<aside class="drawer-panel" role="dialog" aria-modal="true" aria-label="分类导航">
|
||
<div class="drawer-head">
|
||
<div class="drawer-brand-wrap">
|
||
<img src="./icons/_brand.webp" alt="" width="28" height="28" />
|
||
<div>
|
||
<span class="drawer-brand" id="drawer-brand">游民导航</span>
|
||
<span class="drawer-sub" id="drawer-sub"></span>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="icon-btn" id="drawer-close" aria-label="关闭">×</button>
|
||
</div>
|
||
<nav class="drawer-nav" id="drawer-nav"></nav>
|
||
</aside>
|
||
</div>
|
||
|
||
<main class="page" id="page">
|
||
<div id="content"></div>
|
||
<footer class="footer" id="footer"></footer>
|
||
</main>
|
||
|
||
<button type="button" class="back-top" id="back-top" aria-label="回到顶部">↑</button>
|
||
|
||
<div class="sheet-root" id="sheet" aria-hidden="true">
|
||
<button type="button" class="sheet-mask" id="sheet-mask" aria-label="关闭"></button>
|
||
<div class="sheet-panel" role="dialog" aria-modal="true" aria-labelledby="sheet-title">
|
||
<div class="sheet-handle" aria-hidden="true"></div>
|
||
<div class="sheet-head">
|
||
<img class="sheet-icon" id="sheet-icon" src="" alt="" width="40" height="40" />
|
||
<div class="sheet-head-text">
|
||
<h3 class="sheet-title" id="sheet-title"></h3>
|
||
<p class="sheet-sub" id="sheet-sub"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<ol class="guide-steps" id="guide-steps" aria-label="复制步骤">
|
||
<li class="guide-step is-active" data-step="1">
|
||
<span class="guide-num">1</span>
|
||
<span class="guide-text">
|
||
<strong>点下方绿色按钮</strong>
|
||
<em>选中整段网址</em>
|
||
</span>
|
||
</li>
|
||
<li class="guide-step" data-step="2">
|
||
<span class="guide-num">2</span>
|
||
<span class="guide-text">
|
||
<strong>手指按住蓝色网址区</strong>
|
||
<em>直到出现复制菜单</em>
|
||
</span>
|
||
</li>
|
||
<li class="guide-step" data-step="3">
|
||
<span class="guide-num">3</span>
|
||
<span class="guide-text">
|
||
<strong>点菜单里的「复制」</strong>
|
||
<em>再到浏览器粘贴打开</em>
|
||
</span>
|
||
</li>
|
||
</ol>
|
||
|
||
<div class="sheet-body">
|
||
<div class="url-stage" id="url-stage">
|
||
<p class="sheet-label">要复制的网址</p>
|
||
<div class="sheet-url-wrap" id="sheet-url-wrap">
|
||
<div class="sheet-url-box" id="sheet-url-box" tabindex="0"></div>
|
||
<!-- 第二步：小手上移指网址，文案在右边 -->
|
||
<div class="finger-url is-hidden" id="finger-url" aria-hidden="true">
|
||
<span class="finger-ico" aria-hidden="true">👆</span>
|
||
<span class="finger-bubble">按住这里不松 → 点「复制」</span>
|
||
</div>
|
||
</div>
|
||
<p class="sheet-status" id="sheet-status"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sheet-actions-wrap">
|
||
<!-- 第一步：只要黄色小手，往下指绿色按钮 -->
|
||
<div class="finger-btn" id="finger-btn" aria-hidden="true">
|
||
<span class="finger-ico" aria-hidden="true">👇</span>
|
||
</div>
|
||
<div class="sheet-actions">
|
||
<button type="button" class="sheet-btn primary pulse" id="sheet-select">
|
||
<span class="sheet-btn-main" id="sheet-select-label">① 点我选中网址</span>
|
||
<span class="sheet-btn-sub" id="sheet-select-sub">选中后请按住网址复制</span>
|
||
</button>
|
||
<button type="button" class="sheet-btn" id="sheet-close">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast" id="toast" role="status"></div>
|
||
</div>
|
||
|
||
<script src="./app.js"></script>
|
||
</body>
|
||
</html>
|