lmq commit 2023.10.14

HSEFZ-technician · Oct 14, 2023 · 655bf77 · 655bf77
1 parent 6bdd15c
commit 655bf77
Show file tree

Hide file tree

Showing 19 changed files with 135 additions and 57 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/fonts/Library_3_am.otf b/assets/fonts/Library_3_am.otf
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/apps_corner_book.png b/images/apps_corner_book.png
diff --git a/images/apps_corner_key.png b/images/apps_corner_key.png
diff --git a/images/apps_corner_planet.png b/images/apps_corner_planet.png
diff --git a/images/apps_digital_life.png b/images/apps_digital_life.png
diff --git a/images/border_blue.jpg b/images/border_blue.jpg
diff --git a/images/border_green.jpg b/images/border_green.jpg
diff --git a/images/border_yellow.jpg b/images/border_yellow.jpg
diff --git a/images/digital_life.curve b/images/digital_life.curve
diff --git a/images/swing.png b/images/swing.png
diff --git a/images/title_rainbow.png b/images/title_rainbow.png
diff --git a/index.html b/index.html
@@ -5,51 +5,62 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <link href="style/main.css" rel="stylesheet">
+    <link href="./style/main.css" rel="stylesheet">
+    <link rel="stylesheet" href="./style/mobile.css" media="screen and (max-device-width: 600px)">
+    <link rel="stylesheet" href="./style/tablet.css" media="screen and (min-device-width: 600px) and (max-device-width: 1400px)">
+
     <title>#EFZ 数字生活</title>
 </head>
 <body>
   <div class="container">
     <main id="main" class="main">
       <div class="title-container">
-          <h1 class="highlight hand-written">#EFZ 数字生活</h1>
+          <h1 class="highlight hand-written" id="page-title">#EFZ 数字生活</h1>
           <div class="info-area">
             <!-- <h4 class="info-title hand-written">#EFZ</h4> -->
-            <p class="info-text">由社团联技术顾问开发，我们的使命是构建一个让全校学生满意的数字平台！<br>本网站目前由 <a href="[email protected]" class="name-link">2507 满五</a> 维护/开发，若有问题，请及时反馈。</p>
+            <div class="info-text">由社团联技术顾问开发，我们的使命是构建一个让全校学生满意的数字平台！<br>本网站目前由 <a href="[email protected]" class="name-link">2507 满五</a> 维护/开发，若有问题，请及时反馈。</div>
           </div>
+          <img src="./images/title_rainbow.png" id="img-title" alt="">
       </div>
     </main>
     <section id="apps">
-      <h2 class="highlight hand-written title-sm">我们的应用</h2>
-      <p class="app-info info-text">目前，技术顾问团队已经开发机选系统、社团年鉴、校内志愿者课时查询等应用。</p>
+      <div id="application-title-container">
+        <h2 class="highlight hand-written title-sm" id="application-title">我们的应用</h2>
+        <img src="./images/swing.png" id="img-apps-swing" alt="">
+        <div class="app-info info-text">目前，技术顾问团队已经开发机选系统、社团年鉴、校内志愿者课时查询等应用。</div>
+        <!-- <img src="./images/apps_digital_life.png" id="img-apps-digital_life" alt=""> -->
+     </div>
       <div class="row app-cards row-cols-auto">
         <div class="col">
-          <div class="card app-card-instance">
+          <div class="card app-card-instance" id="app-card-selection" onclick="location.href='./'">
             <div class="card-body">
               <h5 class="card-title">机选系统</h5>
               <h6 class="card-subtitle mb-2 text-body-secondary">/selection</h6>
+              <img src="./images/apps_corner_planet.png" class="img-apps-selection-corner" alt="">
               <p class="card-text">由 <a class="name-link" href="https://www.xiaoyaowudi.com/">2409 xiaoyaowudi</a> 开发的网站，后来 <a class="name-link" href="https://aeilot.top/">2507 满五</a> 进行了重新设计和优化。为同学提供社团、志愿者服务队、导师的抢选服务。</p>
-              <a href="#" class="card-link">打开</a>
+              <!-- <a href="#" class="card-link">打开</a> -->
             </div>
           </div>
         </div>
         <div class="col">
-          <div class="card app-card-instance">
+          <div class="card app-card-instance" id="app-card-yearbook">
             <div class="card-body">
               <h5 class="card-title">社团年鉴</h5>
               <h6 class="card-subtitle mb-2 text-body-secondary">/yearbook</h6>
+              <img src="./images/apps_corner_book.png" class="img-apps-selection-corner" style="margin-right: 7px" alt="">
               <p class="card-text"><a href="https://aeilot.top/" class="name-link">2507 满五</a> 开发，基于 Notion。各社团骨干成员已经在上面发布了各自的制作精美的社团年鉴，供大家查看。</p>
-              <a href="#" class="card-link">打开</a>
+              <!-- <a href="#" class="card-link">打开</a> -->
             </div>
           </div>
         </div>
         <div class="col">
-          <div class="card app-card-instance">
+          <div class="card app-card-instance" id="app-card-volunteer">
             <div class="card-body">
               <h5 class="card-title">校内志愿者课时查询</h5>
               <h6 class="card-subtitle mb-2 text-body-secondary">/volunteer</h6>
+              <img src="./images/apps_corner_key.png" class="img-apps-selection-corner" style="height: 70px" alt="">
               <p class="card-text"><a href="https://aeilot.top/" class="name-link">2507 满五</a> 开发，26届干事优化。方便同学查看校内志愿者课时数，同时减轻了志愿者服务部同学的工作负担。</p>
