206 lines
4.6 KiB
HTML
206 lines
4.6 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Transly</title>
|
||
<style>
|
||
:root {
|
||
--bg-top: #eaf9f5;
|
||
--bg-bottom: #f6f8fb;
|
||
--panel-bg: #ffffff;
|
||
--text-main: #13221d;
|
||
--text-subtle: #4d6259;
|
||
--brand: #0f766e;
|
||
--brand-hover: #0c625b;
|
||
--line: #d7e3df;
|
||
--danger: #b42318;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
body {
|
||
width: 300px;
|
||
margin: 0;
|
||
font-family: "Trebuchet MS", "PingFang SC", "Noto Sans SC", sans-serif;
|
||
background: linear-gradient(160deg, var(--bg-top), var(--bg-bottom));
|
||
color: var(--text-main);
|
||
}
|
||
|
||
.panel {
|
||
margin: 12px;
|
||
padding: 14px;
|
||
border-radius: 16px;
|
||
background: var(--panel-bg);
|
||
border: 1px solid var(--line);
|
||
box-shadow: 0 10px 28px rgba(13, 58, 47, 0.12);
|
||
animation: rise 220ms ease-out;
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.brand-mark {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 9px;
|
||
background: linear-gradient(135deg, #0f766e, #22a884);
|
||
color: #ffffff;
|
||
display: grid;
|
||
place-items: center;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.brand-title {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.brand-sub {
|
||
margin-top: 2px;
|
||
font-size: 12px;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
min-height: 44px;
|
||
border: 1px solid transparent;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
|
||
}
|
||
|
||
.btn + .btn {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.btn:active {
|
||
transform: scale(0.985);
|
||
}
|
||
|
||
.btn:focus-visible,
|
||
.link-btn:focus-visible {
|
||
outline: 2px solid #0f766e;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.btn:disabled,
|
||
.link-btn:disabled {
|
||
opacity: 0.58;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--brand);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--brand-hover);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #eff7f5;
|
||
border-color: #cadfd8;
|
||
color: #113b33;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #e5f3ef;
|
||
}
|
||
|
||
.btn-tertiary {
|
||
background: #ffffff;
|
||
border-color: var(--line);
|
||
color: #35554b;
|
||
}
|
||
|
||
.btn-tertiary:hover {
|
||
background: #f7fbfa;
|
||
}
|
||
|
||
.link-btn {
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
min-height: 38px;
|
||
background: transparent;
|
||
color: #0a5d57;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.link-btn:hover {
|
||
background: #eef7f5;
|
||
}
|
||
|
||
#status {
|
||
min-height: 19px;
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
color: var(--text-subtle);
|
||
}
|
||
|
||
#status[data-type="error"] {
|
||
color: var(--danger);
|
||
}
|
||
|
||
#status[data-type="success"] {
|
||
color: #147145;
|
||
}
|
||
|
||
@keyframes rise {
|
||
from {
|
||
transform: translateY(6px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.panel,
|
||
.btn,
|
||
.link-btn {
|
||
animation: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="panel">
|
||
<header class="brand">
|
||
<div class="brand-mark" aria-hidden="true">T</div>
|
||
<div>
|
||
<div class="brand-title">Transly</div>
|
||
<div class="brand-sub">快速直译，尽量少一步</div>
|
||
</div>
|
||
</header>
|
||
|
||
<button id="translateSelection" class="btn btn-primary">翻译选中文本</button>
|
||
<button id="translatePage" class="btn btn-secondary">整页翻译（随滚动）</button>
|
||
<button id="restorePage" class="btn btn-tertiary">恢复原文</button>
|
||
<button id="openOptions" class="link-btn">打开配置（模型/API）</button>
|
||
|
||
<div id="status" role="status" aria-live="polite"></div>
|
||
</main>
|
||
|
||
<script src="popup.js"></script>
|
||
</body>
|
||
</html>
|