0

.idea/.gitignore

@@ -0,0 +1,8 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/A_personal_front-end_page.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,16 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="lay-affix" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.12 (doc)" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.12 (doc)" project-jdk-type="Python SDK" />
+  <component name="PyPackaging">
+    <option name="earlyReleasesAsUpgrades" value="true" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/A_personal_front-end_page.iml" filepath="$PROJECT_DIR$/.idea/A_personal_front-end_page.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

README.md

@@ -0,0 +1,134 @@
+# ZYYO主页php后台版本已经上线
+售价20元
+包含对图标,项目,分类,主题样式,标签,描述,左侧信息的增删改查
+
+方便的编辑名称,图标,点击.js事件等等
+
+可以控制贪吃蛇,侧边栏,技能的开关
+
+可以在后台切换多主题,方便的对多主题进行切换,对主题所有细节进行修改
+
+
+演示站:zyyo.cc
+
+后台:zyyo.cc/admin
+账号admin
+密码123456
+有需要添加QQ裙:560938976
+
+
+
+
+
+
+
+多主题优雅个人主页
+后续计划增加主页时钟,主页音乐播放器
+增加php管理后台
+# 1.4 最新更新
+把所有图片全部改为字体图标
+去除鼠标样式
+优化细节
+修改所有路径为相对路径
+修复其他问题
+# 1.3最新更新
+优化加载动画
+增加点击q弹动画
+增加5套亮色主题,且通用css变量实现,完全取消主题切换对js的依赖.新增主题只需要在/static/root.css修改
+去除前台切换多主题,只可切换暗夜模式
+增加模糊,有背景整体模糊和卡片模糊
+卡片半透明模糊或者背景模糊二选一
+增加自定义功能
+优化细节
+优化动效,去除无用效果
+电脑端改为一行4个
+手机端有一行两个和一行一个
+# 1.2
+新增侧边栏并且支持移动端弹出
+去除白色主题
+优化动效,优化卡顿
+# 1.0
+无侧边栏白天黑夜切换
+三套主题
+前台一键切换
+# 最新版图片效果
+
+![1.png][1]
+![2.png][2]
+![3.png][3]
+![4.png][4]
+![5.png][5]
+![6.png][6]
+![7.png][7]
+# 使用
+
+下载解压即可访问
+/static/root.css主题文件
+/static/style.css样式文件
+在此可以修改各种字体
+/static/img/favicon.ico网页ico和主页头像
+/static/script.js js文件
+
+
+
+# 缘由
+
+受到xhofe和ddiu个人主页的灵感启发
+
+感谢这二位大佬
+
+决定写款主页练手
+
+初个版本花了几个小时,页面并不复杂,但是在后续我花费了很多时间去优化这个主页,因为我有非常严重的强迫证,非常抓细节
+
+我真的为了这个主页的优化后续付出了非常多的心力,请还不要攻击,喜欢可以赞助,不喜欢可以走开
+
+# 特色
+
+具有白天和黑夜模式
+
+白天模式有5套精美主题
+
+模糊方式有背景整体模糊和卡片模糊,可以通过css切换主题
+
+加了数百个精美动画-页面效果,但是又杜绝花里胡哨,一切只为优雅
+
+原生html,css,js，未使用任何框架和插件,问就是不会
+
+github:https://github.com/ZYYO666/homepage-1.0
+强烈推荐,方便我在群里吹牛
+添加QQ裙下载:560938976
+
+演示站:https://zyyo.net
+
+
+
+
+#技术栈
+
+html
+css
+js
+
+# 鸣谢
+
+iconfont图标
+Pacifico-Regular字体
+Ubuntu-Regular字体
+
+# 备注
+
+页面图标都是svg,可也自己找然后切换
+
+字体目前最新版是鸿蒙字体,可以自己设置
+
+
+
+  
+  [1]: https://zyyo.net/img/1.jpg?a
+  [2]: https://zyyo.net/img/2.jpg?a
+  [3]: https://zyyo.net/img/3.jpg?a
+  [4]: https://zyyo.net/img/4.jpg?a
+  [5]: https://zyyo.net/img/5.jpg?a
+  [6]: https://zyyo.net/img/6.jpg?a
+  [7]: https://zyyo.net/img/7.jpg?a

