vvplan.github.io/maker.html at master · vvplan/vvplan.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创客教育 | 虚谷计划</title>
  <meta name="description" content="虚谷计划创客教育项目：虚谷号、掌控板、乐造模块、虚谷物联，为中国中小学创客教育、物联网教学与 STEAM 实践提供开源硬件与工具。">
  <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+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body data-i18n-title="maker.title" data-i18n-desc="maker.metaDesc">
  <!-- Navigation -->
  <header class="site-header scrolled" id="header">
    <div class="container nav-container">
      <a class="logo" href="/">
        <span class="logo-mark">虚</span>
        <span class="logo-text" data-i18n="site.logoText">虚谷计划</span>
      </a>
      <nav class="main-nav">
        <a href="about.html" data-i18n="nav.about">关于计划</a>
        <a href="maker.html" data-i18n="nav.maker">创客教育</a>
        <a href="ai.html" data-i18n="nav.ai">人工智能</a>
        <a href="ecosystem.html" data-i18n="nav.ecosystem">生态伙伴</a>
        <a href="list.html" class="btn btn-sm btn-outline" data-i18n="nav.list">项目列表</a>
        <div class="lang-dropdown" data-i18n-dropdown>
    <button class="btn btn-sm btn-lang lang-dropdown-trigger" aria-expanded="false" aria-haspopup="true" aria-label="Choose language">
      <span class="lang-label">简体中文</span>
      <span class="lang-caret">▾</span>
    </button>
    <div class="lang-dropdown-menu" role="listbox">
      <button class="lang-option is-active" data-lang-option="zh" role="option" aria-selected="true">简体中文</button>
      <button class="lang-option" data-lang-option="tw" role="option" aria-selected="false">繁體中文</button>
      <button class="lang-option" data-lang-option="en" role="option" aria-selected="false">English</button>
      <button class="lang-option" data-lang-option="id" role="option" aria-selected="false">Indonesia</button>
    </div>
  </div>
      </nav>
      <button class="menu-toggle" aria-label="菜单" data-i18n-aria="nav.menu" id="menuToggle">
        <span></span><span></span><span></span>
      </button>
    </div>
  </header>

  <!-- Mobile Menu -->
  <div class="mobile-menu" id="mobileMenu">
    <a href="about.html" data-i18n="nav.about">关于计划</a>
    <a href="maker.html" data-i18n="nav.maker">创客教育</a>
    <a href="ai.html" data-i18n="nav.ai">人工智能</a>
    <a href="ecosystem.html" data-i18n="nav.ecosystem">生态伙伴</a>
    <a href="list.html" data-i18n="nav.list">项目列表</a>
    <div class="lang-dropdown lang-dropdown-mobile" data-i18n-dropdown>
    <button class="btn btn-lang btn-lang-mobile lang-dropdown-trigger" aria-expanded="false" aria-haspopup="true" aria-label="Choose language">
      <span class="lang-label">简体中文</span>
      <span class="lang-caret">▾</span>
    </button>
    <div class="lang-dropdown-menu" role="listbox">
      <button class="lang-option is-active" data-lang-option="zh" role="option" aria-selected="true">简体中文</button>
      <button class="lang-option" data-lang-option="tw" role="option" aria-selected="false">繁體中文</button>
      <button class="lang-option" data-lang-option="en" role="option" aria-selected="false">English</button>
      <button class="lang-option" data-lang-option="id" role="option" aria-selected="false">Indonesia</button>
    </div>
  </div>
  </div>

  <!-- Page Header -->
  <section class="page-header">
    <div class="container">
      <h1 data-i18n="maker.pageTitle">创客教育</h1>
      <p data-i18n="maker.pageSubtitle">虚谷计划最早形成的四大核心项目，为中国中小学创客教育、物联网教学与 STEAM 实践提供可靠工具。</p>
    </div>
  </section>

  <!-- Projects -->
  <section class="section section-projects">
    <div class="container">
      <div class="projects-grid">
        <a href="/vvboard" class="project-card project-vvboard">
          <div class="project-image">
            <img src="images/vvboard-logo.jpg" alt="虚谷号">
          </div>
          <div class="project-body">
            <div class="project-meta">
              <span class="project-year">2018</span>
              <span class="project-status status-stopped" data-i18n="index.statusStopped">已停止</span>
            </div>
            <h3 data-i18n="proj.vvboard">虚谷号</h3>
            <div class="project-founder"><span data-i18n="maker.founder">发起人（单位）：</span><strong>专委会、希科普</strong></div>
            <p data-i18n="maker.vvboardDesc">一款能运行 Python 的开源硬件，集成高性能处理器与通用单片机芯片，内置多种通信和扩展接口，既可作为完整电脑使用，也可作为微型可编程智能终端。</p>
            <span class="project-link" data-i18n="card.visit">访问项目 →</span>
          </div>
        </a>
        <a href="/handpy" class="project-card project-handpy">
          <div class="project-image">
            <img src="images/handpy-logo.jpg" alt="掌控板">
          </div>
          <div class="project-body">
            <div class="project-meta">
              <span class="project-year">2018</span>
              <span class="project-status status-active" data-i18n="index.statusActive">持续中</span>
            </div>
            <h3 data-i18n="proj.handpy">掌控板</h3>
            <div class="project-founder"><span data-i18n="maker.founder">发起人（单位）：</span><strong>专委会、盛思科技</strong></div>
            <p data-i18n="maker.handpyDesc">一款集成常见电子模块的开源硬件，采用物联网芯片 ESP32，整合常见输入输出模块，支持 Wi-Fi 与蓝牙，是专为青少年编程教育而设计的开源硬件，已成为国内中小学创客教育最常用的开源硬件之一。</p>
            <span class="project-link" data-i18n="card.visit">访问项目 →</span>
          </div>
        </a>
        <a href="/laserblock" class="project-card project-laserblock">
          <div class="project-image">
            <img src="images/laserblock-logo.jpg" alt="乐造模块">
          </div>
          <div class="project-body">
            <div class="project-meta">
              <span class="project-year">2020</span>
              <span class="project-status status-active" data-i18n="index.statusActive">持续中</span>
            </div>
            <h3 data-i18n="proj.laserblock">乐造模块</h3>
            <div class="project-founder"><span data-i18n="maker.founder">发起人（单位）：</span><strong>专委会、雷宇科技</strong></div>
            <p data-i18n="maker.laserblockDesc">利用激光切割技术加工的木质结构件，支持常见电子模块，为创客教育与 STEAM 提供低成本、高自由度的结构件方案。</p>
            <span class="project-link" data-i18n="card.visit">访问项目 →</span>
          </div>
        </a>
        <a href="/vvlink" class="project-card project-vvlink">
          <div class="project-image">
            <img src="images/vvlink-logo.jpg" alt="虚谷物联">
          </div>
          <div class="project-body">
            <div class="project-meta">
              <span class="project-year">2019</span>
              <span class="project-status status-active" data-i18n="index.statusActive">持续中</span>
            </div>
            <h3 data-i18n="proj.vvlink">虚谷物联</h3>
            <div class="project-founder"><span data-i18n="maker.founder">发起人（单位）：</span><strong>专委会、DFRobot</strong></div>
            <p data-i18n="maker.vvlinkDesc">一套开箱即用物联网工具包，结合可部署在本地的 MQTT 服务器软件"SIoT"，配合掌控板、虚谷号搭建各种物联网应用，是中小学物联网教学的重要工具。</p>
            <span class="project-link" data-i18n="card.visit">访问项目 →</span>
          </div>
        </a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a class="logo" href="/">
            <span class="logo-mark">虚</span>
            <span class="logo-text" data-i18n="site.logoText">虚谷计划</span>
          </a>
          <p data-i18n="footer.tagline">中国的开源教育计划，让人工智能与开源硬件点亮每一间课堂。</p>
        </div>
        <div class="footer-links">
          <h4 data-i18n="footer.hotProjects">热门项目</h4>
          <a href="xedu-client.html">XEdu Client</a>
          <a href="/handpy" data-i18n="proj.handpy">掌控板</a>
          <a href="/vvlink" data-i18n="proj.vvlink">虚谷物联</a>
          <a href="https://quickform.cc/" target="_blank" rel="noopener">QuickForm</a>
          <a href="https://xedupro.cn/" target="_blank" rel="noopener">XEduPro</a>
          <a href="https://openhydra.net/" target="_blank" rel="noopener">OpenHydra</a>
        </div>
        <div class="footer-links">
          <h4 data-i18n="footer.nav">导航</h4>
          <a href="list.html" data-i18n="nav.list">项目列表</a>
          <a href="about.html" data-i18n="footer.aboutUs">关于我们</a>
          <a href="maker.html" data-i18n="nav.maker">创客教育</a>
          <a href="ai.html" data-i18n="nav.ai">人工智能</a>
        </div>
      </div>
      <div class="footer-bottom">
        <p data-i18n="footer.copyright">© 虚谷计划组委会 2018 — 2026. 保留所有权利。</p>
      </div>
    </div>
  </footer>

  <script src="js/i18n.js"></script>
  <script>
    const menuToggle = document.getElementById('menuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    menuToggle.addEventListener('click', () => {
      menuToggle.classList.toggle('active');
      mobileMenu.classList.toggle('open');
    });
    mobileMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        menuToggle.classList.remove('active');
        mobileMenu.classList.remove('open');
      });
    });
  </script>
</body>
</html>