查看“微件:CodeLoadingUI/SCF”的源代码

<!-- CSS 样式 -->
<style>
  /* 全屏覆盖层 */
  #loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000; /* 确保加载界面在最上层 */
    color: #fff;
    font-family: monospace;
  }

  /* 加载动画 */
  .loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* 进度条 */
  #progressBar {
    width: 200px;
    height: 10px;
    background: #444;
    margin-top: 20px;
    border-radius: 5px;
    overflow: hidden;
  }

  #progressBar div {
    height: 100%;
    width: 0;
    background: #3498db;
    transition: width 0.5s ease;
  }

  /* 模拟代码样式 */
  #codeDisplay {
    margin-top: 20px;
    background: #222;
    padding: 10px;
    border-radius: 5px;
    width: 80%;
    max-width: 600px;
    overflow: auto;
    white-space: pre-wrap;
  }

  /* 背景图片样式 */
  .Cbackground {
    position: fixed;
    background-size: cover !important;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 背景图片在底层 */
    background-position: center !important;
    display: none; /* 初始状态下隐藏背景图片 */
  }

  #mw-content-container { background: rgba(255, 255, 255, 0.6); }
  #mw-content, .sidebar-chunk {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px);
  }
</style>

<!-- HTML 结构 -->
<div id="loadingOverlay">
  <div class="loader"></div>
  <div id="progressBar">
    <div></div>
  </div>
  <div id="codeDisplay">
    Loading system...

    dir /s /b shukyo_city_festival
    File Not Found

    dir /s /b *shukyo_city_festival
    Finding…

    ┗ admin:File Not Found
    ┗ adult:File Not Found
    ┗ alternative:File Not Found
    ┗ credit:File Not Found
    ┗ declassified:File Not Found
    ┗ fragment:File Not Found
    ┗ system:File Not Found
    ┗ thous:【合作】宗教都市祭 ~ Shukyo City Festival

    >/thous:【合作】宗教都市祭 ~ Shukyo City Festival
  </div>
</div>

<!-- 背景图片容器 -->
<div class="Cbackground" id="Cbackground" data-file="{{filepath:宗教都市祭封面1 V2.PNG}}"></div>

<!-- JavaScript 逻辑 -->
<script>
  // 确保DOM加载完成后再执行脚本
  document.addEventListener('DOMContentLoaded', function () {
    var progress = 0;
    var progressBar = document.getElementById('progressBar').querySelector('div');
    var interval = setInterval(function () {
      progress += 10;
      progressBar.style.width = progress + '%';
      if (progress >= 100) {
        clearInterval(interval);
        document.getElementById('loadingOverlay').style.display = 'none'; // 隐藏加载界面

        // 加载背景图片
        var Cbackground = document.getElementById("Cbackground");
        var file = Cbackground.getAttribute("data-file");
        Cbackground.style.background = 'url(' + file + ')';
        Cbackground.style.display = 'block'; // 显示背景图片

        var wrapper = document.getElementById("mw-wrapper");
        if (wrapper) {
          wrapper.appendChild(Cbackground);
        }
      }
    }, 300);
  });
</script>