update

liang4793 · Aug 6, 2024 · 2682c37 · 2682c37
1 parent a090cc7
commit 2682c37
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 1 deletion.
diff --git a/docs/M001-doc.html b/docs/M001-doc.html
@@ -0,0 +1,71 @@
+<!--¯\_(ツ)_/¯ Why are you looking at my HTML?-->
+<!DOCTYPE html>
+<html lang="en" style="width: 100%; height: 100%;">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="Liáng4793's Repository: Redefine the world with imagination. Personal website showcasing my project progress and documentation, sharing my life and thoughts.">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
+  <meta name="keywords" content="Liáng4793, Liang4793, liang4793, repository, imagination, project, design, software, development, C-4793">
+  <meta name="author" content="Liáng4793">
+  <link rel="stylesheet" type="text/css" href="../global.css">
+  <link rel="stylesheet" type="text/css" href="docs.css">
+  <link rel="shortcut icon" href="../image/logoB.svg">
+  <link href="https://fonts.googlefonts.cn/css?family=Poppins" rel="stylesheet">
+  <title>Liáng4793's Repository - Docs</title>
+  <script defer src="https://cloud.umami.is/script.js" data-website-id="7d0ad76c-fd4d-471d-bded-46aa23e7aad7"></script>
+</head>
+
+<body style="background-color:#080808; width:100%; height:100%; margin:auto; cursor: crosshair;">
+
+  <div id="progressBar">
+    <div id="percentage">0%</div>
+  </div>
+
+  <div id="content">
+    <img id="titlePic" src="../image/lifeRecorder.svg" alt="SFF">
+    <div id="title">A day at SFF(Super Furry Fusion)</div>
+
+    <div id="textInfo">Last update: 2024/8/4 <span style="color: white;">|</span> Classification: life sharing <span style="color: white;">|</span> Word count: <span id="wordCount">0</span>words <span style="color: white;">|</span> Reading time: <span id="readingTime">≈0</span>min</div>
+
+    <div id="text">
+      <h1>Share some photos taken at SFF</h1>
+
+      <h2><span style="color:rgb(250, 100, 0)">I'm very sorry if there is any infringement. You can contact me to delete it. 如有侵权非常抱歉，可以与我联系删除。</span></h2>
+
+      <h3>很高兴能遇到各位毛毛们！感谢你们和我一起合影~</h3>
+
+      <h3>按照时间顺序，先是与 @亚麒 的合影</h3>
+      <img src="../image/moments/M001-1.webp" alt="M001-1" style="width: 100%; max-width: 40rem;">
+
+      <h3>与 @诺伊尔 的合影</h3>
+      <img src="../image/moments/M001-2.webp" alt="M001-2" style="width: 100%; max-width: 40rem;">
+
+      <h3>Sorry不知道你是谁，但真的很帅</h3>
+      <img src="../image/moments/M001-3.webp" alt="M001-3" style="width: 100%; max-width: 40rem;">
+
+      <h3>与 @超辣玉子烧 的合影</h3>
+      <img src="../image/moments/M001-4.webp" alt="M001-4" style="width: 100%; max-width: 40rem;">
+
+      <h3>Sorry也不知道你是谁，但是很可爱欸</h3>
+      <img src="../image/moments/M001-5.webp" alt="M001-5" style="width: 100%; max-width: 40rem;">
+
+      <h2>有任何事欢迎随时联系我！</h2>
+
+      <p><a href="https://liang4793.github.io">[Back to main]</a></p>
+    </div>
+  </div>
+
+  <div id="expend">
+    <img id="expendImg" src="../image/expend.svg" alt="expend">
+    <div id="expendText"><div class="hoverable" onclick="window.scrollTo(0, 0);">Scroll to top</div></div>
+  </div>
+  <div id="footer">
+    ©Liáng4793, 2024</br>
+    <img class="textimg" src="../image/iconL.svg" alt="icon"><img class="textimg" style="padding-left: 1.5rem; padding-right: 1.5rem;" src="../image/textL.svg" alt="icon text"><img class="textimg" src="../image/iconL.svg" alt="icon">
+  </div>
+
+  <script type="text/javascript" src="docs.js"></script>
+</body>
+
+</html>
diff --git a/docs/P002-doc.html b/docs/P002-doc.html
@@ -29,7 +29,7 @@
     <div id="textInfo">Last update: 2024/7/12 <span style="color: white;">|</span> Classification: Project document <span style="color: white;">|</span> Word count: <span id="wordCount">0</span>words <span style="color: white;">|</span> Reading time: <span id="readingTime">≈0</span>min</div>
 
     <div id="text">
