diff --git a/index.html b/index.html
new file mode 100644
index 0000000..440dffb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>易经铜钱占卜</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin: 20px;
+        }
+        .result {
+            font-size: 18px;
+            margin: 10px 0;
+        }
+        .hexagram-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 20px 0;
+        }
+        .hexagram-column {
+            margin: 0 20px;
+        }
+        .hexagram {
+            font-size: 24px;
+            margin: 5px 0;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            margin-top: 20px;
+            cursor: pointer;
+        }
+        .coins {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+        .coin {
+            font-size: 40px;
+            margin: 0 10px;
+        }
+        .line {
+            font-size: 24px;
+            margin: 5px 0;
+        }
+        .description {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+
+    <h1>易经铜钱占卜</h1>
+    <p>点击按钮开始掷铜钱，生成卦象。</p>
+
+    <div class="coins">
+        <span id="coin1" class="coin">🟡</span>
+        <span id="coin2" class="coin">🟡</span>
+        <span id="coin3" class="coin">🟡</span>
+    </div>
+
+    <button id="tossButton" onclick="tossCoins()">掷铜钱</button>
+    <button id="resetButton" onclick="resetAll()" disabled>重置</button>
+
+    <div class="result">
+        <p id="lineResult"></p>
+    </div>
+
+    <div class="hexagram-row">
+        <div class="hexagram-column">
+            <h2>本卦</h2>
+            <div id="originalHexagram" class="hexagram"></div>
+            <p id="originalHexagramName"></p>
+        </div>
+        <div class="hexagram-column">
+            <h2>变卦</h2>
+            <div id="changedHexagram" class="hexagram"></div>
+            <p id="changedHexagramName"></p>
+        </div>
+    </div>
+
+    <div class="description">
+        <p id="originalHexagramDescription"></p>
+        <p id="changedHexagramDescription"></p>
+    </div>
+
+    <script>
+        const guaData = {
+            '111111': { name: '乾 (Qián)', description: '乾卦：元亨利贞。'},
+            '000000': { name: '坤 (Kūn)', description: '坤卦：元亨，利牝马之贞。'},
+            '100010': { name: '屯 (Zhūn)', description: '屯卦：元亨，利贞，勿用有攸往。'},
+            '010001': { name: '蒙 (Méng)', description: '蒙卦：亨。匪我求童蒙，童蒙求我。'},
+            '111010': { name: '需 (Xū)', description: '需卦：有孚，光亨，贞吉。'},
+            '010111': { name: '讼 (Sòng)', description: '讼卦：有孚窒惕，中吉。终凶。'},
+            '000010': { name: '师 (Shī)', description: '师卦：贞，丈人吉。'},
+            '010000': { name: '比 (Bǐ)', description: '比卦：吉。原筮，元永贞，无咎。不宁方来，后夫凶。'},
+            '110111': { name: '小畜 (Xiǎo Xù)', description: '小畜卦：亨。密云不雨，自我西郊。'},
+            '111011': { name: '履 (Lǚ)', description: '履卦：履虎尾，不咥人，亨。'},
+            '000111': { name: '泰 (Tài)', description: '泰卦：小往大来，吉，亨。'},
+            '111000': { name: '否 (Pǐ)', description: '否卦：否之匪人，不利君子贞，大往小来。'},
+            '111101': { name: '同人 (Tóng Rén)', description: '同人卦：同人于野，亨，利涉大川，利君子贞。'},
+            '101111': { name: '大有 (Dà Yǒu)', description: '大有卦：元亨。'},
+            '000100': { name: '谦 (Qiān)', description: '谦卦：亨。君子有终。'},
+            '001000': { name: '豫 (Yù)', description: '豫卦：利建侯行师。'},
+            '011001': { name: '随 (Suí)', description: '随卦：元亨，利贞，无咎。'},
+            '100110': { name: '蛊 (Gǔ)', description: '蛊卦：元亨，利涉大川。先甲三日，后甲三日。'},
+            '000011': { name: '临 (Lín)', description: '临卦：元亨，利贞。至于八月有凶。'},
+            '110000': { name: '观 (Guān)', description: '观卦：盥而不荐，有孚顒若。'},
+            '101001': { name: '噬嗑 (Shì Kè)', description: '噬嗑卦：亨，利用狱。'},
+            '100101': { name: '贲 (Bì)', description: '贲卦：亨。小利有攸往。'},
+            '100000': { name: '剥 (Bō)', description: '剥卦：不利有攸往。'},
+            '000001': { name: '复 (Fù)', description: '复卦：亨。出入无疾，朋来无咎。'},
+            '111001': { name: '无妄 (Wú Wàng)', description: '无妄卦：元，亨，利，贞。其匪正有眚，不利有攸往。'},
+            '100111': { name: '大畜 (Dà Xù)', description: '大畜卦：利贞。不家食吉，利涉大川。'},
+            '001111': { name: '颐 (Yí)', description: '颐卦：贞吉。观颐，自求口实。'},
+            '111100': { name: '大过 (Dà Guò)', description: '大过卦：栋桡，利有攸往，亨。'},
+            '000101': { name: '坎 (Kǎn)', description: '坎卦：习坎，有孚，维心亨，行有尚。'},
+            '101000': { name: '离 (Lí)', description: '离卦：利贞，亨。畜牝牛，吉。'},
+            '011010': { name: '咸 (Xián)', description: '咸卦：亨，利贞，取女吉。'},
+            '010110': { name: '恒 (Héng)', description: '恒卦：亨，无咎，利贞，利有攸往。'},
+            '000110': { name: '遁 (Dùn)', description: '遁卦：亨，小利贞。'},
+            '011000': { name: '大壮 (Dà Zhuàng)', description: '大壮卦：利贞。'},
+            '100011': { name: '晋 (Jìn)', description: '晋卦：康侯用锡马蕃庶，昼日三接。'},
+            '110100': { name: '明夷 (Míng Yí)', description: '明夷卦：利艰贞。'},
+            '001010': { name: '家人 (Jiā Rén)', description: '家人卦：利女贞。'},
+            '010100': { name: '睽 (Kuí)', description: '睽卦：小事吉。'},
+            '110001': { name: '蹇 (Jiǎn)', description: '蹇卦：利西南，不利东北。利见大人，贞吉。'},
+            '100110': { name: '解 (Xiè)', description: '解卦：利西南。无所往，其来复吉。有攸往，夙吉。'},
+            '010101': { name: '损 (Sǔn)', description: '损卦：有孚，元吉，无咎，可贞，利有攸往。'},
+            '101010': { name: '益 (Yì)', description: '益卦：利有攸往，利涉大川。'},
+            '110110': { name: '夬 (Guài)', description: '夬卦：扬于王庭，孚号，有厉，告自邑，不利即戎，利有攸往。'},
+            '001011': { name: '姤 (Gòu)', description: '姤卦：女壮，勿用取女。'},
+            '101101': { name: '萃 (Cuì)', description: '萃卦：亨。王假有庙，利见大人，亨，利贞。用大牲吉，利有攸往。'},
+            '110101': { name: '升 (Shēng)', description: '升卦：元亨，用见大人，勿恤，南征吉。'},
+            '101011': { name: '困 (Kùn)', description: '困卦：亨，贞大人吉，无咎，有言不信。'},
+            '011101': { name: '井 (Jǐng)', description: '井卦：改邑不改井，无丧无得。往来井井，汔至亦未繘井，羸其瓶，凶。'},
+            '111110': { name: '革 (Gé)', description: '革卦：己日乃孚，元亨，利贞，悔亡。'},
+            '011111': { name: '鼎 (Dǐng)', description: '鼎卦：元吉，亨。'},
+            '001001': { name: '震 (Zhèn)', description: '震卦：亨。震来虩虩，笑言哑哑。震惊百里，不丧匕鬯。'},
+            '011110': { name: '艮 (Gèn)', description: '艮卦：艮其背，不获其身，行其庭，不见其人，无咎。'},
+            '000011': { name: '渐 (Jiàn)', description: '渐卦：女归吉，利贞。'},
+            '110000': { name: '归妹 (Guī Mèi)', description: '归妹卦：征凶，无攸利。'},
+            '100001': { name: '丰 (Fēng)', description: '丰卦：亨，王假之，勿忧，宜日中。'},
+            '011100': { name: '旅 (Lǚ)', description: '旅卦：小亨，旅贞吉。'},
+            '100011': { name: '巽 (Xùn)', description: '巽卦：小亨，利有攸往，利见大人。'},
+            '110100': { name: '兑 (Duì)', description: '兑卦：亨，利贞。'},
+            '001110': { name: '涣 (Huàn)', description: '涣卦：亨。王假有庙，利涉大川，利贞。'},
+            '011001': { name: '节 (Jié)', description: '节卦：亨。苦节不可贞。'},
+            '101100': { name: '中孚 (Zhōng Fú)', description: '中孚卦：豚鱼，吉。利涉大川，利贞。'},
+            '001101': { name: '小过 (Xiǎo Guò)', description: '小过卦：亨，利贞。可小事，不可大事。飞鸟遗之音，不宜上，宜下，大吉。'},
+            '111101': { name: '既济 (Jì Jì)', description: '既济卦：亨小，利贞。初吉终乱。'},
+            '101111': { name: '未济 (Wèi Jì)', description: '未济卦：亨，小狐汔济，濡其尾，无攸利。'}
+        };
+
+        let lines = [];
+        let originalHexagram = [];
+        let changedHexagram = [];
+
+        function tossCoins() {
+            const coins = [getCoinResult(), getCoinResult(), getCoinResult()];
+            document.getElementById('coin1').innerText = coins[0] ? '🟡' : '⚪';
+            document.getElementById('coin2').innerText = coins[1] ? '🟡' : '⚪';
+            document.getElementById('coin3').innerText = coins[2] ? '🟡' : '⚪';
+
+            const line = calculateLine(coins);
+            lines.unshift(line.text);
+
+            // 保存本卦和变卦的结果
+            originalHexagram.unshift(line.originalSymbol);
+            changedHexagram.unshift(line.changedSymbol);
+
+            document.getElementById('lineResult').innerText = `本爻: ${line.text}`;
+
+            // 更新显示卦象
+            document.getElementById('originalHexagram').innerHTML = originalHexagram.join('<br>');
+            document.getElementById('changedHexagram').innerHTML = changedHexagram.join('<br>');
+
+            if (lines.length === 6) {
+                document.getElementById('tossButton').disabled = true;
+                document.getElementById('resetButton').disabled = false; // 启用重置按钮
+                displayHexagramNames();
+            }
+        }
+
+        function getCoinResult() {
+            return Math.random() < 0.5;
+        }
+
+        function calculateLine(coins) {
+            const sum = coins.reduce((a, b) => a + b, 0);
+            if (sum === 3) {
+                return {text: "O (老阳) -> 阴爻 (– –)", originalSymbol: '—', changedSymbol: '– –'};
+            } else if (sum === 0) {
+                return {text: "× (老阴) -> 阳爻 (—)", originalSymbol: '– –', changedSymbol: '—'};
+            } else if (sum === 2) {
+                return {text: "— (少阳)", originalSymbol: '—', changedSymbol: '—'};
+            } else {
+                return {text: "– – (少阴)", originalSymbol: '– –', changedSymbol: '– –'};
+            }
+        }
+
+        function displayHexagramNames() {
+            const originalBinary = originalHexagram.map(symbol => symbol === '—' ? '1' : '0').join('');
+            const changedBinary = changedHexagram.map(symbol => symbol === '—' ? '1' : '0').join('');
+
+            const originalData = guaData[originalBinary];
+            const changedData = guaData[changedBinary];
+
+            document.getElementById('originalHexagramName').innerText = `卦名: ${originalData.name}`;
+            document.getElementById('changedHexagramName').innerText = `变卦名: ${changedData.name}`;
+
+            document.getElementById('originalHexagramDescription').innerText = `卦辞: ${originalData.description}`;
+            document.getElementById('changedHexagramDescription').innerText = `变卦辞: ${changedData.description}`;
+        }
+
+        function resetAll() {
+            // 清空记录的卦象和变卦数据
+            lines = [];
+            originalHexagram = [];
+            changedHexagram = [];
+
+            // 清空显示内容
+            document.getElementById('originalHexagram').innerHTML = '';
+            document.getElementById('changedHexagram').innerHTML = '';
+            document.getElementById('originalHexagramName').innerText = '';
+            document.getElementById('changedHexagramName').innerText = '';
+            document.getElementById('originalHexagramDescription').innerText = '';
+            document.getElementById('changedHexagramDescription').innerText = '';
+            document.getElementById('lineResult').innerText = '';
+
+            // 重置按钮状态
+            document.getElementById('tossButton').disabled = false;
+            document.getElementById('resetButton').disabled = true;
+        }
+    </script>
+
+</body>
+</html>
