Add pre-generated sample of a card for easier previewing by other devs

asl97 · Dec 28, 2023 · 109da25 · 109da25
1 parent 263588d
commit 109da25
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/sample/CS75-4000.html b/sample/CS75-4000.html
@@ -0,0 +1,14 @@
+<html><head>
+                        <style>
+                            .printer_card {
+                                break-inside: 'avoid';
+                                page-break-after: always;
+                            }
+                        </style></head><body><div style="text-align: center; display: flex;" class="printer_card">
+
+                    <div id="card_viewer"><div class="card" style="font-size: 70px; width: 240mm; height: 200mm; display: table; table-layout: fixed;"><div class="table_row" style="display: table-row; border: 1px solid black;"><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;" data-group="B">55</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;" data-group="I">40</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;" data-group="N">4</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;" data-group="G">65</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;" data-group="O">62</span></div><div class="table_row" style="display: table-row; border: 1px solid black;"><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">15</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">11</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">35</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">3</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">21</span></div><div class="table_row" style="display: table-row; border: 1px solid black;"><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">56</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">45</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">32</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">59</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">49</span></div><div class="table_row" style="display: table-row; border: 1px solid black;"><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">53</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">17</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">51</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">42</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">58</span></div><div class="table_row" style="display: table-row; border: 1px solid black;"><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">12</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">10</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">71</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">37</span><span class="table_cell" style="display: table-cell; border: 1px solid black; padding: 1vw; vertical-align: middle;">14</span></div></div></div>
+                <div style="position: relative; width: 0px; height: 0px; top: 200mm; rotate: -90deg;"><svg viewBox="0 0 320 50" stroke="black" stroke-width="1" shape-rendering="crispEdges" xmlns="http://www.w3.org/2000/svg" version="1.1" style="margin: 5mm 5mm 0px; width: 190mm;">
+        <line stroke-dasharray="2 1 1 2 1 4 1 3 1 3 2 1 2 1 3 1 1 3 3 1 2 1 3 1 2 1 3 2 1 2 1 2 2 1 3 2 2 2 1 2 3 1 1 2 3 1 2 2 1 2 3 1 2 2 1 2 3 1 2 2 1 1 2 3 1 3 2 3 3 1 1 1 2" x1="0" y1=".5" x2="134" y2=".5" transform="matrix(2.388059701492537 0 0 100 0 0)"></line>
+    </svg><div style="position: relative; text-align: start; font-size: 84px; height: 0px; left: 5mm; width: 190mm; top: 0mm;">
+                        <label>Card id: </label><label id="card_id">CS75-4000</label>
+                    </div></div></div></body></html>