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>New API</h1> | |
| <p>由HongShi使用NewAPI搭建的API网站，仅限Linux.do用户使用，支持的模型列表请查看关于页面。</p> | |
| <div class="button-container"> | |
| <button onclick="window.open('https://home.hongshi.us.kg', '_blank')"> | |
| <div class="svg-wrapper-1"> | |
| <div class="svg-wrapper"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> | |
| <path fill="none" d="M0 0h24v24H0z"></path> | |
| <path fill="currentColor" d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <span>我的主页</span> | |
| </button> | |
| <button onclick="window.open('https://api.hongshi.me/about', '_blank')"> | |
| <div class="svg-wrapper-1"> | |
| <div class="svg-wrapper"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> | |
| <path fill="none" d="M0 0h24v24H0z"></path> | |
| <path fill="currentColor" d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <span>关于页面</span> | |
| </button> | |
| <button onclick="window.open('https://thanks.hongshi-app.us.kg', '_blank')"> | |
| <div class="svg-wrapper-1"> | |
| <div class="svg-wrapper"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> | |
| <path fill="none" d="M0 0h24v24H0z"></path> | |
| <path fill="currentColor" d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <span>感谢名单</span> | |
| </button> | |
| </div> | |
| </div> | |
| <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> | |