Claude
75d8970e9a
- 引入 Lenis 平滑滚动 + GSAP ScrollTrigger 驱动的分区揭示动画 - 新增"扫描线"签名效果：每个分区进入视口时有一道电光蓝扫描线掠过（呼应基因测序读数的意象） - 视频、产品、学术资讯板块全部改为深色岩层基调，与首屏背景统一 - 字体改为 Noto Serif SC(粗衬线，碑刻质感) + JetBrains Mono(数据感等宽字体)组合，替换掉过于套路化的 Orbitron - 产品卡片新增 3D 鼠标跟随倾斜效果 + 编号标签(01/02/03) - 新增关键词跑马灯装饰带、首屏"向下滚动"提示、Logo 视差微动 - 首屏标题/徽标改为错落浮现的加载动画
362 lines
19 KiB
HTML
362 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>海古纪生物科技 - 精准基因组学解决方案</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/nav.css">
|
|
<link rel="stylesheet" href="css/footer.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar">
|
|
<div class="nav-container">
|
|
<div class="logo-section">
|
|
<img src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo" class="logo">
|
|
</div>
|
|
<ul class="nav-menu">
|
|
<li><a href="#home" class="nav-link">首页</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a href="pages/products.html" class="nav-link">产品 <span class="arrow">▼</span></a>
|
|
<div class="dropdown-menu">
|
|
<a href="pages/products.html#ai-scientist">AI生信科学家</a>
|
|
<a href="pages/products.html#hsmaster">HSmaster植物基因分型系统</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="pages/services.html" class="nav-link">服务 <span class="arrow">▼</span></a>
|
|
<div class="dropdown-menu">
|
|
<a href="pages/services.html#hyper-seq">Hyper-seq测序</a>
|
|
<div class="submenu-trigger">
|
|
<a href="pages/services.html#wgs">全基因组重测序</a>
|
|
</div>
|
|
<a href="pages/services.html#process-dev">实验流程开发与技术支持</a>
|
|
<a href="pages/services.html#ai-agri">AI农业领域定制</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="pages/applications.html" class="nav-link">应用领域 <span class="arrow">▼</span></a>
|
|
<div class="dropdown-menu">
|
|
<a href="pages/applications.html#breeding">种业研究</a>
|
|
<a href="pages/applications.html#microbe">微生物研究</a>
|
|
<a href="pages/applications.html#animal-plant">动植物研究</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="pages/advantages.html" class="nav-link">综合优势 <span class="arrow">▼</span></a>
|
|
<div class="dropdown-menu">
|
|
<a href="pages/advantages.html#sequencing">测序平台</a>
|
|
<a href="pages/advantages.html#analysis">分析平台</a>
|
|
<a href="pages/advantages.html#lab">核心实验室</a>
|
|
<a href="pages/advantages.html#css">客户服务系统</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="pages/resources.html" class="nav-link">资源中心 <span class="arrow">▼</span></a>
|
|
<div class="dropdown-menu">
|
|
<a href="pages/resources.html#case">精选案例</a>
|
|
<a href="pages/resources.html#news">资讯动态</a>
|
|
<a href="pages/resources.html#video">视频中心</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="pages/about.html" class="nav-link">关于我们 <span class="arrow">▼</span></a>
|
|
<div class="dropdown-menu">
|
|
<a href="pages/about.html#haiguji">海古纪</a>
|
|
<a href="pages/about.html#contact">联系我们</a>
|
|
<a href="pages/about.html#news">最新动态</a>
|
|
<a href="pages/about.html#privacy">隐私协议</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="nav-right">
|
|
<div class="nav-item dropdown">
|
|
<a href="#" class="nav-icon" title="公众号">☷</a>
|
|
<div class="dropdown-menu">
|
|
<div class="qrcode-container">
|
|
<p>扫描关注公众号</p>
|
|
<div class="qrcode qr-empty">二维码</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="pages/customer-service.html" class="customer-service-link" title="客户服务系统">CSS</a>
|
|
<a href="pages/about.html#contact" class="btn-contact">联系我们</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 首页 -->
|
|
<section id="home" class="hero">
|
|
<canvas id="hero-particle-canvas" class="hero-particles" aria-hidden="true"></canvas>
|
|
<div class="hero-carousel">
|
|
<!-- 第一张：公司理念 -->
|
|
<div class="hero-slide hero-brand-slide active">
|
|
<div class="hero-content hero-brand-content">
|
|
<div class="hero-brand-heading">
|
|
<img class="hero-brand-logo" src="公司资料/公司简介/海古纪logo.png" alt="海古纪 Logo">
|
|
<div class="hero-brand-copy">
|
|
<span class="hero-kicker" data-reveal-item>HYPER‑GENE · 生命孪生体系</span>
|
|
<h1>
|
|
<span class="hero-line-1" data-reveal-item>突破极限</span>
|
|
<span class="hero-line-2" data-reveal-item>生命从此被计算</span>
|
|
</h1>
|
|
<div class="hero-badge-row" data-reveal-item>
|
|
<span class="hero-badge">极低成本</span>
|
|
<span class="hero-badge">高效</span>
|
|
<span class="hero-badge">灵活</span>
|
|
<span class="hero-badge">高通量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="公司资料/产品/HSmaster/图片/育种发展流程-从人工选择到智能育种.png" alt="从人工选择到智能育种">
|
|
</div>
|
|
|
|
<!-- 第二张：产品展示 -->
|
|
<div class="hero-slide">
|
|
<div class="hero-content">
|
|
<h1>HSmaster 全自动文库制备系统</h1>
|
|
<p>核酸提取、PCR扩增、文库质检全流程无人值守</p>
|
|
<a class="btn-primary hero-btn" href="pages/products.html#hsmaster">查看产品</a>
|
|
</div>
|
|
<img src="公司资料/产品/HSmaster/图片/HSmaster全自动文库制备系统.png" alt="HSmaster全自动文库制备系统">
|
|
</div>
|
|
|
|
<!-- 第三张：AI生信科学家 -->
|
|
<div class="hero-slide">
|
|
<div class="hero-content">
|
|
<h1>AI 生信科学家</h1>
|
|
<p>上传数据后自动识别项目类型，规划并执行多组学分析路径</p>
|
|
<a class="btn-primary hero-btn" href="pages/products.html#ai-scientist">浏览产品</a>
|
|
</div>
|
|
<img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家">
|
|
</div>
|
|
|
|
<!-- 第四张：联系信息 -->
|
|
<div class="hero-slide">
|
|
<div class="hero-content">
|
|
<h1>立即联系我们</h1>
|
|
<p>获取专业的基因组学解决方案</p>
|
|
<a class="btn-primary hero-btn" href="pages/about.html#contact">咨询服务</a>
|
|
</div>
|
|
<img src="公司资料/产品/HSmaster/图片/文库流水线.png" alt="文库流水线">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-controls">
|
|
<button class="carousel-dot active" data-slide="1" aria-label="查看第 1 张轮播"></button>
|
|
<button class="carousel-dot" data-slide="2" aria-label="查看第 2 张轮播"></button>
|
|
<button class="carousel-dot" data-slide="3" aria-label="查看第 3 张轮播"></button>
|
|
<button class="carousel-dot" data-slide="4" aria-label="查看第 4 张轮播"></button>
|
|
</div>
|
|
|
|
<div class="scroll-cue" aria-hidden="true">
|
|
<span>向下滚动 · 探索更多</span>
|
|
<i class="scroll-cue-line"></i>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 关键词标记带 -->
|
|
<div class="marquee-strip" aria-hidden="true">
|
|
<div class="marquee-track">
|
|
<span>极低成本</span><span class="dot">·</span>
|
|
<span>高效</span><span class="dot">·</span>
|
|
<span>灵活</span><span class="dot">·</span>
|
|
<span>高通量</span><span class="dot">·</span>
|
|
<span>HYPER‑SEQ</span><span class="dot">·</span>
|
|
<span>生命孪生体系</span><span class="dot">·</span>
|
|
<span>精准基因组学</span><span class="dot">·</span>
|
|
<span>极低成本</span><span class="dot">·</span>
|
|
<span>高效</span><span class="dot">·</span>
|
|
<span>灵活</span><span class="dot">·</span>
|
|
<span>高通量</span><span class="dot">·</span>
|
|
<span>HYPER‑SEQ</span><span class="dot">·</span>
|
|
<span>生命孪生体系</span><span class="dot">·</span>
|
|
<span>精准基因组学</span><span class="dot">·</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 首页视频 -->
|
|
<section class="home-video-section reveal-section">
|
|
<span class="section-scan" aria-hidden="true"></span>
|
|
<div class="container home-video-layout">
|
|
<div class="home-video-copy reveal-up">
|
|
<span class="section-kicker">南繁科研现场</span>
|
|
<h2>海大南繁：走向世界的育种中心</h2>
|
|
<p>通过视频了解海南大学南繁科研与育种创新基础，感受海古纪技术服务所依托的南繁产业场景。</p>
|
|
<a class="card-link" href="pages/resources.html#video">更多视频 →</a>
|
|
</div>
|
|
<div class="home-video-media reveal-up">
|
|
<video controls preload="metadata" poster="公司资料/资讯/2025-2-12/水稻图片.png">
|
|
<source src="公司资料/资讯/海大南繁：走向世界的育种中心.mp4" type="video/mp4">
|
|
您的浏览器暂不支持视频播放。
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="products-preview reveal-section">
|
|
<span class="section-scan" aria-hidden="true"></span>
|
|
<div class="container">
|
|
<div class="section-heading reveal-up">
|
|
<span class="eyebrow">产品与服务</span>
|
|
<h2>我们的产品与服务</h2>
|
|
</div>
|
|
<div class="preview-grid">
|
|
<article class="preview-card tilt-card reveal-up">
|
|
<span class="card-index">01</span>
|
|
<div class="preview-image-wrap">
|
|
<img src="公司资料/产品/AI生信科学家/人工智能生物信息科学家.png" alt="AI生信科学家" class="preview-image">
|
|
</div>
|
|
<h3>AI生信科学家</h3>
|
|
<p>全自动、自规划的多组学分析智能体</p>
|
|
<a href="pages/products.html#ai-scientist" class="card-link">了解更多 →</a>
|
|
</article>
|
|
|
|
<article class="preview-card tilt-card reveal-up">
|
|
<span class="card-index">02</span>
|
|
<div class="preview-image-wrap">
|
|
<img src="公司资料/产品/HSmaster/图片/hyper-seq.png" alt="Hyper-seq技术" class="preview-image">
|
|
</div>
|
|
<h3>Hyper-seq测序</h3>
|
|
<p>极低成本、高效、灵活的DNA测序文库制备</p>
|
|
<a href="pages/services.html#hyper-seq" class="card-link">了解更多 →</a>
|
|
</article>
|
|
|
|
<article class="preview-card tilt-card reveal-up">
|
|
<span class="card-index">03</span>
|
|
<div class="preview-image-wrap">
|
|
<img src="公司资料/产品/HSmaster/图片/生信分析流程.png" alt="全基因组重测序分析流程" class="preview-image">
|
|
</div>
|
|
<h3>全基因组重测序</h3>
|
|
<p>高精度全基因组测序与分析服务</p>
|
|
<a href="pages/services.html#wgs" class="card-link">了解更多 →</a>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 学术文献与动态 -->
|
|
<section class="academic-news reveal-section">
|
|
<span class="section-scan" aria-hidden="true"></span>
|
|
<div class="container">
|
|
<div class="section-heading reveal-up">
|
|
<span class="eyebrow">知识与洞见</span>
|
|
<h2>学术文献与最新动态</h2>
|
|
</div>
|
|
<div class="section-row">
|
|
<div class="section-col reveal-up">
|
|
<h3>学术文献</h3>
|
|
<div class="news-list">
|
|
<div class="news-item">
|
|
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
|
|
<p>智能自动化方案联合 Hyper-seq，支撑水稻与大豆基因组选择研究。</p><a href="pages/resources.html#news">查看资讯</a>
|
|
</div>
|
|
<div class="news-item">
|
|
<h4>马铃薯同源四倍体基因组研究</h4>
|
|
<p>Plant Biotechnology Journal (IF=13.8)</p>
|
|
<a href="#" class="read-more">查看详情 →</a>
|
|
</div>
|
|
<div class="news-item">
|
|
<h4>美人蕉科植物基因组研究</h4>
|
|
<p>Frontiers in Plant Science (IF=6.627)</p>
|
|
<a href="#" class="read-more">查看详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-col reveal-up">
|
|
<h3>最新动态</h3>
|
|
<div class="news-list">
|
|
<div class="news-item">
|
|
<h4>Hyper-seq 技术实现低成本全基因组数据采集</h4>
|
|
<p>智能自动化方案联合 Hyper-seq，支撑水稻与大豆基因组选择研究。</p><a href="pages/resources.html#news">查看资讯</a>
|
|
</div>
|
|
<div class="news-item">
|
|
<h4>Hyper-seq技术获得国际发明专利</h4>
|
|
<p>专利号：No.2020/06979</p>
|
|
<a href="#" class="read-more">查看详情 →</a>
|
|
</div>
|
|
<div class="news-item">
|
|
<h4>获崖州湾杯科技创新大赛一等奖</h4>
|
|
<p>技术创新突破行业瓶颈</p>
|
|
<a href="#" class="read-more">查看详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 底部 -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>联系信息</h3>
|
|
<p>三亚海古纪生物科技有限公司</p>
|
|
<p>谢经理：16689001917</p>
|
|
<p>基因文库技术：江肆肆 18605560158</p>
|
|
<p>育种数据服务：廖树欣 18889202989</p>
|
|
<p>高通量基因文库设备：杰瑞.葛 13601063401</p>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h3>关于海古纪</h3>
|
|
<ul>
|
|
<li><a href="pages/about.html#haiguji">公司简介</a></li>
|
|
<li><a href="pages/about.html#contact">联系我们</a></li>
|
|
<li><a href="pages/about.html#privacy">隐私协议</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h3>合作伙伴</h3>
|
|
<div class="footer-partners">
|
|
<a class="partner-link" href="https://www.prcxi.com/" target="_blank"><img class="partner-logo"
|
|
src="公司资料/公司简介/中析生信logo.png" alt="苏州中析生物信息有限公司"><span>苏州中析生物信息有限公司</span></a>
|
|
<a class="partner-link" href="https://www.hainanu.edu.cn/" target="_blank"><img class="partner-logo"
|
|
src="公司资料/公司简介/海南大学logo.png" alt="海南大学"><span>海南大学</span></a>
|
|
<a class="partner-link" href="https://www.instrument.com.cn/netshow/SH116578/" target="_blank"><img
|
|
class="partner-logo" src="公司资料/公司简介/瀚辰光翼logo.png" alt="成都瀚辰光翼"><span>成都瀚辰光翼</span></a>
|
|
<a class="partner-link" href="https://www.mgi-tech.com/" target="_blank"><img class="partner-logo"
|
|
src="公司资料/公司简介/华大智造logo.png" alt="华大智造"><span>华大智造</span></a>
|
|
<a class="partner-link" href="https://www.chinagut.cn/box/organizations/1403" target="_blank"><img
|
|
class="partner-logo" src="公司资料/公司简介/深圳华大生命科学研究院logo.png"
|
|
alt="深圳华大生命科学研究院"><span>深圳华大生命科学研究院</span></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-section">
|
|
<h3>关注我们</h3>
|
|
<div class="qr-grid">
|
|
<div class="qr-slot">微信</div>
|
|
<div class="qr-slot">微博</div>
|
|
<div class="qr-slot">公众号</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© 2024 三亚海古纪生物科技有限公司. 保留所有权利。</p>
|
|
<p><a href="#">隐私政策</a> | <a href="#">用户协议</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://unpkg.com/lenis@1.3.25/dist/lenis.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
|
<script src="js/carousel.js"></script>
|
|
<script src="js/nav.js"></script>
|
|
<script src="js/particles.js"></script>
|
|
<script src="js/animations.js"></script>
|
|
</body>
|
|
|
|
</html>
|