<style>
/* DIN Rail Modules are 17.5mm wide, but mounted with 18mm pitch to accomodate differences */
-* { font-family: sans-serif; font-weight: normal; font-size: 98%; }
+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: 18mm; height: 16mm;
text-align: center; padding: 0; overflow: hidden;
- display: flex; float: left; margin-bottom: 10mm; box-sizing: border-box;
+ 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="2"] { width: calc(2 * 18mm); }
tr { margin-bottom: 10mm; }
table { border-spacing:0px; border-collapse: collapse; }
@media print {
- .noprint * { display: none; }
+ .noprint, .noprint * { display: none; }
@page { size: landscape; }
}
</style>
</head>
<body>
-<h1>Distribution Box Label Generator for DIN Rail Modules</h1>
-github.com/harvie
-<br /><br />
-
+<h1>Distribution Box Label Generator for DIN Rail Modules ( github.com/harvie )</h1>
+<div class="noprint">Copy-paste these icons:</div>
+📡 🌐 🔔 📺 📞 🔌 💧 🔥 ⚡ 💡 🔧 🛠️ 🔑 🔒 🌡️ ⚙️ 🕒 ⏰ 💨 🔋 📹 🔐 🤖 ☀️ 🌒 🌙 🔆 🌞 ⏳ 🛡️ ⚔️ ☠ ☠️ 🛗 🚗 ⭐ ✨ 💫 ❄️ ⚠ ⚠️
+<br />
<div class="noprint">
-<textarea id="labeltext" style="width:100%; height: 20em;"></textarea>
+<textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
+Use CTRL+S to save whole tool including your changes to your computer. CTRL+P to print.<br />
<button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button>
<button onclick="window.print();return false;">Print</button>
+</div>
<br />
<br />
-</div>
<table id="labeltable">
<td>🔌<br />Pokoje</td>
<td>💧<br />Koupelna Pračka</td>
<td></td>
-<td>💧<br />Kuchyňe Linka</td>
-<td>💧<br />Kucyhně Myčka</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>
<td></td>
<td>🔌<br />Vchod</td>
<td>🔌<br />Předsíň</td>
-<td>🔧<br /></td>
-<td>💡 Sv. Kuchyňe</td>
-<td>💡 Sv. Koupelna</td>
-<td>💡 Sv. Obývák</td>
-<td>💡 Sv. Pokoje</td>
-<td>💡 Sv. Předsíň</td>
-<td colspan=3>💡 Sv.<br /> RF relé 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></td>
-<td></td>
-<td></td>
+<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>