Skip to content

Commit

Permalink
Lavender Haze
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerrylovescheese
jerrylovescheese committed Feb 11, 2023
1 parent bb7d152 commit d083653
Show file tree
Hide file tree
Showing 3 changed files with 487 additions and 16 deletions.
221 changes: 209 additions & 12 deletions pages/aluminum_base_set_dark.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,116 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../static/css/style-dark.css">
<link rel="stylesheet" href="../static/css/style-mobile.css">
<link rel="stylesheet" href="../static/css/style-mobile-dark.css">
<link rel="stylesheet" href="../static/iconfont library/fontawesome-free-6.1.2-web/css/all.css">
<style>
body {
margin: 0;
}

/* #banner-3 {
background-color: #f0f0f0;
width: 100%;
height: 50vw;
border-radius: 0;
position: relative;
left: 0;
top: -40px;
position: relative;
}

#banner-3:hover {
box-shadow: none !important;
margin-top: 120px !important;
top: -40px !important;
}

#banner-2 {
background-image: url(./static/img/前景混搭.png);
background-size: cover;
background-position: 0px -100px;
margin-top: 10px;
}

.banner-info {
color: rgb(0, 0, 0);
}

#banner-3>.banner-info,
#remainTime {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 80px;
text-align: left;
line-height: 80px;
padding-left: 30px;
margin-top: 0px;
top: 10vw;
}

#banner-3>.banner-info-sub {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: left;
color: white;
padding-left: 30px;
position: relative;
top: 10vw;
margin: 0;
} */

.banner-customized-1 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 80px;
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
line-height: 80px;
text-align: center;
}

.banner-info-customized-1 {
font-weight: bold;
font-size: 40px;
}

#home-1 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 30px;
font-weight: bold;
margin-left: 30px;
color: #fff;
}

#home-2 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-left: 30px;
color: #fff;
}

.box-1 {
width: 90%;
height: 300px;
background-color: rgb(0, 0, 0);
background-image: url(./static/img/1509729267christmas-png-ornament-ball-image.png);
background-size: cover;
border-radius: 15px;
margin: 0 auto;
margin-top: 80px;
color: black;
}

#home-3 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 23px;
font-weight: bold;
padding-left: 20px;
padding-top: 20px;
}

#home-4 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding-left: 20px;
}
</style>
</head>

<body>
Expand All @@ -27,37 +135,78 @@
</a>
</div>
<div class="menu">
<a href="aluminum_studio.html"><button class="menu-buttons"
style="margin-left: 15px;">Studio</button></a>
<a href="404.html"><button class="menu-buttons">Postings</button></a>
<a href="404.html"><button class="menu-buttons">PBS</button></a>
<a href="404.html"><button class="menu-buttons">Design</button></a>
<a href="404.html"><button class="menu-buttons">About</button></a>
<input class="search-box" placeholder="Search..."></input>
<p id="info-customized-1">服务</p>
<!-- <button class="menu-buttons" style="margin-left: 15px;">Studio</button>
<button class="menu-buttons">Postings</button>
<button class="menu-buttons">PBS</button>
<button class="menu-buttons">Design</button>
<button class="menu-buttons">About</button>
<input class="search-box" placeholder="Search..."></input> -->
<ul class="link-set">
<li><a href="javascript:;" class="link-customized">了解网络安全</a></li>
<li><a href="javascript:;" class="link-customized">关于我</a></li>
</ul>
</div>
</div>
<div class="time-banner">
<span id="time">
</span>
<a id="full-screen-button" href="/pages/clock.html" style="color: white; text-decoration: none;">&emsp;<i
<a id="full-screen-button" href="clock.html" style="color: rgb(255, 255, 255); text-decoration: none;">&emsp;<i
class="fas fa-expand">
</i><span class="prompt-box">&emsp;单击此处进入大时钟</span>
</a>
<div id="time"></div>
</div>

</div>
<div class="banner">
<!-- <div class="banner">
<p class="banner-info">Welcome to <span
style="font-family: rockwell; font-weight:normal">aluminum.studio.</span></p>
</div> -->

<div class="banner-customized-1" id="banner-3"
style="background-image: url(../static/img/WeChat\ Image_20220929002930\ \(Medium\).jpg); background-size: cover; background-position-y: 480px; border-radius: 20px; color: white; text-shadow: 0px 5px 5px #333;">
<p class="banner-info-customized-1">距离开学报到还有</p>
<div id="remainTime"><span id="one" style="font-family: Rockwell;"></span> 天
<span id="two" style="font-family: Rockwell;"></span> 时
<span id="three" style="font-family: Rockwell;"></span> 分
<span id="four" style="font-family: Rockwell;"></span> 秒
</div>
<br>
<p class="banner-info-customized-1" style="font-size: 20px; line-height: 25px;">2月12日</p>
<br>
</div>

