diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..8b71a48 --- /dev/null +++ b/Index.html @@ -0,0 +1,113 @@ + + + + SONY RM-D20P Pico Remote + + + + + + + + +
+

SONY RM-D27M Remote

+ LED Test Mode +
+ +
+ + +
+
+ + + Title Editing +
+ + +
+ +
+
+ + + +
+
+ +
+
+ + + + + + + +
+
+
+ + + + + + +
+
+ + + /* + + */ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..0bc6915 --- /dev/null +++ b/style.css @@ -0,0 +1,137 @@ +: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; + } + + .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; + } + + .textinput-wrapper { + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 8px; + margin-bottom: 8px; + color: white; + } + + .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; + }