-      <h1 id="-img-src-https-s2-loli-net-2023-05-26-ilqh3gnayib7yvz-png-style-height-24px-camerabrake"><img src="https://s2.loli.net/2023/05/26/IlQH3gnayib7Yvz.png" style="height: 1.5rem;"> CameraBrake</h1>
+      <h1 id="-img-src-https-s2-loli-net-2023-05-26-ilqh3gnayib7yvz-png-style-height-24px-camerabrake"><img src="https://s2.loli.net/2023/05/26/IlQH3gnayib7Yvz.png" style="height: 1.5rem;" alt="CameraBrake"> CameraBrake</h1>
       <p><strong>Camera privacy protection</strong><br>Quickly report and block camera service from opening.<br>If you like it, please give me a star.</p>
       <h2 id="notes">Notes</h2>
       <p><strong>⚠️Only for Windows, tested on laptops running win10/11</strong><br>If there are any questions, please leave issue or contact me.</p>

diff --git a/image/lifeRecorder.svg b/image/lifeRecorder.svg
diff --git a/image/moments/M001-1.webp b/image/moments/M001-1.webp
diff --git a/image/moments/M001-2.webp b/image/moments/M001-2.webp
diff --git a/image/moments/M001-3.webp b/image/moments/M001-3.webp
diff --git a/image/moments/M001-4.webp b/image/moments/M001-4.webp
diff --git a/image/moments/M001-5.webp b/image/moments/M001-5.webp
diff --git a/index.css b/index.css
@@ -158,6 +158,49 @@
     font-size: 1.5rem;
     color: rgba(255, 255, 255, 0.4);
 }
+.Mbox {
+    position: relative;
+    overflow: hidden;
+    min-height: 20rem;
+}
+.MtextBox {
+    width: calc(100% - 29.2rem);
+}
+.MimgBox {
+    position: absolute;
+    top: 0rem;
+    right: 0rem;
+    width: 29.2rem;
+    height: 100%;
+}
+.Mimg {
+    position: absolute;
+    top: 0rem;
+    right: 0rem;
+    height: 20rem;
+    border-radius: 0.5rem;
+    -webkit-user-drag: none;
+    box-shadow: 0rem 0rem 1rem 0rem #080808;
+}
+.Mimg:hover {
+    outline: 0.2rem solid rgb(250, 100, 0);
+    outline-offset: -0.2rem;
+}
+.Mimg1 {
+    z-index: 3;
+    right: 2rem;
+    filter: brightness(100%);
+}
+.Mimg2 {
+    z-index: 2;
+    right: 1rem;
+    filter: brightness(80%);
+}
+.Mimg3 {
+    z-index: 1;
+    right: 0rem;
+    filter: brightness(60%);
+}
 #footer {
     font-size: 3.5rem;
     line-height: 1.2;
@@ -460,6 +503,24 @@
     #LL {
         font-size: 10rem;
     }
+    .MimgBox {
+        width: 27.2rem;
+    }
+    .MtextBox {
+        width: calc(100% - 27.2rem);
+    }
+    .Mimg1 {
+        right: 0rem;
+        top: 0rem;
+    }
+    .Mimg2 {
+        right: 0rem;
+        top: 1rem;
+    }
+    .Mimg3 {
+        right: 0rem;
+        top: 2rem;
+    }
 }
 @media (max-width: 1092px) {
     #axis {
@@ -474,6 +535,31 @@
     #label2 {
         margin-left: 50%;
     }
+    .MtextBox {
+        width: 100%;
+    }
+    .MimgBox {
+        position: relative;
+        top: 0rem;
+        left: 0rem;
+        width: 100%;
+        height: 20rem;
+    }
+    .Mimg1 {
+        left: 0%;
+        top: 0rem;
+        filter: brightness(100%);
+    }
+    .Mimg2 {
+        left: calc(50% - 13.33rem);
+        top: 0rem;
+        filter: brightness(100%);
+    }
+    .Mimg3 {
+        right: 0%;
+        top: 0rem;
+        filter: brightness(100%);
+    }
 }
 @media (max-width: 1000px) {
     #mePicBox {

diff --git a/index.html b/index.html
@@ -105,6 +105,21 @@
 
     <div class="box" id="moments">
       <span class="title"><img class="textimg" src="image/iconX.svg" alt="XXX"> Moments</span></br>
+
+      <div class="Mbox autoShow" id="M1box">
+        <div class="MtextBox">
+          <a href="docs/M001-doc.html" target="_blank"><span class="title hoverable">M001 A day at SFF(Super Furry Fusion)</span></a></br>
+          On 2024/8/4, I attended SFF and had so much fun(simultaneously emptied my wallet). Here are some photos I wanna share.
+          <span style="color:rgb(250, 100, 0)">I'm very sorry if there is any infringement. You can contact me to delete it. 如有侵权非常抱歉，可以与我联系删除。</span></br>
+          [activity] [5 photos]</br>
+        </div>
+        <div class="MimgBox">
+          <img class="Mimg Mimg1" src="image\moments\M001-4.webp" alt="M001-4">
+          <img class="Mimg Mimg2" src="image\moments\M001-1.webp" alt="M001-1">
+          <img class="Mimg Mimg3" src="image\moments\M001-3.webp" alt="M001-3">
+        </div>
+      </div>
+
       <div class="autoShow">Stay informed with me on <a href="https://twitter.com/liang4793" target="_blank"><span class="hoverable">X(Twitter)</span></a>!</div>
     </div>