+<!DOCTYPE html>
<html>
<head>
-<title>DIN Module label generator</title>
+<title>⚡ Distribution Board Label Generator for DIN Rail Modules</title>
<style>
-* { font-family: sans-serif; font-weight: normal; font-size: 98%; }
+/* DIN Rail Modules are 17.5mm wide, but mounted with 18mm pitch to accomodate differences */
+
+table,h1 { font-family: sans-serif; font-weight: normal; font-size: 3.8mm; line-height: 5.2mm; }
+small { font-size: 2.5mm; line-height: 2.5mm; }
+small small { font-size: 2mm; line-height: 1.9mm; }
+td * { display: block; }
td {
- border: 1px solid black; width: 17.5mm; height: 17.5mm;
+ border: 1px solid black; width: 18mm; height: 16mm;
text-align: center; padding: 0; overflow: hidden;
- display: flex; float: left; margin-bottom: 10mm; box-sizing: border-box;
- align-items: center;
+ display: flex-wrap; float: left; margin-bottom: 10mm; box-sizing: border-box;
+ justify-content: center; /* align-items: center; */
+ white-space: pre-line;
}
td:not(:last-child) { border-right: 0px solid red; }
-td[colspan="3"] { width: calc(3 * 17.5mm); }
+td[colspan="2"] { width: calc(2 * 18mm); }
+td[colspan="3"] { width: calc(3 * 18mm); }
+td[colspan="4"] { width: calc(4 * 18mm); }
+td[colspan="5"] { width: calc(5 * 18mm); }
+td[colspan="6"] { width: calc(6 * 18mm); }
+td[colspan="7"] { width: calc(7 * 18mm); }
+td[colspan="8"] { width: calc(8 * 18mm); }
tr { margin-bottom: 10mm; }
table { border-spacing:0px; border-collapse: collapse; }
+@media print {
+ .noprint * { display: none; }
+ @page { size: landscape; }
+}
</style>
</head>
<body>
-<h2>DIN Module label generator</h2>
-github.com/harvie
-<br /><br />
+<h1>Distribution Box Label Generator for DIN Rail Modules ( github.com/harvie )</h1>
+Copy-paste these icons: 📡 🌐 🔔 📺 📞 🔌 💧 🔥 ⚡ 💡 🔧 🔑 🔒 🌡 ⚙ 🕒 ⏰ 💨 🔋 📹 🔐 🤖 ☀ 🌒 🌙 🔆 🌞 ⏳
+<br />
+<div class="noprint">
+<textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
+<button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button>
+<button onclick="window.print();return false;">Print</button>
+</div>
+<br />
+<br />
+
+<table id="labeltable">
-<table><tr>
+<tr>
<td></td>
-<td>Obývák</td>
-<td>Pokoje 1+2</td>
-<td>💧 Koupelna Pračka</td>
+<td>🔌<br />Obývák</td>
+<td>🔌<br />Pokoje</td>
+<td>💧<br />Koupelna Pračka</td>
<td></td>
-<td>💧Kuchyň Linka</td>
-<td>💧<br />Myčka</td>
-<td colspan=3>🔥 Sporák</td>
-<td colspan=3>⚡ Přepěťovka</td>
+<td>💧<br />Kuchyně Linka</td>
+<td>💧<br />Kuchyně Myčka</td>
+<td colspan=3>🔥<br />Kuchyně Sporák</td>
+<td colspan=3>⚡<br />Svodič přepětí</td>
<td></td>
</tr>
-<tr></tr>
+<tr>
+<td></td>
+<td></td>
+<td>🔌<br />Vchod</td>
+<td>🔌<br />Předsíň</td>
+<td>🔧<br />Režie</td>
+<td>💡<br />Světla Kuchyně</td>
+<td>💡<br />Světla Koupelna</td>
+<td>💡<br />Světla Obývák</td>
+<td>💡<br />Světla Pokoje</td>
+<td>💡<br />Světla Předsíň</td>
+<td colspan=3>💡<br />Světla Předsíň<br />Bezdrátové Relé</td>
+<td></td>
+</tr>
<tr>
+<td><small>Very long and tiny text that is really important to have on your breaker box!</small></td>
+<td>Warning!<small><small>Very long and tiny text that is really important to have on your breaker box!</small></small></td>
+<td><b>Bold</b> <i>Italic</i> <u>Under</u></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
<td></td>
<td></td>
-<td>Vchod</td>
-<td>Předsíň</td>
-<td>:</td>
-<td>💡 Sv. Kuchyň</td>
-<td>💡 Sv. Koupel</td>
-<td>💡 Sv. Obývák</td>
-<td>💡 Sv. Pokoje</td>
-<td>💡 Sv. Předsíň</td>
-<td colspan=3>💡 Sv.<br /> RF příjmač předsíň</td>
<td></td>
</tr>
<td></td>
<td></td>
<td></td>
-</tr></table>
+</tr>
+
+<tr>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+<td></td>
+</tr>
+
+</table>
+<script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.trim();</script>
</body>
</html>