<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; object-src 'none'; base-uri 'none'; frame-src 'none'" />
  <title>CIDE Starting</title>
  <link rel="stylesheet" href="css/splash.css" />
</head>

<body>
  <main class="splash-shell" aria-label="CIDE Splash Screen">
    <div class="ambient ambient-cyan" aria-hidden="true"></div>
    <div class="ambient ambient-violet" aria-hidden="true"></div>
    <div class="code-grid" aria-hidden="true"></div>

    <section class="brand-stage">
      <div class="logo-aura" aria-hidden="true"></div>
      <img class="brand-logo" src="assets/branding/wangpeng-cangjie-icon-512.png"
        alt="CIDE Logo" draggable="false" />

      <div class="product-identity">
        <div class="product-copy">
          <span class="edition-kicker">CANGJIE DEVELOPMENT ENVIRONMENT</span>
          <h1>CIDE</h1>
          <p class="identity-cn">Cangjie Integrated Development Environment</p>
        </div>
        <span class="edition-badge">1.0</span>

        <div class="code-signature" aria-hidden="true">
          <span class="code-keyword">func</span>
          <span class="code-name"> create</span><span>() {</span>
          <span class="code-caret"></span>
          <span>}</span>
        </div>
      </div>
    </section>

    <footer class="startup-footer">
      <div class="startup-status-row">
        <div class="startup-status">
          <span class="status-pulse" aria-hidden="true"></span>
          <span id="startup-status-text">正在启动核心服务</span>
        </div>
        <span id="startup-progress-text">12%</span>
      </div>
      <div class="progress-track" aria-hidden="true">
        <div id="startup-progress" class="progress-value"></div>
        <div class="progress-glint"></div>
      </div>
      <div class="startup-stages" aria-hidden="true">
        <span data-stage="core" class="is-active">核心</span>
        <span data-stage="workspace">工作区</span>
        <span data-stage="editor">编辑器</span>
      </div>
    </footer>
  </main>

  <script src="js/splash.js"></script>
</body>

</html>