first commit

This commit is contained in:
底层用户 2022-03-21 16:42:56 +08:00
commit 7cd555fdae
30 changed files with 3673 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.vscode

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022 imsyy
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

44
README.md Normal file
View File

@ -0,0 +1,44 @@
<p>
<strong><h2>Snavigation</h2></strong>
一个简约的起始页
</p>
![Snavigation](https://img.imsyy.top/other/Snavigation.png)
>尚未完成
### Demo
>由于 CDN 缓存原因,查看最新效果可能需要 `Ctrl` + `F5` 强制刷新浏览器缓存
- [Snavigation](https://nav.imsyy.top)
### 功能
- [x] 载入动画
- [x] 搜索引擎切换
- [x] 时间及天气显示
- [x] 快捷方式自定义
- [x] 网站背景自定义
- [x] 数据备份及恢复
- [x] 移动端适配
* [ ] 还没想好呢
### 插件
* [iziToast](https://izitoast.marcelodolza.com/)
* [Iconfont](https://www.iconfont.cn/)
* [jQuery](https://jquery.com/)
### API
* [小歪 API](https://api.ixiaowai.cn/)
* [天气 API](https://www.tianqiapi.com/)
### 鸣谢
本站部分内容参考自
* [青柠起始页](https://limestart.cn/)
* [sou2](https://github.com/yeetime/sou2/)
<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>

202
css/animation.css Normal file
View File

@ -0,0 +1,202 @@
/*渐入动画*/
@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;
}
}
/*文字闪烁*/
@-webkit-keyframes fadenum {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadenum {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadenum {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadenum {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*下沉动画*/
@-moz-keyframes down {
0% {
opacity: 0;
top: 44%;
/* -webkit-transform: translateY(-25%);
-moz-transform: translateY(-25%);
-o-transform: translateY(-25%);
-ms-transform: translateY(-25%);
transform: translateY(-25%) */
}
100% {
opacity: 1;
-ms-filter: none;
filter: none;
top: 46%;
/* -webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
-o-transform: translateY(-20%);
-ms-transform: translateY(-20%);
transform: translateY(-20%) */
}
}
@-webkit-keyframes down {
0% {
opacity: 0;
top: 44%;
/* -webkit-transform: translateY(-25%);
-moz-transform: translateY(-25%);
-o-transform: translateY(-25%);
-ms-transform: translateY(-25%);
transform: translateY(-25%) */
}
100% {
opacity: 1;
-ms-filter: none;
filter: none;
top: 46%;
/* -webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
-o-transform: translateY(-20%);
-ms-transform: translateY(-20%);
transform: translateY(-20%) */
}
}
@-o-keyframes down {
0% {
opacity: 0;
top: 44%;
/* -webkit-transform: translateY(-25%);
-moz-transform: translateY(-25%);
-o-transform: translateY(-25%);
-ms-transform: translateY(-25%);
transform: translateY(-25%) */
}
100% {
opacity: 1;
-ms-filter: none;
filter: none;
top: 46%;
/* -webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
-o-transform: translateY(-20%);
-ms-transform: translateY(-20%);
transform: translateY(-20%) */
}
}
@keyframes down {
0% {
opacity: 0;
top: 44%;
/* -webkit-transform: translateY(-25%);
-moz-transform: translateY(-25%);
-o-transform: translateY(-25%);
-ms-transform: translateY(-25%);
transform: translateY(-25%) */
}
100% {
opacity: 1;
-ms-filter: none;
filter: none;
top: 46%;
/* -webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
-o-transform: translateY(-20%);
-ms-transform: translateY(-20%);
transform: translateY(-20%) */
}
}

0
css/firefox.css Normal file
View File

92
css/font.css Normal file
View File

@ -0,0 +1,92 @@
@font-face {
font-family: "MiSans";
src: url('../font/MiSans-Regular.woff') format('woff');
}
@font-face {
font-family: "iconfont";
/* Project id 3222465 */
src: url('//at.alicdn.com/t/font_3222465_kuwc8yy7j9g.woff2?t=1647790391080') format('woff2'),
url('//at.alicdn.com/t/font_3222465_kuwc8yy7j9g.woff?t=1647790391080') format('woff'),
url('//at.alicdn.com/t/font_3222465_kuwc8yy7j9g.ttf?t=1647790391080') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-tianjia-:before {
content: "\e643";
}
.icon-taobao:before {
content: "\e755";
}
.icon-jingdong:before {
content: "\e618";
}
.icon-xinlangweibo:before {
content: "\e601";
}
.icon-zhihu:before {
content: "\e60a";
}
.icon-github:before {
content: "\e691";
}
.icon-delete:before {
content: "\e94d";
}
.icon-home:before {
content: "\e964";
}
.icon-xiugai:before {
content: "\e626";
}
.icon-bilibilidonghua:before {
content: "\e8b1";
}
.icon-wangluo:before {
content: "\e600";
}
.icon-sougousousuo:before {
content: "\e685";
}
.icon-360sousuo:before {
content: "\e64d";
}
.icon-baidu:before {
content: "\eb49";
}
.icon-bing:before {
content: "\eb4c";
}
.icon-google:before {
content: "\ebaa";
}
.icon-shezhi:before {
content: "\e634";
}
.icon-sousuo:before {
content: "\e635";
}

127
css/loading.css Normal file
View File

@ -0,0 +1,127 @@
@charset "utf-8";
#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);
}
}

94
css/mobile.css Normal file
View File

@ -0,0 +1,94 @@
@charset "utf-8";
/*小于1200px时*/
@media (max-width: 1200px) {
/*书签及设置高度*/
.mark,
.set {
margin-top: 180px;
}
}
/*小于720px时*/
@media (max-width: 720px) {
/*书签*/
.quick,
.quicks {
width: 23%;
min-width: 23%;
max-width: 23%;
}
}
/*小于512px时*/
@media (max-width: 512px) {
/*文字大小*/
#time_text {
font-size: 2.75rem;
}
#day {
font-size: 1.05rem;
}
.weather {
font-size: 1rem;
}
.wd::-webkit-input-placeholder {
letter-spacing: 1px;
font-size: 0.95rem;
}
/*搜索引擎*/
.se-li {
width: 31.33%;
min-width: 31.33%;
max-width: 31.33%;
}
/*设置按钮*/
#menu i {
font-size: 1.45rem;
}
/*书签*/
.quick,
.quicks {
width: 31.33%;
min-width: 31.33%;
max-width: 31.33%;
}
/*壁纸设置*/
#wallpaper {
flex-wrap: wrap;
}
#wallpaper_text {
margin-top: 0px;
}
.form-radio {
margin: 0px 10px 30px 0px;
}
/*隐藏*/
.mobile {
display: none;
}
}
/* 大于568px时 */
@media (min-width: 568px) {
.iziToast {
border-radius: 30px !important;
}
.iziToast-wrapper {
padding: 10px 0px !important;
}
}

1010
css/style.css Normal file

File diff suppressed because it is too large Load Diff

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
font/MiSans-Regular.woff Normal file

Binary file not shown.

BIN
img/background1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
img/background10.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
img/background2.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

BIN
img/background3.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

BIN
img/background4.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 KiB

BIN
img/background5.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

BIN
img/background6.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
img/background7.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
img/background8.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

BIN
img/background9.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

BIN
img/icon/favicon - 128.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

BIN
img/icon/favicon - 32.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
img/icon/favicon - 64.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

523
index.html Normal file
View File

@ -0,0 +1,523 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snavigation</title>
<link rel="icon" href="favicon.ico">
<!-- jQuery -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/font.css">
<link rel="stylesheet" type="text/css" href="./css/loading.css">
<link rel="stylesheet" type="text/css" href="./css/mobile.css">
<link rel="stylesheet" type="text/css" href="./css/firefox.css">
<link rel="stylesheet" type="text/css" href="./css/animation.css">
<!-- Izitoast -->
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/css/iziToast.min.css">
<script type="text/javascript"
src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/js/iziToast.min.js">
</script>
</head>
<body>
<!--加载动画-->
<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">Snavigation</p>
<span id="loading-text">加载中</span>
</div>
</div>
</div>
<!-- 背景图片 -->
<div class="bg-all">
<img id="bg" onerror="this.classList.add('error');"></img>
<div class="cover"></div>
</div>
<!-- 主体内容 -->
<section id="section" class="section">
<!-- 搜索框 -->
<div id="content">
<div class="con">
<!-- 时间天气 -->
<div class="tool-all">
<div class="time">
<span id="time_text">00<span id="point">:</span>00</span>
<span id="day">0&nbsp;&nbsp;00&nbsp;&nbsp;周一</span>
</div>
<div class="weather">
<span id="wea_text">N/A</span>&nbsp;<span id="tem2">N/A</span>°C&nbsp;~&nbsp;<span
id="tem1">N/A</span>°C
</div>
</div>
<!-- 搜索框 -->
<div class="sou">
<form class="search" action="https://www.baidu.com/s" target="_Blank">
<div class="all-search">
<div class="se" title="点击切换搜索引擎">
<i id="icon-se" class="iconfont icon-baidu"></i>
</div>
<input class="wd" type="text" name="wd" placeholder="想要搜点什么" onfocus="this.placeholder=''"
onblur="this.placeholder='想要搜点什么'" autocomplete="off" required="required">
<div class="sou-button">
<button class="s" id="s-button">
<i id="icon-sou" class="iconfont icon-sousuo"></i>
</button>
</div>
</div>
</form>
<div id="keywords" style="display: none;"></div>
<div class="search-engine" style="display: none;">
<div class="search-engine-list">
<div class="se-li">
<a class="se-li-text" data-url="https://www.baidu.com/s" data-name="wd"
data-icon="iconfont icon-baidu">
<i id="icon-sou-list" class="iconfont icon-sousuo"></i>
<span>百度</span>
</a>
</div>
<div class="se-li" data-url="https://cn.bing.com/search" data-name="q"
data-icon="iconfont icon-bing">
<a class="se-li-text">
<i id="icon-sou-list" class="iconfont icon-bing"></i>
<span>必应</span>
</a>
</div>
<div class="se-li" data-url="https://www.google.com/search" data-name="q"
data-icon="iconfont icon-google">
<a class="se-li-text">
<i id="icon-sou-list" class="iconfont icon-google"></i>
<span>谷歌</span>
</a>
</div>
<div class="se-li" data-url="https://www.sogou.com/web" data-name="query"
data-icon="iconfont icon-bing">
<a class="se-li-text">
<i id="icon-sou-list" class="iconfont icon-sougousousuo"></i>
<span>搜狗</span>
</a>
</div>
</div>
</div>
</div>
<!-- 书签页 -->
<div class="mark" style="display: none;">
<div class="tab">
<div class="tab-item active">常用</div>
<div class="tab-item">工具</div>
<div class="tab-item">开发</div>
<div class="tab-item">娱乐</div>
<div class="tab-item">学习</div>
<div class="tab-item">设计</div>
</div>
<div class="content products">
<!-- 常用 -->
<div class="mainCont selected">
<div class="quick-all">
<div class="quick" data-s="bilibili" title="哔哩哔哩 (゜-゜)つロ 干杯~">
<a href="https://www.bilibili.com/" target="_blank">
哔哩哔哩
</a>
</div>
<div class="quick" data-s="github" title="GitHub">
<a href="https://github.com/" target="_blank">
GitHub
</a>
</div>
<div class="quick" data-s="v2ex" title="V2EX">
<a href="https://www.v2ex.com/" target="_blank">
V2EX
</a>
</div>
<div class="quick" data-s="steam" title="Steam">
<a href="https://store.steampowered.com/" target="_blank">
Steam
</a>
</div>
<div class="quick" data-s="scp" title="控制,收容,保护">
<a href="http://scp-wiki-cn.wikidot.com/" target="_blank">
scp基金会2
</a>
</div>
</div>
</div>
<!-- 工具 -->
<div class="mainCont">
<div class="quick-alls">
<div class="quicks" data-s="bilibili" title="哔哩哔哩 (゜-゜)つロ 干杯~">
<a href="https://www.bilibili.com/" target="_blank">
哔哩哔哩
</a>
</div>
<div class="quicks" data-s="github" title="GitHub">
<a href="https://github.com/" target="_blank">
GitHub
</a>
</div>
<div class="quicks" data-s="v2ex" title="V2EX">
<a href="https://www.v2ex.com/" target="_blank">
V2EX
</a>
</div>
<div class="quicks" data-s="steam" title="Steam">
<a href="https://store.steampowered.com/" target="_blank">
Steam
</a>
</div>
</div>
</div>
<!-- 开发 -->
<div class="mainCont">
<div class="quick-alls">
<div class="quicks" data-s="bilibili" title="哔哩哔哩 (゜-゜)つロ 干杯~">
<a href="https://www.bilibili.com/" target="_blank">
哔哩哔哩
</a>
</div>
<div class="quicks" data-s="github" title="GitHub">
<a href="https://github.com/" target="_blank">
GitHub
</a>
</div>
</div>
</div>
<!-- 娱乐 -->
<div class="mainCont">
<div class="quick-alls">
<div class="quicks" data-s="bilibili" title="哔哩哔哩 (゜-゜)つロ 干杯~">
<a href="https://www.bilibili.com/" target="_blank">
哔哩哔哩
</a>
</div>
<div class="quicks" data-s="github" title="GitHub">
<a href="https://github.com/" target="_blank">
GitHub
</a>
</div>
</div>
</div>
<!-- 学习 -->
<div class="mainCont">
<div class="quick-alls">
<div class="quicks" data-s="bilibili" title="哔哩哔哩 (゜-゜)つロ 干杯~">
<a href="https://www.bilibili.com/" target="_blank">
哔哩哔哩
</a>
</div>
<div class="quicks" data-s="github" title="GitHub">
<a href="https://github.com/" target="_blank">
GitHub
</a>
</div>
</div>
</div>
<!-- 设计 -->
<div class="mainCont">
<div class="quick-alls">
<div class="quicks" data-s="bilibili" title="哔哩哔哩 (゜-゜)つロ 干杯~">
<a href="https://www.bilibili.com/" target="_blank">
哔哩哔哩
</a>
</div>
<div class="quicks" data-s="github" title="GitHub">
<a href="https://github.com/" target="_blank">
GitHub
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 设置图标 -->
<div id="menu">
<i id="icon-menu" class="iconfont icon-shezhi"></i>
</div>
<!-- 设置页 -->
<div class="set" style="display: none;">
<div class="tabs">
<div class="tab-items actives">搜索引擎</div>
<div class="tab-items" id="set-quick-menu">快捷方式</div>
<div class="tab-items">背景图片</div>
<div class="tab-items">数据备份</div>
</div>
<div class="contents productss">
<!-- 搜索引擎设置 -->
<div class="mainConts selected">
<div class="set_blocks">
<div class="set_blocks_content">
<div class="se_list">
<div class="se_list_table">
<div class="se_list_div">
<div class="se_list_num">
<i class="iconfont icon-home"></i>
</div>
<div class="se_list_name">百度</div>
<div class="se_list_button">
<button class="set_se_default" value="baidu"
style="border-radius: 8px 0px 0px 8px;">
<span class="iconfont icon-home"></span>
</button>
<button class="edit_se" value="baidu">
<span class="iconfont icon-xiugai"></span>
</button>
<button class="delete_se" value="baidu"
style="border-radius: 0px 8px 8px 0px;">
<span class="iconfont icon-delete"></span>
</button>
</div>
</div>
<div class="se_list_div">
<div class="se_list_num">2</div>
<div class="se_list_name">谷歌</div>
<div class="se_list_button">
<button class="set_se_default" value="google"><span
class="iconfont icon-home"></span></button>
<button class="edit_se" value="google"><span
class="iconfont icon-xiugai"></span></button>
<button class="delete_se" value="google"><span
class="iconfont icon-delete"></span></button>
</div>
</div>
</div>
</div>
<div class="se_add_preinstall">
<div class="set_se_list_add">
<span class="set_quick_text">新增</span>
</div>
<div class="set_se_list_preinstall">
<span class="set_quick_text">重置</span>
</div>
</div>
<div class="add_content se_add_content" style="display:none;">
<div class="froms">
<div class="from_items">
<div class="from_text">顺序</div>
<input type="hidden" name="key_inhere">
<input type="number" name="key" placeholder="请填入小于 20 的正整数"
autocomplete="off"
oninput="if(value>20)value=20;if(value<0)value=0">
</div>
<div class="from_items">
<div class="from_text">名称</div>
<input type="text" name="title" placeholder="搜索引擎名称" autocomplete="off">
</div>
<div class="from_items">
<div class="from_text">网址</div>
<input type="url" name="url" placeholder="以 https 或 http 开头的 URL"
autocomplete="off">
</div>
<div class="from_items">
<div class="from_text">字段名</div>
<input type="text" name="name" placeholder="URL 中 ? 后面的字段"
autocomplete="off">
</div>
<div class="from_items" style="display: none;">
<input type="text" name="icon" placeholder="iconfont icon-Earth"
value="iconfont icon-Earth" disabled="disabled">
</div>
</div>
<div class="from_items button">
<div class="se_add_save">保存</div>
<div class="se_add_cancel">取消</div>
</div>
</div>
</div>
</div>
</div>
<!-- 快捷方式设置 -->
<div class="mainConts">
<div class="set_blocks">
<div class="set_blocks_content">
<div class="quick_list">
<div class="quick_list_table">
<div class="quick_list_div">
<div class="quick_list_div_num">1</div>
<div class="quick_list_div_name">哔哩哔哩</div>
<div class="quick_list_div_button">
<div class="edit_quick" value="1">
<span class="iconfont iconbook-edit"></span>
</div>
<div class="delete_quick" value="1">
<span class="iconfont icondelete"></span>
</div>
</div>
</div>
<div class="quick_list_div">
<div class="quick_list_div_num">2</div>
<div class="quick_list_div_name">知乎</div>
<div class="quick_list_div_button">
<button class="edit_quick" value="2"
style="border-radius: 8px 0px 0px 8px;">
<span class="iconfont iconbook-edit"></span>
</button>
<button class="delete_quick" value="2"
style="border-radius: 0px 8px 8px 0px;">
<span class="iconfont icondelete"></span>
</button>
</div>
</div>
</div>
</div>
<div class="se_add_preinstalls">
<div class="set_quick_list_add">
<span class="set_quick_text">新增</span>
</div>
<div class="set_quick_list_preinstall">
<span class="set_quick_text">重置</span>
</div>
</div>
<div class="add_content quick_add_content" style="display:none;">
<div class="froms">
<div class="from_items">
<div class="from_text">顺序</div>
<input type="hidden" name="key_inhere">
<input type="number" name="key" placeholder="请填入小于 100 的正整数"
autocomplete="off"
oninput="if(value>99)value=99;if(value<0)value=0">
</div>
<div class="from_items">
<div class="from_text">名称</div>
<input type="text" name="title" placeholder="网站名称" autocomplete="off">
</div>
<div class="from_items">
<div class="from_text">网址</div>
<input type="url" name="url" placeholder="以 https 或 http 开头的 URL"
autocomplete="off">
</div>
</div>
<div class="from_items button">
<div class="quick_add_save">保存</div>
<div class="quick_add_cancel">取消</div>
</div>
</div>
</div>
</div>
</div>
<!-- 背景图片设置 -->
<div class="mainConts">
<div class="set_blocks">
<div class="set_tip">
<span class="set_text mobile">点击下方选项以切换壁纸,使用除默认壁纸以外的选项可能会导致页面载入缓慢</span>
<span class="set_text mobile">不建议使用以主色调为白色的壁纸,会导致本站部分元素无法辨认</span>
<span class="set_text" id="wallpaper_text">请点击选项以查看各项说明,高亮项为选中,选中后刷新页面以生效</span>
</div>
<div class="set_blocks_content">
<div class="from_container">
<div class="froms">
<div class="from_row">
<div class="from_row_content">
<div id="wallpaper">
<div class="form-radio">
<input type="radio" id="radio1" class="set-wallpaper"
name="wallpaper-type" value="1" style="display: none;">
<label class="form-radio-label" for="radio1">
默认壁纸
</label>
</div>
<div class="form-radio">
<input type="radio" id="radio2" class="set-wallpaper"
name="wallpaper-type" value="2" style="display: none;">
<label class="form-radio-label" for="radio2">
必应每日
</label>
</div>
<div class="form-radio">
<input type="radio" id="radio3" class="set-wallpaper"
name="wallpaper-type" value="3" style="display: none;">
<label class="form-radio-label" for="radio3">
随机风景
</label>
</div>
<div class="form-radio">
<input type="radio" id="radio4" class="set-wallpaper"
name="wallpaper-type" value="4" style="display: none;">
<label class="form-radio-label" for="radio4">
随机二次元
</label>
</div>
<div class="form-radio mobile">
<input type="radio" id="radio5"
class="set-wallpaper wallpaper-custom"
name="wallpaper-type" value="5" style="display: none;">
<label class="form-radio-label" for="radio5">
自定义壁纸
</label>
</div>
</div>
</div>
</div>
<div id="wallpaper_url" style="display: none;">
<div class="from_row">
<div class="from_items">
<input type="text" name="wallpaper-url" id="wallpaper-url"
placeholder="以 https 或 http 开头的 URL" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
<div class="from_items button" id="wallpaper-button" style="display: none;">
<div class="wallpaper_save">保存</div>
</div>
</div>
</div>
</div>
<!-- 数据备份设置 -->
<div class="mainConts">
<div class="set_blocks">
<div class="set_tip">
<span class="set_text">点击导出会将本站文件导出至下载目录</span>
<span class="set_text">点击导入可选择已备份文件进行恢复</span>
<span class="set_text">本功能尚未完善,若遇到问题可在设置进行重置</span>
</div>
<div class="set_button">
<div class="but-ordinary" id="my_data_in">导入</div>
<div class="but-ordinary" id="my_data_out">导出</div>
<input type="file" id="my_data_file" name="file" style="display: none">
</div>
<div class="set_version">
<span class="set_version-text">MADE&nbsp;BY&nbsp;IMSYY</span>
<span class="set_version-text2">©&nbsp;Snavigation&nbsp;v&nbsp;1.2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 主体内容结束 -->
<!-- 版权信息 -->
<div class="foot">
<div class="power">Copyright&nbsp;&copy;&nbsp;2020
<script>
document.write(' - ' + (new Date()).getFullYear())
</script>&nbsp;<a href="https://imsyy.top">無名</a>&nbsp;&amp;&nbsp;
<!-- 以下信息请不要修改哦 -->
Made&nbsp;by&nbsp;<a href="https://github.com/imsyy/home" target="_blank">imsyy</a>
</div>
</div>
</section>
<!-- noscript -->
<noscript>
<div class="noscript fixed-top">请开启 JavaScript</div>
</noscript>
<!-- JS -->
<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>
</body>
</html>

164
js/js.cookie.js Normal file
View File

@ -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 () {});
}));

124
js/main.js Normal file
View File

@ -0,0 +1,124 @@
//加载完成后执行
window.addEventListener('load', function () {
//载入动画
$('#loading-box').attr('class', 'loaded');
$('#bg').css("cssText", "transform: scale(1);filter: blur(0px);transition: ease 1.5s;");
$('#section').css("cssText", "opacity: 1;transition: ease 1.5s;");
$('.cover').css("cssText", "opacity: 1;transition: ease 1.5s;");
//用户欢迎
iziToast.settings({
timeout: 3000,
backgroundColor: '#ffffff40',
titleColor: '#efefef',
messageColor: '#efefef',
progressBar: false,
close: false,
closeOnEscape: true,
position: 'topCenter',
transitionIn: 'bounceInDown',
transitionOut: 'flipOutX',
displayMode: 'replace',
layout: '1'
});
setTimeout(function () {
iziToast.show({
title: hello,
message: '欢迎来到 Snavigation'
});
}, 800);
}, false)
//屏蔽浏览器默认右键
// document.oncontextmenu = function () {
// undefined
// return false;
// }
//获取时间
var t = null;
t = setTimeout(time, 1000);
function time() {
clearTimeout(t);
dt = new Date();
var mm = dt.getMonth() + 1;
var d = dt.getDate();
var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
var day = dt.getDay();
var h = dt.getHours();
var m = dt.getMinutes();
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
$("#time_text").html(h + '<span id="point">:</span>' + m);
$("#day").html(mm + "&nbsp;月&nbsp;" + d + "&nbsp;日&nbsp;" + weekday[day]);
t = setTimeout(time, 1000);
}
//获取天气
//每日限量 100 次
//请前往 https://www.tianqiapi.com/index/doc?version=v6 申请(免费)
fetch('https://yiketianqi.com/api?unescape=1&version=v6&appid=43986679&appsecret=TksqGZT7')
.then(response => response.json())
.then(data => {
//$('#wea_text').html(data.wea + '&nbsp;' + data.tem_night + '℃' + '&nbsp;~&nbsp;' + data.tem_day + '℃')
$('#wea_text').text(data.wea)
$('#tem1').text(data.tem1)
$('#tem2').text(data.tem2)
})
.catch(console.error)
//火狐浏览器独立样式
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = './css/firefox.css';
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
window.addEventListener('load', function () {
setTimeout(function () {
iziToast.show({
timeout: 8000,
message: '您正在使用火狐浏览器,部分功能可能不支持'
});
}, 3800);
}, false)
}
//Tab书签页
$(function () {
$(".mark .tab .tab-item").click(function () {
$(this).addClass("active").siblings().removeClass("active");
$(".products .mainCont").eq($(this).index()).css("display", "flex").siblings().css("display", "none");
})
})
//设置
$(function () {
$(".set .tabs .tab-items").click(function () {
$(this).addClass("actives").siblings().removeClass("actives");
$(".productss .mainConts").eq($(this).index()).css("display", "flex").siblings().css("display", "none");
})
})
//监听网页宽度
// window.addEventListener('load', function () {
// if (window.innerWidth <= 512) {
// $('.wd').attr('placeholder', '搜索');
// } else {
// $('.wd').attr('placeholder', '想要搜点什么');
// }
// window.addEventListener('resize', function () {
// if (window.innerWidth <= 512) {
// $('.wd').attr('placeholder', '搜索');
// } else {
// $('.wd').attr('placeholder', '想要搜点什么');
// }
// })
// })

1241
js/set.js Normal file

File diff suppressed because it is too large Load Diff

18
js/time.js Normal file
View File

@ -0,0 +1,18 @@
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 = "夜深了";
}

12
vercel.json Normal file
View File

@ -0,0 +1,12 @@
{
"version": 2,
"routes": [{
"handle": "filesystem"
},
{
"src": "/(.*)",
"status": 404,
"dest": "/"
}
]
}