update: 2026-03-28 20:59

InfoGenie-frontend/public/smallgame/h5cube/.dockerignore

@@ -0,0 +1,11 @@
+# 排除所有文件和目录
+*
+
+# 允许 index.html
+!index.html
+!favicon.ico
+
+# 允许的目录（及其内容）
+!remote_files/
+!js/
+!css/

InfoGenie-frontend/public/smallgame/h5cube/.wrangler/cache/pages.json

@@ -0,0 +1,4 @@
+{
+  "account_id": "3fdbaad92364222635c5c1c41ff1af8b",
+  "project_name": "web-cube"
+}

InfoGenie-frontend/public/smallgame/h5cube/.wrangler/cache/wrangler-account.json

@@ -0,0 +1,6 @@
+{
+  "account": {
+    "id": "3fdbaad92364222635c5c1c41ff1af8b",
+    "name": "shumengya"
+  }
+}

InfoGenie-frontend/public/smallgame/h5cube/Dockerfile

@@ -0,0 +1,16 @@
+FROM lipanski/docker-static-website:2.6.0
+
+# 静态文件路径 /home/static
+COPY . /home/static/
+
+ENTRYPOINT ["/busybox-httpd", "-f", "-v"]
+CMD [ "-p", "5146" ]
+
+# 暴露端口
+EXPOSE 5146
+
+LABEL 镜像制作者="https://space.bilibili.com/17547201"
+LABEL GitHub主页="https://github.com/Firfr/"
+LABEL Gitee主页="https://gitee.com/firfe/"
+
+# docker build -t firfe/h5cube:2025.09.17 .

InfoGenie-frontend/public/smallgame/h5cube/README.md

@@ -0,0 +1,71 @@
+## 汉化&修改
+
+3D魔方，可以在浏览器中操作复原魔方，不过没有自动复原的功能。
+
+这个项目的原码时网上搜到的，我做了含糊额和制作了docker镜像。
+
+- 我汉化和构建docker镜像的
+  - GitHub仓库 https://github.com/Firfr/h5cube
+  - Gitee仓库 https://gitee.com/firfe/h5cube
+
+
+欢迎关注我B站账号 [秦曱凧](https://space.bilibili.com/17547201) (读作 qín yuē zhēng)  
+
+有需要帮忙部署这个项目的朋友,一杯奶茶,即可程远程帮你部署，需要可联系。  
+微信号 `E-0_0-`  
+闲鱼搜索用户 `明月人间`  
+或者邮箱 `firfe163@163.com`  
+如果这个项目有帮到你。欢迎start。
+
+有其他的项目的汉化需求，欢迎提issue。或其他方式联系通知。
+
+### 镜像
+
+从阿里云或华为云镜像仓库拉取镜像，注意填写镜像标签，镜像仓库中没有`latest`标签
+
+容器内部端口`5146`，可通过设置启动参数的值来指定监听端口。
+
+```bash
+swr.cn-north-4.myhuaweicloud.com/firfe/h5cube:2025.09.17
+```
+
+### docker run 命令部署
+
+```bash
+docker run -d \
+--name h5cube \
+--network bridge \
+--restart always \
+--log-opt max-size=1m \
+--log-opt max-file=1 \
+-p 5146:5146 \
+swr.cn-north-4.myhuaweicloud.com/firfe/h5cube:2025.09.17
+```
+在命令最后追加`-p 端口`自定义端口
+
+### compose 文件部署 👍推荐
+
+```yaml
+#version: '3'
+name: h5cube
+services:
+  h5cube:
+    container_name: h5cube
+    image: swr.cn-north-4.myhuaweicloud.com/firfe/h5cube:2025.09.17
+    network_mode: bridge
+    restart: always
+    logging:
+      options:
+        max-size: 1m
+        max-file: '1'
+    ports:
+      - 5146:5146
+    # 指定端口
+    # command: ["-p", "自定义端口"] 
+```
+
+### 效果截图
+
+| ![设置](图片/设置.jpg) | ![首页](图片/首页.jpg) |
+|-|-|
+

InfoGenie-frontend/public/smallgame/h5cube/css/style.css

@@ -0,0 +1,344 @@
+
+*, *:before, *:after {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  cursor: inherit;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  text-transform: uppercase;
+}
+*:focus {
+  outline: none;
+}
+
+html {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  font-family: "BungeeFont", sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  cursor: default;
+  overflow: hidden;
+  height: 100%;
+  font-size: 5rem;
+}
+
+.icon {
+  display: inline-block;
+  font-size: inherit;
+  overflow: visible;
+  vertical-align: -0.125em;
+  preserveAspectRatio: none;
+}
+
+.range {
+  position: relative;
+  width: 14em;
+  z-index: 1;
+  opacity: 0;
+}
+.range:not(:last-child) {
+  margin-bottom: 2em;
+}
+.range__label {
+  position: relative;
+  font-size: 0.9em;
+  line-height: 0.75em;
+  padding-bottom: 0.5em;
+  z-index: 2;
+}
+.range__track {
+  position: relative;
+  height: 1em;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  z-index: 3;
+}
+.range__track-line {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.2);
+  height: 2px;
+  top: 50%;
+  margin-top: -1px;
+  left: -0.5em;
+  right: -0.5em;
+  transform-origin: left center;
+}
+.range__handle {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.range__handle div {
+  transition: background 500ms ease;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.9em;
+  height: 0.9em;
+  border-radius: 0.2em;
+  margin-left: -0.45em;
+  margin-top: -0.45em;
+  background: #41aac8;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
+}
+.range.is-active .range__handle div {
+  transform: scale(1.25);
+}
+.range__handle:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 3em;
+  height: 3em;
+  margin-left: -1.5em;
+  margin-top: -1.5em;
+}
+.range__list {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  position: relative;
+  padding-top: 0.5em;
+  font-size: 0.55em;
+  color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.stats {
+  position: relative;
+  width: 14em;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  opacity: 0;
+}
+.stats:not(:last-child) {
+  margin-bottom: 1.5em;
+}
+.stats i {
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 0.9em;
+}
+.stats b {
+  display: inline-block;
+  font-size: 0.9em;
+}
+
+.text {
+  position: absolute;
+  left: 0;
+  right: 0;
+  text-align: center;
+  line-height: 0.75;
+  perspective: 100rem;
+  opacity: 0;
+}
+.text i {
+  display: inline-block;
+  opacity: 0;
+  white-space: pre-wrap;
+}
+.text--title {
+  bottom: 75%;
+  font-size: 4.4em;
+  height: 1.2em;
+}
+.text--title span {
+  display: block;
+}
+.text--title span:first-child {
+  font-size: 0.5em;
+  margin-bottom: 0.2em;
+}
+.text--note {
+  top: 87%;
+  font-size: 1em;
+}
+.text--timer {
+  bottom: 78%;
+  font-size: 3.5em;
+  line-height: 1;
+}
+.text--complete, .text--best-time {
+  font-size: 1.5em;
+  top: 83%;
+  line-height: 1em;
+}
+
+.btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  border-radius: 0;
+  border-width: 0;
+  position: absolute;
+  pointer-events: none;
+  font-size: 1.2em;
+  color: rgba(0, 0, 0, 0.25);
+  opacity: 0;
+}
+.btn:after {
+  position: absolute;
+  content: "";
+  width: 3em;
+  height: 3em;
+  left: 50%;
+  top: 50%;
+  margin-left: -1.5em;
+  margin-top: -1.5em;
+  border-radius: 100%;
+}
+.btn--bl {
+  bottom: 0.8em;
+  left: 0.8em;
+}
+.btn--br {
+  bottom: 0.8em;
+  right: 0.8em;
+}
+.btn--bc {
+  bottom: 0.8em;
+  left: calc(50% - 0.5em);
+}
+.btn--pwa {
+  transition: color 500ms ease;
+  color: inherit;
+  height: 1em;
+}
+.btn--pwa svg {
+  font-size: 0.6em;
+  margin: 0.35em 0;
+}
+.btn svg {
+  display: block;
+}
+
+.ui {
+  pointer-events: none;
+  color: #070d15;
+}
+.ui, .ui__background, .ui__game, .ui__texts, .ui__prefs, .ui__stats, .ui__buttons {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.ui__background {
+  z-index: 1;
+  transition: background 500ms ease;
+  background: #d1d5db;
+}
+.ui__background:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
+}
+.ui__game {
+  pointer-events: all;
+  z-index: 2;
+}
+.ui__game canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.ui__texts {
+  z-index: 3;
+}
+.ui__prefs, .ui__stats {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  z-index: 4;
+}
+.ui__buttons {
+  z-index: 5;
+}
+.ui__notification {
+  transition: transform 500ms ease, opacity 500ms ease;
+  font-family: sans-serif;
+  position: absolute;
+  left: 50%;
+  bottom: 0.6em;
+  padding: 0.6em;
+  margin-left: -9.4em;
+  width: 18.8em;
+  z-index: 6;
+  background: rgba(17, 17, 17, 0.9);
+  border-radius: 0.8em;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  color: #fff;
+  user-select: none;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(100%);
+}
+.ui__notification.is-active {
+  opacity: 1;
+  pointer-events: all;
+  transform: none;
+}
+.ui__notification * {
+  text-transform: none;
+}
+.ui__notification-icon {
+  background-size: 100% 100%;
+  left: 0.6em;
+  top: 0.6em;
+  width: 2.8em;
+  height: 2.8em;
+  border-radius: 0.5em;
+  background: #fff;
+  margin-right: 0.6em;
+  display: block;
+}
+.ui__notification-text {
+  font-size: 0.75em;
+  line-height: 1.4em;
+}
+.ui__notification-text .icon {
+  color: #4f82fd;
+  font-size: 1.1em;
+}
+.ui__notification-text b {
+  font-weight: 700;
+}
+
+.btn--stats {
+  visibility: hidden;
+}

