Update

Railuino/data/style.css

@@ -0,0 +1,105 @@
+body {
+    font-family: Arial, sans-serif;
+}
+
+h1 {
+    text-align: center;
+}
+
+.log-window {
+    border: 1px solid #ccc;
+    padding: 10px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    max-height: 150px;
+    overflow-y: scroll;
+    background-color: #f9f9f9;
+    font-family: monospace;
+    font-size: 12px;
+}
+
+.toggle-button {
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin: 10px;
+    cursor: pointer;
+    background-color: green;
+}
+
+.normal-button {
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin: 10px;
+    cursor: pointer;
+    background-color: #a81b9c;
+}
+
+.toggle-button.power-on {
+    background-color: red;
+}
+
+.toggle-button.power-off {
+    background-color: green;
+}
+
+.slider-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+#speedSlider {
+    width: 70%;
+    margin: 0 10px;
+}
+
+.slider-label {
+    font-weight: bold;
+    margin: 0 10px;
+}
+
+.speed-percentage {
+    text-align: center;
+    margin-top: 10px;
+    font-size: 1.2em;
+    margin-bottom: 20px;
+}
+
+.image-buttons {
+    display: flex;
+    justify-content: center;
+}
+
+.address-button {
+    margin: 0 10px;
+    width: 90px;
+    height: 60px;
+    cursor: pointer;
+}
+
+.address-button.selected {
+    border: 1px solid black;
+}
+
+.function-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.function-button {
+    margin: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+    background-color: lightgray;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.function-button.active {
+    background-color: rgb(74, 72, 72);
+    color: white;
+}