website/index.html at main · RecycleBin232/website · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="terminal.css">
    <title>RecycleBin's Page</title>
    <link rel="icon" type="image/png" href="favicon.ico">
    <link href="https://fontsapi.zeoseven.com/925/main/result.css" rel="stylesheet" crossorigin />
    <link href="https://fontsapi.zeoseven.com/815/main/result.css" rel="stylesheet" crossorigin />

    <style>
        body {
            background-color: var(--background);
            color: var(--foreground);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            position: relative;
            font-family: "Z Labs Bitmap CN", monospace;
            font-weight: normal;
            image-rendering: pixelated;
        }

        .container {
            max-width: 800px;
            margin: auto;
            padding: 40px 20px;
        }

        .typewriter {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            border-right: 3px solid var(--accent);
            width: 0;
            animation:
                typing 3.5s steps(30, end) forwards,
                blink 0.8s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink {
            from, to { border-color: transparent }
            50% { border-color: var(--accent) }
        }

        body::before {
            content: " ";
            display: block;
            position: fixed;
            top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(rgba(0, 66, 117, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
            background-size: 100% 4px;
            z-index: 9999;
            pointer-events: none;
            opacity: 0.5;
        }

        h1, h2, p { margin-top: 0; }
        section { margin-bottom: 40px; }

        a:hover {
            background-color: var(--accent);
            color: var(--background) !important;
        }

        .terminal-title {
            display: inline-block;
            border-right: 8px solid var(--accent);
            padding-right: 10px;
            line-height: 1;
            animation: blink 0.8s step-end infinite;
        }
    </style>
</head>
<body class="terminal">
    <div class="container">
        <h1 class="terminal-title">RecycleBin's Page</h1>

        <section id="intro">
            <h2># 介绍</h2>
            <p><span class="typewriter">一个初三生，没钱但有点实力...？</span></p>
            <p>个人兴趣：<span class="typewriter">科技数码，游戏，EDM，Lost Media等</span></p>
        </section>

        <section id="links">
            <h2># 我的社交账号</h2>
            <p>本人冲浪强度较高，你几乎可以在互联网上的任何地方找到我。</p>
            <ul>
                <li><a href="https://space.bilibili.com/699913398" target="_blank">BiliBili</a></li>
                <li><a href="https://www.youtube.com/@RecycleBin-Kevin" target="_blank">YouTube</a></li>
                <li><a href="https://x.com/RecycleBin232" target="_blank">Twitter</a></li>
                <li><a href="https://weibo.com/u/8320913830" target="_blank">微博</a></li>
                <li><a href="https://www.facebook.com/profile.php?id=61572171631533" target="_blank">FaceBook</a></li>
                <li><a href="https://www.reddit.com/user/RecycleBin_Kevin/" target="_blank">Reddit</a></li>
            </ul>
        </section>

        <section id="links-extra">
            <h2>* 一些其他平台的账号</h2>
            <ul>
                <li><a href="http://www.wikidot.com/user:info/recyclebin_trash" target="_blank">Wikidot</a></li>
                <li><a href="https://www.pixiv.net/users/114689901" target="_blank">pixiv</a></li>
                <li><a href="https://music.163.com/#/user/home?id=1580119141" target="_blank">网易云音乐</a></li>
                <li><a href="https://open.spotify.com/user/31kwg3y3fdaspflpxwu6g2ibirge" target="_blank">Spotify</a></li>
                <li><a href="https://archive.org/details/@recyclebin_trash" target="_blank">Internet Archive</a></li>
            </ul>
        </section>

        <section id="contact">
            <h2># 联系我</h2>
            <ul>
                <li><a href="mailto:zxl1353@outlook.com">我的电子邮箱</a></li>
                <li><a href="contact.html" target="_blank">私人联系方式</a></li>
            </ul>
        </section>

        <section id="about">
            <h2># 关于本站</h2>
            <p>HTML，CSS 附加样式由 Google Gemini 编写</p>
            <p>CSS 样式来自：<a href="https://github.com/panr/terminal-css" target="_blank">terminal-css</a></p>
            <p>本站在 GitHub 上的源码：<a href="https://github.com/RecycleBin232/website/">这里</a></p>
        </section>

        <footer style="margin-top: 60px; opacity: 0.6; font-size: 0.8em; border-top: 1px dashed var(--foreground); padding-top: 10px; line-height: 1.8;">
            <p>你的浏览器UA是: <span id="user-ua">加载中...</span></p>
            <p>
                本站提及的所有品牌名称、标志及商标仅用于识别及指向性目的，其版权归原权利人所有。
            </p>
            <p>
                <b>@2026 RecycleBin. 保留一切权利。</b>
            </p>
        </footer>
    </div>

    <script>
        document.getElementById('user-ua').innerText = navigator.userAgent;
    </script>
</body>
</html>