Akatsuki-Misaki/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

阉割轮播图

Browse Source
This commit is contained in:
hanasaki-misaki
2023-03-20 14:10:44 +08:00
parent 526f44ebf5
commit 676baa6ca7
5 changed files with 158 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
Static/mdui-v1.0.1/css/ui.css
View File

@@ -328,7 +328,7 @@ body {
}
.c-secttl:hover{
animation:color-block alternate 1s;
color: #247bfd;
color: #3f51b5;
}
@keyframes color-block {
@@ -338,14 +338,14 @@ body {
}
to {
color: #247bfd;
color: #3f51b5;
}
}
@keyframes color-fff {
from {
color: #247bfd;
color: #3f51b5;
}
to {
@@ -399,4 +399,83 @@ body {
src: url('https://fonts.akass.cn/saira/v14/files/saira-latin-regular.woff2');
font-weight: normal;
font-style: normal;
}
}
.single_slide .slide_text h2 {
font-size: 50px;
text-transform: uppercase;
font-weight: 800;
color: #34495e;
letter-spacing: 2px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 30px;
}
.single_slide .slide_text h2 > span {
color: #3f51b5;
}
.single_slide .slide_text h3 {
font-size: 20px;
font-weight: 300;
letter-spacing: 1px;
color: #354b60;
}
.table {
display: table;
z-index: 9;
position: absolute;
width: 100%;
height: 100%;
}
.table_cell {
display: table-cell;
vertical-align: middle;
}
/* ******************************
:: 5.0 slider area css
****************************** */
.single_slide {
position: relative;
z-index: 1;
background-position: center center;
background-size: cover;
}
.single_slide:before {
position: absolute;
z-index: 9;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.1);
content: "";
}
.single_slide .slide_text {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 100%;
z-index: 999;
text-align: center;
}
.single_slide .slide_text h2 {
font-size: 50px;
text-transform: uppercase;
font-weight: 800;
color: #34495e;
letter-spacing: 2px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 30px;
}
.single_slide .slide_text h2 > span {
color: #3f51b5;
}

14
Static/mdui-v1.0.1/js/area.js Normal file
View File

@@ -0,0 +1,14 @@
(function ($) {
'use strict';
$(window).on('resizeEnd', function () {
$(".welcome_area, .welcome_slides .single_slide, .single_slide").height($(window).height());
});
$(window).on('resize', function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
$(this).trigger('resizeEnd');
}, 300);
}).trigger("resize");
})(jQuery);

85
index.html
View File

@@ -100,44 +100,20 @@
<div class="mdui-hidden-xs-down backdrop-filter-5" style="height:260vh ">
<!-- Carousel Start -->
<div id="carouselExampleCaptions" class="wow carousel slide banner animate__animated animate__fadeInRight" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner banner-x">
<div class="carousel-item active">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/17/1x641476241d7cc.webp/all70" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: #fff;"><strong>Akatsuki - Word</strong></h5>
<p style="color: #fff;"><strong>人类从来没有资格评定好坏，所谓对错会随着时间所变动.</strong></p>
</div>
</div>
<div class="carousel-item">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/17/1x641476217ac41.webp/all70" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: #fff;"><strong>Akatsuki - Word</strong></h5>
<p style="color: #fff;"><strong>生活的意义是享受当下，活出精彩人生</strong></p>
</div>
</div>
<div class="carousel-item">
<img src="https://img-cdn-cos.lolicon.team/1/2023/03/17/1x6414761e6fb95.webp/all70" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 style="color: #fff;"><strong>Akatsuki - Word</strong></h5>
<p style="color: #fff;"><strong>我只活在当下，欣赏眼前的风景</strong></p>
<section class="welcome_area wow carousel slide banner animate__animated animate__fadeInRight" id="home">
<div class="welcome_slides">
<div class="single_slide" style="background-image: url(https://img-cdn-cos.lolicon.team/1/2023/03/17/1x641476241d7cc.webp);">
<div class="slide_text">
<div class="table">
<div class="table_cell wow carousel slide banner animate__animated animate__bounceIn" data-wow-delay="930ms">
<h2><span>Akatsuki </span> World</h2>
<h3 class="wow carousel slide banner animate__animated animate__bounceIn" data-wow-delay="1100ms">欢迎热爱我的世界与二次元的你</h3>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</section>
<!-- Carousel End -->
<!-- Our Features Start -->
<div class="wow animate__animated animate__fadeInLeft" data-wow-delay="200ms">
@@ -248,31 +224,21 @@
<!-- Mobile Text Start -->
<div class="mdui-hidden-sm-up backdrop-filter-5 " style="height:100%;width: 100%;">
<div style="width: 90%;height:100vh" class="mdui-center">
<div class="mdui-container">
<div class="mdui-typo">
<blockquote style="margin-bottom: 15px;">
<p class="s24" style="font-size: 24px;">"人类从来没有资格评定好坏"</p>
<p class="s24" style="font-size: 24px;">"所谓对错会随着时间所变动"</p>
<p class="s16 mdui-text-right" style="font-size: 16px;">——Akatsuki World</p>
</blockquote>
<div class="mdui-hidden-sm-up backdrop-filter-5 " style="height:210vh;width: 100%;">
<section class="welcome_area wow carousel slide banner animate__animated animate__fadeInRight" id="home">
<div class="welcome_slides">
<div class="single_slide" style="background-image: url(https://img-cdn-cos.lolicon.team/1/2023/03/17/1x641476241d7cc.webp);">
<div class="slide_text">
<div class="table">
<div class="table_cell wow carousel slide banner animate__animated animate__bounceIn" data-wow-delay="930ms">
<h2><span>Akatsuki </span> World</h2>
<h3 class="wow carousel slide banner animate__animated animate__bounceIn" data-wow-delay="1100ms">欢迎热爱我的世界与二次元的你</h3>
</div>
</div>
</div>
</div>
</div>
<div class="mdui-typo mdui-valign" style="height:50vh">
<div class="mdui-center mdui-text-center">
<p class="s17" style="font-size: 17px;">
AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
欢迎您的加入!<br>
AyasakiMoe:Akatsuki World <br>
</p>
</div>
</div>
</div>
</section>
</div>
<!-- Mobile Text End -->
@@ -291,12 +257,11 @@
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="Static\mdui-v1.0.1\js\area.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" type="text/javascript"></script>
<script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
<script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
<script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
<script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
<script>
// 网页资源加载完成等待500ms后关闭id类为loading动画
@@ -310,7 +275,7 @@
clearTimeout(loadTimer);
}, 1000);
});
</script>
</script>
</body>
</html>

25
news.html
View File

@@ -80,7 +80,10 @@
<!--mobile toolbar and menu-->
<div class="mdui-hidden-xm-pe">
<div class="mdui-toolbar mdui-toolbarm zhe">
<div class="mdui-progress" id="loadprogress">
<div class="mdui-progress-indeterminate"></div>
</div>
<div class="mdui-toolbar mdui-toolbarm backdrop-filter-5">
<a href="/index.html">
<div class="mdui-valign animate__animated animate__fadeInLeft">
<img src="Static\Gui\img\Moe.png" width="120px">
@@ -114,7 +117,7 @@
<!--pc text-->
<div class="mdui-hidden-xs-down zhe " style="height:300vh">
<div class="" style="height:300vh">
<div class="mdui-container">
<ul id="rss" class="mdui-list">
@@ -122,24 +125,6 @@
</ul>
</div>
</div>
<!--mobile text-->
<div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
<div style="width: 90%;height:100vh" class="mdui-center">
<div class="mdui-container">
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
<a href="#">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">暂无内容</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span></span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="mdui-typo mdui-valign" style="height:50vh">
<div class="mdui-center mdui-text-center">
<p class="s17" style="font-size: 17px;">

55
project.html
View File

@@ -134,33 +134,40 @@
</div>
<!--mobile text-->
<div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
<div style="width: 90%;height:100vh" class="mdui-center">
<div class="mdui-container">
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
<a href="#">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">暂无内容</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span></span>
</div>
<div class="mdui-container">
<ul class="mdui-list">
<li mdui-dialog="{target: '#example-2'}" class="border-radius-15 mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">宝塔面板主题 | 甘城なつき</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span>宝塔面板基础美化包，二次元党狂喜！即将推出动画包！</span>
</div>
</a>
</li>
</div>
</a>
</li>
</ul>
</div>
<div class="mdui-typo mdui-valign" style="height:50vh">
<div class="mdui-center mdui-text-center">
<p class="s17" style="font-size: 17px;">
AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
欢迎您的加入!<br>
AyasakiMoe:Akatsuki World <br>
</p>
</div>
</div>
</div>
</ul>
</div>
<div class="mdui-typo mdui-valign" style="height:50vh">
<div class="mdui-center mdui-text-center">
<p class="s17" style="font-size: 17px;">
AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
欢迎您的加入!<br>
AyasakiMoe:Akatsuki World <br>
</p>
<div class="mdui-dialog" id="example-2">
<div class="mdui-dialog-title">是否要访问?</div>
<div class="mdui-dialog-content">宝塔面板主题 | 甘城なつき | 基础美化包.</div>
<div class="mdui-dialog-actions mdui-dialog-actions-stacked">
<button class="mdui-btn mdui-ripple" mdui-dialog-confirm>Yes Jump Now</button>
<button class="mdui-btn mdui-ripple" mdui-dialog-close>No thanks</button>
</div>
</div>
</div>
</div>