Update public/index.html

public/index.html

@@ -18,7 +18,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
     <script>
         new WOW().init();
-
         // Function to generate the Reverse Proxy URL
         function getExternalUrl(spaceId) {
             try {
@@ -28,11 +27,9 @@
                 return "";
             }
         }
-
         // Get the Reverse Proxy URL and update the HTML element with id="reverseProxyUrl"
         const spaceId = "ngoctuanai/openaiproxy";
         const reverseProxyUrl = getExternalUrl(spaceId);
-
         // Wait for the page to load before updating the HTML
         window.addEventListener('DOMContentLoaded', function () {
             const typed = new Typed('.typed', {
@@ -50,33 +47,39 @@
         body {
             font-family: 'Lato', sans-serif;
             background-color: #f8f9fa;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
         }
 
         .container {
             max-width: 600px;
             margin: 0 auto;
-            padding: 40px;
-            background-color: #fff;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            border-radius: 5px;
+            padding: 30px;
+            background-color: #ffffff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            text-align: center;
         }
 
         h1 {
-            font-size: 32px;
+            font-size: 2.5em;
             color: #007bff;
-            text-align: center;
-            margin-bottom: 10px;
+            margin-bottom: 20px;
         }
 
         p {
-            font-size: 18px;
+            font-size: 1.2em;
             color: #555;
-            text-align: center;
-            margin-bottom: 20px;
+            margin-bottom: 30px;
         }
 
         .url {
             font-weight: bold;
+            font-size: 1.1em;
+            color: #007bff;
         }
 
         .url a {
@@ -88,6 +91,21 @@
         .url a:hover {
             color: #28a745;
         }
+
+        .my-link {
+            display: inline-block;
+            margin-top: 20px;
+            text-decoration: none;
+            padding: 12px 24px;
+            background-color: #3498db;
+            color: #fff;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+        }
+
+        .my-link:hover {
+            background-color: #007bff;
+        }
     </style>
 </head>
 
@@ -97,9 +115,11 @@
             <span class="typed"></span>
         </h1>
         <p class="animate__animated animate__slideInLeft wow">This is your OpenAI Reverse Proxy URL:</p>
-        <p class="url text-center" id="reverseProxyUrl"></p>
+        <p class="url" id="reverseProxyUrl"></p>
+        
+        <!-- PayPal Subscription Link -->
+        <a class="my-link" href="https://www.paypal.com/webapps/billing/plans/subscribe?plan_id=P-80V40874P0424000SMV23CSA" target="_blank">Buy OPENAI API key</a>
     </div>
-
 </body>
 
 </html>