Skip to content

Commit

Permalink
【更新】论坛页面
Browse files Browse the repository at this point in the history
  • Loading branch information
@PJ-568
PJ-568 committed Oct 24, 2024
1 parent 8c6eb50 commit 5f7c669
Show file tree
Hide file tree
Showing 4 changed files with 591 additions and 429 deletions.
304 changes: 304 additions & 0 deletions css/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,304 @@
/* 全局 */
html {
height: 100%;
}

* {
margin: 0px;
padding: 0px;
font-family: Arial, sans-serif;
color: #fff;
text-decoration: none;
}

body {
font-family: 'Exo', sans-serif;
}

a {
cursor: pointer;
text-decoration: underline;
}

.max-width {
max-width: 1024px;
width: 100%;
}

/* 导航栏 */
nav {
width: 100%;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
}

nav .logo img,
nav .logo svg {
width: 30px;
margin: 1rem;
}

nav .nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}

nav .ul {
height: 100%;
align-items: center;
margin-right: 1rem;
list-style: none;
display: flex;
}

nav .ul a {
text-decoration: none;
display: inline;
position: relative;
padding: 0.5rem 1rem;
box-sizing: border-box;
transition: background-color 0.3s;
}

nav .ul a[href="#"] {
background-color: rgba(255, 255, 255, 0.1);
}

nav .ul a:hover {
background-color: #555;
}

/* 主要内容 */
.container {
margin: 6rem auto;
box-sizing: border-box;
padding: 1rem;
flex-direction: column;
align-items: center;
display: flex;
justify-content: center;
}

.container h1 {
text-align: center;
font-size: 50px;
}

.container p {
margin-top: 1rem;
text-align: center;
font-size: 20px;
}

.container exegesis {
color: gray;
}

.container .main-logo {
width: 75%;
max-width: 256px;
}

.container .contact {
margin-top: 1rem;
text-align: center;
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
font-size: 30px;
}

.container .contact a {
text-decoration: none;
color: inherit;
align-items: center;
border-radius: .5rem;
box-sizing: border-box;
display: flex;
padding: .5rem;
text-align: center;
}

/* 加载进度条 */
.loading-bar {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
opacity: 0;
transition: opacity .4s linear;

.progress {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 4px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(119, 182, 255, .7);
}

&.loading {
opacity: 1;
transition: none;

.progress {
transition: width .4s ease;
}
}
}

/* 背景 */
.area {
z-index: -1;
position: fixed;
left: 0;
top: 0;
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height: 100vh;
}

.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}

.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}

.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}

.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}

.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}

.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}

.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}

.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}

.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}

.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}

.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}

@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}

100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}

/* 翻译按钮相关 */
.translateSelectLanguage {
z-index: 10;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0
}

/* 深色模式相关 */
.darkmode--activated img,
.darkmode--activated svg {
isolation: isolate;
mix-blend-mode: difference
}

.darkmode--activated .area {
isolation: isolate;
mix-blend-mode: difference;
background-color: #000;
}

.darkmode--activated select {
background-color: #000;
color: #E0E0E0
}
67 changes: 67 additions & 0 deletions forum/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width=400, initial-scale=1">
<meta name="description" content="A temporary forum page for WeDot Engine community">
<title>WeDot Forum</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="icon" type="image/svg+xml" href="/img/wedot.png">
<link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/font-awesome/6.0.0/css/all.min.css">
<script src="//lib.baomitu.com/pjax/0.2.8/pjax.min.js" type="text/javascript"></script>
<script src="//lib.baomitu.com/translate.js/3.7.2/translate.js" type="text/javascript"></script>
<script src="//lib.baomitu.com/Darkmode.js/1.5.7/darkmode-js.min.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>
</head>

<body>
<!-- 背景 -->
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<!-- 导航栏 -->
<nav>
<div class="nav-content max-width">
<div class="logo">
<img alt="Temporary Icon" title="Temporary Icon" src="/img/wedot.png">
</div>
<div class="ul">
<a title="Home page" href="/"><i class="fa fa-home"></i> Home</a>
<a title="WeDot Forum" href="#"><i class="fa fa-comment"></i> Forum</a>
<a title="About the WeDot Engine" href="https://github.com/Wedot-Engine"><i
class="fa fa-info-circle"></i> About</a>
<a title="Change the language of this site" id="translate"><i class="fa fa-language"></i>
Language</a>
<!-- <a title="Change display mode" id="dark_b" href="javascript:;"><i class="fa fa-adjust"></i> Mode</a> -->
</div>
</div>
</nav>

<!-- 主要内容 -->
<div class="container max-width">
<h1 title="A temporary forum page for WeDot Engine community">WeDot Forum</h1>
<div id="giscus-container" style="width: 100%;"></div>
</div>

<div class="loading-bar">
<div class="progress"></div>
</div>

<script src="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/instant.page/5.1.0/instantpage.min.js"
type="text/javascript"></script>
</body>

</html>
Loading

0 comments on commit 5f7c669

Please sign in to comment.