<!doctype html>
<html lang="zh-Hant-TW">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#12382d">
    <meta name="robots" content="index, follow">
    <meta name="description" content="A7 溫莎堡住戶驗證系統。提供 A7 溫莎堡社群與管理群住戶身分核對、入群驗證碼取得及新住戶資料補件審核服務。">
    <title>A7 溫莎堡住戶驗證｜A7 溫莎堡管理群・LINE 社群入群驗證</title>
    <link rel="canonical" href="https://windsor-verify.skiseiju.com/">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://windsor-verify.skiseiju.com/">
    <meta property="og:site_name" content="A7 溫莎堡住戶社群">
    <meta property="og:title" content="A7 溫莎堡住戶驗證｜A7 溫莎堡管理群・LINE 社群入群驗證">
    <meta property="og:description" content="A7 溫莎堡住戶驗證系統。提供 A7 溫莎堡社群與管理群住戶身分核對、入群驗證碼取得及新住戶資料補件審核服務。">
    <meta property="og:locale" content="zh_TW">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="A7 溫莎堡住戶驗證｜A7 溫莎堡管理群・LINE 社群入群驗證">
    <meta name="twitter:description" content="A7 溫莎堡住戶驗證系統。提供 A7 溫莎堡社群與管理群住戶身分核對、入群驗證碼取得及新住戶資料補件審核服務。">
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "WebSite",
          "@id": "https://windsor-verify.skiseiju.com/#website",
          "url": "https://windsor-verify.skiseiju.com/",
          "name": "A7 溫莎堡住戶驗證",
          "alternateName": [
            "A7 溫莎堡住戶社群",
            "A7 溫莎堡管理群",
            "A7 溫莎堡社群"
          ],
          "description": "A7 溫莎堡住戶驗證系統。提供 A7 溫莎堡社群與管理群住戶身分核對、入群驗證碼取得及新住戶審核服務。",
          "inLanguage": "zh-Hant-TW"
        },
        {
          "@type": "WebPage",
          "@id": "https://windsor-verify.skiseiju.com/#webpage",
          "url": "https://windsor-verify.skiseiju.com/",
          "name": "A7 溫莎堡住戶驗證｜A7 溫莎堡管理群・LINE 社群入群驗證",
          "isPartOf": {
            "@id": "https://windsor-verify.skiseiju.com/#website"
          },
          "description": "A7 溫莎堡住戶驗證系統。提供 A7 溫莎堡社群與管理群住戶身分核對、入群驗證碼取得及新住戶資料補件審核服務。",
          "inLanguage": "zh-Hant-TW"
        }
      ]
    }
    </script>
    <link rel="stylesheet" href="/styles.css">
    <script src="/app.js" defer></script>
  </head>
  <body>
    <div class="page-shell">
      <header class="brand" aria-label="A7 溫莎堡">
        <div class="brand-mark" aria-hidden="true">
          <span></span><span></span><span></span>
        </div>
        <div>
          <p class="brand-name">A7 WINDSOR</p>
          <p class="brand-place">溫莎堡住戶社群</p>
        </div>
      </header>

      <main>
        <section class="intro">
          <p class="eyebrow">LINE 社群入群申請</p>
          <h1>住戶驗證，<br><em>一分鐘完成。</em></h1>
          <p class="intro-copy">舊住戶可直接取得驗證碼。若找不到紀錄，可補上合約截圖交由管理員確認。</p>
        </section>

        <section class="verification-card" aria-labelledby="form-title">
          <div class="mode-switch" role="tablist" aria-label="住戶類型">
            <button class="mode-button active" id="existing-mode" type="button" role="tab" aria-selected="true">已有登記</button>
            <button class="mode-button" id="new-mode" type="button" role="tab" aria-selected="false">全新住戶</button>
          </div>

          <div class="progress" aria-label="申請步驟">
            <div class="progress-item active" id="step-one">
              <span>1</span>
              <p id="step-one-label">核對住戶</p>
            </div>
            <div class="progress-line"></div>
            <div class="progress-item" id="step-two">
              <span>2</span>
              <p id="step-two-label">取得驗證碼</p>
            </div>
          </div>

          <div id="lookup-view" class="view active-view">
            <div class="section-heading">
              <p class="section-index">住戶資料</p>
              <h2 id="form-title">輸入你的入群資訊</h2>
              <p id="form-description">若忘記驗證碼可在此再次查詢。輸入登記的 LINE ID 與戶別，即可找回目前有效的同一組驗證碼。</p>
              <div class="help-trigger-group">
                <button type="button" class="help-trigger-btn" id="line-id-help-btn" aria-haspopup="dialog" aria-controls="line-id-help-modal">
                  <svg viewBox="0 0 24 24" class="help-icon" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                  <span>如何查自己的 LINE ID？</span>
                </button>
                <button type="button" class="help-trigger-btn" id="forgot-code-btn" aria-haspopup="dialog" aria-controls="forgot-code-modal">
                  <svg viewBox="0 0 24 24" class="help-icon" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                  <span>忘了驗證碼怎麼辦？</span>
                </button>
              </div>
            </div>

            <form id="lookup-form" novalidate>
              <label for="line-id" id="line-id-label">當初入群登記的 LINE ID</label>
              <input id="line-id" name="lineId" type="text" maxlength="64" autocomplete="off" autocapitalize="none" placeholder="請輸入 LINE ID" required>
              <p class="field-help" id="line-id-help">請填寫專屬 LINE ID（<strong>非</strong> LINE 顯示暱稱）。<button type="button" class="inline-help-link" id="line-id-inline-btn">如何查詢？</button></p>

              <div id="family-fields">
                <label for="family-id" id="family-id-label">另一位已登記的 LINE ID <span class="optional-label">選填</span></label>
                <input id="family-id" name="familyId" type="text" maxlength="64" autocomplete="off" autocapitalize="none" placeholder="若原始名單有兩位請輸入">
                <p class="field-help" id="family-help">原始名單有兩個 ID 時，兩個 ID 與戶別都要填對，可交換順序；原始名單只有一個 ID 時才留白。原始申請若沒有登記家人 ID，之後要新增家人只能聯絡管理員人工處理，不能在此新增。</p>
              </div>

              <label for="unit">已購戶別／樓層</label>
              <input id="unit" name="unit" type="text" maxlength="32" autocomplete="off" autocapitalize="characters" placeholder="例如 A11-15F" required>
              <p class="field-help">固定格式：Axx-xxF，比方說 A01-25F。</p>

              <div id="new-resident-fields" hidden>
                <label for="notification-email">審核通知 Email</label>
                <input id="notification-email" name="email" type="email" maxlength="254" autocomplete="email" inputmode="email" placeholder="審核通過後寄信通知">

                <label for="contract-file">合約書或住戶證明照片</label>
                <label class="drop-zone" id="drop-zone" for="contract-file">
                  <input id="contract-file" type="file" accept="image/jpeg,image/png,image/webp">
                  <span class="upload-icon" aria-hidden="true">＋</span>
                  <strong id="file-title">拖曳照片到這裡，或點選照片</strong>
                  <small id="file-note">JPG、PNG 或 WebP，單檔 5 MB 以內</small>
                  <img id="file-preview" alt="住戶證明照片預覽" hidden>
                </label>

                <aside class="privacy-note">
                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 5 6v5c0 4.8 2.9 8.2 7 10 4.1-1.8 7-5.2 7-10V6l-7-3Z"/><path d="m9 12 2 2 4-4"/></svg>
                  <p><strong>照片不會公開。</strong><br>檔案只存進管理員的私人 Google Drive，試算表只留下管理員可開啟的網址。</p>
                </aside>
              </div>

              <button class="primary-button" id="lookup-button" type="submit">
                <span>取得或找回驗證碼</span>
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M13 6l6 6-6 6"/></svg>
              </button>
              <p class="form-status" id="lookup-status" role="status" aria-live="polite"></p>
            </form>
          </div>

          <div id="success-view" class="view result-view" hidden>
            <div class="success-seal" aria-hidden="true">✓</div>
            <p class="section-index">驗證成功</p>
            <h2>您的入群驗證碼</h2>
            <button class="code-ticket" id="code-ticket" type="button" aria-label="複製驗證碼">
              <span class="code-value" id="code-value"></span>
              <span class="copy-label" id="copy-label">點一下複製</span>
            </button>
            <p class="result-copy">申請加入 LINE 社群時，請把這組驗證碼填入入群問題。</p>
            <a class="line-community-button" id="line-community-link" href="#" target="_blank" rel="noopener noreferrer" hidden>
              <span class="line-symbol" aria-hidden="true">LINE</span>
              <span><strong>加入 A7溫莎堡社區討論群</strong><small>開啟 LINE 社群邀請連結</small></span>
              <span class="line-arrow" aria-hidden="true">›</span>
            </a>
            <button class="secondary-button" id="family-button" type="button">返回驗證首頁</button>
          </div>

          <div id="pending-view" class="view result-view" hidden>
            <div class="pending-seal" aria-hidden="true">
              <span></span><span></span><span></span>
            </div>
            <p class="section-index warm">等待人工確認</p>
            <h2>補件資料已建立</h2>
            <p class="receipt-label">申請編號</p>
            <p class="receipt" id="receipt"></p>
            <p class="result-copy" id="pending-copy">管理員審核通過後會寄 Email 通知。收到信後，請依登記的 LINE ID 與同一戶別再次驗證。</p>
            <button class="secondary-button" id="new-application-button" type="button">返回驗證首頁</button>
          </div>
        </section>

        <p class="footer-note">本頁只供 A7 溫莎堡住戶社群驗證使用</p>
      </main>

      <dialog id="line-id-help-modal" class="modal-dialog" aria-labelledby="line-id-help-title">
        <div class="modal-card">
          <div class="modal-header">
            <div class="modal-header-text">
              <p class="section-index">填寫教學</p>
              <h2 id="line-id-help-title" class="modal-title">如何查詢自己的 LINE ID？</h2>
            </div>
            <button type="button" class="modal-close-btn" id="line-id-help-close-btn" aria-label="關閉說明視窗">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
          </div>
          <div class="modal-body">
            <aside class="privacy-note line-id-warning">
              <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
              <p><strong>特別注意：LINE 暱稱（顯示名稱）≠ LINE ID</strong><br>請勿填寫聊天室顯示的個人暱稱，必須填寫系統設定中的專屬英數字「ID」。</p>
            </aside>
            <ol class="modal-instructions">
              <li>
                <strong>開啟 LINE「主頁」</strong>
                <p>打開手機 LINE App，點擊左下角「主頁」標籤。</p>
              </li>
              <li>
                <strong>進入「設定」</strong>
                <p>點擊右上角「設定」齒輪圖示（⚙️）。</p>
              </li>
              <li>
                <strong>點選「個人檔案」</strong>
                <p>點選設定選單最上方的「個人檔案」項目。</p>
              </li>
              <li>
                <strong>查看或設定「ID」</strong>
                <p>找到「ID」欄位：<br>
                ・已設定：直接複製或輸入該 ID。<br>
                ・顯示「尚未設定」：請先點進去自行設定一組專屬 ID，並開啟「允許利用 ID 加入好友」。</p>
              </li>
            </ol>
          </div>
          <div class="modal-footer">
            <button type="button" class="primary-button modal-ack-btn" id="line-id-help-ack-btn">
              <span>我知道了</span>
            </button>
          </div>
        </div>
      </dialog>

      <dialog id="forgot-code-modal" class="modal-dialog" aria-labelledby="forgot-code-title">
        <div class="modal-card">
          <div class="modal-header">
            <div class="modal-header-text">
              <p class="section-index">常見問題</p>
              <h2 id="forgot-code-title" class="modal-title">忘了驗證碼怎麼辦？</h2>
            </div>
            <button type="button" class="modal-close-btn" id="forgot-code-close-btn" aria-label="關閉說明視窗">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
          </div>
          <div class="modal-body">
            <ol class="modal-instructions">
              <li>
                <strong>申請時填兩個 LINE ID</strong>
                <p>找回時要填戶別及兩個正確的 LINE ID，兩個 ID 對調沒關係。</p>
              </li>
              <li>
                <strong>申請時只填一個 LINE ID</strong>
                <p>找回時填戶別與原本那個 LINE ID，另一欄留白。</p>
              </li>
              <li>
                <strong>當初沒填家人 ID</strong>
                <p>當初沒填家人 ID，不能靠找回功能補上，需請管理員人工處理。</p>
              </li>
              <li>
                <strong>驗證碼不會變更</strong>
                <p>找回只會顯示原本驗證碼，不會產生新碼或蓋掉舊碼。</p>
              </li>
            </ol>
          </div>
          <div class="modal-footer">
            <button type="button" class="primary-button modal-ack-btn" id="forgot-code-ack-btn">
              <span>我知道了</span>
            </button>
          </div>
        </div>
      </dialog>
    </div>
  
</body>
</html>