<p id="home-1">网上冲浪的绝佳去处</p>
<p id="home-2">这里有新潮的热词，时事的看法，青春的懵懂和江源工作室最新的动态。网站仍在搭建，更多内容，敬请期待。</p>
<p id="home-1">等一下......</p>
<p id="home-2">如果您在使用移动设备查看此网页，目前建议您转到计算机上打开它。对于移动设备尺寸的适配即将完成，造成的不便敬请谅解。</p>
<p id="home-1">集思广益行千里</p>
<p id="home-2">查看<a href="./pages/dev_cal.html">网页开发日历</a>看看现在我在做什么。欢迎帮忙一起搭建！</p>
<p id="home-1">主页如何使用？</p>
<p id="home-2">
这个页面是主页。主页的上部是一个操作区，可以按下那三个杠来显示分页面。分页面目前无内容，敬请期待。右边的放大镜是搜索功能。搜索功能暂不可用。向下滑动您便会看到许多盒子。它们暂时被放在了这里来呈现最新动态。换句话说，它们稍后会被放到"Postings"里变得更加正式。
</p>
<p id="home-1">为什么网址这么长？</p>
<p id="home-2">因为我没钱买域名😅。这个网页使用了GitHub的服务器，所以就相当于致谢。<br><br>话休絮烦，咱们开始吧。</p>

<!-- <div class="box-1">
<p id="home-3">盒子 1: All I Want For Christmas Is ___?</p>
<p id="home-4">圣诞节就要来咯！虽然哪都去不了，但是，歌还是可以听的（doge</p>
<audio src="./static/audio/All I Want For Christmas Is You.m4a" controls style="padding-left: 20px;"></audio>
</div> -->

<br><br><br><br><br><br><br><br><br>

<a href="#">
<div class="return-to-top">
<i class="fas fa-chevron-up"></i>
<br>
</div>
</a>
<a href="./aluminum_base_set.html">
<a href="../index.html">
<div class="dark-mode">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<br>
</div>
</a>
Expand All @@ -78,6 +227,54 @@

};
setInterval("time()", 1000);
(function show() {
//1.设置目的时间
var oYear = 2023
var oMonth = 1
var oDay = 12
var oHour = 14
var oMinute = 0
var oSecond = 0
var funtureDate = new Date(oYear, oMonth, oDay, oHour, oMinute, oSecond);
// console.log(dateFormat(funtureDate))
//2.设置定时器
setInterval(function () {
//3.获取现在的时间
var presentDate = new Date();
//4.获取时间戳
var funtureTime = funtureDate.getTime();
var presenTime = presentDate.getTime();
//5.获取剩余的时间戳
var allTime = funtureTime - presenTime;
//6.把毫秒转换为秒
var allSecond = parseInt(allTime / 1000);
//7.获取剩余多少天
var day = size(parseInt(allSecond / 3600 / 24));
//8.获取剩余多少小时
var hour = size(parseInt(allSecond / 3600 % 24));
//9.获取剩余多少分钟
var minute = size(parseInt(allSecond / 60 % 60));
//10.获取剩余多少秒
var second = size(parseInt(allSecond % 60));
//11.注入：
document.getElementById('one').innerHTML = day;
document.getElementById('two').innerHTML = hour;
document.getElementById('three').innerHTML = minute;
document.getElementById('four').innerHTML = second;
}, 1000);
//如果数>=10,则在前面补0
function size(num) {
return num < 10 & num >= 0 ? '0' + num : num;
}
})()
//格式化日期格式 2
function dateFormat(data) {
var date = new Date(data);
var YY = date.getFullYear() + '-';
var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
return YY + MM + DD;
}
</script>

</body>
Expand Down
41 changes: 37 additions & 4 deletions static/css/style-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,19 @@ body {
width: 100%;
height: 80px;
border-bottom: 2px solid rgb(76, 76, 76);
background-color: rgba(27, 27, 27, 0.75);
background-color: rgba(27, 27, 27, 0.89);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
list-style: none;
position: fixed;
left: 0px;
top: 0px;
z-index: 1;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.45s;
overflow: hidden;
}

/* legacy version
.top-bar:focus-within {
height: 160px;
}
Expand All @@ -36,6 +37,17 @@ body {
visibility: visible;
}
*/

.top-bar:focus-within {
height: 360px;
box-shadow: 0px 10px 20px #000000f1;
}

.top-bar:focus-within .menu {
top: 0px;
}

.top-bar-wrapper {
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -111,6 +123,27 @@ body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#info-customized-1 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 20px;
color: #ffffff;
}

.link-set {
display: block;
float: left;
list-style: none;
padding-left: 20px;
margin-top: 0px;
}

.link-customized {
text-decoration: none;
color: #ffffff;
}

.banner {
width: 90vw;
height: 20vw;
Expand Down Expand Up @@ -186,13 +219,13 @@ body {

#time {
font-family: rockwell;
color: rgb(255, 255, 255);
color: #ffffff;
}

.prompt-box {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bold;
color: #f0f0f000;
color: #ffffff;
font-size: 15px;
display: none;
}
Expand Down
Loading

0 comments on commit d083653

Please sign in to comment.