增加闭幕式

pinsoftstudio · Oct 15, 2023 · 8c5dddc · 8c5dddc
1 parent 7b4a0c3
commit 8c5dddc
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 20 deletions.
diff --git a/examp.css b/examp.css
@@ -120,7 +120,7 @@ body{
     text-align: center;
     transition: 200ms cubic-bezier(1, 0, 0, 1);
     overflow-y: auto;
-    overflow-x: hidden;
+    overflow-x: hidden !important;
     scroll-behavior: smooth;
 }
 
@@ -135,6 +135,7 @@ body{
     gap: 12px;
     justify-content: center;
     grid-auto-flow: row dense;
+    overflow: hidden;
 }
 
 
@@ -223,11 +224,11 @@ body{
 
 :root.mobile #music{
     width: calc(100% - 30px);
-    min-width: 200px;
+    min-width: 170px;
 }
 
 #music>.ti{
-    font-size: 100px;
+    font-size: 80px;
     margin: 0;
 }
 

diff --git a/examp.js b/examp.js
@@ -5,6 +5,17 @@ try{
     pld=true;
 }
 let ph,played=false,playm=pld;
+if(localStorage.getItem('playm')=='true'){
+    playm=true;
+    $('#music>.btn.play').remove();
+    $('#music>.tip').text('我们时刻准备趁浏览器不备播放音乐');
+}else if(localStorage.getItem('playm')=='false'){
+    document.getElementById('audio').pause();
+    playm=false;
+    $('#music>.btn.noplay').remove();
+    $('#music>.tip').text('我们不会播放音乐');
+    localStorage.setItem('playm',false);
+}
 function init() {
     ph=window.innerHeight;
     $(':root').css('--ph',`${ph}px`);
@@ -18,14 +29,14 @@ function start() {
     let pics=document.querySelectorAll('#content>.pic');
     document.addEventListener('scroll',()=>{
         if(playm && (!played)){
-            document.getElementById('audio').play();
             if(document.getElementById('audio').played.length>0){
                 played=true;
+                $('#music>.btn').remove();
                 $('#musctrl>.btn').text('暂停');
                 $('#musctrl>.btn').removeClass('play');
                 $('#music>.tip').text('我们已开始播放音乐');
-                $('#music>.btn').remove();
-            }
+            }else
+            document.getElementById('audio').play();
         }
         let t=$('html').scrollTop();
         pics.forEach(pic => {

diff --git a/example.html b/example.html
@@ -7,6 +7,7 @@
     <title id="title">Title</title>
     <link rel="stylesheet" href="examp.css">
     <base target="_self">
+    <link rel="shortcut icon" href="https://picst.sunbangyan.cn/2023/10/14/rb0n6s.png" type="image/png">
 </head>
 
 <body>
@@ -51,7 +52,7 @@
             <a class="card enable" href="example.html?id=volunteer">
                 <p>志愿服务</p>
             </a>
-            <a class="card" style="grid-column: 2 span;">
+            <a class="card enable" style="grid-column: 2 span;" href="example.html?id=closecrmn">
                 <p>闭幕式</p>
             </a>
             <a class="card">
@@ -128,17 +129,21 @@
     </script>
     <div id="content">
         <div id="music">
-            <p class="ti">音乐起~</p>
-            <p class="tip">下滑即意味着我们会趁浏览器不注意时播放</p>
+            <p class="ti">奏乐~</p>
+            <p class="tip">下滑即意味着我们将趁浏览器不备时播放</p>
             <a onclick="document.getElementById('audio').play();
             played=true;
             $('#musctrl>.btn').text('暂停');
             $('#musctrl>.btn').removeClass('play');
             $('#music>.tip').text('我们已开始播放音乐');
-            $('#music>.btn.noplay').remove();
-            $(this).remove();" class="play a btn">播放</a>
-            <a class="a btn noplay"
-                onclick="playm=false;$('#musctrl').remove();$('#music>.btn').remove();$('#music>.tip').text('我们不会播放音乐')">不播放音乐</a>
+            $('#music>.btn').remove();
+            localStorage.setItem('playm','true');" class="play a btn">默认播放</a>
+            <a class="a btn noplay" onclick="
+            document.getElementById('audio').pause();
+            playm=false;
+            $('#music>.btn').remove();
+            $('#music>.tip').text('我们不会播放音乐');
+            localStorage.setItem('playm','false');">从不播放</a>
         </div>
     </div>
     <div id="footer">

diff --git a/index.css b/index.css
@@ -85,7 +85,7 @@ body {
     border-radius: 10px;
     /* box-shadow: 0 2px 20px #00000050; */
     /* background-color: #efefef; */
-    background-image: radial-gradient(circle at 50% 120%, #ffb3b3 0 10%, #fffbf2c0 60%);
+    background-image: radial-gradient(circle at 50% 120%, #ffaeae 0 10%, #f5f0e7c0 60%);
     backdrop-filter: blur(5px) saturate(0.8);
     padding: 40px 0;
     width: 100%;
@@ -94,6 +94,7 @@ body {
     margin-bottom: calc(var(--ph) / 2);
     font-size: 30px;
     overflow: hidden;
+    box-shadow: 0 1px 70px #a0480050;
 }
 
 #tit>.cnt>img {
@@ -162,7 +163,6 @@ body {
     grid-template-columns: repeat(auto-fill, 200px);
     gap: 12px;
     padding: 10px 60px;
-    margin-bottom: 100px;
     justify-content: center;
     grid-auto-flow: row dense;
 }
@@ -204,6 +204,26 @@ body {
     opacity: 0.7;
 }
 
+#download{
+    display: flex;
+    margin-bottom: 100px;
+    justify-content: center;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+#download>.btn{
+    background-color: #0067c0;
+    box-shadow: 0 -0.5px 1px #1473c5,0 1px 2px #003e73;
+    color:#fff;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+}
+
+#download>.btn:active{
+    opacity: 0.7;
+}
+
 #totop {
     position: fixed;
     right: 20px;
@@ -234,10 +254,10 @@ body {
     position: relative;
     bottom: 0;
     width: calc(100% - 50px);
-    background-color: #222;
+    background-color: #333;
     color: #eee;
-    padding: 25px 30px 20px 20px;
+    padding: 25px 30px 20px 30px;
     margin: 10px 25px;
     border-radius: 10px;
-    box-shadow: 0 1px 6px var(--sd);
+    box-shadow: 0 1px 16px #00000050;
 }
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <title class="title">安徽省天长中学第五十届田径运动会相册</title>
     <link rel="stylesheet" href="index.css">
     <base target="_blank">
+    <link rel="shortcut icon" href="https://picst.sunbangyan.cn/2023/10/14/rb0n6s.png" type="image/png">
 </head>
 <body>
     <div id="cover">
@@ -30,7 +31,7 @@
       </svg> 下滑</p>
     <div id="content">
 
-        <div class="trad">
+        <div class="trad af">
 金秋时节，传去朗朗读书声；
 十月清风，传来阵阵少年笑。
 
@@ -47,7 +48,7 @@
         <a class="card enable" href="example.html?id=volunteer">
             <p>志愿服务</p>
         </a>
-        <a class="card" style="grid-column: 2 span;">
+        <a class="card enable" style="grid-column: 2 span;" href="example.html?id=closecrmn">
             <p>闭幕式</p>
         </a>
         <a class="card">
@@ -87,6 +88,16 @@
             <p>迎面接力</p>
         </a>
     </div>
+    <div id="download">
+        <a class="a btn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
+            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+          </svg>下载所有图片 (原图)</a>
+        <a class="a btn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-database-down" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M12.5 9a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm.354 5.854a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708l.646.647V10.5a.5.5 0 0 1 1 0v2.793l.646-.647a.5.5 0 0 1 .708.708l-1.5 1.5Z"/>
+            <path fill-rule="evenodd" d="M12.096 6.223A4.92 4.92 0 0 0 13 5.698V7c0 .289-.213.654-.753 1.007a4.493 4.493 0 0 1 1.753.25V4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16c.536 0 1.058-.034 1.555-.097a4.525 4.525 0 0 1-.813-.927C8.5 14.992 8.252 15 8 15c-1.464 0-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13h.027a4.552 4.552 0 0 1 0-1H8c-1.464 0-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10c.262 0 .52-.008.774-.024a4.525 4.525 0 0 1 1.102-1.132C9.298 8.944 8.666 9 8 9c-1.464 0-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777ZM3 4c0-.374.356-.875 1.318-1.313C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4Z"/>
+          </svg>下载所有图片 (压缩后)</a>
+    </div>
     <div id="footer">
         网站制作：<a class="a jump" target="_blank" href="https://tjy-gitnub.github.io/">星源</a><br>
         策划方：<a class="a jump" target="_blank">水滴实验室</a>

diff --git a/pics/closecrmn.json b/pics/closecrmn.json
@@ -0,0 +1,49 @@
+{
+    "title": "闭幕式",
+    "intro":{
+        "tit":"闭幕式",
+        "cnt":"闭幕式是田径运动会中的一个重要环节，也是全校师生共同欢庆的时刻。在闭幕式上，学校会表彰优胜者，回顾精彩瞬间，并传递激励和感恩的信息，让运动会精神在师生心中发扬光大。"
+    },
+    "pics": [
+        {
+            "url": "https://picst.sunbangyan.cn/2023/10/15/9ed5c24aff6b52f42a90f1cfcf01d597.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picdl.sunbangyan.cn/2023/10/15/81771cc539a1d8a0a4b81211370a79e9.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picdl.sunbangyan.cn/2023/10/15/53e011a3b51f7fdbd7a1e88ba769f659.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picst.sunbangyan.cn/2023/10/15/dd287be9f66d5f104d858462a4334fbf.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picdl.sunbangyan.cn/2023/10/15/f5d889714403e0dc140dad219442b942.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picss.sunbangyan.cn/2023/10/15/808202dc63aa860452a78503f68f40ad.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picdm.sunbangyan.cn/2023/10/15/e612083ab187ea40c8ed5cbf8bd6047f.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picss.sunbangyan.cn/2023/10/15/83bb674e46cb9d7cac3e1c0d4cf3082a.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picdl.sunbangyan.cn/2023/10/15/dd16e751e207ce3293ca276ef860b8b9.jpg",
+            "dtl": ""
+        },
+        {
+            "url": "https://picst.sunbangyan.cn/2023/10/15/abd7f63de97d6037796742d5f83f982a.jpg",
+            "dtl": ""
+        }
+    ]
+}
diff --git a/pics/opencrmn.json b/pics/opencrmn.json
@@ -1,5 +1,9 @@
 {
     "title": "开幕式",
+    "intro":{
+        "tit":"开幕式",
+        "cnt":"开幕式是田径运动会中一项重要的文艺表演活动，以热烈欢快的气氛为运动会拉开序幕。它不仅是各项比赛前的热身演出，更是学校展示综合实力和精神风貌的重要舞台。"
+    },
     "pics": [
         {
             "url": "https://picdl.sunbangyan.cn/2023/10/14/zeb2l1.jpg",