Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>不会玩电路的红石 - 公益AI平台</title> | |
| <link rel="icon" href="https://i.imgur.com/zFvVXeB.png"> | |
| <style> | |
| :root { | |
| --neon-green: #00ff88; | |
| --neon-purple: #bc13fe; | |
| --cyber-blue: #0066ff; | |
| --dark-bg: #0a0a12; | |
| --grid-color: rgba(0, 255, 136, 0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', system-ui; | |
| } | |
| body { | |
| background: var(--dark-bg); | |
| color: white; | |
| position: relative; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| } | |
| /* 赛博背景 */ | |
| .cyber-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -2; | |
| background: | |
| linear-gradient(45deg, var(--cyber-blue) 0%, transparent 50%), | |
| linear-gradient(-45deg, var(--neon-purple) 0%, transparent 50%), | |
| var(--dark-bg); | |
| animation: bgMove 20s linear infinite; | |
| background-size: 200% 200%; | |
| } | |
| .cyber-grid { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(var(--grid-color) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| z-index: -1; | |
| opacity: 0.3; | |
| } | |
| /* 头部区域 */ | |
| .hero { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| padding: 20px; | |
| position: relative; | |
| } | |
| .logo { | |
| width: 150px; | |
| height: 150px; | |
| margin-bottom: 30px; | |
| animation: float 3s ease-in-out infinite; | |
| border: 2px solid var(--neon-green); | |
| border-radius: 50%; | |
| box-shadow: 0 0 30px var(--neon-green); | |
| } | |
| .nav-buttons { | |
| margin: 40px 0; | |
| display: flex; | |
| gap: 25px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .btn { | |
| padding: 12px 35px; | |
| border: 2px solid var(--neon-green); | |
| border-radius: 30px; | |
| color: var(--neon-green); | |
| text-decoration: none; | |
| transition: all 0.3s; | |
| background: rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(5px); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn:hover { | |
| background: var(--neon-green); | |
| color: var(--dark-bg); | |
| box-shadow: 0 0 30px var(--neon-green); | |
| } | |
| /* 内容区块 */ | |
| .section { | |
| padding: 80px 20px; | |
| position: relative; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| font-size: 2.2em; | |
| text-shadow: 0 0 15px var(--neon-green); | |
| } | |
| /* 高亮框 */ | |
| .highlight-box { | |
| background: rgba(0, 255, 136, 0.1); | |
| border: 1px solid var(--neon-green); | |
| padding: 25px; | |
| border-radius: 15px; | |
| margin: 30px auto; | |
| max-width: 800px; | |
| } | |
| /* 卡片布局 */ | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 25px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .card { | |
| background: rgba(10, 10, 18, 0.7); | |
| border: 1px solid var(--neon-green); | |
| border-radius: 15px; | |
| padding: 25px; | |
| transition: all 0.3s; | |
| backdrop-filter: blur(10px); | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 0 30px var(--neon-green); | |
| } | |
| /* 模型标签 */ | |
| .model-tag { | |
| background: rgba(0, 255, 136, 0.15); | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| border: 1px solid var(--neon-green); | |
| } | |
| /* 注册方式 */ | |
| .register-method { | |
| padding: 12px; | |
| margin: 10px 0; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| /* 动画 */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes bgMove { | |
| 0% { background-position: 0% 0%; } | |
| 50% { background-position: 100% 100%; } | |
| 100% { background-position: 0% 0%; } | |
| } | |
| @media (max-width: 768px) { | |
| .section-title { | |
| font-size: 1.8em; | |
| } | |
| .btn { | |
| padding: 10px 25px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="cyber-bg"></div> | |
| <div class="cyber-grid"></div> | |
| <section class="hero"> | |
| <img src="https://error418-blog.hf.space/upload/%E5%A4%B4%E5%83%8F2.jpg" | |
| alt="avatar" | |
| class="logo"> | |
| <h1 class="section-title">不会玩电路的红石</h1> | |
| <p class="daily-quote" style="font-size:1.1em;margin:20px 0;">「 让AI技术普惠每个人 」</p> | |
| <div class="nav-buttons"> | |
| <a href="https://space.bilibili.com/522549816" class="btn" target="_blank"> | |
| <img src="https://www.bilibili.com/favicon.ico" width="24" alt="B站"> | |
| B站主页 | |
| </a> | |
| <a href="https://error418-blog.hf.space" class="btn" target="_blank"> | |
| 🌐 个人博客 | |
| </a> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h2 class="section-title">🚀 公益AI平台</h2> | |
| <div class="highlight-box"> | |
| <h3 style="color: var(--neon-green); margin-bottom: 15px;">🌟 平台特色</h3> | |
| <ul style="line-height: 2; list-style: none;"> | |
| <li>► 模型价格 ≤ 市场价30%</li> | |
| <li>► 新用户注册即赠 $1 额度</li> | |
| <li>► 永久免费翻译服务 (0倍率)</li> | |
| <li>► 多平台账号互通</li> | |
| <li>► 免费的翻译服务</li> | |
| </ul> | |
| </div> | |
| <div class="grid" style="max-width: 1000px;"> | |
| <div class="card"> | |
| <h3 style="color: var(--neon-green);">免费翻译模型</h3> | |
| <div style="margin-top:20px; display: flex; flex-wrap: wrap; gap: 12px;"> | |
| <span class="model-tag">DeepSeek-v3</span> | |
| <span class="model-tag">Doubao</span> | |
| <span class="model-tag">Qwen-72B</span> | |
| <span class="model-tag">GLM-3 Turbo</span> | |
| <span class="model-tag">Moonshot v1</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3 style="color: var(--neon-green);">📝 注册登录</h3> | |
| <div style="margin-top: 20px;"> | |
| <div class="register-method"> | |
| <img src="https://mail.qq.com/zh_CN/htmledition/images/favicon/qqmail_favicon_96h.png" width="24" alt="QQ"> | |
| QQ邮箱 | |
| </div> | |
| <div class="register-method"> | |
| <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.pOnicxSRbC8M0SdWCKDlJAHaHa?rs=1&pid=ImgDetMain" width="24" alt="GitHub"> | |
| GitHub | |
| </div> | |
| <div class="register-method"> | |
| <img src="https://www.outlook.com/owa/favicon.ico" width="24" alt="Outlook"> | |
| Outlook | |
| </div> | |
| <div class="register-method"> | |
| <img src="https://cdn.ldstatic.com/original/3X/9/d/9dd49731091ce8656e94433a26a3ef36062b3994.png" width="24" alt="Linux.do"> | |
| Linux.do | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section" style="background: rgba(0, 255, 136, 0.03);"> | |
| <div class="highlight-box" style="text-align: center;"> | |
| <h2 style="color: var(--neon-green);">🎁 加入官方QQ群</h2> | |
| <p style="margin: 20px 0; font-size: 1.1em;"> | |
| 群号：<span style="color: var(--neon-green);">971947103</span><br> | |
| 进群可享：不定时免费额度 | 第一手消息 | 优先技术支持 | |
| </p> | |
| <img src="qr.png" | |
| alt="QQ群二维码" | |
| style="width: 220px; margin: 0 auto; border-radius: 12px; border: 2px solid var(--neon-green);"> | |
| </div> | |
| </section> | |
| <script> | |
| // 动态文字效果 | |
| const quotes = [ | |
| "开放 · 共享 · 创新", | |
| "让每个开发者都用得起AI", | |
| "技术不应该成为门槛", | |
| "始于热爱，成于坚持" | |
| ]; | |
| function updateDailyQuote() { | |
| const element = document.querySelector('.daily-quote'); | |
| const randomIndex = Math.floor(Math.random() * quotes.length); | |
| element.textContent = `「 ${quotes[randomIndex]} 」`; | |
| } | |
| // 初始化 | |
| window.addEventListener('load', () => { | |
| updateDailyQuote(); | |
| setInterval(updateDailyQuote, 5000); | |
| // 卡片入场动画 | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.card, .highlight-box').forEach(el => { | |
| el.style.opacity = 0; | |
| el.style.transform = 'translateY(30px)'; | |
| el.style.transition = 'all 0.6s ease-out'; | |
| observer.observe(el); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |