<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { position: absolute; opacity: 0; pointer-events: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .onoffswitch-inner:before { content: "ON"; padding-left: 10px; background-color: #58f164; color: #FFFFFF; } .onoffswitch-inner:after { content: "OFF"; padding-right: 10px; background-color: #d3250d; color: #999999; text-align: right; } .onoffswitch-switch { display: block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 56px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } table{ caption-side: top; } th, td{ boder: 1px solid black; padding: 10px; } caption{ background-color: #0AD; font-weight: bold; } </style> <title>RelayCMD</title> </head> <body> <table border="1"> <caption>RELAY COMMAND</caption> <tr> <td><h3>Nom RELAY</h3></td> <td><h3>RESET Tempo10s</h3></td> <td><h3>ON/OFF</h3></td> </tr> <tr> <td>Relay 1 [DESIGN1]</td> <td> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" CHECKED1 onclick="javascript:window.open('http://URL_HTTP:PORT_HTTP/R0','_self');"> <label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </td> <td> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch11" class="onoffswitch-checkbox" id="myonoffswitch11" tabindex="0" CHECKED1 onclick="javascript:window.open('http://URL_HTTP:PORT_HTTP/R0O','_self');"> <label class="onoffswitch-label" for="myonoffswitch11"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </td> </tr> <tr> <td>Relay 2 [DESIGN2]</td> <td> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" tabindex="0" CHECKED2 onclick="javascript:window.open('http://URL_HTTP:PORT_HTTP/R1','_self');"> <label class="onoffswitch-label" for="myonoffswitch2"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </td> <td> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch22" class="onoffswitch-checkbox" id="myonoffswitch22" tabindex="0" CHECKED2 onclick="javascript:window.open('http://URL_HTTP:PORT_HTTP/R1O','_self');"> <label class="onoffswitch-label" for="myonoffswitch22"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </td> </tr> <tr> <td>Relay 3 [DESIGN3]</td> <td> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch3" class="onoffswitch-checkbox" id="myonoffswitch3" tabindex="0" CHECKED3 onclick="javascript:window.open('http://URL_HTTP:PORT_HTTP/R2','_self');"> <label class="onoffswitch-label" for="myonoffswitch3"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </td> <td> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch33" class="onoffswitch-checkbox" id="myonoffswitch33" tabindex="0" CHECKED3 onclick="javascript:window.open('http://URL_HTTP:PORT_HTTP/R2O','_self');"> <label class="onoffswitch-label" for="myonoffswitch33"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </td> </tr> <tr> <td>Relay 4 [DESIGN4]</td> <td> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch4" class="onoffswitch-checkbox" id="myonoffswitch4" tabindex="0" CHECKED4 onclick="javascript:window.open('http://URL_HTTP:PORT_HTTP/R3','_self');"> <label class="onoffswitch-label" for="myonoffswitch4"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </td> <td> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch44" class="onoffswitch-checkbox" id="myonoffswitch44" tabindex="0" CHECKED4 onclick="javascript:window.open('http://URL_HTTP:PORT_HTTP/R3O','_self');"> <label class="onoffswitch-label" for="myonoffswitch44"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> </td> </tr> </body> </html>