521 lines
29 KiB
HTML
521 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" id="app">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>No Hi - 高效沟通，拒绝无意义问候</title>
|
||
<!-- 引入 Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- 引入 Font Awesome 图标 -->
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<!-- 自定义配置 -->
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#2563EB', // 低饱和蓝（专业克制）
|
||
neutral: '#F9FAFB', // 浅灰背景
|
||
dark: '#111827', // 深色文字
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter', 'system-ui', 'sans-serif'], // 无衬线字体（简洁易读）
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.text-balance {
|
||
text-wrap: balance;
|
||
}
|
||
.transition-base {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.chat-time {
|
||
font-size: 0.75rem;
|
||
color: #9CA3AF;
|
||
margin-left: 0.5rem;
|
||
}
|
||
/* 打字机光标样式 */
|
||
.typing-cursor {
|
||
display: inline-block;
|
||
width: 2px;
|
||
height: 1.2em;
|
||
background-color: #2563EB;
|
||
margin-left: 4px;
|
||
animation: blink 1s infinite;
|
||
}
|
||
@keyframes blink {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0; }
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white text-dark font-sans min-h-screen">
|
||
<!-- 顶部导航 -->
|
||
<nav class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-200">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||
<div class="flex justify-between items-center">
|
||
<a href="#" class="flex items-center gap-2">
|
||
<i class="fa fa-comments-o text-primary text-xl"></i>
|
||
<span class="text-lg font-bold text-primary">NoHi 🗣️</span>
|
||
</a>
|
||
<!-- 语言切换按钮 -->
|
||
<div class="flex items-center gap-4">
|
||
<button id="langZh" class="text-primary font-medium">中文</button>
|
||
<span class="text-gray-300">|</span>
|
||
<button id="langEn" class="text-gray-500 hover:text-primary transition-base">English</button>
|
||
</div>
|
||
<div class="hidden md:flex gap-8 ml-8">
|
||
<a href="#what" class="text-gray-600 hover:text-primary transition-base" data-i18n="nav.what">什么是 NoHi</a>
|
||
<a href="#why" class="text-gray-600 hover:text-primary transition-base" data-i18n="nav.why">核心优势</a>
|
||
<a href="#examples" class="text-gray-600 hover:text-primary transition-base" data-i18n="nav.examples">沟通示例</a>
|
||
<a href="#share" class="text-gray-600 hover:text-primary transition-base" data-i18n="nav.share">分享</a>
|
||
</div>
|
||
<button class="md:hidden text-gray-600">
|
||
<i class="fa fa-bars text-xl"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 英雄区 -->
|
||
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
|
||
<div class="max-w-4xl mx-auto text-center">
|
||
<!-- 打字机效果标题 -->
|
||
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-6 text-balance" id="typingTitle">
|
||
<span class="typing-text"></span><span class="typing-cursor"></span>
|
||
</h1>
|
||
<p class="text-gray-600 text-lg md:text-xl mb-10 max-w-2xl mx-auto text-balance" data-i18n="hero.desc">
|
||
告别「在吗？」🙅♂️「有空吗？」🙅♀️ 的来回拉扯，直接说明需求，节省彼此时间 ⏱️
|
||
</p>
|
||
<div class="flex flex-wrap justify-center gap-4">
|
||
<a href="#examples" class="bg-primary text-white px-6 py-3 rounded-lg font-medium shadow-sm hover:bg-primary/90 transition-base" data-i18n="hero.viewExamples">
|
||
查看示例 📋
|
||
</a>
|
||
<a href="#share" class="bg-neutral border border-gray-200 text-dark px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition-base" data-i18n="hero.shareFriend">
|
||
分享给朋友 🤝
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 什么是 NoHi -->
|
||
<section id="what" class="py-16 bg-neutral">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="max-w-3xl mx-auto">
|
||
<h2 class="text-2xl md:text-3xl font-bold mb-6" data-i18n="what.title">什么是 NoHi？🤔</h2>
|
||
<div class="prose prose-gray max-w-none">
|
||
<p class="text-gray-700 mb-4">
|
||
<strong class="text-primary">NoHi</strong> <span data-i18n="what.desc1">是一种高效沟通理念，核心是</span><strong data-i18n="what.core">省略无意义的寒暄开场</strong> 🚫，<span data-i18n="what.desc2">直接点明沟通目的。</span>
|
||
</p>
|
||
<p class="text-gray-700" data-i18n="what.desc3">
|
||
无需使用「在吗？」「有空吗？」这类需要对方额外回复的问候语，而是直接说明需求——比如：「想请教你 Python 列表推导式的问题 🐍」「麻烦审核下接口文档，今日下班前需反馈 📄」。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心优势 -->
|
||
<section id="why" class="py-16">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-2xl md:text-3xl font-bold mb-12 text-center" data-i18n="why.title">核心优势 ✨</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||
<!-- 优势 1 -->
|
||
<div class="bg-neutral p-6 rounded-lg border border-gray-200 hover:shadow-sm transition-base">
|
||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fa fa-clock-o text-primary"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold mb-2" data-i18n="why.advantage1.title">节省时间 ⏳</h3>
|
||
<p class="text-gray-600" data-i18n="why.advantage1.desc">避免「在吗-在的-什么事」的来回拉扯，对方可直接响应或延后回复</p>
|
||
</div>
|
||
<!-- 优势 2 -->
|
||
<div class="bg-neutral p-6 rounded-lg border border-gray-200 hover:shadow-sm transition-base">
|
||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fa fa-bullseye text-primary"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold mb-2" data-i18n="why.advantage2.title">目标明确 🎯</h3>
|
||
<p class="text-gray-600" data-i18n="why.advantage2.desc">提前告知核心需求，对方可快速准备相关信息，提升沟通效率</p>
|
||
</div>
|
||
<!-- 优势 3 -->
|
||
<div class="bg-neutral p-6 rounded-lg border border-gray-200 hover:shadow-sm transition-base">
|
||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
|
||
<i class="fa fa-calendar-check-o text-primary"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold mb-2" data-i18n="why.advantage3.title">减少焦虑 😌</h3>
|
||
<p class="text-gray-600" data-i18n="why.advantage3.desc">避免对方猜测「是否紧急」「有何要事」，降低心理负担</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 沟通示例 -->
|
||
<section id="examples" class="py-16 bg-neutral">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 class="text-2xl md:text-3xl font-bold mb-8 text-center" data-i18n="examples.title">沟通示例对比 📞</h2>
|
||
<div class="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- 反面示例 -->
|
||
<div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||
<h3 class="text-lg font-semibold text-red-500 mb-4" data-i18n="examples.notRecommended">❌ 不推荐</h3>
|
||
<div class="space-y-3 text-gray-700">
|
||
<div class="p-3 bg-gray-50 rounded flex justify-between items-start">
|
||
<span>A: <span data-i18n="examples.hello">在吗？</span>🙋</span>
|
||
<span class="chat-time">20:12</span>
|
||
</div>
|
||
<div class="p-3 bg-gray-50 rounded flex justify-between items-start">
|
||
<span>B: <span data-i18n="examples.helloReply">在的，怎么了？</span>🙂</span>
|
||
<span class="chat-time">21:25</span>
|
||
</div>
|
||
<div class="p-3 bg-gray-50 rounded flex justify-between items-start">
|
||
<span>A: <span data-i18n="examples.askHelp">有空帮我看代码吗？</span>👨💻</span>
|
||
<span class="chat-time">21:28</span>
|
||
</div>
|
||
<div class="p-3 bg-gray-50 rounded flex justify-between items-start">
|
||
<span>B: <span data-i18n="examples.agreeHelp">可以，什么问题？</span>🤔</span>
|
||
<span class="chat-time">21:30</span>
|
||
</div>
|
||
<div class="p-3 bg-gray-50 rounded flex justify-between items-start">
|
||
<span>A: <span data-i18n="examples.pythonError">Python 爬虫报索引错误...</span>🐛</span>
|
||
<span class="chat-time">21:32</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 正面示例 -->
|
||
<div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||
<h3 class="text-lg font-semibold text-green-500 mb-4" data-i18n="examples.recommended">✅ 推荐（NoHi）</h3>
|
||
<div class="space-y-3 text-gray-700">
|
||
<div class="p-3 bg-gray-50 rounded flex justify-between items-start">
|
||
<span>A: <span data-i18n="examples.NoHiExample">你好！Python 爬虫报 ValueError（列表索引越界），第23行代码，想请教排查方法？</span>🐍</span>
|
||
<span class="chat-time">20:15</span>
|
||
</div>
|
||
<div class="p-3 bg-gray-50 rounded flex justify-between items-start">
|
||
<span>B: <span data-i18n="examples.helpReply">建议先打印列表长度和索引，我帮你分析～</span>👍</span>
|
||
<span class="chat-time">20:18</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 模板 -->
|
||
<div class="max-w-3xl mx-auto mt-10 bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||
<h3 class="text-lg font-semibold mb-4" data-i18n="examples.templates">常用沟通模板 📝</h3>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<div class="p-3 bg-gray-50 rounded text-gray-700">
|
||
<i class="fa fa-check text-primary mr-2"></i> <span data-i18n="examples.template1">麻烦审核接口文档，参数格式是否合理？今日下班前需反馈 📄</span>
|
||
</div>
|
||
<div class="p-3 bg-gray-50 rounded text-gray-700">
|
||
<i class="fa fa-check text-primary mr-2"></i> <span data-i18n="examples.template2">同步项目进度：前端完成80%，后端剩2个接口未开发 🚀</span>
|
||
</div>
|
||
<div class="p-3 bg-gray-50 rounded text-gray-700">
|
||
<i class="fa fa-check text-primary mr-2"></i> <span data-i18n="examples.template3">请教 C# 多线程同步方法，需避免资源竞争 💻</span>
|
||
</div>
|
||
<div class="p-3 bg-gray-50 rounded text-gray-700">
|
||
<i class="fa fa-check text-primary mr-2"></i> <span data-i18n="examples.template4">周末活动是否参加？需提前统计人数 🎉</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 分享 -->
|
||
<section id="share" class="py-16">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="max-w-2xl mx-auto text-center">
|
||
<h2 class="text-2xl md:text-3xl font-bold mb-6" data-i18n="share.title">分享给朋友 🤝</h2>
|
||
<p class="text-gray-600 mb-8" data-i18n="share.desc">让更多人加入高效沟通的行列，一起拒绝无效寒暄 🚫</p>
|
||
<div class="bg-neutral p-6 rounded-lg border border-gray-200">
|
||
<div class="flex flex-col sm:flex-row gap-4 items-center">
|
||
<input type="text" id="shareLink" value="https://NoHi.example.com" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-center" readonly>
|
||
<button id="copyBtn" class="bg-primary text-white px-4 py-2 rounded-lg font-medium hover:bg-primary/90 transition-base">
|
||
<i class="fa fa-copy mr-1"></i> <span data-i18n="share.copyLink">复制链接</span> 📋
|
||
</button>
|
||
</div>
|
||
<div class="mt-6 flex justify-center gap-4">
|
||
<a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-base" title="WeChat">
|
||
<i class="fa fa-weixin"></i>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-base" title="QQ">
|
||
<i class="fa fa-qq"></i>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-base" title="Twitter">
|
||
<i class="fa fa-twitter"></i>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition-base" title="GitHub">
|
||
<i class="fa fa-github"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="py-8 bg-neutral border-t border-gray-200">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center text-gray-600">
|
||
<p data-i18n="footer.copyright"> LivelyXuan © 2025 NoHi · 高效沟通，从拒绝无意义问候开始 🚀</p>
|
||
<div class="mt-4 flex justify-center gap-6">
|
||
<a href="#" class="hover:text-primary transition-base" data-i18n="footer.about">关于</a>
|
||
<a href="#" class="hover:text-primary transition-base" data-i18n="footer.privacy">隐私政策</a>
|
||
<a href="#" class="hover:text-primary transition-base" data-i18n="footer.contact">联系我们</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 回到顶部 -->
|
||
<button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-sm hover:bg-primary/90 transition-base opacity-0 invisible">
|
||
<i class="fa fa-arrow-up"></i>
|
||
</button>
|
||
|
||
<!-- 多语言配置 + 打字机效果 + 交互脚本 -->
|
||
<script>
|
||
// 多语言数据
|
||
const i18nData = {
|
||
zh: {
|
||
nav: {
|
||
what: "什么是 NoHi",
|
||
why: "核心优势",
|
||
examples: "沟通示例",
|
||
share: "分享"
|
||
},
|
||
hero: {
|
||
reject: "拒绝",
|
||
meaninglessGreeting: "无意义问候",
|
||
efficient: "让沟通更高效",
|
||
desc: "告别「在吗？」🙅♂️「有空吗？」🙅♀️ 的来回拉扯，直接说明需求，节省彼此时间 ⏱️",
|
||
viewExamples: "查看示例 📋",
|
||
shareFriend: "分享给朋友 🤝"
|
||
},
|
||
what: {
|
||
title: "什么是 NoHi？🤔",
|
||
desc1: "是一种高效沟通理念，核心是",
|
||
core: "省略无意义的寒暄开场",
|
||
desc2: "直接点明沟通目的。",
|
||
desc3: "无需使用「在吗？」「有空吗？」这类需要对方额外回复的问候语，而是直接说明需求——比如：「想请教你 Python 列表推导式的问题 🐍」「麻烦审核下接口文档，今日下班前需反馈 📄」。"
|
||
},
|
||
why: {
|
||
title: "核心优势 ✨",
|
||
advantage1: {
|
||
title: "节省时间 ⏳",
|
||
desc: "避免「在吗-在的-什么事」的来回拉扯，对方可直接响应或延后回复"
|
||
},
|
||
advantage2: {
|
||
title: "目标明确 🎯",
|
||
desc: "提前告知核心需求，对方可快速准备相关信息，提升沟通效率"
|
||
},
|
||
advantage3: {
|
||
title: "减少焦虑 😌",
|
||
desc: "避免对方猜测「是否紧急」「有何要事」，降低心理负担"
|
||
}
|
||
},
|
||
examples: {
|
||
title: "沟通示例对比 📞",
|
||
notRecommended: "❌ 不推荐",
|
||
recommended: "✅ 推荐（NoHi）",
|
||
hello: "在吗？",
|
||
helloReply: "在的，怎么了？",
|
||
askHelp: "有空帮我看代码吗？",
|
||
agreeHelp: "可以，什么问题？",
|
||
pythonError: "Python 爬虫报索引错误...",
|
||
NoHiExample: "你好！Python 爬虫报 ValueError（列表索引越界），第23行代码，想请教排查方法？",
|
||
helpReply: "建议先打印列表长度和索引，我帮你分析～",
|
||
templates: "常用沟通模板 📝",
|
||
template1: "麻烦审核接口文档，参数格式是否合理？今日下班前需反馈 📄",
|
||
template2: "同步项目进度：前端完成80%，后端剩2个接口未开发 🚀",
|
||
template3: "请教 C# 多线程同步方法，需避免资源竞争 💻",
|
||
template4: "周末活动是否参加？需提前统计人数 🎉"
|
||
},
|
||
share: {
|
||
title: "分享给朋友 🤝",
|
||
desc: "让更多人加入高效沟通的行列，一起拒绝无效寒暄 🚫",
|
||
copyLink: "复制链接"
|
||
},
|
||
footer: {
|
||
copyright: " LivelyXuan © 2025 NoHi · 高效沟通，从拒绝无意义问候开始 🚀",
|
||
about: "关于",
|
||
privacy: "隐私政策",
|
||
contact: "联系我们"
|
||
},
|
||
// 打字机文本（中文，保留强调色标签）
|
||
typingText: "拒绝 <span class='text-primary'>无意义问候</span>，让沟通更高效"
|
||
},
|
||
en: {
|
||
nav: {
|
||
what: "What is NoHi",
|
||
why: "Core Advantages",
|
||
examples: "Communication Examples",
|
||
share: "Share"
|
||
},
|
||
hero: {
|
||
reject: "Reject",
|
||
meaninglessGreeting: "Meaningless Greetings",
|
||
efficient: "Make Communication Efficient",
|
||
desc: "Say goodbye to back-and-forth like 'Are you there?' 🙅♂️ or 'Do you have time?' 🙅♀️, state your needs directly and save time for both sides ⏱️",
|
||
viewExamples: "View Examples 📋",
|
||
shareFriend: "Share with Friends 🤝"
|
||
},
|
||
what: {
|
||
title: "What is NoHi? 🤔",
|
||
desc1: "is an efficient communication concept, whose core is to",
|
||
core: "omit meaningless greeting openings",
|
||
desc2: "and directly state the purpose of communication.",
|
||
desc3: "There's no need to use greetings that require additional replies from the other party, such as 'Are you there?' or 'Do you have time?'. Instead, state your needs directly—for example: 'I want to ask about Python list comprehensions 🐍' or 'Please review the API documentation, feedback is needed before the end of work today 📄'."
|
||
},
|
||
why: {
|
||
title: "Core Advantages ✨",
|
||
advantage1: {
|
||
title: "Save Time ⏳",
|
||
desc: "Avoid back-and-forth like 'Are you there? - Yes, what's up? - Need help with code?', the other party can respond directly or later"
|
||
},
|
||
advantage2: {
|
||
title: "Clear Goals 🎯",
|
||
desc: "Inform core needs in advance so the other party can prepare relevant information quickly and improve communication efficiency"
|
||
},
|
||
advantage3: {
|
||
title: "Reduce Anxiety 😌",
|
||
desc: "Avoid the other party guessing 'Is it urgent?' or 'What's the matter?', reducing unnecessary psychological burden"
|
||
}
|
||
},
|
||
examples: {
|
||
title: "Communication Example Comparison 📞",
|
||
notRecommended: "❌ Not Recommended",
|
||
recommended: "✅ Recommended (NoHi)",
|
||
hello: "Are you there?",
|
||
helloReply: "Yes, what's up?",
|
||
askHelp: "Do you have time to help me check the code?",
|
||
agreeHelp: "Sure, what's the problem?",
|
||
pythonError: "My Python crawler reported an index error...",
|
||
NoHiExample: "Hi! My Python crawler reported a ValueError (list index out of range) at line 23. Could you help me troubleshoot?",
|
||
helpReply: "Suggest printing the list length and index first, I'll help you analyze it~",
|
||
templates: "Common Communication Templates 📝",
|
||
template1: "Please review the API documentation, is the parameter format reasonable? Feedback is needed before the end of work today 📄",
|
||
template2: "Sync project progress: Frontend is 80% complete, 2 backend APIs left to develop 🚀",
|
||
template3: "Ask about C# multi-thread synchronization methods to avoid resource competition 💻",
|
||
template4: "Will you attend the weekend event? Need to count the number of participants in advance 🎉"
|
||
},
|
||
share: {
|
||
title: "Share with Friends 🤝",
|
||
desc: "Let more people join the ranks of efficient communication and reject meaningless greetings together 🚫",
|
||
copyLink: "Copy Link"
|
||
},
|
||
footer: {
|
||
copyright: "LivelyXuan © 2025 NoHi · Efficient communication starts with rejecting meaningless greetings 🚀",
|
||
about: "About",
|
||
privacy: "Privacy Policy",
|
||
contact: "Contact Us"
|
||
},
|
||
// 打字机文本（英文，保留强调色标签）
|
||
typingText: "Reject <span class='text-primary'>Meaningless Greetings</span>, Make Communication Efficient"
|
||
}
|
||
};
|
||
|
||
// 当前语言（默认中文）
|
||
let currentLang = "zh";
|
||
|
||
// 打字机效果函数（修复HTML标签渲染问题）
|
||
function typingEffect(text, element, speed = 100) {
|
||
let index = 0;
|
||
element.innerHTML = ""; // 改为innerHTML以支持HTML标签
|
||
// 清除现有定时器（避免切换语言时冲突）
|
||
if (window.typingTimer) clearInterval(window.typingTimer);
|
||
window.typingTimer = setInterval(() => {
|
||
if (index < text.length) {
|
||
// 处理HTML标签（保留强调色）
|
||
if (text[index] === "<") {
|
||
const tagEndIndex = text.indexOf(">", index);
|
||
if (tagEndIndex !== -1) {
|
||
// 完整插入标签
|
||
element.innerHTML += text.substring(index, tagEndIndex + 1);
|
||
index = tagEndIndex + 1;
|
||
} else {
|
||
element.innerHTML += text.charAt(index);
|
||
index++;
|
||
}
|
||
} else {
|
||
element.innerHTML += text.charAt(index);
|
||
index++;
|
||
}
|
||
} else {
|
||
clearInterval(window.typingTimer);
|
||
}
|
||
}, speed);
|
||
}
|
||
|
||
// 切换语言函数（新增打字机文本更新）
|
||
function changeLang(lang) {
|
||
if (currentLang === lang) return;
|
||
currentLang = lang;
|
||
|
||
// 更新页面标题
|
||
document.title = lang === "zh" ? "NoHi - 高效沟通，拒绝无意义问候" : "NoHi - Reject Meaningless Greetings, Communicate Efficiently";
|
||
|
||
// 更新分享链接提示
|
||
document.getElementById("shareLink").value = "https://nohi.pages.dev";
|
||
|
||
// 更新所有带 data-i18n 属性的元素
|
||
document.querySelectorAll("[data-i18n]").forEach(el => {
|
||
const key = el.getAttribute("data-i18n");
|
||
const value = key.split(".").reduce((obj, k) => obj?.[k], i18nData[lang]);
|
||
if (value) el.innerHTML = value; // 改为innerHTML以支持emoji
|
||
});
|
||
|
||
// 更新打字机文本（直接使用带标签的文本）
|
||
const typingText = i18nData[lang].typingText;
|
||
typingEffect(typingText, document.querySelector(".typing-text"));
|
||
|
||
// 更新语言按钮样式
|
||
document.getElementById("langZh").classList.toggle("text-primary", lang === "zh");
|
||
document.getElementById("langZh").classList.toggle("text-gray-500", lang !== "zh");
|
||
document.getElementById("langEn").classList.toggle("text-primary", lang === "en");
|
||
document.getElementById("langEn").classList.toggle("text-gray-500", lang !== "en");
|
||
}
|
||
|
||
// 页面加载时初始化打字机效果
|
||
window.addEventListener("load", () => {
|
||
const initialText = i18nData[currentLang].typingText;
|
||
typingEffect(initialText, document.querySelector(".typing-text"));
|
||
});
|
||
|
||
// 绑定语言切换按钮事件
|
||
document.getElementById("langZh").addEventListener("click", () => changeLang("zh"));
|
||
document.getElementById("langEn").addEventListener("click", () => changeLang("en"));
|
||
|
||
// 回到顶部
|
||
const backToTopBtn = document.getElementById("backToTop");
|
||
window.addEventListener("scroll", () => {
|
||
backToTopBtn.classList.toggle("opacity-100", window.scrollY > 300);
|
||
backToTopBtn.classList.toggle("invisible", window.scrollY <= 300);
|
||
});
|
||
backToTopBtn.addEventListener("click", () => {
|
||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
});
|
||
|
||
// 复制链接
|
||
const copyBtn = document.getElementById("copyBtn");
|
||
const linkInput = document.getElementById("shareLink");
|
||
copyBtn.addEventListener("click", () => {
|
||
linkInput.select();
|
||
document.execCommand("copy");
|
||
const originalText = copyBtn.innerHTML;
|
||
copyBtn.innerHTML = `<i class="fa fa-check mr-1"></i> ${currentLang === "zh" ? "已复制" : "Copied"} 📋`;
|
||
setTimeout(() => copyBtn.innerHTML = originalText, 2000);
|
||
});
|
||
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener("click", e => {
|
||
e.preventDefault();
|
||
const target = document.querySelector(anchor.getAttribute("href"));
|
||
if (target) {
|
||
window.scrollTo({
|
||
top: target.offsetTop - 80,
|
||
behavior: "smooth"
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |