1. 首页加上通知功能

2. 改图标
This commit is contained in:
celebrateyang 2025-06-02 17:09:23 +08:00
parent f6adc3f296
commit 2fc79490a0
14 changed files with 106 additions and 14 deletions

View File

@ -7,10 +7,10 @@
"input.placeholder": "在此粘贴链接", "input.placeholder": "在此粘贴链接",
"terms.note.agreement": "继续即表示您同意", "terms.note.agreement": "继续即表示您同意",
"terms.note.link": "使用条款与伦理", "terms.note.link": "使用条款与伦理",
"services.title": "支持的服务", "services.title": "支持的网站",
"services.title_show": "显示支持的服务", "services.title_show": "显示支持的服务",
"services.title_hide": "隐藏支持的服务", "services.title_hide": "隐藏支持的服务",
"services.disclaimer": "Freesavevideo 不隶属于以上列出的任何服务。", "services.disclaimer": "Freesavevideo 不隶属于以上列出的任何网站。",
"tutorial.title": "如何在 iOS 上保存?", "tutorial.title": "如何在 iOS 上保存?",
"tutorial.intro": "为了便捷地在 iOS 上保存媒体,您需要在共享菜单中使用 Siri 快捷指令。", "tutorial.intro": "为了便捷地在 iOS 上保存媒体,您需要在共享菜单中使用 Siri 快捷指令。",
"tutorial.step.1": "添加 Siri 快捷指令:", "tutorial.step.1": "添加 Siri 快捷指令:",

View File

