Upload From local development env

static/particle.js

 var back = document.getElementById("back")
-var pixaldata = [] //定义数组存放每个span的信息
-var pixallife = 150 //设置每个粒子的生命周期
-window.addEventListener("mousemove", function (evt) { //当鼠标移动时创建粒子
-    var span = document.createElement("span") //新建span作为粒子
-    span.className = "pixal" //使用pixal作为class设置
-    back.appendChild(span) //将span作为子元素添加至#back层
-    pixaldata.push({ //插入对应的span信息
-        age: 0, //初始生命值
+var pixaldata = []
+var pixallife = 300
+window.addEventListener("mousemove", function (evt) {
+    var span = document.createElement("span")
+    span.className = "pixal"
+    back.appendChild(span)
+    pixaldata.push({
+        age: 0,
         color: "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) +"," + parseInt(Math.random() * 255)+ ")", //粒子颜色
-        vx: Math.random()*0.5, //x轴位移速度
-        vy: Math.random()*0.75, //y轴位移速度，高于x轴以便使粒子移动方向更偏向下方
-        sx: evt.x, //根据鼠标坐标设置粒子的起始坐标
+        vx: Math.random()*0.5,
+        vy: Math.random()*0.75,
+        sx: evt.x,
         sy: evt.y
     })
-
 })
-function draw() { //绘制粒子
+function draw() {
     for (var i = 0; i < pixaldata.length; i++) {
-        pixal = pixaldata[i] //指定当前粒子属性
-        children = back.children[i] //指定当前子元素
-        pixal.age++ //增加生命值
-        pixal.sx += pixal.vx * 2 //设置位移距离
+        pixal = pixaldata[i]
+        children = back.children[i]
+        pixal.age++
+        pixal.sx += pixal.vx * 2
         pixal.sy += pixal.vy * 2
-        children.style.background = pixal.color //设置背景颜色
-        children.style.left = pixal.sx + "px" //根据位移值设置坐标
+        children.style.background = pixal.color
+        children.style.left = pixal.sx + "px"
         children.style.top = pixal.sy + "px"
-        if (pixal.age >= pixallife) { //判断生命值是否超过生命周期
-            pixaldata.splice(i, 1) //删除数组元素
-            back.removeChild(back.childNodes[i]) //删除子元素
+        if (pixal.age >= pixallife) {
+            pixaldata.splice(i, 1)
+            back.removeChild(back.childNodes[i])
         }
-        
     }
 }
 setInterval(draw, 1)
\ No newline at end of file

wiki/layout.html

@@ -7,7 +7,7 @@
     <link rel="shortcut icon" href="https://static.igem.wiki/common/icons/favicons/igem-2022.svg"/>
     <link rel="license" href="https://creativecommons.org/licenses/by/4.0/"/>
 
-    <script type="text/javascript" src="{{ url_for('static', filename = 'particle.js') }}"></script>
+    <script src="{{ url_for('static', filename = 'particle.js') }}"></script>
 
     <!-- Bootstrap CSS -->
     <link href="{{ url_for('static', filename = 'bootstrap.min.css') }}" rel="stylesheet">

wiki/pages/index.html

@@ -6,9 +6,12 @@
 {% block page_content %}
 
 <style type="text/css">
+	main{
+		align-self: center;
+	}
 	.firstPage{
-	    height: 100vh;
-	    width: 100vw;
+	    height: 100%;
+	    width: 100%;
 		position: sticky;
 		scroll-snap-align: start;
 	    scroll-snap-type: y mandatory;