xixu-me
8b576adbba
Refactors popup.html with enhanced CSS for a more modern, visually appealing interface, including new color variables, gradients, and interactive effects. Updates status message handling in popup.js to animate hiding with CSS transitions. Also updates some UI text and icons for clarity and consistency.
530 lines
15 KiB
HTML
530 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Xget for Chromium</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(100vh - 70px); /* Adjust based on header height */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
.content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.content::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.content::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
.content::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.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: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);
|
|
}
|
|
|
|
.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: 220px;
|
|
overflow-y: auto;
|
|
margin-top: 8px;
|
|
padding: 5px;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.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 for Chromium</h1>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="setting-group">
|
|
<label class="setting-label">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
<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-for-Chromium"
|
|
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>
|