mirror of
https://github.com/201206030/novel-plus.git
synced 2025-06-24 04:46:37 +00:00
前端新增深色主题模版
This commit is contained in:
xiongxiaoyang
364
templates/dark/html/book/book_content.html
Normal file
364
templates/dark/html/book/book_content.html
Normal file
@ -0,0 +1,364 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta th:if="${catId == 9}" name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1">
|
||||
<meta th:if="${catId != 9}" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title th:utext="${book.bookName}+${bookIndex.indexName}"></title>
|
||||
|
||||
<meta name="keywords" th:content="${book.bookName}+','+${bookIndex.indexName}">
|
||||
|
||||
<meta name="description"
|
||||
th:content="${book.bookName}+'最新更新章节免费在线阅读TXT下载'">
|
||||
|
||||
|
||||
|
||||
<div th:include="common/css :: css"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function reinitIframe(){
|
||||
|
||||
var iframe = document.getElementById("frame_content");
|
||||
try{
|
||||
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
|
||||
}catch (ex){}
|
||||
}
|
||||
window.setInterval("reinitIframe()", 200);
|
||||
</script>
|
||||
<script th:fragment="js" src="/js/jquery-1.9.1.js"></script>
|
||||
<script th:fragment="js" src="/layui/layui.all.js"></script>
|
||||
</div>
|
||||
|
||||
<style type="text/css">
|
||||
.line-limit-length {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.indexP p a {
|
||||
color: #4c6978;
|
||||
}
|
||||
|
||||
.Readarea {
|
||||
font-size: 18px;
|
||||
line-height: 35px;
|
||||
padding: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
div, p {
|
||||
wrap-work: break-word;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.indexDiv a {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.Readpage {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
background: #d4eaf2;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div, p {
|
||||
wrap-work: break-word;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* background-attachment: fixed; */
|
||||
}
|
||||
|
||||
user agent stylesheet
|
||||
p {
|
||||
display: block;
|
||||
-webkit-margin-before: 1em;
|
||||
-webkit-margin-after: 1em;
|
||||
-webkit-margin-start: 0px;
|
||||
-webkit-margin-end: 0px;
|
||||
}
|
||||
|
||||
.huyanon {
|
||||
border: 1px solid #64c878;
|
||||
box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset, 0 -2px 3px #b9ecc4 inset;
|
||||
background: -webkit-linear-gradient(top, #90dfa2, #84d494);
|
||||
background: -moz-linear-gradient(top, #90dfa2, #84d494);
|
||||
background: linear-gradient(top, #90dfa2, #84d494);
|
||||
}
|
||||
|
||||
.Readpage a {
|
||||
font-size: 16px;
|
||||
padding: 2px 2px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.lightoff, .huyanoff, .sizebgon {
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
|
||||
background: -webkit-linear-gradient(top, #656565, #4c4c4c);
|
||||
background: -moz-linear-gradient(top, #656565, #4a4a4a);
|
||||
background: linear-gradient(top, #656565, #4a4a4a);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 40px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px #333;
|
||||
border-radius: 5px;
|
||||
margin: 3px 0px 0px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4c6978;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lighton {
|
||||
border: 1px solid #d2a000;
|
||||
box-shadow: 0 1px 2px #fedd71 inset, 0 -1px 0 #a38b39 inset, 0 -2px 3px #fedd71 inset;
|
||||
background: -webkit-linear-gradient(top, #fece34, #d8a605);
|
||||
background: -moz-linear-gradient(top, #fece34, #d8a605);
|
||||
background: linear-gradient(top, #fece34, #d8a605);
|
||||
}
|
||||
|
||||
.screen_toolbar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
bottom: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body id="read">
|
||||
<div id="content">
|
||||
|
||||
|
||||
<input type="hidden" id="bookIdHidden" th:value="${book.id}"/>
|
||||
|
||||
<input type="hidden" id="bookNameHidden" th:value="${book.bookName}"/>
|
||||
|
||||
<input type="hidden" id="contentIdHidden" th:value="${bookIndex.id}"/>
|
||||
|
||||
<input type="hidden" id="indexNameHidden" th:value="${bookIndex.indexName}"/>
|
||||
|
||||
<input type="hidden" id="indexNumHidden" th:value="${bookIndex.indexNum}"/>
|
||||
|
||||
<script>
|
||||
var token = localStorage.getItem("token");
|
||||
</script>
|
||||
|
||||
<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc layui-bg-cyan">
|
||||
|
||||
<div style="width:10%;float: left;margin-left: 10px">
|
||||
<a href="javascript:history.go(-1)">
|
||||
<i style="font-size: 20px;color: #92B8B1;" class="layui-icon"></i></a>
|
||||
</div>
|
||||
<a style="color: #ffffff;" th:href="'/book/'+ ${book.id} + '.html'"><b style="padding-left: 5%;float: left;width: 69%" class="line-limit-length" th:utext="${bookIndex.indexName}+' '+${book.bookName}"></b></a>
|
||||
<div style="width:10%;float: right;margin-right: 10px"><a href="/">
|
||||
<i style="font-size: 20px;color: #92B8B1;" class="layui-icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="Readpage" style="background:#FFFFFF;padding:2px;">
|
||||
<a id="lightdiv" class="button lighton" onclick="nr_setbg('light')">开灯</a>
|
||||
<a id="huyandiv" class="button huyanon" onclick="nr_setbg('huyan')">护眼</a>
|
||||
字体：<a id="fontbig" class="sizebg" onclick="nr_setbg('big')">大</a> <a id="fontmiddle" class="button sizebgon"
|
||||
onclick="nr_setbg('middle')">中</a> <a
|
||||
id="fontsmall" class="sizebg" onclick="nr_setbg('small')">小</a>
|
||||
</p>
|
||||
<div class="indexDiv" style="height: 42px;line-height: 42px;text-align:center;background: #f2f2f2">
|
||||
|
||||
<a th:href="${preBookIndexId!=0?'/book/'+book.id+'/'+preBookIndexId+'.html':'#'}">上一章</a>
|
||||
<a th:href="'/book/indexList-'+${book.id}+'.html'">目录</a>
|
||||
<a th:href="${nextBookIndexId!=0?'/book/'+book.id+'/'+nextBookIndexId+'.html':'#'}">下一章</a>
|
||||
</div>
|
||||
<!--<div id="screenInput" class="screen_toolbar" style="display: none">
|
||||
<div style="height: 5px" class="layui-col-xs2 layui-col-sm3 layui-col-md3 layui-col-lg3"></div>
|
||||
<div class="layui-col-xs6 layui-col-sm4 layui-col-md4 layui-col-lg4">
|
||||
<input type="text" id="screenBulletText" required lay-verify="required" placeholder="请输入弹幕内容,右下角开关可控制弹幕是否开启" autocomplete="off"
|
||||
class="layui-input">
|
||||
|
||||
</div>
|
||||
<div class="layui-col-xs2 layui-col-sm1 layui-col-md1 layui-col-lg1">
|
||||
<button class="layui-btn send">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
<form id="screenSwitch" class="layui-form">
|
||||
<div class="layui-form-item" style="position: fixed;right: 0px;bottom: 100px" title="弹幕开关">
|
||||
<!– <label class="layui-form-label" style="opacity:0.5;font-weight: bold;color: red;">弹幕</label>–>
|
||||
<div class="layui-input-block">
|
||||
<input class="clear" type="checkbox" name="switch" lay-skin="switch">
|
||||
</div>
|
||||
</div>
|
||||
</form>-->
|
||||
<div th:replace="common/js :: js">
|
||||
</div>
|
||||
<div id="chaptercontent" class="Readarea ReadAjax_content screen_container"
|
||||
style="color: rgb(0, 0, 0); font-size: 25px;" th:if="${!needBuy}">
|
||||
<p style="width:100%;text-alight:center; overflow: auto;-webkit-overflow-scrolling:touch;" >
|
||||
<span
|
||||
th:utext="${bookContent.content}"></span></p>
|
||||
</div>
|
||||
<div class="Readarea ReadAjax_content screen_container"
|
||||
style="color: rgb(0, 0, 0); font-size: 10px;background-color: #fff" th:if="${needBuy}">
|
||||
<h5>此章为VIP章节，需要订阅后才能继续阅读</h5>
|
||||
价格：<span style="color: red" th:text="${bookIndex.bookPrice}+'屋币(1元=100屋币)'"></span><br/>
|
||||
<a href="javascript:buyBookIndex()" type="button" class="layui-btn layui-btn-sm layui-btn-radius">购买</a>
|
||||
|
||||
</div>
|
||||
<div class="indexDiv" style="height: 42px;line-height: 42px;text-align:center;background: #f2f2f2">
|
||||
|
||||
<a th:href="${preBookIndexId!=0?'/book/'+book.id+'/'+preBookIndexId+'.html':'#'}">上一章</a>
|
||||
<a th:href="'/book/indexList-'+${book.id}+'.html'">目录</a>
|
||||
<a th:href="${nextBookIndexId!=0?'/book/'+book.id+'/'+nextBookIndexId+'.html':'#'}">下一章</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div th:replace="common/footer :: footer">
|
||||
</div>
|
||||
|
||||
<a name="buttom"></a>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var ua = navigator.userAgent;
|
||||
|
||||
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
|
||||
|
||||
isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
|
||||
|
||||
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
|
||||
|
||||
isMobile = isIphone || isAndroid;
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
|
||||
//添加阅读记录
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/user/addReadHistory",
|
||||
data: {'bookId': $("#bookIdHidden").val(), 'preContentId': $("#contentIdHidden").val()},
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
|
||||
},
|
||||
error: function () {
|
||||
}
|
||||
})
|
||||
|
||||
$("#content").css("min-height",($(window).height()-60)+"px");
|
||||
|
||||
|
||||
})();
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script src="/js/read.js"></script>
|
||||
<script language="javascript">getset()</script>
|
||||
<script language="javascript">getset1()</script>
|
||||
<script language="javascript">
|
||||
var books = localStorage.getItem("historyBooks");
|
||||
var item = parseInt($("#bookIdHidden").val());
|
||||
if (books) {
|
||||
var booksArr = JSON.parse(books);
|
||||
if (booksArr.length >= 50) {
|
||||
booksArr.splice(0, 1);
|
||||
}
|
||||
booksArr.remove(item);
|
||||
booksArr[booksArr.length] = item;
|
||||
} else {
|
||||
var booksArr = [item];
|
||||
}
|
||||
|
||||
localStorage.setItem("historyBooks", JSON.stringify(booksArr));//
|
||||
|
||||
function toMyCollect() {
|
||||
var token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
window.location.href = "/book/search?token=" + token;
|
||||
} else {
|
||||
window.location.href = "/user/login.html";
|
||||
}
|
||||
}
|
||||
|
||||
function buyBookIndex(){
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/user/buyBookIndex",
|
||||
data: {'bookId':$("#bookIdHidden").val(),"bookName":$("#bookNameHidden").val(),
|
||||
"bookIndexId":$("#contentIdHidden").val(),"bookIndexName":$("#indexNameHidden").val()},
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
if (data.code == 200) {
|
||||
location.reload();
|
||||
|
||||
|
||||
} else if(data.code == 1001){
|
||||
//未登录
|
||||
|
||||
}else {
|
||||
layer.alert(data.msg);
|
||||
}
|
||||
|
||||
},
|
||||
error: function () {
|
||||
layer.alert('网络异常');
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
$.post("/book/addVisitCount", {"bookId": $("#bookIdHidden").val()}, function () {
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user