Rename Index.html to index.html
This commit is contained in:
StrangeD0s
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>SONY RM-D20P Pico Remote</title>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<style>
|
||||
:root {
|
||||
--main-bg-color: #212121;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
h2 {
|
||||
color: white;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding: 12px 20px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f8f8;
|
||||
font-size: 16px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #454545;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 2px 2px black;
|
||||
height: 42px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
button:active {
|
||||
-webkit-box-shadow: inset 0px 0px 2px black;
|
||||
-moz-box-shadow: inset 0px 0px 2px black;
|
||||
box-shadow: inset 0px 0px 2px black;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.width-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: white;
|
||||
}
|
||||
.text-orange {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.text-with-line {
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.text-with-line:before,
|
||||
.text-with-line:after {
|
||||
content: "";
|
||||
flex: 1 1;
|
||||
border-bottom: 2px solid currentColor;
|
||||
margin: auto 5px;
|
||||
}
|
||||
|
||||
.smallbutton {
|
||||
height: 28px;
|
||||
width: 56px;
|
||||
background-color: #8a8a8a;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.roundbutton {
|
||||
border-radius: 50%;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.upper-buttonbox {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #4d4d4d;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
border: 2px solid grey;
|
||||
border-bottom-color: black;
|
||||
border-right-color: black;
|
||||
}
|
||||
|
||||
.lower-buttonbox {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #333333;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
border: 2px solid grey;
|
||||
border-bottom-color: black;
|
||||
border-right-color: black;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.textinput-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.textinput-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.textinput {
|
||||
/* width: 100%; */
|
||||
padding: 12px 20px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f8f8;
|
||||
font-size: 16px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.headline {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h2 class="headline">SONY RM-D27M Remote</h2>
|
||||
|
||||
<section>
|
||||
<span class="text-white text-with-line">LED Test Mode</span>
|
||||
<div class="upper-buttonbox">
|
||||
<form action="/api/control-led" method="post">
|
||||
<button name="led" type="submit" value="1" class="smallbutton">
|
||||
LED on
|
||||
</button>
|
||||
<button name="led" type="submit" value="0" class="smallbutton">
|
||||
LED off
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<span class="text-orange text-with-line">Title Editing</span>
|
||||
<form action="/api/gettext" method="post" class="form">
|
||||
<textarea name="text_box" rows="4" cols="50"></textarea>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<section>
|
||||
<form action="/api/gettextinput" method="get" class="form">
|
||||
<label for="text_input">Change Title</label>
|
||||
<input type="text" name="text_input" class="textinput" />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<span class="text-orange text-with-line">Deck Control</span>
|
||||
<div class="upper-buttonbox">
|
||||
<form action="/api/control-deck" method="post">
|
||||
<button
|
||||
name="control"
|
||||
type="submit"
|
||||
value="POWER"
|
||||
class="smallbutton"
|
||||
>
|
||||
power
|
||||
</button>
|
||||
<button
|
||||
name="control"
|
||||
type="submit"
|
||||
value="PLAY"
|
||||
class="smallbutton"
|
||||
>
|
||||
play
|
||||
</button>
|
||||
<button
|
||||
name="control"
|
||||
type="submit"
|
||||
value="PAUSE"
|
||||
class="smallbutton"
|
||||
>
|
||||
pause
|
||||
</button>
|
||||
<button
|
||||
name="control"
|
||||
type="submit"
|
||||
value="STOP"
|
||||
class="smallbutton"
|
||||
>
|
||||
stop
|
||||
</button>
|
||||
<button
|
||||
name="control"
|
||||
type="submit"
|
||||
value="PREV"
|
||||
class="smallbutton"
|
||||
>
|
||||
previous
|
||||
</button>
|
||||
<button
|
||||
name="control"
|
||||
type="submit"
|
||||
value="NEXT"
|
||||
class="smallbutton"
|
||||
>
|
||||
next
|
||||
</button>
|
||||
<button class="roundbutton"></button>
|
||||
<button class="roundbutton"></button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<span class="text-orange text-with-line"
|
||||
>20 Bit Keyboard Input Test</span
|
||||
>
|
||||
<div class="lower-buttonbox">
|
||||
<form action="/api/keyboard-input" method="post">
|
||||
<button name="key" type="submit" value="Q">Q</button>
|
||||
<button name="key" type="submit" value="W">W</button>
|
||||
<button name="key" type="submit" value="E">E</button>
|
||||
<button name="key" type="submit" value="R">R</button>
|
||||
<button name="key" type="submit" value="T">T</button>
|
||||
<button name="key" type="submit" value="Z">Z</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>KEY BOARD REMOTE COMMANDER</p>
|
||||
</footer>
|
||||
<!-- <script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
|
||||
crossorigin="anonymous"
|
||||
></script> -->
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user