Update static/static.py

static/static.py

@@ -17,10 +17,10 @@ HTML = """
             padding: 0;
             width: 100%;
             height: 100%;
+            font-family: 'Open Sans', Arial, sans-serif;
         }
         body {
             font-size: 2.2vh;
-            font-family: 'Open Sans', Arial, sans-serif;
             color: white;
             background: url('https://i.postimg.cc/m2ZqvpZj/italian-seamless-free-vector-pattern3.png') center center repeat;
             background-size: cover;
@@ -33,24 +33,27 @@ HTML = """
             padding: 2vh;
             border-radius: 10px;
             width: 90%;
-            max-width: 40vh;
+            max-width: 400px;
             text-align: center;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            overflow: hidden;
         }
         .logo {
-            height: 14vh;
+            height: auto;
             width: 14vh;
             margin: auto;
-            margin-bottom: 3vh;
+            margin-bottom: 2vh;
         }
         .logo img {
             width: 100%;
+            height: auto;
         }
         h1, h2, h3 {
             margin: 0;
             text-shadow: 0 0 1vh rgba(0, 0, 0, 0.15);
         }
         h1 {
-            font-size: 4.5vh;
+            font-size: 4vh;
             font-weight: 700;
         }
         h2 {
@@ -58,7 +61,8 @@ HTML = """
             font-weight: normal;
             font-style: italic;
             opacity: 0.8;
-            margin-bottom: 20px;
+            margin-bottom: 1.5vh;
+            word-wrap: break-word;
         }
         h3 {
             font-size: 2.2vh;
@@ -70,20 +74,20 @@ HTML = """
             justify-content: space-between;
             margin-bottom: 2vh;
             background: rgba(255, 255, 255, 0.1);
-            padding: 2vh;
+            padding: 1vh;
             border-radius: 5px;
-            font-size: 2vh;  /* Increase font size for better mobile click area */
+            font-size: 2vh;
         }
         .provider-group label {
             display: flex;
             align-items: center;
-            font-size: 2.5vh; /* Increased font size for better mobile usability */
-            cursor: pointer;  /* Changes cursor to pointer on labels for better UX */
+            font-size: 2vh;
+            cursor: pointer;
         }
         .provider-group input[type="checkbox"] {
-            margin-right: 2vh; /* Added more margin for better spacing */
-            width: 3vh;        /* Increase checkbox size */
-            height: 3vh;       /* Increase checkbox size */
+            margin-right: 1.5vh;
+            width: 3vh;
+            height: 3vh;
         }
         .contact {
             position: absolute;
@@ -102,16 +106,15 @@ HTML = """
             color: white;
             background: #8A5AAB;
             padding: 1.2vh 3.5vh;
-            margin: auto;
+            margin: 1vh 0;
             text-align: center;
-            font-family: 'Open Sans', Arial, sans-serif;
-            font-size: 2.2vh;
+            font-size: 2vh;
             font-weight: 600;
             cursor: pointer;
             display: block;
             box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.2);
             transition: box-shadow 0.1s ease-in-out;
-            border-radius: 5px; /* Improved touch target */
+            border-radius: 5px;
         }
         button:hover {
             box-shadow: none;
@@ -129,20 +132,10 @@ HTML = """
             white-space: pre-wrap;
         }
         #generateManifestButton {
-            margin-top: 1vh;
             background: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
         }
         #installButton {
-            margin-top: 1vh;
             background: #FF5722;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
         }
         #installButton a {
             color: white;
@@ -152,18 +145,21 @@ HTML = """
             margin-top: 2vh;
             font-size: 1.8vh;
             text-align: left;
+            word-wrap: break-word;
         }
         @media (max-width: 600px) {
-            .provider-group label {
-                font-size: 3vh; /* Increase font size for smaller screens */
+            h1 {
+                font-size: 3.5vh;
+            }
+            h2, .description {
+                font-size: 2vh;
             }
-            .provider-group input[type="checkbox"] {
-                width: 4vh;
-                height: 4vh;
+            .provider-group label {
+                font-size: 2.2vh;
             }
             button {
-                font-size: 2.5vh;
-                padding: 2vh 4vh;
+                font-size: 2vh;
+                padding: 2vh 3vh;
             }
         }
     </style>
@@ -259,4 +255,5 @@ HTML = """
     </script>
 </body>
 </html>
+
 """