275 lines
12 KiB
HTML
275 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
||
<title>虚拟现实与混合现实应用开发 - 广州虚境网络科技</title>
|
||
<link rel="shortcut icon" href="/img/ico_logo.ico" type="image/x-icon">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<script src="js/main.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<canvas class="cover" id="cover" width="1955" height="1075"></canvas>
|
||
<header>
|
||
<div class="container">
|
||
<nav class="navbar">
|
||
<a href="#" class="logo">
|
||
<img src="img/logo.png" alt="Logo" style="height: 50px;">
|
||
</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#home" data-i18n="nav.home">首页</a></li>
|
||
<li><a href="#services" data-i18n="nav.services">业务范围</a></li>
|
||
<li><a href="#advantages" data-i18n="nav.partners">合作伙伴</a></li>
|
||
<li><a href="#cases" data-i18n="nav.cases">行业方案</a></li>
|
||
<li><a href="#about" data-i18n="nav.about">关于我们</a></li>
|
||
<li><a href="#contact" data-i18n="nav.contact">联系我们</a></li>
|
||
</ul>
|
||
<div class="lang-toggle">
|
||
<button id="langToggle" class="lang-btn">
|
||
<span class="lang-option active" data-lang="cn">CN</span>
|
||
<span class="lang-separator">/</span>
|
||
<span class="lang-option" data-lang="en">EN</span>
|
||
</button>
|
||
</div>
|
||
<div class="hamburger">
|
||
<i class="fas fa-bars"></i>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="home">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title" data-i18n="hero.title">虚境起源</h1>
|
||
<h2 class="hero-subtitle" data-i18n="hero.subtitle">Xuking Origin</h2>
|
||
<div class="slogan-zh" data-i18n="hero.slogan">虚境起源</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Features Section -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2 data-i18n="features.title">我们的核心优势</h2>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-rocket"></i>
|
||
</div>
|
||
<h3 data-i18n="features.feature1.title">开发周期短</h3>
|
||
<p data-i18n="features.feature1.desc">开发周期短，保证您的项目按时完成，24小时快速响应。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-gem"></i>
|
||
</div>
|
||
<h3 data-i18n="features.feature2.title">技术质量保证</h3>
|
||
<p data-i18n="features.feature2.desc">通过专业的检测技术，保证您的项目在开发过程中随时都能保持高质量。</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-cogs"></i>
|
||
</div>
|
||
<h3 data-i18n="features.feature3.title">技术方案完善</h3>
|
||
<p data-i18n="features.feature3.desc">从方案设计到开发的各个环节都有详细的设计和方案，确保项目顺利进行。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services Section -->
|
||
<section class="section services" id="services">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2 data-i18n="services.title">我们的业务范围</h2>
|
||
</div>
|
||
<div class="services-grid" id="servicesGrid">
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Partners Section -->
|
||
<section class="section" id="advantages">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2 data-i18n="partners.title">合作伙伴</h2>
|
||
</div>
|
||
<div class="partners-grid" id="partnersGrid">
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section cases" id="cases">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2 data-i18n="cases.title">行业方案案例</h2>
|
||
</div>
|
||
<div class="cases-grid" id="casesGrid">
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Video Modal -->
|
||
<div class="video-modal" id="videoModal">
|
||
<div class="video-content">
|
||
<span class="close-btn">×</span>
|
||
<video id="modalVideo" controls></video>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- About Section -->
|
||
<section class="section" id="about">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2 data-i18n="about.title">公司介绍</h2>
|
||
</div>
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<h4>
|
||
<span data-i18n="about.companyName">广州市虚境起源科技有限公司</span>
|
||
<p data-i18n="about.desc1">我们主要提供虚拟现实与混合现实应用开发技术服务、技术服务、技术人员等服务均具备落地开发能力。</p>
|
||
<p data-i18n="about.desc2">成立时间：2023年</p>
|
||
<span data-i18n="about.desc3">已为数十家上市企业提供技术服务，培训虚拟现实开发者上万名。</span>
|
||
</h4>
|
||
<div class="about-stats">
|
||
<div class="stat">
|
||
<div class="stat-number" data-i18n="about.stat1.number">100+</div>
|
||
<div class="stat-text" data-i18n="about.stat1.text">成功项目</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number" data-i18n="about.stat2.number">高</div>
|
||
<div class="stat-text" data-i18n="about.stat2.text">客户满意度</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number" data-i18n="about.stat3.number">50+</div>
|
||
<div class="stat-text" data-i18n="about.stat3.text">专业团队</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number" data-i18n="about.stat4.number">20+</div>
|
||
<div class="stat-text" data-i18n="about.stat4.text">行业经验</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="about-image">
|
||
<img src="img/about.png" alt="公司外观">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="section contact" id="contact">
|
||
<div class="container">
|
||
<div class="section-title">
|
||
<h2 data-i18n="contact.title">联系我们</h2>
|
||
</div>
|
||
<div class="contact-grid">
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fas fa-map-marker-alt"></i>
|
||
</div>
|
||
<div>
|
||
<h3 data-i18n="contact.address.title">地址</h3>
|
||
<p data-i18n="contact.address.content">广东省广州市黄浦区科学城产业总部港A2栋1008</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fas fa-phone"></i>
|
||
</div>
|
||
<div>
|
||
<h3 data-i18n="contact.phone.title">电话</h3>
|
||
<p data-i18n="contact.phone.content">13368952691</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fas fa-globe"></i>
|
||
</div>
|
||
<div>
|
||
<h3 data-i18n="contact.email.title">邮件</h3>
|
||
<p data-i18n="contact.email.content">w858626244@gmail.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="qr-code">
|
||
<img src="img/vx.png" alt="微信二维码">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-column">
|
||
<h3 data-i18n="footer.companyName">虚境网络科技有限公司</h3>
|
||
<p data-i18n="footer.desc">我们专注于虚拟现实与混合现实应用开发，为客户提供高质量的技术解决方案。</p>
|
||
<div class="social-links">
|
||
<a href="#"><i class="fab fa-weixin"></i></a>
|
||
<a href="#"><i class="fab fa-discord"></i></a>
|
||
<a href="#"><i class="fab fa-youtube"></i></a>
|
||
<a href="#"><i class="fab fa-bilibili"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h3 data-i18n="footer.contactInfo">联系信息</h3>
|
||
<div class="footer-links">
|
||
<a href="#"><i class="fas fa-map-marker-alt"></i> <span data-i18n="contact.address.content">广东省广州市黄浦区科学城产业总部港A2栋1008</span></a>
|
||
<a href="#"><i class="fas fa-phone"></i><span data-i18n="contact.phone.content">13368952691</span></a>
|
||
<a href="#"><i class="fas fa-envelope"></i><span data-i18n="contact.email.content">w858626244@gmail.com</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copyright">
|
||
<p>© <span data-i18n="footer.copyright">Copyright 广州市虚境起源科技有限公司</span></p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<script>
|
||
const width = document.getElementById("cover").width = screen.availWidth + 35;
|
||
const height = document.getElementById("cover").height = screen.availHeight + 35;
|
||
// 获取 cover-content 的绘图上下文
|
||
const ctx = document.getElementById("cover").getContext("2d");
|
||
// 创建一个大小为 width/10 的数组并填充为 0
|
||
const arr = Array(Math.ceil(width / 10)).fill(0);
|
||
// 创建一个字符串数组,用于存储字符。
|
||
|
||
// const str = "斯拉箭丝死双卡亡凇春此令待松刺袋才虫离耸考".split("");
|
||
const str = "元亨利贞潜龙勿用见龙在田利见大人君子终日乾乾夕惕若厉无咎或跃在渊无咎飞龙在天利见大人亢龙有悔见群龙无首吉坤卦贴近大地胸怀斯拉箭丝死双卡亡凇春此令待松刺袋才虫离耸考".split("");
|
||
|
||
ctx.font = "20px jw";
|
||
const font_size = 20;
|
||
function rain() {
|
||
// 设置颜色，并绘制一个全屏的矩形
|
||
ctx.fillStyle = "rgba(0,0,20,0.05)";
|
||
ctx.fillRect(0, 0, width, height);
|
||
ctx.fillStyle = '#cea70b';
|
||
arr.forEach(function (value, index) {
|
||
// 根据数组的索引值来绘制文字，x 坐标为索引值 * 10，y 坐标为 value + 10。
|
||
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * font_size, value + font_size);
|
||
|
||
// 从上一次绘制的位置开始，将数组值设置为下一次绘制位置。
|
||
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + font_size;
|
||
});
|
||
}
|
||
// 每 30 毫秒执行一次 rain() 函数。
|
||
setInterval(rain, 80);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |