2024-10-09 记录

‍

newapi首页模板

图片展示

​​

完整代码:

<code class="language-php">&lt;div style=&quot;font-size: larger;&quot;&gt;&lt;style&gt;
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;
    }
}
&lt;/style&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;header_back&gt;
&lt;div class=&quot;gradient-circle&quot;&gt;&lt;/div&gt;
&lt;h1&gt;BigModel Api&lt;/h1&gt;
&lt;p class=&quot;tagline&quot;&gt;人工智能模型 API 聚合产品，为您的 AI 需求提供一站式解决方案&lt;/p&gt;
&lt;p class=&quot;tagline&quot;&gt;（试运营中...）&lt;/p&gt;
&lt;/header_back&gt;
&lt;div class=&quot;features&quot;&gt;
&lt;div class=&quot;feature&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
    &lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot;&gt;&lt;/circle&gt;
    &lt;line x1=&quot;2&quot; y1=&quot;12&quot; x2=&quot;22&quot; y2=&quot;12&quot;&gt;&lt;/line&gt;
    &lt;path d=&quot;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&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;h3&gt;多平台支持&lt;/h3&gt;
&lt;p&gt;支持OpenAI、Anthropic Claude、Google Gemini等多个 AI 平台&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;feature&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
    &lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;18&quot; height=&quot;11&quot; rx=&quot;2&quot; ry=&quot;2&quot;&gt;&lt;/rect&gt;
    &lt;path d=&quot;M7 11V7a5 5 0 0 1 10 0v4&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;h3&gt;安全管理&lt;/h3&gt;
&lt;p&gt;提供 API 密钥的二次分发管理，支持额度控制，确保 API 使用安全可控&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;feature&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
    &lt;path d=&quot;M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;h3&gt;一站式服务&lt;/h3&gt;
&lt;p&gt;聚合多个 AI 平台，统一出口API，为您提供便捷的一站式 AI 服务体验&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

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

&lt;/div&gt;&lt;/div&gt;
</code>

‍

‍

‍

‍