356 lines
22 KiB
HTML
356 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="light" lang="zh-CN"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>Feedback & Support - 知习 AI</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"on-secondary-fixed-variant": "#421dc9",
|
||
"primary-fixed": "#dce1ff",
|
||
"on-tertiary-fixed-variant": "#44474a",
|
||
"secondary-fixed": "#e5deff",
|
||
"surface-tint": "#1a53d6",
|
||
"secondary-container": "#715af8",
|
||
"error": "#ba1a1a",
|
||
"on-error-container": "#93000a",
|
||
"on-tertiary-fixed": "#181c1f",
|
||
"outline-variant": "#c3c5d7",
|
||
"on-tertiary-container": "#fcfcff",
|
||
"on-primary-fixed-variant": "#003cad",
|
||
"tertiary": "#595c60",
|
||
"surface-container-lowest": "#ffffff",
|
||
"on-tertiary": "#ffffff",
|
||
"background": "#faf9ff",
|
||
"tertiary-fixed": "#e0e3e6",
|
||
"on-surface-variant": "#434654",
|
||
"inverse-on-surface": "#edf0ff",
|
||
"inverse-surface": "#283042",
|
||
"surface-container-low": "#f1f3ff",
|
||
"on-surface": "#131b2c",
|
||
"secondary-fixed-dim": "#c8bfff",
|
||
"on-primary": "#ffffff",
|
||
"on-primary-fixed": "#00164d",
|
||
"surface-variant": "#dbe2fa",
|
||
"surface-bright": "#faf9ff",
|
||
"on-background": "#131b2c",
|
||
"tertiary-container": "#727578",
|
||
"surface-dim": "#d2daf1",
|
||
"secondary": "#583dde",
|
||
"on-error": "#ffffff",
|
||
"on-primary-container": "#fffbff",
|
||
"surface": "#faf9ff",
|
||
"on-secondary-container": "#fffbff",
|
||
"on-secondary": "#ffffff",
|
||
"primary-container": "#3c6bed",
|
||
"outline": "#737686",
|
||
"error-container": "#ffdad6",
|
||
"primary": "#1550d3",
|
||
"on-secondary-fixed": "#190064",
|
||
"tertiary-fixed-dim": "#c4c7ca",
|
||
"surface-container-highest": "#dbe2fa",
|
||
"surface-container-high": "#e1e8ff",
|
||
"surface-container": "#e9edff",
|
||
"primary-fixed-dim": "#b5c4ff",
|
||
"inverse-primary": "#b5c4ff"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.25rem",
|
||
"lg": "0.5rem",
|
||
"xl": "0.75rem",
|
||
"full": "9999px"
|
||
},
|
||
"spacing": {
|
||
"container-max": "1200px",
|
||
"unit": "8px",
|
||
"section-padding": "120px",
|
||
"card-padding": "32px",
|
||
"gutter": "24px"
|
||
},
|
||
"fontFamily": {
|
||
"headline-lg": [
|
||
"Manrope"
|
||
],
|
||
"label-sm": [
|
||
"Inter"
|
||
],
|
||
"headline-md": [
|
||
"Manrope"
|
||
],
|
||
"display-xl": [
|
||
"Manrope"
|
||
],
|
||
"body-lg": [
|
||
"Manrope"
|
||
],
|
||
"body-base": [
|
||
"Manrope"
|
||
]
|
||
},
|
||
"fontSize": {
|
||
"headline-lg": [
|
||
"40px",
|
||
{
|
||
"lineHeight": "1.2",
|
||
"letterSpacing": "-0.01em",
|
||
"fontWeight": "700"
|
||
}
|
||
],
|
||
"label-sm": [
|
||
"13px",
|
||
{
|
||
"lineHeight": "1",
|
||
"letterSpacing": "0.05em",
|
||
"fontWeight": "600"
|
||
}
|
||
],
|
||
"headline-md": [
|
||
"28px",
|
||
{
|
||
"lineHeight": "1.3",
|
||
"fontWeight": "600"
|
||
}
|
||
],
|
||
"display-xl": [
|
||
"64px",
|
||
{
|
||
"lineHeight": "1.1",
|
||
"letterSpacing": "-0.02em",
|
||
"fontWeight": "800"
|
||
}
|
||
],
|
||
"body-lg": [
|
||
"18px",
|
||
{
|
||
"lineHeight": "1.6",
|
||
"fontWeight": "400"
|
||
}
|
||
],
|
||
"body-base": [
|
||
"16px",
|
||
{
|
||
"lineHeight": "1.6",
|
||
"fontWeight": "400"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.glass-card {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
}
|
||
.dot-grid {
|
||
background-image: radial-gradient(circle at center, #cbd5e1 1px, transparent 1px);
|
||
background-size: 24px 24px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-background text-on-background min-h-screen flex flex-col font-body-base antialiased relative">
|
||
<!-- Blueprint Pattern Overlay -->
|
||
<div class="fixed inset-0 dot-grid opacity-30 pointer-events-none z-[-1]"></div>
|
||
<!-- TopNavBar -->
|
||
<nav class="bg-white/70 backdrop-blur-2xl dark:bg-slate-900/70 text-blue-600 dark:text-blue-400 font-manrope tracking-tight text-sm font-medium fixed top-0 w-full z-50 border-b border-white/20 dark:border-slate-800/50 shadow-[0_20_40px_rgba(18,26,43,0.04)] ease-out scale-active:95">
|
||
<div class="flex items-center justify-between px-8 h-20 max-w-screen-2xl mx-auto">
|
||
<div class="text-xl font-extrabold tracking-tighter text-slate-900 dark:text-white">知习 AI</div>
|
||
<div class="hidden md:flex items-center gap-8">
|
||
<a class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 hover:opacity-80 transition-all duration-300" href="#">Explore</a>
|
||
<a class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 hover:opacity-80 transition-all duration-300" href="#">Curriculum</a>
|
||
<a class="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 hover:opacity-80 transition-all duration-300" href="#">Library</a>
|
||
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 pb-1 hover:opacity-80 transition-all duration-300" href="#">Support</a>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<button class="hover:opacity-80 transition-all duration-300 text-slate-500 dark:text-slate-400">
|
||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||
</button>
|
||
<button class="hover:opacity-80 transition-all duration-300 text-slate-500 dark:text-slate-400">
|
||
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
||
</button>
|
||
<button class="bg-primary text-on-primary px-5 py-2.5 rounded-full text-sm font-semibold hover:opacity-80 transition-all duration-300 shadow-md">Get Started</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!-- Main Content Canvas -->
|
||
<main class="flex-grow pt-[140px] pb-section-padding px-6">
|
||
<!-- Hero Section -->
|
||
<section class="max-w-container-max mx-auto mb-section-padding text-center relative">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-surface-container-low to-transparent opacity-50 rounded-[3rem] z-[-1] pointer-events-none transform -translate-y-12"></div>
|
||
<h1 class="font-display-xl text-display-xl text-on-surface mb-6">反馈与支持</h1>
|
||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-16 leading-relaxed">
|
||
如果你在使用知习 AI 的过程中遇到问题，或者对产品有任何想法，欢迎告诉我们。每一条真实反馈，都会帮助产品变得更好。
|
||
</p>
|
||
<div class="relative w-full max-w-lg mx-auto aspect-square mb-12">
|
||
<img alt="A soft, ethereal 3D rendering of a translucent message bubble floating in a bright, minimalist studio environment. The light is diffused and high-key, casting very soft shadows on a pristine white floor. Subtle hints of calm blue and purple are visible within the glass-like structure of the bubble, reflecting the 'Intellectual Serenity' aesthetic. The mood is calm, modern, and trustworthy." class="w-full h-full object-cover rounded-[2rem] shadow-[0_20px_60px_rgba(18,26,43,0.08)]" data-alt="A soft, ethereal 3D rendering of a translucent message bubble floating in a bright, minimalist studio environment. The light is diffused and high-key, casting very soft shadows on a pristine white floor. Subtle hints of calm blue and purple are visible within the glass-like structure of the bubble, reflecting the 'Intellectual Serenity' aesthetic. The mood is calm, modern, and trustworthy." src="https://lh3.googleusercontent.com/aida/ADBb0uiz5ALBcopzHW6YiPJIDzON9d-GOLgDERcajQ5kK6yovNdiJMCmpuZuNlk2C-YswHpOGuS9QyUcXlhEDMo3ciIB-XsCDSeZR93nLEqTGzbBvsjg2oWn5KcH_pkkNe3q_XmhPLokaIzjt-5jnueWgsaYphhUsTmsce36ow9bTQwh3MksP4gKzioKsM5ZrIXXTjFpkDBH1JyvdKZ7hXd7gLYcZEHfCA2wy1QkKFIHnUJzZswW2oTYXSoRlSz65APtSrlIErBY7T9Kqg"/>
|
||
</div>
|
||
</section>
|
||
<!-- Form & Contact Layout -->
|
||
<section class="max-w-[1000px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-start mb-section-padding">
|
||
<!-- Feedback Form -->
|
||
<div class="lg:col-span-8 glass-card rounded-[1.5rem] p-8 md:p-10 shadow-[0_20px_40px_rgba(18,26,43,0.04)]">
|
||
<form class="space-y-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- Name -->
|
||
<div>
|
||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-2" for="name">你的称呼 <span class="text-tertiary font-normal">(可选)</span></label>
|
||
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 font-body-base text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 outline-none placeholder:text-outline" id="name" placeholder="例如: 张三" type="text"/>
|
||
</div>
|
||
<!-- Email -->
|
||
<div>
|
||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-2" for="email">电子邮箱 <span class="text-error">*</span></label>
|
||
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 font-body-base text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 outline-none placeholder:text-outline" id="email" placeholder="your@email.com" required="" type="email"/>
|
||
</div>
|
||
</div>
|
||
<!-- Type -->
|
||
<div>
|
||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-2" for="type">反馈类型 <span class="text-error">*</span></label>
|
||
<select class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 font-body-base text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 outline-none appearance-none" id="type" required="">
|
||
<option disabled="" selected="" value="">请选择反馈类型</option>
|
||
<option value="功能建议">功能建议</option>
|
||
<option value="问题反馈">问题反馈</option>
|
||
<option value="使用体验">使用体验</option>
|
||
<option value="隐私与账号">隐私与账号</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
</div>
|
||
<!-- Message -->
|
||
<div>
|
||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-2" for="message">反馈内容 <span class="text-error">*</span></label>
|
||
<textarea class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-4 py-3 font-body-base text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 outline-none placeholder:text-outline resize-y" id="message" placeholder="详细描述你遇到的问题或建议..." required="" rows="5"></textarea>
|
||
</div>
|
||
<!-- Device -->
|
||
<div>
|
||
<label class="block font-label-sm text-label-sm text-on-surface-variant mb-3">使用设备</label>
|
||
<div class="flex flex-wrap gap-3">
|
||
<label class="cursor-pointer">
|
||
<input class="peer sr-only" name="device" type="radio" value="iPhone"/>
|
||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">iPhone</div>
|
||
</label>
|
||
<label class="cursor-pointer">
|
||
<input class="peer sr-only" name="device" type="radio" value="iPad"/>
|
||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">iPad</div>
|
||
</label>
|
||
<label class="cursor-pointer">
|
||
<input class="peer sr-only" name="device" type="radio" value="Mac"/>
|
||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">Mac</div>
|
||
</label>
|
||
<label class="cursor-pointer">
|
||
<input class="peer sr-only" name="device" type="radio" value="Web"/>
|
||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">Web</div>
|
||
</label>
|
||
<label class="cursor-pointer">
|
||
<input class="peer sr-only" name="device" type="radio" value="其他"/>
|
||
<div class="px-5 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body-base text-sm hover:bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary-container transition-all">其他</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- Submit -->
|
||
<div class="pt-4">
|
||
<button class="w-full bg-gradient-to-r from-primary to-secondary text-on-primary font-label-sm text-label-sm py-4 rounded-xl hover:shadow-[0_10px_20px_rgba(21,80,211,0.2)] transition-all duration-300 transform hover:-translate-y-0.5" type="submit">
|
||
提交反馈
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- Contact Info -->
|
||
<div class="lg:col-span-4 space-y-6">
|
||
<div class="bg-surface-container-lowest rounded-[1.5rem] p-8 shadow-[0_20px_40px_rgba(18,26,43,0.04)] border border-outline-variant/30">
|
||
<h3 class="font-headline-md text-headline-md text-on-surface mb-6">其他联系方式</h3>
|
||
<ul class="space-y-6">
|
||
<li class="flex items-start gap-4">
|
||
<span class="material-symbols-outlined text-primary mt-1" data-icon="mail">mail</span>
|
||
<div>
|
||
<p class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider mb-1">邮箱</p>
|
||
<a class="font-body-base text-body-base text-on-surface hover:text-primary transition-colors" href="mailto:support@longde.cloud">support@longde.cloud</a>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start gap-4">
|
||
<span class="material-symbols-outlined text-primary mt-1" data-icon="language">language</span>
|
||
<div>
|
||
<p class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider mb-1">官网</p>
|
||
<a class="font-body-base text-body-base text-on-surface hover:text-primary transition-colors" href="https://longde.cloud" target="_blank">longde.cloud</a>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start gap-4">
|
||
<span class="material-symbols-outlined text-primary mt-1" data-icon="update">update</span>
|
||
<div>
|
||
<p class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider mb-1">更新记录</p>
|
||
<a class="font-body-base text-body-base text-on-surface hover:text-primary transition-colors" href="/changelog">查看日志 →</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- FAQ Section -->
|
||
<section class="max-w-3xl mx-auto">
|
||
<h2 class="font-headline-lg text-headline-lg text-on-surface text-center mb-12">常见问题</h2>
|
||
<div class="space-y-4">
|
||
<!-- FAQ Item 1 -->
|
||
<details class="group bg-surface-container-lowest rounded-xl border border-outline-variant/50 overflow-hidden cursor-pointer shadow-sm hover:shadow-md transition-shadow">
|
||
<summary class="flex items-center justify-between p-6 font-headline-md text-lg text-on-surface font-medium list-none outline-none">
|
||
知习 AI 现在可以使用了吗?
|
||
<span class="material-symbols-outlined text-on-surface-variant group-open:rotate-180 transition-transform duration-300" data-icon="expand_more">expand_more</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 pt-0 font-body-base text-body-base text-on-surface-variant">
|
||
产品还在早期版本开发中，官网会持续更新进展。
|
||
</div>
|
||
</details>
|
||
<!-- FAQ Item 2 -->
|
||
<details class="group bg-surface-container-lowest rounded-xl border border-outline-variant/50 overflow-hidden cursor-pointer shadow-sm hover:shadow-md transition-shadow">
|
||
<summary class="flex items-center justify-between p-6 font-headline-md text-lg text-on-surface font-medium list-none outline-none">
|
||
知习 AI 支持哪些平台?
|
||
<span class="material-symbols-outlined text-on-surface-variant group-open:rotate-180 transition-transform duration-300" data-icon="expand_more">expand_more</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 pt-0 font-body-base text-body-base text-on-surface-variant">
|
||
第一阶段优先支持 iPhone，后续再考虑 iPad、Mac 和其他平台。
|
||
</div>
|
||
</details>
|
||
<!-- FAQ Item 3 -->
|
||
<details class="group bg-surface-container-lowest rounded-xl border border-outline-variant/50 overflow-hidden cursor-pointer shadow-sm hover:shadow-md transition-shadow">
|
||
<summary class="flex items-center justify-between p-6 font-headline-md text-lg text-on-surface font-medium list-none outline-none">
|
||
知习 AI 会保存我的学习内容吗?
|
||
<span class="material-symbols-outlined text-on-surface-variant group-open:rotate-180 transition-transform duration-300" data-icon="expand_more">expand_more</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 pt-0 font-body-base text-body-base text-on-surface-variant">
|
||
为了提供学习记录和 AI 分析，产品可能会保存必要的学习数据，具体请查看隐私政策。
|
||
</div>
|
||
</details>
|
||
<!-- FAQ Item 4 -->
|
||
<details class="group bg-surface-container-lowest rounded-xl border border-outline-variant/50 overflow-hidden cursor-pointer shadow-sm hover:shadow-md transition-shadow">
|
||
<summary class="flex items-center justify-between p-6 font-headline-md text-lg text-on-surface font-medium list-none outline-none">
|
||
如何删除我的数据?
|
||
<span class="material-symbols-outlined text-on-surface-variant group-open:rotate-180 transition-transform duration-300" data-icon="expand_more">expand_more</span>
|
||
</summary>
|
||
<div class="px-6 pb-6 pt-0 font-body-base text-body-base text-on-surface-variant">
|
||
你可以通过本页面联系我们，我们会根据请求处理相关数据。
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- Footer -->
|
||
<footer class="bg-[#F6F8FC] dark:bg-slate-950 text-blue-600 dark:text-blue-400 font-manrope text-xs tracking-wide uppercase font-semibold w-full py-16 mt-32 border-t border-slate-200 dark:border-slate-800 opacity-hover:70 flex flex-col md:flex-row justify-between items-center px-12 gap-8">
|
||
<div class="text-lg font-bold text-slate-400 dark:text-slate-600">
|
||
© 2024 知习 AI. Intellectual Serenity in Learning.
|
||
</div>
|
||
<div class="flex flex-wrap gap-6 justify-center">
|
||
<a class="text-slate-400 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="#">Privacy Policy</a>
|
||
<a class="text-slate-400 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="#">Terms of Service</a>
|
||
<a class="text-slate-400 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="#">Help Center</a>
|
||
<a class="text-slate-400 dark:text-slate-500 hover:text-blue-500 dark:hover:text-blue-300 transition-colors duration-200" href="#">Feedback</a>
|
||
</div>
|
||
</footer>
|
||
</body></html> |