Chagned some wording on the main and success pages.
This commit is contained in:
parent
9941aa93f6
commit
ac879e2993
@ -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">
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user