HexMerger/index.html at main · ashesofideals/HexMerger · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intel HEX Merger Tool</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <header>
            <h1>Intel HEX Merger Tool</h1>
            <p>Upload two .hex files to parse address spaces and merge them into a single file.</p>
        </header>

        <main>
            <div class="merge-area">
                <!-- File A Input -->
                <div class="card">
                    <div class="card-header">
                        Base HEX File
                        <span class="badge" id="badge-a">Not Loaded</span>
                    </div>
                    <div class="drop-zone" id="drop-zone-a">
                        <svg class="icon-upload" viewBox="0 0 24 24">
                            <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                        </svg>
                        <p>Click or drag file here</p>
                        <input type="file" id="input-a" accept=".hex,.ihx">
                    </div>
                    <div class="file-info" id="info-a">
                        <div class="info-row"><span>Filename:</span> <span id="name-a">-</span></div>
                        <div class="info-row"><span>Address Range:</span> <span id="range-a">-</span></div>
                        <div class="info-row"><span>Data Size:</span> <span id="size-a">-</span></div>
                    </div>
                </div>

                <!-- File B Input -->
                <div class="card">
                    <div class="card-header">
                        Overlay HEX File
                        <span class="badge" id="badge-b">Not Loaded</span>
                    </div>
                    <div class="drop-zone" id="drop-zone-b">
                        <svg class="icon-upload" viewBox="0 0 24 24">
                            <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                        </svg>
                        <p>Click or drag file here</p>
                        <input type="file" id="input-b" accept=".hex,.ihx">
                    </div>
                    <div class="file-info" id="info-b">
                        <div class="info-row"><span>Filename:</span> <span id="name-b">-</span></div>
                        <div class="info-row"><span>Address Range:</span> <span id="range-b">-</span></div>
                        <div class="info-row"><span>Data Size:</span> <span id="size-b">-</span></div>
                    </div>
                </div>
            </div>

            <div class="actions">
                <p style="margin-bottom: 1rem; color: var(--text-sub); font-size: 0.9rem;">
                    Merge Rule: Combine data from Base and Overlay files. If addresses overlap, data from the <strong>Overlay File (B)</strong> will overwrite data from the Base File (A).
                </p>
                <button class="btn" id="merge-btn" disabled>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                    Merge HEX Files
                </button>
                <div id="status-msg" class="status-msg"></div>
            </div>

            <div class="card result-area" id="result-card">
                <div class="card-header">
                    Merge Result
                    <button class="btn" style="font-size: 0.8rem; padding: 0.4rem 0.8rem;" onclick="document.getElementById('result-card').classList.remove('visible')">Close</button>
                </div>
                <div class="info-row"><span>Total Size:</span> <span id="result-size">-</span></div>
                <div class="info-row"><span>Final Range:</span> <span id="result-range">-</span></div>
                <div class="download-group">
                    <button class="btn" id="download-btn">Download merged.hex</button>
                </div>
                <div class="log-box" id="merge-log">Waiting for operation...</div>
            </div>
        </main>

        <!-- 正确的 Footer 位置，放在 main 结束之后 -->
        <footer>
            <p>Version 1.0.2 | Updated: 2023-10-27</p>
        </footer>

    </div>

    <div class="toast" id="toast">Notification</div>

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