fix: 修复天气及壁纸 API 无法使用的问题

版本封存，即将使用 Vue 重构

.dockerignore

@@ -1,15 +0,0 @@
-node_modules
-npm-debug.log
-Dockerfile*
-docker-compose*
-.dockerignore
-.git
-.github
-.gitignore
-README.md
-LICENSE
-.vscode
-dist
-build
-images
-script

.env.example

@@ -1,51 +0,0 @@
-# 站点信息
-VITE_SITE_NAME = "無名の主页" # 名称
-VITE_SITE_ANTHOR = "無名" # 作者
-VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
-VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
-VITE_SITE_URL = "imsyy.top" # 站点地址
-VITE_SITE_LOGO = "/images/icon/favicon.ico" # 站点主图标
-VITE_SITE_MAIN_LOGO = "/images/icon/logo.png" # 主页图标
-VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png" # Apple 端图标
-
-# 简介文本
-VITE_DESC_HELLO = "Hello World !"
-VITE_DESC_TEXT = "一个建立于 21 世纪的小站，存活于互联网的边缘"
-VITE_DESC_HELLO_OTHER = "Oops !"
-VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关闭 ）"
-
-# 社交链接
-## 请在 src/assets/socialLinks.json 文件中配置
-
-# 网站链接
-## 请在 src/assets/siteLinks.json 文件中配置
-## 网站链接的图标名称可前往 https://www.xicons.org 自行挑选并在 src/components/Links/index.vue 中引入
-
-# 天气 Key
-## 请前往 高德开放平台注册 Web服务 Key
-## 请注意不是 Web端 (JS API)，免费申请，每日上限 5000 次
-## 此处提供的服务可能会超量从而无法访问，请自行申请！请自行申请！请自行申请！
-## 若此处设为空则调用 教书先生 API https://api.oioweb.cn/doc/weather/GetWeather
-VITE_WEATHER_KEY = ""
-
-# 建站日期
-## 若不需要，请设为空即可
-## 请按照 YYYY-MM-DD 格式填写或者仅填写年份 YYYY
-VITE_SITE_START = "2020-10-24"
-
-# ICP 备案号
-## 若不需要，请设为空即可
-VITE_SITE_ICP = "豫ICP备2022018134号-1"
-
-# 歌曲 API 地址
-## 请参照 https://github.com/xizeyoupan/Meting-API#deno-deploy 进行 API 服务部署
-## 此处提供的服务可能会超量从而无法访问，请自行部署
-## 若使用 QQ 音乐歌单，歌曲数量最好不要超出 50 首
-## 备用：https://api.wuenci.com/meting/api/
-VITE_SONG_API = "https://api-meting.imsyy.top/api"
-# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
-VITE_SONG_SERVER = "netease"
-# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
-VITE_SONG_TYPE = "playlist"
-# 播放 ID ( 若无需播放器，请设为空即可 )
-VITE_SONG_ID = "9379831714"

.eslintignore

@@ -1,3 +0,0 @@
-node_modules
-dist
-.gitignore

.eslintrc.json

@@ -1,35 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": ["eslint:recommended", "plugin:vue/vue3-essential"],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["vue"],
-  "rules": {
-    "vue/multi-word-component-names": "off"
-  },
-  "globals": {
-    "defineProps": true,
-    "defineEmits": true,
-    "withDefaults": true,
-    "h": true,
-    "vue": true,
-    "ref": true,
-    "reactive": true,
-    "computed": true,
-    "watch": true,
-    "provide": true,
-    "inject": true,
-    "defineComponent": true,
-    "onBeforeMount": true,
-    "onMounted": true,
-    "onBeforeUnmount": true,
-    "nextTick": true,
-    "ElMessage": true,
-    "$openList": true
-  }
-}

.github/ISSUE_TEMPLATE/bug-en.yml

@@ -1,22 +0,0 @@
-name: Encountering an Issue
-description: Please provide details about the issue you are encountering
-labels: [bug]
-body:
-  - type: input
-    id: site-url
-    validations:
-      required: true
-    attributes:
-      label: "Site URL"
-      placeholder: "Please provide the URL of the site where the issue occurred"
-  - type: input
-    id: problem
-    attributes:
-      label: "Description of the Issue"
-      description: "Include any error messages or screenshots if applicable"
-      placeholder: "Please describe the issue you are encountering"
-  - type: textarea
-    id: other
-    attributes:
-      label: "Additional Information"
-      description: "Is there anything else you would like to add?"

.github/ISSUE_TEMPLATE/bug.yml

@@ -1,22 +0,0 @@
-name: 遇到问题
-description: 请填写遇到的问题的详细信息
-labels: [bug]
-body:
-  - type: input
-    id: site-url
-    validations:
-      required: true
-    attributes:
-      label: "站点链接"
-      placeholder: "请填写你的站点链接"
-  - type: input
-    id: problem
-    attributes:
-      label: "问题描述"
-      description: "有错误的话请提供报错截图"
-      placeholder: "请详细描述一下遇到的问题"
-  - type: textarea
-    id: other
-    attributes:
-      label: "补充信息"
-      description: "还需要说些什么吗"

.github/ISSUE_TEMPLATE/other-en.yml

@@ -1,14 +0,0 @@
-name: Other Information
-description: Any other issues or questions related to usage
-labels: [other]
-body:
-  - type: textarea
-    id: title
-    attributes:
-      label: "Description of the Issue"
-      description: "Please provide a clear description of the issue you are experiencing"
-  - type: textarea
-    id: other
-    attributes:
-      label: "Additional Information"
-      description: "Is there any other information you would like to add?"

.github/ISSUE_TEMPLATE/other.yml

@@ -1,14 +0,0 @@
-name: 其他信息
-description: 关于使用上的问题
-labels: [other]
-body:
-  - type: textarea
-    id: title
-    attributes:
-      label: "问题描述"
-      description: "请尽量清晰的描述您遇到的问题"
-  - type: textarea
-    id: other
-    attributes:
-      label: "补充信息"
-      description: "有需要补充的信息吗"

.github/workflows/build.yml

@@ -1,46 +0,0 @@
-# Dev 分支推送部署预览
-## 仅部署 Win 端
-name: Build Dev
-
-on:
-  push:
-    branches:
-      - dev
-      - master
-
-jobs:
-  release:
-    name: Build Website
-    runs-on: windows-latest
-
-    steps:
-      # 检出 Git 仓库
-      - name: Check out git repository
-        uses: actions/checkout@v4.1.1
-      # 安装 Node.js
-      - name: Install Node.js
-        uses: actions/setup-node@v4.0.0
-        with:
-          node-version: "18.x"
-      # 复制环境变量文件
-      - name: Copy .env.example
-        run: |
-          if (-not (Test-Path .env)) {
-            Copy-Item .env.example .env
-          } else {
-            Write-Host ".env file already exists. Skipping the copy step."
-          }
-      # 安装项目依赖
-      - name: Install Dependencies
-        run: npm install
-      # 构建程序
-      - name: Build Website
-        run: npm run build
-        env:
-          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-      # 上传构建产物
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v3.1.3
-        with:
-          name: Home
-          path: dist

.gitignore

@@ -8,16 +8,19 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.DS_Store
 dist
 dist-ssr
+coverage
 *.local
-.env
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
-.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

.hintrc

@@ -3,15 +3,29 @@
     "development"
   ],
   "hints": {
-    "compat-api/html": "off",
+    "compat-api/html": [
-    "no-protocol-relative-urls": "off",
-    "compat-api/css": [
       "default",
       {
         "ignore": [
-          "backdrop-filter"
+          "meta[name=theme-color]"
         ]
       }
-    ]
+    ],
+    "highest-available-document-mode": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "image-alt": "off"
+      }
+    ],
+    "apple-touch-icons": "off",
+    "axe/name-role-value": [
+      "default",
+      {
+        "link-name": "off"
+      }
+    ],
+    "no-inline-styles": "off",
+    "disown-opener": "off"
   }
 }

.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "singleQuote": false,
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
-  "printWidth": 100
-}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 8080
+}

CODE_OF_CONDUCT.md

@@ -1,128 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
-  overall community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or
-  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
-  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-one@imsyy.top.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
-of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
-https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.

Dockerfile

@@ -1,17 +0,0 @@
-# 构建应用
-FROM node:18 AS builder
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY . .
-RUN [ ! -e ".env" ] && cp .env.example .env || true
-RUN npm run build
-
-# 最小化镜像
-FROM node:18-alpine
-WORKDIR /app
-COPY --from=builder /app/dist ./dist
-RUN npm install -g http-server
-
-EXPOSE 12445
-CMD ["http-server", "dist", "-p", "12445"]

README.md

@@ -1,23 +1,22 @@
 简体中文 | [English](./README_EN.md)
 
 <p>
-<strong><h2>無名の主页</h2></strong>
+<strong><h2>無名の主页 - 静态版本</h2></strong>
 简单的小主页，原来的看够了，重新弄了一个
 </p>
 
