limqsh/quinn-bbc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 烟花 斗图优化

Browse Source
This commit is contained in:
limqhz
2022-06-07 19:20:21 +08:00
parent 8f4c18fb2e
commit 7c58287f0a
28 changed files with 3675 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/main/resources/templates/index.html
View File

@@ -6,140 +6,143 @@
<title>首页-Quinn</title>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/backgroud.css}">
<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<link rel="stylesheet" th:href="@{/css/vno.css}">
<link rel="stylesheet" th:href="@{/css/iconfont.css}">
</head>
<style>
#register{
background: url(/images/menu/register.png) no-repeat;
background-size: 100% 100%;
height: 400px;
}
.invertedContent p{
text-align: center;
background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;text-shadow: 2px -2px black, 1px -1px white;font-weight: bold;-webkit-text-fill-color: transparent;-webkit-background-clip: text
}
#fastLink{
font-size: 20px;
}
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>
<body>
<div th:replace="~{common/header::header(activeUrl='index.html')}"></div>
<main role="main">
<div class="container">
<div class="jumbotron jumbotron-fluid mt-5">
<div class="container">
<h2 style="margin: 0;padding: 0;text-align: center;color: #3A3A3A;font-size: 30px;">
<span style="width: 20px;height: 20px;background: #00C6FF;display: inline-block;position: relative;left: 10px;top: 5px;">
</span>
<i style="width: 20px;height: 20px;z-index: 2;background: #FFB900;display: inline-block;position: relative;left: -30px;top: 10px;">
</i>
<strong style="position: relative;">QUINN</strong>
<b style="width: 20px;height: 20px;background: #00C6FF;display: inline-block;position: relative;left: 40px;top: 5px;">
</b>
<em style="width: 20px;height: 20px;background: #FFB900;display: inline-block;position: relative;left: 0px;top: 10px;">
</em>
</h2>
<p style="margin: 0;padding: 0;text-align: center;color: #969696; font-size: 14px;">
私人博客平台
</p>
<br/>
<div class="lead invertedContent">
<p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb-fill" viewBox="0 0 16 16">
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>
</svg>欢迎访问</p>
<div class="row">
<div class="col-md-3"></div>
<span class="element"></span>
<div class="col-md-3"></div>
</div>
<main>
<span class="mobile btn-mobile-menu">
<i class="social iconfont icon-list btn-mobile-menu__icon"></i>
<i class="social iconfont icon-angleup btn-mobile-close__icon hidden"></i>
</span>
<header id="panel" class="panel-cover">
<div class="panel-main">
<div class="panel-main__inner panel-inverted">
<div class="panel-main__content">
<div class="ih-item effect">
<h2 style="margin: 0;padding: 0;text-align: center;color: #ffffff;font-size: 30px;">
<span style="width: 20px;height: 20px;background: #00C6FF;display: inline-block;position: relative;left: 10px;top: 5px;">
</span>
<i style="width: 20px;height: 20px;z-index: 2;background: #FFB900;display: inline-block;position: relative;left: -30px;top: 10px;">
</i>
<strong style="position: relative;">QUINN</strong>
<b style="width: 20px;height: 20px;background: #00C6FF;display: inline-block;position: relative;left: 40px;top: 5px;">
</b>
<em style="width: 20px;height: 20px;background: #FFB900;display: inline-block;position: relative;left: 0px;top: 10px;">
</em>
</h2>
<p style="margin: 0;padding: 0;text-align: center;color: #969696; font-size: 14px;">
分享&交流
</p>
</div>
<div id="fastLink" class="row">
<div class="col-md-3"></div>
<div class="ml-2 col-md-2">
<a th:href="@{/blog/read/1}" class="text-dark font-weight-bold text-decoration-none">
<p class= "badge badge-pill badge-dark">注册说明
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-postcard-fill" viewBox="0 0 16 16">
<path d="M11 8h2V6h-2v2Z"/>
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm8.5.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7ZM2 5.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5ZM2.5 7a.5.5 0 0 0 0 1H6a.5.5 0 0 0 0-1H2.5ZM2 9.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5Zm8-4v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5Z"/>
</svg>
</p>
</a>
<div class="panel-cover__title panel-title iUp">
<br/>
</div>
<p class="panel-cover__subtitle panel-subtitle iUp">免费资源分享、开源技术交流</p>
<hr class="panel-cover__divider iUp" />
<p id="description" class="panel-cover__description iUp">
拒绝内卷，拒绝内耗！
<br/>
<strong id="showTime"></strong>
</p>
<div class="navigation-wrapper iUp">
<div>
<nav class="cover-navigation cover-navigation--primary">
<ul class="navigation">
<li class="navigation__item">
<a href="/blog" class="blog-button">博客</a>
</li>
<li class="navigation__item">
<a href="/favor" class="blog-button">斗图</a>
</li>
<li class="navigation__item">
<a href="/guess" class="blog-button">词谜</a>
</li>
<li class="navigation__item">
<a href="/firework" class="blog-button">看烟花</a>
</li>
<li class="navigation__item">
<a href="/about" class="blog-button">关于</a>
</li>
</ul>
</nav>
</div>
<div class="ml-2 col-md-2">
<a th:href="@{/blog/read/2}" class="text-dark font-weight-bold text-decoration-none">
<p class="badge badge-pill badge-success">网站建设
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-postcard-fill" viewBox="0 0 16 16">
<path d="M11 8h2V6h-2v2Z"/>
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm8.5.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7ZM2 5.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5ZM2.5 7a.5.5 0 0 0 0 1H6a.5.5 0 0 0 0-1H2.5ZM2 9.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5Zm8-4v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5Z"/>
</svg>
</p>
</a>
<div class="iUp">
<nav class="cover-navigation navigation--social">
<ul class="navigation">
<!-- <li class="navigation__item">-->
<!-- <a href="https://github.com/dmego/" title="github" target="_blank">-->
<!-- <i class='social iconfont icon-github'></i>-->
<!-- <span class="label">github</span>-->
<!-- </a>-->
<!-- </li>-->
<li class="navigation__item">
<a href="https://blog.csdn.net/qq_25391375" title="cnblogs" target="_blank">
<i class='social iconfont icon-cnblogs'></i>
<span class="label">cnblogs</span>
</a>
</li>
<li class="navigation__item">
<a href="https://www.zhihu.com/people/quinn-admin" title="zhihu" target="_blank">
<i class='social iconfont icon-zhihu'></i>
<span class="label">zhihu</span>
</a>
</li>
<li class="navigation__item">
<a href="mailto:quinn.admin@88.com" title="email">
<i class='social iconfont icon-email'></i>
<span class="label">email</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="ml-2 col-md-2">
<a th:href="@{/blog/read/3}" class="text-dark font-weight-bold text-decoration-none">
<p class="badge badge-pill badge-warning">建议反馈
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-postcard-fill" viewBox="0 0 16 16">
<path d="M11 8h2V6h-2v2Z"/>
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm8.5.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7ZM2 5.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5ZM2.5 7a.5.5 0 0 0 0 1H6a.5.5 0 0 0 0-1H2.5ZM2 9.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5Zm8-4v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5Z"/>
</svg>
</p>
</a>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<div class="alert alert-danger mt-3" role="alert">
<span th:each="love:${LoveList}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-heart-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm6 3.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z"/>
</svg>
[[${love}]]
</span>
</div>
<div id="register" class="mt-3">
</div>
<div class="panel-cover--overlay cover-slate"></div>
</div>
<div class="remark power">
<a class="text-light text-decoration-none" target="_blank" href='https://beian.miit.gov.cn'>©QUINN 浙ICP备2020031991号</a>
</div>
</header>
</main>
<div th:replace="~{common/footer::footer}"></div>
<div class="to-top">
<img class="d-block pl-2" src="/images/logo/qrcode.png" width="50" height="50">
<a class="badge badge-light">返回顶部</a>
</div>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/js/main.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script th:src="@{/live/js/addlive2d.js}"></script>
<script>
var typed = new Typed('.element', {
strings: ["Quinn注册流程，技术博客，交流反馈。可点击下方了解详情↓"], //输入内容, 支持html标签
typeSpeed: 120, //打字速度
backSpeed: 50 //回退速度
});
// var typed = new Typed('.element', {
// strings: ["Quinn注册流程，技术博客，交流反馈。可点击下方了解详情↓"], //输入内容, 支持html标签
// typeSpeed: 120, //打字速度
// backSpeed: 50 //回退速度
// });
var t = null;
t = setTimeout(time, 1000);
function time() {
clearTimeout(t); //清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours(); //获取时
var m = dt.getMinutes(); //获取分
var s = dt.getSeconds(); //获取秒
document.querySelector("#showTime").innerHTML =
y +
"年" +
mt +
"月" +
day +
"日-" +
h +
"时" +
m +
"分" +
s +
"秒";
t = setTimeout(time, 1000); //设定定时器，循环运行
}
</script>
</body>
</html>