更新页面

Static/mdui-v1.0.1/css/ui.css

@@ -1,3 +1,40 @@
+body{
+    overflow-x:hidden;
+}
+/* loading start */
+#loading {
+	position: fixed;
+	top: 0px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 10000;
+	background-color: #242222;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: -ms-flex;
+	display: -o-flex;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+#loading span {
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	border: 10px solid #777777;
+	border-top-color: #fff;
+	position: relative;
+	animation: loadingA 1s linear infinite;
+}
+@keyframes loadingA {
+	from {}
+	to {
+		transform: rotate(360deg);
+	}
+}
+/* loading end */
+
 /* slideshow */
 .slideshow-container {
     position: relative;
@@ -213,34 +250,23 @@ body {
     margin-left: 15px;
     position: relative;
 }
-.mdui-grid-tile a img{
+.mdui-grid-tile img{
     aspect-ratio: 16/9;
 }
 
-@media (min-width: 1381px){
-    .c-inner {
-        margin: 0 auto;
-        max-width: 1408px;
-        padding: 0 64px;
-      }
-}
-@media (max-width: 1380px){
-    .c-inner {
-        display: none;
-      }
-}
-@media (max-width: 837px) {
+
+@media (max-width: 983px) {
     .mdui-hidden-lok-down {
       display: none !important;
     }
 }
-@media (min-width: 836px) {
+@media (min-width: 982px) {
     .mdui-hidden-xm-pe {
       display: none !important;
     }
 }
 .banner {
-    max-width: 1000px;
+    max-width: 1200px;
     margin-bottom: 15px;
     box-sizing: border-box;
     margin-right: auto;
@@ -249,5 +275,79 @@ body {
     padding-left: 8px;
 }
 
+@media (min-width: 1383px){
+    .c-scl{
+        margin: 0 auto;
+        margin-top: 60px;
+        max-width: 1408px;
+        padding: 0px;
+      }
+}
+@media (max-width: 1384px){
+    .c-scl{
+        display: none;
+      }
+}
 
+@media (max-width: 1384px){
+    .c-inner{
+        display: none;
+      }
+}
 
+@media (min-width: 835px){
+    .c-secttl{
+        font-size: 3.75rem!important;
+        padding-bottom: calc(20px - 0.1em);
+    }
+}
+.c-secttl{
+    margin-left: 15px;
+    color: #fffef5;
+    font-size: 10.4vw;
+    font-weight: 700;
+    line-height: 1;
+    padding-bottom: 12px;
+} 
+
+@media (min-width: 1383px){
+    .slow{
+        text-align: center;
+        margin: 0 auto;
+        margin-top: 61px;
+        margin-left: 15px;
+        max-width: 1408px;
+        border: 2px solid #585858;
+        border-radius: 15px;
+        backdrop-filter: blur(5px);
+      }
+}
+@media (max-width: 1384px){
+    .slow{
+        display: none;
+      }
+}
+
+@media (min-width: 1383px){
+    .slow-two{
+        text-align: center;
+        margin: 0 auto;
+        margin-top: 300px;
+        margin-left: 15px;
+        max-width: 1408px;
+        border: 2px solid #585858;
+        border-radius: 15px;
+        backdrop-filter: blur(5px);
+      }
+}
+@media (max-width: 1384px){
+    .slow{
+        display: none;
+      }
+}
+.slow h2{
+    padding: 35px 0px 35px 0px;
+}
+.slow-two h2{
+    padding: 35px 0px 35px 0px;
+}

Static/mdui-v1.0.1/js/WOW.js

@@ -1,416 +1,513 @@
-function isIn(needle, haystack) {
-  return haystack.indexOf(needle) >= 0;
-}
+(function() {
+  var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
+    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
-function extend(custom, defaults) {
-  for (const key in defaults) {
-    if (custom[key] == null) {
-      const value = defaults[key];
-      custom[key] = value;
-    }
-  }
-  return custom;
-}
+  Util = (function() {
+    function Util() {}
 
-function isMobile(agent) {
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
-}
-
-function createEvent(event, bubble = false, cancel = false, detail = null) {
-  let customEvent;
-  if (document.createEvent != null) { // W3C DOM
-    customEvent = document.createEvent('CustomEvent');
-    customEvent.initCustomEvent(event, bubble, cancel, detail);
-  } else if (document.createEventObject != null) { // IE DOM < 9
-    customEvent = document.createEventObject();
-    customEvent.eventType = event;
-  } else {
-    customEvent.eventName = event;
-  }
-
-  return customEvent;
-}
-
-function emitEvent(elem, event) {
-  if (elem.dispatchEvent != null) { // W3C DOM
-    elem.dispatchEvent(event);
-  } else if (event in (elem != null)) {
-    elem[event]();
-  } else if (`on${event}` in (elem != null)) {
-    elem[`on${event}`]();
-  }
-}
-
-function addEvent(elem, event, fn) {
-  if (elem.addEventListener != null) { // W3C DOM
-    elem.addEventListener(event, fn, false);
-  } else if (elem.attachEvent != null) { // IE DOM
-    elem.attachEvent(`on${event}`, fn);
-  } else { // fallback
-    elem[event] = fn;
-  }
-}
-
-function removeEvent(elem, event, fn) {
-  if (elem.removeEventListener != null) { // W3C DOM
-    elem.removeEventListener(event, fn, false);
-  } else if (elem.detachEvent != null) { // IE DOM
-    elem.detachEvent(`on${event}`, fn);
-  } else { // fallback
-    delete elem[event];
-  }
-}
-
-function getInnerHeight() {
-  if ('innerHeight' in window) {
-    return window.innerHeight;
-  }
-
-  return document.documentElement.clientHeight;
-}
-
-// Minimalistic WeakMap shim, just in case.
-const WeakMap = window.WeakMap || window.MozWeakMap ||
-class WeakMap {
-  constructor() {
-    this.keys = [];
-    this.values = [];
-  }
-
-  get(key) {
-    for (let i = 0; i < this.keys.length; i++) {
-      const item = this.keys[i];
-      if (item === key) {
-        return this.values[i];
+    Util.prototype.extend = function(custom, defaults) {
+      var key, value;
+      for (key in defaults) {
+        value = defaults[key];
+        if (custom[key] == null) {
+          custom[key] = value;
+        }
       }
-    }
-    return undefined;
-  }
+      return custom;
+    };
 
-  set(key, value) {
-    for (let i = 0; i < this.keys.length; i++) {
-      const item = this.keys[i];
-      if (item === key) {
-        this.values[i] = value;
-        return this;
+    Util.prototype.isMobile = function(agent) {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
+    };
+
+    Util.prototype.createEvent = function(event, bubble, cancel, detail) {
+      var customEvent;
+      if (bubble == null) {
+        bubble = false;
       }
-    }
-    this.keys.push(key);
-    this.values.push(value);
-    return this;
-  }
-};
-
-// Dummy MutationObserver, to avoid raising exceptions.
-const MutationObserver =
-  window.MutationObserver || window.WebkitMutationObserver ||
-  window.MozMutationObserver ||
-  class MutationObserver {
-    constructor() {
-      if (typeof console !== 'undefined' && console !== null) {
-        console.warn('MutationObserver is not supported by your browser.');
-        console.warn(
-          'WOW.js cannot detect dom mutations, please call .sync() after loading new content.'
-        );
+      if (cancel == null) {
+        cancel = false;
       }
-    }
-
-    static notSupported = true;
-
-    observe() {}
-  };
-
-// getComputedStyle shim, from http://stackoverflow.com/a/21797294
-const getComputedStyle = window.getComputedStyle ||
-function getComputedStyle(el) {
-  const getComputedStyleRX = /(\-([a-z]){1})/g;
-  return {
-    getPropertyValue(prop) {
-      if (prop === 'float') { prop = 'styleFloat'; }
-      if (getComputedStyleRX.test(prop)) {
-        prop.replace(getComputedStyleRX, (_, _char) => _char.toUpperCase());
+      if (detail == null) {
+        detail = null;
       }
-      const { currentStyle } = el;
-      return (currentStyle != null ? currentStyle[prop] : void 0) || null;
-    },
-  };
-};
-
-export default class WOW {
-  defaults = {
-    boxClass: 'wow',
-    animateClass: 'animated',
-    offset: 0,
-    mobile: true,
-    live: true,
-    callback: null,
-    scrollContainer: null,
-    resetAnimation: true,
-  };
-
-  constructor(options = {}) {
-    this.start = this.start.bind(this);
-    this.resetAnimation = this.resetAnimation.bind(this);
-    this.scrollHandler = this.scrollHandler.bind(this);
-    this.scrollCallback = this.scrollCallback.bind(this);
-    this.scrolled = true;
-    this.config = extend(options, this.defaults);
-    if (options.scrollContainer != null) {
-      this.config.scrollContainer = document.querySelector(options.scrollContainer);
-    }
-  // Map of elements to animation names:
-    this.animationNameCache = new WeakMap();
-    this.wowEvent = createEvent(this.config.boxClass);
-  }
-
-  init() {
-    this.element = window.document.documentElement;
-    if (isIn(document.readyState, ['interactive', 'complete'])) {
-      this.start();
-    } else {
-      addEvent(document, 'DOMContentLoaded', this.start);
-    }
-    this.finished = [];
-  }
-
-  start() {
-    this.stopped = false;
-    this.boxes = [].slice.call(this.element.querySelectorAll(`.${this.config.boxClass}`));
-    this.all = this.boxes.slice(0);
-    if (this.boxes.length) {
-      if (this.disabled()) {
-        this.resetStyle();
+      if (document.createEvent != null) {
+        customEvent = document.createEvent('CustomEvent');
+        customEvent.initCustomEvent(event, bubble, cancel, detail);
+      } else if (document.createEventObject != null) {
+        customEvent = document.createEventObject();
+        customEvent.eventType = event;
       } else {
-        for (let i = 0; i < this.boxes.length; i++) {
-          const box = this.boxes[i];
-          this.applyStyle(box, true);
+        customEvent.eventName = event;
+      }
+      return customEvent;
+    };
+
+    Util.prototype.emitEvent = function(elem, event) {
+      if (elem.dispatchEvent != null) {
+        return elem.dispatchEvent(event);
+      } else if (event in (elem != null)) {
+        return elem[event]();
+      } else if (("on" + event) in (elem != null)) {
+        return elem["on" + event]();
+      }
+    };
+
+    Util.prototype.addEvent = function(elem, event, fn) {
+      if (elem.addEventListener != null) {
+        return elem.addEventListener(event, fn, false);
+      } else if (elem.attachEvent != null) {
+        return elem.attachEvent("on" + event, fn);
+      } else {
+        return elem[event] = fn;
+      }
+    };
+
+    Util.prototype.removeEvent = function(elem, event, fn) {
+      if (elem.removeEventListener != null) {
+        return elem.removeEventListener(event, fn, false);
+      } else if (elem.detachEvent != null) {
+        return elem.detachEvent("on" + event, fn);
+      } else {
+        return delete elem[event];
+      }
+    };
+
+    Util.prototype.innerHeight = function() {
+      if ('innerHeight' in window) {
+        return window.innerHeight;
+      } else {
+        return document.documentElement.clientHeight;
+      }
+    };
+
+    return Util;
+
+  })();
+
+  WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
+    function WeakMap() {
+      this.keys = [];
+      this.values = [];
+    }
+
+    WeakMap.prototype.get = function(key) {
+      var i, item, j, len, ref;
+      ref = this.keys;
+      for (i = j = 0, len = ref.length; j < len; i = ++j) {
+        item = ref[i];
+        if (item === key) {
+          return this.values[i];
         }
       }
-    }
-    if (!this.disabled()) {
-      addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
-      addEvent(window, 'resize', this.scrollHandler);
-      this.interval = setInterval(this.scrollCallback, 50);
-    }
-    if (this.config.live) {
-      const mut = new MutationObserver(records => {
-        for (let j = 0; j < records.length; j++) {
-          const record = records[j];
-          for (let k = 0; k < record.addedNodes.length; k++) {
-            const node = record.addedNodes[k];
-            this.doSync(node);
-          }
-        }
-        return undefined;
-      });
-      mut.observe(document.body, {
-        childList: true,
-        subtree: true,
-      });
-    }
-  }
+    };
 
-// unbind the scroll event
-  stop() {
-    this.stopped = true;
-    removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
-    removeEvent(window, 'resize', this.scrollHandler);
-    if (this.interval != null) {
-      clearInterval(this.interval);
-    }
-  }
-
-  sync() {
-    if (MutationObserver.notSupported) {
-      this.doSync(this.element);
-    }
-  }
-
-  doSync(element) {
-    if (typeof element === 'undefined' || element === null) { ({ element } = this); }
-    if (element.nodeType !== 1) { return; }
-    element = element.parentNode || element;
-    const iterable = element.querySelectorAll(`.${this.config.boxClass}`);
-    for (let i = 0; i < iterable.length; i++) {
-      const box = iterable[i];
-      if (!isIn(box, this.all)) {
-        this.boxes.push(box);
-        this.all.push(box);
-        if (this.stopped || this.disabled()) {
-          this.resetStyle();
-        } else {
-          this.applyStyle(box, true);
-        }
-        this.scrolled = true;
-      }
-    }
-  }
-
-// show box element
-  show(box) {
-    this.applyStyle(box);
-    box.className = `${box.className} ${this.config.animateClass}`;
-    if (this.config.callback != null) { this.config.callback(box); }
-    emitEvent(box, this.wowEvent);
-
-
-    if (this.config.resetAnimation) {
-      addEvent(box, 'animationend', this.resetAnimation);
-      addEvent(box, 'oanimationend', this.resetAnimation);
-      addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
-      addEvent(box, 'MSAnimationEnd', this.resetAnimation);
-    }
-
-    return box;
-  }
-
-  applyStyle(box, hidden) {
-    const duration = box.getAttribute('data-wow-duration');
-    const delay = box.getAttribute('data-wow-delay');
-    const iteration = box.getAttribute('data-wow-iteration');
-
-    return this.animate(() => this.customStyle(box, hidden, duration, delay, iteration));
-  }
-
-  animate = (function animateFactory() {
-    if ('requestAnimationFrame' in window) {
-      return callback => window.requestAnimationFrame(callback);
-    }
-    return callback => callback();
-  }());
-
-  resetStyle() {
-    for (let i = 0; i < this.boxes.length; i++) {
-      const box = this.boxes[i];
-      box.style.visibility = 'visible';
-    }
-    return undefined;
-  }
-
-  resetAnimation(event) {
-    if (event.type.toLowerCase().indexOf('animationend') >= 0) {
-      const target = event.target || event.srcElement;
-      target.className = target.className.replace(this.config.animateClass, '').trim();
-    }
-  }
-
-  customStyle(box, hidden, duration, delay, iteration) {
-    if (hidden) { this.cacheAnimationName(box); }
-    box.style.visibility = hidden ? 'hidden' : 'visible';
-
-    if (duration) { this.vendorSet(box.style, { animationDuration: duration }); }
-    if (delay) { this.vendorSet(box.style, { animationDelay: delay }); }
-    if (iteration) { this.vendorSet(box.style, { animationIterationCount: iteration }); }
-    this.vendorSet(box.style, { animationName: hidden ? 'none' : this.cachedAnimationName(box) });
-
-    return box;
-  }
-
-  vendors = ['moz', 'webkit'];
-  vendorSet(elem, properties) {
-    for (const name in properties) {
-      if (properties.hasOwnProperty(name)) {
-        const value = properties[name];
-        elem[`${name}`] = value;
-        for (let i = 0; i < this.vendors.length; i++) {
-          const vendor = this.vendors[i];
-          elem[`${vendor}${name.charAt(0).toUpperCase()}${name.substr(1)}`] = value;
+    WeakMap.prototype.set = function(key, value) {
+      var i, item, j, len, ref;
+      ref = this.keys;
+      for (i = j = 0, len = ref.length; j < len; i = ++j) {
+        item = ref[i];
+        if (item === key) {
+          this.values[i] = value;
+          return;
         }
       }
-    }
-  }
-  vendorCSS(elem, property) {
-    const style = getComputedStyle(elem);
-    let result = style.getPropertyCSSValue(property);
-    for (let i = 0; i < this.vendors.length; i++) {
-      const vendor = this.vendors[i];
-      result = result || style.getPropertyCSSValue(`-${vendor}-${property}`);
-    }
-    return result;
-  }
+      this.keys.push(key);
+      return this.values.push(value);
+    };
 
-  animationName(box) {
-    let aName;
-    try {
-      aName = this.vendorCSS(box, 'animation-name').cssText;
-    } catch (error) { // Opera, fall back to plain property value
-      aName = getComputedStyle(box).getPropertyValue('animation-name');
+    return WeakMap;
+
+  })());
+
+  MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
+    function MutationObserver() {
+      if (typeof console !== "undefined" && console !== null) {
+        console.warn('MutationObserver is not supported by your browser.');
+      }
+      if (typeof console !== "undefined" && console !== null) {
+        console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
+      }
     }
 
-    if (aName === 'none') {
-      return '';  // SVG/Firefox, unable to get animation name?
+    MutationObserver.notSupported = true;
+
+    MutationObserver.prototype.observe = function() {};
+
+    return MutationObserver;
+
+  })());
+
+  getComputedStyle = this.getComputedStyle || function(el, pseudo) {
+    this.getPropertyValue = function(prop) {
+      var ref;
+      if (prop === 'float') {
+        prop = 'styleFloat';
+      }
+      if (getComputedStyleRX.test(prop)) {
+        prop.replace(getComputedStyleRX, function(_, _char) {
+          return _char.toUpperCase();
+        });
+      }
+      return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
+    };
+    return this;
+  };
+
+  getComputedStyleRX = /(\-([a-z]){1})/g;
+
+  this.WOW = (function() {
+    WOW.prototype.defaults = {
+      boxClass: 'wow',
+      animateClass: 'animated',
+      offset: 0,
+      mobile: true,
+      live: true,
+      callback: null,
+      scrollContainer: null
+    };
+
+    function WOW(options) {
+      if (options == null) {
+        options = {};
+      }
+      this.scrollCallback = bind(this.scrollCallback, this);
+      this.scrollHandler = bind(this.scrollHandler, this);
+      this.resetAnimation = bind(this.resetAnimation, this);
+      this.start = bind(this.start, this);
+      this.scrolled = true;
+      this.config = this.util().extend(options, this.defaults);
+      if (options.scrollContainer != null) {
+        this.config.scrollContainer = document.querySelector(options.scrollContainer);
+      }
+      this.animationNameCache = new WeakMap();
+      this.wowEvent = this.util().createEvent(this.config.boxClass);
     }
 
-    return aName;
-  }
+    WOW.prototype.init = function() {
+      var ref;
+      this.element = window.document.documentElement;
+      if ((ref = document.readyState) === "interactive" || ref === "complete") {
+        this.start();
+      } else {
+        this.util().addEvent(document, 'DOMContentLoaded', this.start);
+      }
+      return this.finished = [];
+    };
 
-  cacheAnimationName(box) {
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=921834
-  // box.dataset is not supported for SVG elements in Firefox
-    return this.animationNameCache.set(box, this.animationName(box));
-  }
-  cachedAnimationName(box) {
-    return this.animationNameCache.get(box);
-  }
-
-  // fast window.scroll callback
-  scrollHandler() {
-    this.scrolled = true;
-  }
-
-  scrollCallback() {
-    if (this.scrolled) {
-      this.scrolled = false;
-      const results = [];
-      for (let i = 0; i < this.boxes.length; i++) {
-        const box = this.boxes[i];
-        if (box) {
-          if (this.isVisible(box)) {
-            this.show(box);
-            continue;
-          }
+    WOW.prototype.start = function() {
+      var box, j, len, ref;
+      this.stopped = false;
+      this.boxes = (function() {
+        var j, len, ref, results;
+        ref = this.element.querySelectorAll("." + this.config.boxClass);
+        results = [];
+        for (j = 0, len = ref.length; j < len; j++) {
+          box = ref[j];
           results.push(box);
         }
+        return results;
+      }).call(this);
+      this.all = (function() {
+        var j, len, ref, results;
+        ref = this.boxes;
+        results = [];
+        for (j = 0, len = ref.length; j < len; j++) {
+          box = ref[j];
+          results.push(box);
+        }
+        return results;
+      }).call(this);
+      if (this.boxes.length) {
+        if (this.disabled()) {
+          this.resetStyle();
+        } else {
+          ref = this.boxes;
+          for (j = 0, len = ref.length; j < len; j++) {
+            box = ref[j];
+            this.applyStyle(box, true);
+          }
+        }
       }
-      this.boxes = results;
-      if (!this.boxes.length && !this.config.live) {
-        this.stop();
+      if (!this.disabled()) {
+        this.util().addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
+        this.util().addEvent(window, 'resize', this.scrollHandler);
+        this.interval = setInterval(this.scrollCallback, 50);
       }
-    }
-  }
+      if (this.config.live) {
+        return new MutationObserver((function(_this) {
+          return function(records) {
+            var k, len1, node, record, results;
+            results = [];
+            for (k = 0, len1 = records.length; k < len1; k++) {
+              record = records[k];
+              results.push((function() {
+                var l, len2, ref1, results1;
+                ref1 = record.addedNodes || [];
+                results1 = [];
+                for (l = 0, len2 = ref1.length; l < len2; l++) {
+                  node = ref1[l];
+                  results1.push(this.doSync(node));
+                }
+                return results1;
+              }).call(_this));
+            }
+            return results;
+          };
+        })(this)).observe(document.body, {
+          childList: true,
+          subtree: true
+        });
+      }
+    };
 
+    WOW.prototype.stop = function() {
+      this.stopped = true;
+      this.util().removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
+      this.util().removeEvent(window, 'resize', this.scrollHandler);
+      if (this.interval != null) {
+        return clearInterval(this.interval);
+      }
+    };
 
-  // Calculate element offset top
-  offsetTop(element) {
-    // SVG elements don't have an offsetTop in Firefox.
-    // This will use their nearest parent that has an offsetTop.
-    // Also, using ('offsetTop' of element) causes an exception in Firefox.
-    while (element.offsetTop === undefined) {
-      element = element.parentNode;
-    }
-    let top = element.offsetTop;
-    while (element.offsetParent) {
-      element = element.offsetParent;
-      top += element.offsetTop;
-    }
-    return top;
-  }
+    WOW.prototype.sync = function(element) {
+      if (MutationObserver.notSupported) {
+        return this.doSync(this.element);
+      }
+    };
 
-// check if box is visible
-  isVisible(box) {
-    const offset = box.getAttribute('data-wow-offset') || this.config.offset;
-    const viewTop = (
-      this.config.scrollContainer && this.config.scrollContainer.scrollTop
-    ) || window.pageYOffset;
-    const viewBottom =
-      viewTop + Math.min(this.element.clientHeight, getInnerHeight()) - offset;
-    const top = this.offsetTop(box);
-    const bottom = top + box.clientHeight;
+    WOW.prototype.doSync = function(element) {
+      var box, j, len, ref, results;
+      if (element == null) {
+        element = this.element;
+      }
+      if (element.nodeType !== 1) {
+        return;
+      }
+      element = element.parentNode || element;
+      ref = element.querySelectorAll("." + this.config.boxClass);
+      results = [];
+      for (j = 0, len = ref.length; j < len; j++) {
+        box = ref[j];
+        if (indexOf.call(this.all, box) < 0) {
+          this.boxes.push(box);
+          this.all.push(box);
+          if (this.stopped || this.disabled()) {
+            this.resetStyle();
+          } else {
+            this.applyStyle(box, true);
+          }
+          results.push(this.scrolled = true);
+        } else {
+          results.push(void 0);
+        }
+      }
+      return results;
+    };
 
-    return top <= viewBottom && bottom >= viewTop;
-  }
+    WOW.prototype.show = function(box) {
+      this.applyStyle(box);
+      box.className = box.className + " " + this.config.animateClass;
+      if (this.config.callback != null) {
+        this.config.callback(box);
+      }
+      this.util().emitEvent(box, this.wowEvent);
+      this.util().addEvent(box, 'animationend', this.resetAnimation);
+      this.util().addEvent(box, 'oanimationend', this.resetAnimation);
+      this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
+      this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation);
+      return box;
+    };
 
-  disabled() {
-    return !this.config.mobile && isMobile(navigator.userAgent);
-  }
-}
+    WOW.prototype.applyStyle = function(box, hidden) {
+      var delay, duration, iteration;
+      duration = box.getAttribute('data-wow-duration');
+      delay = box.getAttribute('data-wow-delay');
+      iteration = box.getAttribute('data-wow-iteration');
+      return this.animate((function(_this) {
+        return function() {
+          return _this.customStyle(box, hidden, duration, delay, iteration);
+        };
+      })(this));
+    };
+
+    WOW.prototype.animate = (function() {
+      if ('requestAnimationFrame' in window) {
+        return function(callback) {
+          return window.requestAnimationFrame(callback);
+        };
+      } else {
+        return function(callback) {
+          return callback();
+        };
+      }
+    })();
+
+    WOW.prototype.resetStyle = function() {
+      var box, j, len, ref, results;
+      ref = this.boxes;
+      results = [];
+      for (j = 0, len = ref.length; j < len; j++) {
+        box = ref[j];
+        results.push(box.style.visibility = 'visible');
+      }
+      return results;
+    };
+
+    WOW.prototype.resetAnimation = function(event) {
+      var target;
+      if (event.type.toLowerCase().indexOf('animationend') >= 0) {
+        target = event.target || event.srcElement;
+        return target.className = target.className.replace(this.config.animateClass, '').trim();
+      }
+    };
+
+    WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
+      if (hidden) {
+        this.cacheAnimationName(box);
+      }
+      box.style.visibility = hidden ? 'hidden' : 'visible';
+      if (duration) {
+        this.vendorSet(box.style, {
+          animationDuration: duration
+        });
+      }
+      if (delay) {
+        this.vendorSet(box.style, {
+          animationDelay: delay
+        });
+      }
+      if (iteration) {
+        this.vendorSet(box.style, {
+          animationIterationCount: iteration
+        });
+      }
+      this.vendorSet(box.style, {
+        animationName: hidden ? 'none' : this.cachedAnimationName(box)
+      });
+      return box;
+    };
+
+    WOW.prototype.vendors = ["moz", "webkit"];
+
+    WOW.prototype.vendorSet = function(elem, properties) {
+      var name, results, value, vendor;
+      results = [];
+      for (name in properties) {
+        value = properties[name];
+        elem["" + name] = value;
+        results.push((function() {
+          var j, len, ref, results1;
+          ref = this.vendors;
+          results1 = [];
+          for (j = 0, len = ref.length; j < len; j++) {
+            vendor = ref[j];
+            results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
+          }
+          return results1;
+        }).call(this));
+      }
+      return results;
+    };
+
+    WOW.prototype.vendorCSS = function(elem, property) {
+      var j, len, ref, result, style, vendor;
+      style = getComputedStyle(elem);
+      result = style.getPropertyCSSValue(property);
+      ref = this.vendors;
+      for (j = 0, len = ref.length; j < len; j++) {
+        vendor = ref[j];
+        result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
+      }
+      return result;
+    };
+
+    WOW.prototype.animationName = function(box) {
+      var animationName, error;
+      try {
+        animationName = this.vendorCSS(box, 'animation-name').cssText;
+      } catch (error) {
+        animationName = getComputedStyle(box).getPropertyValue('animation-name');
+      }
+      if (animationName === 'none') {
+        return '';
+      } else {
+        return animationName;
+      }
+    };
+
+    WOW.prototype.cacheAnimationName = function(box) {
+      return this.animationNameCache.set(box, this.animationName(box));
+    };
+
+    WOW.prototype.cachedAnimationName = function(box) {
+      return this.animationNameCache.get(box);
+    };
+
+    WOW.prototype.scrollHandler = function() {
+      return this.scrolled = true;
+    };
+
+    WOW.prototype.scrollCallback = function() {
+      var box;
+      if (this.scrolled) {
+        this.scrolled = false;
+        this.boxes = (function() {
+          var j, len, ref, results;
+          ref = this.boxes;
+          results = [];
+          for (j = 0, len = ref.length; j < len; j++) {
+            box = ref[j];
+            if (!(box)) {
+              continue;
+            }
+            if (this.isVisible(box)) {
+              this.show(box);
+              continue;
+            }
+            results.push(box);
+          }
+          return results;
+        }).call(this);
+        if (!(this.boxes.length || this.config.live)) {
+          return this.stop();
+        }
+      }
+    };
+
+    WOW.prototype.offsetTop = function(element) {
+      var top;
+      while (element.offsetTop === void 0) {
+        element = element.parentNode;
+      }
+      top = element.offsetTop;
+      while (element = element.offsetParent) {
+        top += element.offsetTop;
+      }
+      return top;
+    };
+
+    WOW.prototype.isVisible = function(box) {
+      var bottom, offset, top, viewBottom, viewTop;
+      offset = box.getAttribute('data-wow-offset') || this.config.offset;
+      viewTop = (this.config.scrollContainer && this.config.scrollContainer.scrollTop) || window.pageYOffset;
+      viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
+      top = this.offsetTop(box);
+      bottom = top + box.clientHeight;
+      return top <= viewBottom && bottom >= viewTop;
+    };
+
+    WOW.prototype.util = function() {
+      return this._util != null ? this._util : this._util = new Util();
+    };
+
+    WOW.prototype.disabled = function() {
+      return !this.config.mobile && this.util().isMobile(navigator.userAgent);
+    };
+
+    return WOW;
+
+  })();
+
+}).call(this);

Static/mdui-v1.0.1/js/ui.js

@@ -0,0 +1,18 @@
+// JavaScript Document
+function init(_el){
+	function start(_this){
+		$(_el).each(function(i){
+			$(this).css("animation-delay",`${++i * 0.2}s`);
+			let _this = $(this);
+			let windowHeight = $(window).height();
+			let windowScrollTop = $(window).scrollTop();
+			if(windowHeight + windowScrollTop > parseInt(_this.offset().top)){
+				_this.addClass(_this.data().animation);
+			}
+		})
+	}
+	$(window).on("scroll",function(){
+		start(_el)
+	})
+	start(_el)
+}

contact.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="https://lolicon.team/img/images/32.ico">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\mdui.min.css">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\ui.css">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\animate.min.css">
+    <link rel="stylesheet" href="Static\bootstrap-4.6.2-dist\css\bootstrap.min.css">
+    <style>
+
+    </style>
+    <script>
+        /* Navigation bar script, hide when scrolling down, show when scrolling up */
+        // var prevScrollpos = window.pageYOffset;
+        // window.onscroll = function() {
+        //     var currentScrollPos = window.pageYOffset;
+        //     if (prevScrollpos > currentScrollPos) {
+        //         document.getElementsByClassName("topnav")[0].style.top = "0";
+        //     } else {
+        //         document.getElementsByClassName("topnav")[0].style.top = "-50px";
+        //     }
+        //     prevScrollpos = currentScrollPos;
+        // }
+
+    </script>
+</head>
+<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
+    <div class="home-bodg"></div>
+
+    <div>
+        <!--PC toolbar-->
+        <div class="mdui-hidden-lok-down">
+            <div class="mdui-toolbar mdui-toolbarb">
+                <a href="/index.html">
+                    <div class="mdui-valign animate__animated animate__fadeInLeft">
+                        <img src="Static\Gui\img\Moe.png" width="150px">
+                    </div>
+                </a>
+                <div class="mdui-center font-ui animate__animated animate__fadeInDown">
+                    <div class="mdui-tab" mdui-tab="">
+                        <a href="./index.html" class="mdui-rippl">
+                            <label>首页/home</label>
+                        </a>
+                        <a href="./project.html" class="mdui-ripple ">
+                            <label>项目/project</label>
+                        </a>
+                        <a href="./staff.html" class="mdui-ripple ">
+                            <label>组员/Staff</label>
+                        </a>
+                        <a href="./news.html" class="mdui-ripple ">
+                            <label>情报/News</label>
+                        </a>
+                        <a href="./contact.html" class="mdui-ripple mdui-tab-active">
+                            <label>联系/contact</label>
+                        </a>
+                        <a href="./message.html" class="mdui-ripple ">
+                            <label>寄语/message</label>
+                        </a>
+                        <div class="mdui-tab-indicator"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--mobile toolbar and menu-->
+
+        <div class="mdui-hidden-xm-pe">
+            <div class="mdui-toolbar mdui-toolbarm zhe">
+                <a href="/index.html">
+                    <div class="mdui-valign animate__animated animate__fadeInLeft">
+                        <img src="Static\Gui\img\Moe.png" width="120px">
+                    </div>
+                </a>
+                <div class="mdui-toolbar-spacer"></div>
+                <div class="mdui-float-right">
+                    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
+                        mdui-drawer="{target: '#main-drawer', swipe: true}">
+                        <i class="mdui-icon material-icons">menu</i>
+                    </span>
+                </div>
+            </div>
+
+
+            <div class="mdui-drawer mdui-drawer-right font-ui" id="main-drawer">
+
+                <div class=" mdui-list">
+                    <a href="./index.html" class=" mdui-list-item mdui-ripple ">首页/Home</a>
+                    <a href="./project.html" class=" mdui-list-item mdui-ripple ">项目/Project</a>
+                    <a href="./news.html" class=" mdui-list-item mdui-ripple ">情报/News</a>
+                    <a href="./staff.html" class=" mdui-list-item mdui-ripple ">组员/Staff</a>
+                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
+                    <a href="./message.html" class=" mdui-list-item mdui-ripple ">寄语/message</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <!--pc text-->
+    <div class="mdui-hidden-xs-down zhe " style="height:100vh">
+        <div class="mdui-container">
+            <ul class="mdui-list">
+                <li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                    <a href="#">
+                        <div class="mdui-list-item-content">
+                            <a href="#">
+                            <div class="mdui-list-item-title">暂无内容</div>
+                            <div class="mdui-list-item-text mdui-list-item-one-line">
+                                <span>2023-03-13</span>
+                            </div>
+                        </a>
+                        </div>
+                    </a>
+                </li>
+
+            </ul>
+        </div>
+    </div>
+    <!--mobile text-->
+    <div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
+        <div style="width: 90%;height:100vh" class="mdui-center">
+            <div class="mdui-container">
+                <ul class="mdui-list">
+                    <li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                        <a href="#">
+                            <div class="mdui-list-item-content">
+                                <div class="mdui-list-item-title">暂无内容</div>
+                                <div class="mdui-list-item-text mdui-list-item-one-line">
+                                    <span></span>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+    
+                </ul>
+            </div>
+            <div class="mdui-typo mdui-valign" style="height:50vh">
+                <div class="mdui-center mdui-text-center">
+                    <p class="s17" style="font-size: 17px;">
+                        AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
+
+                        欢迎您的加入!<br>
+
+                        AyasakiMoe:Akatsuki World <br>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+<footer id="copyright">
+    <div class="div-height mdui-valign ">
+        <div class="mdui-typo mdui-center">
+            <div class="font-container " style="font-family:'Saira', 'Noto Sans SC'; font-weight: normal; font-style: normal;">
+                <p>2022-2023 AyasakiMoe Studio</p>
+            </div>
+        </div>
+    </div>
+</footer>
+<script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
+    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
+    <script>
+        // 初始化 WOW.js
+        new WOW().init();
+    </script>
+</body>
+</html>

index.html

@@ -17,11 +17,19 @@
 </head>
 
 <body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
+    <!-- loading start -->
+    <div id="">
+        <span></span>
+    </div>
+    <!-- loading end -->
     <div class="home-bodg"></div>
 
     <div>
         <!--PC toolbar-->
         <div class="mdui-hidden-lok-down">
+            <div class="mdui-progress">
+                <div class="mdui-progress-indeterminate"></div>
+              </div>
             <div class="mdui-toolbar mdui-toolbarb">
                 <a href="/index.html">
                     <div class="mdui-valign animate__animated animate__fadeInLeft">
@@ -45,6 +53,9 @@
                         <a href="./contact.html" class="mdui-ripple ">
                             <label>联系/contact</label>
                         </a>
+                        <a href="./message.html" class="mdui-ripple ">
+                            <label>寄语/message</label>
+                        </a>
                         <div class="mdui-tab-indicator"></div>
                     </div>
                 </div>
@@ -96,75 +107,83 @@
                 </ol>
                 <div class="carousel-inner" style="border-radius: 15px;">
                     <div class="carousel-item active">
-                        <img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d5d0a8e0.webp/all70"
-                            class="d-block w-100" alt="...">
+                        <img src="https://img-cdn-cos.lolicon.team/1/2023/03/17/1x641476241d7cc.webp/all70" class="d-block w-100" alt="...">
                         <div class="carousel-caption d-none d-md-block">
-                            <h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
-                            <p style="color: black;"><strong>人类从来没有资格评定好坏，所谓对错会随着时间所变动.</strong></p>
+                            <h5 style="color: #fff;"><strong>Akatsuki - Word</strong></h5>
+                            <p style="color: #fff;"><strong>人类从来没有资格评定好坏，所谓对错会随着时间所变动.</strong></p>
                         </div>
                     </div>
                     <div class="carousel-item">
-                        <img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d3d4501c.webp/all70"
-                            class="d-block w-100" alt="...">
+                        <img src="https://img-cdn-cos.lolicon.team/1/2023/03/17/1x641476217ac41.webp/all70" class="d-block w-100" alt="...">
                         <div class="carousel-caption d-none d-md-block">
-                            <h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
-                            <p style="color: black;"><strong>生活的意义是享受当下，活出精彩人生</strong></p>
+                            <h5 style="color: #fff;"><strong>Akatsuki - Word</strong></h5>
+                            <p style="color: #fff;"><strong>生活的意义是享受当下，活出精彩人生</strong></p>
                         </div>
                     </div>
                     <div class="carousel-item">
-                        <img src="https://img-cdn-cos.lolicon.team/1/2023/03/14/1x64107d2bd6872.webp/all70"
-                            class="d-block w-100" alt="...">
+                        <img src="https://img-cdn-cos.lolicon.team/1/2023/03/17/1x6414761e6fb95.webp/all70" class="d-block w-100" alt="...">
                         <div class="carousel-caption d-none d-md-block">
-                            <h5 style="color: black;"><strong>Akatsuki - Word</strong></h5>
-                            <p style="color: black;"><strong>我只活在当下，欣赏眼前的风景</strong></p>
+                            <h5 style="color: #fff;"><strong>Akatsuki - Word</strong></h5>
+                            <p style="color: #fff;"><strong>我只活在当下，欣赏眼前的风景</strong></p>
                         </div>
                     </div>
                 </div>
-                <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions"
-                    data-slide="prev">
+                <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                     <span class="sr-only">Previous</span>
                 </button>
-                <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions"
-                    data-slide="next">
+                <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
                     <span class="sr-only">Next</span>
                 </button>
             </div>
-              
-              
-        </div>
-
-        <div class="c-inner">
-        <div class="mdui-grid-tile animate__animated animate__fadeInLeft">
-            <a href="javascript:;"><img src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f04bc30c81d915d5737be92d51b698f0.jpg/wp70"/></a>
-            <div class="mdui-grid-tile-actions">
-              <div class="mdui-grid-tile-text">
-                <div class="mdui-grid-tile-title">No Pay</div>
-                <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>永远不会收取费用</div>
-              </div>
+            <div class="wow animate__animated animate__bounceIn slow mdui-shadow-24 mdui-ripple mdui-ripple-white">
+                <h2>冰浮岛</h2>
             </div>
-          </div>
-          <div class="mdui-grid-tile animate__animated animate__fadeInDown">
-            <a href="javascript:;"><img src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/7deacef6bf53fd727bc92cc75d7edf4e.jpg/wp70"/></a>
-            <div class="mdui-grid-tile-actions">
-              <div class="mdui-grid-tile-text">
-                <div class="mdui-grid-tile-title">Server</div>
-                <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>灌水服务器长期运行</div>
-              </div>
-            </div>
-          </div>
-          <div class="mdui-grid-tile animate__animated animate__fadeInRight">
-            <a href="javascript:;"><img src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f9ade14f4e96052c8fee02b61b3d55ba.jpg/wp70"/></a>
-            <div class="mdui-grid-tile-actions">
-              <div class="mdui-grid-tile-text">
-                <div class="mdui-grid-tile-title">Happy house</div>
-                <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>学生上班族的快乐屋</div>
-              </div>
-            </div>
-          </div>
+            <!-- 我们的特点 -->
+            <div class="wow animate__animated animate__fadeInUp c-scl" data-wow-delay="200ms">
+                <h2 class="c-secttl">Our Features</h2>
+                </div>
+                
+                <div class="c-inner">
+                    <div class="mdui-ripple mdui-grid-tile wow animate__animated animate__fadeInLeft" data-wow-delay="300ms" >
+                        <img class="mdui-img-fluid" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f04bc30c81d915d5737be92d51b698f0.jpg/wp70" />
+                        <div class="mdui-grid-tile-actions">
+                            <div class="mdui-grid-tile-text">
+                                <div class="mdui-grid-tile-title">No Pay</div>
+                                <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>永远不会收取费用
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mdui-ripple mdui-grid-tile wow animate__animated animate__fadeInDown" data-wow-delay="500ms" >
+                        <img class="mdui-img-fluid" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/7deacef6bf53fd727bc92cc75d7edf4e.jpg/wp70" />
+                        <div class="mdui-grid-tile-actions">
+                            <div class="mdui-grid-tile-text">
+                                <div class="mdui-grid-tile-title">Server</div>
+                                <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>灌水服务器长期运行
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mdui-ripple mdui-grid-tile wow animate__animated animate__fadeInRight" data-wow-delay="700ms" >
+                        <img class="mdui-img-fluid" src="https://img-cdn-cos.lolicon.team/IMG/2/2023/02/27/f9ade14f4e96052c8fee02b61b3d55ba.jpg/wp70" />
+                        <div class="mdui-grid-tile-actions">
+                            <div class="mdui-grid-tile-text">
+                                <div class="mdui-grid-tile-title">Happy house</div>
+                                <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>学生上班族的快乐屋
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div> 
+                
+                <div class="wow animate__animated animate__bounceIn slow-two mdui-shadow-24 mdui-ripple mdui-ripple-white c-scl ">
+                    <h2>冰浮岛</h2>
+                </div>
         </div>
     </div>
+
     <!--mobile text-->
     <div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
         <div style="width: 90%;height:100vh" class="mdui-center">
@@ -191,7 +210,7 @@
         </div>
     </div>
 
-
+    
 
     <footer id="copyright">
         <div class="div-height mdui-valign" style="border-radius: 15px 15px 0px 0px;">
@@ -203,13 +222,28 @@
             </div>
         </div>
     </footer>
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
-    <script src="Static\mdui-v1.0.1\js\mdui.min.js"></script>
-    <script src="Static\mdui-v1.0.1\js\WOW.js"></script>
-    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js"></script>
+    
+    <script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
+    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
     <script>
+        // 初始化 WOW.js
         new WOW().init();
     </script>
+
+    <script>
+        // 3秒后关闭loading动画
+        // $(document).ready(function () {
+        //     $('body').css({overflow: 'hidden'});
+        //     setTimeout(function () {
+        //         $('body').css({overflow: 'auto'});
+        //         $('#loading').fadeOut();
+        //     }, 3000);
+        // });
+
+</script>
 </body>
 
 </html>

message.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="https://lolicon.team/img/images/32.ico">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\mdui.min.css">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\ui.css">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\animate.min.css">
+    <link rel="stylesheet" href="Static\bootstrap-4.6.2-dist\css\bootstrap.min.css">
+    <style>
+
+    </style>
+    <script>
+        /* Navigation bar script, hide when scrolling down, show when scrolling up */
+        // var prevScrollpos = window.pageYOffset;
+        // window.onscroll = function() {
+        //     var currentScrollPos = window.pageYOffset;
+        //     if (prevScrollpos > currentScrollPos) {
+        //         document.getElementsByClassName("topnav")[0].style.top = "0";
+        //     } else {
+        //         document.getElementsByClassName("topnav")[0].style.top = "-50px";
+        //     }
+        //     prevScrollpos = currentScrollPos;
+        // }
+
+    </script>
+</head>
+<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
+    <div class="home-bodg"></div>
+
+    <!--PC toolbar-->
+    <div class="mdui-hidden-lok-down">
+        <div class="mdui-progress">
+            <div class="mdui-progress-indeterminate"></div>
+          </div>
+        <div class="mdui-toolbar mdui-toolbarb">
+            <a href="/index.html">
+                <div class="mdui-valign animate__animated animate__fadeInLeft">
+                    <img src="Static\Gui\img\Moe.png" width="150px">
+                </div>
+            </a>
+            <div class="mdui-center font-ui animate__animated animate__fadeInDown">
+                <div class="mdui-tab" mdui-tab="">
+                    <a href="./index.html" class="mdui-ripple">
+                        <label>首页/home</label>
+                    </a>
+                    <a href="./project.html" class="mdui-ripple ">
+                        <label>项目/project</label>
+                    </a>
+                    <a href="./staff.html" class="mdui-ripple ">
+                        <label>组员/Staff</label>
+                    </a>
+                    <a href="./news.html" class="mdui-ripple ">
+                        <label>情报/News</label>
+                    </a>
+                    <a href="./contact.html" class="mdui-ripple ">
+                        <label>联系/contact</label>
+                    </a>
+                    <a href="./message.html" class="mdui-ripple mdui-tab-active">
+                        <label>寄语/message</label>
+                    </a>
+                    <div class="mdui-tab-indicator"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+        <!--mobile toolbar and menu-->
+
+        <div class="mdui-hidden-xm-pe">
+            <div class="mdui-toolbar mdui-toolbarm zhe">
+                <a href="/index.html">
+                    <div class="mdui-valign animate__animated animate__fadeInLeft">
+                        <img src="Static\Gui\img\Moe.png" width="120px">
+                    </div>
+                </a>
+                <div class="mdui-toolbar-spacer"></div>
+                <div class="mdui-float-right">
+                    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
+                        mdui-drawer="{target: '#main-drawer', swipe: true}">
+                        <i class="mdui-icon material-icons">menu</i>
+                    </span>
+                </div>
+            </div>
+
+
+            <div class="mdui-drawer mdui-drawer-right font-ui" id="main-drawer">
+
+                <div class=" mdui-list">
+                    <a href="./index.html" class=" mdui-list-item mdui-ripple ">首页/Home</a>
+                    <a href="./project.html" class=" mdui-list-item mdui-ripple ">项目/Project</a>
+                    <a href="./news.html" class=" mdui-list-item mdui-ripple ">情报/News</a>
+                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
+                    <a href="./staff.html" class=" mdui-list-item mdui-ripple ">组员/Staff</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <!--pc text-->
+    <div class="mdui-hidden-xs-down zhe " style="height:100vh">
+            <div class="mdui-container">
+                <div class="wow animate__animated animate__bounceIn slow-two mdui-shadow-24 mdui-ripple mdui-ripple-white">
+                    <h2> -这里暂时还什么都没有哦-  </h2>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--mobile text-->
+    <div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
+        <div style="width: 90%;height:100vh" class="mdui-center">
+            <div class="mdui-container">
+                <ul class="mdui-list">
+                    <li class="mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                        <a href="#">
+                            <div class="mdui-list-item-content">
+                                <div class="mdui-list-item-title">这里暂时还什么都没有哦</div>
+                                <div class="mdui-list-item-text mdui-list-item-one-line">
+                                    <span></span>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+    
+                </ul>
+            </div>
+            <div class="mdui-typo mdui-valign" style="height:50vh">
+                <div class="mdui-center mdui-text-center">
+                    <p class="s17" style="font-size: 17px;">
+                        AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
+
+                        欢迎您的加入!<br>
+
+                        AyasakiMoe:Akatsuki World <br>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+<footer id="copyright">
+    <div class="div-height mdui-valign ">
+        <div class="mdui-typo mdui-center">
+            <div class="font-container " style="font-family:'Saira', 'Noto Sans SC'; font-weight: normal; font-style: normal;">
+                <p>2022-2023 AyasakiMoe Studio</p>
+            </div>
+        </div>
+    </div>
+</footer>
+<script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
+    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
+    <script>
+        // 初始化 WOW.js
+        new WOW().init();
+    </script>
+</body>
+</html>

news.html

@@ -42,7 +42,7 @@
                 </a>
                 <div class="mdui-center font-ui animate__animated animate__fadeInDown">
                     <div class="mdui-tab" mdui-tab="">
-                        <a href="./index.html" class="mdui-ripple   mdui-tab-active">
+                        <a href="./index.html" class="mdui-rippl">
                             <label>首页/home</label>
                         </a>
                         <a href="./project.html" class="mdui-ripple ">
@@ -51,12 +51,15 @@
                         <a href="./staff.html" class="mdui-ripple ">
                             <label>组员/Staff</label>
                         </a>
-                        <a href="./news.html" class="mdui-ripple ">
+                        <a href="./news.html" class="mdui-ripple mdui-tab-active">
                             <label>情报/News</label>
                         </a>
                         <a href="./contact.html" class="mdui-ripple ">
                             <label>联系/contact</label>
                         </a>
+                        <a href="./message.html" class="mdui-ripple ">
+                            <label>寄语/message</label>
+                        </a>
                         <div class="mdui-tab-indicator"></div>
                     </div>
                 </div>
@@ -87,8 +90,9 @@
                     <a href="./index.html" class=" mdui-list-item mdui-ripple ">首页/Home</a>
                     <a href="./project.html" class=" mdui-list-item mdui-ripple ">项目/Project</a>
                     <a href="./news.html" class=" mdui-list-item mdui-ripple ">情报/News</a>
-                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
                     <a href="./staff.html" class=" mdui-list-item mdui-ripple ">组员/Staff</a>
+                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
+                    <a href="./message.html" class=" mdui-list-item mdui-ripple ">寄语/message</a>
                 </div>
             </div>
         </div>
@@ -101,7 +105,7 @@
     <div class="mdui-hidden-xs-down zhe " style="height:100vh">
         <div class="mdui-container">
             <ul class="mdui-list">
-                <li class="mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                <li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
                     <a href="#">
                         <div class="mdui-list-item-content">
                             <a href="#">
@@ -122,7 +126,7 @@
         <div style="width: 90%;height:100vh" class="mdui-center">
             <div class="mdui-container">
                 <ul class="mdui-list">
-                    <li class="mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                    <li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
                         <a href="#">
                             <div class="mdui-list-item-content">
                                 <div class="mdui-list-item-title">暂无内容</div>
@@ -160,11 +164,13 @@
         </div>
     </div>
 </footer>
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
-    <script src="Static\mdui-v1.0.1\js\mdui.min.js"></script>
-    <script src="Static\mdui-v1.0.1\js\WOW.js"></script>
-    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js"></script>
+<script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
+    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
     <script>
+        // 初始化 WOW.js
         new WOW().init();
     </script>
 </body>

project.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="https://lolicon.team/img/images/32.ico">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\mdui.min.css">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\ui.css">
+    <link rel="stylesheet" href="Static\mdui-v1.0.1\css\animate.min.css">
+    <link rel="stylesheet" href="Static\bootstrap-4.6.2-dist\css\bootstrap.min.css">
+    <style>
+
+    </style>
+    <script>
+        /* Navigation bar script, hide when scrolling down, show when scrolling up */
+        // var prevScrollpos = window.pageYOffset;
+        // window.onscroll = function() {
+        //     var currentScrollPos = window.pageYOffset;
+        //     if (prevScrollpos > currentScrollPos) {
+        //         document.getElementsByClassName("topnav")[0].style.top = "0";
+        //     } else {
+        //         document.getElementsByClassName("topnav")[0].style.top = "-50px";
+        //     }
+        //     prevScrollpos = currentScrollPos;
+        // }
+
+    </script>
+</head>
+<body class="mdui-theme-primary-indigo mdui-theme-accent-blue mdui-loaded" id="p-d">
+    <div class="home-bodg"></div>
+
+    <div>
+        <!--PC toolbar-->
+        <div class="mdui-hidden-lok-down">
+            <div class="mdui-toolbar mdui-toolbarb">
+                <a href="/index.html">
+                    <div class="mdui-valign animate__animated animate__fadeInLeft">
+                        <img src="Static\Gui\img\Moe.png" width="150px">
+                    </div>
+                </a>
+                <div class="mdui-center font-ui animate__animated animate__fadeInDown">
+                    <div class="mdui-tab" mdui-tab="">
+                        <a href="./index.html" class="mdui-rippl">
+                            <label>首页/home</label>
+                        </a>
+                        <a href="./project.html" class="mdui-ripple mdui-tab-active">
+                            <label>项目/project</label>
+                        </a>
+                        <a href="./staff.html" class="mdui-ripple ">
+                            <label>组员/Staff</label>
+                        </a>
+                        <a href="./news.html" class="mdui-ripple ">
+                            <label>情报/News</label>
+                        </a>
+                        <a href="./contact.html" class="mdui-ripple ">
+                            <label>联系/contact</label>
+                        </a>
+                        <a href="./message.html" class="mdui-ripple ">
+                            <label>寄语/message</label>
+                        </a>
+                        <div class="mdui-tab-indicator"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--mobile toolbar and menu-->
+
+        <div class="mdui-hidden-xm-pe">
+            <div class="mdui-toolbar mdui-toolbarm zhe">
+                <a href="/index.html">
+                    <div class="mdui-valign animate__animated animate__fadeInLeft">
+                        <img src="Static\Gui\img\Moe.png" width="120px">
+                    </div>
+                </a>
+                <div class="mdui-toolbar-spacer"></div>
+                <div class="mdui-float-right">
+                    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
+                        mdui-drawer="{target: '#main-drawer', swipe: true}">
+                        <i class="mdui-icon material-icons">menu</i>
+                    </span>
+                </div>
+            </div>
+
+
+            <div class="mdui-drawer mdui-drawer-right font-ui" id="main-drawer">
+
+                <div class=" mdui-list">
+                    <a href="./index.html" class=" mdui-list-item mdui-ripple ">首页/Home</a>
+                    <a href="./project.html" class=" mdui-list-item mdui-ripple ">项目/Project</a>
+                    <a href="./news.html" class=" mdui-list-item mdui-ripple ">情报/News</a>
+                    <a href="./staff.html" class=" mdui-list-item mdui-ripple ">组员/Staff</a>
+                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
+                    <a href="./message.html" class=" mdui-list-item mdui-ripple ">寄语/message</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <!--pc text-->
+    <div class="mdui-hidden-xs-down zhe " style="height:100vh">
+        <div class="mdui-container">
+            <ul class="mdui-list">
+                <li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                    <a href="#">
+                        <div class="mdui-list-item-content">
+                            <a href="#">
+                            <div class="mdui-list-item-title">暂无内容</div>
+                            <div class="mdui-list-item-text mdui-list-item-one-line">
+                                <span>2023-03-13</span>
+                            </div>
+                        </a>
+                        </div>
+                    </a>
+                </li>
+
+            </ul>
+        </div>
+    </div>
+    <!--mobile text-->
+    <div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
+        <div style="width: 90%;height:100vh" class="mdui-center">
+            <div class="mdui-container">
+                <ul class="mdui-list">
+                    <li class="mdui-list-item mdui-ripple mdui-shadow-12 wow animate__animated animate__fadeInRight" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                        <a href="#">
+                            <div class="mdui-list-item-content">
+                                <div class="mdui-list-item-title">暂无内容</div>
+                                <div class="mdui-list-item-text mdui-list-item-one-line">
+                                    <span></span>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+    
+                </ul>
+            </div>
+            <div class="mdui-typo mdui-valign" style="height:50vh">
+                <div class="mdui-center mdui-text-center">
+                    <p class="s17" style="font-size: 17px;">
+                        AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
+
+                        欢迎您的加入!<br>
+
+                        AyasakiMoe:Akatsuki World <br>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+<footer id="copyright">
+    <div class="div-height mdui-valign ">
+        <div class="mdui-typo mdui-center">
+            <div class="font-container " style="font-family:'Saira', 'Noto Sans SC'; font-weight: normal; font-style: normal;">
+                <p>2022-2023 AyasakiMoe Studio</p>
+            </div>
+        </div>
+    </div>
+</footer>
+<script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
+    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
+    <script>
+        // 初始化 WOW.js
+        new WOW().init();
+    </script>
+</body>
+</html>

staff.html

@@ -42,13 +42,13 @@
                 </a>
                 <div class="mdui-center font-ui animate__animated animate__fadeInDown">
                     <div class="mdui-tab" mdui-tab="">
-                        <a href="./index.html" class="mdui-ripple   mdui-tab-active">
+                        <a href="./index.html" class="mdui-ripple">
                             <label>首页/home</label>
                         </a>
                         <a href="./project.html" class="mdui-ripple ">
                             <label>项目/project</label>
                         </a>
-                        <a href="./staff.html" class="mdui-ripple ">
+                        <a href="./staff.html" class="mdui-ripple mdui-tab-active">
                             <label>组员/Staff</label>
                         </a>
                         <a href="./news.html" class="mdui-ripple ">
@@ -57,6 +57,9 @@
                         <a href="./contact.html" class="mdui-ripple ">
                             <label>联系/contact</label>
                         </a>
+                        <a href="./message.html" class="mdui-ripple ">
+                            <label>寄语/message</label>
+                        </a>
                         <div class="mdui-tab-indicator"></div>
                     </div>
                 </div>
@@ -87,8 +90,9 @@
                     <a href="./index.html" class=" mdui-list-item mdui-ripple ">首页/Home</a>
                     <a href="./project.html" class=" mdui-list-item mdui-ripple ">项目/Project</a>
                     <a href="./news.html" class=" mdui-list-item mdui-ripple ">情报/News</a>
-                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
                     <a href="./staff.html" class=" mdui-list-item mdui-ripple ">组员/Staff</a>
+                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
+                    <a href="./message.html" class=" mdui-list-item mdui-ripple ">寄语/message</a>
                 </div>
             </div>
         </div>
@@ -101,30 +105,30 @@
     <div class="mdui-hidden-xs-down zhe " style="height:100vh">
         <div class="mdui-container">
             <ul class="mdui-list">
-                <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://avatars.githubusercontent.com/u/125862745?v=4"/>
-                    <span class="mdui-chip-title">Akatsuki-Misaki</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100"/>
-                    <span class="mdui-chip-title">Cheng</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2327680068&s=100"/>
-                    <span class="mdui-chip-title">yuanzhi</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3052013768&s=100"/>
-                    <span class="mdui-chip-title">CcranesQ</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2274889340&s=100"/>
-                    <span class="mdui-chip-title">xing_cheng</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=1345708097&s=100"/>
-                    <span class="mdui-chip-title">yun_luo</span>
-                  </div>
+                <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="200ms">
+                  <img class="mdui-chip-icon" src="https://avatars.githubusercontent.com/u/125862745?v=4"/>
+                  <span class="mdui-chip-title">Akatsuki-Misaki</span>
+                </div>
+                <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="300ms">
+                  <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100"/>
+                  <span class="mdui-chip-title">Cheng</span>
+                </div>
+                <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="400ms">
+                  <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2327680068&s=100"/>
+                  <span class="mdui-chip-title">yuanzhi</span>
+                </div>
+                <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="500ms">
+                  <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3052013768&s=100"/>
+                  <span class="mdui-chip-title">CcranesQ</span>
+                </div>
+                <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="600ms">
+                  <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2274889340&s=100"/>
+                  <span class="mdui-chip-title">xing_cheng</span>
+                </div>
+                <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="700ms">
+                  <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=1345708097&s=100"/>
+                  <span class="mdui-chip-title">yun_luo</span>
+                </div>
             </ul>
         </div>
     </div>
@@ -132,25 +136,36 @@
     <div class="mdui-hidden-sm-up zhe " style="height:100%;width: 100%;">
         <div style="width: 90%;height:100vh" class="mdui-center">
             <div class="mdui-container">
-                <ul class="mdui-list">
-                    <li class="mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden">
-                        <a href="#">
-                            <div class="mdui-list-item-content">
-                                <div class="mdui-list-item-title">暂无内容</div>
-                                <div class="mdui-list-item-text mdui-list-item-one-line">
-                                    <span></span>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-    
-                </ul>
+                <div style="margin-left:-(width/2)">
+                    <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="200ms">
+                        <img class="mdui-chip-icon" src="https://avatars.githubusercontent.com/u/125862745?v=4"/>
+                        <span class="mdui-chip-title">Akatsuki-Misaki</span>
+                      </div>
+                      <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="300ms">
+                        <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100"/>
+                        <span class="mdui-chip-title">Cheng</span>
+                      </div>
+                      <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="400ms">
+                        <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2327680068&s=100"/>
+                        <span class="mdui-chip-title">yuanzhi</span>
+                      </div>
+                      <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="500ms">
+                        <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3052013768&s=100"/>
+                        <span class="mdui-chip-title">CcranesQ</span>
+                      </div>
+                      <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="600ms">
+                        <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2274889340&s=100"/>
+                        <span class="mdui-chip-title">xing_cheng</span>
+                      </div>
+                      <div class="mdui-chip wow animate__animated animate__fadeInRight " data-wow-delay="700ms">
+                        <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=1345708097&s=100"/>
+                        <span class="mdui-chip-title">yun_luo</span>
+                      </div>
+                </div>
             </div>
             <div class="mdui-typo mdui-valign" style="height:50vh">
                 <div class="mdui-center mdui-text-center">
                     <p class="s17" style="font-size: 17px;">
-                        AyasakiMoe Studio是AyasakiMoe社区管理组旗下的开发组织。<br>
-
                         欢迎您的加入!<br>
 
                         AyasakiMoe:Akatsuki World <br>
@@ -171,11 +186,13 @@
         </div>
     </div>
 </footer>
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
-    <script src="Static\mdui-v1.0.1\js\mdui.min.js"></script>
-    <script src="Static\mdui-v1.0.1\js\WOW.js"></script>
-    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js"></script>
+<script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
+    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
     <script>
+        // 初始化 WOW.js
         new WOW().init();
     </script>
 </body>

ui.html

@@ -14,17 +14,17 @@
 
     </style>
     <script>
-        // Home navigation bar scrolling hidden
-        window.onscroll = function () {
-            var t = document.documentElement.scrollTop || document.body.scrollTop;
-            if (t > 0) {
-                document.getElementById("p-d").style.paddingTop = "0px";
-                document.getElementById("p-d").style.paddingBottom = "0px";
-            } else {
-                document.getElementById("p-d").style.paddingTop = "64px";
-                document.getElementById("p-d").style.paddingBottom = "64px";
-            }
-        }
+        /* Navigation bar script, hide when scrolling down, show when scrolling up */
+        // var prevScrollpos = window.pageYOffset;
+        // window.onscroll = function() {
+        //     var currentScrollPos = window.pageYOffset;
+        //     if (prevScrollpos > currentScrollPos) {
+        //         document.getElementsByClassName("topnav")[0].style.top = "0";
+        //     } else {
+        //         document.getElementsByClassName("topnav")[0].style.top = "-50px";
+        //     }
+        //     prevScrollpos = currentScrollPos;
+        // }
 
     </script>
 </head>
@@ -57,6 +57,9 @@
                         <a href="./contact.html" class="mdui-ripple ">
                             <label>联系/contact</label>
                         </a>
+                        <a href="./message.html" class="mdui-ripple ">
+                            <label>寄语/message</label>
+                        </a>
                         <div class="mdui-tab-indicator"></div>
                     </div>
                 </div>
@@ -87,8 +90,9 @@
                     <a href="./index.html" class=" mdui-list-item mdui-ripple ">首页/Home</a>
                     <a href="./project.html" class=" mdui-list-item mdui-ripple ">项目/Project</a>
                     <a href="./news.html" class=" mdui-list-item mdui-ripple ">情报/News</a>
-                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
                     <a href="./staff.html" class=" mdui-list-item mdui-ripple ">组员/Staff</a>
+                    <a href="./contact.html" class=" mdui-list-item mdui-ripple ">联系/Contact</a>
+                    <a href="./message.html" class=" mdui-list-item mdui-ripple ">寄语/message</a>
                 </div>
             </div>
         </div>
@@ -101,26 +105,19 @@
     <div class="mdui-hidden-xs-down zhe " style="height:100vh">
         <div class="mdui-container">
             <ul class="mdui-list">
-                <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://avatars.githubusercontent.com/u/125862745?v=4"/>
-                    <span class="mdui-chip-title">Akatsuki-Misaki</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100"/>
-                    <span class="mdui-chip-title">Cheng</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=2327680068&s=100"/>
-                    <span class="mdui-chip-title">yuanzhi</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3052013768&s=100"/>
-                    <span class="mdui-chip-title">CcranesQ</span>
-                  </div>
-                  <div class="mdui-chip">
-                    <img class="mdui-chip-icon" src="https://q1.qlogo.cn/g?b=qq&nk=3280751036&s=100"/>
-                    <span class="mdui-chip-title">Cheng</span>
-                  </div>
+                <li class="mdui-list-item mdui-ripple mdui-shadow-12" style="backdrop-filter: blur(8px);overflow-x:hidden">
+                    <a href="#">
+                        <div class="mdui-list-item-content">
+                            <a href="#">
+                            <div class="mdui-list-item-title">暂无内容</div>
+                            <div class="mdui-list-item-text mdui-list-item-one-line">
+                                <span>2023-03-13</span>
+                            </div>
+                        </a>
+                        </div>
+                    </a>
+                </li>
+
             </ul>
         </div>
     </div>
@@ -167,11 +164,13 @@
         </div>
     </div>
 </footer>
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
-    <script src="Static\mdui-v1.0.1\js\mdui.min.js"></script>
-    <script src="Static\mdui-v1.0.1\js\WOW.js"></script>
-    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js"></script>
+<script src="https://npm.akass.cn/jquery@3.6.4/dist/jquery.min.js"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\mdui.min.js" type="text/javascript"></script>
+    <script src="Static\mdui-v1.0.1\js\wow.min.js" type="text/javascript"></script>
+    <script src="Static\bootstrap-4.6.2-dist\js\bootstrap.min.js" type="text/javascript"></script>
     <script>
+        // 初始化 WOW.js
         new WOW().init();
     </script>
 </body>