Skip to content

Commit b4e6c4b

Browse files
XHPlusXHPlus
committed
Add community page with WeChat QR code (using Git LFS for jpg file)
1 parent 477409d commit b4e6c4b

File tree

3 files changed

+280
-0
lines changed

3 files changed

+280
-0
lines changed

‎.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.jpg filter=lfs diff=lfs merge=lfs -text

‎community.html‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>LightX2V 技术讨论群 · Light AI</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
10+
<style>
11+
:root {
12+
color-scheme: light;
13+
--page-bg: radial-gradient(140% 140% at 20% 20%, #161b33 0%, #0f172a 28%, #020617 60%, #01030d 100%);
14+
--grid-overlay: linear-gradient(transparent 94%, rgba(148, 163, 184, 0.16) 96%) center/100% 48px, linear-gradient(90deg, transparent 94%, rgba(148, 163, 184, 0.14) 96%) center/48px 100%;
15+
--card-bg: rgba(15, 23, 42, 0.7);
16+
--card-border: rgba(148, 163, 184, 0.18);
17+
--text-primary: #e2e8f0;
18+
--text-secondary: #94a3b8;
19+
--accent: #38bdf8;
20+
--accent-strong: #0ea5e9;
21+
--accent-muted: rgba(56, 189, 248, 0.18);
22+
--shadow-glow: 0 32px 80px rgba(14, 165, 233, 0.28);
23+
--container-width: min(1100px, 90vw);
24+
}
25+
* {
26+
box-sizing: border-box;
27+
}
28+
body {
29+
font-family: 'Space Grotesk', 'Arial', sans-serif;
30+
margin: 0;
31+
color: var(--text-primary);
32+
line-height: 1.7;
33+
background: var(--page-bg), #020617;
34+
background-blend-mode: screen;
35+
min-height: 100vh;
36+
position: relative;
37+
overflow-x: hidden;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
padding: 2rem;
42+
}
43+
body::before {
44+
content: "";
45+
position: fixed;
46+
inset: 0;
47+
background: var(--grid-overlay);
48+
opacity: 0.4;
49+
pointer-events: none;
50+
z-index: -1;
51+
}
52+
.container {
53+
width: 100%;
54+
max-width: 600px;
55+
text-align: center;
56+
}
57+
.lang-switch {
58+
display: flex;
59+
justify-content: flex-end;
60+
margin-bottom: 2rem;
61+
}
62+
.lang-toggle {
63+
display: inline-flex;
64+
align-items: center;
65+
gap: 0.35rem;
66+
background: rgba(148, 163, 184, 0.14);
67+
border: 1px solid rgba(148, 163, 184, 0.22);
68+
border-radius: 999px;
69+
padding: 0.35rem;
70+
}
71+
.lang-toggle button {
72+
background: transparent;
73+
border: none;
74+
border-radius: 999px;
75+
color: var(--text-secondary);
76+
padding: 0.45rem 0.95rem;
77+
font-size: 0.85rem;
78+
cursor: pointer;
79+
transition: background 0.2s ease, color 0.2s ease;
80+
}
81+
.lang-toggle button.active {
82+
background: rgba(56, 189, 248, 0.16);
83+
color: var(--accent);
84+
}
85+
.card {
86+
background: var(--card-bg);
87+
border: 1px solid var(--card-border);
88+
border-radius: 24px;
89+
padding: 3rem 2.5rem;
90+
backdrop-filter: blur(18px);
91+
box-shadow: 0 24px 44px rgba(15, 23, 42, 0.4);
92+
}
93+
h1 {
94+
font-size: clamp(1.8rem, 4vw, 2.4rem);
95+
font-weight: 600;
96+
margin: 0 0 1rem;
97+
letter-spacing: -0.02em;
98+
color: var(--text-primary);
99+
}
100+
.subtitle {
101+
color: var(--text-secondary);
102+
font-size: 1rem;
103+
margin: 0 0 2.5rem;
104+
line-height: 1.6;
105+
}
106+
.qr-container {
107+
margin: 2rem 0;
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
}
112+
.qr-code {
113+
width: 300px;
114+
background: transparent;
115+
border-radius: 16px;
116+
padding: 0;
117+
display: flex;
118+
align-items: center;
119+
justify-content: center;
120+
box-sizing: border-box;
121+
}
122+
.qr-code img {
123+
width: 100%;
124+
height: auto;
125+
display: block;
126+
border-radius: 16px;
127+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
128+
}
129+
.qr-placeholder {
130+
width: 100%;
131+
min-height: 400px;
132+
display: flex;
133+
align-items: center;
134+
justify-content: center;
135+
color: var(--text-secondary);
136+
font-size: 0.9rem;
137+
border: 2px dashed rgba(148, 163, 184, 0.3);
138+
border-radius: 8px;
139+
padding: 2rem;
140+
text-align: center;
141+
box-sizing: border-box;
142+
}
143+
.instructions {
144+
margin-top: 2rem;
145+
padding-top: 2rem;
146+
border-top: 1px solid rgba(148, 163, 184, 0.16);
147+
}
148+
.instructions p {
149+
color: var(--text-secondary);
150+
font-size: 0.95rem;
151+
margin: 0.5rem 0;
152+
line-height: 1.6;
153+
}
154+
.back-link {
155+
margin-top: 2rem;
156+
display: inline-block;
157+
color: var(--accent);
158+
text-decoration: none;
159+
font-size: 0.95rem;
160+
transition: opacity 0.2s ease;
161+
}
162+
.back-link:hover {
163+
opacity: 0.8;
164+
}
165+
@media (max-width: 600px) {
166+
body {
167+
padding: 1rem;
168+
}
169+
.card {
170+
padding: 2rem 1.5rem;
171+
}
172+
.qr-code {
173+
width: 85%;
174+
max-width: 280px;
175+
padding: 0;
176+
}
177+
}
178+
</style>
179+
</head>
180+
<body>
181+
<div class="container">
182+
<div class="lang-switch">
183+
<div class="lang-toggle" role="group" aria-label="Language toggle">
184+
<button type="button" data-lang="en">English</button>
185+
<button type="button" data-lang="zh" class="active">中文</button>
186+
</div>
187+
</div>
188+
189+
<div class="card">
190+
<h1 data-i18n="title">LightX2V 技术讨论群</h1>
191+
<p class="subtitle" data-i18n="subtitle">扫描二维码加入微信群，与社区成员交流技术问题</p>
192+
193+
<div class="qr-container">
194+
<div class="qr-code">
195+
<!-- 请将二维码图片放在项目根目录，命名为 wechat-qr.png -->
196+
<img src="wechat-qr.jpg" alt="微信群二维码" id="qr-image" style="display: none;">
197+
<div class="qr-placeholder" id="qr-placeholder">
198+
请将二维码图片命名为 wechat-qr.png<br>并放在项目根目录
199+
</div>
200+
</div>
201+
</div>
202+
203+
<div class="instructions">
204+
<p data-i18n="instruction1">使用微信扫描上方二维码加入群聊</p>
205+
<p data-i18n="instruction2">如二维码失效，请联系管理员更新</p>
206+
</div>
207+
208+
<a href="index.html" class="back-link" data-i18n="back">← 返回首页</a>
209+
</div>
210+
</div>
211+
212+
<script>
213+
const translations = {
214+
en: {
215+
'title': 'LightX2V Technical Discussion Group',
216+
'subtitle': 'Scan the QR code to join our WeChat group and discuss technical issues with community members',
217+
'instruction1': 'Use WeChat to scan the QR code above to join the group',
218+
'instruction2': 'If the QR code expires, please contact the administrator to update it',
219+
'back': '← Back to Home'
220+
},
221+
zh: {
222+
'title': 'LightX2V 技术讨论群',
223+
'subtitle': '扫描二维码加入微信群，与社区成员交流技术问题',
224+
'instruction1': '使用微信扫描上方二维码加入群聊',
225+
'instruction2': '如二维码失效，请联系管理员更新',
226+
'back': '← 返回首页'
227+
}
228+
};
229+
230+
// 检查二维码图片是否存在
231+
const qrImage = document.getElementById('qr-image');
232+
const qrPlaceholder = document.getElementById('qr-placeholder');
233+
234+
qrImage.onload = function() {
235+
qrImage.style.display = 'block';
236+
qrPlaceholder.style.display = 'none';
237+
};
238+
239+
qrImage.onerror = function() {
240+
qrImage.style.display = 'none';
241+
qrPlaceholder.style.display = 'flex';
242+
};
243+
244+
// 尝试加载图片
245+
qrImage.src = 'wechat-qr.jpg';
246+
247+
const htmlEl = document.documentElement;
248+
const langButtons = document.querySelectorAll('.lang-toggle button');
249+
250+
function updateLanguage(lang) {
251+
const messages = translations[lang] || translations.zh;
252+
const fallback = translations.zh;
253+
document.querySelectorAll('[data-i18n]').forEach(node => {
254+
const key = node.getAttribute('data-i18n');
255+
const value = messages[key] ?? fallback[key] ?? '';
256+
node.textContent = value;
257+
});
258+
langButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.lang === lang));
259+
htmlEl.setAttribute('lang', lang === 'zh' ? 'zh-CN' : 'en');
260+
localStorage.setItem('lightai-lang', lang);
261+
}
262+
263+
langButtons.forEach(button => {
264+
button.addEventListener('click', () => {
265+
updateLanguage(button.dataset.lang);
266+
});
267+
});
268+
269+
const savedLang = localStorage.getItem('lightai-lang');
270+
const browserLang = navigator.language || navigator.userLanguage || 'en';
271+
const initialLang = savedLang || (browserLang.toLowerCase().startsWith('zh') ? 'zh' : 'en');
272+
updateLanguage(initialLang);
273+
</script>
274+
</body>
275+
</html>
276+

‎wechat-qr.jpg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)