diff --git a/html/login.html b/html/login.html new file mode 100644 index 0000000..81a96ea --- /dev/null +++ b/html/login.html @@ -0,0 +1,30 @@ + + + RTL Switch Login + + + + + +
+

RTL Switch Login

+
+
+ + + +
+ +

+
+ + + diff --git a/html/style.css b/html/style.css index f0f1a5a..a4edf4d 100644 --- a/html/style.css +++ b/html/style.css @@ -1,4 +1,4 @@ -h1, h2 { +h1, h2, h3 { color: #226; } ul { @@ -38,13 +38,17 @@ td { text-align: right; } -input[type=submit] { padding: 8px 16px;background-color:#aaf;color:#000; margin-bottom: 2em;} +input[type=submit] { padding: 8px 16px;background-color:#aaf;color:#000; margin-bottom: 2em;border-radius: 15px;width: 100%;} input[type=submit]:hover { background-color: #226; color: white;} -button {padding: 8px; background-color:#99f; color:#000;} +input[type=file] { padding: 8px 16px;background-color:#aaf;color:#000; margin-bottom: 2em;border-radius: 15px;width: 60%;} +input[type=file]:hover { background-color: #226; color: white;} +b +button {padding: 8px; background-color:#99f; color:#000;border-radius: 15px;} button:hover { background-color: #226; color: white;} -.action{padding: 8px 16px;margin-top: 2em;margin-right: 3em; background-color: #aaf;color: #000;} +.action{padding: 8px 16px;margin-top: 2em;margin-right: 3em; background-color: #aaf;color: #000;border-radius: 15px; width: 100%;} .action:hover { background-color: #226; color: white;} +/* Port selection inputs */ .psel { position: absolute; opacity: 0; @@ -80,3 +84,37 @@ object { .row {display: flex;} .rcol {flex: 90%;} .lcol {flex: 10%;} +span::before{ content:''; position: absolute; top: 40px; left:0; width: 100%; height: 2px; background: #aaf;} + +/* Login page */ +.login_page {margin: 0; padding: 0; background: #aaf; height: 100vh; overflow: hidden;} +.center{ + position: absolute; top: 50%; left: 50%; + transform: translate(-50%, -40% ); + width: 500px; height: 400px; + background: white; + border-radius: 2px; +} + +.center h1 { + text-align: center; + border-bottom: 1px solid silver; +} + +.center form { +padding: 0 60px; +box-sizing: border-box; +} +form .txt_field{ +position: relative; +border-bottom: 2px solid #adadad; +margin: 30px 0; +} +.txt_field input { width: 100%; padding: 0 5px; height: 40px; font-size: 16px; border: none; + background: none; + outline: none;} +.txt_field label { position: absolute; top: 50%; left: 5px; color:#adadad; transform: translateY(-50%); + font-size: 16px; pointer-events: none;transition: .5s; } +.txt_field span::before{ content:''; position: absolute; top: 40px; left:0; width: 100%; height: 2px; background: #aaf;} +.txt_field input:focus ~ label, +.txt_field input:valid ~ label { top: -5px; color: #aaf; } diff --git a/html/update.html b/html/update.html index 22ee927..30d4ea0 100644 --- a/html/update.html +++ b/html/update.html @@ -6,13 +6,13 @@ -
-
+

Firmware Update

- Choose a firmware update file to upload:
- + Choose a firmware update file to upload:

+
+