gtrabanco · October 3, 2020 20:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Generador de claves Zigbee para Home Assistant</title>
        <style>
            body {
                font-family: helvetica, arial, sans-serif;
            }

            div {
                border: 2px solid lightgreen;
            }

            span {
                border: 2px solid lightgreen;
            }

            .fixed-width {
                max-width: 200px;
            }

            .centered {
            margin: 0 auto;
            }

            .other-shit {
                border-width: 10px;
                padding: 10px;
                margin: 20px auto;
            }

            .use-border-box div {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .use-border-box {
                border: none;
            }

            pre {
                background-color: lightgrey;
                padding: 10px;
            }

            .static {
                position: static;
            }

            .relative {
                position: relative;
            }

            .down-and-left {
                left: 30px;
                top: 20px;
            }

            .fixed {
                position: fixed;
                bottom: 0;
                right: 0;
                width: 50px;
            }

            .absolute {
                left: 0;
                top: 0;
                width: 100px;
                border-color: red;
            }

            img.float-me-right {
                float: right;
                margin: 0 0 1em 1em;
            }

            .floating-box {
                float: left;
                width: 200px;
                height: 100px;
                margin: 1em;
            }

            .after-floating-box {
                clear: left;
            }

            .clearfix {
                overflow: auto;
            }

            .box-inline-block {
                display: inline-block;
                width: 100px;
                height: 100px;
                margin: 1em;
            }

            .three-column {
                padding: 1em;
                -moz-column-count: 3;
                -moz-column-gap: 1em;
                -webkit-column-count: 3;
                -webkit-column-gap: 1em;
                column-count: 3;
                column-gap: 1em;
            }
        </style>

        <script>
        
        var keys = []

        function generarLlaveZigbee() {
            keys = []
            let idtag=document.getElementById('keys')
            let secure=document.getElementById('secure').checked

            //idtag.innerHTML ="  network_key:\n";

            for (i = 0; i < 16; i++) {
                keys.push(enteroAleatorio(0, 255))
                //idtag.innerHTML +="\n    - " + llave;
            }

            ver_keys()
        }

        function ver_keys() {
            let secure=document.getElementById('secure')
            let idtag=document.getElementById('keys')

            console.log(secure)

            if (secure.checked) {
                idtag.innerHTML = 'zigbee2mqtt_keys: ['
                idtag.innerHTML += keys.join(', ') + ']'
            } else {
                idtag.innerHTML = "  network_key:\n    - " + keys.join("\n    - ")
            }

            copiar_codigos()
        }

        function enteroAleatorio(minimo, maximo) {
            return Math.floor(Math.random() * (maximo - minimo + 1)) + minimo
        }

        function copiar_codigos() {
            const el = document.createElement('textarea')
            el.value = document.getElementById('keys').innerHTML
            el.setAttribute('readonly','')
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
        }

        window.addEventListener("load", function() {
            let secure=document.getElementById('secure')
            let btnGen=document.getElementById('enviar')
            let btnCopy=document.getElementById('copy')
            btnGen.addEventListener('click', () => generarLlaveZigbee())
            btnCopy.addEventListener('click', () => copiar_codigos())
            secure.addEventListener('click', () => ver_keys())
            generarLlaveZigbee()
        })
        </script>

    </head>

    <body>
        <h1>Generador de claves Zigbee para Home Assistant</h1>

        <p>Esta unidad genera de forma automática y al azar la clave de red para Zigbee con el formato necesario para Home Assistant.
        Esta clave es sumamente importante y no cambiarla compromete la seguridad de tu sistema.</p>

        <i>LICENCIA: Atribución, no comercial, compartir igual 4.0 Internacional</i>

        <p>Esta página es una copia, con pequeñas mejoras (por <a href="https://github.com/gtrabanco" target="_blank">Gabriel Trabanco</a>) de: <a href="https://jsfiddle.net/8abvx6pc/">https://jsfiddle.net/8abvx6pc/</a>. <a href="https://gist.github.com/gtrabanco/c021a2b5ff69c196b6f55b4b61fc6e07">Código modificado</a>.</p>
        <p>Este script fue creado por <a href="https://www.youtube.com/channel/UC61-AfFnspjffs71zmmn2Ig">Domótica fácil con Jota</a>. Siguelé!</p>

        <table>
            <tr>
                <td width="30%"><strong>Categoría</strong></td>
                <td>Utilidades</td>
            </tr>
            <tr>
                <td width="30%"><strong>Autor</strong></td>
                <td>Jota de Domótica Fácil con Jota (twitter <a href="https://twitter.com/DomoJota"> @DomoJota</a>)</td>
            </tr>
            <tr>
                <td width="30%"><strong>Copyright</strong></td>
                <td>2020</td>
            </tr>
            <tr>
                <td width="30%"><strong>Licencia</strong></td>
                <td>http://creativecommons.org/licenses/by-nc-sa/4.0/</td>
            </tr>
            <tr>
                <td width="30%"><strong>Versión</strong></td>
                <td>1.0</td>
            </tr>
            <tr>
                <td width="30%"><strong>Enlace</strong></td>
                <td><a href="https://www.youtube.com/c/domoticafacilconjota">https://www.youtube.com/c/domoticafacilconjota</a></td>
            </tr>
        </table>


        <h1>Haz clic en el botón "Generar clave"</h1>
        <label><input type="checkbox" id="secure" value="secure">Generar llaves para el archivo secrets.yaml</label>
        <input type="button" value="Generar & copiar claves" id="enviar" />

        <pre id="keys"></pre>
        <input type="button" id="copy" value="Copiar códigos">

        <p><a href="https://gist.github.com/gtrabanco/c021a2b5ff69c196b6f55b4b61fc6e07">Ver código fuente de esta página</a></p>
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<title>Generador de claves Zigbee para Home Assistant</title>
	<style>
	body {
	font-family: helvetica, arial, sans-serif;
	}

	div {
	border: 2px solid lightgreen;
	}

	span {
	border: 2px solid lightgreen;
	}

	.fixed-width {
	max-width: 200px;
	}

	.centered {
	margin: 0 auto;
	}

	.other-shit {
	border-width: 10px;
	padding: 10px;
	margin: 20px auto;
	}

	.use-border-box div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	.use-border-box {
	border: none;
	}

	pre {
	background-color: lightgrey;
	padding: 10px;
	}

	.static {
	position: static;
	}

	.relative {
	position: relative;
	}

	.down-and-left {
	left: 30px;
	top: 20px;
	}

	.fixed {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 50px;
	}

	.absolute {
	left: 0;
	top: 0;
	width: 100px;
	border-color: red;
	}

	img.float-me-right {
	float: right;
	margin: 0 0 1em 1em;
	}

	.floating-box {
	float: left;
	width: 200px;
	height: 100px;
	margin: 1em;
	}

	.after-floating-box {
	clear: left;
	}

	.clearfix {
	overflow: auto;
	}

	.box-inline-block {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 1em;
	}

	.three-column {
	padding: 1em;
	-moz-column-count: 3;
	-moz-column-gap: 1em;
	-webkit-column-count: 3;
	-webkit-column-gap: 1em;
	column-count: 3;
	column-gap: 1em;
	}
	</style>

	<script>

	var keys = []

	function generarLlaveZigbee() {
	keys = []
	let idtag=document.getElementById('keys')
	let secure=document.getElementById('secure').checked

	//idtag.innerHTML =" network_key:\n";

	for (i = 0; i < 16; i++) {
	keys.push(enteroAleatorio(0, 255))
	//idtag.innerHTML +="\n - " + llave;
	}

	ver_keys()
	}

	function ver_keys() {
	let secure=document.getElementById('secure')
	let idtag=document.getElementById('keys')

	console.log(secure)

	if (secure.checked) {
	idtag.innerHTML = 'zigbee2mqtt_keys: ['
	idtag.innerHTML += keys.join(', ') + ']'
	} else {
	idtag.innerHTML = " network_key:\n - " + keys.join("\n - ")
	}

	copiar_codigos()
	}

	function enteroAleatorio(minimo, maximo) {
	return Math.floor(Math.random() * (maximo - minimo + 1)) + minimo
	}

	function copiar_codigos() {
	const el = document.createElement('textarea')
	el.value = document.getElementById('keys').innerHTML
	el.setAttribute('readonly','')
	document.body.appendChild(el);
	el.select();
	document.execCommand('copy');
	document.body.removeChild(el);
	}

	window.addEventListener("load", function() {
	let secure=document.getElementById('secure')
	let btnGen=document.getElementById('enviar')
	let btnCopy=document.getElementById('copy')
	btnGen.addEventListener('click', () => generarLlaveZigbee())
	btnCopy.addEventListener('click', () => copiar_codigos())
	secure.addEventListener('click', () => ver_keys())
	generarLlaveZigbee()
	})
	</script>

	</head>

	<body>
	<h1>Generador de claves Zigbee para Home Assistant</h1>

	<p>Esta unidad genera de forma automática y al azar la clave de red para Zigbee con el formato necesario para Home Assistant.
	Esta clave es sumamente importante y no cambiarla compromete la seguridad de tu sistema.</p>

	<i>LICENCIA: Atribución, no comercial, compartir igual 4.0 Internacional</i>

	<p>Esta página es una copia, con pequeñas mejoras (por <a href="https://github.com/gtrabanco" target="_blank">Gabriel Trabanco</a>) de: <a href="https://jsfiddle.net/8abvx6pc/">https://jsfiddle.net/8abvx6pc/</a>. <a href="https://gist.github.com/gtrabanco/c021a2b5ff69c196b6f55b4b61fc6e07">Código modificado</a>.</p>
	<p>Este script fue creado por <a href="https://www.youtube.com/channel/UC61-AfFnspjffs71zmmn2Ig">Domótica fácil con Jota</a>. Siguelé!</p>

	<table>
	<tr>
	<td width="30%"><strong>Categoría</strong></td>
	<td>Utilidades</td>
	</tr>
	<tr>
	<td width="30%"><strong>Autor</strong></td>
	<td>Jota de Domótica Fácil con Jota (twitter <a href="https://twitter.com/DomoJota"> @DomoJota</a>)</td>
	</tr>
	<tr>
	<td width="30%"><strong>Copyright</strong></td>
	<td>2020</td>
	</tr>
	<tr>
	<td width="30%"><strong>Licencia</strong></td>
	<td>http://creativecommons.org/licenses/by-nc-sa/4.0/</td>
	</tr>
	<tr>
	<td width="30%"><strong>Versión</strong></td>
	<td>1.0</td>
	</tr>
	<tr>
	<td width="30%"><strong>Enlace</strong></td>
	<td><a href="https://www.youtube.com/c/domoticafacilconjota">https://www.youtube.com/c/domoticafacilconjota</a></td>
	</tr>
	</table>


	<h1>Haz clic en el botón "Generar clave"</h1>
	<label><input type="checkbox" id="secure" value="secure">Generar llaves para el archivo secrets.yaml</label>
	<input type="button" value="Generar & copiar claves" id="enviar" />

	<pre id="keys"></pre>
	<input type="button" id="copy" value="Copiar códigos">

	<p><a href="https://gist.github.com/gtrabanco/c021a2b5ff69c196b6f55b4b61fc6e07">Ver código fuente de esta página</a></p>
	</body>
	</html>