ziwei-code/index.html at main · eledgetw/ziwei-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!doctype html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>紫微斗數甲級星排盤</title>
    <!-- 引入外部套件 -->
    <script src="https://unpkg.com/lunar-javascript/lunar.js"></script>
    <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <!-- 引入獨立的樣式表 (皮膚) -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- 自訂訊息彈窗 -->
    <div id="custom-modal" class="modal-overlay">
      <div class="modal-box" style="width: 340px; text-align: center; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);">
        <p id="modal-message" style="font-size: 17px; color: #334155; margin-bottom: 25px; line-height: 1.6; font-weight: 500;"></p>
        <button onclick="closeModal()" style="padding: 10px 30px; font-size: 16px; cursor: pointer; background-color: #2980b9; color: white; border: none; border-radius: 8px; font-weight: bold;">確定</button>
      </div>
    </div>

    <!-- 命盤列表編輯彈窗 -->
    <div id="preset-modal" class="modal-overlay">
      <div class="modal-box" style="width: 640px; max-height: 90vh; display: flex; flex-direction: column; text-align: left; padding: 20px 25px;">
        <p style="font-weight: bold; font-size: 20px; color: #1e40af; margin: 0 0 15px 0; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; flex-shrink: 0; text-align: center;">編輯命盤列表</p>

        <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; padding: 12px; background: #f1f5f9; border-radius: 8px; flex-shrink: 0;">
          <div style="font-weight: bold; color: #334155; font-size: 15px">資料備份與還原 (支援 CSV 與 Excel XLSX 格式)</div>
          <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
            <button onclick="exportPresetsCSV()" style="padding: 6px 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px;">匯出 CSV</button>
            <button onclick="exportPresetsXLSX()" style="padding: 6px 12px; background: #10b981; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px;">匯出 XLSX</button>
            <span style="color: #cbd5e1">|</span>
            <label class="file-upload-label" style="background: #f59e0b">上傳匯入<input type="file" id="import-file" accept=".csv, .xlsx" style="display: none" onchange="importFromFile(event)"/></label>
          </div>
          <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 10px; border-top: 1px dashed #cbd5e1; padding-top: 10px;">
            <div style="font-size: 14px; font-weight: bold; color: #334155">從 Excel / 試算表直接複製貼上：</div>
            <textarea id="paste-input" rows="4" placeholder="請在此貼上從試算表複製的資料 (請務必包含「分類、名字、年...」等標題列)" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #cbd5e1; font-size: 13px; box-sizing: border-box; resize: vertical;"></textarea>
            <button onclick="importFromPaste()" style="padding: 8px; background: #8b5cf6; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px;">解析並匯入貼上內容</button>
          </div>
          <div style="font-size: 12px; color: #ef4444; margin-top: 5px; font-weight: bold;">* 匯入檔案會覆蓋目前所有命例，請確認格式正確。</div>
        </div>

        <div id="preset-modal-content" style="overflow-y: auto; flex-grow: 1; padding-right: 5px"></div>

        <div style="display: flex; gap: 10px; justify-content: center; margin-top: 15px; border-top: 1px solid #e2e8f0; padding-top: 15px; flex-shrink: 0; flex-wrap: wrap;">
          <button onclick="addPresetRow()" style="padding: 10px 15px; font-size: 16px; cursor: pointer; background-color: #10b981; color: white; border: none; border-radius: 8px; font-weight: bold;">+ 新增命盤</button>
          <button onclick="deleteAllPresets()" style="padding: 10px 15px; font-size: 16px; cursor: pointer; background-color: #ef4444; color: white; border: none; border-radius: 8px; font-weight: bold;">刪除全部</button>
          <button onclick="savePresets()" style="padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #2980b9; color: white; border: none; border-radius: 8px; font-weight: bold;">儲存設定</button>
          <button onclick="closePresetModal()" style="padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #94a3b8; color: white; border: none; border-radius: 8px; font-weight: bold;">取消</button>
        </div>
      </div>
    </div>

    <!-- 懸浮按鈕 -->
    <button id="toggle-nature-btn" class="floating-btn" onclick="toggleStarNature()" style="bottom: 105px">星性</button>
    <button id="toggle-brightness-btn" class="floating-btn" onclick="toggleBrightness()">廟旺</button>

    <!-- 星性對照表彈窗 -->
    <div id="star-nature-modal" style="display: none;">
      <div style="font-weight: bold; color: #1e40af; margin-bottom: 10px; text-align: center; font-size: 16px; letter-spacing: 1px;">十四主星五行與星性</div>
      <table class="sn-table">
        <thead>
          <tr><th>星曜</th><th>五行</th><th>陰陽</th><th>性質</th><th>代表</th></tr>
        </thead>
        <tbody>
          <tr><td>紫微</td><td>己土</td><td>陰</td><td>尊星</td><td>高貴</td></tr>
          <tr><td>天機</td><td>乙木</td><td>陰</td><td>益算星</td><td>變動</td></tr>
          <tr><td>太陽</td><td>丙火</td><td>陽</td><td>官祿主</td><td>博愛</td></tr>
          <tr><td>武曲</td><td>辛金</td><td>陰</td><td>將/財星</td><td>剛毅</td></tr>
          <tr><td>天同</td><td>壬水</td><td>陽</td><td>福星</td><td>隨和</td></tr>
          <tr><td>廉貞</td><td>丁火</td><td>陰</td><td>囚/次桃花</td><td>多情</td></tr>
          <tr><td>天府</td><td>戊土</td><td>陽</td><td>財庫星</td><td>包容</td></tr>
          <tr><td>太陰</td><td>癸水</td><td>陰</td><td>財/田宅</td><td>陰柔</td></tr>
          <tr><td>貪狼</td><td>甲木/癸水</td><td>陽</td><td>桃花星</td><td>多慾</td></tr>
          <tr><td>巨門</td><td>癸水/辛金</td><td>陰</td><td>暗星</td><td>懷疑</td></tr>
          <tr><td>天相</td><td>壬水</td><td>陽</td><td>印星</td><td>熱心</td></tr>
          <tr><td>天梁</td><td>戊土</td><td>陽</td><td>蔭/老人星</td><td>慈悲</td></tr>
          <tr><td>七殺</td><td>庚金</td><td>陽</td><td>將星</td><td>衝動</td></tr>
          <tr><td>破軍</td><td>癸水</td><td>陰</td><td>耗星</td><td>破壞</td></tr>
        </tbody>
      </table>
    </div>

    <div class="app-container">
      <!-- 左側：輸入與控制面板 -->
      <div class="controls-panel">
        <div class="control-group quick-input-panel">
          <div class="controls-title">快速排盤輸入</div>
          <div style="display: flex; gap: 15px; margin-top: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: #334155; align-items: center;">
            <label style="cursor: pointer"><input type="radio" name="year-type" value="ad" checked />西元</label>
            <label style="cursor: pointer"><input type="radio" name="year-type" value="roc" /> 民國</label>
          </div>
          <div style="display: flex; gap: 8px; margin-bottom: 10px">
            <button id="day-stem-btn" type="button" onclick="toggleDayStemMode()" style="padding: 4px 8px; background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; transition: all 0.2s; flex: 1;">日遁</button>
            <button id="year-stem-btn" type="button" onclick="toggleYearStemMode()" style="padding: 4px 8px; background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; transition: all 0.2s; flex: 1;">流年遁</button>
            <button id="now-time-btn" type="button" onclick="useCurrentTime()" style="padding: 4px 8px; background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; transition: all 0.2s; flex: 1;">現在時間</button>
          </div>
          <div style="font-size: 13px; color: #64748b; margin-bottom: 8px">格式：YYMMDD時性別 (如: 19800325子男 或 1060123子男)</div>
          <input type="text" id="birth-input" placeholder="19800325子男" />
          <div style="display: flex; gap: 12px; margin-top: 10px; font-size: 15px; font-weight: 600; color: #334155; align-items: center;">
            <label style="cursor: pointer"><input type="radio" name="calendar" value="lunar" onchange="toggleLeapMonth()"/> 陰曆</label>
            <label id="leap-month-label" style="display: none; cursor: pointer; color: #db2777; margin-left: -5px;"><input type="checkbox" id="is-leap-month" /> 閏月</label>
            <label style="cursor: pointer"><input type="radio" name="calendar" value="solar" checked onchange="toggleLeapMonth()"/> 陽曆</label>
          </div>
          <button id="parse-btn" onclick="parseBirthData()">依輸入值排盤</button>
        </div>

        <div class="control-group">
          <div class="controls-title">紫微星位置 (1=子...12=亥)</div>
          <div class="button-group" id="btn-group-ziwei">
            <button onclick="setZiwei(0)">1</button><button onclick="setZiwei(1)">2</button>
            <button onclick="setZiwei(2)">3</button><button onclick="setZiwei(3)">4</button>
            <button onclick="setZiwei(4)">5</button><button onclick="setZiwei(5)">6</button>
            <button onclick="setZiwei(6)">7</button><button onclick="setZiwei(7)">8</button>
            <button onclick="setZiwei(8)">9</button><button onclick="setZiwei(9)">10</button>
            <button onclick="setZiwei(10)">11</button><button onclick="setZiwei(11)">12</button>
          </div>
        </div>

        <div class="control-group">
          <div class="controls-title">三方四正發動宮位</div>
          <div class="button-group" id="btn-group-target">
            <button onclick="setTarget(0)">1</button><button onclick="setTarget(1)">2</button>
            <button onclick="setTarget(2)">3</button><button onclick="setTarget(3)">4</button>
            <button onclick="setTarget(4)">5</button><button onclick="setTarget(5)">6</button>
            <button onclick="setTarget(6)">7</button><button onclick="setTarget(7)">8</button>
            <button onclick="setTarget(8)">9</button><button onclick="setTarget(9)">10</button>
            <button onclick="setTarget(10)">11</button><button onclick="setTarget(11)">12</button>
          </div>
        </div>

        <div class="control-group">
          <div class="controls-title">流/生年干(五虎盾天干)</div>
          <div class="button-group" id="btn-group-stem" style="grid-template-columns: repeat(5, 1fr)">
            <button onclick="setStem('甲')">甲</button><button onclick="setStem('乙')">乙</button>
            <button onclick="setStem('丙')">丙</button><button onclick="setStem('丁')">丁</button>
            <button onclick="setStem('戊')">戊</button><button onclick="setStem('己')">己</button>
            <button onclick="setStem('庚')">庚</button><button onclick="setStem('辛')">辛</button>
            <button onclick="setStem('壬')">壬</button><button onclick="setStem('癸')">癸</button>
          </div>
          <div id="dev-section">
            <div class="controls-title" style="margin-top: 15px; color: #1e40af; text-align: center; border-top: 1px dashed #cbd5e1; padding-top: 15px;">飛星四化</div>
            <div id="sihua-boards-grid" class="sihua-boards-grid"></div>
          </div>
        </div>
      </div>

      <!-- 右側：命盤與格局區 -->
      <div class="chart-area">
        <div id="header-capture-zone" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
          <div id="current-chart-name" style="font-size: 26px; font-weight: 900; color: #1e40af; text-align: center; width: 100%; display: none; letter-spacing: 2px; padding-bottom: 5px;"></div>
          <div id="birth-info-text" style="font-size: 14.5px; color: #111827; text-align: center; width: 100%; font-weight: normal; margin-top: -2px; letter-spacing: 1px;"></div>
          <div id="top-info-bar" class="top-info-bar">
            <div id="top-info-text" style="font-size: 17px; text-align: center; width: 100%"></div>
            <div class="top-info-bottom-row">
              <div id="bazi-display" class="bazi-display" style="display: none"></div>
              <div id="sanfang-stems-display" class="sanfang-display"></div>
              <div style="display: flex; align-items: center; gap: 6px">
                <input type="number" id="target-year-input" placeholder="輸入流年" style="width: 70px; padding: 4px; border-radius: 4px; border: 1px solid #cbd5e1; font-size: 14px;" />
                <button onclick="updateTargetYear()" style="padding: 4px 12px; background: #334155; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold;">計算</button>
                <button id="copy-header-btn" onclick="copyHeaderToClipboard()" style="padding: 4px 8px; background: #ffffff; color: #334155; border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; font-size: 15px; transition: all 0.2s;" title="複製表頭資訊">📸</button>
              </div>
            </div>
          </div>
        </div>

        <div id="chart-scale-wrapper" class="chart-scale-wrapper">
          <div class="chart-container">
            <div class="cell" id="cell-5"></div><div class="cell" id="cell-6"></div>
            <div class="cell" id="cell-7"></div><div class="cell" id="cell-8"></div>
            <div class="cell" id="cell-4"></div><div class="center-cell" id="center-cell"></div>
            <div class="cell" id="cell-9"></div><div class="cell" id="cell-3"></div>
            <div class="cell" id="cell-10"></div><div class="cell" id="cell-2"></div>
            <div class="cell" id="cell-1"></div><div class="cell" id="cell-0"></div>
            <div class="cell" id="cell-11"></div>
          </div>
        </div>

        <div class="bottom-area" style="display: flex; gap: 15px; justify-content: flex-end; min-height: auto; margin-top: -10px;">
          <button id="toggle-yinshen-btn" onclick="toggleYinShen()" style="width: 54px; height: 54px; background-color: #ffffff; border: none; border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0;" title="顯示陰神判定">☽</button>
          <button id="toggle-flow-btn" onclick="toggleFlow()" style="width: 54px; height: 54px; background-color: #ffffff; border: none; border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0;" title="顯示流通符號">～</button>
          <button id="toggle-bureau-btn" onclick="toggleBureau()" style="width: 54px; height: 54px; background-color: #ffffff; border: none; border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0;" title="切換顯示五行局">✪</button>
          <button onclick="window.open('斗數職業.html', '_blank')" style="width: 54px; height: 54px; background-color: #ffffff; border: none; border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0;" title="斗數職業" onmouseover="this.style.backgroundColor = '#f1f5f9'" onmouseout="this.style.backgroundColor = '#ffffff'">💼</button>
          <button id="copy-chart-btn" onclick="copyChartToClipboard()" style="width: 54px; height: 54px; background-color: #ffffff; border: none; border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0;" title="複製大命盤圖片">📸</button>
        </div>

        <div class="patterns-wrapper">
          <div class="patterns-title">十二宮格局解析</div>
          <div id="patterns-display" class="patterns-area"></div>
        </div>
      </div>

      <div class="presets-bar" id="presets-bar-container"></div>
    </div>

    <!-- ====== ★ 關鍵：依照順序載入我們拆分出來的三個大腦 ====== -->
    <!-- 1. 先載入資料庫 -->
    <script src="constants.js"></script>
    <!-- 2. 載入存檔與匯入模組 -->
    <script src="presets.js"></script>
    <!-- 3. 最後載入核心算盤與畫面控制 -->
    <script src="app.js"></script>

  </body>
</html>