Spaces:
Running
Running
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>One API</title> | |
| <link rel="stylesheet" href="style.css"> <!-- 引入样式文件 --> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| justify-content: flex-start; /* 左对齐 */ | |
| align-items: center; | |
| height: 100vh; | |
| background-size: cover; | |
| background-position: center; | |
| transition: background-image 1s ease-in-out; | |
| color: white; | |
| padding: 0 20px; /* 减少左右内边距 */ | |
| } | |
| .container { | |
| max-width: 600px; | |
| width: 100%; /* 使容器宽度适应屏幕 */ | |
| } | |
| h1 { | |
| font-size: 48px; | |
| margin-bottom: 30px; | |
| text-shadow: 2px 2px 0 black; /* 添加黑色描边 */ | |
| } | |
| p { | |
| font-size: 18px; | |
| margin-bottom: 30px; | |
| text-shadow: 1px 1px 0 black; /* 添加黑色描边 */ | |
| } | |
| .button-container { | |
| display: flex; /* 使用 flexbox */ | |
| flex-wrap: wrap; /* 允许换行 */ | |
| justify-content: flex-start; /* 左对齐 */ | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background-color: black; /* 设置按钮背景色为黑色 */ | |
| border: none; | |
| border-radius: 5px; | |
| color: white; | |
| text-decoration: none; | |
| font-size: 16px; | |
| margin-right: 10px; /* 添加按钮之间的右间隔 */ | |
| margin-bottom: 10px; /* 添加按钮底部间隔 */ | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: rgba(255, 255, 255, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>VoAPI</h1> | |
| <p>本站是由Voapi搭建的API网站，支持OpenAI部分模型以及部分开源模型，详细信息请查看关于页面。</p> | |
| <p>背景为在B站活动VTB：咩栗、呜米、雪狐桑、梦音茶糯</p> | |
| <script> | |
| // 壁纸链接 | |
| const desktopWallpapers = [ | |
| './background1.jpg', | |
| './background2.jpg', | |
| './background3.jpg', | |
| './background4.jpg', | |
| './background5.jpg', | |
| './background6.jpg', | |
| './background7.jpg', | |
| './background8.jpg', | |
| './background9.jpg', | |
| './background10.jpg' | |
| ]; | |
| const mobileWallpapers = [ | |
| './m-background1.jpg', | |
| './m-background2.jpg', | |
| './m-background3.jpg', | |
| './m-background4.jpg', | |
| './m-background5.jpg', | |
| './m-background6.jpg', | |
| './m-background7.jpg', | |
| './m-background8.jpg', | |
| './m-background9.jpg', | |
| './m-background10.jpg' | |
| ]; | |
| // 根据设备类型选择壁纸 | |
| const isMobile = window.innerWidth <= 768; // 768px 以下为移动端 | |
| const wallpapers = isMobile ? mobileWallpapers : desktopWallpapers; | |
| let currentIndex = 0; | |
| // 随机选择一张壁纸作为初始背景 | |
| function getRandomIndex() { | |
| return Math.floor(Math.random() * wallpapers.length); | |
| } | |
| currentIndex = getRandomIndex(); | |
| document.body.style.backgroundImage = `url(${wallpapers[currentIndex]})`; | |
| // 调整样式 | |
| if (isMobile) { | |
| document.body.style.padding = "0 20px"; /* 修改整体内边距 */ | |
| document.querySelector(".container").style.maxWidth = "100%"; /* 移除最大宽度限制 */ | |
| } | |
| </script> | |
| </body> | |
| </html> |