proxprint/index.html at main · JayDubyaEey/proxprint · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MTG Proxy Builder</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="app">
    <!-- Header -->
    <header>
        <h1>MTG Proxy Builder</h1>
        <span class="subtitle">Generate print-ready proxy sheets</span>
    </header>

    <div class="main-content">
        <!-- ─── Sidebar ─── -->
        <aside class="sidebar">

            <!-- Card list input -->
            <div class="sidebar-section">
                <h3>Card List</h3>
                <textarea id="cardList" placeholder="4 Lightning Bolt&#10;1 Sol Ring&#10;2 Fable of the Mirror-Breaker&#10;1 Counterspell [MH2]"></textarea>
                <div class="input-help">
                    One card per line. Prefix with quantity.<br>
                    Add <strong>[SET]</strong> for a specific printing, e.g. <strong>1 Bolt [2XM]</strong>.<br>
                    Double-faced cards print both faces automatically.
                </div>
            </div>

            <!-- Settings -->
            <div class="sidebar-section">
                <h3>Image Quality</h3>
                <div class="setting-row">
                    <label for="imageQuality">Source</label>
                    <select id="imageQuality">
                        <option value="png">PNG (745×1040, best)</option>
                        <option value="large">Large JPG (672×936)</option>
                        <option value="normal">Normal JPG (488×680)</option>
                        <option value="border_crop">Border Crop</option>
                    </select>
                </div>
            </div>

            <div class="sidebar-section">
                <h3>Cut Lines</h3>
                <div class="setting-row">
                    <label for="cutLineMode">Style</label>
                    <select id="cutLineMode">
                        <option value="none">None</option>
                        <option value="corners">Corner Marks</option>
                        <option value="grid" selected>Full Grid Lines</option>
                    </select>
                </div>
                <div class="setting-row">
                    <label for="cutColour">Colour</label>
                    <input type="color" id="cutColour" value="#888888">
                </div>
                <div class="setting-row">
                    <label for="cutWidth">Width</label>
                    <input type="range" id="cutWidth" min="0.1" max="1.5" step="0.1" value="0.3">
                    <span class="range-value" id="cutWidthValue">0.3mm</span>
                </div>
                <div class="setting-row">
                    <label for="cutStyle">Line</label>
                    <select id="cutStyle">
                        <option value="solid" selected>Solid</option>
                        <option value="dashed">Dashed</option>
                    </select>
                </div>
            </div>

            <!-- Actions -->
            <div class="sidebar-section">
                <button id="btnLoadCards" class="btn btn-primary" disabled>Load Cards</button>
                <button id="btnGenerate" class="btn btn-primary" style="display:none">Generate Preview</button>
                <button id="btnBackToCards" class="btn btn-secondary" style="display:none">← Back to Cards</button>

                <div id="progressContainer" class="progress-container">
                    <div class="progress-bar-track">
                        <div id="progressFill" class="progress-bar-fill"></div>
                    </div>
                    <div id="progressText" class="progress-text">Starting…</div>
                </div>

                <div id="errorLog" class="error-log"></div>

                <button id="btnDownload" class="btn btn-download" disabled>Download PDF</button>
                <button id="btnClear" class="btn btn-clear">Clear All</button>
            </div>

            <!-- Database status -->
            <div class="sidebar-section sidebar-footer">
                <div id="dbStatus" class="db-status">Loading card database…</div>
            </div>
        </aside>

        <!-- ─── Preview Area ─── -->
        <main class="preview-area">
            <!-- Stats bar (hidden until preview) -->
            <div id="statsBar" class="stats-bar" style="display:none;">
                <div class="stat">
                    <span id="statCards" class="stat-value">0</span>
                    <span class="stat-label">Cards</span>
                </div>
                <div class="divider"></div>
                <div class="stat">
                    <span id="statPages" class="stat-value">0</span>
                    <span class="stat-label">Pages</span>
                </div>
            </div>

            <!-- Card list panel (shown after "Load Cards") -->
            <div id="cardListPanel" class="card-list-panel" style="display:none;">
                <div id="cardListStats" class="cl-stats"></div>
                <div id="cardListView" class="cl-container"></div>
            </div>

            <!-- Preview panel (page canvases, shown after "Generate Preview") -->
            <div id="previewPanel" class="preview-panel" style="display:none;">
                <div id="pageContainer" class="page-preview-container"></div>
            </div>

            <!-- Empty state -->
            <div id="emptyState" class="empty-state">
                <div class="icon">🃏</div>
                <p>Enter card names in the sidebar and click <strong>Load Cards</strong> to select variants and preview your proxy sheet.</p>
            </div>
        </main>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="app.js"></script>
</body>
</html>