xixu-me
a6d62103c1
The 'URL 转换器' link was moved from the bottom of the popup to the header section and given new styles for improved visibility and consistency with other header elements.
624 lines
17 KiB
HTML
624 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Xget Now</title>
|
|
<style>
|
|
:root {
|
|
--primary-accent-color: #8a2be2;
|
|
--success-color: #4caf50;
|
|
--container-bg: rgba(255, 255, 255, 0.1);
|
|
--container-border: rgba(255, 255, 255, 0.2);
|
|
--text-color: white;
|
|
--text-secondary-color: rgba(255, 255, 255, 0.7);
|
|
--input-bg: rgba(0, 0, 0, 0.2);
|
|
--hover-bg: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
html {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
overflow: hidden; /* Prevents scrollbars from appearing on the html element */
|
|
}
|
|
|
|
body {
|
|
width: 380px;
|
|
min-height: 400px;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
sans-serif;
|
|
color: var(--text-color);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
background-color: rgba(40, 40, 40, 0.3);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.header {
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--container-border);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.header .link-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s ease;
|
|
border-radius: 6px;
|
|
background: var(--container-bg);
|
|
border: 1px solid var(--container-border);
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.header .link-item:hover {
|
|
opacity: 1;
|
|
background: var(--hover-bg);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.header .link-item .link-icon {
|
|
margin-right: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.header .link-item .link-text {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.content {
|
|
padding: 20px;
|
|
max-height: calc(400px - 70px); /* Fixed height instead of viewport */
|
|
overflow-y: auto;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Enhanced Custom Scrollbar */
|
|
.content::-webkit-scrollbar,
|
|
.platforms::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-track,
|
|
.platforms::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb,
|
|
.platforms::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 3px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb:hover,
|
|
.platforms::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.content::-webkit-scrollbar-thumb:active,
|
|
.platforms::-webkit-scrollbar-thumb:active {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* Scrollbar corner for better appearance */
|
|
.content::-webkit-scrollbar-corner,
|
|
.platforms::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Smooth scrolling support for Firefox */
|
|
.content,
|
|
.platforms {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
|
}
|
|
|
|
/* Auto-hide scrollbar behavior */
|
|
.content:not(:hover):not(:focus-within),
|
|
.platforms:not(:hover):not(:focus-within) {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.content:not(:hover):not(:focus-within)::-webkit-scrollbar,
|
|
.platforms:not(:hover):not(:focus-within)::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
|
|
.setting-group {
|
|
margin-bottom: 25px;
|
|
padding: 15px;
|
|
background: var(--container-bg);
|
|
border: 1px solid var(--container-border);
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.setting-group.compact {
|
|
padding: 10px 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.setting-group:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.setting-label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 12px;
|
|
color: var(--text-secondary-color);
|
|
}
|
|
|
|
.setting-label.compact {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 28px;
|
|
}
|
|
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
transition: 0.4s;
|
|
border-radius: 28px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 22px;
|
|
width: 22px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--primary-accent-color);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(22px);
|
|
}
|
|
|
|
.domain-input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
background: var(--input-bg);
|
|
color: var(--text-color);
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.domain-input::placeholder {
|
|
color: var(--text-secondary-color);
|
|
}
|
|
|
|
.domain-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-accent-color);
|
|
background: rgba(0, 0, 0, 0.3);
|
|
box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.3);
|
|
}
|
|
|
|
.platforms {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-top: 8px;
|
|
padding: 5px;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
scroll-behavior: smooth;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.platform-category {
|
|
padding: 8px 12px 0 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary-color);
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.platform-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.platform-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.platform-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.status {
|
|
margin-top: 15px;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
border: 1px solid transparent;
|
|
animation: status-pop-in 0.3s ease;
|
|
}
|
|
|
|
@keyframes status-pop-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.status.hiding {
|
|
animation: fadeOut 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.status.success {
|
|
background: rgba(76, 175, 80, 0.25);
|
|
border-color: rgba(76, 175, 80, 0.4);
|
|
}
|
|
|
|
.status.error {
|
|
background: rgba(244, 67, 54, 0.25);
|
|
border-color: rgba(244, 67, 54, 0.4);
|
|
}
|
|
|
|
.mini-toggle {
|
|
width: 36px;
|
|
height: 20px;
|
|
}
|
|
|
|
.mini-toggle .slider {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.mini-toggle .slider:before {
|
|
height: 14px;
|
|
width: 14px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
}
|
|
|
|
.mini-toggle input:checked + .slider:before {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.link-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
background: var(--container-bg);
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
transition: all 0.2s ease;
|
|
border: 1px solid var(--container-border);
|
|
}
|
|
|
|
.link-item:hover {
|
|
background: var(--hover-bg);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px) scale(1.02);
|
|
}
|
|
|
|
.link-icon {
|
|
margin-right: 12px;
|
|
font-size: 18px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.link-text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a
|
|
href="https://xuc.xi-xu.me/"
|
|
target="_blank"
|
|
class="link-item"
|
|
style="margin-bottom: 10px; display: inline-block"
|
|
>
|
|
<span class="link-icon">🔗</span>
|
|
<span class="link-text">URL 转换器</span>
|
|
</a>
|
|
<h1>Xget Now</h1>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="setting-group compact">
|
|
<label class="setting-label compact">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 28px;
|
|
"
|
|
>
|
|
<span>启用扩展</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="enabledToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label class="setting-label" for="domainInput">Xget 域名（必填）</label>
|
|
<input
|
|
type="text"
|
|
id="domainInput"
|
|
class="domain-input"
|
|
placeholder="your-xget-domain.com"
|
|
/>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label class="setting-label">启用的平台</label>
|
|
<div class="platforms">
|
|
<div class="platform-category">
|
|
<div class="category-title">代码托管</div>
|
|
<div class="platform-grid">
|
|
<div class="platform-item">
|
|
<span>GitHub</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="ghToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>GitLab</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="glToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Gitea</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="giteaToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Codeberg</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="codebergToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>SourceForge</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="sfToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>AOSP</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="aospToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="platform-category">
|
|
<div class="category-title">AI/ML</div>
|
|
<div class="platform-grid">
|
|
<div class="platform-item">
|
|
<span>Hugging Face</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="hfToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="platform-category">
|
|
<div class="category-title">包管理</div>
|
|
<div class="platform-grid">
|
|
<div class="platform-item">
|
|
<span>npm</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="npmToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>PyPI</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="pypiToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Conda</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="condaToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Maven</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="mavenToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>RubyGems</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="rubygemsToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Crates.io</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="cratesToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>NuGet</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="nugetToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>Go Modules</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="golangToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="platform-category">
|
|
<div class="category-title">其他</div>
|
|
<div class="platform-grid">
|
|
<div class="platform-item">
|
|
<span>arXiv</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="arxivToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="platform-item">
|
|
<span>F-Droid</span>
|
|
<label class="toggle-switch mini-toggle">
|
|
<input type="checkbox" id="fdroidToggle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<div class="links">
|
|
<a
|
|
href="https://github.com/xixu-me/Xget"
|
|
target="_blank"
|
|
class="link-item"
|
|
>
|
|
<span class="link-icon">🚀</span>
|
|
<span class="link-text">Xget 存储库</span>
|
|
</a>
|
|
<a
|
|
href="https://github.com/xixu-me/Xget-Now"
|
|
target="_blank"
|
|
class="link-item"
|
|
>
|
|
<span class="link-icon">📖</span>
|
|
<span class="link-text">扩展存储库</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status" class="status" style="display: none"></div>
|
|
</div>
|
|
|
|
<script src="webext-compat.js"></script>
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|