新建文件夹

index.html

@@ -0,0 +1,574 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+:root {
+    --primary-pink: #ff9eb5; /* 软萌粉（主色） */
+    --secondary-blue: #a8d1ff; /* 清新蓝（辅助色） */
+    --accent-yellow: #fff494; /* 奶黄（点缀色） */
+    --accent-purple: #e0c3fc; /* 浅紫（扩展色） */
+    --text-dark: #5a4b60; /* 深灰紫（文本） */
+    --text-light: #8b7d94; /* 浅灰紫（次要文本） */
+    --bg-white: #ffffff; /* 白色背景 */
+    --bg-soft: #fff9fb; /* 软粉背景 */
+    --card-shadow: 0 8px 20px rgba(255, 158, 181, 0.1); /* 柔和阴影 */
+    --gradient-pink: linear-gradient(135deg, #ff9eb5, #ffc1e9);
+    --gradient-blue: linear-gradient(135deg, #a8d1ff, #c3e8ff);
+    --gradient-yellow: linear-gradient(135deg, #fff494, #fff9c4);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: var(--bg-soft) !important;
+    color: var(--text-dark) !important;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    line-height: 1.6;
+    overflow-x: hidden;
+    width: 100%;
+    min-width: 320px;
+}
+
+.page-content.home {
+    padding: 0;
+    max-width: 100%;
+    margin: 0;
+    width: 100%;
+    overflow-x: hidden;
+}
+
+/* 顶部装饰元素 */
+.top-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 120px;
+    background-image: 
+        radial-gradient(var(--primary-pink) 5px, transparent 5px),
+        radial-gradient(var(--secondary-blue) 5px, transparent 5px);
+    background-size: 40px 40px;
+    background-position: 0 0, 20px 20px;
+    opacity: 0.1;
+    z-index: 0;
+}
+
+.header-section {
+    padding: 3rem 1rem 2rem;
+    text-align: center;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.logo-wrapper {
+    display: inline-block;
+    background: var(--bg-white);
+    border-radius: 50%;
+    padding: 1.2rem;
+    box-shadow: var(--card-shadow);
+    margin-bottom: 1.5rem;
+    position: relative;
+}
+
+.logo-wrapper::after {
+    content: '✨';
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    font-size: 1.5rem;
+    animation: float 3s ease-in-out infinite;
+}
+
+.logo-wrapper::before {
+    content: '🍬';
+    position: absolute;
+    bottom: -5px;
+    left: -10px;
+    font-size: 1.2rem;
+    animation: float 2.5s ease-in-out infinite reverse;
+}
+
+@keyframes float {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+    100% { transform: translateY(0); }
+}
+
+.logo {
+    width: 130px;
+    height: 130px;
+    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.08));
+    max-width: 100%;
+}
+
+.header-title {
+    font-size: 2.8rem;
+    color: var(--primary-pink);
+    margin-bottom: 0.8rem;
+    text-shadow: 1px 1px 3px rgba(255, 158, 181, 0.2);
+    word-wrap: break-word;
+}
+
+.header-subtitle {
+    font-size: 1.1rem;
+    color: var(--text-light);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.7;
+    padding: 0 1rem;
+}
+
+.buttons-section {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    padding: 1.5rem 1rem;
+    flex-wrap: wrap;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.primary-btn {
+    background: var(--gradient-pink);
+    color: white;
+    padding: 0.9rem 2.2rem;
+    border-radius: 50px;
+    text-decoration: none;
+    font-size: 1.1rem;
+    font-weight: 600;
+    box-shadow: 0 6px 15px rgba(255, 158, 181, 0.2);
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    border: none;
+    flex-shrink: 0;
+}
+
+.primary-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(255, 158, 181, 0.3);
+}
+
+.secondary-btn {
+    background: var(--bg-white);
+    color: var(--primary-pink);
+    border: 2px solid var(--primary-pink);
+    padding: 0.9rem 2.2rem;
+    border-radius: 50px;
+    text-decoration: none;
+    font-size: 1.1rem;
+    font-weight: 600;
+    box-shadow: 0 4px 10px rgba(255, 158, 181, 0.1);
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    flex-shrink: 0;
+}
+
+.secondary-btn:hover {
+    background: rgba(255, 158, 181, 0.05);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 15px rgba(255, 158, 181, 0.15);
+}
+
+.features-section {
+    padding: 3rem 1rem 5rem;
+    background: var(--bg-white);
+    border-radius: 40px 40px 0 0;
+    margin-top: 2rem;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.features-section::before {
+    content: '';
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 10px;
+    background: var(--accent-yellow);
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(255, 244, 148, 0.3);
+}
+
+.section-heading {
+    font-size: 1.8rem;
+    text-align: center;
+    margin-bottom: 3rem;
+    color: var(--text-dark);
+    position: relative;
+    display: block;
+    width: 100%;
+    left: 0;
+    transform: none;
+}
+
+/* 功能卡片增强样式 */
+.card-icon-wrapper {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 1.2rem;
+}
+
+.icon-bg {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0.2;
+}
+
+.pink-bg {
+    background: var(--primary-pink);
+}
+
+.blue-bg {
+    background: var(--secondary-blue);
+}
+
+.yellow-bg {
+    background: var(--accent-yellow);
+}
+
+.purple-bg {
+    background: var(--accent-purple);
+}
+
+.card-icon {
+    font-size: 3rem;
+    position: relative;
+    z-index: 1;
+}
+
+.card-decoration {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    font-size: 1.2rem;
+    opacity: 0.5;
+}
+
+.feature-card {
+    position: relative;
+    overflow: hidden;
+}
+
+/* 卡片hover效果增强 */
+.feature-card:hover .card-icon-wrapper {
+    transform: scale(1.1);
+    transition: transform 0.3s ease;
+}
+
+.feature-card:hover .icon-bg {
+    opacity: 0.3;
+    transform: translate(-50%, -50%) scale(1.2);
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover .card-icon {
+    transform: rotate(10deg);
+    transition: transform 0.3s ease;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 2rem;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 0.5rem;
+    width: 100%;
+}
+
+.feature-card {
+    background: var(--bg-soft);
+    border-radius: 20px;
+    padding: 2rem 1.5rem;
+    text-align: center;
+    box-shadow: var(--card-shadow);
+    transition: all 0.3s ease;
+    border: 2px solid white;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 5px;
+}
+
+.feature-card:nth-child(1)::before {
+    background: var(--gradient-pink);
+}
+
+.feature-card:nth-child(2)::before {
+    background: var(--gradient-blue);
+}
+
+.feature-card:nth-child(3)::before {
+    background: var(--gradient-yellow);
+}
+
+.feature-card:nth-child(4)::before {
+    background: linear-gradient(135deg, var(--accent-purple), #f3e5f5);
+}
+
+.feature-card:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 12px 25px rgba(255, 158, 181, 0.15);
+}
+
+.card-icon {
+    font-size: 2.8rem;
+    margin-bottom: 1.2rem;
+    display: inline-block;
+}
+
+.feature-card:nth-child(1) .card-icon {
+    color: var(--primary-pink);
+}
+
+.feature-card:nth-child(2) .card-icon {
+    color: var(--secondary-blue);
+}
+
+.feature-card:nth-child(3) .card-icon {
+    color: #ffc107;
+}
+
+.feature-card:nth-child(4) .card-icon {
+    color: #9c27b0;
+}
+
+.card-title {
+    font-size: 1.3rem;
+    margin-bottom: 0.8rem;
+    color: var(--text-dark);
+    font-weight: 600;
+}
+
+.card-desc {
+    font-size: 0.95rem;
+    color: var(--text-light);
+    line-height: 1.6;
+}
+
+@keyframes bounce {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+    100% { transform: scale(1); }
+}
+
+/* 页脚 */
+.footer {
+    padding: 2rem 1rem;
+    text-align: center;
+    background: var(--bg-white);
+    color: var(--text-light);
+    font-size: 0.9rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .header-title {
+        font-size: 2.2rem;
+        padding: 0 0.5rem;
+    }
+    
+    .buttons-section {
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        padding: 1.5rem 1rem;
+    }
+    
+    .primary-btn, .secondary-btn {
+        width: 90%;
+        max-width: 300px;
+        justify-content: center;
+        padding: 0.8rem 1.5rem;
+    }
+    
+    .features-section {
+        padding: 2rem 1rem 3rem;
+        border-radius: 20px 20px 0 0;
+    }
+    
+    .section-heading {
+        font-size: 1.5rem;
+        padding: 0 0.5rem;
+    }
+    
+    .logo {
+        width: 110px;
+        height: 110px;
+    }
+    
+    .features-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .header-title {
+        font-size: 1.8rem;
+        line-height: 1.2;
+    }
+    
+    .header-subtitle {
+        font-size: 1rem;
+        padding: 0 1rem;
+    }
+    
+    .feature-card {
+        padding: 1.5rem 1rem;
+    }
+    
+    .card-icon {
+        font-size: 2.5rem;
+    }
+    
+    .top-decoration {
+        height: 80px;
+        background-size: 30px 30px;
+    }
+    
+    .logo-wrapper {
+        padding: 1rem;
+    }
+    
+    .logo-wrapper::after {
+        font-size: 1.2rem;
+        top: -5px;
+        right: -5px;
+    }
+    
+    .logo-wrapper::before {
+        font-size: 1rem;
+        bottom: -3px;
+        left: -5px;
+    }
+    
+    .features-section::before {
+        width: 80px;
+        height: 8px;
+    }
+}
+
+@media (max-width: 360px) {
+    .header-title {
+        font-size: 1.6rem;
+    }
+    
+    .primary-btn, .secondary-btn {
+        width: 95%;
+        padding: 0.7rem 1rem;
+        font-size: 1rem;
+    }
+    
+    .feature-card {
+        padding: 1.2rem 0.8rem;
+    }
+}
+
+/* 修复iOS滚动问题 */
+html, body {
+    -webkit-overflow-scrolling: touch;
+}
+
+/* 确保按钮在小屏幕上不会被挤压 */
+@media (max-width: 320px) {
+    .buttons-section {
+        padding: 1rem 0.5rem;
+    }
+    
+    .primary-btn, .secondary-btn {
+        padding: 0.7rem 0.8rem;
+        font-size: 0.95rem;
+    }
+}
+</style>
+
+<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}创客中心{{end}}" class="page-content home">
+    <div class="top-decoration"></div>
+
+    <!-- 头部区域 -->
+    <div class="header-section">
+        <div class="logo-wrapper">
+            <img class="logo" src="{{AssetUrlPrefix}}/img/logo.svg" alt="创客中心Logo">
+        </div>
+        <h1 class="header-title">创客中心代码仓库</h1>
+        <p class="header-subtitle">创意发芽，代码开花</p>
+    </div>
+
+    <!-- 核心按钮区 -->
+    <div class="buttons-section">
+        <a href="{{AppSubUrl}}/explore" class="primary-btn">
+            探索项目
+        </a>
+        <a href="{{AppSubUrl}}/user/login" class="secondary-btn">
+            登录/注册
+        </a>
+    </div>
+
+    <!-- 功能卡片区 -->
+<div class="features-section">
+    <h2 class="section-heading">核心功能</h2>
+    
+    <div class="features-grid">
+        <div class="feature-card">
+            <div class="card-icon-wrapper">
+                <div class="card-icon">✏️</div>
+                <div class="icon-bg pink-bg"></div>
+            </div>
+            <h3 class="card-title">创意项目</h3>
+            <p class="card-desc">轻松托管创意小项目</p>
+        </div>
+
+        <div class="feature-card">
+            <div class="card-icon-wrapper">
+                <div class="card-icon">💻</div>
+                <div class="icon-bg blue-bg"></div>
+            </div>
+            <h3 class="card-title">协作开发</h3>
+            <p class="card-desc">好友组队快乐开发</p>
+        </div>
+
+        <div class="feature-card">
+            <div class="card-icon-wrapper">
+                <div class="card-icon">💡</div>
+                <div class="icon-bg yellow-bg"></div>
+            </div>
+            <h3 class="card-title">开源分享</h3>
+            <p class="card-desc">分享创意碰撞灵感</p>
+        </div>
+    </div>
+</div>
+
+    <!-- 页脚 -->
+    <div class="footer">
+        <p>创客中心代码仓库 &copy; 2026 | 让创意自由生长</p>
+    </div>
+</div>