Rename to styles.css

src/static/main.css

@@ -1,100 +0,0 @@
-body {
-    font-family: Arial, sans-serif;
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 20px;
-    line-height: 1.6;
-}
-h1 {
-    text-align: center;
-}
-
-form {
-    margin-bottom: 20px;
-}
-label {
-    display: block;
-    margin-bottom: 5px;
-}
-input[type="text"],
-input[type="submit"],
-input[type="range"],
-input[type="color"] {
-    width: 100%;
-
-    margin-bottom: 10px;
-    box-sizing: border-box;
-}
-input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    height: 25px;
-    background: #d3d3d3;
-    outline: none;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-}
-input[type="range"]:hover {
-    opacity: 1;
-}
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 25px;
-    height: 25px;
-    background: #4caf50;
-    cursor: pointer;
-    border-radius: 50%;
-}
-input[type="range"]::-moz-range-thumb {
-    width: 25px;
-    height: 25px;
-    background: #4caf50;
-    cursor: pointer;
-    border-radius: 50%;
-}
-#pattern_buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 20px;
-}
-#pattern_buttons button {
-    flex: 1 0 calc(33.333% - 10px);
-    padding: 10px;
-    background-color: #4caf50;
-    color: white;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-#pattern_buttons button:hover {
-    background-color: #45a049;
-}
-@media (max-width: 480px) {
-    #pattern_buttons button {
-        flex: 1 0 calc(50% - 10px);
-    }
-}
-#connection-status {
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    display: inline-block; /* Or block, depending on where you put it */
-    margin-left: 10px; /* Adjust spacing as needed */
-    vertical-align: middle; /* Align with nearby text */
-    background-color: grey; /* Default: Unknown */
-}
-
-#connection-status.connecting {
-    background-color: yellow;
-}
-
-#connection-status.open {
-    background-color: green;
-}
-
-#connection-status.closing,
-#connection-status.closed {
-    background-color: red;
-}