From a5722b143167ebd113af1c1168a4c3522c56e84d Mon Sep 17 00:00:00 2001 From: Tom Date: Fri, 1 Nov 2024 10:40:06 +0100 Subject: [PATCH] html and css style finalized --- index.html | 56 +++++++++++++++++ script.js | 0 style.css | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 233 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..4fde7ae --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + + Arduino Remote Web + + + + +
+
Power
+
Exit
+
Guide
+
Mute
+
+ +
+
+
Volume up
+
Volume down
+
+
+
Channel up
+
Channel down
+
+
+ +
+
+
1
+
2
+
3
+
+
+
4
+
5
+
6
+
+
+
7
+
8
+
9
+
+
+
0
+
+
+ +
+ +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..3ef14c4 --- /dev/null +++ b/style.css @@ -0,0 +1,177 @@ +/* Base styles and color scheme */ +:root { + --bg-color: #2c3e50; + --btn-color: #ecf0f1; + --btn-hover-color: #bdc3c7; + --text-color: #34495e; + --highlight-color: #3498db; + --border-radius: 10px; + --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); +} + +/* Body and basic styling */ +body { + background-color: var(--bg-color); + font-family: Arial, sans-serif; + color: var(--btn-color); + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.flex-container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 20px; +} + +.flex-container-column { + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; +} + +/* Button and div styling */ +.flex-container>div, +.flex-container-column>div { + background-color: var(--btn-color); + color: var(--text-color); + border-radius: var(--border-radius); + padding: 20px; + font-size: 24px; + font-weight: bold; + text-align: center; + box-shadow: var(--box-shadow); + transition: transform 0.2s ease, background-color 0.3s ease; + cursor: pointer; + flex: 1; + /* Allow buttons to grow and fill available space */ +} + +/* Hover and active effects */ +.flex-container>div:hover, +.flex-container-column>div:hover { + background-color: var(--btn-hover-color); + transform: scale(1.05); +} + +.flex-container>div:active, +.flex-container-column>div:active { + transform: scale(0.95); + background-color: var(--highlight-color); + color: #fff; +} + +/* Input field styling */ +#channel-input input { + width: 100%; + max-width: 300px; + height: 50px; + font-size: 18px; + text-align: center; + border: none; + border-radius: var(--border-radius); + padding: 10px; + box-shadow: var(--box-shadow); + transition: box-shadow 0.3s ease; +} + +#channel-input input:focus { + outline: none; + box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.4); +} + +/* Cross-browser compatibility for hiding spinner arrows */ +#channel-input input[type="number"] { + appearance: textfield; + /* Standard property */ + -webkit-appearance: none; + /* WebKit browsers (Chrome, Safari, Edge) */ + -moz-appearance: textfield; + /* Firefox */ +} + +/* Explicitly remove outer and inner spin buttons in WebKit browsers */ +#channel-input input[type="number"]::-webkit-outer-spin-button, +#channel-input input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Numpad specific styles */ +#numpad { + display: flex; + flex-direction: column; + gap: 5px; + /* Reduced gap between rows in the numpad */ +} + +#numpad div { + display: flex; + /* Use flex for rows */ + justify-content: center; + /* Center buttons horizontally */ + gap: 10px; + /* Space between buttons */ + flex-wrap: nowrap; + /* Prevent wrapping to keep buttons in one row */ +} + +/* Center the number-0 button */ +#number-0 { + flex: 1; + /* Allow the button to grow and take full width */ + display: flex; + justify-content: center; + /* Center horizontally */ + align-items: center; + /* Center vertically */ + height: 60px; + /* Increase height for better tap target */ +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .flex-container { + flex-direction: column; + } + + /* Ensure numpad rows remain horizontal on smaller screens */ + #numpad div { + flex-direction: row; + /* Set row layout for numpad buttons */ + justify-content: space-between; + /* Distribute space between buttons */ + } +} + +@media (max-width: 480px) { + + .flex-container>div, + .flex-container-column>div { + font-size: 20px; + padding: 15px; + } + + #numpad div { + font-size: 20px; + padding: 10px; + } + + #number-0 { + height: 60px; + /* Keep a consistent height for the number 0 button */ + } + + #channel-input input { + height: 40px; + font-size: 16px; + } +} \ No newline at end of file