Commit | Line | Data |
---|---|---|
5c8f383f | 1 | <!DOCTYPE html> |
3432350e TM |
2 | <html> |
3 | <head> | |
e83b3e7b | 4 | <title>⚡ Distribution Board Label Generator for DIN Rail Modules</title> |
3432350e | 5 | <style> |
5b5e7001 TM |
6 | /* DIN Rail Modules are 17.5mm wide, but mounted with 18mm pitch to accomodate differences */ |
7 | ||
c2eb7b9f TM |
8 | table,h1 { font-family: sans-serif; font-weight: normal; font-size: 3.8mm; line-height: 5.2mm; } |
9 | small { font-size: 2.5mm; line-height: 2.5mm; } | |
10 | small small { font-size: 2mm; line-height: 1.9mm; } | |
11 | td * { display: block; } | |
3432350e | 12 | td { |
5b5e7001 | 13 | border: 1px solid black; width: 18mm; height: 16mm; |
3432350e | 14 | text-align: center; padding: 0; overflow: hidden; |
c2eb7b9f | 15 | display: flex-wrap; float: left; margin-bottom: 10mm; box-sizing: border-box; |
9dce371e | 16 | justify-content: center; /* align-items: center; */ |
09fb3f72 | 17 | white-space: pre-line; |
3432350e TM |
18 | } |
19 | td:not(:last-child) { border-right: 0px solid red; } | |
5b5e7001 TM |
20 | td[colspan="2"] { width: calc(2 * 18mm); } |
21 | td[colspan="3"] { width: calc(3 * 18mm); } | |
22 | td[colspan="4"] { width: calc(4 * 18mm); } | |
23 | td[colspan="5"] { width: calc(5 * 18mm); } | |
24 | td[colspan="6"] { width: calc(6 * 18mm); } | |
25 | td[colspan="7"] { width: calc(7 * 18mm); } | |
26 | td[colspan="8"] { width: calc(8 * 18mm); } | |
3432350e TM |
27 | tr { margin-bottom: 10mm; } |
28 | table { border-spacing:0px; border-collapse: collapse; } | |
9299f5a2 TM |
29 | @media print { |
30 | .noprint * { display: none; } | |
31 | @page { size: landscape; } | |
32 | } | |
3432350e TM |
33 | </style> |
34 | </head> | |
35 | <body> | |
b733060c | 36 | <h1>Distribution Box Label Generator for DIN Rail Modules ( github.com/harvie )</h1> |
23b820ca | 37 | Copy-paste these icons: 📡 🌐 🔔 📺 📞 🔌 💧 🔥 ⚡ 💡 🔧 🔑 🔒 🌡 ⚙ 🕒 ⏰ 💨 🔋 📹 🔐 🤖 ☀ 🌒 🌙 🔆 🌞 ⏳ |
29590143 | 38 | <br /> |
5c8f383f | 39 | <div class="noprint"> |
b6d6a802 | 40 | <textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea> |
5c8f383f TM |
41 | <button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button> |
42 | <button onclick="window.print();return false;">Print</button> | |
b733060c | 43 | </div> |
5c8f383f TM |
44 | <br /> |
45 | <br /> | |
5c8f383f TM |
46 | |
47 | <table id="labeltable"> | |
5bb08111 TM |
48 | |
49 | <tr> | |
3432350e | 50 | <td></td> |
0798dac0 | 51 | <td>🔌<br />Obývák</td> |
1b9cbe22 | 52 | <td>🔌<br />Pokoje</td> |
0798dac0 | 53 | <td>💧<br />Koupelna Pračka</td> |
3432350e | 54 | <td></td> |
37483e27 TM |
55 | <td>💧<br />Kuchyně Linka</td> |
56 | <td>💧<br />Kuchyně Myčka</td> | |
1b9cbe22 | 57 | <td colspan=3>🔥<br />Kuchyně Sporák</td> |
18f916cc | 58 | <td colspan=3>⚡<br />Svodič přepětí</td> |
3432350e TM |
59 | <td></td> |
60 | </tr> | |
61 | ||
3432350e TM |
62 | <tr> |
63 | <td></td> | |
64 | <td></td> | |
0798dac0 TM |
65 | <td>🔌<br />Vchod</td> |
66 | <td>🔌<br />Předsíň</td> | |
b9a4f830 | 67 | <td>🔧<br />Režie</td> |
b665bd20 TM |
68 | <td>💡<br />Světla Kuchyně</td> |
69 | <td>💡<br />Světla Koupelna</td> | |
70 | <td>💡<br />Světla Obývák</td> | |
71 | <td>💡<br />Světla Pokoje</td> | |
72 | <td>💡<br />Světla Předsíň</td> | |
1e31524f | 73 | <td colspan=3>💡<br />Světla Předsíň<br />Bezdrátové Relé</td> |
3432350e TM |
74 | <td></td> |
75 | </tr> | |
76 | ||
77 | <tr> | |
c2eb7b9f TM |
78 | <td><small>Very long and tiny text that is really important to have on your breaker box!</small></td> |
79 | <td>Warning!<small><small>Very long and tiny text that is really important to have on your breaker box!</small></small></td> | |
80 | <td><b>Bold</b> <i>Italic</i> <u>Under</u></td> | |
3432350e TM |
81 | <td></td> |
82 | <td></td> | |
83 | <td></td> | |
84 | <td></td> | |
85 | <td></td> | |
86 | <td></td> | |
87 | <td></td> | |
88 | <td></td> | |
89 | <td></td> | |
90 | <td></td> | |
91 | <td></td> | |
5bb08111 TM |
92 | </tr> |
93 | ||
94 | <tr> | |
95 | <td></td> | |
96 | <td></td> | |
97 | <td></td> | |
98 | <td></td> | |
99 | <td></td> | |
100 | <td></td> | |
101 | <td></td> | |
102 | <td></td> | |
103 | <td></td> | |
104 | <td></td> | |
105 | <td></td> | |
106 | <td></td> | |
107 | <td></td> | |
108 | <td></td> | |
109 | </tr> | |
110 | ||
111 | <tr> | |
112 | <td></td> | |
113 | <td></td> | |
114 | <td></td> | |
115 | <td></td> | |
116 | <td></td> | |
117 | <td></td> | |
118 | <td></td> | |
119 | <td></td> | |
120 | <td></td> | |
121 | <td></td> | |
122 | <td></td> | |
123 | <td></td> | |
124 | <td></td> | |
125 | <td></td> | |
126 | </tr> | |
127 | ||
128 | </table> | |
3432350e | 129 | |
5c8f383f | 130 | <script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.trim();</script> |
3432350e TM |
131 | |
132 | </body> | |
133 | </html> |