tool
/
cat-catch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new install

This commit is contained in:
O2bmm 2025-06-05 08:52:08 +08:00
parent 49965c5547
commit 3d0bda252d
3 changed files with 577 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

411
css/install.css Normal file
View File

@ -0,0 +1,411 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
:root {
--primary: #4361ee;
--primary-light: #4895ef;
--secondary: #06d6a0;
--danger: #ef476f;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--border-radius: 16px;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
/* 新增深色模式变量 */
--bg-gradient-start: #f0f4ff;
--bg-gradient-end: #e6f7ff;
--card-bg: white;
--card-header-bg: linear-gradient(to right, #f8f9fa, #e9ecef);
--text-color: #212529;
--subtitle-color: #6c757d;
--content-bg: #f8f9fa;
--agreement-bg: #f8f9fa;
--agreement-border: rgba(0, 0, 0, 0.1);
--agreement-color: #6c757d;
}
body {
background: linear-gradient(
135deg,
var(--bg-gradient-start) 0%,
var(--bg-gradient-end) 100%
);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: var(--text-color);
line-height: 1.6;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
}
/* 语言切换按钮 */
.lang-switch {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
background: var(--card-bg);
border-radius: 50px;
padding: 10px 18px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: var(--shadow);
cursor: pointer;
transition: var(--transition);
font-weight: 600;
font-size: 1rem;
}
.lang-switch:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
background: var(--primary);
color: white;
}
.lang-emoji {
font-size: 1.3rem;
}
/* 头部样式 */
.header {
text-align: center;
margin-bottom: 30px;
position: relative;
padding-top: 20px;
}
.logo-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.logo {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
animation: float 3s ease-in-out infinite;
font-size: 3.5rem;
}
h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 10px;
background: linear-gradient(to right, var(--primary), var(--primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
font-size: 1.2rem;
color: var(--subtitle-color);
font-weight: 500;
max-width: 600px;
margin: 0 auto;
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 30px;
transform: translateY(0);
transition: var(--transition);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.card-header {
padding: 20px;
background: var(--card-header-bg);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.card-title .emoji {
font-size: 1.5rem;
}
.card-body {
padding: 25px;
}
.policy-section {
margin-top: 30px;
}
.section-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 15px;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.section-title .emoji {
font-size: 1.3rem;
}
.content-box {
background-color: var(--content-bg);
border-radius: 12px;
padding: 20px;
margin-top: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
line-height: 1.7;
display: flex;
justify-content: center;
}
.content-box a {
color: var(--primary);
font-weight: 600;
text-decoration: none;
transition: var(--transition);
position: relative;
font-size: 1.1rem;
padding: 10px 20px;
border-radius: 30px;
background-color: rgba(67, 97, 238, 0.1);
display: flex;
align-items: center;
gap: 8px;
}
.content-box a:hover {
background-color: rgba(67, 97, 238, 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(67, 97, 238, 0.2);
}
.content-box a .emoji {
font-size: 1.2rem;
}
.content-box p {
font-size: 1rem;
}
.agreement {
text-align: center;
padding: 20px;
background-color: var(--agreement-bg);
border-radius: var(--border-radius);
margin: 25px 0;
font-style: italic;
color: var(--agreement-color);
border: 1px dashed var(--agreement-border);
display: flex;
flex-direction: column;
gap: 10px;
}
.agreement .emoji {
font-size: 1.5rem;
}
.buttons {
display: flex;
gap: 20px;
margin-top: 30px;
}
.btn {
flex: 1;
padding: 16px 20px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-primary {
background: linear-gradient(to right, var(--primary), var(--primary-light));
color: white;
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
background: linear-gradient(to right, var(--primary-light), var(--primary));
}
.btn-outline {
background: transparent;
color: var(--danger);
border: 2px solid var(--danger);
}
.btn-outline:hover {
background-color: rgba(239, 71, 111, 0.05);
transform: translateY(-3px);
}
/* 多语言内容控制 */
.lang-zh,
.lang-en {
display: none;
}
.lang-zh.active,
.lang-en.active {
display: block;
}
/* 动画效果 */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.buttons {
flex-direction: column;
gap: 12px;
}
.card-body {
padding: 20px;
}
.subtitle {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.8rem;
}
.subtitle {
font-size: 1rem;
}
.logo {
width: 90px;
height: 90px;
font-size: 2.8rem;
}
.lang-switch {
top: 10px;
right: 10px;
padding: 8px 14px;
font-size: 0.9rem;
}
.content-box a {
font-size: 0.95rem;
padding: 8px 15px;
}
}
/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
:root {
--bg-gradient-start: #0f172a;
--bg-gradient-end: #1e293b;
--card-bg: #1e293b;
--card-header-bg: linear-gradient(to right, #334155, #1e293b);
--text-color: #e2e8f0;
--subtitle-color: #94a3b8;
--content-bg: #334155;
--agreement-bg: #334155;
--agreement-border: rgba(255, 255, 255, 0.1);
--agreement-color: #cbd5e1;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.lang-switch {
background: #334155;
color: #e2e8f0;
}
.content-box a {
background-color: rgba(67, 97, 238, 0.15);
color: #93c5fd;
}
.content-box a:hover {
background-color: rgba(67, 97, 238, 0.25);
box-shadow: 0 4px 10px rgba(67, 97, 238, 0.2);
}
.btn-outline:hover {
background-color: rgba(239, 71, 111, 0.15);
}
}

152
install.html
View File

@ -1,65 +1,119 @@
<!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>猫抓 cat-catch</title>
<link rel="stylesheet" type="text/css" href="css/public.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/options.css" media="all" />
<script src="js/function.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猫抓扩展安装成功</title>
<link rel="stylesheet" type="text/css" href="css/install.css" media="all" />
</head>
<body>
<div class="wrapper1024">
<section>
<div class="optionBox">
<p style="font-size: xx-large;text-align: center;margin-bottom: 0.5rem;color: var(--link-color);">恭喜 猫抓
扩展已成功安装 !</p>
<p style="font-size: xx-large;text-align: center;margin-bottom: 2rem;color: var(--link-color);">
Installation successful !</p>
<p>希望本扩展能帮助到你。请仔细阅读以下协议和免责声明，使用过程中出现问题，请到 <a
href="https://cat-catch.bmmmd.com/issues">https://cat-catch.bmmmd.com/issues</a> 提交问题</p>
<br>
<p>I hope this extension can help you.</p>
<p>Please read the following agreement and disclaimer carefully. If you encounter any issues during use,
please submit them to <a href="https://github.com/xifangczy/cat-catch/issues">GitHub Issues</a></p>
</div>
</section>
<div class="container">
<!-- 语言切换按钮 -->
<div class="lang-switch" id="langToggle">
<span class="lang-emoji" id="langEmoji">🌐</span>
<span class="lang-text" id="langText">English</span>
</div>
<section>
<h1 class="optionsTitle" style="text-align: center;">隐私政策 / Privacy Policy</h1>
<div class="optionBox">
<p>本扩展收集所有信息都在本地储存处理，不会发送到远程服务器，不包含任何跟踪器。</p>
<br>
<p>The extension collects and processes all information locally without sending it to remote servers and
does not include any trackers.</p>
<div class="header">
<div class="logo-container">
<div class="logo"><img src="img/icon.png"></div>
</div>
</section>
<h1 id="main-title">恭喜 猫抓 扩展已成功安装 !</h1>
<div class="subtitle" id="subtitle">Installation successful !</div>
</div>
<section>
<h1 class="optionsTitle" style="text-align: center;">免责声明 / Disclaimer</h1>
<div class="optionBox">
<p>本扩展仅供下载用户拥有版权或已获授权的视频，禁止用于下载受版权保护且未经授权的内容。用户需自行承担使用本工具的全部法律责任，开发者不对用户的任何行为负责。本工具按“原样”提供，开发者不承担任何直接或间接责任。
</p>
<br>
<p>This extension is intended for downloading videos that you own or have authorized access to. It is
prohibited to use this Tool for downloading copyrighted content without permission. Users are solely
responsible for their actions, and the developer is not liable for any user behavior. This Tool is
provided "as-is," and the developer assumes no direct or indirect liability.</p>
<div class="card fade-in">
<div class="card-header">
<div class="card-title">
<span class="emoji">🙌</span>
<span id="welcome-title">希望本扩展能帮助到你</span>
</div>
</div>
</section>
<div class="card-body">
<div class="policy-section">
<div class="section-title">
<span class="emoji">🔒</span>
<span id="privacy-title">隐私政策 / Privacy Policy</span>
</div>
<div class="content-box">
<div class="lang-zh active">
<p>本扩展收集所有信息都在本地储存处理，不会发送到远程服务器，不包含任何跟踪器。</p>
</div>
<div class="lang-en">
<p>The extension collects and processes all information locally without sending it to remote
servers and does not include any trackers.</p>
</div>
</div>
</div>
<section>
<h1 class="optionsTitle" style="text-align: center;"></h1>
<div class="optionBox" style="text-align: center;">
<p>点击“同意”或“关闭本页面”即表示您已阅读并同意以上内容。</p>
<p>By clicking "Agree" or "Close this page," you confirm that you have read and agree to the above
terms.</p>
<button id="installYes" class="button2">同意 / Agree</button>
<button id="installUninstallSelf" class="openDir">卸载扩展 / Uninstall Self</button>
<div class="policy-section">
<div class="section-title">
<span class="emoji">⚠️</span>
<span id="disclaimer-title">免责声明 / Disclaimer</span>
</div>
<div class="content-box">
<div class="lang-zh active">
<p>本扩展仅供下载用户拥有版权或已获授权的视频，禁止用于下载受版权保护且未经授权的内容。用户需自行承担使用本工具的全部法律责任，开发者不对用户的任何行为负责。本工具按"原样"提供，开发者不承担任何直接或间接责任。
</p>
</div>
<div class="lang-en">
<p>This extension is intended for downloading videos that you own or have authorized access
to. It is prohibited to use this Tool for downloading copyrighted content without
permission. Users are solely responsible for their actions, and the developer is not
liable for any user behavior. This Tool is provided "as-is," and the developer assumes
no direct or indirect liability.</p>
</div>
</div>
</div>
<div class="policy-section">
<div class="section-title">
<span class="emoji">🚨</span>
<span id="issue-title">问题提交 / Issue Submission</span>
</div>
<div class="content-box">
<div class="lang-zh active">
<a href="https://cat-catch.bmmmd.com/issues" target="_blank">
<span class="emoji">🔗</span>
https://cat-catch.bmmmd.com/issues
</a>
</div>
<div class="lang-en">
<a href="https://cat-catch.bmmmd.com/issues" target="_blank">
<span class="emoji">🔗</span>
https://cat-catch.bmmmd.com/issues
</a>
</div>
</div>
</div>
<div class="agreement">
<div class="lang-zh active">
<p>点击"同意"或"关闭本页面"即表示您已阅读并同意以上内容。</p>
</div>
<div class="lang-en">
<p>By clicking "Agree" or "Close this page," you confirm that you have read and agree to the
above terms.</p>
</div>
</div>
<div class="buttons">
<button id="agreeBtn" class="btn btn-primary">
<span class="emoji">✅</span>
<span id="agreeText">同意</span>
</button>
<button id="uninstallBtn" class="btn btn-outline">
<span class="emoji">🗑️</span>
<span id="uninstallText">卸载扩展</span>
</button>
</div>
</div>
</section>
</div>
</div>
<script src="js/function.js"></script>
<script src="js/install.js"></script>
</body>

74
js/install.js
View File

@ -1,12 +1,64 @@
document.getElementById('installYes').focus();
document.getElementById('installYes').addEventListener('click', function () {
closeTab();
});
document.getElementById('installUninstallSelf').addEventListener('click', function () {
chrome.management.uninstallSelf({ showConfirmDialog: true });
});
window.addEventListener('DOMContentLoaded', function () {
// 多语言支持
let currentLang = 'zh';
if (/Mobile|Android|iPhone|iPad/i.test(navigator.userAgent)) {
document.getElementById('installYes').style.fontSize = '2rem';
document.getElementById('installUninstallSelf').style.fontSize = '2rem';
}
function setLanguage(lang) {
currentLang = lang;
// 设置活动语言
document.querySelectorAll('.lang-zh').forEach(el => {
el.classList.toggle('active', lang === 'zh');
});
document.querySelectorAll('.lang-en').forEach(el => {
el.classList.toggle('active', lang === 'en');
});
// 更新语言切换按钮
document.getElementById('langText').textContent = lang === 'zh' ? 'English' : '中文';
document.getElementById('langEmoji').textContent = lang === 'zh' ? '🌐' : '🇨🇳';
// 更新动态文本
if (lang === 'en') {
document.getElementById('main-title').textContent = 'Installation Successful!';
document.getElementById('subtitle').textContent = 'Cat Catch Extension is now installed';
document.getElementById('welcome-title').textContent = 'Welcome to Cat Catch';
document.getElementById('privacy-title').textContent = 'Privacy Policy';
document.getElementById('disclaimer-title').textContent = 'Disclaimer';
document.getElementById('issue-title').textContent = 'Issue Submission';
document.getElementById('agreeText').textContent = 'Agree';
document.getElementById('uninstallText').textContent = 'Uninstall Extension';
} else {
document.getElementById('main-title').textContent = '恭喜 猫抓 扩展已成功安装 !';
document.getElementById('subtitle').textContent = 'Installation successful !';
document.getElementById('welcome-title').textContent = '希望本扩展能帮助到你';
document.getElementById('privacy-title').textContent = '隐私政策 / Privacy Policy';
document.getElementById('disclaimer-title').textContent = '免责声明 / Disclaimer';
document.getElementById('issue-title').textContent = '问题提交 / Issue Submission';
document.getElementById('agreeText').textContent = '同意';
document.getElementById('uninstallText').textContent = '卸载扩展';
}
}
// 语言切换功能
document.getElementById('langToggle').addEventListener('click', function () {
const newLang = currentLang === 'zh' ? 'en' : 'zh';
setLanguage(newLang);
});
// 按钮事件处理
document.getElementById('agreeBtn').addEventListener('click', function () {
closeTab();
});
document.getElementById('uninstallBtn').addEventListener('click', function () {
chrome.management.uninstallSelf({ showConfirmDialog: true });
});
const lang = navigator.language || navigator.userLanguage;
const isChinese = lang.startsWith('zh');
setLanguage(isChinese ? 'zh' : 'en');
// 添加动画效果
document.querySelector('.card').classList.add('fade-in');
document.getElementById('agreeBtn').focus();
});