-              <a href="#" class="card-link">打开</a>
+              <!-- <a href="#" class="card-link">打开</a> -->
             </div>
           </div>
         </div>
@@ -74,44 +85,7 @@ <h2 class="highlight-1 hand-written title-sm">我们的团队</h2>
         </div>
       </div>
     </section>
-    <!-- <footer>
-      <p>华东师范大学第二附属中学版权所有</p>
-    </footer> -->
     </div>
   </div>
-
-
-
-    <!-- <div>
-        <ul>
-        <il>
-        <span>
-            <img scr="" alt="search/guide/..." style="">
-         
-        </span>
-        </il>
-        <il>
-        <span><img scr="" alt="menu/help/..." style="">
-        </span>
-    </il>
-    </ul>
-    </div>
-    <h1>EFZ数字生活</h1>
-
-    <ul>
-    <il>
-        <span>
-    <a href="..."><button>机选</button></a>
-        </span>
-    </il>
-    <il>
-        <span>
-    <a href="..."><button>志愿者课时查询</button></a> 
-        </span>
-    </il>
-    </ul>
-    <footer>
-        <p>华东师范大学第二附属中学版权所有</p>
-    </footer> -->
 </body>
 </html>
diff --git a/introduction-background.png b/introduction-background.png
diff --git a/style/main.css b/style/main.css
@@ -2,16 +2,15 @@
 
 @font-face {
     font-family: "NewYeNian";
-    src: url("/assets/fonts/NewYeNian.otf");
+    src: url("./../assets/fonts/NewYeNian.otf");
 }
 
 @font-face {
     font-family: "HandWritting";
-    src: url("/assets/fonts/Handwriting.ttf") format('font/ttf');
+    src: url("./../assets/fonts/Handwriting.ttf") format('font/ttf');
 }
 
 /* page content */
-
 .hand-written, .card-title{
     font-family: "NewYeNian";
 }
@@ -23,11 +22,6 @@
     background-color: rgba(255, 255, 255, 0.8);
 }
 
-#page-logo {
-    margin-left: 10px;
-    margin-top: 3px;
-}
-
 /* #page-introduction-container {
     display: block;
     position: fixed;
@@ -77,13 +71,16 @@
     height: 100%;
     width: 100%;
     margin-top: 36px;
-    padding: 72px 0;
+    padding: 32px 0;
+    position: relative;
 }
 
 .title-container h1{
     font-size: 500%;
     /* color: #d11a2d; */
     font-weight: bolder;
+    width: fit-content;
+    display: block;
 }
 
 .highlight {
@@ -94,8 +91,19 @@
     text-decoration-skip-ink: none;
 }
 
+.highlight-1{
+    margin-top: 100px;
+    text-decoration: underline;
+    text-decoration-thickness: 0.4em;
+    text-decoration-color: #ffe40066;
+    text-underline-offset: -0.3em;
+    text-decoration-skip-ink: none;
+}
+
 .container{
     margin: 36px auto;
+    padding-left: 30px;
+    padding-right: 30px;
 }
 
 .info-area{
@@ -110,6 +118,7 @@ main{
 
 body{
     overflow-y: auto;
+    /* background-color: #c3daf1; */
     background-color: #f5f5f7;
 }
 
@@ -138,12 +147,22 @@ body{
     width: 18rem;
 }
 
+.app-card-instance:hover {
+    cursor: pointer;
+}
+
+.card-body {
+    margin-top: 6px;
+    margin-bottom: 10px;
+}
+
 a{
     text-decoration: none;
 }
 
 .name-link{
     color: #000000;
+    text-decoration: underline dashed #aaaaaa;
 }
 
 .card{
@@ -184,7 +203,70 @@ footer{
 }
 
 .info-text, .card-text{
+    width: fit-content;
     /* font-family: 'NewYeNian'; */
     /* font-size: 18px; */
     /* font-weight: 500; */
 }
+
+#application-title-container {
+    /* background-color: #f4f2caaa; */
+    width: 100%;
+    position: relative;
+}
+
+#img-title {
+    position: absolute;
+    height: 125%;
+    bottom: -20px;
+    right: 0px;
+    margin-right: 5%;
+}
+
+#img-apps-swing {
+    height: 130px;
+    display: inline;
+}
+
+#img-apps-digital_life {
+    position: absolute;
+    height: 100%;
+    right: 15%;
+    top: 0px;
+}
+
+#application-title {
+    display: inline;
+    vertical-align: bottom;
+}
+
+/* #app-card-selection {
+    background-image: url("./../images/border_blue.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    padding-top: 5px;
+    padding-bottom: 8px;
+}
+
+#app-card-yearbook {
+    background-image: url("./../images/border_green.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    padding-top: 5px;
+    padding-bottom: 8px;
+}
+
+#app-card-volunteer {
+    background-image: url("./../images/border_yellow.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    padding-top: 5px;
+    padding-bottom: 8px;
+} */
+
+.img-apps-selection-corner{
+    position: absolute;
+    height: 100px;
+    right: 0px;
+    top: 0px;
+}
diff --git a/style/mobile.css b/style/mobile.css
@@ -0,0 +1,15 @@
+#page-title {
+    font-size: 50px;
+}
+
+#img-title {
+    display: none;
+}
+
+#img-apps-swing {
+    display: none;
+}
+
+#img-apps-digital_life {
+    display: none;
+}
diff --git a/style/tablet.css b/style/tablet.css
@@ -0,0 +1,7 @@
+#img-title {
+    display: none;
+}
+
+#img-apps-digital_life {
+    display: none;
+}