xixu-me
367c9fee96
Updated all references, documentation, metadata, and user-facing strings to use the new name 'Xget Now' instead of 'Xget for Chromium'. This includes changes in issue templates, workflow files, privacy and security policies, README, manifest, package.json, popup UI, and code comments/logs. Repository URLs and links have also been updated to reflect the new project name.
582 lines
16 KiB
HTML
582 lines
16 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 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">
|
|
<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="popup.js"></script>
|
|
</body>
|
|
</html>
|