index.html 49 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
  7. <title>Aisoco - Ai&Social&Commerce</title>
  8. <!-- Tailwind CSS -->
  9. <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
  10. <!-- Font Awesome -->
  11. <link
  12. href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
  13. rel="stylesheet"
  14. />
  15. <!-- Google Fonts - Inter (类似苹果官网字体风格) -->
  16. <link
  17. href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
  18. rel="stylesheet"
  19. />
  20. <!-- Tailwind Configuration -->
  21. <script>
  22. tailwind.config = {
  23. theme: {
  24. extend: {
  25. colors: {
  26. primary: '#0066CC',
  27. secondary: '#333333',
  28. light: '#F5F5F7',
  29. dark: '#1D1D1F',
  30. },
  31. fontFamily: {
  32. sans: ['Inter', 'sans-serif'],
  33. },
  34. },
  35. },
  36. };
  37. </script>
  38. <style type="text/tailwindcss">
  39. @layer utilities {
  40. .content-auto {
  41. content-visibility: auto;
  42. }
  43. .text-balance {
  44. text-wrap: balance;
  45. }
  46. .transition-smooth {
  47. transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  48. }
  49. .timeline-dot::before {
  50. content: '';
  51. position: absolute;
  52. width: 16px;
  53. height: 16px;
  54. border-radius: 50%;
  55. background-color: #0066cc;
  56. left: -40px;
  57. top: 6px;
  58. }
  59. .timeline-line::before {
  60. content: '';
  61. position: absolute;
  62. width: 1px;
  63. height: 100%;
  64. background-color: #e2e2e2;
  65. left: -32px;
  66. top: 22px;
  67. }
  68. }
  69. </style>
  70. </head>
  71. <body class="font-sans bg-white text-dark antialiased">
  72. <!-- 语言切换器 -->
  73. <div class="py-2">
  74. <div class="container mx-auto px-4 flex justify-end">
  75. <button
  76. id="lang-en"
  77. class="language-btn text-sm font-medium text-primary mr-4"
  78. >
  79. <!-- English -->
  80. </button>
  81. <button
  82. id="lang-zh"
  83. class="language-btn text-sm font-medium text-gray-500"
  84. >
  85. <!-- 中文 -->
  86. </button>
  87. </div>
  88. </div>
  89. <!-- 导航栏 -->
  90. <header
  91. id="navbar"
  92. class="fixed w-full top-6 z-50 transition-all duration-300"
  93. >
  94. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  95. <nav class="flex justify-between items-center">
  96. <!-- Logo -->
  97. <a href="#home" class="text-2xl font-semibold tracking-tight"></a>
  98. <img
  99. src="./img/aisoco_logo.png"
  100. style="object-fit: cover; width: 160px"
  101. />
  102. </a>
  103. <!-- 桌面导航 -->
  104. <div class="hidden md:flex items-center space-x-8">
  105. <a
  106. href="#about"
  107. class="nav-link text-lg font-medium hover:text-primary transition-smooth"
  108. >About</a
  109. >
  110. <a
  111. href="#journey"
  112. class="nav-link text-lg font-medium hover:text-primary transition-smooth"
  113. >Journey</a
  114. >
  115. <a
  116. href="#vision"
  117. class="nav-link text-lg font-medium hover:text-primary transition-smooth"
  118. >Vision</a
  119. >
  120. <a
  121. href="#product"
  122. class="nav-link text-lg font-medium hover:text-primary transition-smooth"
  123. >Product</a
  124. >
  125. <a
  126. href="#team"
  127. class="nav-link text-lg font-medium hover:text-primary transition-smooth"
  128. >Team</a
  129. >
  130. <a
  131. href="#press"
  132. class="nav-link text-lg font-medium hover:text-primary transition-smooth"
  133. >Press</a
  134. >
  135. <a
  136. href="#contact"
  137. class="nav-link text-lg font-medium hover:text-primary transition-smooth"
  138. >Contact</a
  139. >
  140. </div>
  141. <!-- 移动端菜单按钮 -->
  142. <button
  143. id="menu-toggle"
  144. class="md:hidden text-dark focus:outline-none"
  145. >
  146. <i class="fa fa-bars text-xl"></i>
  147. </button>
  148. </nav>
  149. </div>
  150. <!-- 移动端导航菜单 -->
  151. <div id="mobile-menu" class="md:hidden hidden bg-white border-t mt-4">
  152. <div class="container mx-auto px-4 py-3 space-y-3">
  153. <a
  154. href="#about"
  155. class="block py-2 text-sm font-medium hover:text-primary transition-smooth"
  156. >about</a
  157. >
  158. <a
  159. href="#journey"
  160. class="block py-2 text-sm font-medium hover:text-primary transition-smooth"
  161. >journey</a
  162. >
  163. <a
  164. href="#vision"
  165. class="block py-2 text-sm font-medium hover:text-primary transition-smooth"
  166. >vision</a
  167. >
  168. <a
  169. href="#product"
  170. class="block py-2 text-sm font-medium hover:text-primary transition-smooth"
  171. >product</a
  172. >
  173. <a
  174. href="#team"
  175. class="block py-2 text-sm font-medium hover:text-primary transition-smooth"
  176. >team</a
  177. >
  178. <a
  179. href="#press"
  180. class="block py-2 text-sm font-medium hover:text-primary transition-smooth"
  181. >press</a
  182. >
  183. <a
  184. href="#contact"
  185. class="block py-2 text-sm font-medium hover:text-primary transition-smooth"
  186. >contact</a
  187. >
  188. </div>
  189. </div>
  190. </header>
  191. <main>
  192. <!-- 英雄区域 -->
  193. <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32">
  194. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  195. <div class="text-center max-w-4xl mx-auto">
  196. <h1
  197. class="text-[clamp(2.5rem,6vw,4rem)] font-semibold leading-tight mb-6 tracking-tight"
  198. >
  199. <span class="lang-en">Redefining Commerce</span>
  200. <span class="lang-zh hidden">重新定义电商体验</span>
  201. </h1>
  202. <p
  203. class="text-[clamp(1.1rem,3vw,1.5rem)] text-gray-600 mb-10 max-w-3xl mx-auto leading-relaxed text-balance"
  204. >
  205. <span class="lang-en"
  206. >The next generation platform merging e-commerce, AI, and social
  207. connectivity.</span
  208. >
  209. <span class="lang-zh hidden"
  210. >集电商、人工智能与社交连接于一体的下一代平台。</span
  211. >
  212. </p>
  213. <div class="flex flex-col sm:flex-row justify-center gap-4">
  214. <a
  215. href="#product"
  216. class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-md font-medium transition-smooth"
  217. >
  218. <span class="lang-en">Explore</span>
  219. <span class="lang-zh hidden">探索平台</span>
  220. </a>
  221. <a
  222. href="#contact"
  223. class="border border-gray-300 hover:border-primary hover:text-primary px-8 py-3 rounded-md font-medium transition-smooth"
  224. >
  225. <span class="lang-en">Contact Us</span>
  226. <span class="lang-zh hidden">联系我们</span>
  227. </a>
  228. </div>
  229. </div>
  230. <!-- 产品图片 -->
  231. <div class="mt-16 max-w-5xl mx-auto">
  232. <div class="rounded-2xl overflow-hidden shadow-2xl">
  233. <img
  234. src="./img/banner1.png"
  235. alt="Aisoco Platform"
  236. class="w-full h-auto"
  237. />
  238. </div>
  239. </div>
  240. </div>
  241. </section>
  242. <!-- 关于我们 -->
  243. <section id="about" class="py-20 bg-light">
  244. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  245. <div class="max-w-3xl mx-auto">
  246. <h2
  247. class="text-[clamp(1.8rem,4vw,2.5rem)] font-semibold mb-8 text-center"
  248. >
  249. <span class="lang-en">About Aisoco</span>
  250. <span class="lang-zh hidden">关于Aisoco</span>
  251. </h2>
  252. <p class="text-lg text-gray-600 mb-8 leading-relaxed">
  253. <span class="lang-en"
  254. >Founded in Silicon Valley, Aisoco is revolutionizing the way
  255. people discover, share, and purchase products online through our
  256. innovative platform that seamlessly integrates e-commerce,
  257. artificial intelligence, and social features.</span
  258. >
  259. <span class="lang-zh hidden"
  260. >Aisoco诞生于硅谷,通过我们创新的平台彻底改变人们在线发现、分享和购买产品的方式,该平台无缝整合了电商、人工智能和社交功能。</span
  261. >
  262. </p>
  263. <p class="text-lg text-gray-600 mb-8 leading-relaxed">
  264. <span class="lang-en"
  265. >Our founding team brings decades of combined experience from
  266. leading tech companies including Apple, Amazon, and Google, with
  267. a shared vision to create a more intuitive and connected
  268. shopping experience.</span
  269. >
  270. <span class="lang-zh hidden"
  271. >我们的创始团队汇集了来自苹果、亚马逊和谷歌等领先科技公司的数十年经验,共同愿景是创造更直观、更互联的购物体验。</span
  272. >
  273. </p>
  274. <!-- 融资信息 -->
  275. <div class="bg-white p-6 rounded-xl border border-gray-100">
  276. <h3 class="text-xl font-semibold mb-4">
  277. <span class="lang-en">Funding</span>
  278. <span class="lang-zh hidden">融资情况</span>
  279. </h3>
  280. <p class="text-gray-600">
  281. <span class="lang-en"
  282. >Aisoco has secured $10 million in Series A funding from
  283. leading venture capital firms.</span
  284. >
  285. <span class="lang-zh hidden"
  286. >Aisoco已从领先的风险投资公司获得1000万美元的A轮融资。</span
  287. >
  288. </p>
  289. </div>
  290. </div>
  291. </div>
  292. </section>
  293. <!-- 发展历程 -->
  294. <section id="journey" class="py-20">
  295. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  296. <h2
  297. class="text-[clamp(1.8rem,4vw,2.5rem)] font-semibold mb-16 text-center"
  298. >
  299. <span class="lang-en">Our Journey</span>
  300. <span class="lang-zh hidden">发展历程</span>
  301. </h2>
  302. <div class="max-w-4xl mx-auto relative pl-16 timeline-line">
  303. <!-- 时间点1 -->
  304. <div class="mb-16 relative timeline-dot">
  305. <h3 class="text-xl font-semibold mb-2">
  306. <span class="lang-en">Founding</span>
  307. <span class="lang-zh hidden">公司成立</span>
  308. <span class="text-gray-500 ml-3">Sep 2024</span>
  309. </h3>
  310. <p class="text-gray-600 max-w-2xl">
  311. <span class="lang-en"
  312. >Aisoco is founded in Silicon Valley by former Apple, Amazon,
  313. and Google executives with a vision to transform
  314. e-commerce.</span
  315. >
  316. <span class="lang-zh hidden"
  317. >Aisoco由前苹果、亚马逊和谷歌高管在硅谷创立,愿景是改变电商行业。</span
  318. >
  319. </p>
  320. </div>
  321. <!-- 时间点2 -->
  322. <div class="mb-16 relative timeline-dot">
  323. <h3 class="text-xl font-semibold mb-2">
  324. <span class="lang-en">Seed Funding</span>
  325. <span class="lang-zh hidden">种子轮融资</span>
  326. <span class="text-gray-500 ml-3">Dec 2024</span>
  327. </h3>
  328. <p class="text-gray-600 max-w-2xl">
  329. <span class="lang-en"
  330. >Secured $1 million in seed funding to develop the core
  331. platform and expand the founding team.</span
  332. >
  333. <span class="lang-zh hidden"
  334. >获得100万美元种子轮融资,用于开发核心平台和扩大创始团队。</span
  335. >
  336. </p>
  337. </div>
  338. <!-- 时间点3 -->
  339. <div class="relative timeline-dot">
  340. <h3 class="text-xl font-semibold mb-2">
  341. <span class="lang-en">Series A Funding</span>
  342. <span class="lang-zh hidden">A轮融资</span>
  343. <span class="text-gray-500 ml-3">May 2025</span>
  344. </h3>
  345. <p class="text-gray-600 max-w-2xl">
  346. <span class="lang-en"
  347. >Closed $10 million Series A funding round led by leading
  348. venture capital firms to accelerate product development.</span
  349. >
  350. <span class="lang-zh hidden"
  351. >完成由知名风险投资公司领投的1000万美元A轮融资,加速产品开发。</span
  352. >
  353. </p>
  354. </div>
  355. </div>
  356. </div>
  357. </section>
  358. <!-- 愿景部分 -->
  359. <section id="vision" class="py-20 bg-light">
  360. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  361. <div class="max-w-4xl mx-auto">
  362. <h2
  363. class="text-[clamp(1.8rem,4vw,2.5rem)] font-semibold mb-16 text-center"
  364. >
  365. <span class="lang-en">Our Vision</span>
  366. <span class="lang-zh hidden">我们的愿景</span>
  367. </h2>
  368. <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
  369. <div class="bg-white p-8 rounded-xl border border-gray-100">
  370. <div
  371. class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6"
  372. >
  373. <i class="fa fa-lightbulb-o text-2xl"></i>
  374. </div>
  375. <h3 class="text-xl font-semibold mb-4">
  376. <span class="lang-en">Transforming Commerce</span>
  377. <span class="lang-zh hidden">改变商业格局</span>
  378. </h3>
  379. <p class="text-gray-600">
  380. <span class="lang-en"
  381. >We envision a world where commerce is seamless,
  382. personalized, and social - breaking down barriers between
  383. discovery, interaction, and purchase.</span
  384. >
  385. <span class="lang-zh hidden"
  386. >我们愿景中的世界,商业是无缝、个性化和社交化的——打破发现、互动和购买之间的壁垒。</span
  387. >
  388. </p>
  389. </div>
  390. <div class="bg-white p-8 rounded-xl border border-gray-100">
  391. <div
  392. class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6"
  393. >
  394. <i class="fa fa-globe text-2xl"></i>
  395. </div>
  396. <h3 class="text-xl font-semibold mb-4">
  397. <span class="lang-en">Global Connectivity</span>
  398. <span class="lang-zh hidden">全球连接</span>
  399. </h3>
  400. <p class="text-gray-600">
  401. <span class="lang-en"
  402. >To create a borderless commerce ecosystem that connects
  403. buyers, sellers, and influencers across the globe through
  404. intelligent technology.</span
  405. >
  406. <span class="lang-zh hidden"
  407. >通过智能技术创建一个无国界的商业生态系统,连接全球的买家、卖家和影响者。</span
  408. >
  409. </p>
  410. </div>
  411. <div class="bg-white p-8 rounded-xl border border-gray-100">
  412. <div
  413. class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6"
  414. >
  415. <i class="fa fa-users text-2xl"></i>
  416. </div>
  417. <h3 class="text-xl font-semibold mb-4">
  418. <span class="lang-en">Empowering Communities</span>
  419. <span class="lang-zh hidden">赋能社区</span>
  420. </h3>
  421. <p class="text-gray-600">
  422. <span class="lang-en"
  423. >We aim to empower creators, small businesses, and consumers
  424. alike through tools that simplify commerce and foster
  425. genuine connections.</span
  426. >
  427. <span class="lang-zh hidden"
  428. >我们旨在通过简化商业并促进真正联系的工具,为创作者、小型企业和消费者赋能。</span
  429. >
  430. </p>
  431. </div>
  432. <div class="bg-white p-8 rounded-xl border border-gray-100">
  433. <div
  434. class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6"
  435. >
  436. <i class="fa fa-rocket text-2xl"></i>
  437. </div>
  438. <h3 class="text-xl font-semibold mb-4">
  439. <span class="lang-en">AI-Powered Experience</span>
  440. <span class="lang-zh hidden">人工智能驱动的体验</span>
  441. </h3>
  442. <p class="text-gray-600">
  443. <span class="lang-en"
  444. >Leveraging the power of artificial intelligence to create
  445. intuitive, personalized shopping experiences that anticipate
  446. needs and simplify decisions.</span
  447. >
  448. <span class="lang-zh hidden"
  449. >利用人工智能的力量创造直观、个性化的购物体验,预测需求并简化决策。</span
  450. >
  451. </p>
  452. </div>
  453. </div>
  454. <div class="mt-16 text-center">
  455. <p class="text-lg text-gray-600 max-w-3xl mx-auto">
  456. <span class="lang-en"
  457. >At Aisoco, we believe the future of commerce is intelligent,
  458. social, and seamlessly integrated into our daily lives. We're
  459. building that future today.</span
  460. >
  461. <span class="lang-zh hidden"
  462. >在Aisoco,我们相信商业的未来是智能、社交化并无缝融入日常生活的。我们正在创造这样的未来。</span
  463. >
  464. </p>
  465. </div>
  466. </div>
  467. </div>
  468. </section>
  469. <!-- 产品部分 -->
  470. <section id="product" class="py-20">
  471. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  472. <h2
  473. class="text-[clamp(1.8rem,4vw,2.5rem)] font-semibold mb-16 text-center"
  474. >
  475. <span class="lang-en">The Product</span>
  476. <span class="lang-zh hidden">平台介绍</span>
  477. </h2>
  478. <div class="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-5xl mx-auto">
  479. <!-- 功能1 -->
  480. <div class="text-center">
  481. <div
  482. class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary mx-auto mb-6"
  483. >
  484. <i class="fa fa-shopping-bag text-2xl"></i>
  485. </div>
  486. <h3 class="text-xl font-semibold mb-3">
  487. <span class="lang-en">Smart Commerce</span>
  488. <span class="lang-zh hidden">智能电商</span>
  489. </h3>
  490. <p class="text-gray-600">
  491. <span class="lang-en"
  492. >A seamless shopping experience with personalized
  493. recommendations and frictionless checkout.</span
  494. >
  495. <span class="lang-zh hidden"
  496. >无缝购物体验,提供个性化推荐和流畅的结账流程。</span
  497. >
  498. </p>
  499. </div>
  500. <!-- 功能2 -->
  501. <div class="text-center">
  502. <div
  503. class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary mx-auto mb-6"
  504. >
  505. <i class="fa fa-cogs text-2xl"></i>
  506. </div>
  507. <h3 class="text-xl font-semibold mb-3">
  508. <span class="lang-en">AI Intelligence</span>
  509. <span class="lang-zh hidden">人工智能</span>
  510. </h3>
  511. <p class="text-gray-600">
  512. <span class="lang-en"
  513. >Advanced AI that understands preferences and delivers
  514. hyper-personalized experiences.</span
  515. >
  516. <span class="lang-zh hidden"
  517. >先进的人工智能,能够理解用户偏好并提供高度个性化的体验。</span
  518. >
  519. </p>
  520. </div>
  521. <!-- 功能3 -->
  522. <div class="text-center">
  523. <div
  524. class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center text-primary mx-auto mb-6"
  525. >
  526. <i class="fa fa-comments text-2xl"></i>
  527. </div>
  528. <h3 class="text-xl font-semibold mb-3">
  529. <span class="lang-en">Social Connectivity</span>
  530. <span class="lang-zh hidden">社交连接</span>
  531. </h3>
  532. <p class="text-gray-600">
  533. <span class="lang-en"
  534. >Built-in social features that allow users to share
  535. discoveries and connect around products.</span
  536. >
  537. <span class="lang-zh hidden"
  538. >内置社交功能,允许用户分享发现并围绕产品建立联系。</span
  539. >
  540. </p>
  541. </div>
  542. </div>
  543. <!-- 产品展示 -->
  544. <div class="mt-20 max-w-6xl mx-auto">
  545. <img
  546. src="./img/20250901-171805.jpg"
  547. alt="Aisoco Platform Interface"
  548. class="w-full h-auto rounded-2xl shadow-xl"
  549. />
  550. <!-- App下载按钮 -->
  551. <div class="mt-16 flex flex-col sm:flex-row justify-center items-center gap-8 sm:gap-20">
  552. <!-- Android下载按钮 -->
  553. <a
  554. id="android-download-btn"
  555. href="javascript:void(0);"
  556. class="download-btn flex items-center bg-black text-white px-7 py-3.5 rounded-lg font-medium transition-all shadow-lg min-w-[200px] opacity-50 cursor-not-allowed"
  557. target="_blank"
  558. rel="noopener noreferrer"
  559. >
  560. <i class="fa fa-android text-3xl mr-3 text-green-400"></i>
  561. <div class="text-left">
  562. <div class="text-xs text-gray-300 uppercase tracking-wide">GET IT ON</div>
  563. <div class="text-base font-semibold">Google Play</div>
  564. </div>
  565. </a>
  566. <!-- iOS下载按钮 -->
  567. <a
  568. id="ios-download-btn"
  569. href="javascript:void(0);"
  570. class="download-btn flex items-center bg-black text-white px-7 py-3.5 rounded-lg font-medium transition-all shadow-lg min-w-[200px] opacity-50 cursor-not-allowed"
  571. target="_blank"
  572. rel="noopener noreferrer"
  573. >
  574. <i class="fa fa-apple text-3xl mr-3"></i>
  575. <div class="text-left">
  576. <div class="text-xs text-gray-300 uppercase tracking-wide">Download on the</div>
  577. <div class="text-base font-semibold">App Store</div>
  578. </div>
  579. </a>
  580. <!-- H5网页版 -->
  581. <a
  582. href="https://www.bandhubuy.com/"
  583. class="download-btn flex items-center bg-black text-white px-7 py-3.5 rounded-lg font-medium transition-all shadow-lg min-w-[200px] hover:bg-gray-800 hover:scale-105"
  584. target="_blank"
  585. rel="noopener noreferrer"
  586. >
  587. <i class="fa fa-globe text-3xl mr-3 text-blue-400"></i>
  588. <div class="text-left">
  589. <div class="text-xs text-gray-300 uppercase tracking-wide">Open in</div>
  590. <div class="text-base font-semibold">Web Browser</div>
  591. </div>
  592. </a>
  593. </div>
  594. </div>
  595. </div>
  596. </section>
  597. <!-- 团队部分 -->
  598. <section id="team" class="py-20 bg-light">
  599. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  600. <h2
  601. class="text-[clamp(1.8rem,4vw,2.5rem)] font-semibold mb-16 text-center"
  602. >
  603. <span class="lang-en">Our Team</span>
  604. <span class="lang-zh hidden">我们的团队</span>
  605. </h2>
  606. <div
  607. class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto"
  608. >
  609. <!-- 团队成员1 -->
  610. <div class="text-center">
  611. <div class="w-40 h-40 rounded-full overflow-hidden mx-auto mb-4">
  612. <img
  613. src="./img/20250901-171822.jpg"
  614. alt="Team Member"
  615. class="w-full h-full object-cover"
  616. />
  617. </div>
  618. <h3 class="text-lg font-semibold">Sarah Johnson</h3>
  619. <p class="text-primary text-sm mb-1">CEO & Founder</p>
  620. </div>
  621. <!-- 团队成员2 -->
  622. <div class="text-center">
  623. <div class="w-40 h-40 rounded-full overflow-hidden mx-auto mb-4">
  624. <img
  625. src="./img/20250901-171825.jpg"
  626. alt="Team Member"
  627. class="w-full h-full object-cover"
  628. />
  629. </div>
  630. <h3 class="text-lg font-semibold">Michael Chen</h3>
  631. <p class="text-primary text-sm mb-1">CTO</p>
  632. </div>
  633. <!-- 团队成员3 -->
  634. <div class="text-center">
  635. <div class="w-40 h-40 rounded-full overflow-hidden mx-auto mb-4">
  636. <img
  637. src="./img/20250901-171829.jpg"
  638. alt="Team Member"
  639. class="w-full h-full object-cover"
  640. />
  641. </div>
  642. <h3 class="text-lg font-semibold">Lucas Li</h3>
  643. <p class="text-primary text-sm mb-1">Asia Business Manager</p>
  644. </div>
  645. <!-- 团队成员4 -->
  646. <div class="text-center">
  647. <div class="w-40 h-40 rounded-full overflow-hidden mx-auto mb-4">
  648. <img
  649. src="./img/20250901-171832.jpg"
  650. alt="Team Member"
  651. class="w-full h-full object-cover"
  652. />
  653. </div>
  654. <h3 class="text-lg font-semibold">Mohammad Hira Sorker</h3>
  655. <p class="text-primary text-sm mb-1">Bangladesh Business Manager</p>
  656. </div>
  657. </div>
  658. </div>
  659. </section>
  660. <!-- 新闻部分 -->
  661. <section id="press" class="py-20">
  662. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  663. <h2
  664. class="text-[clamp(1.8rem,4vw,2.5rem)] font-semibold mb-16 text-center"
  665. >
  666. <span class="lang-en">In The News</span>
  667. <span class="lang-zh hidden">新闻报道</span>
  668. </h2>
  669. <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
  670. <!-- 新闻1 -->
  671. <div
  672. class="border border-gray-200 rounded-xl p-6 hover:shadow-md transition-smooth"
  673. >
  674. <div class="flex items-center mb-4">
  675. <img
  676. src="https://picsum.photos/id/119/80/80"
  677. alt="Tech Media Logo"
  678. class="w-12 h-12 object-contain"
  679. />
  680. <span class="text-gray-500 text-sm ml-3">June 15, 2025</span>
  681. </div>
  682. <h3 class="text-lg font-semibold mb-2">
  683. <span class="lang-en"
  684. >Aisoco Secures $10M in Series A Funding</span
  685. >
  686. <span class="lang-zh hidden">Aisoco获得1000万美元A轮融资</span>
  687. </h3>
  688. <p class="text-gray-600 text-sm">
  689. <span class="lang-en"
  690. >Silicon Valley startup combining AI, social, and e-commerce
  691. raises significant funding.</span
  692. >
  693. <span class="lang-zh hidden"
  694. >这家结合人工智能、社交和电商的硅谷初创公司获得巨额融资。</span
  695. >
  696. </p>
  697. </div>
  698. <!-- 新闻2 -->
  699. <div
  700. class="border border-gray-200 rounded-xl p-6 hover:shadow-md transition-smooth"
  701. >
  702. <div class="flex items-center mb-4">
  703. <img
  704. src="https://picsum.photos/id/129/80/80"
  705. alt="Tech Media Logo"
  706. class="w-12 h-12 object-contain"
  707. />
  708. <span class="text-gray-500 text-sm ml-3">May 2, 2025</span>
  709. </div>
  710. <h3 class="text-lg font-semibold mb-2">
  711. <span class="lang-en">Reinventing E-Commerce Experience</span>
  712. <span class="lang-zh hidden">重塑电商体验</span>
  713. </h3>
  714. <p class="text-gray-600 text-sm">
  715. <span class="lang-en"
  716. >Former Apple and Google executives launch innovative new
  717. platform.</span
  718. >
  719. <span class="lang-zh hidden"
  720. >前苹果和谷歌高管推出创新新平台。</span
  721. >
  722. </p>
  723. </div>
  724. <!-- 新闻3 -->
  725. <div
  726. class="border border-gray-200 rounded-xl p-6 hover:shadow-md transition-smooth"
  727. >
  728. <div class="flex items-center mb-4">
  729. <img
  730. src="https://picsum.photos/id/139/80/80"
  731. alt="Tech Media Logo"
  732. class="w-12 h-12 object-contain"
  733. />
  734. <span class="text-gray-500 text-sm ml-3">April 18, 2025</span>
  735. </div>
  736. <h3 class="text-lg font-semibold mb-2">
  737. <span class="lang-en">The Future of Social Shopping</span>
  738. <span class="lang-zh hidden">社交购物的未来</span>
  739. </h3>
  740. <p class="text-gray-600 text-sm">
  741. <span class="lang-en"
  742. >How Aisoco is merging AI with social features to change
  743. online retail.</span
  744. >
  745. <span class="lang-zh hidden"
  746. >Aisoco如何将人工智能与社交功能融合,改变在线零售。</span
  747. >
  748. </p>
  749. </div>
  750. </div>
  751. </div>
  752. </section>
  753. <!-- 联系部分 -->
  754. <section id="contact" class="py-20 bg-light">
  755. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  756. <h2
  757. class="text-[clamp(1.8rem,4vw,2.5rem)] font-semibold mb-16 text-center"
  758. >
  759. <span class="lang-en">Get In Touch</span>
  760. <span class="lang-zh hidden">联系我们</span>
  761. </h2>
  762. <div class="max-w-4xl mx-auto">
  763. <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
  764. <!-- 联系表单 -->
  765. <div>
  766. <form
  767. id="contact-form"
  768. class="bg-white p-8 rounded-xl border border-gray-100"
  769. >
  770. <h3 class="text-xl font-semibold mb-6">
  771. <span class="lang-en">Send us a message</span>
  772. <span class="lang-zh hidden">给我们留言</span>
  773. </h3>
  774. <div class="mb-5">
  775. <label
  776. for="name"
  777. class="block text-gray-700 text-sm font-medium mb-2"
  778. >
  779. <span class="lang-en">Name</span>
  780. <span class="lang-zh hidden">姓名</span>
  781. </label>
  782. <input
  783. type="text"
  784. id="name"
  785. name="name"
  786. class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-smooth"
  787. required
  788. />
  789. </div>
  790. <div class="mb-5">
  791. <label
  792. for="email"
  793. class="block text-gray-700 text-sm font-medium mb-2"
  794. >
  795. <span class="lang-en">Email</span>
  796. <span class="lang-zh hidden">邮箱</span>
  797. </label>
  798. <input
  799. type="email"
  800. id="email"
  801. name="email"
  802. class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-smooth"
  803. required
  804. />
  805. </div>
  806. <div class="mb-6">
  807. <label
  808. for="message"
  809. class="block text-gray-700 text-sm font-medium mb-2"
  810. >
  811. <span class="lang-en">Message</span>
  812. <span class="lang-zh hidden">留言</span>
  813. </label>
  814. <textarea
  815. id="message"
  816. name="message"
  817. rows="4"
  818. class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-smooth resize-none"
  819. required
  820. ></textarea>
  821. </div>
  822. <button
  823. type="submit"
  824. class="w-full bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-md font-medium transition-smooth"
  825. >
  826. <span class="lang-en">Send Message</span>
  827. <span class="lang-zh hidden">发送留言</span>
  828. </button>
  829. </form>
  830. </div>
  831. <!-- 联系信息 -->
  832. <div>
  833. <div
  834. class="bg-white p-8 rounded-xl border border-gray-100 h-full"
  835. >
  836. <h3 class="text-xl font-semibold mb-6">
  837. <span class="lang-en">Contact Information</span>
  838. <span class="lang-zh hidden">联系信息</span>
  839. </h3>
  840. <div class="space-y-6">
  841. <div>
  842. <h4 class="text-sm font-medium text-gray-500 mb-1">
  843. <span class="lang-en">Office</span>
  844. <span class="lang-zh hidden">办公室</span>
  845. </h4>
  846. <p class="text-gray-700">
  847. <span class="lang-en"
  848. >B&B Tower, Jublee Road, Tin Puler Matha,Chattogram,Bangladesh</span
  849. >
  850. <span class="lang-zh hidden"
  851. >旧金山创新路123号,CA 94107</span
  852. >
  853. </p>
  854. </div>
  855. <!-- <div>
  856. <h4 class="text-sm font-medium text-gray-500 mb-1">
  857. <span class="lang-en">Phone</span>
  858. <span class="lang-zh hidden">电话</span>
  859. </h4>
  860. <p class="text-gray-700">+1 (555) 123-4567</p>
  861. </div> -->
  862. <div>
  863. <h4 class="text-sm font-medium text-gray-500 mb-1">
  864. <span class="lang-en">Email</span>
  865. <span class="lang-zh hidden">邮箱</span>
  866. </h4>
  867. <p class="text-gray-700">support@aisoco.net</p>
  868. </div>
  869. </div>
  870. <div class="mt-10">
  871. <h4 class="text-sm font-medium text-gray-500 mb-4">
  872. <span class="lang-en">Follow Us</span>
  873. <span class="lang-zh hidden">关注我们</span>
  874. </h4>
  875. <div class="flex space-x-4">
  876. <a
  877. href="#"
  878. class="w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white flex items-center justify-center text-gray-600 transition-smooth"
  879. target="_blank"
  880. rel="noopener noreferrer"
  881. >
  882. <i class="fa fa-facebook"></i>
  883. </a>
  884. <a
  885. href="#"
  886. class="w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white flex items-center justify-center text-gray-600 transition-smooth"
  887. target="_blank"
  888. rel="noopener noreferrer"
  889. >
  890. <i class="fa fa-twitter"></i>
  891. </a>
  892. <a
  893. href="https://www.linkedin.com/in/bandhubuy-online-shopping-6725243a5/"
  894. class="w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white flex items-center justify-center text-gray-600 transition-smooth"
  895. target="_blank"
  896. rel="noopener noreferrer"
  897. >
  898. <i class="fa fa-linkedin"></i>
  899. </a>
  900. <a
  901. href="https://www.instagram.com/bandhubuy?igsh=Nm5xbTJrZzV3anIx"
  902. class="w-10 h-10 rounded-full bg-gray-100 hover:bg-primary hover:text-white flex items-center justify-center text-gray-600 transition-smooth"
  903. target="_blank"
  904. rel="noopener noreferrer"
  905. >
  906. <i class="fa fa-instagram"></i>
  907. </a>
  908. </div>
  909. </div>
  910. </div>
  911. </div>
  912. </div>
  913. </div>
  914. </div>
  915. </section>
  916. </main>
  917. <!-- 页脚 -->
  918. <footer class="bg-dark text-white py-12">
  919. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  920. <div class="max-w-6xl mx-auto">
  921. <div
  922. class="flex flex-col md:flex-row justify-between items-center mb-8"
  923. >
  924. <a href="#home" class="text-2xl font-semibold mb-6 md:mb-0"
  925. >Aisoco</a
  926. >
  927. <div class="flex flex-wrap justify-center gap-x-8 gap-y-4">
  928. <a
  929. href="#about"
  930. class="text-gray-400 hover:text-white text-sm transition-smooth"
  931. >
  932. <span class="lang-en">About</span>
  933. <span class="lang-zh hidden">关于我们</span>
  934. </a>
  935. <a
  936. href="#journey"
  937. class="text-gray-400 hover:text-white text-sm transition-smooth"
  938. >
  939. <span class="lang-en">Journey</span>
  940. <span class="lang-zh hidden">发展历程</span>
  941. </a>
  942. <a
  943. href="#vision"
  944. class="text-gray-400 hover:text-white text-sm transition-smooth"
  945. >
  946. <span class="lang-en">Vision</span>
  947. <span class="lang-zh hidden">愿景</span>
  948. </a>
  949. <a
  950. href="#product"
  951. class="text-gray-400 hover:text-white text-sm transition-smooth"
  952. >
  953. <span class="lang-en">Product</span>
  954. <span class="lang-zh hidden">产品</span>
  955. </a>
  956. <a
  957. href="#team"
  958. class="text-gray-400 hover:text-white text-sm transition-smooth"
  959. >
  960. <span class="lang-en">Team</span>
  961. <span class="lang-zh hidden">团队</span>
  962. </a>
  963. <a
  964. href="#press"
  965. class="text-gray-400 hover:text-white text-sm transition-smooth"
  966. >
  967. <span class="lang-en">Press</span>
  968. <span class="lang-zh hidden">新闻</span>
  969. </a>
  970. <a
  971. href="#contact"
  972. class="text-gray-400 hover:text-white text-sm transition-smooth"
  973. >
  974. <span class="lang-en">Contact</span>
  975. <span class="lang-zh hidden">联系</span>
  976. </a>
  977. </div>
  978. </div>
  979. <div
  980. class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"
  981. >
  982. <p class="text-gray-500 text-sm mb-4 md:mb-0">
  983. &copy; 2025 Aisoco, Inc. All rights reserved.
  984. </p>
  985. <div class="flex space-x-6">
  986. <a href="./terms.html" target="_blank" class="text-gray-500 hover:text-gray-300 text-sm">
  987. <span class="lang-en">Terms of Service</span>
  988. <span class="lang-zh hidden">服务条款</span>
  989. </a>
  990. <a href="./privacy.html" target="_blank" class="text-gray-500 hover:text-gray-300 text-sm">
  991. <span class="lang-en">Privacy Policy</span>
  992. <span class="lang-zh hidden">隐私政策</span>
  993. </a>
  994. <a href="./refund.html" target="_blank" class="text-gray-500 hover:text-gray-300 text-sm">
  995. <span class="lang-en">Return & Refund Policy</span>
  996. <span class="lang-zh hidden">退货退款政策</span>
  997. </a>
  998. </div>
  999. </div>
  1000. </div>
  1001. </div>
  1002. </footer>
  1003. <!-- 返回顶部按钮 -->
  1004. <button
  1005. id="back-to-top"
  1006. class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-dark text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all z-50"
  1007. >
  1008. <i class="fa fa-chevron-up"></i>
  1009. </button>
  1010. <!-- JavaScript -->
  1011. <script>
  1012. // 语言切换功能
  1013. const langEnBtn = document.getElementById('lang-en');
  1014. const langZhBtn = document.getElementById('lang-zh');
  1015. const langEnElements = document.querySelectorAll('.lang-en');
  1016. const langZhElements = document.querySelectorAll('.lang-zh');
  1017. langEnBtn.addEventListener('click', function () {
  1018. langEnBtn.classList.add('text-primary');
  1019. langEnBtn.classList.remove('text-gray-500');
  1020. langZhBtn.classList.add('text-gray-500');
  1021. langZhBtn.classList.remove('text-primary');
  1022. langEnElements.forEach((el) => el.classList.remove('hidden'));
  1023. langZhElements.forEach((el) => el.classList.add('hidden'));
  1024. });
  1025. langZhBtn.addEventListener('click', function () {
  1026. langZhBtn.classList.add('text-primary');
  1027. langZhBtn.classList.remove('text-gray-500');
  1028. langEnBtn.classList.add('text-gray-500');
  1029. langEnBtn.classList.remove('text-primary');
  1030. langZhElements.forEach((el) => el.classList.remove('hidden'));
  1031. langEnElements.forEach((el) => el.classList.add('hidden'));
  1032. });
  1033. // 导航栏滚动效果
  1034. const navbar = document.getElementById('navbar');
  1035. const backToTop = document.getElementById('back-to-top');
  1036. window.addEventListener('scroll', function () {
  1037. if (window.scrollY > 100) {
  1038. navbar.classList.add(
  1039. 'bg-white/90',
  1040. 'backdrop-blur-sm',
  1041. 'shadow-sm',
  1042. 'py-3'
  1043. );
  1044. navbar.classList.remove('py-6');
  1045. backToTop.classList.remove('opacity-0', 'invisible');
  1046. backToTop.classList.add('opacity-100', 'visible');
  1047. } else {
  1048. navbar.classList.remove(
  1049. 'bg-white/90',
  1050. 'backdrop-blur-sm',
  1051. 'shadow-sm',
  1052. 'py-3'
  1053. );
  1054. navbar.classList.add('py-6');
  1055. backToTop.classList.add('opacity-0', 'invisible');
  1056. backToTop.classList.remove('opacity-100', 'visible');
  1057. }
  1058. });
  1059. // 移动端菜单切换
  1060. const menuToggle = document.getElementById('menu-toggle');
  1061. const mobileMenu = document.getElementById('mobile-menu');
  1062. menuToggle.addEventListener('click', function () {
  1063. mobileMenu.classList.toggle('hidden');
  1064. const icon = menuToggle.querySelector('i');
  1065. if (icon.classList.contains('fa-bars')) {
  1066. icon.classList.remove('fa-bars');
  1067. icon.classList.add('fa-times');
  1068. } else {
  1069. icon.classList.remove('fa-times');
  1070. icon.classList.add('fa-bars');
  1071. }
  1072. });
  1073. // 平滑滚动
  1074. document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  1075. anchor.addEventListener('click', function (e) {
  1076. const href = this.getAttribute('href');
  1077. // 跳过下载按钮和其他非锚点链接
  1078. if (!href || href === '#' || href === 'javascript:void(0);' || !href.startsWith('#')) {
  1079. return;
  1080. }
  1081. e.preventDefault();
  1082. // 关闭移动菜单
  1083. if (!mobileMenu.classList.contains('hidden')) {
  1084. mobileMenu.classList.add('hidden');
  1085. const icon = menuToggle.querySelector('i');
  1086. icon.classList.remove('fa-times');
  1087. icon.classList.add('fa-bars');
  1088. }
  1089. const targetElement = document.querySelector(href);
  1090. if (targetElement) {
  1091. window.scrollTo({
  1092. top: targetElement.offsetTop - 80,
  1093. behavior: 'smooth',
  1094. });
  1095. }
  1096. });
  1097. });
  1098. // 返回顶部功能
  1099. backToTop.addEventListener('click', function () {
  1100. window.scrollTo({
  1101. top: 0,
  1102. behavior: 'smooth',
  1103. });
  1104. });
  1105. // 表单提交处理
  1106. const contactForm = document.getElementById('contact-form');
  1107. if (contactForm) {
  1108. contactForm.addEventListener('submit', function (e) {
  1109. e.preventDefault();
  1110. // 模拟表单提交
  1111. const submitBtn = this.querySelector('button[type="submit"]');
  1112. const originalText = submitBtn.innerHTML;
  1113. submitBtn.disabled = true;
  1114. submitBtn.innerHTML =
  1115. '<i class="fa fa-spinner fa-spin mr-2"></i> <span class="lang-en">Sending...</span><span class="lang-zh hidden">发送中...</span>';
  1116. setTimeout(() => {
  1117. alert('Thank you for your message! We will get back to you soon.');
  1118. this.reset();
  1119. submitBtn.disabled = false;
  1120. submitBtn.innerHTML = originalText;
  1121. }, 1500);
  1122. });
  1123. }
  1124. // App下载链接获取功能
  1125. async function fetchDownloadUrl(type) {
  1126. try {
  1127. const response = await fetch(`https://ht.banhubuy.com/operating/config/getUrlByType?type=${type}`);
  1128. const data = await response.json();
  1129. if (data.code === "200" && data.data && data.data.valueInfo) {
  1130. return data.data.valueInfo;
  1131. }
  1132. return null;
  1133. } catch (error) {
  1134. console.error('Failed to fetch download URL:', error);
  1135. return null;
  1136. }
  1137. }
  1138. // 初始化下载按钮
  1139. async function initDownloadButtons() {
  1140. const androidBtn = document.getElementById('android-download-btn');
  1141. const iosBtn = document.getElementById('ios-download-btn');
  1142. // 初始状态:禁用按钮,防止在加载时点击
  1143. androidBtn.style.pointerEvents = 'none';
  1144. iosBtn.style.pointerEvents = 'none';
  1145. // 获取Android下载链接
  1146. const androidUrl = await fetchDownloadUrl(1);
  1147. if (androidUrl) {
  1148. // 有下载链接:启用按钮
  1149. androidBtn.onclick = function(e) {
  1150. e.preventDefault();
  1151. window.open(androidUrl, '_blank');
  1152. };
  1153. androidBtn.classList.remove('opacity-50', 'cursor-not-allowed');
  1154. androidBtn.classList.add('hover:bg-gray-800', 'hover:shadow-xl', 'cursor-pointer');
  1155. androidBtn.style.opacity = '1';
  1156. androidBtn.style.pointerEvents = 'auto';
  1157. } else {
  1158. // 无下载链接:保持禁用状态
  1159. androidBtn.style.opacity = '0.4';
  1160. androidBtn.style.pointerEvents = 'none';
  1161. }
  1162. // 获取iOS下载链接
  1163. const iosUrl = await fetchDownloadUrl(2);
  1164. if (iosUrl) {
  1165. // 有下载链接:启用按钮
  1166. iosBtn.onclick = function(e) {
  1167. e.preventDefault();
  1168. window.open(iosUrl, '_blank');
  1169. };
  1170. iosBtn.classList.remove('opacity-50', 'cursor-not-allowed');
  1171. iosBtn.classList.add('hover:bg-gray-800', 'hover:shadow-xl', 'cursor-pointer');
  1172. iosBtn.style.opacity = '1';
  1173. iosBtn.style.pointerEvents = 'auto';
  1174. } else {
  1175. // 无下载链接:保持禁用状态
  1176. iosBtn.style.opacity = '0.4';
  1177. iosBtn.style.pointerEvents = 'none';
  1178. }
  1179. }
  1180. // 页面加载完成后初始化下载按钮
  1181. document.addEventListener('DOMContentLoaded', function() {
  1182. initDownloadButtons();
  1183. });
  1184. </script>
  1185. </body>
  1186. </html>