From ac879e2993d436a3dd9d83f2bf1a13183019b3d6 Mon Sep 17 00:00:00 2001
From: Enki <enki@sovbit.com>
Date: Fri, 10 Jan 2025 07:32:36 +0000
Subject: [PATCH] Chagned some wording on the main and success pages.

---
 app/templates/index.html           |   6 +-
 app/templates/payment_success.html | 119 +++++++++++++++--------------
 2 files changed, 65 insertions(+), 60 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index 6f9e818..e3cc046 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -8,7 +8,7 @@
                 <label class="block text-sm font-medium mb-2">User ID</label>
                 <input type="text" id="user-id" readonly
                     class="w-full px-3 py-2 bg-dark border border-gray-600 rounded-md text-white focus:outline-none focus:border-blue-500 font-mono text-sm">
-                <p class="mt-1 text-sm text-gray-400">Only used for subscription management</p>
+                <p class="mt-1 text-sm text-gray-400">Only used for subscription management. Save this to be able to login.</p>
             </div>
 
             <div>
@@ -60,8 +60,8 @@
 
                 <div id="keys-display" class="hidden space-y-3">
                     <div class="bg-yellow-900 bg-opacity-20 p-4 rounded-md text-yellow-500 text-sm">
-                        Your private keys are only generated within the browser!
-                        Save these keys securely - you'll need them to connect to the VPN.
+                        Your private keys are only generated within the browser! We do NOT save your keys.
+                        Save these keys now. They will not be shown on the next page. 
                     </div>
 
                     <div class="space-y-2">
diff --git a/app/templates/payment_success.html b/app/templates/payment_success.html
index ffd373e..73443f4 100644
--- a/app/templates/payment_success.html
+++ b/app/templates/payment_success.html
@@ -1,67 +1,72 @@
 {% extends "base.html" %}
 {% block content %}
-<div class="min-h-screen bg-dark py-8 px-4">
-    <div class="max-w-2xl mx-auto bg-dark-lighter rounded-lg shadow-lg p-6">
-        <h1 class="text-2xl font-bold mb-4 text-center">Payment Successful!</h1>
+<div class="min-h-screen bg-dark flex flex-col">
+    <div class="flex-grow px-4">
+        <div class="mb-8 flex justify-center pt-8">
+            <img src="/static/images/logo.svg" alt="VPN Service Logo" class="h-16">
+        </div>
         
-        <div class="mb-8">
-            <p class="text-gray-300 text-center mb-4">
-                Your VPN subscription is now active. Please follow the instructions below to set up your VPN connection.
-            </p>
-        </div>
-
-        <div class="space-y-6">
-            <!-- WireGuard Configuration Section -->
-            <div id="config-section" class="hidden">
-                <h2 class="text-xl font-semibold mb-2">Your WireGuard Configuration</h2>
-                <pre id="wireguard-config" class="bg-dark p-4 rounded-md font-mono text-sm overflow-x-auto"></pre>
-                <button 
-                    id="copy-config" 
-                    class="mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors"
-                >
-                    Copy Configuration
-                </button>
-                <button 
-                    id="download-config" 
-                    class="mt-2 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors"
-                >
-                    Download Configuration
-                </button>
+        <div class="max-w-2xl mx-auto bg-dark-lighter rounded-lg shadow-lg p-6">
+            <h1 class="text-2xl font-bold mb-4 text-center">Payment Successful!</h1>
+            
+            <div class="mb-8">
+                <p class="text-gray-300 text-center mb-4">
+                    Your VPN subscription will be active shortly. Please follow the instructions below to set up your VPN connection. If something Goes wrong please reach out. 
+                </p>
             </div>
-
-            <!-- Installation Instructions -->
-            <div class="space-y-4">
-                <h2 class="text-xl font-semibold">Installation Instructions</h2>
-                <ol class="list-decimal list-inside space-y-2 text-gray-300">
-                    <li>Download WireGuard for your platform:
-                        <div class="ml-6 mt-2 space-y-2">
-                            <a href="https://www.wireguard.com/install/" 
-                               target="_blank"
-                               class="text-blue-400 hover:text-blue-300 block">
-                               Official WireGuard Downloads
-                            </a>
-                        </div>
-                    </li>
-                    <li>Create a new tunnel in WireGuard</li>
-                    <li>Copy the configuration above and paste it into the new tunnel</li>
-                    <li>Activate the tunnel to connect</li>
-                </ol>
+ 
+            <div class="space-y-6">
+                <!-- WireGuard Configuration Section -->
+                <div id="config-section" class="hidden">
+                    <h2 class="text-xl font-semibold mb-2">Your WireGuard Configuration</h2>
+                    <pre id="wireguard-config" class="bg-dark p-4 rounded-md font-mono text-sm overflow-x-auto"></pre>
+                    <button id="copy-config" class="mt-2 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
+                        Copy Configuration
+                    </button>
+                    <button id="download-config" class="mt-2 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors">
+                        Download Configuration
+                    </button>
+                </div>
+ 
+                <!-- Installation Instructions -->
+                <div class="space-y-4">
+                    <h2 class="text-xl font-semibold">Installation Instructions</h2>
+                    <ol class="list-decimal list-inside space-y-2 text-gray-300">
+                        <li>Download WireGuard for your platform:
+                            <div class="ml-6 mt-2 space-y-2">
+                                <a href="https://www.wireguard.com/install/" target="_blank" class="text-blue-400 hover:text-blue-300 block">
+                                   Official WireGuard Downloads
+                                </a>
+                            </div>
+                        </li>
+                        <li>Create a new tunnel in WireGuard</li>
+                        <li>Paste your keys in.</li>
+                        <li>Activate the tunnel to connect</li>
+                    </ol>
+                </div>
+ 
+                <div class="space-y-2 text-sm text-gray-400">
+                    <p>• Thank you for using our service.</p>
+                    <p>• Please reach out if there are any issues. The contact form is at the bottom of the page.</p>
+                    <p>• For extra security, clear your browser data.</p>
+                </div>
+ 
+                <div class="mt-8 text-center">
+                    <a href="/" class="text-blue-400 hover:text-blue-300">Return to Home</a>
+                </div>
             </div>
-
-            <div class="space-y-2 text-sm text-gray-400">
-                <p>• Save your configuration securely - you'll need it to reconnect</p>
-                <p>• Your private key is stored in your browser's local storage</p>
-                <p>• For security, clear your browser data after saving the configuration</p>
-            </div>
-        </div>
-
-        <div class="mt-8 text-center">
-            <a href="/" class="text-blue-400 hover:text-blue-300">
-                Return to Home
-            </a>
         </div>
     </div>
-</div>
+ 
+    <footer class="bg-dark-lighter py-4 mt-8">
+        <div class="container mx-auto text-center">
+            <p class="text-gray-400">
+                Need help? Contact us at <a href="mailto:support@vpnservice.com" class="text-blue-400 hover:text-blue-300">support@vpnservice.com</a>
+            </p>
+        </div>
+    </footer>
+ </div>
+
 
 <script type="module">
     import { WireGuard } from '/static/js/utils/wireguard.js';