2024-10-09 记录

‍

newapi首页模板

图片展示

​​

完整代码:

<div style="font-size: larger;"><style>
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    height: 100%;
    background-color: #ffffff;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header_back {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    overflow: visible;
    padding: 4rem 0;
}
.gradient-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd);
    background-size: 200% 200%;
    animation: rotateGradient 15s linear infinite;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
    filter: blur(30px);
}
@keyframes rotateGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 200%;
    }
}
h1 {
    font-size: 3.5rem;
    color: #4a4a4a;
    margin-bottom: 0.5rem;
    font-weight: bold;
    position: relative;
    z-index: 1;
}
.tagline {
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 1;
}
.features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}
.feature {
    flex-basis: calc(33% - 2rem);
    min-width: 250px;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    background-color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.feature svg {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
    stroke: #4a90e2;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature h3 {
    margin-top: 0;
    color: #4a4a4a;
    font-size: 1.5rem;
}
.feature p {
    margin-bottom: 0;
    color: #666;
}
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    h1 {
        font-size: 2.5rem;
    }
    .tagline {
        font-size: 1rem;
    }
    .feature {
        flex-basis: 100%;
    }
    .gradient-circle {
        width: 150px;
        height: 150px;
    }
}
</style>
<div class="container">
<header_back>
<div class="gradient-circle"></div>
<h1>BigModel Api</h1>
<p class="tagline">人工智能模型 API 聚合产品，为您的 AI 需求提供一站式解决方案</p>
<p class="tagline">（试运营中...）</p>
</header_back>
<div class="features">
<div class="feature">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <line x1="2" y1="12" x2="22" y2="12"></line>
    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
<h3>多平台支持</h3>
<p>支持OpenAI、Anthropic Claude、Google Gemini等多个 AI 平台</p>
</div>
<div class="feature">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
<h3>安全管理</h3>
<p>提供 API 密钥的二次分发管理，支持额度控制，确保 API 使用安全可控</p>
</div>
<div class="feature">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
</svg>
<h3>一站式服务</h3>
<p>聚合多个 AI 平台，统一出口API，为您提供便捷的一站式 AI 服务体验</p>
</div>
</div>

<div style="margin:30px 10px;font-size:15px;">
<p dir="auto">使用此API不得用于非法用途。根据<a href="http://www.cac.gov.cn/2023-07/13/c_1690898327029107.htm" rel="nofollow" target="_black">《生成式人工智能服务管理暂行办法》</a>的要求，请勿对中国地区公众提供一切未经备案的生成式人工智能服务。</p>
</div>

</div></div>

‍

‍

‍

‍