https://daohang-c5k.pages.dev/tougao/

1<!DOCTYPE html>
2<html lang="zh">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Noise导航投稿区</title>
9    <link rel="icon" href="../assets/images/favicon4.png">
10    <link rel="apple-touch-icon" href="../assets/images/favicon.png">
11    <link rel="stylesheet" href="./style.css">
12    <style>
13        :root {
14            --paper: rgba(255, 253, 242, 0.96);
15            --paper-2: rgba(255, 255, 255, 0.92);
16            --ink: rgba(22, 24, 35, 0.92);
17            --muted: rgba(22, 24, 35, 0.68);
18            --line: rgba(22, 24, 35, 0.12);
19            --shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
20            --shadow-2: 0 10px 0 rgba(22, 24, 35, 0.1);
21            --tape: rgba(255, 255, 255, 0.62);
22            --tape-line: rgba(22, 24, 35, 0.12);
23            --accent: #4f8cff;
24            --accent-2: #745fff;
25        }
26
27        html,
28        body {
29            padding: 0;
30            height: 100%;
31            color: var(--ink);
32            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
33        }
34
35        body {
36            max-width: 700px;
37            margin: 0 auto;
38        }
39
40        .background {
41            position: fixed; /* 使用fixed确保背景图固定 */
42            top: 0;
43            left: 0;
44            width: 100%;
45            height: 100%;
46            background-size: cover;
47            background-position: center;
48            filter: blur(10px) saturate(1.08) contrast(0.92); /* 背景模糊效果 */
49            transform: scale(1.05);
50            z-index: 0; /* 确保背景在最底层 */
51        }
52
53        .container {
54            position: relative; /* 确保内容在背景之上 */
55            z-index: 1; /* 确保内容在背景之上 */
56            max-width: 800px; /* 设置最大宽度 */
57            width: calc(100% - 32px);
58            padding: 22px 22px 18px;
59            background: linear-gradient(180deg, var(--paper), var(--paper-2));
60            border-radius: 18px 18px 16px 20px;
61            border: 2px solid var(--line);
62            box-shadow: var(--shadow), var(--shadow-2);
63            margin: 50px auto 22px;
64            transform: none;
65        }
66
67        .container:before,
68        .container:after {
69            content: '';
70            position: absolute;
71            top: -14px;
72            width: 92px;
73            height: 28px;
74            border-radius: 10px;
75            background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46));
76            border: 1px solid var(--tape-line);
77            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
78            filter: blur(0.1px);
79            pointer-events: none;
80        }
81
82        .container:before {
83            left: 18px;
84            transform: none;
85        }
86
87        .container:after {
88            right: 18px;
89            transform: none;
90        }
91
92        .box-1 svg {
93            display: block;
94            margin: 0 auto 6px;
95            filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
96        }
97
98        .box-1 h2 {
99            margin: 6px 0 10px;
100            font-size: 22px;
101            letter-spacing: 0.3px;
102            text-align: center;
103            color: rgba(22, 24, 35, 0.94);
104        }
105
106        .box-1 p {
107            margin: 0;
108            color: var(--muted);
109            line-height: 1.75;
110        }
111
112        .recent-sites {
113            margin-top: 20px;
114            padding: 14px 14px 10px;
115            background: rgba(255, 255, 255, 0.82);
116            border-radius: 16px 14px 18px 14px;
117            border: 2px dashed rgba(22, 24, 35, 0.14);
118            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14), 0 10px 0 rgba(22, 24, 35, 0.08);
119            text-align: center; /* 内容居中 */
120            transform: none;
121        }
122
123        .recent-sites h3 {
124            margin: 4px 0 10px;
125            font-size: 15px;
126            letter-spacing: 0.2px;
127            color: rgba(22, 24, 35, 0.86);
128        }
129
130        #site-list {
131            max-height: 150px; /* 设置最大高度 */
132            overflow-y: auto; /* 允许纵向滚动 */
133            list-style-type: none; /* 去掉默认的列表样式 */
134            padding: 0; /* 去掉内边距 */
135            margin: 0; /* 去掉外边距 */
136        }
137
138        #site-list li {
139            padding: 10px 12px;
140            border-bottom: 1px solid rgba(22, 24, 35, 0.08);
141        }
142
143        #site-list li:last-child {
144            border-bottom: none; /* 最后一项去掉下边框 */
145        }
146
147        #site-list a {
148            text-decoration: none; /* 去掉链接下划线 */
149            color: rgba(22, 24, 35, 0.92);
150            display: inline-flex;
151            align-items: center;
152            gap: 8px;
153            padding: 6px 10px;
154            border-radius: 999px;
155            border: 1px solid rgba(22, 24, 35, 0.14);
156            background: rgba(255, 255, 255, 0.7);
157            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
158        }
159
160        #site-list a:hover {
161            border-color: rgba(79, 140, 255, 0.3);
162            transform: translateY(-1px);
163        }
164
165        #site-list a:active {
166            transform: translateY(1px);
167        }
168
169        .gradient-link {
170            background: linear-gradient(90deg, var(--accent-2), var(--accent));
171            -webkit-background-clip: text;
172            color: transparent;
173            text-decoration: none;
174            font-size: 16px;
175            font-weight: 700;
176        }
177
178        .gradient-link:hover {
179            filter: saturate(1.1);
180        }
181
182    </style>
183    </head>
184    
185    <body>
186        <div class="background" id="background"></div> <!-- 背景图层 -->
187        <div class="container">
188            <div class="box-1">
189                <svg width='52' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
190                    <path fill='#080808'
191                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm227 385.3c-1 4.2-3.5 10.4-7 17.8h.1l-.4.7c-20.3 43.1-73.1 127.7-73.1 127.7s-.1-.2-.3-.5l-15.5 26.8h74.5L575.1 810l32.3-128h-58.6l20.4-84.7c-16.5 3.9-35.9 9.4-59 16.8 0 0-31.2 18.2-89.9-35 0 0-39.6-34.7-16.6-43.4 9.8-3.7 47.4-8.4 77-12.3 40-5.4 64.6-8.2 64.6-8.2S422 517 392.7 512.5c-29.3-4.6-66.4-53.1-74.3-95.8 0 0-12.2-23.4 26.3-12.3 38.5 11.1 197.9 43.2 197.9 43.2s-207.4-63.3-221.2-78.7c-13.8-15.4-40.6-84.2-37.1-126.5 0 0 1.5-10.5 12.4-7.7 0 0 153.3 69.7 258.1 107.9 104.8 37.9 195.9 57.3 184.2 106.7z">
192                    </path>
193                </svg>
194            <h2>
195                Noise导航投稿区
196            </h2>
197            <p>

197这里是静态化的评论区，你可以投稿收录网址或提出建议反馈，【申请时请按格式提交】刷新页面或清理缓存查看最新留言，收录原则：定期维护网站，不接受存在时间过短及三分钟热度的网站收录，不收录无意义无价值网站，Does not include meaningless.由于页面数据过多，本页面无邮件通知，如需及时通知反馈可在我的主页留言提交收录👉<a href="https://www.noisework.cn" target="_blank" rel="noopener noreferrer">
198                <span class="gradient-link">前往主页</span>
199              </a>
200              </p>
201        </div>
202        
203        <!-- 最近收录的站点 -->
204        <div class="recent-sites">
205            <h3>最近收录的站点（40条）</h3>
206            <ul id="site-list">
207                <!-- 动态添加网站数据 -->
208            </ul>
209        </div>
210        
211        <div class="vcomment"></div>
212    </div>
213    
214    

214<script src="./Valine.min.js"></script>

214
215    

215<script src="./data.js"></script>

215
216    
217    

217<script>
218        // 使用 fetch 请求 API 获取最近收录的网站数据
219        async function fetchRecentSites() {
220            try {
221                const response = await fetch('https://extension.noisework.cn/api/notifications'); // 替换为您的 API 地址
222                if (!response.ok) {
223                    throw new Error('网络响应不正常');
224                }
225                const data = await response.json();
226                displaySites(data);
227            } catch (error) {
228                console.error('获取数据时出错:', error);
229            }
230        }
231
232        function displaySites(data) {
233            const siteListElement = document.getElementById('site-list');
234            siteListElement.innerHTML = ''; // 清空列表
235
236            if (data.message) {
237                const messageItem = document.createElement('li');
238                messageItem.textContent = data.message;
239                siteListElement.appendChild(messageItem);
240                return;
241            }
242
243            data.forEach(site => {
244                const listItem = document.createElement('li');
245                listItem.innerHTML = `<a href="${site.url}" target="_blank">${site.title}</a>`;
246                siteListElement.appendChild(listItem);
247            });
248        }
249
250        // 页面加载时获取最近收录的网站数据
251        window.onload = fetchRecentSites;
252
253        // 背景图数组
254        const backgroundImages = [
255            './img/bg1.webp',
256            './img/bg2.webp',
257            './img/bg3.webp',
258            './img/bg4.webp',
259            './img/bg6.webp',
260        ];
261
262        // 随机更换背景图
263        function changeBackground() {
264            const randomIndex = Math.floor(Math.random() * backgroundImages.length);
265            document.getElementById('background').style.backgroundImage = `url('${backgroundImages[randomIndex]}')`;
266        }
267
268        // 初始化背景图
269        changeBackground();
270    </script>

270
271<!-- Cloudflare Pages Analytics -->

271<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "

27173a8dad77ad34c7d87be74e957206d7f

271"}'></script>

271<!-- Cloudflare Pages Analytics --></body>
272
273</html>