Update app.py

app.py

@@ -281,67 +281,163 @@ class Stage(Enum):
     FULL = "full"
 
 css="""#disp_image {
-    text-align: center; /* Horizontally center the content */
+    text-align: center;
 }
-#share-btn-container {padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; max-width: 13rem; margin-left: auto;}
-div#share-btn-container > div {flex-direction: row;background: black;align-items: center}
-#share-btn-container:hover {background-color: #060606}
-#share-btn {all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;right:0;}
-#share-btn * {all: unset}
-#share-btn-container div:nth-child(-n+2){width: auto !important;min-height: 0px !important;}
-#share-btn-container .wrap {display: none !important}
-#share-btn-container.hidden {display: none!important}
+
+#share-btn-container {
+    padding-left: 0.5rem !important;
+    padding-right: 0.5rem !important;
+    background-color: #000000;
+    justify-content: center;
+    align-items: center;
+    border-radius: 9999px !important;
+    max-width: 13rem;
+    margin-left: auto;
+}
+
+#share-btn-container > div {
+    flex-direction: row;
+    background: black;
+    align-items: center;
+}
+
+#share-btn-container:hover {
+    background-color: #060606;
+}
+
+#share-btn {
+    all: initial;
+    color: #ffffff;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', sans-serif;
+    margin-left: 0.5rem !important;
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+    right: 0;
+}
+
+#share-btn * {
+    all: unset;
+}
+
+#share-btn-container div:nth-child(-n+2) {
+    width: auto !important;
+    min-height: 0px !important;
+}
+
+#share-btn-container .wrap {
+    display: none !important;
+}
+
+#share-btn-container.hidden {
+    display: none !important;
+}
+
 #duplicate-button {
     margin-left: auto;
     color: #fff;
     background: #1565c0;
-  }
-  body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f9;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            color: #333;
-        }
-        .custom-button {
-            background: linear-gradient(271.15deg, #00C7E2 0.27%, #00CC6A 48.52%, #70FF00 102.07%);
-            font-size: 30px; /* Adjust this value to make the text size larger or smaller */
-            color: white; /* Optional: Change text color for better visibility */
-            padding: 10px 20px; /* Optional: Adjust padding for better button size */
-            border: none; /* Optional: Remove border */
-            border-radius: 5px; /* Optional: Rounded corners */
-            cursor: pointer; /* Change cursor to pointer */
-        }
-        .custom-title {
-            font-size: 36px; /* Adjust the font size as needed */
-            background: linear-gradient(271.15deg, #00C7E2 0.27%, #12C06D 102.07%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-weight: bold; /* Optional: Make the text bold */
-            text-align: center; /* Optional: Center the text */
-            margin-bottom: 20px; /* Optional: Adjust margin */
-        }
-        .custom-button:hover {
-            opacity: 0.8; /* Optional: Add hover effect */
-        }
-        h1 {
-            color: #222222;
-        }
-        a {
-            color: #4a90e2;
-            text-decoration: none;
-            font-weight: bold;
-        }
-        a:hover {
-            text-decoration: underline;
-        }
-        .emoji {
-            font-size: 1.5em;
-        }
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f9;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    color: #333;
+}
+
+.custom-button {
+    background: linear-gradient(271.15deg, #00C7E2 0.27%, #00CC6A 48.52%, #70FF00 102.07%);
+    font-size: 30px;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+}
+
+.custom-button:hover {
+    opacity: 0.8;
+}
+
+.custom-title {
+    font-size: 36px;
+    background: linear-gradient(271.15deg, #00C7E2 0.27%, #12C06D 102.07%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+h1 {
+    color: #222222;
+}
+
+a {
+    color: #4a90e2;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.emoji {
+    font-size: 1.5em;
+}
+
+@media (max-width: 768px) {
+    .custom-button {
+        font-size: 20px;
+        padding: 8px 16px;
+    }
+
+    .custom-title {
+        font-size: 28px;
+    }
+
+    #disp_image, .container {
+        padding: 0 1rem;
+    }
+
+    h1 {
+        font-size: 24px;
+    }
+}
+
+@media (max-width: 480px) {
+    .custom-button {
+        font-size: 16px;
+        padding: 6px 12px;
+    }
+
+    .custom-title {
+        font-size: 22px;
+    }
+
+    .container {
+        padding: 0 0.5rem;
+    }
+
+    h1 {
+        font-size: 20px;
+    }
+
+    #share-btn-container {
+        max-width: 100%;
+        padding: 0.5rem;
+    }
+}
         """
 block = gr.Blocks(css=css, title="## F.ai Fuzer").queue()
 with block: