站点前台设置面板（切换字体、选择滤镜、夜间模式的开关）

6 files changed, 215 insertions, 38 deletions

diff --git a/assets/css/dark.miracles.css b/assets/css/dark.miracles.css
index fb4dd7a..dcccd58 100644
--- a/assets/css/dark.miracles.css
+++ b/assets/css/dark.miracles.css
@@ -44,7 +44,8 @@
 .body-dark .bubble.saying-body:hover,

 .body-dark .OwO-body,

 .body-dark .OwO-open .OwO-logo,

-.body-dark .OwO .OwO-body .OwO-items .OwO-item:hover {

+.body-dark .OwO .OwO-body .OwO-items .OwO-item:hover,

+.body-dark .options {

 	box-shadow: 0 0 36px #323232!important;

 	-moz-box-shadow: 0 0 36px #323232!important;

 	-webkit-box-shadow: 0 0 36px #323232!important

@@ -62,7 +63,8 @@
 .body-dark .bubble.comment-content,

 .body-dark .comment-author,

 .body-dark .bubble.saying-body,

-.body-dark .tags-item a {

+.body-dark .tags-item a,

+.body-dark .options-button-active {

 	background: #646464

 }

 /* Need #5a5a5a bg */

@@ -81,9 +83,17 @@
 .body-dark .OwO-body,

 .body-dark .OwO-package-active,

 .body-dark .OwO-packages li:hover,

-.body-dark .saying-textarea {

+.body-dark .saying-textarea,

+.body-dark .dialog,

+.body-dark .options,

+.body-dark .options-theme-label,

+.body-dark .options-family-button {

 	background: #5a5a5a!important

 }

+/* Need #5a5a5a color */

+.body-dark .options-theme-label {

+	color: #5a5a5a!important;

+}

 /* OwO */

 .body-dark .OwO-item,

 .body-dark .OwO-bar {

@@ -116,7 +126,8 @@
 .body-dark .mobile-menu,

 .body-dark .mobile-menu a,

 .body-dark .mobile-menu-close,

-.body-dark .mobile-menu-footer {

+.body-dark .mobile-menu-footer,

+.body-dark .options-family-button {

 	color: #fafafa!important

 }

 /* Need dark border-color */

@@ -131,7 +142,8 @@
 .body-dark .OwO-body,

 .body-dark .mobile-menu-title,

 .body-dark .mobile-menu-footer,

-.body-dark .saying-textarea {

+.body-dark .saying-textarea,

+.body-dark .options hr {

 	border-color: #6e6e6e!important;

 }

 .body-dark .comment-by-author .bubble.comment-content:before,

diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css
index 9c9606e..d296beb 100644
--- a/assets/css/miracles.min.css
+++ b/assets/css/miracles.min.css
@@ -65,9 +65,16 @@ hr {
 	filter: grayscale(100%);

 	-webkit-filter: grayscale(100%);

 }

+.body-sepia {

+	filter: sepia(35%);

+	-webkit-filter: sepia(35%);

+}

 .body-serif {

 	font-family: 'Noto Serif SC',serif

 }

+.body-noscroll {

+	overflow: hidden;

+}

 

 /* 组件 */

 /* > 按钮 */

@@ -166,7 +173,11 @@ hr {
 .login-button {

 	right: 65px;

 }

+.setting-button {

+	right: 110px;

+}

 .nav-icon-button:hover,.search-close {

+	display: block;

 	background: rgb(230,230,230);

 	cursor: pointer

 }

@@ -227,9 +238,6 @@ hr {
 	white-space: nowrap;

 	text-overflow: ellipsis

 }

-.post-item:hover .post-title {

-	color: var(--theme-color)

-}

 .post-excerpt {

 	overflow: hidden;

 	text-overflow: ellipsis

@@ -542,6 +550,7 @@ hr {
 	bottom: 0;

 	right: 0;

 	left: 0;

+	max-height: 100vh;

 	background-color: rgba(255,255,255,0.96);

 	transition: all .2s;

 	z-index: 1000;

@@ -662,28 +671,37 @@ hr {
 }

 

 /* 悬浮按钮 */

-.dark-button,.gotop-button {

+.fixed-button {

 	background: #fdfdfd;

-	font-size: 22px;

-	padding: 10px 15px;

+	font-size: 16px;

+	height: 60px;

+	width: 60px;

+	display: flex;

+	justify-content:center;

+	align-items:center;

 	border: none;

 	border-radius: 10000px;

-	box-shadow: 0 0 15px #bababa;

-	-webkit-box-shadow: 0 0 15px #bababa;

-	-moz-box-shadow: 0 0 15px #bababa;

+	box-shadow: 0 1px 5px #bababa;

+	-webkit-box-shadow: 0 1px 5px #bababa;

+	-moz-box-shadow: 0 1px 5px #bababa;

 	position: fixed;

 	cursor: pointer;

 	outline: 0;

-	right: 12px

+	right: 6px;

+	transition: all 0.3s;

 }

-.gotop-button {

-	bottom: 30px;

-	background: var(--theme-color)!important;

-	color: #fff!important

+.fixed-button:hover {

+	box-shadow: 0 3px 25px #bababa;

+	-webkit-box-shadow: 0 3px 25px #bababa;

+	-moz-box-shadow: 0 3px 25px #bababa;

+	background: rgb(248,248,248)!important;

 }

-.dark-button {

-	bottom: 80px

+.gotop-button {

+	bottom: 8px;

+	background: #fff!important;

+	color: rgb(80,80,80)!important;

 }

+

 /* 页脚 */

 .footer-info {

 	background: #f0f0f0;

@@ -971,6 +989,95 @@ hr {
 	transform: translateY(-6px);

 	box-shadow: 2px 8px 17px #bababa;

 }

+

+/* Options Pannel */

+.options {

+	transition: all 0.3s;

+	background: #fff;

+	border-radius: 2px;

+	box-shadow: 0 1px 8px #bababa;

+	-moz-box-shadow: 0 1px 8px #bababa;

+	-webkit-box-shadow: 0 1px 8px #bababa;

+	position: fixed;

+	top: 90px;

+	right: 10px;

+	left: 10px;

+	z-index: 20;

+	width: 100%;

+}

+.options hr {

+	border-color: rgb(245,245,245);

+	margin: 0;

+}

+.options.ready {

+	display: none;

+	top: 40px;

+}

+.options-content {

+	padding: 8px;

+	font-size: 15px;

+}

+.options-content h4 {

+	margin: 0;

+	margin-bottom: 8px;

+}

+.options-family {

+	text-align: center;

+}

+.options-family button {

+	display: block;

+	width: 100%;

+	border: none;

+	background: #fff;

+	font-size: 20px;

+	padding: 8px 0;

+	transition: all 0.3s;

+	outline: none;

+	cursor: pointer;

+	border-radius: 3px;

+}

+.options-family button:hover {

+	background: rgb(242,242,242);

+}

+.options-family-button.options-button-active {

+	color: #fff;

+	background: var(--theme-color)!important;

+}

+.options-theme-button.options-button-active {

+	border: 2px solid var(-theme-color);

+}

+.options-themes {

+	text-align: center;

+	margin-top: 20px;

+}

+.options-theme-label {

+	color: #fff;

+	font-size: 12px;

+	transition: color 0.3s;

+}

+.options-theme-item:hover .options-theme-label {

+	color: #bababa;

+}

+.options-theme-button {

+	height: 50px;

+	width: 50px;

+	border-radius: 100%;

+	border: none;

+	outline: none;

+	display: block;

+	margin: 0 auto;

+	cursor: pointer

+}

+.options-theme-normal {

+	background: rgb(240,240,240);

+}

+.options-theme-dark {

+	background: rgb(80,80,80)

+}

+.options-theme-sepia {

+	background: rgb(255,255,200)

+}

+

 /* Pio Plugin */

 .pio-container .pio-dialog {

 	margin-bottom: -60px;

@@ -996,12 +1103,16 @@ iframe[src*="//player.bilibili.com/player.html"] {
 .large-screen {

 	display: none

 }

-

 .small-screen {

 	display: block

 }

 /* > Pad and up */

 @media (min-width:768px) {

+	.options {

+	    width: 400px!important;

+		left: auto!important;

+    }

+

 	.comment-content p {

 		font-size: 18px;

 	}

@@ -1047,7 +1158,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
 		letter-spacing: 2px

 	}

 

-	.dark-button,.gotop-button {

+	.fixed-button {

 		padding: 15px 20px;

 		right: 28px

 	}

@@ -1056,7 +1167,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
 		bottom: 20px

 	}

 

-	.dark-button {

+	.options-button {

 		bottom: 90px

 	}

 

@@ -1131,7 +1242,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
 		letter-spacing: 2px

 	}

 

-	.dark-button,.gotop-button {

+	.fixed-button {

 		padding: 18px 23px;

 		right: 38px

 	}

@@ -1140,7 +1251,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
 		bottom: 40px

 	}

 

-	.dark-button {

+	.options-button {

 		bottom: 120px

 	}

 

@@ -1215,7 +1326,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
 		line-height: 30px;

 		letter-spacing: 2px

 	}

-	.dark-button,.gotop-button {

+	.fixed-button {

 		padding: 18px 23px;

 		right: 38px

 	}

@@ -1224,7 +1335,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
 		bottom: 40px

 	}

 

-	.dark-button {

+	.options-button {

 		bottom: 120px

 	}

 

diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js
index d07c5f3..2606bcc 100644
--- a/assets/js/miracles.min.js
+++ b/assets/js/miracles.min.js
@@ -8,6 +8,14 @@
 function Dark() {

 	$("body").toggleClass("body-dark");

 }

+//toggleGray

+function Gray() {

+	$("body").toggleClass("body-gray");

+}

+//toggleSepia

+function Sepia() {

+	$("body").toggleClass("body-sepia");

+}

 //GoTop

 function GoTop() {

 	$('body,html').animate({scrollTop:0},500);

@@ -54,6 +62,21 @@ function Login() {
 	$(".login").toggleClass("ready");

 	$(".login-close").toggleClass("ready");

 }

+//FrontOptions

+function toggleOptions() {

+	$(".options").toggleClass("ready");

+}

+//FontFamily

+function ChangeToSerif() {

+	$('body').addClass('body-serif');

+	$('.options-serif-button').addClass('options-button-active');

+	$('.options-sans-button').removeClass('options-button-active');

+}

+function ChangeToSansSerif() {

+	$('body').removeClass('body-serif');

+	$('.options-serif-button').removeClass('options-button-active');

+	$('.options-sans-button').addClass('options-button-active');

+}

 //owo

 function owoLoad() {

 	var OwO_demo = new OwO({

diff --git a/includes/footer.php b/includes/footer.php
index 671ee49..b7f5ec4 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -10,8 +10,7 @@
     </footer>
 	<!-- 悬浮按钮 -->
 	<div class="fixed-tools">
-	  <button onclick="GoTop()" title="返回顶部" class="gotop-button"  style="color:white;"><i class="iconfont icon-chevron-up"></i></button>
-	  <button onclick="Dark()" title="护眼模式" class="dark-button"><i class="iconfont icon-envira"></i></button>
+	  <button onclick="GoTop()" title="返回顶部" class="fixed-button gotop-button"  style="color:white;"><i class="iconfont icon-chevron-up"></i></button>
 	</div>
 	<!-- JavaScript -->
 	<?php if($this->options->CDN && $this->options->CDN=1): ?>
@@ -42,4 +41,4 @@
 	<script>LazyLoad();PrismLoad();owoLoad();<?php $this->options->jsEcho(); ?></script>
 	<?php $this->footer(); ?>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/includes/head.php b/includes/head.php
index 725841a..34d2ece 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -62,7 +62,7 @@ if (isset($_POST['action'])) {
 	<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/dark.miracles.css'); ?>" />
 	<?php endif; ?>
 	<!-- icon font -->
-	<link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_q4ccniy74h.css" />
+	<link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_oo2f2wsibld.css" />
 	<!-- Google Fonts -->
 	<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Serif+SC:300&display=swap" rel="stylesheet">
 	<style>.body-dark .pio-action .pio-home{background-image: url(<?php Utils::indexTheme('images/icons/home.png'); ?>);}.body-dark .pio-action .pio-close{background-image: url(<?php Utils::indexTheme('images/icons/remove.png'); ?>);}.body-dark .pio-action .pio-skin{background-image: url(<?php Utils::indexTheme('images/icons/skin.png'); ?>);}.body-dark .pio-action .pio-info{background-image: url(<?php Utils::indexTheme('images/icons/info.png'); ?>);}.body-dark .pio-action .pio-night{background-image: url(<?php Utils::indexTheme('images/icons/night.png'); ?>);}@media (min-width:992px) {.search{background-image:url(<?php Utils::indexTheme('images/search.png'); ?>);}.login{background-image:url(<?php Utils::indexTheme('images/login.png'); ?>)}}.search {background-position: bottom right;background-repeat: no-repeat}.login {background-position: bottom left;background-repeat:no-repeat}<?php $this->options->cssEcho(); ?></style>
diff --git a/includes/header.php b/includes/header.php
index 2fca1a0..0c1adc3 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -41,9 +41,42 @@
 		  <p>&copy; <?php echo date('Y'); ?> <a href="<?php $this->options->SiteUrl(); ?>"><?php $this->options->title(); ?></a> | Theme <a href="https://github.com/BigCoke233/miracles">Miracles</a></p>
 		</div>
 	  </div>
-	  
+	  <!-- 前台设置 -->
+	  <div class="options ready">
+	    <div class="options-content">
+	      <div class="options-family container-fluid">
+		    <div class="row">
+			  <div class="col-6 options-family-serif">
+			    <button onclick="ChangeToSerif()" class="<?php if($this->options->bodyFonts && $this->options->bodyFonts=1): ?>options-button-active <?php endif; ?>options-family-button options-serif-button body-serif">Serif</button>
+			  </div>
+			  <div class="col-6 options-family-sans">
+			    <button onclick="ChangeToSansSerif()" class="<?php if($this->options->bodyFonts && $this->options->bodyFonts=1): ?><?php else: ?>options-button-active <?php endif; ?>options-family-button options-sans-button" style="font-family: 'Noto Sans SC',sans-serif">Sans Serif</button>
+			  </div>
+		    </div>
+		  </div>
+	    </div>
+		<hr>
+		<div class="options-content">
+		  <div class="options-themes container-fluid">
+		    <div class="row">
+			  <div class="col-4 options-theme-item">
+			    <button class="options-theme-button options-theme-dark" onclick="Dark()"></button>
+				<span class="options-theme-label">黑夜模式</span>
+			  </div>
+			  <div class="col-4 options-theme-item">
+			    <button class="options-theme-button options-theme-sepia" onclick="Sepia()"></button>
+				<span class="options-theme-label">日落模式</span>
+			  </div>
+		      <div class="col-4 options-theme-item">
+			    <button class="options-theme-button options-theme-normal" onclick="Gray()"></button>
+				<span class="options-theme-label">黑白滤镜</span>
+			  </div>
+			</div>
+		  </div>
+		</div>
+	  </div>
 	  <!-- 导航 -->
-	  <!-- > 大屏幕导航 -->
+	  <!-- -大屏幕导航 -->
       <nav class="large-screen nav<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>">
 	    <div class="container">
 		  <p class="nav-content">
@@ -55,9 +88,10 @@
 		  </p>
 		  <button class="nav-icon-button search-button" onclick="Search()"><i class="iconfont icon-chaxun"></i></button>
 		  <button class="nav-icon-button login-button" onclick="Login()"><i class="iconfont icon-user"></i></button>
+		  <button class="nav-icon-button setting-button" onclick="toggleOptions()"><i class="iconfont icon-settings"></i></button>
 		</div>
 	  </nav>
-	  <!--> 小屏幕导航 -->
+	  <!-- -小屏幕导航 -->
 	  <nav class="small-screen nav nav-mobile<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>">
         <div class="nav-mobile-content">
 		  <a href="<?php $this->options->SiteUrl(); ?>" style="float:left"><i class="iconfont icon-xuanzhongshangcheng"></i></a>
@@ -83,9 +117,7 @@
 				<?php elseif($this->is('post') || $this->is('page')): ?>
 				<h1><?php $this->title(); ?></h1>
 		        <p class="header-meta"><?php if($this->is('post')): ?><i class="iconfont icon-block"></i> <?php $this->category(','); ?>&emsp;<?php endif; ?><i class="iconfont icon-comments"></i> <?php $this->commentsNum('None', 'Only 1', '%d'); ?>&emsp;<i class="iconfont icon-clock"></i> <?php $this->date(); ?></p>
-				<?php else: ?>
-				
-				<?php endif; ?>
+				<?php else: ?><?php endif; ?>
 			  </div>
 			</div>
 		  </div>