1<!DOCTYPE html><html lang="zh-CN"><head> 2 <meta charset="UTF-8"/> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 4 <title>å ³äº - ä»å¤©åä»ä¹</title> 5
5<script src="https://cdn.tailwindcss.com"></script>
5 6
6<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
6 7
7<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
7 8 <link href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" rel="stylesheet"/> 9 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"/> 10 <style> 11 :root { 12 --primary-color: #FF6B35; 13 --secondary-color: #F7931E; 14 --bg-color: #FFF8F3; 15 --dark-color: #2C3E50; 16 --success-color: #27AE60; 17 --warning-color: #E67E22; 18 } 19 20 body { 21 font-family: 'Noto Sans SC', sans-serif; 22 background: linear-gradient(135deg, #FFF8F3 0%, #FFF0E6 100%); 23 min-height: 100vh; 24 } 25 26 .feature-card { 27 background: rgba(255, 255, 255, 0.95); 28 backdrop-filter: blur(10px); 29 border: 1px solid rgba(232, 232, 232, 0.5); 30 border-radius: 16px; 31 box-shadow: 0 4px 20px rgba(255, 107, 53, 0.1); 32 transition: all 0.3s ease; 33 } 34 35 .feature-card:hover { 36 transform: translateY(-4px); 37 box-shadow: 0 8px 30px rgba(255, 107, 53, 0.15); 38 } 39 40 .nav-bar { 41 background: rgba(255, 255, 255, 0.95); 42 backdrop-filter: blur(10px); 43 border-top: 1px solid rgba(232, 232, 232, 0.5); 44 } 45 46 .nav-item.active { 47 color: var(--primary-color); 48 } 49 50 .hero-section { 51 background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); 52 border-radius: 20px; 53 color: white; 54 text-align: center; 55 padding: 40px 20px; 56 margin-bottom: 30px; 57 position: relative; 58 overflow: hidden; 59 } 60 61 .hero-section::before { 62 content: ''; 63 position: absolute; 64 top: -50%; 65 left: -50%; 66 width: 200%; 67 height: 200%; 68 background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat; 69 animation: float 20s infinite linear; 70 } 71 72 @keyframes float { 73 0% { transform: translate(-50%, -50%) rotate(0deg); } 74 100% { transform: translate(-50%, -50%) rotate(360deg); } 75 } 76 77 .faq-item { 78 background: rgba(255, 255, 255, 0.8); 79 border-radius: 12px; 80 border: 1px solid rgba(232, 232, 232, 0.6); 81 margin-bottom: 12px; 82 overflow: hidden; 83 transition: all 0.3s ease; 84 } 85 86 .faq-item.active { 87 background: rgba(255, 255, 255, 0.95); 88 border-color: var(--primary-color); 89 } 90 91 .faq-question { 92 padding: 16px 20px; 93 cursor: pointer; 94 display: flex; 95 justify-content: between; 96 align-items: center; 97 font-weight: 500; 98 color: var(--dark-color); 99 } 100 101 .faq-answer { 102 padding: 0 20px 16px; 103 color: #6B7280; 104 line-height: 1.6; 105 display: none; 106 } 107 108 .faq-item.active .faq-answer { 109 display: block; 110 } 111 112 .faq-icon { 113 transition: transform 0.3s ease; 114 } 115 116 .faq-item.active .faq-icon { 117 transform: rotate(180deg); 118 } 119 120 .demo-carousel { 121 border-radius: 16px; 122 overflow: hidden; 123 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 124 } 125 126 .demo-slide { 127 background: white; 128 padding: 40px 20px; 129 text-align: center; 130 height: 300px; 131 display: flex; 132 flex-direction: column; 133 justify-content: center; 134 align-items: center; 135 } 136 137 .demo-icon { 138 font-size: 4rem; 139 margin-bottom: 20px; 140 } 141
142 .version-info { 143 background: rgba(255, 255, 255, 0.6); 144 border-radius: 12px; 145 padding: 20px; 146 text-align: center; 147 margin-top: 30px; 148 } 149 150 .feedback-btn { 151 background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); 152 color: white; 153 border: none; 154 border-radius: 12px; 155 padding: 12px 24px; 156 font-weight: 500; 157 transition: all 0.3s ease; 158 box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3); 159 } 160 161 .feedback-btn:hover { 162 transform: translateY(-2px); 163 box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4); 164 } 165 </style>
166<script src="https://www.kimi.com/sdk-seed.js" defer="" data-kimi-disable-watermark="false" data-kimi-analytics="false"></script>
166</head> 167<body> 168 <div class="min-h-screen pb-20"> 169 <!-- Heroåºå --> 170 <div class="px-4 pt-6"> 171 <div class="hero-section relative"> 172 <div class="relative z-10"> 173 <h1 class="text-3xl font-bold mb-3" style="font-family: 'Noto Serif SC', serif;">ä»å¤©åä»ä¹</h1> 174 <p class="text-lg opacity-90 mb-2">AI æºè½ç¾é£æ¨èå©æ</p> 175 <p class="text-sm opacity-80">让AI帮æ¨è§£å³"ä»å¤©åä»ä¹"çé¾é¢</p> 176 </div> 177 </div> 178 </div> 179 180 <!-- åè½ä»ç» --> 181 <div class="px-4 mb-8"> 182 <h2 class="text-xl font-bold text-gray-800 mb-4" style="font-family: 'Noto Serif SC', serif;">æ ¸å¿åè½</h2> 183 184 <div class="grid gap-4 mb-8"> 185 <div class="feature-card p-6"> 186 <div class="flex items-start gap-4"> 187 <div class="text-3xl">ð²</div> 188 <div> 189 <h3 class="text-lg font-bold text-gray-800 mb-2">AIæºè½æ¨è</h3> 190 <p class="text-sm text-gray-600 leading-relaxed"> 191 ç¹å»éª°åæé®ï¼AIä¼æ ¹æ®å½åæ¶é´ãæ¨çåå²å好çä¸ä¸æä¿¡æ¯ï¼ä¸ºæ¨æ¨èæåéçç¾é£éæ©ã 192 </p> 193 </div> 194 </div> 195 </div> 196 197 <div class="feature-card p-6"> 198 <div class="flex items-start gap-4"> 199 <div class="text-3xl">ð·</div> 200 <div> 201 <h3 class="text-lg font-bold text-gray-800 mb-2">èåä¸ä¼ </h3> 202 <p class="text-sm text-gray-600 leading-relaxed"> 203 æç §æä¸ä¼ èåæªå¾ï¼AIä¼èªå¨è¯å«èåä¿¡æ¯ï¼å¸®å©æ¨å»ºç«ä¸ªäººèååºã 204 </p> 205 </div> 206 </div> 207 </div> 208 209 <div class="feature-card p-6"> 210 <div class="flex items-start gap-4"> 211 <div class="text-3xl">ð</div> 212 <div> 213 <h3 class="text-lg font-bold text-gray-800 mb-2">å好记å¿</h3> 214 <p class="text-sm text-gray-600 leading-relaxed"> 215 ç³»ç»ä¼è®°ä½æ¨çéæ©å好ï¼ä¸æä¼åæ¨èç®æ³ï¼è®©æ¨èè¶æ¥è¶ç¬¦åæ¨çå£å³ã 216 </p> 217 </div> 218 </div> 219 </div> 220 </div> 221 </div> 222 223 <!-- 使ç¨æ¼ç¤º --> 224 <div class="px-4 mb-8"> 225 <h2 class="text-xl font-bold text-gray-800 mb-4" style="font-family: 'Noto Serif SC', serif;">使ç¨æ¼ç¤º</h2> 226 227 <div class="demo-carousel"> 228 <div class="splide" id="demoCarousel"> 229 <div class="splide__track"> 230 <ul class="splide__list"> 231 <li class="splide__slide"> 232 <div class="demo-slide"> 233 <div class="demo-icon">ð²</div> 234 <h3 class="text-lg font-bold mb-2">ç¹å»éª°å</h3> 235 <p class="text-sm text-gray-600">ç¹å»ä¸å¿ç骰åæé®å¼å§AIæ¨è</p> 236 </div> 237 </li> 238 <li class="splide__slide"> 239 <div class="demo-slide"> 240 <div class="demo-icon">ð¤</div> 241 <h3 class="text-lg font-bold mb-2">AIæè</h3> 242 <p class="text-sm text-gray-600">è§çAIåææ¨çå好åå½åæ å¢</p> 243 </div> 244 </li> 245 <li class="splide__slide"> 246 <div class="demo-slide"> 247 <div class="demo-icon">ð½ï¸</div> 248 <h3 class="text-lg font-bold mb-2">è·å¾æ¨è</h3> 249 <p class="text-sm text-gray-600">æ¥çAIæ¨èçèå详æ åçç±</p> 250 </div> 251 </li> 252 <li class="splide__slide"> 253 <div class="demo-slide"> 254 <div class="demo-icon">â </div> 255 <h3 class="text-lg font-bold mb-2">ååºéæ©</h3> 256 <p class="text-sm text-gray-600">ç¹å»"å°±è¿ä¸ª"æ"ä¸ä¸ä¸ª"</p> 257 </div> 258 </li> 259 </ul> 260 </div> 261 </div> 262 </div> 263 </div> 264 265 <!-- 常è§é®é¢ --> 266 <div class="px-4 mb-8">
267 <h2 class="text-xl font-bold text-gray-800 mb-4" style="font-family: 'Noto Serif SC', serif;">常è§é®é¢</h2> 268 269 <div class="faq-list"> 270 <div class="faq-item"> 271 <div class="faq-question" onclick="toggleFAQ(this)"> 272 <span>AIæ¨èæ¯å¦ä½å·¥ä½çï¼</span> 273 <svg class="faq-icon w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 274 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 275 </svg> 276 </div> 277 <div class="faq-answer"> 278 AIä¼ç»¼åèèå¤ä¸ªå ç´ ï¼å½åæ¶é´ï¼æ©é¤ãåé¤ãæé¤ï¼ãæ¨çåå²éæ©å好ãèåç¹è²æ ç¾çï¼ä»æ°æ®åºä¸éæ©æéåçèåæ¨èç»æ¨ã 279 </div> 280 </div> 281 282 <div class="faq-item"> 283 <div class="faq-question" onclick="toggleFAQ(this)"> 284 <span>å¦ä½æé«æ¨èçåç¡®æ§ï¼</span> 285 <svg class="faq-icon w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 286 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 287 </svg> 288 </div> 289 <div class="faq-answer"> 290 å¤ä½¿ç¨åºç¨ï¼è®©AIäºè§£æ¨çå好éæ©ãæ¯æ¬¡æ¨èåç¹å»"å°±è¿ä¸ª"æ"ä¸ä¸ä¸ª"ï¼ç³»ç»ä¼å¦ä¹ æ¨çå好ï¼æ¨èä¼è¶æ¥è¶ç²¾åã 291 </div> 292 </div> 293 294 <div class="faq-item"> 295 <div class="faq-question" onclick="toggleFAQ(this)"> 296 <span>ä¸ä¼ çèåä¿¡æ¯å®å ¨åï¼</span> 297 <svg class="faq-icon w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 298 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 299 </svg> 300 </div> 301 <div class="faq-answer"> 302 æææ°æ®é½åå¨å¨æ¨çæ¬å°è®¾å¤ä¸ï¼ä¸ä¼ä¸ä¼ å°æå¡å¨ãæ¨ç个人信æ¯åèåæ°æ®é½æ¯å®å ¨çã 303 </div> 304 </div> 305 306 <div class="faq-item"> 307 <div class="faq-question" onclick="toggleFAQ(this)"> 308 <span>å¦ä½å é¤åå²è®°å½ï¼</span> 309 <svg class="faq-icon w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 310 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 311 </svg> 312 </div> 313 <div class="faq-answer"> 314 å¨åå²è®°å½é¡µé¢ï¼ç¹å»å³ä¸è§çå é¤å¾æ å³å¯æ¸ 空ææåå²è®°å½ã请注æï¼æ¤æä½æ æ³æ¤éã 315 </div> 316 </div> 317 318 <div class="faq-item"> 319 <div class="faq-question" onclick="toggleFAQ(this)"> 320 <span>æ¯æåªäºç±»åçèåï¼</span> 321 <svg class="faq-icon w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 322 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 323 </svg> 324 </div> 325 <div class="faq-answer"> 326 ç®åæ¯æä¸å¼ã西å¼ãæ¥å¼ãé©å¼ãæ³°å¼çå¤ç§èç³»ï¼æ¶µç主é£ãå°åãçç¹çåç±»ç¾é£ãæ们ä¼æç»æ©å èåæ°æ®åºã 327 </div> 328 </div> 329 </div> 330 </div> 331 332 <!-- çæ¬ä¿¡æ¯ååé¦ --> 333 <div class="px-4 mb-8"> 334 <div class="version-info">
335 <h3 class="text-lg font-bold text-gray-800 mb-2">çæ¬ä¿¡æ¯</h3> 336 <p class="text-sm text-gray-600 mb-4">å½åçæ¬: v1.0.0</p> 337 <button class="feedback-btn" onclick="showFeedback()"> 338 ð¬ æè§åé¦ 339 </button> 340 </div> 341 </div> 342 </div> 343 344 <!-- åºé¨å¯¼èª --> 345 <nav class="nav-bar fixed bottom-0 left-0 right-0 px-4 py-3"> 346 <div class="flex justify-around"> 347 <a class="nav-item flex flex-col items-center gap-1 text-gray-500" href="index.html"> 348 <span class="text-xl">ð </span> 349 <span class="text-xs">é¦é¡µ</span> 350 </a> 351 <a class="nav-item flex flex-col items-center gap-1 text-gray-500" href="upload.html"> 352 <span class="text-xl">ð</span> 353 <span class="text-xs">èå</span> 354 </a> 355 <a class="nav-item flex flex-col items-center gap-1 text-gray-500" href="history.html"> 356 <span class="text-xl">ð</span> 357 <span class="text-xs">åå²</span> 358 </a> 359 <a class="nav-item active flex flex-col items-center gap-1" href="about.html"> 360 <span class="text-xl">â¹ï¸</span> 361 <span class="text-xs">å ³äº</span> 362 </a> 363 </div> 364 </nav> 365 366
366<script> 367 // FAQåæ¢åè½ 368 function toggleFAQ(element) { 369 const faqItem = element.closest('.faq-item'); 370 const isActive = faqItem.classList.contains('active'); 371 372 // å ³éææFAQ 373 document.querySelectorAll('.faq-item').forEach(item => { 374 item.classList.remove('active'); 375 }); 376 377 // å¦æå½åä¸æ¯æ¿æ´»ç¶æï¼åæ¿æ´» 378 if (!isActive) { 379 faqItem.classList.add('active'); 380 } 381 } 382 383 // æ¾ç¤ºåé¦è¡¨å 384 function showFeedback() { 385 const feedback = prompt('请è¾å ¥æ¨çæè§æ建议ï¼'); 386 if (feedback && feedback.trim()) { 387 showToast('æè°¢æ¨çåé¦ï¼æ们ä¼è®¤çèèæ¨ç建议ã', 'success'); 388 } 389 } 390 391 // æ¾ç¤ºæ示æ¶æ¯ 392 function showToast(message, type = 'info') { 393 const toast = document.createElement('div'); 394 toast.className = `fixed top-4 left-1/2 transform -translate-x-1/2 px-4 py-2 rounded-lg text-white text-sm z-50 ${ 395 type === 'success' ? 'bg-green-500' : 396 type === 'error' ? 'bg-red-500' : 'bg-blue-500' 397 }`; 398 toast.textContent = message; 399 400 document.body.appendChild(toast); 401 402 anime({ 403 targets: toast, 404 opacity: [0, 1], 405 translateY: [-20, 0], 406 duration: 300, 407 easing: 'easeOutQuart' 408 }); 409 410 setTimeout(() => { 411 anime({ 412 targets: toast, 413 opacity: [1, 0], 414 translateY: [0, -20], 415 duration: 300, 416 easing: 'easeInQuart', 417 complete: () => { 418 if (toast.parentNode) { 419 toast.parentNode.removeChild(toast); 420 } 421 } 422 }); 423 }, 3000); 424 } 425 426 // 页é¢å è½½å®æååå§å 427 document.addEventListener('DOMContentLoaded', () => { 428 // åå§åè½®æ 429 const splide = new Splide('#demoCarousel', { 430 type: 'loop', 431 autoplay: true, 432 interval: 3000, 433 arrows: false, 434 pagination: true, 435 gap: '1rem' 436 }); 437 splide.mount(); 438 439 // 页é¢å ¥åºå¨ç» 440 anime({ 441 targets: '.feature-card', 442 opacity: [0, 1], 443 translateY: [30, 0], 444 duration: 800, 445 delay: anime.stagger(200), 446 easing: 'easeOutQuart' 447 }); 448 449 anime({ 450 targets: '.faq-item', 451 opacity: [0, 1], 452 translateX: [-20, 0], 453 duration: 600, 454 delay: anime.stagger(100, {start: 500}), 455 easing: 'easeOutQuart' 456 }); 457 }); 458 </script>
458 459 460</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.