-![無名の主页](/screenshots/main.jpg)
+![無名の主页](https://s2.loli.net/2022/07/14/K5JigfvDoNewtuS.webp)
 
-> 主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.imsyy.top/font/Other/Pacifico-Regular.ttf)，若无法下载，可将字体目录下的 `Pacifico-Regular-all.ttf` 进行替换
+>主页的 Logo 字体已经过压缩，若用本站 Logo 以外的字母会变回默认字体，这里是 [完整字体](https://file.imsyy.top/font/Pacifico-Regular.ttf)
 
-### 👀 Demo
+### Demo
 
-> 由于 CDN 缓存原因，查看最新效果可能需要 `Ctrl` + `F5` 强制刷新浏览器缓存
+>由于 CDN 缓存原因，查看最新效果可能需要 `Ctrl` + `F5` 强制刷新浏览器缓存
 
 - [無名の主页](https://www.imsyy.top)
-- [無名の主页 - Dev](https://home-imsyy.vercel.app)
+- [無名の主页 - 备用线路](https://home-imsyy.vercel.app/)
-- [無名の主页 - 备用线路](https://home-5iw.pages.dev)
 
-### 🎉 功能
+### 功能
 
 - [x] 载入动画
 - [x] 站点简介
@@ -28,148 +27,98 @@
 - [x] 音乐播放器
 - [x] 移动端适配
 
-### ⚙️ 自动部署
+* [ ] 去除 jQuery 依赖
-
+* [ ] VUE 重构
-如果遇到构建环境或者打包过程出现错误，则可以采用 `Github Actions` 来进行自动构建
-
-- 在成功 `fork` 仓库后，前往 `Actions` 页面，若您是首次开启，则会出现下面的提示，点击开启
-
-  ![步骤1](/screenshots/step1.jpg)
-
-- 然后在仓库中进行任意修改后均会触发工作流的运行，在工作流完成后，会在下方生成一个可供下载的压缩包，这就是构建出的静态文件，可自行上传至服务器
-
-  ![步骤2](/screenshots/step2.jpg)
-
-### ⚙️ 手动部署
-
-- **安装** [node.js](https://nodejs.org/zh-cn/) **环境**
-
-  > node > 16.16.0  
-  > npm > 8.15.0
-
-- 然后以 **管理员权限** 运行 `cmd` 终端，并 `cd` 到 项目根目录
-- 在 `终端` 中输入：
-
-```bash
-# 安装 pnpm
-npm install -g pnpm
-
-# 安装依赖
-pnpm install
-
-# 预览
-pnpm dev
-
-# 构建
-pnpm build
-```
-
-> 构建完成后，静态资源会在 **`dist` 目录** 中生成，可将 **`dist` 文件夹下的文件**上传至服务器，也可使用 `Vercel` 等托管平台一键导入并自动部署
-
-### ⚙️ Docker 部署
-
-> 安装及配置 Docker 将不在此处说明，请自行解决
-
-```bash
-# 构建
-docker build -t home .
-# 运行
-docker run -p 12445:12445 -d home
-```
-
-### ⚙️ Vercel 部署
-
-> 其他部署平台大致相同，在此不做说明
-
-1. 点击本仓库右上角的 `Fork`，复制本仓库到你的 `GitHub` 账号
-2. 复制 `/.env.example` 文件并重命名为 `/.env`（ 重要 ）
-3. 按需修改 `/.env` 文件中的配置
-4. 点击 `Deploy`，即可成功部署
-
-### 网站链接
-
-在 `src/assets/siteLinks.json` 中可以自定义网站链接（以指向自己的网站）:
-
-```json
-{
-  "icon": "Blog",
-  "name": "博客",
-  "link": "https://blog.imsyy.top/"
-},
-```
-
-其中 `icon` 网站链接的图标可以在 `src/components/Links/index.vue` 中添加:
-
-```js
-// 可前往 https://www.xicons.org 自行挑选并在此处引入
-// 此处引入的是 fa 类型
-import {
-  Link,
-  Blog,
-  CompactDisc,
-  Cloud,
-  Compass,
-  Book,
-  Fire,
-  LaptopCode,
-} from "@vicons/fa";
-
-...
-
-// 网站链接图标
-const siteIcon = {
-  Blog,
-  Cloud,
-  CompactDisc,
-  Compass,
-  Book,
-  Fire,
-  LaptopCode,
-};
-```
-
-### 社交链接
-
-在 `src/assets/socialLinks.json` 中可以自定义社交链接。
 
 ### 天气
 
 天气及地区获取需要 `高德开放平台` 相关 API
 
-- 前往 [高德开放平台控制台](https://console.amap.com/dev/index) 创建一个 `Web 服务` 类型的 `Key`，并将 `Key` 填入 `.env` 中的 `VITE_WEATHER_KEY` 中
+- 前往 [高德开放平台控制台](https://console.amap.com/dev/index) 创建一个 `Web 服务` 类型的 `Key`，并将 `Key` 填入 `js/main.js` 中的 `mainKey` 中
 
 也可自行更换其他方式
 
+
+也可自行更换其他方式
+
+<!-- ### 配置
+
+本项目采用 `json` 文件来配置站点内容，该配置不受版本更新影响，可将自定义配置写入 `setting.json` 以更改页面内容
+
+<details>
+<summary>配置说明</summary>
+
+```json
+{
+    "title": "网页标题",
+    "description": "网页简短介绍",
+    "keywords": "网页关键词",
+    "author": "网页作者",
+    "logo_img": "Logo图片路径",
+    "logo_text_1": "域名前缀",
+    "logo_text_2": "域名后缀",
+    "des_title": [
+        "Hello World !", //站点介绍标题
+        "一个建立于 21 世纪的小站，存活于互联网的边缘" //站点介绍内容
+    ],
+    "des_title_change": [
+        "Oops !", //站点介绍标题点击后文字
+        "哎呀，这都被你发现了 ( 再点击一次可关闭 )" //站点介绍内容点击后文字
+    ],
+    "github": "imsyy", //Github 用户名
+    "qq": "1539250352", //QQ
+    "email": "one@imsyy.top", //Email电子邮件
+    "telegram": "bottom_user", //Telegram 用户名
+    "twitter": "iimmsyy", //Twitter用户名
+    "weather_api": "https://www.yiketianqi.com", //天气 API
+    "link_1": [
+        "https://blog.imsyy.top/", //链接地址
+        "fa-solid fa-blog", //图标类名
+        "博客" //链接文字
+    ],
+    "link_2": [
+        "https://drive.imsyy.top/",
+        "fa-solid fa-cloud",
+        "网盘"
+    ],
+    "wallpaper_api": [
+        [
+            "每日一图", //壁纸设置项名称
+            "https://api.dujin.org/bing/1920.php" //壁纸图片链接
+        ]
+    ],
+    "Copyright_year": "2020", //站点起始年份
+    "Copyright_text": "無名" //版权
+}
+```
+
+</details> -->
+
 ### 音乐
 
-> 本项目采用了基于 `MetingJS` 的 `Aplayer` 音乐播放器，可实现快速自定义歌单  
+>本项目采用了基于 `MetingJS` 的 `Aplayer` 音乐播放器，可实现快速自定义歌单  
-> \*仅支持 **中国大陆地区**
+>*仅支持 **中国大陆地区**，其他区域请将 [以下内容](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) 替换 `music.js` 以实现音乐播放器的正常使用
 
-请在 `.env` 文件中更改歌曲相关参数即可实现自定义歌单列表
+更改 `music.js` 的参数即可实现自定义歌单列表
 
-```bash
+```js
-# 歌曲 API 地址
+let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
-VITE_SONG_API = "https://api-meting.imsyy.top"
+let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
-# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
+let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
-VITE_SONG_SERVER = "netease"
-# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
-VITE_SONG_TYPE = "playlist"
-# 播放 ID
-VITE_SONG_ID = "7452421335"
 ```
 
 ### 字体
 
 现采用 `HarmonyOS Sans` 开源字体，采用字体拆分，提升加载速度
 
-> 由于本站 `CDN` 已开启防盗链，**非本站域名不可访问**，请将字体引入链接更改为下方内容，否则 **自定义字体将失效**
+>由于本站 `CDN` 已开启防盗链，**非本站域名不可访问**，请将字体引入链接更改为下方内容，否则 **自定义字体将失效**
 >
-> `https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css`
+>`https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css`
 
 <details>
 <summary>旧版方式</summary>
 
-> 由于本项目引入了中文字体，需要压缩中文字体以提高网页加载速度（ 也可以取消使用中文字体 ）
+>由于本项目引入了中文字体，需要压缩中文字体以提高网页加载速度（ 也可以取消使用中文字体 ）
 
 #### 中文字体去除繁体
 
@@ -197,48 +146,24 @@ make clean all
 
 - 最终可对原字体进行缓加载，**先行加载压缩后的字体**
 
-> 详细信息可前往 [虹墨空间站](https://www.imaegoo.com/2020/chinese-font-compress/) 查看原文
+>详细信息可前往 [虹墨空间站](https://www.imaegoo.com/2020/chinese-font-compress/) 查看原文
 
 </details>
 
-### 网站图标及网站背景
+### 插件
 
-#### 网站背景
+* [Bootstrap](https://getbootstrap.com/)
-
+* [iziToast](https://izitoast.marcelodolza.com/)
-可以在 `public/images` 中修改网站背景
+* [Font Awesome](https://fontawesome.com/)
-
+* [jQuery](https://jquery.com/)
-如果想要添加更多的本地图片作为网站背景，可以将图片重命名 `background+数字` 的形式，并在 `src/components/Background/index.vue` 中进行修改：
+* [Aplayer](https://aplayer.js.org/)
-
-```js
-if (type == 0) {
-  // 修改此处 Math.random() 后面的第一个数字为图片的数量
-  bgUrl.value = `/images/background${Math.floor(Math.random() * 10 + 1)}.webp`;
-}
-```
-
-#### 网站图标
-
-可以在 `public/images/icon` 中修改网站图标。
-
-### 技术栈
-
-- [Vue](https://cn.vuejs.org/)
-- [Vite](https://vitejs.cn/vite3-cn/)
-- [Pinia](https://pinia.vuejs.org/zh/)
-- [IconPark](https://iconpark.oceanengine.com/official)
-- [xicons](https://xicons.org/)
-- [Aplayer](https://aplayer.js.org/)
 
 ### API
 
-- [韩小韩 WebAPI 接口](https://api.vvhan.com/)
+* [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
-- [搏天 API](https://api.btstu.cn/doc/sjbz.php)
+* [小歪 API](https://api.ixiaowai.cn/)
-- [教书先生 API](https://api.oioweb.cn/doc/weather/GetWeather)
+* [和风天气](https://dev.qweather.com/)
-- [高德开放平台](https://lbs.amap.com/)
+* [ROLL](https://www.mxnzp.com/doc/list)
-- [Hitokoto 一言](https://hitokoto.cn/)
+* [Hitokoto 一言](https://hitokoto.cn/)
 
-## Star History
+<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2022-%E7%84%A1%E5%90%8D-red"></a>
-
-[![Star History Chart](https://api.star-history.com/svg?repos=imsyy/home&type=Date)](https://star-history.com/#imsyy/home&Date)
-
-<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2023-%E7%84%A1%E5%90%8D-red"></a>

README_EN.md

@@ -7,15 +7,14 @@ Simple little homepage, had enough of the original one and made a new one
 
 ![無名の主页](https://s2.loli.net/2022/07/14/K5JigfvDoNewtuS.webp)
 
->The logo font on the home page has been compressed, so if you use a font other than this logo, it will change back to the default font, Here is the [full font](https://file.4everland.app/font/Other/Pacifico-Regular.ttf)  
+>The logo font on the home page has been compressed, so if you use a font other than this logo, it will change back to the default font, Here is the [full font](https://file.imsyy.top/font/Pacifico-Regular.ttf)  
 
 ### Demo
 
 >Due to CDN caching, you may need `Ctrl` + `F5` to force a browser cache refresh to see the latest results
 
 - [無名の主页](https://www.imsyy.top)
-- [無名の主页 - Dev](https://home-imsyy.vercel.app)
+- [無名の主页 - 备用线路](https://home-imsyy.vercel.app/)
-- [無名の主页 - Standby](https://home-5iw.pages.dev)
 
 ### Functions
 
@@ -28,58 +27,83 @@ Simple little homepage, had enough of the original one and made a new one
 - [x] Music player
 - [x] Mobile adaptation
 
-* [ ] Player cancels using Aplayer
+* [ ] Remove jQuery dependency
-
+* [ ] VUE refactoring
-### Deployment
-
-* **Installation** [node.js](https://nodejs.org/zh-cn/) **Environment**
-
-  > node > 16.16.0  
-  > npm > 8.15.0
-  
-* Then run the `cmd` terminal with **administrator privileges** and `cd` to the project root directory
-* In the `terminal` type:
-
-```bash
-# Install pnpm
-npm install -g pnpm
-
-# Install the dependencies
-pnpm install
-
-# Preview
-pnpm dev
-
-# Build
-pnpm build
-```
-
-> Once the build is complete, the files in the `dist` folder can be uploaded to the server or imported and automatically deployed with one click using a hosting platform such as `Vercel`.
 
 ### Weather
 
-Weather and area access requires `高德开放平台` related API
+Because the original weather API is unstable, the weather API has been replaced. Now you need to go to the following website to obtain the key  
 
-- Go to [高德开放平台控制台](https://console.amap.com/dev/index) to create a `Key` of type `Web Service` and fill the `Key` into `VITE_WEATHER_KEY` in `.env` 
+- to [ROLL] (https://www.mxnzp.com/doc/list) for app_id and app_secret, used to capture the city  
+
+- to [and wind weather] (https://dev.qweather.com/) to obtain the key, is used to get the weather information  
 
 It can also be replaced by other methods
 
+<!-- ### Configuration
+
+This project uses `json` file to configure the site content, the configuration is not affected by version updates, you can write custom configuration to `setting.json` to change the page content
+
+<details>
+<summary>Configuration instructions</summary>
+
+```json
+{
+    "title": "Title of the page",
+    "description": "Short description of the page",
+    "keywords": "Keyword(s)",
+    "author": "author of the page",
+    "logo_img": "Logo image path",
+    "logo_text_1": "Domain Prefix",
+    "logo_text_2": "Domain_suffix",
+    "des_title": [
+        "Hello World !" , // site description title
+        "A small site built in the 21st century, living on the edge of the Internet" // site description content
+    ],
+    "des_title_change": [
+        "Oops !" , //text after clicking on the site's title
+        "Oops, you found this ( click once more to close )" //text after click on site content
+    ],
+    "github": "imsyy", //Github username
+    "qq": "1539250352", //QQ
+    "email": "one@imsyy.top", //email email
+    "telegram": "bottom_user", //Telegram user name
+    "twitter": "iimmsyy", //Twitter username
+    "weather_api": "https://www.yiketianqi.com", //Weather API
+    "link_1": [
+        "https://blog.imsyy.top/", //link_address
+        "fa-solid fa-blog", //icon class name
+        "blog" //link text
+    ],
+    "link_2": [
+        "https://drive.imsyy.top/",
+        "fa-solid fa-cloud",
+        "netdisk"
+    ],
+    "wallpaper_api": [
+        [
+            "picture of the day", //name of wallpaper setting item
+            "https://api.dujin.org/bing/1920.php" //link to wallpaper image
+        ]
+    ],
+    "Copyright_year": "2020", //site start year
+    "Copyright_text": "No name" //Copyright
+}
+```
+
+</details> -->
+
 ### Music
 
 >This project uses the `Aplayer` music player based on `MetingJS` for quick song list customization  
->*Only supported in **Mainland China**
+>*Only supported in **Mainland China**, please replace `music.js` with [the following](https://cdn.jsdelivr.net/gh/imsyy/file/js/music/music-other.js) in other regions to enable the music player to work properly
 
-Please change the song related parameters in the `.env` file to customize the song list
+Change the parameters of `music.js` to achieve a custom song list
 
-```bash
+```js
-# Songs API address
+let server = "netease"; //netease; tencent; kugou; xiami; kuwo; 
-VITE_SONG_API = "https://api-meting.imsyy.top"
+let type = "playlist"; //song; playlist; album;
-# Song server ( netease-netease, tencent-qq music )
+let id = "7452421335"; //album ID; song ID; playlist ID;
-VITE_SONG_SERVER = "netease"
-# Playback type ( song-song, playlist-playlist, album-album, search-search, artist-artist )
-VITE_SONG_TYPE = "playlist"
-# Playback ID
-VITE_SONG_ID = "7452421335"
 ```
 
 ### Fonts
@@ -125,20 +149,20 @@ make clean all
 
 </details>
 
-### Technology Stack
+### Plugins
 
-* [Vue](https://cn.vuejs.org/)
+* [Bootstrap](https://getbootstrap.com/)
-* [Vite](https://vitejs.cn/vite3-cn/)
+* [iziToast](https://izitoast.marcelodolza.com/)
-* [Pinia](https://pinia.vuejs.org/zh/)
+* [Font Awesome](https://fontawesome.com/)
-* [IconPark](https://iconpark.oceanengine.com/official)
+* [jQuery](https://jquery.com/)
-* [xicons](https://xicons.org/)
 * [Aplayer](https://aplayer.js.org/)
 
 ### API
 
-* [韩小韩 WebAPI 接口](https://api.vvhan.com/)
+* [MetingAPI By wuenci](https://api.wuenci.com/meting/api/)
-* [搏天 API](https://api.btstu.cn/doc/sjbz.php)
+* [小歪 API](https://api.ixiaowai.cn/)
-* [高德开放平台](https://lbs.amap.com/)
+* [和风天气](https://dev.qweather.com/)
+* [ROLL](https://www.mxnzp.com/doc/list)
 * [Hitokoto 一言](https://hitokoto.cn/)
 
-<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2023-%E7%84%A1%E5%90%8D-red"></a>
+<a title="SSL" target="_blank" href="https://myssl.com/seal/detail?domain=blog.imsyy.top"><img src="https://img.shields.io/badge/MySSL-安全认证-brightgreen"></a>&nbsp;<a title="CDN" target="_blank" href="https://cdnjs.com/"><img src="https://img.shields.io/badge/CDN-Cloudflare-blue"></a>&nbsp;<a title="Copyright" target="_blank" href="https://imsyy.top/"><img src="https://img.shields.io/badge/Copyright%20%C2%A9%202020--2022-%E7%84%A1%E5%90%8D-red"></a>

auto-imports.d.ts

@@ -1,57 +0,0 @@
-// Generated by 'unplugin-auto-import'
-export {}
-declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const ElMessage: typeof import('element-plus/es')['ElMessage']
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-}

components.d.ts

@@ -1,35 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
-export {}
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    Background: typeof import('./src/components/Background.vue')['default']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCol: typeof import('element-plus/es')['ElCol']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRow: typeof import('element-plus/es')['ElRow']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    Footer: typeof import('./src/components/Footer.vue')['default']
-    Hitokoto: typeof import('./src/components/Hitokoto.vue')['default']
-    Links: typeof import('./src/components/Links.vue')['default']
-    Loading: typeof import('./src/components/Loading.vue')['default']
-    Message: typeof import('./src/components/Message.vue')['default']
-    MoreContent: typeof import('./src/components/MoreContent.vue')['default']
-    Music: typeof import('./src/components/Music.vue')['default']
-    Player: typeof import('./src/components/Player.vue')['default']
-    Set: typeof import('./src/components/Set.vue')['default']
-    SocialLinks: typeof import('./src/components/SocialLinks.vue')['default']
-    TimeCapsule: typeof import('./src/components/TimeCapsule.vue')['default']
-    Weather: typeof import('./src/components/Weather.vue')['default']
-  }
-}

css/animation.css

@@ -0,0 +1,89 @@
+/*模糊渐入动画*/
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+        backdrop-filter: blur(0px);
+    }
+
+    100% {
+        opacity: 1;
+        backdrop-filter: blur(10px);
+    }
+}
+
+@-webkit-keyframes fade-in {
+    0% {
+        opacity: 0;
+        backdrop-filter: blur(0px);
+    }
+
+    100% {
+        opacity: 1;
+        backdrop-filter: blur(10px);
+    }
+}
+
+@-moz-keyframes fade-in {
+    0% {
+        opacity: 0;
+        backdrop-filter: blur(0px);
+    }
+
+    100% {
+        opacity: 1;
+        backdrop-filter: blur(10px);
+    }
+}
+
+@-o-keyframes fade-in {
+    0% {
+        opacity: 0;
+        backdrop-filter: blur(0px);
+    }
+
+    100% {
+        opacity: 1;
+        backdrop-filter: blur(10px);
+    }
+}
+
+/*渐入动画*/
+@keyframes fade {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fade {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes fade {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@-o-keyframes fade {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

css/lantern.css

@@ -0,0 +1,229 @@
+@charset "UTF-8";
+
+.lantern__warpper {
+    position: fixed;
+    top: 12px;
+    left: 40px;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    z-index: 999
+}
+
+.lantern__warpper.lantern__secondary {
+    left: calc(100% - 130px)
+}
+
+.lantern__warpper.lantern__secondary .lantern__box {
+    -webkit-animation-duration: 3s;
+    animation-duration: 3s
+}
+
+.lantern__box {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 70px;
+    background: rgba(216, 0, 15, .8);
+    border-radius: 50% 50%;
+    animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
+    -webkit-transform-origin: 50% -70px;
+    -ms-transform-origin: 50% -70px;
+    transform-origin: 50% -70px;
+    -webkit-box-shadow: -5px 5px 50px 4px #fa6c00;
+    box-shadow: -5px 5px 50px 4px #fa6c00
+}
+
+.lantern__box:after,
+.lantern__box:before {
+    content: "";
+    position: absolute;
+    height: 8px;
+    width: 45px;
+    left: 50%;
+    border: 1px solid #dc8f03;
+    background: -webkit-gradient(linear, left top, right top, from(#dc8f03), color-stop(orange), color-stop(#dc8f03), color-stop(orange), to(#dc8f03));
+    background: -o-linear-gradient(left, #dc8f03, orange, #dc8f03, orange, #dc8f03);
+    background: linear-gradient(90deg, #dc8f03, orange, #dc8f03, orange, #dc8f03)
+}
+
+.lantern__box:before {
+    top: 0;
+    border-radius: 5px 5px 0 0;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%)
+}
+
+.lantern__box:after {
+    bottom: 0;
+    border-radius: 0 0 5px 5px;
+    -webkit-transform: translate(-50%, 50%);
+    -ms-transform: translate(-50%, 50%);
+    transform: translate(-50%, 50%)
+}
+
+.lantern__line {
+    position: absolute;
+    width: 2px;
+    height: 12px;
+    top: 0;
+    left: 50%;
+    -webkit-transform: translate(-50%, -100%);
+    -ms-transform: translate(-50%, -100%);
+    transform: translate(-50%, -100%);
+    background: #dc8f03
+}
+
+.lantern__circle {
+    width: 80%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+.lantern__circle,
+.lantern__circle .lantern__ellipse {
+    height: 100%;
+    margin: 0 auto;
+    border-radius: 50%;
+    border: 2px solid #dc8f03
+}
+
+.lantern__circle .lantern__ellipse {
+    width: 50%
+}
+
+.lantern__circle .lantern__text {
+    font-family: 华文行楷, Microsoft YaHei, sans-serif;
+    font-size: 24.3px;
+    color: #dc8f03;
+    font-weight: 700;
+    line-height: 66px;
+    text-align: center
+}
+
+.lantern__tail {
+    position: relative;
+    width: 4px;
+    height: 12px;
+    margin: 0 auto;
+    animation: lantern-swing 3s ease-in-out infinite alternate-reverse;
+    background: orange;
+    border-radius: 0 0 5px 5px
+}
+
+.lantern__tail .lantern__junction {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    -webkit-transform: translate(-50%, 8.4px);
+    -ms-transform: translate(-50%, 8.4px);
+    transform: translate(-50%, 8.4px);
+    background: #e69603;
+    border-radius: 50%
+}
+
+.lantern__tail .lantern__rect {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    -webkit-transform: translate(-50%, 10.8px);
+    -ms-transform: translate(-50%, 10.8px);
+    transform: translate(-50%, 10.8px);
+    width: 8px;
+    height: 24px;
+    background: orange;
+    border-radius: 5px 5px 0 5px
+}
+
+@-webkit-keyframes lantern-swing {
+    0% {
+        -webkit-transform: rotate(-8deg);
+        transform: rotate(-8deg)
+    }
+
+    to {
+        -webkit-transform: rotate(8deg);
+        transform: rotate(8deg)
+    }
+}
+
+@keyframes lantern-swing {
+    0% {
+        -webkit-transform: rotate(-8deg);
+        transform: rotate(-8deg)
+    }
+
+    to {
+        -webkit-transform: rotate(8deg);
+        transform: rotate(8deg)
+    }
+}
+
+@media (max-width:460px) {
+    .lantern__warpper {
+        top: 8px;
+        left: 30px
+    }
+
+    .lantern__warpper.lantern__secondary {
+        left: calc(100% - 80px)
+    }
+
+    .lantern__box {
+        width: 50px;
+        height: 40px;
+        -webkit-transform-origin: 50% -40px;
+        -ms-transform-origin: 50% -40px;
+        transform-origin: 50% -40px;
+        -webkit-box-shadow: -5px 5px 50px -1px #fa6c00;
+        box-shadow: -5px 5px 50px -1px #fa6c00
+    }
+
+    .lantern__box:after,
+    .lantern__box:before {
+        height: 4px;
+        width: 25px
+    }
+
+    .lantern__line {
+        width: 2px;
+        height: 8px
+    }
+
+    .lantern__circle .lantern__text {
+        font-size: 13.5px;
+        line-height: 38px
+    }
+
+    .lantern__tail {
+        width: 4px;
+        height: 8px
+    }
+
+    .lantern__tail .lantern__junction {
+        width: 8px;
+        height: 8px;
+        -webkit-transform: translate(-50%, 5.6px);
+        -ms-transform: translate(-50%, 5.6px);
+        transform: translate(-50%, 5.6px)
+    }
+
+    .lantern__tail .lantern__rect {
+        -webkit-transform: translate(-50%, 7.2px);
+        -ms-transform: translate(-50%, 7.2px);
+        transform: translate(-50%, 7.2px);
+        width: 8px;
+        height: 16px
+    }
+}
+
+@media screen and (max-width:720px) {
+    .lantern__warpper {
+        display: none;
+    }
+}

css/loading.css

@@ -0,0 +1,125 @@
+#loading-box .loading-left-bg,
+#loading-box .loading-right-bg {
+    position: fixed;
+    z-index: 999998;
+    width: 50%;
+    height: 100%;
+    background-color: rgb(81 81 81 / 80%);
+    transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
+    backdrop-filter: blur(10px);
+}
+
+#loading-box .loading-right-bg {
+    right: 0;
+}
+
+#loading-box>.spinner-box {
+    position: fixed;
+    z-index: 999999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+}
+
+#loading-box .spinner-box .loading-word {
+    position: absolute;
+    color: #ffffff;
+    font-size: 0.95rem;
+    transform: translateY(64px);
+    text-align: center;
+}
+
+p.loading-title {
+    font-size: 1.25rem;
+    margin: 20px 10px 4px 10px;
+}
+
+#loading-box .spinner-box .configure-core {
+    width: 100%;
+    height: 100%;
+    background-color: #37474f;
+}
+
+div.loaded div.loading-left-bg {
+    transform: translate(-100%, 0);
+}
+
+div.loaded div.loading-right-bg {
+    transform: translate(100%, 0);
+}
+
+div.loaded div.spinner-box {
+    display: none !important;
+}
+
+.loader {
+    position: absolute;
+    top: calc(50% - 32px);
+    left: calc(50% - 32px);
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    perspective: 800px;
+    transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
+}
+
+.inner {
+    position: absolute;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.inner.one {
+    left: 0%;
+    top: 0%;
+    animation: rotate-one 1s linear infinite;
+    border-bottom: 3px solid #EFEFFA;
+}
+
+.inner.two {
+    right: 0%;
+    top: 0%;
+    animation: rotate-two 1s linear infinite;
+    border-right: 3px solid #EFEFFA;
+}
+
+.inner.three {
+    right: 0%;
+    bottom: 0%;
+    animation: rotate-three 1s linear infinite;
+    border-top: 3px solid #EFEFFA;
+}
+
+@keyframes rotate-one {
+    0% {
+        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+    }
+
+    100% {
+        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+    }
+}
+
+@keyframes rotate-two {
+    0% {
+        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+    }
+
+    100% {
+        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+    }
+}
+
+@keyframes rotate-three {
+    0% {
+        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+    }
+
+    100% {
+        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+    }
+}

css/mobile.css

@@ -0,0 +1,392 @@
+@charset "utf-8";
+
+/*小于1400px时*/
+@media (max-width: 1400px) {}
+
+/*小于1200px时*/
+@media (max-width: 1200px) {
+
+    /*总布局*/
+    .container,
+    .container-lg,
+    .container-md,
+    .container-sm {
+        max-width: 1000px !important;
+    }
+
+    .weekday {
+        display: none;
+    }
+
+    /*音乐播放器*/
+    .music-text {
+        max-width: 170px !important;
+    }
+}
+
+/*小于992px时*/
+@media (max-width: 992px) {
+
+    /*总布局*/
+    .container,
+    .container-lg,
+    .container-md,
+    .container-sm {
+        max-width: 900px !important;
+    }
+
+    .col.left {
+        margin-right: 0.75rem;
+    }
+
+    .col.right {
+        margin-left: 0.75rem;
+    }
+
+    /*一言*/
+    .col.hitokotos {
+        display: none;
+    }
+
+    /*时间卡片*/
+    .col.times {
+        margin-left: 0rem;
+    }
+
+    /*日期显示*/
+    .weekday {
+        display: inline;
+    }
+
+    /*标题文字*/
+    .main-img img {
+        width: 110px;
+    }
+
+    span.img-title {
+        font-size: 4.75rem;
+    }
+
+    span.img-text {
+        font-size: 1.75rem;
+    }
+
+    /*链接卡片文字*/
+    span.link-name {
+        display: none !important;
+    }
+
+    .link-card i {
+        margin-left: 10px !important;
+        margin-right: 10px !important;
+    }
+}
+
+/*小于840px时*/
+@media (max-width: 840px) {
+
+
+    /*社交链接*/
+    .social {
+        max-width: 100%;
+        justify-content: center;
+    }
+
+    #link-text {
+        display: none !important;
+    }
+
+    .link i {
+        margin: 0px 20px;
+    }
+}
+
+/*小于789px时*/
+@media (max-width: 789px) {
+
+    /*标题文字*/
+    span.img-text {
+        display: none;
+    }
+}
+
+/*小于768px时*/
+@media (max-width: 768px) {
+
+    /*标题文字*/
+    .main-img img {
+        width: 100px;
+    }
+
+    span.img-title {
+        font-size: 4.5rem;
+    }
+}
+
+/*小于720px时*/
+@media (max-width: 720px) {
+
+    /*左侧栏高度*/
+    .main-left {
+        transform: translateY(20px);
+    }
+
+    /*左侧栏边距*/
+    .col.left {
+        margin-right: 0rem;
+    }
+
+    /*右侧栏隐藏*/
+    .col.right {
+        display: none;
+    }
+
+    /*右侧栏边距*/
+    .col.right {
+        margin-left: 0rem;
+    }
+
+    /*标题文字*/
+    span.img-text {
+        display: inline;
+    }
+
+    /*简介*/
+    .message {
+        max-width: 100%;
+        pointer-events: none;
+    }
+
+    /*
+    .des {
+        justify-content: space-between;
+    }
+    */
+
+    /*链接卡片*/
+    .link-card {
+        height: 80px !important;
+        align-items: center !important;
+        flex-direction: column !important;
+        justify-content: center !important;
+    }
+
+    .link-card i {
+        font-size: 1.25rem;
+        margin: 4px 0px;
+    }
+
+    i.iconfont.icon-a-daohangzhiyindingwei-05,
+    i.iconfont.icon-z_shangpinheji {
+        font-size: 1.65rem;
+    }
+
+    span.link-name {
+        display: block !important;
+        font-size: 0.85rem;
+    }
+
+    .link-card:hover span.link-name {
+        font-size: 0.95rem;
+    }
+
+    span.line-text,
+    i.iconfont.icon-link {
+        font-size: 1.05rem;
+    }
+
+    /*菜单栏按钮*/
+    .menu {
+        display: flex;
+        justify-content: center;
+        position: fixed;
+        top: 84%;
+    }
+
+    .munu-button {
+        padding: 5px 20px;
+        background: rgb(0 0 0 / 20%);
+        backdrop-filter: blur(10px);
+        border-radius: 6px;
+        font-size: 1.25rem;
+        transition: 0.5s;
+        width: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+    }
+
+    /*页脚文字*/
+    footer {
+        font-size: 0.85rem;
+    }
+
+    /*一言*/
+    .col.hitokotos {
+        margin-right: 0rem;
+    }
+
+    .hitokoto-text,
+    .hitokoto-from {
+        font-size: 1.05rem;
+    }
+
+    /*音乐播放器*/
+    .music-text {
+        max-width: 100% !important;
+    }
+
+    #music-name {
+        font-size: 1.05rem;
+    }
+
+    #music-open {
+        display: none;
+    }
+
+    /*隐藏鼠标样式*/
+    #cursor {
+        background: transparent !important;
+    }
+
+}
+
+/*小于512px时*/
+@media (max-width: 512px) {
+    #made {
+        display: none;
+    }
+}
+
+/*小于390px时*/
+@media (max-width: 390px) {
+    .main-img img {
+        display: none;
+    }
+
+    #beian {
+        display: none;
+    }
+}
+
+/* 大于568px时 */
+@media (min-width: 568px) {
+    .iziToast {
+        border-radius: 30px !important;
+    }
+}
+
+
+/* 大于720px时 */
+@media (min-width: 720px) {
+    .menu {
+        display: none !important;
+    }
+}
+
+/* 大于992px时 */
+@media (min-width: 992px) {
+
+    /*时钟显示*/
+    span#win_text,
+    span#win_speed {
+        display: none;
+    }
+}
+
+/* 大于1400px时 */
+@media (min-width: 1400px) {
+
+    /*时钟显示*/
+    span#win_text,
+    span#win_speed {
+        display: inline !important;
+    }
+}
+
+
+/*
+菜单按钮
+*/
+.menus .col.left {
+    display: none;
+}
+
+.menus .col.right {
+    display: block !important;
+    transition: 0.5s;
+    padding: 0rem 0.75rem;
+}
+
+/*功能区调整*/
+.menus .col.hitokotos {
+    display: block;
+}
+
+.menus .col.times {
+    display: none;
+}
+
+/*边界布局*/
+.menus .row {
+    --bs-gutter-x: 0rem;
+}
+
+.menus .col.\32 {
+    margin: 0 0.75rem;
+}
+
+.menus .logo {
+    display: inline !important;
+    text-align: center;
+    position: fixed;
+    top: 8%;
+    font-size: 1.75rem;
+}
+
+/*第二屏logo*/
+.logo-text {
+    font-family: 'Pacifico-Regular' !important;
+}
+
+/*切换动画*/
+/*
+.hitokoto,
+.time,
+.link-card,
+.message {
+    animation: fade-in;
+    -webkit-animation: fade-in 0.5s;
+    -moz-animation: fade-in 0.5s;
+    -o-animation: fade-in 0.5s;
+    -ms-animation: fade-in 0.5s;
+}
+*/
+.logo,
+.line,
+.main-img,
+.social,
+.close,
+.hitokoto,
+.time,
+.link-card,
+.message,
+#link-text {
+    animation: fade 0.5;
+    -webkit-animation: fade 0.5s;
+    -moz-animation: fade 0.5s;
+    -o-animation: fade 0.5s;
+    -ms-animation: fade 0.5s;
+}
+
+/*
+移动端功能区切换
+*/
+.mobile .col.hitokotos {
+    display: none;
+}
+
+.mobile .col.times {
+    display: block;
+}

docker-compose.yml

@@ -1,9 +0,0 @@
-version: '3'
-
-services:
-  app:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    ports:
-      - "12445:12445"

index.html

@@ -1,39 +1,514 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="zh-CN">
-  <head>
+
-    <meta charset="UTF-8" />
+<head>
-    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
+    <!-- 基础信息 -->
-    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
+    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Access-Control-Allow-Origin" content="*">
-    <link rel="icon" href="%VITE_SITE_LOGO%" />
+    <!-- 强制 HTTPS，若不需要可删除，但可能出现问题 -->
-    <link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" />
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
-    <link rel="bookmark" href="%VITE_SITE_APPLE_LOGO%" />
+    <meta name="renderer" content="webkit" />
-    <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="description" content="%VITE_SITE_DES%" />
+    <meta name="force-rendering" content="webkit" />
-    <meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="author" content="%VITE_SITE_ANTHOR%" />
     <meta name="theme-color" content="#424242" />
-    <title>%VITE_SITE_NAME%</title>
+    <meta name="description" content="一个默默无闻的主页">
+    <meta name="keywords" content="無名,个人主页">
+    <meta name="author" content="無名">
+    <title>無名の主页</title>
+    <!-- jQuery -->
+    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.5.1/jquery.min.js"></script>
     <!-- HarmonyOS Sans -->
     <!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
-    <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
+    <!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
-    <!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> -->
+    <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" />
+    <!-- 引入样式 -->
+    <link rel="stylesheet" type="text/css"
+        href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="./css/style.css">
+    <link rel="stylesheet" type="text/css" href="./css/mobile.css">
+    <link rel="stylesheet" type="text/css" href="./css/loading.css">
+    <link rel="stylesheet" type="text/css" href="./css/animation.css">
+    <link rel="icon" href="./favicon.ico">
+    <link rel="apple-touch-icon" href="./img/icon/apple-touch-icon.png">
+    <!-- Izitoast -->
+    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/css/iziToast.min.css">
+    <script type="text/javascript"
+        src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/izitoast/1.4.0/js/iziToast.min.js">
+    </script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/all.min.css">
+    <!-- Aplayer -->
+    <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css"
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js" crossorigin="anonymous"
+        referrerpolicy="no-referrer"></script>
+    <!-- <script src="./js/Meting.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
     <!-- IE Out -->
     <script>
-      if (/*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
+        if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href =
-        window.location.href =
+            "/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);
-          'https://support.dmeng.net/upgrade-your-browser.html?referrer=' +
-          encodeURIComponent(window.location.href);
     </script>
-  </head>
+    <!-- PWA -->
+    <link rel="manifest" href="/manifest.json">
+    <!-- 51.LA 统计 -->
+    <script src="./js/51LA.js"></script>
+</head>
 
-  <body>
+<body>
-    <!-- 主体内容 -->
+    <!--加载动画-->
-    <div id="app"></div>
+    <div id="loading-box">
+        <div class="loading-left-bg"></div>
+        <div class="loading-right-bg"></div>
+        <div class="spinner-box">
+            <div class="loader">
+                <div class="inner one"></div>
+                <div class="inner two"></div>
+                <div class="inner three"></div>
+            </div>
+            <div class="loading-word">
+                <p class="loading-title" id="loading-title">無名の主页</p>
+                <span id="loading-text">加载中</span>
+            </div>
+        </div>
+    </div>
+    <section id="section" class="section">
+        <!-- 背景图片 -->
+        <div class="bg-all">
+            <img id="bg" onerror="this.classList.add('error');"></img>
+            <div class="cover"></div>
+        </div>
+        <!-- 鼠标指针 -->
+        <div id="g-pointer-1"></div>
+        <div id="g-pointer-2"></div>
+        <!-- 主体内容 -->
+        <main id="main" class="main">
+            <div class="container" id="container">
+                <div class="row" id="row">
+                    <div class="col left">
+                        <!--基本信息-->
+                        <div class="main-left">
+                            <!--Logo-->
+                            <div class="main-img">
+                                <img id="logo-img" src="./img/icon/logo.png" alt="img">
+                                <div class="img-title">
+                                    <span class="img-title-big" id="logo-text-1">imsyy</span>
+                                    <span class="img-text" id="logo-text-2">.top</span>
+                                </div>
+                            </div>
+                            <!--介绍信息-->
+                            <div class="message cards" id="switchmore">
+                                <div class="des" id="des">
+                                    <i class="fa-solid fa-quote-left"></i>
+                                    <div class="des-title"><span id="change">Hello&nbsp;World&nbsp;!</span><br /><span
+                                            id="change1">一个建立于 21 世纪的小站，存活于互联网的边缘</span></div>
+                                    <i class="fa-solid fa-quote-right"></i>
+                                </div>
+                            </div>
+                            <!--社交链接-->
+                            <div class="social" id="social">
+                                <a href="https://github.com/imsyy" class="link" id="github" style="margin-left: 4px"
+                                    target="_blank">
+                                    <i class="fa-brands fa-github"></i>
+                                </a>
+                                <a href="https://wpa.qq.com/msgrd?v=3&uin=1539250352&site=qq&menu=yes" class="link"
+                                    id="qq" target="_blank">
+                                    <i class="fa-brands fa-qq"></i>
+                                </a>
+                                <a href="mailto:one@imsyy.top" class="link" id="email">
+                                    <i class="fa-solid fa-envelope"></i>
+                                </a>
+                                <a href="https://space.bilibili.com/98544142" class="link" id="bilibili"
+                                    target="_blank">
+                                    <i class="fa-brands fa-bilibili"></i>
+                                </a>
+                                <a href="https://t.me/bottom_user" class="link" id="telegram" target="_blank">
+                                    <i class="fa-brands fa-telegram"></i>
+                                </a>
+                                <a id="link-text">通过这里联系我</a>
+                            </div>
+                        </div>
+                    </div>
+                    <!--第二屏 Logo-->
+                    <div class="logo cards" style="display: none" id="changemore">
+                        <a class="logo-text" id="logo-text-small">imsyy.top</a>
+                    </div>
+                    <div class="col right">
+                        <div class="main-right">
+                            <!--功能区-->
+                            <div class="row rightone" id="rightone">
+                                <div class="col hitokotos">
+                                    <!--一言-->
+                                    <div class="hitokoto cards" id="hitokoto">
+                                        <!--切换音乐-->
+                                        <div class="open-music fixed-top" id="open-music">
+                                            <i class="fa-solid fa-compact-disc"></i>
+                                            <span>&nbsp;打开音乐播放器</span>
+                                        </div>
+                                        <!--切换音乐结束-->
+                                        <div class="hitokoto-all">
+                                            <div class="hitokoto-text"><span id="hitokoto_text">每一个人都应该明确自己的方向和位置</span>
+                                            </div>
+                                            <div class="hitokoto-from">-「&nbsp;<span id="from_text">無名</span>&nbsp;」
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!--音乐-->
+                                    <div class="music" id="music">
+                                        <div class="music-all">
+                                            <div class="music-button">
+                                                <div id="music-open">音乐列表</div>
+                                                <div id="music-close">回到一言</div>
+                                            </div>
+                                            <div class="music-control">
+                                                <i class="fa-solid fa-backward-step" id="last"></i>
+                                                <div id="play">
+                                                    <i class="fa-solid fa-play"></i>
+                                                </div>
+                                                <i class="fa-solid fa-forward-step" id="next"></i>
+                                            </div>
+                                            <div class="music-menu">
+                                                <div class="music-text">
+                                                    <span id="music-name">未播放音乐</span>
+                                                </div>
+                                                <div class="music-volume" style="display: none;">
+                                                    <div id="volume-ico">
+                                                        <i class="fa-solid fa-volume-low"></i>
+                                                    </div>
+                                                    <input type="range" min="0" max="1" step="0.01" id="volume">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col times">
+                                    <!--时间-->
+                                    <div class="time cards" id="upWeather">
+                                        <div class="timeshow" id="time">
+                                            2000&nbsp;年&nbsp;0&nbsp;月&nbsp;00&nbsp;日&nbsp;<span
+                                                class="weekday">星期一</span><br><span class="time-text">00:00:00</span>
+                                        </div>
+                                        <div class="weather">
+                                            <span id="city_text">天气</span>&nbsp;
+                                            <span id="wea_text">加载失败</span>&nbsp;
+                                            <span id="tem_text"></span>
+                                            <span id="win_text">次数</span>
+                                            <span id="win_speed">超限</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!--分隔线-->
+                            <div class="line">
+                                <i class="fa-solid fa-link"></i>
+                                <span class="line-text">网站列表</span>
+                            </div>
+                            <!--网站链接-->
+                            <div class="link">
+                                <!--第一组-->
+                                <div class="row">
+                                    <div class="col">
+                                        <a id="link-url-1" href="https://blog.imsyy.top/" target="_blank">
+                                            <div class="link-card cards">
+                                                <i id="link-icon-1" class="fa-solid fa-blog"></i>
+                                                <span class="link-name" id="link-name-1">博客</span>
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="col 2">
+                                        <a id="link-url-2" href="https://pan.imsyy.top/" target="_blank">
+                                            <div class="link-card cards">
+                                                <i id="link-icon-2" class="fa-solid fa-cloud"></i>
+                                                <span class="link-name" id="link-name-2">网盘</span>
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="col">
+                                        <a id="link-url-3" href="https://music.imsyy.top/" target="_blank">
+                                            <div class="link-card cards">
+                                                <i id="link-icon-3" class="fa-solid fa-music"></i>
+                                                <span class="link-name" id="link-name-3">音乐</span>
+                                            </div>
+                                        </a>
+                                    </div>
+                                </div>
+                                <!--第二组-->
+                                <div class="row" style="margin-top: 1.5rem;">
+                                    <div class="col">
+                                        <a id="link-url-4" href="https://nav.imsyy.top/" target="_blank">
+                                            <div class="link-card cards">
+                                                <i id="link-icon-4" class="fa-solid fa-compass"></i>
+                                                <span class="link-name" id="link-name-4">起始页</span>
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="col 2">
+                                        <a id="link-url-5" href="https://web.imsyy.top/" target="_blank">
+                                            <div class="link-card cards">
+                                                <i id="link-icon-5" class="fa-solid fa-book-bookmark"></i>
+                                                <span class="link-name" id="link-name-5">网址集</span>
+                                            </div>
+                                        </a>
+                                    </div>
+                                    <div class="col">
+                                        <a id="link-url-6" href="https://lab.imsyy.top/" target="_blank">
+                                            <div class="link-card cards">
+                                                <i id="link-icon-6" class="fa-solid fa-flask"></i>
+                                                <span class="link-name" id="link-name-6">实验室</span>
+                                            </div>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--展开菜单按钮-->
+                <div class="menu" id="switchmenu">
+                    <a class="munu-button cards" id="menu">
+                        <i class="fa-solid fa-bars"></i>
+                    </a>
+                </div>
+                <!--更多内容-->
+                <div class="more" id="more">
+                    <!--关闭按钮-->
+                    <div class="close fixed-top" id="close">
+                        <i class="fa-solid fa-circle-xmark"></i>
+                    </div>
+                    <div class="line" style="margin-top: 1rem;">
+                        <i class="fa-solid fa-angle-left"></i>
+                        <span class="line-text">时间胶囊</span>
+                        <i class="fa-solid fa-angle-right"></i>
+                    </div>
+                    <div class="date" id="date">
+                        <div class="item" id="dayProgress">
+                            <div class="date-text" style="margin-top: 0rem;">今日已经度过了&nbsp;<span></span>&nbsp;小时</div>
+                            <div class="progress">
+                                <div class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="item" id="weekProgress">
+                            <div class="date-text">本周已经度过了&nbsp;<span></span>&nbsp;天</div>
+                            <div class="progress">
+                                <div class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="item" id="monthProgress">
+                            <div class="date-text">本月已经度过了&nbsp;<span></span>&nbsp;天</div>
+                            <div class="progress">
+                                <div class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="item" id="yearProgress">
+                            <div class="date-text">今年已经度过了&nbsp;<span></span>&nbsp;个月</div>
+                            <div class="progress">
+                                <div class="progress-bar"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="line">
+                        <i class="fa-solid fa-angle-left"></i>
+                        <span class="line-text">杂七杂八</span>
+                        <i class="fa-solid fa-angle-right"></i>
+                    </div>
+                    <!--网站链接-->
+                    <div class="row">
+                        <div class="col">
+                            <a href="https://status.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">站点监测</span>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col 2">
+                            <a href="https://player.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">播放器</span>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="https://write.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">编辑器</span>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row" style="margin-top: 1.5rem;">
+                        <div class="col">
+                            <a href="https://photo.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">时光相册</span>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col 2">
+                            <a href="https://share.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">文件库</span>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a id="openmore">
+                                <div class="link-card cards">
+                                    <span class="link-name">更多</span>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!--更多页面-->
+                <div class="box" id="box" style="display: none">
+                    <div class="box-wrapper">
+                        <!--关闭按钮-->
+                        <div class="closebox fixed-top" id="closemore">
+                            <i class="fa-solid fa-circle-xmark"></i>
+                        </div>
+                        <!--左侧内容-->
+                        <div class="box-left">
+                            <div class="img-title">
+                                <span class="img-title-big" id="logo-title-other">imsyy</span>
+                                <span class="img-text" id="logo-title-other-small">.top</span><br />
+                                <span class="img-text">&nbsp;v&nbsp;3.3</span>
+                                <a href="https://github.com/imsyy/home" target="_blank">
+                                    <i class="fa-brands fa-github"></i>
+                                </a>
+                            </div>
+                            <!--更多内容-->
+                            <div class="accordion" id="accordion">
+                                <div class="accordion-item">
+                                    <h2 class="accordion-header" id="headingOne">
+                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                                            data-bs-target="#collapseOne" aria-expanded="true"
+                                            aria-controls="collapseOne">
+                                            壁纸设置
+                                        </button>
+                                    </h2>
+                                    <div id="collapseOne" class="accordion-collapse collapse show"
+                                        aria-labelledby="headingOne" data-bs-parent="#accordion">
+                                        <div class="accordion-body">
+                                            <div class="set">
+                                                <div class="wallpaper" id="wallpaper">
+                                                    <div class="form-radio">
+                                                        <input type="radio" class="set-wallpaper" style="display: none;"
+                                                            id="radio1" value="1" name="wallpaper-type">
+                                                        <label for="radio1">默认壁纸</label>
+                                                    </div>
+                                                    <div class="form-radio">
+                                                        <input type="radio" class="set-wallpaper" style="display: none;"
+                                                            id="radio2" value="2" name="wallpaper-type">
+                                                        <label for="radio2" id="wallpaper_text1">每日一图</label>
+                                                    </div>
+                                                    <div class="form-radio">
+                                                        <input type="radio" class="set-wallpaper" style="display: none;"
+                                                            id="radio3" value="3" name="wallpaper-type">
+                                                        <label for="radio3" id="wallpaper_text2">随机风景</label>
+                                                    </div>
+                                                    <div class="form-radio">
+                                                        <input type="radio" class="set-wallpaper" style="display: none;"
+                                                            id="radio4" value="4" name="wallpaper-type">
+                                                        <label for="radio4" id="wallpaper_text3">随机动漫</label>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!--更新日志-->
+                                <div class="accordion-item">
+                                    <h2 class="accordion-header" id="headingTwo">
+                                        <button class="accordion-button collapsed" type="button"
+                                            data-bs-toggle="collapse" data-bs-target="#collapseTwo"
+                                            aria-expanded="false" aria-controls="collapseTwo">
+                                            更新日志
+                                        </button>
+                                    </h2>
+                                    <div id="collapseTwo" class="accordion-collapse collapse"
+                                        aria-labelledby="headingTwo" data-bs-parent="#accordion">
+                                        <div class="accordion-body">
+                                            <div class="upnote">
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-circle-plus"></i>&nbsp;音乐歌单支持快速自定义
+                                                </span>
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-circle-plus"></i>&nbsp;壁纸支持个性化设置
+                                                </span>
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-circle-plus"></i>&nbsp;音乐播放器支持音量控制
+                                                </span>
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;修复天气 API
+                                                </span>
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;时光胶囊显示错误
+                                                </span>
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;移动端动画及细节
+                                                </span>
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-screwdriver-wrench"></i>&nbsp;图标更换为 Font
+                                                    Awesome</span>
+                                                <span class="uptext">
+                                                    <i class="fa-solid fa-rotate-left"></i>
+                                                    <a href="./old/" style="color:#efefef">返回旧版站点</a>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!--Aplayer-->
+                        <div class="box-right">
+                            <div id="aplayer">
+                                <span>音乐播放器加载失败</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <!-- 版权信息 -->
+        <footer id="footer" class="fixed-bottom footer">
+            <div class="power">
+                <span id="power">Copyright&nbsp;&copy;
+                    <script>
+                        document.write((new Date()).getFullYear());
+                    </script>
+                    <a href="https://imsyy.top" id="power-text">無名</a>
+                </span>
+                <!-- 以下信息请不要修改哦 -->
+                <span id="made">&amp;&nbsp;Made&nbsp;by&nbsp;<a href="https://github.com/imsyy/home"
+                        target="_blank">imsyy</a></span>
+                <!-- 站点备案 -->
+                <a href="https://beian.miit.gov.cn" id="beian" target="_blank">&amp;&nbsp;豫ICP备2022018134号-1</a>
+            </div>
+            <!-- 歌词显示 -->
+            <div id="lrc"></div>
+        </footer>
+    </section>
+    <!-- sw.js -->
+    <script>
+        if ("serviceWorker" in navigator) {
+            window.addEventListener("load", function () {
+                navigator.serviceWorker.register("sw.js");
+            });
+        }
+    </script>
     <!-- noscript -->
     <noscript>
-      <div style="text-align: center">请开启 JavaScript</div>
+        <div class="noscript fixed-top">请开启 JavaScript</div>
     </noscript>
-    <script type="module" src="/src/main.js"></script>
+    <!-- JS -->
-  </body>
+    <script type="text/javascript" src="./js/main.js"></script>
+    <script type="text/javascript" src="./js/set.js"></script>
+    <script type="text/javascript" src="./js/time.js"></script>
+    <script type="text/javascript" src="./js/js.cookie.js"></script>
+    <script type="text/javascript"
+        src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/bootstrap/5.1.0/js/bootstrap.min.js">
+    </script>
+</body>
+
 </html>

js/51LA.js

@@ -0,0 +1 @@
+!function(t){"use strict";!function(e){var n=window,s=document,i=t,r="".concat("https:"===s.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),c=s.createElement("script"),o=s.getElementsByTagName("script")[0];c.type="text/javascript",c.setAttribute("charset","UTF-8"),c.async=!0,c.src=r,c.id="LA_COLLECT",i.d=c;var a=function(){n.LA.ids.push(i)};n.LA?n.LA.ids&&a():(n.LA=t,n.LA.ids=[],a()),o.parentNode.insertBefore(c,o)}()}({id:"JfXLqaE7jjMvnMIm",ck:"JfXLqaE7jjMvnMIm"}),function(t,e,n,s){var i=e.createElement("script"),r=e.getElementsByTagName("script")[0];i.type="text/javascript",i.crossorigin=!0,i.onload=function(){(new t[s].Monitor).init({id:"JjyTlfI2KkqlOVNL"})},r.parentNode.insertBefore(i,r),i.src=n}(window,document,"https://sdk.51.la/perf/js-sdk-perf.min.js","LingQue");

js/js.cookie.js

@@ -0,0 +1,164 @@
+/*!
+ * JavaScript Cookie v2.2.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+;
+(function (factory) {
+	var registeredInModuleLoader;
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+		registeredInModuleLoader = true;
+	}
+	if (typeof exports === 'object') {
+		module.exports = factory();
+		registeredInModuleLoader = true;
+	}
+	if (!registeredInModuleLoader) {
+		var OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend() {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[i];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function decode(s) {
+		return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
+	}
+
+	function init(converter) {
+		function api() {}
+
+		function set(key, value, attributes) {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			attributes = extend({
+				path: '/'
+			}, api.defaults, attributes);
+
+			if (typeof attributes.expires === 'number') {
+				attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
+			}
+
+			// We're using "expires" because "max-age" is not supported by IE
+			attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
+
+			try {
+				var result = JSON.stringify(value);
+				if (/^[\{\[]/.test(result)) {
+					value = result;
+				}
+			} catch (e) {}
+
+			value = converter.write ?
+				converter.write(value, key) :
+				encodeURIComponent(String(value))
+				.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+
+			key = encodeURIComponent(String(key))
+				.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
+				.replace(/[\(\)]/g, escape);
+
+			var stringifiedAttributes = '';
+			for (var attributeName in attributes) {
+				if (!attributes[attributeName]) {
+					continue;
+				}
+				stringifiedAttributes += '; ' + attributeName;
+				if (attributes[attributeName] === true) {
+					continue;
+				}
+
+				// Considers RFC 6265 section 5.2:
+				// ...
+				// 3.  If the remaining unparsed-attributes contains a %x3B (";")
+				//     character:
+				// Consume the characters of the unparsed-attributes up to,
+				// not including, the first %x3B (";") character.
+				// ...
+				stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
+			}
+
+			return (document.cookie = key + '=' + value + stringifiedAttributes);
+		}
+
+		function get(key, json) {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			var jar = {};
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all.
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var cookie = parts.slice(1).join('=');
+
+				if (!json && cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					var name = decode(parts[0]);
+					cookie = (converter.read || converter)(cookie, name) ||
+						decode(cookie);
+
+					if (json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					jar[name] = cookie;
+
+					if (key === name) {
+						break;
+					}
+				} catch (e) {}
+			}
+
+			return key ? jar[key] : jar;
+		}
+
+		api.set = set;
+		api.get = function (key) {
+			return get(key, false /* read as raw */ );
+		};
+		api.getJSON = function (key) {
+			return get(key, true /* read as json */ );
+		};
+		api.remove = function (key, attributes) {
+			set(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.defaults = {};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init(function () {});
+}));

js/lantern.js

@@ -0,0 +1,21 @@
+/*!
+ * china-lantern v1.6.0
+ * (c) 2020-2021 fz6m
+ * Released under the MIT License.
+ */
+! function (t) {
+    "function" == typeof define && define.amd ? define(t) : t()
+}((function () {
+    "use strict";
+    ! function (t, e) {
+        void 0 === e && (e = {});
+        let n = e.insertAt;
+        if (t && "undefined" != typeof document) {
+            let r = document.head || document.getElementsByTagName("head")[0],
+                a = document.createElement("style");
+            a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t))
+        }
+    };
+    let t;
+    (t = document.createElement("div")).className = "j-china-lantern", t.innerHTML = '<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">新</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">年</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>', document.body.appendChild(t)
+}));

js/main.js

@@ -0,0 +1,488 @@
+/*
+作者: imsyy
+主页：https://www.imsyy.top/
+GitHub：https://github.com/imsyy/home
+版权所有，请勿删除
+*/
+
+//弹窗样式
+iziToast.settings({
+  timeout: 10000,
+  progressBar: false,
+  close: false,
+  closeOnEscape: true,
+  position: "topCenter",
+  transitionIn: "bounceInDown",
+  transitionOut: "flipOutX",
+  displayMode: "replace",
+  layout: "1",
+  backgroundColor: "#00000040",
+  titleColor: "#efefef",
+  messageColor: "#efefef",
+  icon: "Fontawesome",
+  iconColor: "#efefef",
+});
+
+/* 鼠标样式 */
+const body = document.querySelector("body");
+const element = document.getElementById("g-pointer-1");
+const element2 = document.getElementById("g-pointer-2");
+const halfAlementWidth = element.offsetWidth / 2;
+const halfAlementWidth2 = element2.offsetWidth / 2;
+
+function setPosition(x, y) {
+  element2.style.transform = `translate(${x - halfAlementWidth2 + 1}px, ${
+    y - halfAlementWidth2 + 1
+  }px)`;
+}
+
+body.addEventListener("mousemove", (e) => {
+  window.requestAnimationFrame(function () {
+    setPosition(e.clientX, e.clientY);
+  });
+});
+
+//加载完成后执行
+window.addEventListener(
+  "load",
+  function () {
+    //载入动画
+    $("#loading-box").attr("class", "loaded");
+    $("#bg").css(
+      "cssText",
+      "transform: scale(1);filter: blur(0px);transition: ease 1.5s;"
+    );
+    $(".cover").css("cssText", "opacity: 1;transition: ease 1.5s;");
+    $("#section").css(
+      "cssText",
+      "transform: scale(1) !important;opacity: 1 !important;filter: blur(0px) !important"
+    );
+
+    //用户欢迎
+    setTimeout(function () {
+      iziToast.show({
+        timeout: 2500,
+        icon: false,
+        title: hello,
+        message: "欢迎来到我的主页",
+      });
+    }, 800);
+
+    //延迟加载音乐播放器
+    let element = document.createElement("script");
+    element.src = "./js/music.js";
+    document.body.appendChild(element);
+
+    //中文字体缓加载-此处写入字体源文件 （暂时弃用）
+    //先行加载简体中文子集，后续补全字集
+    //由于压缩过后的中文字体仍旧过大，可转移至对象存储或 CDN 加载
+    // const font = new FontFace(
+    //     "MiSans",
+    //     "url(" + "./font/MiSans-Regular.woff2" + ")"
+    // );
+    // document.fonts.add(font);
+
+    //移动端去除鼠标样式
+    if (Boolean(window.navigator.userAgent.match(/AppWebKit.*Mobile.*/))) {
+      $("#g-pointer-2").css("display", "none");
+    }
+  },
+  false
+);
+
+setTimeout(function () {
+  $("#loading-text").html("字体及文件加载可能需要一定时间");
+}, 3000);
+
+// 新春灯笼 （ 需要时可取消注释 ）
+// new_element=document.createElement("link");
+// new_element.setAttribute("rel","stylesheet");
+// new_element.setAttribute("type","text/css");
+// new_element.setAttribute("href","./css/lantern.css");
+// document.body.appendChild(new_element);
+
+// new_element=document.createElement("script");
+// new_element.setAttribute("type","text/javascript");
+// new_element.setAttribute("src","./js/lantern.js");
+// document.body.appendChild(new_element);
+
+//获取一言
+fetch("https://v1.hitokoto.cn?max_length=24")
+  .then((response) => response.json())
+  .then((data) => {
+    $("#hitokoto_text").html(data.hitokoto);
+    $("#from_text").html(data.from);
+  })
+  .catch(console.error);
+
+let times = 0;
+$("#hitokoto").click(function () {
+  if (times == 0) {
+    times = 1;
+    let index = setInterval(function () {
+      times--;
+      if (times == 0) {
+        clearInterval(index);
+      }
+    }, 1000);
+    fetch("https://v1.hitokoto.cn?max_length=24")
+      .then((response) => response.json())
+      .then((data) => {
+        $("#hitokoto_text").html(data.hitokoto);
+        $("#from_text").html(data.from);
+      })
+      .catch(console.error);
+  } else {
+    iziToast.show({
+      timeout: 1000,
+      icon: "fa-solid fa-circle-exclamation",
+      message: "你点太快了吧",
+    });
+  }
+});
+
+// 获取天气
+// 请前往 https://www.mxnzp.com/doc/list 申请 app_id 和 app_secret
+const mainKey = "57eaea5833ff1616cfd1ff2c4cf9b58a"; // 高德开发者 Key
+const getWeather = () => {
+  fetch(`https://restapi.amap.com/v3/ip?key=${mainKey}`)
+    .then((response) => response.json())
+    .then((res) => {
+      const adcode = res.adcode;
+      $("#city_text").html(res.city);
+      fetch(
+        `https://restapi.amap.com/v3/weather/weatherInfo?key=${mainKey}&city=${adcode}`
+      )
+        .then((response) => response.json())
+        .then((res) => {
+          if (res.status) {
+            $("#wea_text").html(res.lives[0].weather);
+            $("#tem_text").html(res.lives[0].temperature + "°C ");
+            $("#win_text").html(res.lives[0].winddirection + "风");
+            $("#win_speed").html(res.lives[0].windpower + "级");
+          } else {
+            console.error("天气信息获取失败");
+            iziToast.show({
+              timeout: 2000,
+              icon: "fa-solid fa-cloud-sun",
+              message: "天气信息获取失败",
+            });
+          }
+        });
+    })
+    .catch((err) => {
+      console.error("天气信息获取失败：" + err);
+      iziToast.show({
+        timeout: 2000,
+        icon: "fa-solid fa-cloud-sun",
+        message: "天气信息获取失败",
+      });
+    });
+};
+
+getWeather();
+
+let wea = 0;
+$("#upWeather").click(function () {
+  if (wea == 0) {
+    wea = 1;
+    let index = setInterval(function () {
+      wea--;
+      if (wea == 0) {
+        clearInterval(index);
+      }
+    }, 60000);
+    getWeather();
+    iziToast.show({
+      timeout: 2000,
+      icon: "fa-solid fa-cloud-sun",
+      message: "实时天气已更新",
+    });
+  } else {
+    iziToast.show({
+      timeout: 1000,
+      icon: "fa-solid fa-circle-exclamation",
+      message: "请稍后再更新哦",
+    });
+  }
+});
+
+//获取时间
+let t = null;
+t = setTimeout(time, 1000);
+
+function time() {
+  clearTimeout(t);
+  dt = new Date();
+  let y = dt.getYear() + 1900;
+  let mm = dt.getMonth() + 1;
+  let d = dt.getDate();
+  let weekday = [
+    "星期日",
+    "星期一",
+    "星期二",
+    "星期三",
+    "星期四",
+    "星期五",
+    "星期六",
+  ];
+  let day = dt.getDay();
+  let h = dt.getHours();
+  let m = dt.getMinutes();
+  let s = dt.getSeconds();
+  if (h < 10) {
+    h = "0" + h;
+  }
+  if (m < 10) {
+    m = "0" + m;
+  }
+  if (s < 10) {
+    s = "0" + s;
+  }
+  $("#time").html(
+    y +
+      "&nbsp;年&nbsp;" +
+      mm +
+      "&nbsp;月&nbsp;" +
+      d +
+      "&nbsp;日&nbsp;" +
+      "<span class='weekday'>" +
+      weekday[day] +
+      "</span><br>" +
+      "<span class='time-text'>" +
+      h +
+      ":" +
+      m +
+      ":" +
+      s +
+      "</span>"
+  );
+  t = setTimeout(time, 1000);
+}
+
+//链接提示文字
+$("#social")
+  .mouseover(function () {
+    $("#social").css({
+      background: "rgb(0 0 0 / 25%)",
+      "border-radius": "6px",
+      "backdrop-filter": "blur(5px)",
+    });
+    $("#link-text").css({
+      display: "block",
+    });
+  })
+  .mouseout(function () {
+    $("#social").css({
+      background: "none",
+      "border-radius": "6px",
+      "backdrop-filter": "none",
+    });
+    $("#link-text").css({
+      display: "none",
+    });
+  });
+
+$("#github")
+  .mouseover(function () {
+    $("#link-text").html("去 Github 看看");
+  })
+  .mouseout(function () {
+    $("#link-text").html("通过这里联系我");
+  });
+$("#qq")
+  .mouseover(function () {
+    $("#link-text").html("有什么事吗");
+  })
+  .mouseout(function () {
+    $("#link-text").html("通过这里联系我");
+  });
+$("#email")
+  .mouseover(function () {
+    $("#link-text").html("来封 Email");
+  })
+  .mouseout(function () {
+    $("#link-text").html("通过这里联系我");
+  });
+$("#bilibili")
+  .mouseover(function () {
+    $("#link-text").html("来 B 站看看 ~");
+  })
+  .mouseout(function () {
+    $("#link-text").html("通过这里联系我");
+  });
+$("#telegram")
+  .mouseover(function () {
+    $("#link-text").html("你懂的 ~");
+  })
+  .mouseout(function () {
+    $("#link-text").html("通过这里联系我");
+  });
+
+//自动变灰
+let myDate = new Date();
+let mon = myDate.getMonth() + 1;
+let date = myDate.getDate();
+let days = ["4.4", "5.12", "7.7", "9.9", "9.18", "12.13"];
+for (let day of days) {
+  let d = day.split(".");
+  if (mon == d[0] && date == d[1]) {
+    document.write(
+      "<style>html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}</style>"
+    );
+    $("#change").html("Silence&nbsp;in&nbsp;silence");
+    $("#change1").html("今天是中国国家纪念日，全站已切换为黑白模式");
+    window.addEventListener(
+      "load",
+      function () {
+        setTimeout(function () {
+          iziToast.show({
+            timeout: 14000,
+            icon: "fa-solid fa-clock",
+            message: "今天是中国国家纪念日",
+          });
+        }, 3800);
+      },
+      false
+    );
+  }
+}
+
+//更多页面切换
+let shoemore = false;
+$("#switchmore").on("click", function () {
+  shoemore = !shoemore;
+  if (shoemore && $(document).width() >= 990) {
+    $("#container").attr("class", "container mores");
+    $("#change").html("Oops&nbsp;!");
+    $("#change1").html("哎呀，这都被你发现了（ 再点击一次可关闭 ）");
+  } else {
+    $("#container").attr("class", "container");
+    $("#change").html("Hello&nbsp;World&nbsp;!");
+    $("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
+  }
+});
+
+//更多页面关闭按钮
+$("#close").on("click", function () {
+  $("#switchmore").click();
+});
+
+//移动端菜单栏切换
+let switchmenu = false;
+$("#switchmenu").on("click", function () {
+  switchmenu = !switchmenu;
+  if (switchmenu) {
+    $("#row").attr("class", "row menus");
+    $("#menu").html("<i class='fa-solid fa-xmark'></i>");
+  } else {
+    $("#row").attr("class", "row");
+    $("#menu").html("<i class='fa-solid fa-bars'></i>");
+  }
+});
+
+//更多弹窗页面
+$("#openmore").on("click", function () {
+  $("#box").css("display", "block");
+  $("#row").css("display", "none");
+  $("#more").css("cssText", "display:none !important");
+});
+$("#closemore").on("click", function () {
+  $("#box").css("display", "none");
+  $("#row").css("display", "flex");
+  $("#more").css("display", "flex");
+});
+
+//监听网页宽度
+window.addEventListener("load", function () {
+  window.addEventListener("resize", function () {
+    //关闭移动端样式
+    if (window.innerWidth >= 600) {
+      $("#row").attr("class", "row");
+      $("#menu").html("<i class='fa-solid fa-bars'></i>");
+      //移除移动端切换功能区
+      $("#rightone").attr("class", "row rightone");
+    }
+
+    if (window.innerWidth <= 990) {
+      //移动端隐藏更多页面
+      $("#container").attr("class", "container");
+      $("#change").html("Hello&nbsp;World&nbsp;!");
+      $("#change1").html("一个建立于 21 世纪的小站，存活于互联网的边缘");
+
+      //移动端隐藏弹窗页面
+      $("#box").css("display", "none");
+      $("#row").css("display", "flex");
+      $("#more").css("display", "flex");
+    }
+  });
+});
+
+//移动端切换功能区
+let changemore = false;
+$("#changemore").on("click", function () {
+  changemore = !changemore;
+  if (changemore) {
+    $("#rightone").attr("class", "row menus mobile");
+  } else {
+    $("#rightone").attr("class", "row menus");
+  }
+});
+
+//更多页面显示关闭按钮
+$("#more").hover(
+  function () {
+    $("#close").css("display", "block");
+  },
+  function () {
+    $("#close").css("display", "none");
+  }
+);
+
+//屏蔽右键
+document.oncontextmenu = function () {
+  iziToast.show({
+    timeout: 2000,
+    icon: "fa-solid fa-circle-exclamation",
+    message: "为了浏览体验，本站禁用右键",
+  });
+  return false;
+};
+
+//控制台输出
+//console.clear();
+let styleTitle1 = `
+font-size: 20px;
+font-weight: 600;
+color: rgb(244,167,89);
+`;
+let styleTitle2 = `
+font-size:12px;
+color: rgb(244,167,89);
+`;
+let styleContent = `
+color: rgb(30,152,255);
+`;
+let title1 = "無名の主页";
+let title2 = `
+ _____ __  __  _______     ____     __
+|_   _|  \\/  |/ ____\\ \\   / /\\ \\   / /
+  | | | \\  / | (___  \\ \\_/ /  \\ \\_/ / 
+  | | | |\\/| |\\___ \\  \\   /    \\   /  
+ _| |_| |  | |____) |  | |      | |   
+|_____|_|  |_|_____/   |_|      |_|                                                     
+`;
+let content = `
+版 本 号：3.4
+更新日期：2022-07-24
+
+主页:  https://www.imsyy.top
+Github:  https://github.com/imsyy/home
+`;
+console.log(
+  `%c${title1} %c${title2}
+%c${content}`,
+  styleTitle1,
+  styleTitle2,
+  styleContent
+);

js/music.js

@@ -0,0 +1,152 @@
+/*
+音乐信息
+
+感谢 @武恩赐 提供的 MetingAPI
+https://api.wuenci.com/meting/api/
+
+作者: imsyy
+主页：https://www.imsyy.top/
+GitHub：https://github.com/imsyy/home
+版权所有，请勿删除
+*/
+let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
+let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
+let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
+
+$.ajax({
+    url: "https://api.wuenci.com/meting/api/?server=" + server + "&type=" + type + "&id=" + id,
+    type: "GET",
+    dataType: "JSON",
+    success: function (data) {
+        const ap = new APlayer({
+            container: document.getElementById('aplayer'),
+            order: 'random',
+            preload: 'auto',
+            listMaxHeight: '336px',
+            volume: '0.5',
+            mutex: true,
+            lrcType: 3,
+            audio: data,
+        });
+
+        /* 底栏歌词 */
+        setInterval(function () {
+            $("#lrc").html("<span class='lrc-show'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.535V3h8v3h-6v11a4 4 0 1 1-2-3.465z' fill='rgba(255,255,255,1)'/></svg>&nbsp;" + $(".aplayer-lrc-current").text() + "&nbsp;<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'><path fill='none' d='M0 0h24v24H0z'/><path d='M12 13.535V3h8v3h-6v11a4 4 0 1 1-2-3.465z' fill='rgba(255,255,255,1)'/></svg></span>");
+        }, 500);
+
+        /* 音乐通知及控制 */
+        ap.on('play', function () {
+            music = $(".aplayer-title").text() + $(".aplayer-author").text();
+            iziToast.info({
+                timeout: 4000,
+                icon: "fa-solid fa-circle-play",
+                displayMode: 'replace',
+                message: music
+            });
+            $("#play").html("<i class='fa-solid fa-pause'>");
+            $("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
+            if ($(document).width() >= 990) {
+                $('.power').css("cssText", "display:none");
+                $('#lrc').css("cssText", "display:block !important");
+            };
+            // Notification.requestPermission().then(res => {
+            //     console.log(res)
+            // });
+            // new Notification('音乐通知', {
+            //     body: '正在播放：' + music,
+            //     tag: 1
+            // });
+        });
+
+        ap.on('pause', function () {
+            $("#play").html("<i class='fa-solid fa-play'>");
+            if ($(document).width() >= 990) {
+                $('#lrc').css("cssText", "display:none !important");
+                $('.power').css("cssText", "display:block");
+            }
+        });
+
+        $("#music").hover(function () {
+            $('.music-text').css("display", "none");
+            $('.music-volume').css("display", "flex");
+        }, function () {
+            $('.music-text').css("display", "block");
+            $('.music-volume').css("display", "none");
+        })
+
+        /* 一言与音乐切换 */
+        $('#open-music').on('click', function () {
+            $('#hitokoto').css("display", "none");
+            $('#music').css("display", "flex");
+        });
+
+        $("#hitokoto").hover(function () {
+            $('#open-music').css("display", "flex");
+        }, function () {
+            $('#open-music').css("display", "none");
+        })
+
+        $('#music-close').on('click', function () {
+            $('#music').css("display", "none");
+            $('#hitokoto').css("display", "flex");
+        });
+
+        /* 上下曲 */
+        $('#play').on('click', function () {
+            ap.toggle();
+            $("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
+        });
+
+        $('#last').on('click', function () {
+            ap.skipBack();
+            ap.play();
+            $("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
+        });
+
+        $('#next').on('click', function () {
+            ap.skipForward();
+            ap.play();
+            $("#music-name").html($(".aplayer-title").text() + $(".aplayer-author").text());
+        });
+
+        window.onkeydown = function (e) {
+            if (e.keyCode == 32) {
+                ap.toggle();
+            }
+        }
+
+        /* 打开音乐列表 */
+        $('#music-open').on('click', function () {
+            if ($(document).width() >= 990) {
+                $('#box').css("display", "block");
+                $('#row').css("display", "none");
+                $('#more').css("cssText", "display:none !important");
+            }
+        });
+
+        //音量调节
+        $("#volume").on('input propertychange touchend', function () {
+            let x = $("#volume").val();
+            ap.volume(x, true);
+            if (x == 0) {
+                $("#volume-ico").html("<i class='fa-solid fa-volume-xmark'></i>");
+            } else if (x > 0 && x <= 0.3) {
+                $("#volume-ico").html("<i class='fa-solid fa-volume-off'></i>");
+            } else if (x > 0.3 && x <= 0.6) {
+                $("#volume-ico").html("<i class='fa-solid fa-volume-low'></i>");
+            } else {
+                $("#volume-ico").html("<i class='fa-solid fa-volume-high'></i>");
+            }
+        });
+    },
+    error: function () {
+        setTimeout(function () {
+            iziToast.info({
+                timeout: 8000,
+                icon: "fa-solid fa-circle-exclamation",
+                displayMode: 'replace',
+                message: '音乐播放器加载失败'
+            });
+        }, 3800);
+    }
+})

js/set.js

@@ -0,0 +1,76 @@
+/*
+作者: imsyy
+主页：https://www.imsyy.top/
+GitHub：https://github.com/imsyy/home
+版权所有，请勿删除
+*/
+
+// 背景图片 Cookies
+function setBgImg(bg_img) {
+  if (bg_img) {
+    Cookies.set("bg_img", bg_img, {
+      expires: 36500,
+    });
+    return true;
+  }
+  return false;
+}
+
+// 获取背景图片 Cookies
+function getBgImg() {
+  let bg_img_local = Cookies.get("bg_img");
+  if (bg_img_local && bg_img_local !== "{}") {
+    return JSON.parse(bg_img_local);
+  } else {
+    setBgImg(bg_img_preinstall);
+    return bg_img_preinstall;
+  }
+}
+
+let bg_img_preinstall = {
+  type: "1", // 1:默认背景 2:每日一图 3:随机风景 4:随机动漫
+  2: "https://api.dujin.org/bing/1920.php", // 每日一图
+  3: "https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images", // 随机风景
+  4: "https://www.dmoe.cc/random.php", // 随机动漫
+};
+
+// 更改背景图片
+function setBgImgInit() {
+  let bg_img = getBgImg();
+  $("input[name='wallpaper-type'][value=" + bg_img["type"] + "]").click();
+
+  switch (bg_img["type"]) {
+    case "1":
+      $("#bg").attr(
+        "src",
+        `./img/background${1 + ~~(Math.random() * 10)}.webp`
+      ); //随机默认壁纸
+      break;
+    case "2":
+      $("#bg").attr("src", bg_img_preinstall[2]); //必应每日
+      break;
+    case "3":
+      $("#bg").attr("src", bg_img_preinstall[3]); //随机风景
+      break;
+    case "4":
+      $("#bg").attr("src", bg_img_preinstall[4]); //随机动漫
+      break;
+  }
+}
+
+$(document).ready(function () {
+  // 壁纸数据加载
+  setBgImgInit();
+  // 设置背景图片
+  $("#wallpaper").on("click", ".set-wallpaper", function () {
+    let type = $(this).val();
+    let bg_img = getBgImg();
+    bg_img["type"] = type;
+    iziToast.show({
+      icon: "fa-solid fa-image",
+      timeout: 2500,
+      message: "壁纸设置成功，刷新后生效",
+    });
+    setBgImg(bg_img);
+  });
+});

js/time.js

@@ -0,0 +1,68 @@
+function init_life_time() {
+    function getAsideLifeTime() {
+        /* 当前时间戳 */
+        let nowDate = +new Date();
+        /* 今天开始时间戳 */
+        let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
+        /* 今天已经过去的时间 */
+        let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
+        /* 今天已经过去的时间比 */
+        let todayPassHoursPercent = (todayPassHours / 24) * 100;
+        $('#dayProgress .date-text span').html(parseInt(todayPassHours));
+        $('#dayProgress .progress .progress-bar').css('width', parseInt(todayPassHoursPercent) + '%');
+        $('#dayProgress .progress .progress-bar').html(parseInt(todayPassHoursPercent) + '%');
+        /* 当前周几 */
+        let weeks = {
+            0: 7,
+            1: 1,
+            2: 2,
+            3: 3,
+            4: 4,
+            5: 5,
+            6: 6
+        };
+        let weekDay = weeks[new Date().getDay()];
+        let weekDayPassPercent = (weekDay / 7) * 100;
+        $('#weekProgress .date-text span').html(weekDay);
+        $('#weekProgress .progress .progress-bar').css('width', parseInt(weekDayPassPercent) + '%');
+        $('#weekProgress .progress .progress-bar').html(parseInt(weekDayPassPercent) + '%');
+        /* 月 */
+        let year = new Date().getFullYear();
+        let date = new Date().getDate();
+        let month = new Date().getMonth() + 1;
+        let monthAll = new Date(year, month, 0).getDate();
+        let monthPassPercent = (date / monthAll) * 100;
+        $('#monthProgress .date-text span').html(date);
+        $('#monthProgress .progress .progress-bar').css('width', parseInt(monthPassPercent) + '%');
+        $('#monthProgress .progress .progress-bar').html(parseInt(monthPassPercent) + '%');
+        /* 年 */
+        let yearPass = (month / 12) * 100;
+        $('#yearProgress .date-text span').html(month);
+        $('#yearProgress .progress .progress-bar').css('width', parseInt(yearPass) + '%');
+        $('#yearProgress .progress .progress-bar').html(parseInt(yearPass) + '%');
+    }
+    getAsideLifeTime();
+    setInterval(() => {
+        getAsideLifeTime();
+    }, 1000);
+}
+init_life_time()
+
+now = new Date(), hour = now.getHours()
+if (hour < 6) {
+    var hello = "凌晨好";
+} else if (hour < 9) {
+    var hello = "早上好";
+} else if (hour < 12) {
+    var hello = "上午好";
+} else if (hour < 14) {
+    var hello = "中午好";
+} else if (hour < 17) {
+    var hello = "下午好";
+} else if (hour < 19) {
+    var hello = "傍晚好";
+} else if (hour < 22) {
+    var hello = "晚上好";
+} else {
+    var hello = "夜深了";
+}

manifest.json

@@ -0,0 +1 @@
+{"name":"無名の主页","short_name":"無名の主页","description":"一个默默无闻的主页","display":"standalone","start_url":"/","theme_color":"#424242","background_color":"#424242","icons":[{"src":"img/icon/48.png","sizes":"48x48","type":"image/png"},{"src":"img/icon/72.png","sizes":"72x72","type":"image/png"},{"src":"img/icon/96.png","sizes":"96x96","type":"image/png"},{"src":"img/icon/128.png","sizes":"128x128","type":"image/png"},{"src":"img/icon/144.png","sizes":"144x144","type":"image/png"},{"src":"img/icon/192.png","sizes":"192x192","type":"image/png"},{"src":"img/icon/512.png","sizes":"512x512","type":"image/png"}]}

package.json

@@ -1,44 +0,0 @@
-{
-  "name": "home",
-  "author": "imsyy",
-  "github": "https://github.com/imsyy/home",
-  "home": "https://imsyy.top",
-  "private": true,
-  "version": "4.1.4",
-  "type": "module",
-  "scripts": {
-    "dev": "vite --host",
-    "build": "vite build",
-    "preview": "vite preview",
-    "format": "prettier --write src/",
-    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix"
-  },
-  "dependencies": {
-    "@worstone/vue-aplayer": "^1.0.6",
-    "aplayer": "^1.10.1",
-    "axios": "^1.6.8",
-    "dayjs": "^1.11.10",
-    "element-plus": "^2.7.1",
-    "fetch-jsonp": "^1.3.0",
-    "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.1",
-    "swiper": "^11.1.1",
-    "vue": "^3.4.24"
-  },
-  "devDependencies": {
-    "@icon-park/vue-next": "^1.4.2",
-    "@vicons/fa": "^0.12.0",
-    "@vicons/utils": "^0.1.4",
-    "@vitejs/plugin-vue": "^4.6.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.25.0",
-    "prettier": "^3.2.5",
-    "sass": "^1.75.0",
-    "terser": "^5.30.4",
-    "unplugin-auto-import": "^0.11.5",
-    "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.5.3",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-pwa": "^0.14.7"
-  }
-}

public/font/README.md

@@ -1,3 +0,0 @@
-## Logo 字体替换
-
-可将该文件夹下的 `Pacifico-Regular-all.ttf` 替换原来的 `Pacifico-Regular.ttf`

src/App.vue

@@ -1,191 +0,0 @@
-<template>
-  <!-- 加载 -->
-  <Loading />
-  <!-- 壁纸 -->
-  <Background @loadComplete="loadComplete" />
-  <!-- 主界面 -->
-  <Transition name="fade" mode="out-in">
-    <main id="main" v-if="store.imgLoadStatus">
-      <div class="container" v-show="!store.backgroundShow">
-        <section class="all" v-show="!store.setOpenState">
-          <MainLeft />
-          <MainRight v-show="!store.boxOpenState" />
-          <Box v-show="store.boxOpenState" />
-        </section>
-        <section class="more" v-show="store.setOpenState" @click="store.setOpenState = false">
-          <MoreSet />
-        </section>
-      </div>
-      <!-- 移动端菜单按钮 -->
-      <Icon
-        class="menu"
-        size="24"
-        v-show="!store.backgroundShow"
-        @click="store.mobileOpenState = !store.mobileOpenState"
-      >
-        <component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
-      </Icon>
-      <!-- 页脚 -->
-      <Transition name="fade" mode="out-in">
-        <Footer v-show="!store.backgroundShow && !store.setOpenState" />
-      </Transition>
-    </main>
-  </Transition>
-</template>
-<script setup>
-import { helloInit, checkDays } from "@/utils/getTime.js";
-import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
-import { mainStore } from "@/store";
-import { Icon } from "@vicons/utils";
-import Loading from "@/components/Loading.vue";
-import MainLeft from "@/views/Main/Left.vue";
-import MainRight from "@/views/Main/Right.vue";
-import Background from "@/components/Background.vue";
-import Footer from "@/components/Footer.vue";
-import Box from "@/views/Box/index.vue";
-import MoreSet from "@/views/MoreSet/index.vue";
-import cursorInit from "@/utils/cursor.js";
-import config from "@/../package.json";
-
-const store = mainStore();
-
-// 页面宽度
-const getWidth = () => {
-  store.setInnerWidth(window.innerWidth);
-};
-
-// 加载完成事件
-const loadComplete = () => {
-  nextTick(() => {
-    // 欢迎提示
-    helloInit();
-    // 默哀模式
-    checkDays();
-  });
-};
-
-// 监听宽度变化
-watch(
-  () => store.innerWidth,
-  (value) => {
-    if (value < 990) {
-      store.boxOpenState = false;
-    }
-  },
-);
-
-onMounted(() => {
-  // 自定义鼠标
-  cursorInit();
-
-  // 屏蔽右键
-  document.oncontextmenu = () => {
-    ElMessage({
-      message: "为了浏览体验，本站禁用右键",
-      grouping: true,
-      duration: 2000,
-    });
-    return false;
-  };
-
-  // 鼠标中键事件
-  window.addEventListener("mousedown", (event) => {
-    if (event.button == 1) {
-      store.backgroundShow = !store.backgroundShow;
-      ElMessage({
-        message: `已${store.backgroundShow ? "开启" : "退出"}壁纸展示状态`,
-        grouping: true,
-      });
-    }
-  });
-
-  // 监听当前页面宽度
-  getWidth();
-  window.addEventListener("resize", getWidth);
-
-  // 控制台输出
-  const styleTitle1 = "font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
-  const styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
-  const styleContent = "color: rgb(30,152,255);";
-  const title1 = "無名の主页";
-  const title2 = `
- _____ __  __  _______     ____     __
-|_   _|  \\/  |/ ____\\ \\   / /\\ \\   / /
-  | | | \\  / | (___  \\ \\_/ /  \\ \\_/ /
-  | | | |\\/| |\\___ \\  \\   /    \\   /
- _| |_| |  | |____) |  | |      | |
-|_____|_|  |_|_____/   |_|      |_|`;
-  const content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
-  console.info(`%c${title1} %c${title2} %c${content}`, styleTitle1, styleTitle2, styleContent);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", getWidth);
-});
-</script>
-
-<style lang="scss" scoped>
-#main {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform: scale(1.2);
-  transition: transform 0.3s;
-  animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-  animation-delay: 0.5s;
-  .container {
-    width: 100%;
-    height: 100vh;
-    margin: 0 auto;
-    .all {
-      width: 100%;
-      height: 100%;
-      padding: 0 0.75rem;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-    }
-    .more {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: #00000080;
-      backdrop-filter: blur(20px);
-      z-index: 2;
-      animation: fade 0.5s;
-    }
-    @media (max-width: 1200px) {
-      padding: 0 2vw;
-    }
-  }
-  .menu {
-    position: fixed;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 84%;
-    left: calc(50% - 28px);
-    width: 56px;
-    height: 34px;
-    background: rgb(0 0 0 / 20%);
-    backdrop-filter: blur(10px);
-    border-radius: 6px;
-    transition: transform 0.3s;
-    animation: fade 0.5s;
-    &:active {
-      transform: scale(0.95);
-    }
-    .i-icon {
-      transform: translateY(2px);
-    }
-    @media (min-width: 721px) {
-      display: none;
-    }
-  }
-}
-</style>

src/api/index.js

@@ -1,75 +0,0 @@
-// import axios from "axios";
-import fetchJsonp from "fetch-jsonp";
-
-/**
- * 音乐播放器
- */
-
-// 获取音乐播放列表
-export const getPlayerList = async (server, type, id) => {
-  const res = await fetch(
-    `${import.meta.env.VITE_SONG_API}?server=${server}&type=${type}&id=${id}`,
-  );
-  const data = await res.json();
-
-  if (data[0].url.startsWith("@")) {
-    // eslint-disable-next-line no-unused-vars
-    const [handle, jsonpCallback, jsonpCallbackFunction, url] = data[0].url.split("@").slice(1);
-    const jsonpData = await fetchJsonp(url).then((res) => res.json());
-    const domain = (
-      jsonpData.req_0.data.sip.find((i) => !i.startsWith("http://ws")) ||
-      jsonpData.req_0.data.sip[0]
-    ).replace("http://", "https://");
-
-    return data.map((v, i) => ({
-      name: v.name || v.title,
-      artist: v.artist || v.author,
-      url: domain + jsonpData.req_0.data.midurlinfo[i].purl,
-      cover: v.cover || v.pic,
-      lrc: v.lrc,
-    }));
-  } else {
-    return data.map((v) => ({
-      name: v.name || v.title,
-      artist: v.artist || v.author,
-      url: v.url,
-      cover: v.cover || v.pic,
-      lrc: v.lrc,
-    }));
-  }
-};
-
-/**
- * 一言
- */
-
-// 获取一言数据
-export const getHitokoto = async () => {
-  const res = await fetch("https://v1.hitokoto.cn");
-  return await res.json();
-};
-
-/**
- * 天气
- */
-
-// 获取高德地理位置信息
-export const getAdcode = async (key) => {
-  const res = await fetch(`https://restapi.amap.com/v3/ip?key=${key}`);
-  return await res.json();
-};
-
-// 获取高德地理天气信息
-export const getWeather = async (key, city) => {
-  const res = await fetch(
-    `https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`,
-  );
-  return await res.json();
-};
-
-// 获取教书先生天气 API
-// https://api.oioweb.cn/doc/weather/GetWeather
-export const getOtherWeather = async () => {
-  const res = await fetch("https://api.oioweb.cn/api/weather/GetWeather");
-  return await res.json();
-};

src/assets/siteLinks.json

@@ -1,37 +0,0 @@
-[
-  {
-    "icon": "Blog",
-    "name": "博客",
-    "link": "https://blog.imsyy.top/"
-  },
-  {
-    "icon": "Cloud",
-    "name": "网盘",
-    "link": "https://pan.imsyy.top/"
-  },
-  {
-    "icon": "CompactDisc",
-    "name": "音乐",
-    "link": "https://music.imsyy.top/"
-  },
-  {
-    "icon": "Compass",
-    "name": "起始页",
-    "link": "https://nav.imsyy.top/"
-  },
-  {
-    "icon": "Book",
-    "name": "网址集",
-    "link": "https://web.imsyy.top/"
-  },
-  {
-    "icon": "Fire",
-    "name": "今日热榜",
-    "link": "https://hot.imsyy.top/"
-  },
-  {
-    "icon": "LaptopCode",
-    "name": "站点监测",
-    "link": "https://status.imsyy.top/"
-  }
-]

src/assets/socialLinks.json

@@ -1,38 +0,0 @@
-[
-  {
-    "name": "Github",
-    "icon": "/images/icon/github.png",
-    "tip": "去 Github 看看",
-    "url": "https://github.com/imsyy"
-  },
-  {
-    "name": "BiliBili",
-    "icon": "/images/icon/bilibili.png",
-    "tip": "(゜-゜)つロ 干杯 ~",
-    "url": "https://space.bilibili.com/98544142"
-  },
-  {
-    "name": "QQ",
-    "icon": "/images/icon/qq.png",
-    "tip": "有什么事吗",
-    "url": "https://res.abeim.cn/api/qq/?qq=1539250352"
-  },
-  {
-    "name": "Email",
-    "icon": "/images/icon/email.png",
-    "tip": "来封 Email ~",
-    "url": "mailto:one@imsyy.top"
-  },
-  {
-    "name": "Twitter",
-    "icon": "/images/icon/twitter.png",
-    "tip": "你懂的 ~",
-    "url": "https://twitter.com/iimmsyy"
-  },
-  {
-    "name": "Telegram",
-    "icon": "/images/icon/telegram.png",
-    "tip": "你懂的 ~",
-    "url": "https://t.me/bottom_user"
-  }
-]

src/components/Background.vue

@@ -1,171 +0,0 @@
-<template>
-  <div :class="store.backgroundShow ? 'cover show' : 'cover'">
-    <img
-      v-show="store.imgLoadStatus"
-      :src="bgUrl"
-      class="bg"
-      alt="cover"
-      @load="imgLoadComplete"
-      @error.once="imgLoadError"
-      @animationend="imgAnimationEnd"
-    />
-    <div :class="store.backgroundShow ? 'gray hidden' : 'gray'" />
-    <Transition name="fade" mode="out-in">
-      <a
-        v-if="store.backgroundShow && store.coverType != '3'"
-        class="down"
-        :href="bgUrl"
-        target="_blank"
-      >
-        下载壁纸
-      </a>
-    </Transition>
-  </div>
-</template>
-
-<script setup>
-import { mainStore } from "@/store";
-import { Error } from "@icon-park/vue-next";
-
-const store = mainStore();
-const bgUrl = ref(null);
-const imgTimeout = ref(null);
-const emit = defineEmits(["loadComplete"]);
-
-// 壁纸随机数
-// 请依据文件夹内的图片个数修改 Math.random() 后面的第一个数字
-const bgRandom = Math.floor(Math.random() * 10 + 1);
-
-// 更换壁纸链接
-const changeBg = (type) => {
-  if (type == 0) {
-    bgUrl.value = `/images/background${bgRandom}.jpg`;
-  } else if (type == 1) {
-    bgUrl.value = "https://api.dujin.org/bing/1920.php";
-  } else if (type == 2) {
-    bgUrl.value = "https://api.vvhan.com/api/wallpaper/views";
-  } else if (type == 3) {
-    bgUrl.value = "https://api.vvhan.com/api/wallpaper/acg";
-  }
-};
-
-// 图片加载完成
-const imgLoadComplete = () => {
-  imgTimeout.value = setTimeout(
-    () => {
-      store.setImgLoadStatus(true);
-    },
-    Math.floor(Math.random() * (600 - 300 + 1)) + 300,
-  );
-};
-
-// 图片动画完成
-const imgAnimationEnd = () => {
-  console.log("壁纸加载且动画完成");
-  // 加载完成事件
-  emit("loadComplete");
-};
-
-// 图片显示失败
-const imgLoadError = () => {
-  console.error("壁纸加载失败：", bgUrl.value);
-  ElMessage({
-    message: "壁纸加载失败，已临时切换回默认",
-    icon: h(Error, {
-      theme: "filled",
-      fill: "#efefef",
-    }),
-  });
-  bgUrl.value = `/images/background${bgRandom}.jpg`;
-};
-
-// 监听壁纸切换
-watch(
-  () => store.coverType,
-  (value) => {
-    changeBg(value);
-  },
-);
-
-onMounted(() => {
-  // 加载壁纸
-  changeBg(store.coverType);
-});
-
-onBeforeUnmount(() => {
-  clearTimeout(imgTimeout.value);
-});
-</script>
-
-<style lang="scss" scoped>
-.cover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: 0.25s;
-  z-index: -1;
-
-  &.show {
-    z-index: 1;
-  }
-
-  .bg {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    backface-visibility: hidden;
-    filter: blur(20px) brightness(0.3);
-    transition:
-      filter 0.3s,
-      transform 0.3s;
-    animation: fade-blur-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-    animation-delay: 0.45s;
-  }
-  .gray {
-    opacity: 1;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100%),
-      radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
-
-    transition: 1.5s;
-    &.hidden {
-      opacity: 0;
-      transition: 1.5s;
-    }
-  }
-  .down {
-    font-size: 16px;
-    color: white;
-    position: absolute;
-    bottom: 30px;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    display: block;
-    padding: 20px 26px;
-    border-radius: 8px;
-    background-color: #00000030;
-    width: 120px;
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &:hover {
-      transform: scale(1.05);
-      background-color: #00000060;
-    }
-    &:active {
-      transform: scale(1);
-    }
-  }
-}
-</style>

src/components/Footer.vue

@@ -1,120 +0,0 @@
-<template>
-  <footer id="footer" :class="store.footerBlur ? 'blur' : null">
-    <Transition name="fade" mode="out-in">
-      <div v-if="!store.playerState || !store.playerLrcShow" class="power">
-        <span>
-          Copyright&nbsp;&copy;
-          <span v-if="siteStartDate?.length >= 4" class="site-start">
-            {{ siteStartDate.substring(0, 4) }}
-            -
-          </span>
-          {{ fullYear }}
-          <a :href="siteUrl">{{ siteAnthor }}</a>
-        </span>
-        <!-- 以下信息请不要修改哦 -->
-        <span class="hidden">
-          &amp;&nbsp;Made&nbsp;by
-          <a :href="config.github" target="_blank">
-            {{ config.author }}
-          </a>
-        </span>
-        <!-- 站点备案 -->
-        <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
-          &amp;
-          {{ siteIcp }}
-        </a>
-      </div>
-      <div v-else class="lrc">
-        <Transition name="fade" mode="out-in">
-          <div class="lrc-all" :key="store.getPlayerLrc">
-            <music-one theme="filled" size="18" fill="#efefef" />
-            <span class="lrc-text text-hidden" v-html="store.getPlayerLrc" />
-            <music-one theme="filled" size="18" fill="#efefef" />
-          </div>
-        </Transition>
-      </div>
-    </Transition>
-  </footer>
-</template>
-
-<script setup>
-import { MusicOne } from "@icon-park/vue-next";
-import { mainStore } from "@/store";
-import config from "@/../package.json";
-
-const store = mainStore();
-const fullYear = new Date().getFullYear();
-
-// 加载配置数据
-const siteStartDate = ref(import.meta.env.VITE_SITE_START);
-const siteIcp = ref(import.meta.env.VITE_SITE_ICP);
-const siteAnthor = ref(import.meta.env.VITE_SITE_ANTHOR);
-const siteUrl = computed(() => {
-  const url = import.meta.env.VITE_SITE_URL;
-  if (!url) return "https://www.imsyy.top";
-  // 判断协议前缀
-  if (!url.startsWith("http://") && !url.startsWith("https://")) {
-    return "//" + url;
-  }
-  return url;
-});
-</script>
-
-<style lang="scss" scoped>
-#footer {
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 46px;
-  line-height: 46px;
-  text-align: center;
-  z-index: 0;
-  font-size: 14px;
-  .power {
-    animation: fade 0.3s;
-  }
-  .lrc {
-    padding: 0 20px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    .lrc-all {
-      width: 98%;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      .lrc-text {
-        margin: 0 8px;
-      }
-      .i-icon {
-        width: 18px;
-        height: 18px;
-        display: inherit;
-      }
-    }
-  }
-  &.blur {
-    backdrop-filter: blur(10px);
-    background: rgb(0 0 0 / 25%);
-    font-size: 16px;
-  }
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.15s ease-in-out;
-  }
-  @media (max-width: 720px) {
-    font-size: 0.85rem;
-    &.blur {
-      font-size: 0.85rem;
-    }
-  }
-  @media (max-width: 480px) {
-    .hidden {
-      display: none;
-    }
-  }
-}
-</style>

src/components/Hitokoto.vue

@@ -1,128 +0,0 @@
-<template>
-  <div
-    class="hitokoto cards"
-    v-show="!store.musicOpenState"
-    @mouseenter="openMusicShow = true"
-    @mouseleave="openMusicShow = false"
-    @click.stop
-  >
-    <!-- 打开音乐面板 -->
-    <Transition name="el-fade-in-linear">
-      <div
-        class="open-music"
-        v-show="openMusicShow && store.musicIsOk"
-        @click="store.musicOpenState = true"
-      >
-        <music-menu theme="filled" size="18" fill="#efefef" />
-        <span>打开音乐播放器</span>
-      </div>
-    </Transition>
-    <!-- 一言内容 -->
-    <Transition name="el-fade-in-linear" mode="out-in">
-      <div :key="hitokotoData.text" class="content" @click="updateHitokoto">
-        <span class="text">{{ hitokotoData.text }}</span>
-        <span class="from">-「&nbsp;{{ hitokotoData.from }}&nbsp;」</span>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup>
-import { MusicMenu, Error } from "@icon-park/vue-next";
-import { getHitokoto } from "@/api";
-import { mainStore } from "@/store";
-import debounce from "@/utils/debounce.js";
-
-const store = mainStore();
-
-// 开启音乐面板按钮显隐
-const openMusicShow = ref(false);
-
-// 一言数据
-const hitokotoData = reactive({
-  text: "这里应该显示一句话",
-  from: "無名",
-});
-
-// 获取一言数据
-const getHitokotoData = async () => {
-  try {
-    const result = await getHitokoto();
-    hitokotoData.text = result.hitokoto;
-    hitokotoData.from = result.from;
-  } catch (error) {
-    ElMessage({
-      message: "一言获取失败",
-      icon: h(Error, {
-        theme: "filled",
-        fill: "#efefef",
-      }),
-    });
-    hitokotoData.text = "这里应该显示一句话";
-    hitokotoData.from = "無名";
-  }
-};
-
-// 更新一言数据
-const updateHitokoto = () => {
-  // 防抖
-  debounce(() => {
-    getHitokotoData();
-  }, 500);
-};
-
-onMounted(() => {
-  getHitokotoData();
-});
-</script>
-
-<style lang="scss" scoped>
-.hitokoto {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  animation: fade 0.5s;
-  .open-music {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #00000026;
-    padding: 4px 0;
-    border-radius: 8px 8px 0 0;
-    .i-icon {
-      width: 18px;
-      height: 18px;
-      display: block;
-      margin-right: 8px;
-    }
-    span {
-      font-size: 0.95rem;
-    }
-  }
-  .content {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    .text {
-      font-size: 1.1rem;
-      word-break: break-all;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-    }
-    .from {
-      margin-top: 10px;
-      font-weight: bold;
-      align-self: flex-end;
-      font-size: 1.1rem;
-    }
-  }
-}
-</style>

src/components/Links.vue

@@ -1,182 +0,0 @@
-<template>
-  <div v-if="siteLinks[0]" class="links">
-    <div class="line">
-      <Icon size="20">
-        <Link />
-      </Icon>
-      <span class="title">网站列表</span>
-    </div>
-    <!-- 网站列表 -->
-    <Swiper
-      v-if="siteLinks[0]"
-      :modules="[Pagination, Mousewheel]"
-      :slides-per-view="1"
-      :space-between="40"
-      :pagination="{
-        el: '.swiper-pagination',
-        clickable: true,
-        bulletElement: 'div',
-      }"
-      :mousewheel="true"
-    >
-      <SwiperSlide v-for="site in siteLinksList" :key="site">
-        <el-row class="link-all" :gutter="20">
-          <el-col v-for="(item, index) in site" :span="8" :key="item">
-            <div
-              class="item cards"
-              :style="index < 3 ? 'margin-bottom: 20px' : null"
-              @click="jumpLink(item)"
-            >
-              <Icon size="26">
-                <component :is="siteIcon[item.icon]" />
-              </Icon>
-              <span class="name text-hidden">{{ item.name }}</span>
-            </div>
-          </el-col>
-        </el-row>
-      </SwiperSlide>
-      <div class="swiper-pagination" />
-    </Swiper>
-  </div>
-</template>
-
-<script setup>
-import { Icon } from "@vicons/utils";
-// 可前往 https://www.xicons.org 自行挑选并在此处引入
-import { Link, Blog, CompactDisc, Cloud, Compass, Book, Fire, LaptopCode } from "@vicons/fa"; // 注意使用正确的类别
-import { mainStore } from "@/store";
-import { Swiper, SwiperSlide } from "swiper/vue";
-import { Pagination, Mousewheel } from "swiper/modules";
-import siteLinks from "@/assets/siteLinks.json";
-
-const store = mainStore();
-
-// 计算网站链接
-const siteLinksList = computed(() => {
-  const result = [];
-  for (let i = 0; i < siteLinks.length; i += 6) {
-    const subArr = siteLinks.slice(i, i + 6);
-    result.push(subArr);
-  }
-  return result;
-});
-
-// 网站链接图标
-const siteIcon = {
-  Blog,
-  Cloud,
-  CompactDisc,
-  Compass,
-  Book,
-  Fire,
-  LaptopCode,
-};
-
-// 链接跳转
-const jumpLink = (data) => {
-  if (data.name === "音乐" && store.musicClick) {
-    if (typeof $openList === "function") $openList();
-  } else {
-    window.open(data.link, "_blank");
-  }
-};
-
-onMounted(() => {
-  console.log(siteLinks);
-});
-</script>
-
-<style lang="scss" scoped>
-.links {
-  .line {
-    margin: 2rem 0.25rem 1rem;
-    font-size: 1.1rem;
-    display: flex;
-    align-items: center;
-    animation: fade 0.5s;
-    .title {
-      margin-left: 8px;
-      font-size: 1.15rem;
-      text-shadow: 0 0 5px #00000050;
-    }
-  }
-  .swiper {
-    left: -10px;
-    width: calc(100% + 20px);
-    padding: 5px 10px 0;
-    z-index: 0;
-    .swiper-slide {
-      height: 100%;
-    }
-    .swiper-pagination {
-      margin-top: 12px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      :deep(.swiper-pagination-bullet) {
-        background-color: #fff;
-        width: 20px;
-        height: 4px;
-        margin: 0 4px;
-        border-radius: 4px;
-        opacity: 0.2;
-        transition: opacity 0.3s;
-        &.swiper-pagination-bullet-active {
-          opacity: 1;
-        }
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-  }
-  .link-all {
-    height: 220px;
-    .item {
-      height: 100px;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      justify-content: center;
-      padding: 0 10px;
-      animation: fade 0.5s;
-
-      &:hover {
-        transform: scale(1.02);
-        background: rgb(0 0 0 / 40%);
-        transition: 0.3s;
-      }
-
-      &:active {
-        transform: scale(1);
-      }
-
-      .name {
-        font-size: 1.1rem;
-        margin-left: 8px;
-      }
-      @media (min-width: 720px) and (max-width: 820px) {
-        .name {
-          display: none;
-        }
-      }
-      @media (max-width: 720px) {
-        height: 80px;
-      }
-      @media (max-width: 460px) {
-        flex-direction: column;
-        .name {
-          font-size: 1rem;
-          margin-left: 0;
-          margin-top: 8px;
-        }
-      }
-    }
-    @media (max-width: 720px) {
-      height: 180px;
-    }
-  }
-}
-</style>