[mirrors/Designs.git] / tools / din_rail_module_label_generator.html

<!DOCTYPE html>
<html>
<head>
<title>&#x26A1; Distribution Board Label Generator for DIN Rail Modules</title>
<style>
/* 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: 18mm; height: 16mm; 
	text-align: center; padding: 0; overflow: hidden;
	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); }
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, .noprint * { display: none; }
	@page { size: landscape; }
}
</style>
</head>
<body>
<h1>Distribution Box Label Generator for DIN Rail Modules ( github.com/harvie )</h1>
<div class="noprint">Copy-paste these icons:</div>
&#x1F4E1; &#x1F310; &#x1F514; &#x1F4FA; &#x1F4DE; &#x1F50C; &#x1F4A7; &#x1F525; &#x26A1; &#x1f4a1; &#x1F527; &#x1f6e0;&#xFE0F; &#x1F511; &#x1F512; &#x1F321;&#xFE0F; &#x2699;&#xFE0F; &#x1F552; &#x23F0; &#x1F4A8; &#x1F50B; &#x1F4F9; &#x1F510; &#x1F916; &#x2600;&#xFE0F; &#x1F312; &#x1F319; &#x1F506; &#x1F31E; &#x23F3; &#x1F6E1;&#xFE0F; &#x2694;&#xFE0F; &#x2620; &#x2620;&#xFE0F; &#x1F6D7; &#x1F697; &#x2B50; &#x2728; &#x1F4AB; &#x2744;&#xFE0F; &#x26A0; &#x26A0;&#xFE0F;
<br />
<div class="noprint">
<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.<br />
<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">

<tr>
<td></td>
<td>&#x1F50C;<br />Obývák</td>
<td>&#x1F50C;<br />Pokoje</td>
<td>&#x1F4A7;<br />Koupelna Pračka</td>
<td></td>
<td>&#x1F4A7;<br />Kuchyně Linka</td>
<td>&#x1F4A7;<br />Kuchyně Myčka</td>
<td colspan=3>&#x1F525;<br />Kuchyně Sporák</td>
<td colspan=3>&#x26A1;<br />Svodič přepětí</td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td>&#x1F50C;<br />Vchod</td>
<td>&#x1F50C;<br />Předsíň</td>
<td>&#x1F527;<br />Režie</td>
<td>&#x1f4a1;<br />Světla Kuchyně</td>
<td>&#x1f4a1;<br />Světla Koupelna</td>
<td>&#x1f4a1;<br />Světla Obývák</td>
<td>&#x1f4a1;<br />Světla Pokoje</td>
<td>&#x1f4a1;<br />Světla Předsíň</td>
<td colspan=3>&#x1f4a1;<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>
</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>

<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>
Commit	Line	Data
5c8f383f	1	<!DOCTYPE html>
3432350e TM	2	<html>
3432350e TM	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 */
5b5e7001 TM	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	}
3432350e TM	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; }
3432350e TM	28	table { border-spacing:0px; border-collapse: collapse; }
9299f5a2	29	@media print {
91bfe157	30	.noprint, .noprint * { display: none; }
9299f5a2 TM	31	@page { size: landscape; }
9299f5a2 TM	32	}
3432350e TM	33	</style>
	34	</head>
	35	<body>
b733060c	36	<h1>Distribution Box Label Generator for DIN Rail Modules ( github.com/harvie )</h1>
91bfe157 TM	37	<div class="noprint">Copy-paste these icons:</div>
91bfe157 TM	38	📡 🌐 🔔 📺 📞 🔌 💧 🔥 ⚡ 💡 🔧 🛠️ 🔑 🔒 🌡️ ⚙️ 🕒 ⏰ 💨 🔋 📹 🔐 🤖 ☀️ 🌒 🌙 🔆 🌞 ⏳ 🛡️ ⚔️ ☠ ☠️ 🛗 🚗 ⭐ ✨ 💫 ❄️ ⚠ ⚠️
29590143	39	<br />
5c8f383f	40	<div class="noprint">
b6d6a802	41	<textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
91bfe157	42	Use CTRL+S to save whole tool including your changes to your computer.<br />
5c8f383f TM	43	<button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button>
5c8f383f TM	44	<button onclick="window.print();return false;">Print</button>
b733060c	45	</div>
5c8f383f TM	46	<br />
5c8f383f TM	47	<br />
5c8f383f TM	48
5c8f383f TM	49	<table id="labeltable">
5bb08111 TM	50
5bb08111 TM	51	<tr>
3432350e	52	<td></td>
0798dac0	53	<td>🔌<br />Obývák</td>
1b9cbe22	54	<td>🔌<br />Pokoje</td>
0798dac0	55	<td>💧<br />Koupelna Pračka</td>
3432350e	56	<td></td>
37483e27 TM	57	<td>💧<br />Kuchyně Linka</td>
37483e27 TM	58	<td>💧<br />Kuchyně Myčka</td>
1b9cbe22	59	<td colspan=3>🔥<br />Kuchyně Sporák</td>
18f916cc	60	<td colspan=3>⚡<br />Svodič přepětí</td>
3432350e TM	61	<td></td>
	62	</tr>
	63
3432350e TM	64	<tr>
	65	<td></td>
	66	<td></td>
0798dac0 TM	67	<td>🔌<br />Vchod</td>
0798dac0 TM	68	<td>🔌<br />Předsíň</td>
b9a4f830	69	<td>🔧<br />Režie</td>
b665bd20 TM	70	<td>💡<br />Světla Kuchyně</td>
	71	<td>💡<br />Světla Koupelna</td>
	72	<td>💡<br />Světla Obývák</td>
	73	<td>💡<br />Světla Pokoje</td>
	74	<td>💡<br />Světla Předsíň</td>
1e31524f	75	<td colspan=3>💡<br />Světla Předsíň<br />Bezdrátové Relé</td>
3432350e TM	76	<td></td>
	77	</tr>
	78
	79	<tr>
c2eb7b9f TM	80	<td><small>Very long and tiny text that is really important to have on your breaker box!</small></td>
	81	<td>Warning!<small><small>Very long and tiny text that is really important to have on your breaker box!</small></small></td>
	82	<td><b>Bold</b> <i>Italic</i> <u>Under</u></td>
3432350e TM	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>
	92	<td></td>
	93	<td></td>
5bb08111 TM	94	</tr>
	95
	96	<tr>
	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	<td></td>
	110	<td></td>
	111	</tr>
	112
	113	<tr>
	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	<td></td>
	127	<td></td>
	128	</tr>
	129
	130	</table>
3432350e	131
5c8f383f	132	<script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.trim();</script>
3432350e TM	133
	134	</body>
	135	</html>