index.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html class="zyyo.net">
+
+<head class="zyyo.net">
+
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>
+		Zyyo </title>
+	<link rel="icon" href="static/img/favicon.ico">
+	<meta name="description" content="整天半吊子和不学无术的坏孩子,梦想成为庄稼地里的读书人.....">
+	<meta name="keywords" content="zyyo,张扬YO,ZYYO,张扬主页,ZYYO引导页,zhangyang">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" href="./static/css/style.css">
+	<link rel="stylesheet" href="./static/css/root.css">
+
+</head>
+
+<body>
+	<div id="zyyo-loading">
+		<div id="zyyo-loading-center">
+		</div>
+	</div>
+	<div class="zyyo-filter"></div>
+	<div class="zyyo-main">
+		<div class="zyyo-left">
+			<div class="logo" style="background-image: url(static/img/logo.png);">
+				<img style="position: absolute;top:-15%;left:-10%;width: 120%; aspect-ratio: 1/1;"
+					src="static/img/logokuang.png">
+			</div>
+			<div class="left-div left-des">
+				<div class="left-des-item"><svg t="1705773709627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1478"><path d="M512 249.976471c-99.388235 0-180.705882 81.317647-180.705882 180.705882s81.317647 180.705882 180.705882 180.705882 180.705882-81.317647 180.705882-180.705882-81.317647-180.705882-180.705882-180.705882z m0 301.17647c-66.258824 0-120.470588-54.211765-120.470588-120.470588s54.211765-120.470588 120.470588-120.470588 120.470588 54.211765 120.470588 120.470588-54.211765 120.470588-120.470588 120.470588z" p-id="1479"></path><path d="M512 39.152941c-216.847059 0-391.529412 174.682353-391.529412 391.529412 0 349.364706 391.529412 572.235294 391.529412 572.235294s391.529412-222.870588 391.529412-572.235294c0-216.847059-174.682353-391.529412-391.529412-391.529412z m0 891.482353C424.658824 873.411765 180.705882 686.682353 180.705882 430.682353c0-183.717647 147.576471-331.294118 331.294118-331.294118s331.294118 147.576471 331.294118 331.294118c0 256-243.952941 442.729412-331.294118 499.952941z" p-id="1480"></path></svg>China-Henan
+				</div>
+				<div class="left-des-item"><svg t="1705773906032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2474"><path d="M729.6 234.666667H294.4V157.866667a51.2 51.2 0 0 1 51.2-51.2h332.8a51.2 51.2 0 0 1 51.2 51.2v76.8z m179.2 51.2a51.2 51.2 0 0 1 51.2 51.2v512a51.2 51.2 0 0 1-51.2 51.2H115.2a51.2 51.2 0 0 1-51.2-51.2v-512a51.2 51.2 0 0 1 51.2-51.2h793.557333z m-768 172.032c0 16.384 13.312 29.696 29.696 29.696h683.008a29.696 29.696 0 1 0 0-59.392H170.410667a29.696 29.696 0 0 0-29.696 29.696z m252.416 118.784c0 16.384 13.312 29.696 29.696 29.696h178.176a29.696 29.696 0 1 0 0-59.392H422.912a29.738667 29.738667 0 0 0-29.696 29.696z" p-id="2475"></path></svg>Sias</div>
+			</div>
+			<div class="left-div left-tag">
+				<div class="left-tag-item">网瘾
+				</div>
+				<div class="left-tag-item">小学生
+				</div>
+				<div class="left-tag-item">大一
+				</div>
+				<div class="left-tag-item">网页
+				</div>
+				<div class="left-tag-item">linux
+				</div>
+				<div class="left-tag-item">跑者
+				</div>
+				<div class="left-tag-item">前端
+				</div>
+				<div class="left-tag-item">骑行</div>
+			</div>
+			<div class="left-div left-time">
+				<ul id="line">
+					<li>
+						<div class="focus"></div>
+						<div>敬请期待
+						</div>
+						<div>2024.1</div>
+					</li>
+					<li>
+						<div class="focus"></div>
+						<div>ICP备案成功
+						</div>
+						<div>2023.8</div>
+					</li>
+					<li>
+						<div class="focus"></div>
+						<div>注册域名zyyo.net
+						</div>
+						<div>2023.3</div>
+					</li>
+					<li>
+						<div class="focus"></div>
+						<div>出来后洗心革面
+						</div>
+						<div>2021.2</div>
+					</li>
+					<li>
+						<div class="focus"></div>
+						<div>...
+						</div>
+						<div>...</div>
+					</li>
+					<li>
+						<div class="focus"></div>
+						<div>搭建第一个网站</div>
+						<div>2018.1</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="zyyo-right">
+			<header>
+				<div class="index-logo" style="background-image: url(static/img/logo.png);">
+					<img style="position: absolute;top:-15%;left:-10%;width: 120%; aspect-ratio: 1/1;"
+						src="static/img/logokuang.png">
+				</div>
+				<div class="welcome">
+					Hello I' m <span class="gradientText">
+						Zyyo </span>
+				</div>
+				<div class="description">👦 <span class="purpleText">Full Stack</span> Developer
+				</div>
+				<div class="description">📝 The only way to do <span class="purpleText textBackground">great</span> is
+					to <span class="purpleText textBackground">love</span> what you do. </div>
+
+				<div class="iconContainer">
+					<a class="iconItem" onclick="" href="https://github.com/ZYYO666">
+						<svg t="1704870335945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2487">
+                            <path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"  p-id="2488"></path>
+                        </svg>
+						<div class="iconTip">Github</div>
+					</a><a class="iconItem" onclick="" href="mailto:i@zyyo.net">
+						<svg t="1704870588438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3174" >
+                            <path d="M926.47619 355.644952V780.190476a73.142857 73.142857 0 0 1-73.142857 73.142857H170.666667a73.142857 73.142857 0 0 1-73.142857-73.142857V355.644952l304.103619 257.828572a170.666667 170.666667 0 0 0 220.745142 0L926.47619 355.644952zM853.333333 170.666667a74.044952 74.044952 0 0 1 26.087619 4.778666 72.704 72.704 0 0 1 30.622477 22.186667 73.508571 73.508571 0 0 1 10.678857 17.67619c3.169524 7.509333 5.12 15.652571 5.607619 24.210286L926.47619 243.809524v24.380952L559.469714 581.241905a73.142857 73.142857 0 0 1-91.306666 2.901333l-3.632762-2.925714L97.52381 268.190476v-24.380952a72.899048 72.899048 0 0 1 40.155428-65.292191A72.97219 72.97219 0 0 1 170.666667 170.666667h682.666666z"  p-id="3175"></path>
+                        </svg>
+						<div class="iconTip">Mail</div>
+					</a><a class="iconItem" onclick="pop('./static/img/wxzsm.jpg')" href="javascript:void(0)">
+						<svg t="1705247464964" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4987" >
+                            <path d="M995.575172 725.451034c-12.358621-26.835862-38.488276-64.794483-92.689655-94.27862-62.146207-33.721379-136.297931-40.96-208.860689-20.303448l-99.928276 28.424827-279.304828-126.057931H22.775172v489.401379h509.704828l432.375172-195.266207c15.006897-6.708966 26.835862-19.42069 32.662069-34.957241 5.649655-15.36 4.943448-31.955862-1.942069-46.962759z m-482.162758 188.910345H111.051034V601.688276h184.673104l166.664828 75.387586-3.354483 0.882759h-170.372414v88.275862H471.393103l246.819311-70.267586c49.434483-14.124138 101.517241-9.357241 142.653793 12.888275 18.184828 9.886897 30.72 20.833103 39.371034 30.896552l-386.824827 174.609655z"  p-id="4988"></path>
+                            <path d="M695.437241 163.486897l58.615173-142.30069h-397.24138l66.736552 143.36c-121.82069 53.142069-207.095172 174.433103-207.095172 315.674483 0 28.601379 3.531034 57.202759 10.593103 84.744827l85.627586-21.715862c-5.12-20.48-7.768276-41.666207-7.768275-63.028965 0-141.241379 114.758621-256 256-256s256 114.758621 256 256c0 51.023448-14.830345 100.104828-43.078621 142.300689l73.268965 49.08138c37.958621-56.673103 58.085517-122.88 58.085518-191.382069-0.176552-141.947586-86.686897-264.121379-209.743449-316.733793zM467.508966 91.983448h180.965517l-21.009655 50.846897a348.16 348.16 0 0 0-66.913104-6.708966c-23.834483 0-46.962759 2.471724-69.384827 7.062069l-23.657931-51.2z"  p-id="4989"></path>
+                            <path d="M683.431724 427.431724v-70.62069h-38.311724l30.190345-30.190344-49.964138-49.964138-62.49931 62.49931h-6.002759L494.344828 276.656552l-49.787587 49.964138 30.013793 30.190344h-38.311724v70.62069h88.275862v35.310345h-88.275862v70.62069h88.275862v52.965517h70.62069v-52.965517h88.275862v-70.62069h-88.275862v-35.310345z"  p-id="4990"></path>
+                        </svg>
+						<div class="iconTip">赞助</div>
+					</a><a class="iconItem" onclick="pop('./static/img/wx.jpg')" href="javascript:void(0)">
+						<svg t="1712319361023" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1861" ><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" p-id="1862"></path></svg>
+						<div class="iconTip">微信</div>
+					</a>  <a class="switch" href="javascript:void(0)">
+						<div class="onoffswitch">
+							<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
+								checked>
+							<label class="onoffswitch-label" for="myonoffswitch">
+								<span class="onoffswitch-inner"></span>
+								<span class="onoffswitch-switch"></span>
+							</label>
+						</div>
+					</a>
+				</div>
+
+				<div class="tanChiShe">
+					<img id="tanChiShe" src="static/svg/snake-Light.svg" alt="">
+				</div>
+			</header>
+
+
+
+
+
+
+			<content>
+				<div class="title"><svg t="1705257422086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1891" >
+                        <path d="M629.333333 202.666667v213.333333h277.333334v448h-512v-213.333333h-277.333334v-448h512z m213.333334 277.333333h-213.333334v170.666667h-170.666666v149.333333h384v-320z m-277.333334-213.333333h-384v320h213.333334v-170.666667h170.666666v-149.333333z m0 213.333333h-106.666666v106.666667h106.666666v-106.666667z"  p-id="1892"></path>
+                    </svg>site </div>
+				<div class="projectList"><a class="projectItem a" target="_blank" href="https://blog.zyyo.net">
+						<div class="projectItemLeft">
+							<h1>博客</h1>
+							<p>记录摆烂日常</p>
+						</div>
+						<div class="projectItemRight">
+							<img src="static/img/i1.png" alt="">
+						</div>
+
+					</a><a class="projectItem a" target="_blank" href="https://i.zyyo.cc">
+						<div class="projectItemLeft">
+							<h1>云盘</h1>
+							<p>存储收集文件</p>
+						</div>
+						<div class="projectItemRight">
+							<img src="static/img/i2.png" alt="">
+						</div>
+
+					</a><a class="projectItem a" target="_blank" href="https://zyyo.cc">
+						<div class="projectItemLeft">
+							<h1>实验室</h1>
+							<p>收集有趣html作品</p>
+						</div>
+						<div class="projectItemRight">
+							<img src="static/img/i3.png" alt="">
+						</div>
+
+					</a></div>
+				<div class="title"><svg t="1705257422086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1891" >
+                        <path d="M629.333333 202.666667v213.333333h277.333334v448h-512v-213.333333h-277.333334v-448h512z m213.333334 277.333333h-213.333334v170.666667h-170.666666v149.333333h384v-320z m-277.333334-213.333333h-384v320h213.333334v-170.666667h170.666666v-149.333333z m0 213.333333h-106.666666v106.666667h106.666666v-106.666667z"  p-id="1892"></path>
+                    </svg>project </div>
+				<div class="projectList"><a class="projectItem b" target="_blank"
+						href="https://github.com/ZYYO666/homepage">
+						<div class="projectItemLeft">
+							<h1>ZYYO主页</h1>
+							<p>本站同款</p>
+						</div>
+						<div class="projectItemRight">
+							<img src="static/img/i5.png" alt="">
+						</div>
+
+					</a><a class="projectItem b" target="_blank" href="https://github.com/ZYYO666/ZYYO">
+						<div class="projectItemLeft">
+							<h1>ZYYO主题</h1>
+							<p>一款ty主题</p>
+						</div>
+						<div class="projectItemRight">
+							<img src="static/img/i6.png" alt="">
+						</div>
+
+					</a></div>
+				<div class="title">
+					<svg t="1705257823317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7833" >
+                        <path d="M395.765333 586.570667h-171.733333c-22.421333 0-37.888-22.442667-29.909333-43.381334L364.768 95.274667A32 32 0 0 1 394.666667 74.666667h287.957333c22.72 0 38.208 23.018667 29.632 44.064l-99.36 243.882666h187.050667c27.509333 0 42.186667 32.426667 24.042666 53.098667l-458.602666 522.56c-22.293333 25.408-63.626667 3.392-54.976-29.28l85.354666-322.421333zM416.714667 138.666667L270.453333 522.581333h166.869334a32 32 0 0 1 30.933333 40.181334l-61.130667 230.954666 322.176-367.114666H565.312c-22.72 0-38.208-23.018667-29.632-44.064l99.36-243.882667H416.714667z"  p-id="7834"></path>
+                    </svg>
+					skills
+				</div>
+				<div class="skill">
+					<img id="skillPc" src="static/svg/skillPc.svg" alt="" srcset="">
+					<img id="skillWap" src="static/svg/skillWap.svg" alt="" srcset="">
+				</div>
+			</content>
+		</div>
+	</div>
+	<footer>
+		Zyyo © 2024 |
+		<a href="https://beian.miit.gov.cn/">
+			豫ICP备2023015852号-1 </a>
+	</footer>
+	<div class="tc">
+		<div onclick="" class="tc-main">
+			<img class="tc-img" src="" alt="" srcset="">
+		</div>
+
+	</div>
+</body>
+<script src="./static/js/script.js"> </script>
+
+
+
+
+<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
+<script>LA.init({ id: "KFqltKSkJgQTGD9l", ck: "KFqltKSkJgQTGD9l" })</script>
+
+</html>

