<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Podflow</title>
  <link rel="stylesheet" href="/templates/css/index.css" />
  <link rel="stylesheet" href="/templates/css/config.css" />
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <nav id="menu">
    <h3>菜单栏</h3>
    <ul>
      <li data-page="pageMessage">Podflow 运行情况</li>
      <li data-page="pageChannel">获取媒体频道 ID</li>
      <li data-page="pageConfig">修改配置</li>
    </ul>
  </nav>
  <button id="toggleMenu">❮</button>
  <main id="main">
    <section id="pageChannel" style="display: none;">
      <h2>获取媒体频道 ID</h2>
      <form id="inputForm" method="post" action="getid">
        <label for="inputOutput">请输入：</label><br>
        <textarea class="common-area" name="inputOutput" id="inputOutput"></textarea><br>
        <div class="button-container">
          <button type="button" id="pasteBtn">📋 粘贴</button>
          <button type="submit">✅ 提交</button>
          <button type="button" id="copyBtn">📄 拷贝</button>
          <button type="button" id="clearBtn">🗑️ 清空</button>
        </div>
        <p class="hint">📌 如果粘贴按钮无效，请长按输入框手动粘贴。</p>
      </form>
    </section>

    <section id="pageMessage">
      <h2>Podflow 运行情况</h2>
      <form>
        <label>主进度条：</label><br>
        <div class="pb-bar" id="mainProgressBar">
          <div class="pb-progress pb-animated" id="mainProgress"></div>
          <div class="pb-status-text" id="progressStatus">准备中</div>
          <div class="pb-percentage-text" id="progressPercentage">0.00%</div>
        </div>
        <label id="downloadLabel"></label><br>
        <div class="common-area" id="messageDownload"></div>
        <label>构建服务：</label><br>
        <div class="common-area" id="messageArea"></div>
        <label>收发服务：</label><br>
        <div class="common-area" id="messageHttp"></div>
      </form>
    </section>

    <section id="pageConfig" style="display: none;">
      <h2>修改配置</h2>
      <div id="configContainer">
        <p>正在加载配置...</p>
      </div>
      <div class="button-container">
        <button type="button" id="refreshConfigBtn">🔄 刷新配置</button>
        <button type="button" id="saveConfigBtn">💾 保存配置</button>
      </div>
      <div id="configStatus" style="margin-top: 10px; color: green;"></div>
    </section>

  </main>
  <script src="/templates/js/index.js"></script>
  <script src="/templates/js/qrcode.min.js"></script>
  <script src="/templates/js/config.js"></script>
</body>
</html>