-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
193 lines (182 loc) · 9.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="zh_cmn_Hans" class="background">
<head>
<meta charset="utf-8">
<title>八五班网</title>
<link rel="icon" type="image/x-icon" href="favicon.png" />
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<style>
@import "css_js/main.css";
</style>
<body>
<br>
<br>
<br>
<br>
<div class="menu">
<img src="icon.png" alt="">
<h1>八年五班</h1>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="photos.html">班级图库</a></li>
<li><a href="#">文案投稿</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="#">敬请期待…</a></li>
</ul>
</div> <!--顶部导航栏-->
<div class="music-control">
<!--<div class="music">
<audio controls autoplay id="m">
<source src="梦然%20-%20是你.flac" type="audio/mpeg">
</audio>
</div>-->
<div class="music" id="Bplay">
<svg class="icon" height="200" id="bofang" p-id="1600" style="display: block;" t="1727609799811" version="1.1" viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg"><path d="M772.7 217.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#707070" p-id="1601"></path><path d="M415.8 679.9c5.9 0 11.5-1.6 16.2-4.5l231.1-134.6c10.9-5.2 18.5-16.3 18.5-29.2 0-11.9-6.4-22.3-16-27.8L439.7 352.2c-5.8-6.7-14.4-10.9-23.9-10.9-17.6 0-31.8 14.4-31.8 32.1 0 0.6 0 1.2 0.1 1.8l-0.4 0.2 0.5 269c-0.1 1.1-0.2 2.2-0.2 3.4 0 17.7 14.3 32.1 31.8 32.1z" fill="#707070" p-id="1602"></path><path d="M909.8 306.6c-5.4-10.5-16.3-17.8-28.9-17.8-17.8 0-32.2 14.4-32.2 32.1 0 6 1.7 11.7 4.6 16.5l-0.1 0.1c26.9 52.4 42.1 111.8 42.1 174.7 0 211.6-171.6 383.2-383.2 383.2S128.8 723.8 128.8 512.2 300.4 129.1 512 129.1c62.5 0 121.5 15 173.6 41.5l0.2-0.4c4.6 2.6 10 4.1 15.7 4.1 17.8 0 32.2-14.4 32.2-32.1 0-13.1-7.9-24.4-19.3-29.4C653.6 81.9 584.9 64.5 512 64.5 264.7 64.5 64.3 265 64.3 512.2S264.7 959.9 512 959.9s447.7-200.4 447.7-447.7c0-74.1-18-144-49.9-205.6z" fill="#707070" p-id="1603"></path></svg>
<svg class="icon" height="200" id="zanting" p-id="1835" style="display: none;" t="1727609863995" version="1.1" viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg"><path d="M910.8 303.6c-5.4-10.5-16.3-17.8-28.9-17.8-17.8 0-32.2 14.4-32.2 32.1 0 6 1.7 11.7 4.6 16.5l-0.1 0.1c26.9 52.4 42.1 111.8 42.1 174.7 0 211.6-171.6 383.2-383.2 383.2S129.8 720.8 129.8 509.2 301.4 126.1 513 126.1c62.5 0 121.5 15 173.6 41.5l0.2-0.4c4.6 2.6 10 4.1 15.7 4.1 17.8 0 32.2-14.4 32.2-32.1 0-13.1-7.9-24.4-19.3-29.4C654.6 78.9 585.9 61.5 513 61.5 265.7 61.5 65.3 262 65.3 509.2S265.7 956.9 513 956.9s447.7-200.4 447.7-447.7c0-74.1-18-144-49.9-205.6z" fill="#707070" p-id="1836"></path><path d="M385.4 352.2V672c0 17.5 14.3 31.9 31.9 31.9 17.6 0 32-14.4 31.9-31.9V352.2c0-17.5-14.3-31.9-31.9-31.9-17.5 0-31.9 14.3-31.9 31.9zM578.9 352.2V672c0 17.5 14.3 31.9 31.9 31.9 17.5 0 31.9-14.4 31.9-31.9V352.2c0-17.5-14.3-31.9-31.9-31.9-17.5 0-31.9 14.3-31.9 31.9z" fill="#707070" p-id="1837"></path><path d="M772.7 217.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#707070" p-id="1838"></path></svg>
<!--<img style="display: block;" id="bofang" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQEfOnNphlxqfbNPCfb_ty_6WrtonnRpgZZQ&s" alt="">
<img style="display: none;" id="zanting" src="https://png.pngtree.com/png-vector/20190501/ourmid/pngtree-vector-pause-icon-png-image_1019793.jpg" alt="">
-->
</div>
<audio controls id="audiO" loop src="梦然%20-%20是你.mp3"></audio>
</div>
<div id="fade3">
<h1 class="huge_title_1">元旦快乐</h1>
<h1 class="huge_title_1">八五纪念网 | 喜迎2025</h1>
<nav>
<!-- 保留原有一言内容显示位置 -->
<h1 id="hitokoto_text" class="hit_text">
正在获取一言...
</h1>
</nav>
<script>
let currentHitokoto = ''; // 保存当前的一言内容
function fetchHitokoto() {
const hitokoto = document.querySelector('#hitokoto_text');
fetch('https://v1.hitokoto.cn/?c=d&c=e&c=f&c=g&c=h&c=i&c=j&c=k&c=l')
.then(response => response.json())
.then(data => {
const newHitokoto = data.hitokoto;
if (newHitokoto && newHitokoto !== currentHitokoto) {
currentHitokoto = newHitokoto; // 更新当前的一言内容
hitokoto.style.opacity = 0; // 设置透明度为0，开始淡出效果
setTimeout(() => {
hitokoto.innerText = currentHitokoto;
hitokoto.style.opacity = 1; // 设置透明度为1，开始淡入效果
}, 500); // 等待500毫秒，确保淡出效果先执行
}
})
.catch(console.error);
}
// 初次加载页面时获取一言内容
fetchHitokoto();
// 定时器，每隔10秒刷新一次一言内容
setInterval(fetchHitokoto, 7000);
</script>
<h1 style="font-size: 0.9em;
color: #0b303b;
text-align: right;
font-family: Arial, sans-serif;
margin-right: 17px;
margin-top: 20px;
">designed by Wemsur</h1>
<br>
<br>
</div> <!--第一页内容-->
<div id="fade4" style="margin-top: 20px"> <!--第二页：班级风貌-->
<h1 class="huge_title_2">班级风貌</h1>
<div class="container">
<div class="box">
<span></span>
<div class="content">
<h2>团结协作</h2>
<p>
同学们互相团结互助，共同为班级进步而努力，为班级争得璀璨荣誉。每个同学都在集体中找到自己的位置，发挥自己的特长，共同创造一个和谐、温暖、有爱的学习环境。
</p>
</div>
</div>
<div class="box">
<span></span>
<div class="content">
<h2>积极向上</h2>
<p>
我们班级积极向上，充满活力，每个同学都努力追求进步，勇于挑战自我。在这里，我们共同成长，彼此激励，营造出一个奋发向上的学习氛围。
</p>
</div>
</div>
<div class="box">
<span></span>
<div class="content">
<h2>顽强努力</h2>
<p>
我们班级顽强努力，坚韧不拔，每个同学在学习和生活中都不畏困难，迎难而上。大家相互支持，相互鼓励，奋勇拼搏，共同打造出一个坚韧有力的集体。
</p>
</div>
</div>
<div class="box">
<span></span>
<div class="content">
<h2>自律创新</h2>
<p>
我们班级自律创新，每个同学都严格要求自己，遵守班级规章制度，同时勇于探索，追求新知。在自律中成长，在创新中进步，共同营造出一个充满活力和创造力的教学环境。
</p>
</div>
</div>
</div>
</div>
<br>
<div class="info_card" id="fade">
<div class="card-title">
<div class="card-text">
<h1>班级图库</h1>
<p>
这里记录了同学们奋力拼搏的瞬间，承载着无数美好的回忆：有操场上挥洒的汗水，有教室中努力学习的身影……
<br>
来这里，共忆从前的美好青春时光!
</p>
</div>
<div class="card-button">
<a href="photos.html">
<button >
班级图库
</button>
</a>
</div>
</div>
<div class="in_photo">
<img src="photos/6.jpg" alt="图片">
</div>
</div><!--第三页：班级图库-->
<div class="info_card2" id="fade2">
<div class="in_photo">
<img src="homeworks.jpeg" alt="图片">
</div>
<div class="card-title">
<h1>暂待规划</h1>
<p>
可能会放回忆录或者成员名单什么的东西
<br>
大家踊跃投稿
</p>
<div class="card-button">
<a href="#">
<button >
暂无
</button>
</a>
</div>
</div>
</div><!--第四页：暂待规划-->
<br>
<div class="about">
<h3><a class="ho-link" href="https://class5class.github.io">2023八年级五班 —— 杨村十中</a></h3>
</div>
<br>
<div class="about">
<h3><a class="ho-link" href="https://solariix.com">感谢:Solariix团队</a></h3>
</div>
<br>
<script src="css_js/script.js"></script>
</body>
<!--愿世间再无别离-->
</html>