update

global.css

@@ -4,6 +4,9 @@ html {
     font-family: 'Poppins', sans-serif;
     word-break: break-all;
 }
+::selection {
+    background-color: rgb(250, 100, 0, 0.4);
+}
 @keyframes appear {
     0% {
         opacity: 0;
@@ -20,6 +23,44 @@ html {
         opacity: 0;
     }
 }
+@keyframes fromL {
+    0% {
+        margin-left: -2rem;
+        opacity: 0;
+    }
+    100% {
+        margin-left: 0rem;
+        opacity: 1;
+    }
+}
+@keyframes fromR {
+    0% {
+        margin-right: -2rem;
+        opacity: 0;
+    }
+    100% {
+        margin-right: 0rem;
+        opacity: 1;
+    }
+}
+@keyframes fromT {
+    0% {
+        margin-top: -2rem;
+        opacity: 0;
+    }
+    100% {
+        margin-top: 0rem;
+        opacity: 1;
+    }
+}
+@keyframes rotate{
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
 body::-webkit-scrollbar {
     width: 20px;
     height: 20px;

index.css

@@ -84,6 +84,7 @@
     color: white;
     text-align: center;
 }
+
 #shade2 {
     display: none;
 }
@@ -93,4 +94,75 @@
     left: 5%;
     width: 90%;
     min-width: 35rem;
+}
+.shadeBox2 {
+    position: relative;
+    margin-top: 2rem;
+    left: 0rem;
+    width: 100%;
+    display: none;
+}
+#map {
+    display: none;
+    position: relative;
+    width: 60%;
+    max-width: 35rem;
+    float: left;
+}
+#locationInfo {
+    position: relative;
+    top: 0rem;
+    left: 37rem;
+    width: calc(100% - 37rem);
+    color: white;
+}
+#axis {
+    position: absolute;
+    top: 0rem;
+    left: 0rem;
+    font-size: 3.5rem;
+    line-height: 1.2;
+    margin-top: -3rem;
+}
+#LL {
+    display: none;
+    font-size: 14rem;
+    color: rgb(250, 100, 0);
+}
+#SS {
+    display: none;
+    color: rgba(255, 255, 255, 0.4);
+}
+#timeTitle {
+    display: none;
+}
+@media (max-width: 1260px) {
+    #axis {
+        margin-top: -2rem;
+    }
+    #LL {
+        font-size: 10rem;
+    }
+}
+@media (max-width: 1092px) {
+    #axis {
+        margin-top: -1.6rem;
+    }
+    #LL {
+        font-size: 8rem;
+    }
+}
+@media (max-width: 894px) {
+    #axis {
+        margin-top: -1.2rem;
+    }
+    #LL {
+        font-size: 5rem;
+    }
+}
+@media (max-width: 65rem) {
+    #locationInfo {
+        left: 63.2%;
+        width: 38%;
+    }
 }

index.html

@@ -54,7 +54,7 @@
 
     <div class="box" id="moments">
       <span class="title"><img class="textimg" src="image/iconX.svg" alt="XXX"> Moments</span></br>
-      Nothing here yet. Stay informed with me!
+      Stay informed with me on <a style="text-decoration:none;" href="https://twitter.com/liang4793" target="_blank"><span class="hoverable">X(Twitter)</span></a>!
     </div>
 
     <div class="box" id="footer">
@@ -66,6 +66,21 @@
   <div class="shade" id="shade2">
     <div class="shadeBox">
       <span class="title hoverable" id="quit"><img class="textimg" src="image/iconX.svg" alt="XXX"> Back to main</span>
+
+      <div class="shadeBox2" id="locationBox">
+        <div id="map">
+          <img style="position:relative; top:0rem; left:0rem; width:100%" src="image/location/map.svg" alt="map">
+          <img style="position:absolute; top:70%; left:5%; width:20%; animation: rotate 10s linear infinite;" src="image/location/lock.svg" alt="lock">
+        </div>
+        <div id="locationInfo">
+          <div id="axis"><span id="LL">121°E</br>30°N</span><span id="SS">Earth, Solar System, Oort Cloud, Local Fluff, C-4793.</span><span id="timeTitle">Local time: <span id="localTime"></span></span></div>
+        </div>
+      </div>
+
+      <div class="shadeBox2" id="meBox"></div>
+
+      <div class="shadeBox2" id="repoBox"></div>
+
     </div>
   </div>
 

index.js

@@ -29,27 +29,69 @@ function startPage() {
 //main
 let shade2 = document.getElementById("shade2");
 let quit = document.getElementById("quit");
+let l = document.getElementById("location");
+let me = document.getElementById("me");
+let repo = document.getElementById("repo");
+
+//locationBox
+let lBox = document.getElementById("locationBox");
+let map = document.getElementById("map");
+let LL = document.getElementById("LL");
+let SS = document.getElementById("SS");
+let timeTitle = document.getElementById("timeTitle");
+let localTime = document.getElementById("localTime");
+
+let meBox = document.getElementById("meBox");
+let repoBox = document.getElementById("repoBox");
 
 quit.addEventListener("click", () => {
     shade2.style.animation = "disappear 0.2s ease-in forwards";
     container.style.animation = "appear 0.2s ease-in forwards";
     setTimeout(() => {
         shade2.style.display = "none";
         container.style.display = "block";
+
+        lBox.style.display = "none";
+        map.style.display = "none";
+        LL.style.display = "none";
+        SS.style.display = "none";
+        timeTitle.style.display = "none";
+
+        meBox.style.display = "none";
+        repoBox.style.display = "none";
     }, 200);
 });
 
-let l = document.getElementById("location");
-let me = document.getElementById("me");
-let repo = document.getElementById("repo");
-
+function updateLocalTime() {
+    var time = new Date().toLocaleString("en-US", {timeZone: "Asia/Shanghai"});
+    localTime.innerHTML = time;
+}
 l.addEventListener("click", () => {
+    updateLocalTime()
+    setInterval(updateLocalTime, 1000);
     shade2.style.animation = "appear 0.2s ease-in forwards";
     container.style.animation = "disappear 0.2s ease-in forwards";
     setTimeout(() => {
         shade2.style.display = "block";
         container.style.display = "none";
     }, 200);
+    lBox.style.display = "block";
+    map.style.animation = "fromL 0.4s ease forwards";
+    setTimeout(() => {
+        map.style.display = "block";
+    }, 400);
+    LL.style.animation = "fromT 0.4s ease forwards";
+    setTimeout(() => {
+        LL.style.display = "block";
+    }, 400);
+    SS.style.animation = "fromT 0.4s ease forwards";
+    setTimeout(() => {
+        SS.style.display = "block";
+    }, 400);
+    timeTitle.style.animation = "fromT 0.4s ease forwards";
+    setTimeout(() => {
+        timeTitle.style.display = "block";
+    }, 400);
 });
 
 me.addEventListener("click", () => {