InfoGenie-frontend/public/smallgame/h5cube/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="zh" >
+<head>
+<meta charset="UTF-8">
+<title>网页魔方</title>
+<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+
+<link rel="stylesheet" href="css/style.css">
+
+</head>
+<body>
+
+<div class="ui">
+
+  <div class="ui__background"></div>
+
+  <div class="ui__game"></div>
+
+  <div class="ui__texts">
+    <h1 class="text text--title">
+      <span>魔方</span>
+      <span>游戏</span>
+    </h1>
+    <div class="text text--note">
+      双击魔方即可开始
+    </div>
+    <div class="text text--timer">
+      0:00
+    </div>
+    <div class="text text--complete">
+      <span>完成!</span>
+    </div>
+    <div class="text text--best-time">
+      <icon trophy></icon>
+      <span>最佳时间!</span>
+    </div>
+  </div>
+
+  <div class="ui__prefs">
+    <range name="flip" title="翻转类型" list="快速,平滑,弹跳"></range>
+    <range name="scramble" title="打乱步数" list="20,25,30"></range>
+    <range name="fov" title="摄像机角度" list="正交,透视"></range>
+    <range name="theme" title="配色方案" list="经典,埃尔诺,尘埃,迷彩,彩虹"></range>
+  </div>
+
+  <div class="ui__stats">
+    <div class="stats" name="total-solves">
+      <i>总解决次数:</i><b>-</b>
+    </div>
+    <div class="stats" name="best-time">
+      <i>最佳时间:</i><b>-</b>
+    </div>
+    <div class="stats" name="worst-time">
+      <i>最差时间:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-5">
+      <i>5次平均:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-12">
+      <i>12次平均:</i><b>-</b>
+    </div>
+    <div class="stats" name="average-25">
+      <i>25次平均:</i><b>-</b>
+    </div>
+  </div>
+
+  <div class="ui__buttons">
+    <button class="btn btn--bl btn--stats">
+      <icon trophy></icon>
+    </button>
+    <button class="btn btn--bl btn--prefs">
+      <icon settings></icon>
+    </button>
+    <button class="btn btn--bl btn--back">
+      <icon back></icon>
+    </button>
+    <button class="btn btn--br btn--pwa">
+    </button>
+  </div>
+
+</div>
+
+<script src='js/three.min.js'></script>
+<script src="js/index.js"></script>
+</body>
+</html>

InfoGenie-frontend/public/smallgame/h5cube/修改说明.md

@@ -0,0 +1,24 @@
+# 源码修改说明
+
+这里记录除了汉化之外的代码修改
+
+## [index.html](index.html)
+
+- 2 `en` => `zh`
+- 21 `THE` => `魔方`
+- 22 `CUBE` => `游戏`
+- 31 `Complete` => `完成`
+- 35 `Best Time` => `最佳时间`
+- 40 `Flip Type` => `翻转类型`
+- 40 `Swift ,Smooth,Bounce` => `快速,平滑,弹跳`
+- 41 `Scramble Length` => `打乱步数`
+- 42 `Camera Angle` => `摄像机角度`
+- 42 `Ortographic,Perspective` => `正交,透视`
+- 43 `Color Scheme` => `配色方案`
+- 43 `Cube,Erno,Dust,Camo,Rain` => `经典,埃尔诺,尘埃,迷彩,彩虹`
+- 48 `Total solves` => `总解决次数`
+- 51 `Best time` => `最佳时间`
+- 54 `Worst time` => `最差时间`
+- 57 `Average of 5` => `5次平均`
+- 60 `Average of 12` => `12次平均`
+- 63 `Average of 25` => `25次平均`