Nebulamist/NoHi
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Main

Browse Source
This commit is contained in:
Raven
2025-12-04 13:38:09 +08:00
commit 812a3ab80c
1 changed files with 521 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

521
index.html Normal file
View File

@ -0,0 +1,521 @@
<!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>