static/css/root.css

@@ -0,0 +1,152 @@
+/*
+--svgcolor svg图标的颜色
+--main-bg-color主页背景
+--main-text-color文本颜色
+--gradient标题渐变颜色
+
+--purple-text-color描述紫色文本颜色
+--text-bg-color描述紫色文本背景颜色
+--item-bg-color项目背景颜色
+--item-hover-color项目鼠标移入颜色
+--item-left-title-color项目标题颜色
+--item-left-text-color项目描述颜色
+--footer-text-color底部文本颜色
+--left-tag-item左侧标签颜色
+--card-filter卡片模糊的数值
+--back-filter背景模糊的数值
+--back-filter-color全局阴影遮罩
+
+*/
+/*卡片模糊的数值非常吃性能,背景模糊的数值可以模糊也可以不模糊
+
+0为不模糊,数值越大模糊程度越高
+
+这两个任选其一进行模糊
+
+一个有数字另一个建议为0
+
+
+内置4套白天主题修改办法
+
+
+
+每套主题的结构都为html{
+    
+}
+
+只有最下面的会生效,也就是将你要设置的主题剪切到最下面
+*/
+
+
+
+
+.index-logo{
+    display: none;
+}
+
+
+
+/*非常吃性能,低配手机会卡顿*/
+/*卡片模糊背景＋黑色透明卡片+白色svg**/
+html {
+    --name: 主题1;
+    --main_bg_color: url(../img/background.jpg);
+    --main_text_color: #eeeeee;
+    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
+    --purple_text_color: #747bff;
+    --text_bg_color: #00000040;
+    --item_bg_color: #00000038;
+    --item_hover_color: #33333338;
+    --item_left_title_color: #ffffff;
+    --item_left_text_color: #ffffff;
+    --footer_text_color: #ffffff;
+    --left_tag_item: rgb(27 42 57 / 20%);
+    --card_filter: 15px;
+    --back_filter: 0px;
+    --back_filter_color: #00000030;
+     --fill:#ffffff;
+}
+
+html {
+
+    /*图片模糊背景＋白色透明卡片+黑色svg*/
+    --name: 主题2;
+    --main_bg_color: url(../img/background.jpg);
+    --main_text_color: #000000;
+    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
+    --purple_text_color: #747bff;
+    --text_bg_color: rgb(121 163 231);
+    --item_bg_color: rgba(249, 250, 251, 0.42);
+    --item_hover_color: rgba(244, 245, 246, 0.8);
+    --item_left_title_color: #000000;
+    --item_left_text_color: #494949;
+    --footer_text_color: #ffffff;
+    --left_tag_item: #c7e1fa;
+    --card_filter: 0px;
+    --back_filter: 20px;
+    --back_filter_color: #00000030;
+     --fill:#000000;
+}
+
+html {
+    /*蓝色渐变+黑色svg**/
+
+    --name: 主题3;
+    --main_bg_color: linear-gradient(50deg, #a2d1ff, #ffffff);
+    --main_text_color: #000000;
+    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
+    --purple_text_color: #747bff;
+    --text_bg_color: rgb(196 217 251);
+    --item_bg_color: rgba(249, 250, 251, 0.5);
+    --item_hover_color: rgba(244, 245, 246, 0.8);
+    --item_left_title_color: #000000;
+    --item_left_text_color: #494949;
+    --footer_text_color: #222222;
+    --left_tag_item: linear-gradient(50deg, #a2d1ff, #ffffff);
+    --card_filter: 0px;
+    --back_filter: 0px;
+    --back_filter_color: #00000000;
+     --fill:#000000;
+}
+
+
+
+html {
+    /*白色简约+黑色svg**/
+    --name: 主题4;
+    --main_bg_color: #ffffff;
+    --main_text_color: #000000;
+    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
+    --purple_text_color: #747bff;
+    --text_bg_color: rgb(240 243 247);
+    --item_bg_color: rgb(247 247 247);
+    --item_hover_color: rgba(244, 245, 246, 0.5);
+    --item_left_title_color: #000000;
+    --item_left_text_color: #494949;
+    --footer_text_color: #222222;
+    --left_tag_item: #ffffff;
+    --card_filter: 0px;
+    --back_filter: 0px;
+    --back_filter_color: #00000000;
+     --fill:#000000;
+}
+
+html {
+    /*图片模糊背景＋黑色透明卡片+白色svg**/
+    --name: 主题5;
+    --main_bg_color: url(../img/background.jpg);
+    --main_text_color: #eeeeee;
+    --gradient: linear-gradient(120deg, #bd34fe, #e0321b 30%, #41d1ff 60%);
+    --purple_text_color: #747bff;
+    --text_bg_color: #00000040;
+    --item_bg_color: #00000038;
+    --item_hover_color: #33333338;
+    --item_left_title_color: #ffffff;
+    --item_left_text_color: #ffffff;
+    --footer_text_color: #ffffff;
+    --left_tag_item: rgb(27 42 57 / 20%);
+    --card_filter: 0px;
+    --back_filter: 19px;
+    --back_filter_color: #00000030;
+    --fill:#ffffff;
+}

static/css/style.css

@@ -0,0 +1,860 @@
+@font-face {
+    font-family: "a";
+    /*中文字体*/
+    src: url();
+    font-display: swap;
+}
+
+
+@font-face {
+    font-family: "b";
+
+    src: url(../fonts/Ubuntu-Regular.ttf);
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "title";
+    /*英文字体*/
+    src: url(../fonts/Pacifico-Regular.ttf);
+    font-display: swap;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    user-select: none;
+    transition: background-color 0.2s ease;
+}
+
+a:hover,
+a:link,
+a:visited,
+a:active,
+a:focus {
+    text-decoration: none;
+    outline: none;
+    border: none;
+    color: inherit;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+
+/* 设置滚动条样式 */
+::-webkit-scrollbar {
+    width: 0px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--main_text_color, #000000);
+    border-radius: 8px;
+    height: 20%;
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--main_bg_color, linear-gradient(50deg, #a2d0ff, #ffffff));
+}
+
+
+
+html[data-theme="Dark"] {
+    --main_bg_color: rgb(0, 0, 0);
+    --main_text_color: #fff;
+    --gradient:linear-gradient(120deg, rgb(133, 62, 255), #f76cc6 30%, rgb(255, 255, 255) 60%);
+    --purple_text_color: #747bff;
+    --text_bg_color: rgb(26, 4, 48);
+    --item_bg_color: rgb(19, 20, 24);
+    --item_hover_color: rgb(19, 23, 27);
+    --item_left_title_color: rgb(255, 255, 255);
+    --item_left_text_color: rgb(142, 142, 142);
+    --footer_text_color: #646464;
+    --left_tag_item: linear-gradient(50deg, #1f2327, #000000);
+    --card_filter: 0px;
+    --back_filter: 0px;
+    --back_filter_color: #00000000;
+    --fill:#ffffff;
+}
+
+
+
+
+
+
+body {
+    display: flex;
+    height: 100%;
+    min-height: 100vh;
+    width: 100%;
+    position: relative;
+    font-family: "b",  "a", sans-serif;
+    background: var(--main_bg_color);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    transition: color 0.1s ease;
+    justify-content: center;
+    color: var(--main_text_color);
+
+}
+
+#zyyo-loading {
+    background: radial-gradient(white, #d8eaff);
+    background-size: 100%;
+    background-position: center;
+
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    z-index: 999999;
+    margin-top: 0px;
+    top: 0px;
+    pointer-events: none;
+    opacity: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+
+#zyyo-loading-center {
+    height: 150px;
+    width: 150px;
+    position: relative;
+    border-radius: 50%;
+    background: #472eff;
+
+    animation: zoom 1s linear infinite;
+}
+
+@keyframes zoom {
+    0% {
+        transform: scale(0);
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+
+
+
+.zyyo-filter {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    backdrop-filter: blur(var(--back_filter));
+     -webkit-backdrop-filter: blur(var(--back-filter));
+    z-index: -99999999;
+    background: var(--back_filter_color);
+}
+
+.zyyo-main {
+
+    width: 100%;
+    transition: transform 0.5s ease;
+    max-width: 1150px;
+    position: relative;
+    flex-direction: row;
+}
+
+.zyyo-left {
+    overflow-y: scroll;
+    width: 230px;
+    height: 100vh;
+    display: flex;
+    padding: 0 15px;
+    position: fixed;
+    align-items: center;
+    flex-direction: column;
+}
+
+
+.zyyo-left::-webkit-scrollbar {
+    display: none;
+}
+
+
+.logo {
+    flex-shrink: 0;
+    width: 90%;
+    position: relative;
+    aspect-ratio: 1/1;
+    margin-top: 50px;
+    background-size: cover;
+    border-radius: 50%;
+}
+
+
+
+.left-div {
+    flex-shrink: 0;
+    width: 100%;
+    border-radius: 13px;
+    margin-top: 15px;
+    padding: 20px;
+    backdrop-filter: blur(var(--card_filter));
+    background: var(--item_bg_color);
+}
+
+.left-des {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.left-des-item {
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+    font-size: 15px;
+    margin-bottom: 5px;
+    overflow: hidden;
+}
+
+.left-des-item i,.left-des-item svg{
+    width: 16px;
+    height: 16px;
+    fill:var(--fill);
+   font-size: 18px;
+    margin-right: 10px;
+}
+.left-tag {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 14px;
+}
+
+.left-tag-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 28px;
+    margin: 0px 5px 5px 0;
+    padding: 10px;
+    font-size: 13px;
+    border-radius: 10px;
+    background: var(--left_tag_item);
+}
+
+#line {
+    width: 100%;
+    height: 200px;
+    font-size: 13px;
+    padding-left: 8px;
+    scroll-snap-type: y mandatory;
+    overflow-y: scroll;
+}
+
+#line li {
+    list-style: none;
+    position: relative;
+    padding: 15px 0px 0px 15px;
+    border-left: 2px solid #d5d5d5;
+    border-radius: 0;
+    scroll-snap-align: end;
+    color: var(--main_text_color);
+}
+
+
+
+.focus {
+    width: 8px;
+    height: 8px;
+    border-radius: 22px;
+    background-color: rgb(255 255 255);
+    border: 2px solid #fff;
+    position: absolute;
+    left: -5px;
+    top: 50%;
+}
+
+#line li:first-child .focus:first-child {
+    background-color: #aaffcd;
+    animation: focus 1.8s ease infinite;
+}
+
+#line::-webkit-scrollbar {
+    display: none;
+}
+
+
+
+.zyyo-right {
+    width: calc(100% - 230px);
+    display: flex;
+    padding: 24px;
+    position: relative;
+    float: right;
+    padding-bottom: 50px;
+    flex-direction: column;
+}
+
+.welcome {
+
+    font-size: 55px;
+    font-weight: 800;
+    margin: 20px 0;
+}
+
+.index-logo {
+    flex-shrink: 0;
+    width: 45%;
+    margin-top: 30px;
+    position: relative;
+    aspect-ratio: 1/1;
+    background-size: cover;
+    border-radius: 50%;
+}
+
+.description {
+
+    font-size: 20px;
+    margin-top: 7px;
+}
+
+
+
+.gradientText {
+
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 200%;
+    background-position: 0%;
+    font-family: "title";
+    animation: backgroundSizeAnimation 10s ease-in-out infinite;
+      background-image:  var(--gradient);
+}
+
+@keyframes backgroundSizeAnimation {
+    0% {
+        background-position: 100%;
+    }
+
+    25% {
+        background-position: 50%;
+    }
+
+    50% {
+        background-position: 0%;
+    }
+
+    75% {
+        background-position: 50%;
+    }
+
+    100% {
+        background-position: 100%;
+    }
+
+}
+
+.purpleText {
+    color: var(--purple_text_color);
+    font-weight: 800;
+}
+
+.textBackground {
+    font-weight: 800;
+    background: var(--text_bg_color);
+    border-radius: 5px;
+    font-size: 17px;
+    padding: 2px 4px;
+}
+
+.iconContainer {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    overflow-x: scroll;
+    margin-top: 20px;
+
+}
+
+.iconContainer::-webkit-scrollbar {
+    display: none;
+}
+
+
+
+.iconItem {
+    width: 49px;
+    height: 43px;
+    box-sizing: border-box;
+    border-radius: 7px;
+    display: flex;
+    margin-left: 10px;
+
+    backdrop-filter: blur(var(--card_filter));
+    background: var(--item_bg_color);
+    align-items: center;
+    justify-content: center;
+    transition: width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
+    flex-shrink: 0;
+}
+.iconItem i,.iconItem svg{
+    width: 22px;
+    height: 22px;
+    fill:var(--fill);
+    font-size: 22px;
+     margin-right: 3px;
+}
+.switch {
+    width: 55px;
+    height: 43px;
+    box-sizing: border-box;
+    border-radius: 7px;
+    display: flex;
+    margin-left: 10px;
+    backdrop-filter: blur(var(--card_filter));
+    background: var(--item_bg_color);
+
+    align-items: center;
+    justify-content: center;
+    transition: width 1s ease, opacity 1s ease, transform 1s ease;
+    flex-shrink: 0;
+}
+
+.iconTip {
+    white-space: nowrap;
+    display: none;
+}
+
+
+
+
+
+.iconItem:hover {
+    width: 95px;
+    transform: translateY(-2px);
+    background: var(--item_hover_color);
+}
+
+
+.iconItem:hover .iconTip {
+    display: block;
+}
+
+.switch:hover {
+    width: 55px;
+    /* transform: translateY(-2px); */
+    background: var(--item_hover_color);
+}
+
+.tanChiShe {
+    width: 85%;
+}
+
+.tanChiShe img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.title {
+    display: flex;
+    align-items: center;
+    font-size: 26px;
+    font-weight: 800;
+    margin: 20px 0;
+    transition: transform 0.4s ease;
+}
+.title i ,.title svg{
+    margin-right: 8px;
+    height: 26px;
+    width: 26px;
+   fill:var(--fill);
+}
+.title:hover {
+    transform: translateY(-5px);
+}
+
+.projectList {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.projectItem {
+    margin: 7px;
+    display: flex;
+    background-color: var(--item_bg_color);
+    border-radius: 8px;
+    padding: 15px;
+    height: 95px;
+    width: calc(25% - 15px);
+    backdrop-filter: blur(var(--card_filter));
+    transition: opacity 0.3s ease, background-color 0.3s ease, border 0.3s ease, transform 0.2s ease;
+
+
+}
+
+.projectItem {
+    display: flex;
+    background-color: var(--item_bg_color);
+    border-radius: 8px;
+    padding: 15px;
+    height: 100px;
+    width: calc(25% - 15px);
+    backdrop-filter: blur(var(--card_filter));
+    transition: opacity 0.5s ease, background-color 0.2s ease, border 0.2s ease, transform 0.3s ease;
+
+}
+
+
+.projectItem:hover {
+    box-shadow: 0 8px 16px -4px #2c2d300c;
+    transform: translateY(-2px);
+
+}
+
+.projectItem.pressed {
+    transform: scale(0.9);
+    /* 缩小到原来的0.9倍 */
+    background-color: var(--item_hover_color);
+}
+
+.projectItem:hover .projectItemLeft {
+    width: 100%;
+}
+
+.projectItem:hover .projectItemRight {
+    width: 0%;
+}
+
+.projectItem:hover .projectItemRight img {
+    transform: rotate(40deg);
+}
+
+.projectItem:hover h1 {
+    font-size: 18px;
+}
+
+.projectItemLeft p {
+    font-size: 12px;
+    margin-top: 15px;
+    color: var(--item_left_text_color);
+}
+
+
+.projectItemLeft h1 {
+    font-weight: normal;
+    font-size: 16px;
+    margin: 0px;
+
+    transition: font-size 0.4s ease;
+    color: var(--item_left_title_color);
+}
+
+.projectItemLeft {
+    transition: width 0.4s ease;
+    height: 100%;
+    width: 80%;
+}
+
+
+.projectItemRight {
+    overflow: hidden;
+    transition: width 0.4s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20%;
+    height: 100%;
+}
+
+.projectItemRight img {
+
+    height: 39px;
+    width: 39px;
+
+}
+
+.skill {
+    padding: 25px;
+    width: 100%;
+}
+
+.skill img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.skill #skillWap {
+    display: none;
+}
+
+footer {
+    position: absolute;
+    padding: 10px;
+    text-align: center;
+    width: 100%;
+    backdrop-filter: blur(var(--card_filter));
+    background: var(--item_bg_color);
+    color: var(--footer_text_color);
+    font-size: 13px;
+    bottom: 0;
+}
+
+@media (min-width: 800px) {
+
+    .index-logo {
+        display: none;
+    }
+}
+
+@media (max-width: 1150px) {
+    .a {
+        width: calc(50% - 20px);
+    }
+.projectItem{
+    margin: 10px;
+}
+    .b {
+
+        width: calc(50% - 20px);
+
+
+    }
+}
+
+@media (max-width: 800px) {
+    .zyyo-left {
+        display: none;
+    }
+
+    .a .projectItemRight {
+        display: none;
+
+    }
+
+    .a .projectItemRight img {
+        display: none;
+
+    }
+
+    .a .projectItemLeft {
+        width: 100%;
+    }
+
+    .a {
+
+        width: calc(50% - 18px);
+  margin: 9px;
+
+    }
+
+    .b {
+        height: 110px;
+        margin: 8px 15px;
+        width: calc(100% - 30px);
+    }
+
+
+
+    .zyyo-right {
+        width: 100%;
+    }
+
+    .tanChiShe {
+        width: 100%;
+    }
+
+    .description {
+        font-size: 16px;
+    }
+
+    .welcome {
+        font-size: 48px;
+
+    }
+
+
+    .projectItemLeft p {
+        font-size: 13px;
+    }
+
+    .projectItemLeft h1 {
+
+        font-size: 18px;
+    }
+
+    .projectItem:hover h1 {
+
+        font-size: 20px;
+
+    }
+
+    .skill #skillWap {
+        display: block;
+    }
+
+    .skill #skillPc {
+        display: none;
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+}
+
+
+
+
+
+.tc {
+    position: fixed;
+    display: flex;
+    visibility: hidden;
+    width: 100vw;
+    height: 100vh;
+    backdrop-filter: blur(10px);
+    background: rgba(20, 20, 20, 0.5);
+    z-index: 99999;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.tc-main {
+    z-index: 100000;
+    width: 80%;
+    max-width: 300px;
+    min-height: 200px;
+    background-color: #ffffff;
+    border-radius: 15px;
+
+    display: flex;
+    transition: transform 0.2s linear;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    transform: translateY(50%) scale(0.7);
+
+}
+
+.tc-img {
+    width: 100%;
+    height: 100%;
+}
+
+.tc.active {
+    visibility: visible;
+}
+
+.tc-main.active {
+
+    transform: translateY(0) scale(1);
+
+}
+
+
+
+
+
+
+
+
+
+.onoffswitch {
+    position: relative;
+    width: 38px;
+    height: 20px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.onoffswitch-checkbox {
+    display: none;
+}
+
+.onoffswitch-label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    height: 100%;
+    border-radius: 50px;
+}
+
+.onoffswitch-inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 200%;
+    height: 100%;
+    margin-left: -100%;
+    transition: margin 0.2s ease-in 0s;
+}
+
+.onoffswitch-inner:before,
+.onoffswitch-inner:after {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: left;
+    width: 50%;
+    height: 100%;
+    padding: 0;
+    font-size: 12px;
+    color: white;
+    font-family: Trebuchet, Arial, sans-serif;
+    font-weight: bold;
+    box-sizing: border-box;
+}
+
+.onoffswitch-inner:before {
+    content: "";
+    background-color: rgb(110 110 110 / 50%);
+    color: #FFFFFF;
+    text-align: left;
+}
+
+.onoffswitch-inner:after {
+    content: "";
+    background-color: #272727;
+    color: #FAFAFA;
+    text-align: right;
+}
+
+.onoffswitch-switch {
+    display: block;
+    height: 70%;
+    aspect-ratio: 1/1;
+    background: #FFFFFF;
+    position: absolute;
+    top: 12.5%;
+    bottom: 12.5%;
+    right: 5px;
+
+    border-radius: 20px;
+    transition: right 0.2s ease-in 0s;
+}
+
+.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+}
+
+.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
+    right: 50%;
+}

static/js/script.js

@@ -0,0 +1,221 @@
+console.log('%cCopyright © 2024 zyyo.net',
+    'background-color: #ff00ff; color: white; font-size: 24px; font-weight: bold; padding: 10px;'
+);
+console.log('%c   /\\_/\\', 'color: #8B4513; font-size: 20px;');
+console.log('%c  ( o.o )', 'color: #8B4513; font-size: 20px;');
+console.log(' %c  > ^ <', 'color: #8B4513; font-size: 20px;');
+console.log('  %c /  ~ \\', 'color: #8B4513; font-size: 20px;');
+console.log('  %c/______\\', 'color: #8B4513; font-size: 20px;');
+
+document.addEventListener('contextmenu', function (event) {
+    event.preventDefault();
+});
+
+function handlePress(event) {
+    this.classList.add('pressed');
+}
+
+function handleRelease(event) {
+    this.classList.remove('pressed');
+}
+
+function handleCancel(event) {
+    this.classList.remove('pressed');
+}
+
+var buttons = document.querySelectorAll('.projectItem');
+buttons.forEach(function (button) {
+    button.addEventListener('mousedown', handlePress);
+    button.addEventListener('mouseup', handleRelease);
+    button.addEventListener('mouseleave', handleCancel);
+    button.addEventListener('touchstart', handlePress);
+    button.addEventListener('touchend', handleRelease);
+    button.addEventListener('touchcancel', handleCancel);
+});
+
+function toggleClass(selector, className) {
+    var elements = document.querySelectorAll(selector);
+    elements.forEach(function (element) {
+        element.classList.toggle(className);
+    });
+}
+
+function pop(imageURL) {
+    var tcMainElement = document.querySelector(".tc-img");
+    if (imageURL) {
+        tcMainElement.src = imageURL;
+    }
+    toggleClass(".tc-main", "active");
+    toggleClass(".tc", "active");
+}
+
+var tc = document.getElementsByClassName('tc');
+var tc_main = document.getElementsByClassName('tc-main');
+tc[0].addEventListener('click', function (event) {
+    pop();
+});
+tc_main[0].addEventListener('click', function (event) {
+    event.stopPropagation();
+});
+
+
+
+function setCookie(name, value, days) {
+    var expires = "";
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + value + expires + "; path=/";
+}
+
+function getCookie(name) {
+    var nameEQ = name + "=";
+    var cookies = document.cookie.split(';');
+    for (var i = 0; i < cookies.length; i++) {
+        var cookie = cookies[i];
+        while (cookie.charAt(0) == ' ') {
+            cookie = cookie.substring(1, cookie.length);
+        }
+        if (cookie.indexOf(nameEQ) == 0) {
+            return cookie.substring(nameEQ.length, cookie.length);
+        }
+    }
+    return null;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+document.addEventListener('DOMContentLoaded', function () {
+
+
+
+
+
+
+    var html = document.querySelector('html');
+    var themeState = getCookie("themeState") || "Light";
+    var tanChiShe = document.getElementById("tanChiShe");
+
+
+
+
+
+
+    function changeTheme(theme) {
+        tanChiShe.src = "./static/svg/snake-" + theme + ".svg";
+        html.dataset.theme = theme;
+        setCookie("themeState", theme, 365);
+        themeState = theme;
+    }
+
+
+
+
+
+
+
+    var Checkbox = document.getElementById('myonoffswitch')
+    Checkbox.addEventListener('change', function () {
+        if (themeState == "Dark") {
+            changeTheme("Light");
+        } else if (themeState == "Light") {
+            changeTheme("Dark");
+        } else {
+            changeTheme("Dark");
+        }
+    });
+
+
+
+    if (themeState == "Dark") {
+        Checkbox.checked = false;
+    }
+
+    changeTheme(themeState);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    var pageLoading = document.querySelector("#zyyo-loading");
+    setTimeout(function () {
+        pageLoading.style.opacity = '0';
+
+    }, 100);
+
+/*
+    var fpsElement = document.createElement('div');
+    fpsElement.id = 'fps';
+    fpsElement.style.zIndex = '10000';
+    fpsElement.style.position = 'fixed';
+    fpsElement.style.left = '0';
+    document.body.insertBefore(fpsElement, document.body.firstChild);
+
+    var showFPS = (function () {
+        var requestAnimationFrame = window.requestAnimationFrame ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame ||
+            window.oRequestAnimationFrame ||
+            window.msRequestAnimationFrame ||
+            function (callback) {
+                window.setTimeout(callback, 1000 / 60);
+            };
+
+        var fps = 0,
+            last = Date.now(),
+            offset, step, appendFps;
+
+        step = function () {
+            offset = Date.now() - last;
+            fps += 1;
+
+            if (offset >= 1000) {
+                last += offset;
+                appendFps(fps);
+                fps = 0;
+            }
+
+            requestAnimationFrame(step);
+        };
+
+        appendFps = function (fpsValue) {
+            fpsElement.textContent = 'FPS: ' + fpsValue;
+        };
+
+        step();
+    })();
+    
+    */
+    
+    
+    
+    
+    
+});
+