342 lines
16 KiB
HTML
342 lines
16 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>Algodoo - 物理仿真实验平台</title>
|
||
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
|
||
<style>
|
||
:root {
|
||
--primary-color: #3498db;
|
||
--secondary-color: #2c3e50;
|
||
--accent-color: #e74c3c;
|
||
--light-bg: #f8f9fa;
|
||
--dark-text: #333;
|
||
--light-text: #fff;
|
||
}
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
color: var(--dark-text);
|
||
line-height: 1.6;
|
||
}
|
||
.hero-section {
|
||
background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.9)), url('https://bkimg.cdn.bcebos.com/pic/f703738da97739121139d626f8198618367ae25e?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080');
|
||
background-size: cover;
|
||
background-position: center;
|
||
color: var(--light-text);
|
||
padding: 100px 0;
|
||
position: relative;
|
||
}
|
||
.hero-section::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 50px;
|
||
background: linear-gradient(to top, #fff, transparent);
|
||
}
|
||
.section-title {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin-bottom: 40px;
|
||
padding-bottom: 15px;
|
||
}
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 70px;
|
||
height: 3px;
|
||
background-color: var(--primary-color);
|
||
}
|
||
.feature-card {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
height: 100%;
|
||
}
|
||
.feature-card:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.video-container {
|
||
position: relative;
|
||
padding-bottom: 56.25%;
|
||
height: 0;
|
||
overflow: hidden;
|
||
border-radius: 8px;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.video-container iframe {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
.download-btn {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 50px;
|
||
font-size: 0.9rem;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
text-decoration: none;
|
||
}
|
||
.download-btn:hover {
|
||
background-color: #2cbeff;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
color: white;
|
||
}
|
||
.download-btn i {
|
||
margin-right: 8px;
|
||
}
|
||
.footer {
|
||
background-color: var(--secondary-color);
|
||
color: var(--light-text);
|
||
padding: 4rem 0;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.hero-section {
|
||
padding: 60px 0;
|
||
}
|
||
.hero-section h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
section {
|
||
padding: 40px 0;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Algodoo</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item"><a class="nav-link" href="#intro">什么是Algodoo</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#cases">应用案例</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="#cooperation">联盟校合作</a></li>
|
||
<!-- 删除此行 -->
|
||
<li class="nav-item"><a class="nav-link" href="#learn">学习资源</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero区域 -->
|
||
<section class="hero-section text-center">
|
||
<div class="container">
|
||
<h1 class="display-4 mb-4">Algodoo 物理仿真教学平台</h1>
|
||
<p class="lead mb-5">让物理教学可视化、互动化、高效化</p>
|
||
<div class="d-flex justify-content-center gap-3">
|
||
<a href="#cooperation" class="btn btn-warning btn-lg px-5">联盟校合作</a>
|
||
<a href="https://www.algodoo.com/download/Algodoo_2_2_4-x64.exe" class="btn btn-primary btn-lg px-5">下载使用</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 简介部分 -->
|
||
<section id="intro" class="py-16">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-6">
|
||
<h2 class="section-title">什么是Algodoo?</h2>
|
||
<p class="mb-4">Algodoo是专为物理教学打造的2D仿真实验平台，教师可通过拖拽操作快速创建物理场景，实时可视化展示力学、电磁学等核心物理概念，让抽象公式变为直观动画。</p>
|
||
<p class="mb-4">在物理课堂中，Algodoo可帮助教师：<br>
|
||
✅ 动态演示难以用传统教具实现的实验（如天体运动、波的干涉）<br>
|
||
✅ 让学生直观理解抽象概念（如动量守恒、向心力）<br>
|
||
✅ 快速构建习题场景，展示解题过程中的物理变化<br>
|
||
✅ 支持学生自主探究，培养科学思维能力</p>
|
||
<div class="alert alert-primary mt-5">
|
||
<i class="fa fa-lightbulb-o me-2"></i>通过动态仿真，原本需要20分钟讲解的力学问题，现在学生可通过互动实验5分钟直观理解
|
||
</div>
|
||
<p class="mb-4">Algodoo是由瑞典Algoryx Simulation AB公司开发的2D物理仿真实验平台，其前身为乌普萨拉大学开发的Phun物理沙盒程序。</p>
|
||
<p class="mb-4">该软件通过拖拽式绘图工具构建包含刚体、流体、齿轮等元素的实验场景，支持重力、摩擦力、光学现象等物理规律的仿真模拟，并提供轨迹显示与参数可视化工具。</p>
|
||
<a href="https://www.algodoo.com/download/" target="_blank" class="btn btn-outline-primary">访问官网 <i class="fa fa-external-link ms-1"></i></a>
|
||
</div>
|
||
<div class="col-md-6 mt-8 mt-md-0">
|
||
<img src="https://bkimg.cdn.bcebos.com/pic/f703738da97739121139d626f8198618367ae25e?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080" alt="Algodoo界面" class="img-fluid rounded shadow-lg">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- 使用案例 -->
|
||
<section id="cases" class="py-16">
|
||
<div class="container">
|
||
<div class="text-center mb-10">
|
||
<h2 class="section-title">应用案例</h2>
|
||
<p class="text-muted">探索Algodoo在物理教学中的应用</p>
|
||
</div>
|
||
<div class="row g-6">
|
||
<div class="col-lg-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="video-container">
|
||
<iframe src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/27653639269-1-192.mp4"></iframe>
|
||
</div>
|
||
<div class="p-4">
|
||
<h5 class="card-title">小球与圆弧槽水平动量守恒</h5>
|
||
<p class="card-text">演示碰撞过程中的动量守恒定律</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="video-container">
|
||
<iframe src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/30819352804-1-192.mp4"></iframe>
|
||
</div>
|
||
<div class="p-4">
|
||
<h5 class="card-title">带电粒子在组合场中的运动</h5>
|
||
<p class="card-text">模拟电磁场中粒子的运动轨迹</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<div class="card h-100 border-0 shadow-sm">
|
||
<div class="video-container">
|
||
<iframe src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/30845570348-1-192.mp4"></iframe>
|
||
</div>
|
||
<div class="p-4">
|
||
<h5 class="card-title">力学综合问题</h5>
|
||
<p class="card-text">高考物理力学综合题目的动态演示</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- 学习资源 -->
|
||
<section id="learn" class="py-16 section-space mt-12">
|
||
<div class="container">
|
||
<div class="text-center mb-10">
|
||
<h2 class="section-title">学习资源</h2>
|
||
<p class="text-muted">快速掌握Algodoo的使用技巧</p>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-8">
|
||
<div class="card shadow-lg border-0 rounded-4 resource-card">
|
||
<div class="card-body p-0">
|
||
<h3 class="card-title mb-5 ps-4 pt-4">如何学习Algodoo？</h3>
|
||
<ul class="list-group list-group-flush mb-0">
|
||
<li class="list-group-item d-flex align-items-start border-0 resource-item">
|
||
<div class="me-3 text-primary"><i class="fa fa-play-circle fa-2x"></i></div>
|
||
<div>
|
||
<h5 class="mb-1">观看教学视频</h5>
|
||
<p class="card-text text-muted">永滑老师例说Algodoo制作物理动画</p>
|
||
<a href="https://www.bilibili.com/cheese/play/ss19214?csource=common_myclass_purchasedlecture_null&spm_id_from=333.874.selfDef.mine_paid_list" target="_blank" class="btn btn-sm btn-outline-primary mt-2">前往观看</a>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item d-flex align-items-start border-0 resource-item">
|
||
<div class="me-3 text-primary"><i class="fa fa-users fa-2x"></i></div>
|
||
<div>
|
||
<h5 class="mb-1">加入学习小组</h5>
|
||
<p class="card-text text-muted">与物理老师和程序研发人员共同开发建设</p>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item d-flex align-items-start border-0 resource-item">
|
||
<div class="me-3 text-primary"><i class="fa fa-code fa-2x"></i></div>
|
||
<div>
|
||
<h5 class="mb-1">脚本编程</h5>
|
||
<p class="card-text text-muted">支持脚本编程，通过AI简化代码开发步骤</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 联盟校合作 -->
|
||
<section id="cooperation" class="py-20 bg-primary text-white">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-12">
|
||
<h2 class="section-title mb-6">加入东师理想联盟校</h2>
|
||
<p class="lead mb-8 fs-5">共建共享物理教学资源库，获取持续技术支持</p>
|
||
<div class="row g-8">
|
||
<div class="col-md-6">
|
||
<ul class="list-group list-group-flush mb-8">
|
||
<li class="list-group-item bg-transparent border-white/20 text-white d-flex align-items-start py-4">
|
||
<i class="fa fa-check-circle mt-1 me-4"></i>
|
||
<div>获取100+物理实验教学模板库，覆盖初高中全部知识点</div>
|
||
</li>
|
||
<li class="list-group-item bg-transparent border-white/20 text-white d-flex align-items-start py-4">
|
||
<i class="fa fa-check-circle mt-1 me-4"></i>
|
||
<div>专属技术团队7×12小时支持，确保教学应用无阻碍</div>
|
||
</li>
|
||
<li class="list-group-item bg-transparent border-white/20 text-white d-flex align-items-start py-4">
|
||
<i class="fa fa-check-circle mt-1 me-4"></i>
|
||
<div>参与跨校教研活动，共享优质教学案例与方法</div>
|
||
</li>
|
||
<li class="list-group-item bg-transparent border-white/20 text-white d-flex align-items-start py-4">
|
||
<i class="fa fa-check-circle mt-1 me-4"></i>
|
||
<div>优先获得AI辅助备课工具、虚拟实验开发等前沿技术支持</div>
|
||
</li>
|
||
</ul>
|
||
<a href="#contact" class="btn btn-warning btn-lg px-6 py-3">立即咨询加入</a>
|
||
</div>
|
||
<div class="col-md-6 d-flex justify-content-center align-items-center">
|
||
<div class="bg-white/10 p-8 rounded-4 text-center w-100">
|
||
<i class="fa fa-users fa-5x mb-6"></i>
|
||
<h4 class="mb-3">已有全国200+所的学校加入联盟</h4>
|
||
<p>携手共创物理教学新生态</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-4 mb-md-0">
|
||
<h3 class="mb-3">Algodoo</h3>
|
||
<p class="text-muted">物理仿真实验平台，让学习更有趣</p>
|
||
</div>
|
||
<div class="col-md-6 text-md-end">
|
||
<p class="text-muted">© 2023 Algodoo. All rights reserved.</p>
|
||
<p class="text-muted">官网: <a href="https://www.algodoo.com/" target="_blank" class="text-white">www.algodoo.com</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
// 添加平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |