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
<!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">科技，游戏，音乐，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://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;">
                <b>@2026 RecycleBin.</b>
            </p>
        </footer>
    </div>

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