gitproxy/RTLPlayground
1
0
Fork 0
mirror of https://github.com/logicog/RTLPlayground.git synced 2026-08-30 14:52:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add login page and style

Browse Source
This commit is contained in:
logicog
2025-11-29 12:44:23 +01:00
parent 69110531b7
commit a8a770f27f
3 changed files with 76 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/login.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<title>RTL Switch Login</title>
<link rel="stylesheet" href="style.css">
<script>
function removeNote() {
document.getElementById("incorrect").innerHTML = "";
}
window.addEventListener("load", function() {
if (document.referrer.endsWith("login.html"))
document.getElementById("incorrect").innerHTML = "Wrong password!";
});
</script>
</head>
<body class="login_page">
<div class = "center">
<h1> RTL Switch Login</h1>
<form method="post" action="login">
<div class="txt_field">
<input name="pwd" type="password" onclick="removeNote()" required />
<span></span>
<label>Password</label>
</div>
<input type="submit" value="Login"/>
<h3 id="incorrect" style="margin-top: 5em;"></h3>
</form>
</body>
</html>
html/style.css
+42 -4
View File
@@ -1,4 +1,4 @@
h1, h2 { h1, h2, h3 {
color: #226; color: #226;
} }
ul { ul {
@@ -38,13 +38,17 @@ td {
text-align: right; 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;} 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;} 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;} .action:hover { background-color: #226; color: white;}
/* Port selection inputs */
.psel { .psel {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
@@ -80,3 +84,37 @@ object {
.row {display: flex;} .row {display: flex;}
.rcol {flex: 90%;} .rcol {flex: 90%;}
.lcol {flex: 10%;} .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; }
html/update.html
+4 -4
View File
@@ -6,13 +6,13 @@
</head> </head>
<body> <body>
<nav id="sidebar"></nav> <nav id="sidebar"></nav>
<div style="margin-left:16%;padding:1px 16px;height:1000px;"> <div style="margin-left:16%;padding:1px 16px;height:1000px;width:40%;">
<div id="ports"></div>
<h1>Firmware Update</h1> <h1>Firmware Update</h1>
<form enctype="multipart/form-data" action="/upload" method="POST"> <form enctype="multipart/form-data" action="/upload" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" /> <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
Choose a firmware update file to upload: <input name="uploadedfile" type="file" accept=".bin" /><br /> Choose a firmware update file to upload: <br/> <br/>
<input type="submit" value="Upload File" /> <input name="uploadedfile" type="file" accept=".bin" /><br />
<input style="margin-top:3em" type="submit" value="Upload File" />
</form> </form>
<script src="/navigation.js"></script> <script src="/navigation.js"></script>
</body> </body>