ERROR418 commited on
Commit
22cd487
·
verified ·
1 Parent(s): a135e8d

Create free-api.html

Browse files
Files changed (1) hide show
  1. free-api.html +105 -0
free-api.html ADDED
@@ -0,0 +1,105 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>One API</title>
7
+ <link rel="stylesheet" href="style.css"> <!-- 引入样式文件 -->
8
+ <style>
9
+ body {
10
+ margin: 0;
11
+ font-family: Arial, sans-serif;
12
+ display: flex;
13
+ justify-content: flex-start; /* 左对齐 */
14
+ align-items: center;
15
+ height: 100vh;
16
+ background-size: cover;
17
+ background-position: center;
18
+ transition: background-image 1s ease-in-out;
19
+ color: white;
20
+ padding: 0 20px; /* 减少左右内边距 */
21
+ }
22
+ .container {
23
+ max-width: 600px;
24
+ width: 100%; /* 使容器宽度适应屏幕 */
25
+ }
26
+ h1 {
27
+ font-size: 48px;
28
+ margin-bottom: 30px;
29
+ text-shadow: 2px 2px 0 black; /* 添加黑色描边 */
30
+ }
31
+ p {
32
+ font-size: 18px;
33
+ margin-bottom: 30px;
34
+ text-shadow: 1px 1px 0 black; /* 添加黑色描边 */
35
+ }
36
+ .button-container {
37
+ display: flex; /* 使用 flexbox */
38
+ flex-wrap: wrap; /* 允许换行 */
39
+ justify-content: flex-start; /* 左对齐 */
40
+ }
41
+ button {
42
+ padding: 10px 20px;
43
+ background-color: black; /* 设置按钮背景色为黑色 */
44
+ border: none;
45
+ border-radius: 5px;
46
+ color: white;
47
+ text-decoration: none;
48
+ font-size: 16px;
49
+ margin-right: 10px; /* 添加按钮之间的右间隔 */
50
+ margin-bottom: 10px; /* 添加按钮底部间隔 */
51
+ transition: background-color 0.3s;
52
+ }
53
+ button:hover {
54
+ background-color: rgba(255, 255, 255, 0.5);
55
+ }
56
+ </style>
57
+ </head>
58
+ <body>
59
+ <div class="container">
60
+ <h1>One API</h1>
61
+ <p>由不会玩电路的红石使用one-api搭建的API网站,支持OpenAI部分模型以及部分开源模型,详细信息请查看关于页面。</p>
62
+ <script>
63
+ // 壁纸链接
64
+ const desktopWallpapers = [
65
+ './background1.jpg',
66
+ './background2.jpg',
67
+ './background3.jpg',
68
+ './background4.jpg',
69
+ './background5.jpg',
70
+ './background6.jpg',
71
+ './background7.jpg',
72
+ './background8.jpg',
73
+ './background9.jpg',
74
+ './background10.jpg'
75
+ ];
76
+ const mobileWallpapers = [
77
+ './m-background1.jpg',
78
+ './m-background2.jpg',
79
+ './m-background3.jpg',
80
+ './m-background4.jpg',
81
+ './m-background5.jpg',
82
+ './m-background6.jpg',
83
+ './m-background7.jpg',
84
+ './m-background8.jpg',
85
+ './m-background9.jpg',
86
+ './m-background10.jpg'
87
+ ];
88
+ // 根据设备类型选择壁纸
89
+ const isMobile = window.innerWidth <= 768; // 768px 以下为移动端
90
+ const wallpapers = isMobile ? mobileWallpapers : desktopWallpapers;
91
+ let currentIndex = 0;
92
+ // 随机选择一张壁纸作为初始背景
93
+ function getRandomIndex() {
94
+ return Math.floor(Math.random() * wallpapers.length);
95
+ }
96
+ currentIndex = getRandomIndex();
97
+ document.body.style.backgroundImage = `url(${wallpapers[currentIndex]})`;
98
+ // 调整样式
99
+ if (isMobile) {
100
+ document.body.style.padding = "0 20px"; /* 修改整体内边距 */
101
+ document.querySelector(".container").style.maxWidth = "100%"; /* 移除最大宽度限制 */
102
+ }
103
+ </script>
104
+ </body>
105
+ </html>