-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bd110eb
commit badaf8c
Showing
2 changed files
with
108 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| # NodeMCU Controller | ||
| Site containig Code for controlling an ESP 8266 via wifi |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>NodeMCU Controller</title> | ||
| <style> | ||
| body { | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| background-color: #f0f2f5; | ||
| margin: 0; | ||
| } | ||
| .container { | ||
| text-align: center; | ||
| } | ||
| .button-container { | ||
| display: grid; | ||
| grid-template-columns: repeat(4, 1fr); | ||
| gap: 15px; | ||
| max-width: 800px; | ||
| margin: 20px auto; | ||
| } | ||
| .button-container button { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| position: relative; | ||
| background-color: #007bff; | ||
| border: none; | ||
| border-radius: 8px; | ||
| color: white; | ||
| font-size: 16px; | ||
| padding: 0 24px; /* Adjusted padding */ | ||
| cursor: pointer; | ||
| transition: background-color 0.3s, transform 0.3s; | ||
| width: 100%; | ||
| height: 40px; /* Fixed height */ | ||
| overflow: hidden; /* Ensures indicator doesn't overflow */ | ||
| box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */ | ||
| } | ||
| .button-container button:hover { | ||
| background-color: #0056b3; | ||
| transform: scale(1.05); | ||
| } | ||
| .button-container button:focus { | ||
| outline: none; | ||
| box-shadow: 0 0 0 3px rgba(38, 143, 255, 0.5); | ||
| } | ||
| .button-label { | ||
| flex: 1; | ||
| text-align: left; | ||
| padding-left: 10px; /* Adjust based on indicator width */ | ||
| } | ||
| .indicator { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| width: 40px; /* Adjust width as needed */ | ||
| height: 40px; /* Adjust height to match button height */ | ||
| border-top-left-radius: 0; | ||
| border-top-right-radius: 8px; /* Rounded corners on the right */ | ||
| border-bottom-right-radius: 8px; /* Rounded corners on the right */ | ||
| border-bottom-left-radius: 0; | ||
| background-color: red; /* Default color */ | ||
| } | ||
| h1 { | ||
| color: #333; | ||
| margin-bottom: 20px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="container"> | ||
| <h1>NodeMCU Digital Output Controller</h1> | ||
| <div class="button-container"> | ||
| <button data-base="gpio16"><span class="button-label">D0</span><div class="indicator" style="background-color: lime;"></div></button> | ||
| <button data-base="gpio4"><span class="button-label">D1</span><div class="indicator" style="background-color: red;"></div></button> | ||
| <button data-base="gpio14"><span class="button-label">D2</span><div class="indicator" style="background-color: lime;"></div></button> | ||
| <button data-base="gpio0"><span class="button-label">D3</span><div class="indicator" style="background-color: red;"></div></button> | ||
| <button data-base="gpio2"><span class="button-label">D4</span><div class="indicator" style="background-color: lime;"></div></button> | ||
| <button data-base="gpio13"><span class="button-label">D5</span><div class="indicator" style="background-color: red;"></div></button> | ||
| <button data-base="gpio12"><span class="button-label">D6</span><div class="indicator" style="background-color: lime;"></div></button> | ||
| <button data-base="gpio15"><span class="button-label">D7</span><div class="indicator" style="background-color: lime;"></div></button> | ||
| <button data-base="gpio16"><span class="button-label">D8</span><div class="indicator" style="background-color: lime;"></div></button> | ||
| <button data-base="A0"><span class="button-label">A0</span><div class="indicator" style="background-color: red;"></div></button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.querySelectorAll('.button-container button').forEach(button => { | ||
| button.addEventListener('click', () => { | ||
| const indicator = button.querySelector('.indicator'); | ||
| const base = button.getAttribute('data-base'); | ||
| const color = window.getComputedStyle(indicator).backgroundColor; | ||
| const suffix = color === 'rgb(0, 255, 0)' ? '0' : '1'; // lime color is 'rgb(0, 255, 0)' | ||
| window.location.href = `/${base}/${suffix}`; | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |