v2.4

assets/js/statuspage.js

@@ -0,0 +1,52 @@
+(function(){
+
+    var frame = document.createElement('iframe');
+    frame.src = 'https://fq8xc1yqvf0c.statuspage.io/embed/frame';
+    frame.style.position = 'fixed';
+    frame.style.border = 'none';
+    frame.style.boxShadow = '0 20px 32px -8px rgba(9,20,66,0.25)';
+    frame.style.zIndex = '9999';
+    frame.style.transition = 'left 1s ease, bottom 1s ease, right 1s ease';
+
+    var mobile;
+    if (mobile = screen.width < 450) {
+      frame.src += '?mobile=true';
+      frame.style.height = '20vh';
+      frame.style.width = '100vw';
+      frame.style.left = '-9999px';
+      frame.style.bottom = '-9999px';
+      frame.style.transition = 'bottom 1s ease';
+    } else {
+      frame.style.height = '115px';
+      frame.style.width = '320px';
+      frame.style.left = 'auto';
+      frame.style.right = '-9999px';
+      frame.style.bottom = 'calc(100% - 175px)';
+    }
+
+    document.body.appendChild(frame);
+
+    var actions = {
+      showFrame: function() {
+        if (mobile) {
+          frame.style.left = '0';
+          frame.style.bottom = '0';
+        }
+        else {
+          frame.style.left = 'auto';
+          frame.style.right = '60px'
+        }
+      },
+      dismissFrame: function(){
+        frame.style.left = '-9999px';
+      }
+    }
+
+    window.addEventListener('message', function(event){
+      if (event.data.action && actions.hasOwnProperty(event.data.action)) {
+        actions[event.data.action](event.data);
+      }
+    }, false);
+
+    window.statusEmbedTest = actions.showFrame;
+})();

index.html

@@ -18,20 +18,23 @@
 			<footer id="footer">
 				<ul class="icons">
 					<li><a href="https://wechat.davidmiller.top" class="icon brands fa-weixin"><span class="label">WeChat</span></a></li>
+					<li><a href="mailto:davidmillercn@outlook.com" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
+					<li><a href="https://s.team/p/gthp-ftqg" class="icon brands fa-steam"><span class="label">Steam</span></a></li>
 					<li><a href="https://twitter.com/CitizenBeta2" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
 					<li><a href="https://github.com/CitizenBeta2" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
-					<li><a href="mailto:davidmillercn@outlook.com" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
+					<li><a href="https://www.facebook.com/CitizenBeta2" class="icon brands fa-facebook"><span class="label">Facebook</span></a></li>
 					<li><a href="https://img.davidmiller.top/qq.jpg" class="icon brands fa-qq"><span class="label">QQ</span></a></li>
 					<li><a href="https://pki.davidmiller.top" class="icon solid fa-key"><span class="label">PKI</span></a></li>
-					<li><a href="https://www.facebook.com/CitizenBeta2" class="icon brands fa-facebook"><span class="label">Facebook</span></a></li>
+					<li><a href="https://vault.davidmiller.top" class="icon solid fa-lock"><span class="label">Bitwarden</span></a></li>
-					<li><a href="https://steamcommunity.com/id/davidmillercn/" class="icon brands fa-steam"><span class="label">Steam</span></a></li>
 				</ul>
 				<ul class="copyright">
 					<li>&copy; <span id=current-year><script>document.getElementById("current-year").innerHTML=(new Date).getFullYear()</script></span> David Miller.</li>
-					<li><a href="https://status.davidmiller.top/">System Status</a></li>
+					<li><a href="https://github.com/CitizenBeta2/Homepage">Version 2.4</a></li>
+					<li><a href="https://davidmiller.statuspage.io/">System Status</a></li>
 					<li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802035614" target="_blank">京公网安备 11010802035614号</a></li>
 					<li><a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2021023756号-1</a></li>
 				</ul>
+				<script src="assets/js/statuspage.js"></script>
 			</footer>
 
 		<!-- Scripts -->