|
|
@@ -4,14 +4,234 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
- <title>ESP Wake On LAN</title>
|
|
|
+ <title>ESPWoL</title>
|
|
|
<style>
|
|
|
-
|
|
|
+ body{
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wallpaper{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .main{
|
|
|
+ width: 480px;
|
|
|
+ height: calc(90vh - 2em);
|
|
|
+ padding: 1em;
|
|
|
+ -webkit-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.14);
|
|
|
+ -moz-box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.14);
|
|
|
+ box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.14);
|
|
|
+ border-radius: 0.6em;
|
|
|
+ border: 1px solid rgb(172, 172, 172);
|
|
|
+ position: relative;
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .divider{
|
|
|
+ width: calc(100% - 4em);
|
|
|
+ padding-top: 0.4em;
|
|
|
+ margin-bottom: 0.4em;
|
|
|
+ border-bottom: 1px solid rgb(226, 226, 226);
|
|
|
+ padding-right: 2em;
|
|
|
+ padding-left: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ small{
|
|
|
+ color: rgb(59, 59, 59);
|
|
|
+ }
|
|
|
+
|
|
|
+ .codeblock{
|
|
|
+ padding: 0.6em;
|
|
|
+ background-color: #242424;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Properties Table */
|
|
|
+ .table_component {
|
|
|
+ overflow: auto;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_component table {
|
|
|
+ border: 1px solid #dededf;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ table-layout: fixed;
|
|
|
+ border-collapse: collapse;
|
|
|
+ border-spacing: 1px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_component caption {
|
|
|
+ caption-side: top;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_component th {
|
|
|
+ border: 1px solid #dededf;
|
|
|
+ background-color: #eceff1;
|
|
|
+ color: #000000;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_component td {
|
|
|
+ border: 1px solid #dededf;
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #000000;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Front Panel UI emulation */
|
|
|
+ .controlEmu{
|
|
|
+ position: absolute;
|
|
|
+ right: 1.2em;
|
|
|
+ bottom: 1.2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Power Button */
|
|
|
+ .pwrbtn {
|
|
|
+ display:block;
|
|
|
+ height: 80px;
|
|
|
+ width: 80px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid rgba(156, 156, 156, 0.5);
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.38);
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pwrbtn:hover{
|
|
|
+ background-color: #c7c7c7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pwrbtn:active{
|
|
|
+ background-color: #868686;
|
|
|
+ box-shadow: inset 10px 10px 18px 0px rgba(0,0,0,0.38);
|
|
|
+ }
|
|
|
+
|
|
|
+ .pwrbtn svg{
|
|
|
+ margin-top: 1.5em;
|
|
|
+ margin-left: 0.2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Reset Button */
|
|
|
+ .rstbtn {
|
|
|
+ display:block;
|
|
|
+ height: 40px;
|
|
|
+ width: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid rgba(156, 156, 156, 0.5);
|
|
|
+ cursor: pointer;
|
|
|
+ margin-bottom: 1em;
|
|
|
+ box-shadow: 10px 10px 18px 0px rgba(0,0,0,0.38);
|
|
|
+ }
|
|
|
+
|
|
|
+ .rstbtn svg{
|
|
|
+ margin-top: 0.5em;
|
|
|
+ margin-left: 0.2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rstbtn:hover{
|
|
|
+ background-color: #c7c7c7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rstbtn:active{
|
|
|
+ background-color: #868686;
|
|
|
+ box-shadow: inset 10px 10px 18px 0px rgba(0,0,0,0.38);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* LEDs */
|
|
|
+ .leds{
|
|
|
+ margin-bottom: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ledlabel{
|
|
|
+ color: rgb(83, 83, 83);
|
|
|
+ font-size: 0.8em;
|
|
|
+ pointer-events: none;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .led {
|
|
|
+ display:block;
|
|
|
+ height: 10px;
|
|
|
+ width: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #242424;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<h1>HELLO WORLD</h1>
|
|
|
-<p>This is a testing page for the ESPWoL system </p>
|
|
|
+ <div class="wallpaper"></div>
|
|
|
+ <br>
|
|
|
+ <div class="box">
|
|
|
+ <div class="main">
|
|
|
+ <h2>ESPWoL Control Panel</h2>
|
|
|
+ <p>Press a button on the bottom to power up / shutdown / reset your computer wirelessly</p>
|
|
|
+ <div class="table_component" role="region" tabindex="0">
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Properties</th>
|
|
|
+ <th>Status</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <div>WLAN IP<br></div>
|
|
|
+ </td>
|
|
|
+ <td>0.0.0.0</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Power Status<br></td>
|
|
|
+ <td>OFF</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>HDD Status<br></td>
|
|
|
+ <td>IDLE</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <h4>RESTFUL API </h4>
|
|
|
+ <p>You can also access the power status and controls via RESTFUL API requests.</p>
|
|
|
+ <div class="codeblock"><code>
|
|
|
+ GET /api/status <br>
|
|
|
+ POST /api/power <br>
|
|
|
+ POST /api/reset <br>
|
|
|
+ </code></div>
|
|
|
+ <div class="divider"></div>
|
|
|
+ <small>ESPWoL Prototype | CopyRight tobychui 2023 - 2024</small>
|
|
|
|
|
|
+ <div class="controlEmu" align="center">
|
|
|
+ <div class="rstbtn" title="Reset Computer">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-122q-121-15-200.5-105.5T160-440q0-66 26-126.5T260-672l57 57q-38 34-57.5 79T240-440q0 88 56 155.5T440-202v80Zm80 0v-80q87-16 143.5-83T720-440q0-100-70-170t-170-70h-3l44 44-56 56-140-140 140-140 56 56-44 44h3q134 0 227 93t93 227q0 121-79.5 211.5T520-122Z"/></svg>
|
|
|
+ </div>
|
|
|
+ <div class="leds">
|
|
|
+ <div class="ledlabel">HDD <div class="led"></div></div><br>
|
|
|
+ <div class="ledlabel">PWR <div class="led"></div></div>
|
|
|
+ </div>
|
|
|
+ <div class="pwrbtn" title="Power On / Off">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 -960 960 960" width="32"><path d="M440-440v-400h80v400h-80Zm40 320q-74 0-139.5-28.5T226-226q-49-49-77.5-114.5T120-480q0-80 33-151t93-123l56 56q-48 40-75 97t-27 121q0 116 82 198t198 82q117 0 198.5-82T760-480q0-64-26.5-121T658-698l56-56q60 52 93 123t33 151q0 74-28.5 139.5t-77 114.5q-48.5 49-114 77.5T480-120Z"/></svg>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</body>
|
|
|
</html>
|
Toby Chui