citycorner/index.html at main · Knight5128/citycorner · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>City Corner - 你我相遇于小城一角，这里是AI工具导航站｜项目实践集｜学习笔记簿｜灵感交汇处</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="assets/js/particles.js"></script>
</head>
<body>
    <div id="app">
        <nav-bar></nav-bar>

        <header class="hero">
            <h1>City Corner</h1>
            <p class="typing-text" id="typing-text"></p>
        </header>

        <main class="category-grid">
            <category-card title="知行合一" theme="pink"></category-card>
            <category-card title="技术分享" theme="purple"></category-card>
            <category-card title="心情随笔" theme="green"></category-card>
            <category-card title="收集整理" theme="blue"></category-card>
            <category-card title="机器人" theme="navy"></category-card>
            <category-card title="网络安全" theme="teal"></category-card>
            <category-card title="概念" theme="cyan"></category-card>
        </main>

        <footer-component></footer-component>
    </div>

    <script>
        // 初始化粒子系统
        new ParticleSystem({
            particleCount: 50,        // 粒子数量
            particleSize: 1.5,          // 基础粒子大小
            particleSizeVariation: 0.25, // 粒子大小变化范围
            baseRadius: 50,           // 基础圆周运动半径
            radiusVariation: 25,      // 圆周半径变化范围
            brightness: 0.8,          // 粒子亮度 (0-1)
            initialSpread: 100        // 初始分布范围（像素）
        });

        document.addEventListener('DOMContentLoaded', function() {
            const texts = [
                "Hi, 欢迎来到小城一角, 请随意畅游!",
                "欢迎来到我的博客"
            ];
            const textElement = document.getElementById('typing-text');

            async function typeAndErase() {
                // 第一段文字：打字
                for (let i = 0; i <= texts[0].length; i++) {
                    textElement.textContent = texts[0].substring(0, i);
                    await new Promise(resolve => setTimeout(resolve, 100));
                }
                await new Promise(resolve => setTimeout(resolve, 500));

                // 第一段文字：删除
                for (let i = texts[0].length; i >= 0; i--) {
                    textElement.textContent = texts[0].substring(0, i);
                    await new Promise(resolve => setTimeout(resolve, 250));
                }
                await new Promise(resolve => setTimeout(resolve, 500));

                // 第二段文字：打字
                for (let i = 0; i <= texts[1].length; i++) {
                    textElement.textContent = texts[1].substring(0, i);
                    await new Promise(resolve => setTimeout(resolve, 100));
                }
            }

            typeAndErase();
        });
    </script>
</body>
</html>