@ -42,9 +42,9 @@
<div id="services-container"> <div id="services-container">
{#if loaded} {#if loaded}
{#each services as service} {#each services as service}
{#if !service.includes("youtube")} <!-- {#if !service.includes("youtube")} -->
<div class="service-item">{service}</div> <div class="service-item">{service}</div>
{/if} <!-- {/if} -->
{/each} {/each}
{:else} {:else}
{#each { length: 17 } as _} {#each { length: 17 } as _}

View File

@ -15,10 +15,23 @@
ru: "https://buy.stripe.com/5kAeYG7rwgwW43S4gh", ru: "https://buy.stripe.com/5kAeYG7rwgwW43S4gh",
}; };
let key: string = $INTERNAL_locale; let key: string = $INTERNAL_locale;
const donateLink = donateLinks[key as keyof typeof donateLinks]; const donateLink = donateLinks[key as keyof typeof donateLinks]; let showMindsou = false;
let showMindsou = false;
let showYumcheck = false; let showYumcheck = false;
let showNotification = true; // 控制通知显示
// 检查本地存储中是否已关闭通知
onMount(() => {
const notificationClosed = localStorage.getItem('notification-xiaohongshu-youtube-closed');
if (notificationClosed === 'true') {
showNotification = false;
}
});
// 关闭通知并保存状态到本地存储
const closeNotification = () => {
showNotification = false;
localStorage.setItem('notification-xiaohongshu-youtube-closed', 'true');
};
</script> </script>
<svelte:head> <svelte:head>
@ -36,6 +49,22 @@
data-first-focus data-first-focus
data-focus-ring-hidden data-focus-ring-hidden
> >
<!-- 通知信息 -->
{#if showNotification}
<div class="notification" role="alert">
<div class="notification-content">
<span class="notification-icon">🎉</span>
<span class="notification-text">竹子下载最新添加了对小红书和油管下载的支持</span> <button
class="notification-close"
aria-label="关闭通知"
on:click={closeNotification}
>
×
</button>
</div>
</div>
{/if}
<Meowbalt emotion="smile" /> <Meowbalt emotion="smile" />
<Omnibox /> <Omnibox />
<!--<UserGuide/>--> <!--<UserGuide/>-->
@ -54,17 +83,17 @@
<img src="/popularize/mindsou_logo.png" <img src="/popularize/mindsou_logo.png"
alt="Mindsou Logo" alt="Mindsou Logo"
class="section-icon" /> class="section-icon" />
<span>用想法搜索想法-Mindsou大脑搜索引擎</span> <span>基于相同想法的陌生人聊天网站,不用担心尬聊</span>
<span class="arrow">{showMindsou ? '▲' : '▼'}</span> <span class="arrow">{showMindsou ? '▲' : '▼'}</span>
</button> </button>
{#if showMindsou} {#if showMindsou}
<div class="details" role="region"> <div class="details" role="region">
<ul> <ul>
<li>立即发布你的想法,记录你的每一个灵感</li> <li>1.发布你大脑中某时刻的想法</li>
<li>后端算法匹配,帮你找到和你一样想法的人</li> <li>2.完全匹配,语义匹配,互补匹配</li>
<li>轻量社交,无需好友,无刷屏,只专注「闪现‑共鸣‑消散」</li> <li>3.点击匹配对象即可聊天</li>
<li>匹配成功自动开启私聊房间,零等待对话</li> <li>4.离线匹配邮件提醒</li>
<li>限时内容 & 隐私保护,自动销毁减少信息负担</li> <li>5.限时内容 & 隐私保护,自动销毁减少信息负担</li>
</ul> </ul>
<a class="button" href="https://mindsou.online" target="_blank" rel="noopener noreferrer"> <a class="button" href="https://mindsou.online" target="_blank" rel="noopener noreferrer">
访问 Mindsou 访问 Mindsou
@ -84,13 +113,14 @@
<img src="/popularize/yumcheck.ico" <img src="/popularize/yumcheck.ico"
alt="YumCheck Logo" alt="YumCheck Logo"
class="section-icon" /> class="section-icon" />
<span>智能食品与健康解读</span> <span>食品配料表,拍照自动查询分析</span>
<span class="arrow">{showYumcheck ? '▲' : '▼'}</span> <span class="arrow">{showYumcheck ? '▲' : '▼'}</span>
</button> </button>
{#if showYumcheck} {#if showYumcheck}
<div class="details" role="region"> <div class="details" role="region">
<ul> <ul>
<li>拍摄配料表,一键成分分析与健康风险评估</li> <li>拍摄配料表,一键成分分析与健康风险评估</li>
<li>食品添加剂对比欧盟标准,多维度了解</li>
<li>扫描食品标准号,快速解读规范信息</li> <li>扫描食品标准号,快速解读规范信息</li>
<li>血液检测报告智能解析,普通人也能读懂血液报告</li> <li>血液检测报告智能解析,普通人也能读懂血液报告</li>
</ul> </ul>
@ -253,5 +283,67 @@
/* 确保小屏时不溢出 */ /* 确保小屏时不溢出 */
#promotions > section .section-icon { #promotions > section .section-icon {
max-width: 100%; max-width: 100%;
} /* 通知组件样式 */
.notification {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--padding);
background-color: #e8f5e8;
color: #2e7d32;
border-radius: var(--border-radius);
width: 100%;
max-width: 640px;
box-sizing: border-box;
margin-bottom: var(--padding);
animation: slideIn 0.5s ease-out;
border: 1px solid #c8e6c9;
}
.notification-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
}
.notification-icon {
font-size: 1.5rem;
margin-right: 10px;
}
.notification-text {
flex: 1;
font-size: 0.9rem;
} .notification-close {
background: none;
border: none;
color: inherit;
font-size: 1.2rem;
cursor: pointer;
padding: 0;
margin-left: 10px;
transition: opacity 0.2s;
}
.notification-close:hover {
opacity: 0.7;
}
/* 深色模式下的通知样式 */
@media (prefers-color-scheme: dark) {
.notification {
background-color: #1b3e1f;
color: #81c784;
border-color: #2e7d32;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
</style> </style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 815 B

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1014 B

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 390 B

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 569 B

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 617 B

After

Width:  |  Height:  |  Size: 4.8 KiB