-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
275 lines (229 loc) · 13.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FundedNext Payment Partners</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
<!-- DaisyUI CDN (after Tailwind CSS) -->
<script src="https://cdn.jsdelivr.net/npm/daisyui"></script>
<!-- Include jsPDF library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<!-- Link to your custom stylesheet -->
<link rel="stylesheet" href="style.css">
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js"></script>
<script type="module">
import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
// Your web app's Firebase configuration (you should use the same config as in your login page)
const firebaseConfig = {
apiKey: "AIzaSyD9qHE9rfot3_nJD3xvysnenkjaV7MkOoA",
authDomain: "fnpaymentportal.firebaseapp.com",
projectId: "fnpaymentportal",
storageBucket: "fnpaymentportal.appspot.com",
messagingSenderId: "472254280172",
appId: "1:472254280172:web:797757ac5c172a221450c9",
measurementId: "G-LLZWTN117B"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
onAuthStateChanged(auth, (user) => {
if (!user) {
// User is not signed in, redirect to login page
window.location.href = '/FN-Payment-Partner/login.html'; // Adjust the path as needed
} else {
// User is signed in, display the page or do any authenticated user stuff
console.log('User is signed in');
}
});
</script>
<script src="script.js"></script>
</head>
<body class="bg-gray-900 font-sans leading-normal tracking-normal text-white">
<div class="content-wrapper">
<header class="relative text-center p-20 mb-4 shadow flex flex-col justify-center items-center" style="background: rgba(0, 0, 0, 0.5); min-height: 280px;">
<!-- Video Background -->
<video autoplay loop muted playsinline class="header-video">
<source src="./icons/hv2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Existing Header Content Here -->
<div class="flex justify-center items-center w-full">
<img src="https://fundednext.fra1.digitaloceanspaces.com/competion-funded-next-logo.svg" alt="Logo" class="h-16 w-auto">
<h1 id="pageTitle" class="text-5xl font-bold ml-4 mb-2.5" style="background: linear-gradient(to right, rgb(247, 172, 247), rgb(180, 180, 255), white); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
Payment Partner Portal
</h1>
</div>
<!-- Social Buttons -->
<div class="social-buttons flex justify-center mt-4">
<a href="https://www.facebook.com/fundednext" target="_blank" class="mx-2 bg-white text-white font-bold py-2 px-4 rounded-full shadow-lg hover:bg-gray-400 transition duration-300 ease-in-out" style="box-shadow: 0 0 5px #4267B2;">
<img src="./icons/fb.png" alt="Facebook" style="height: 24px; width: 24px;">
</a>
<a href="https://x.com/FundedNext" target="_blank" class="mx-2 bg-white text-white font-bold py-2 px-4 rounded-full shadow-lg hover:bg-gray-400 transition duration-300 ease-in-out" style="box-shadow: 0 0 5px #1DA1F2;">
<img src="./icons/x.png" alt="X" style="height: 24px; width: 24px;">
</a>
<a href="https://discord.gg/fundednext-945622549373526056" target="_blank" class="mx-2 bg-white text-white font-bold py-2 px-4 rounded-full shadow-lg hover:bg-gray-400 transition duration-300 ease-in-out" style="box-shadow: 0 0 5px #7289DA;">
<img src="./icons/discord.png" alt="Discord" style="height: 24px; width: 24px;">
</a>
<!-- Telegram Button -->
<a href="https://t.me/fnpartnerbot" target="_blank" class="mx-2 bg-white text-white font-bold py-2 px-4 rounded-full shadow-lg hover:bg-gray-400 transition duration-300 ease-in-out" style="box-shadow: 0 0 5px #0088cc;">
<img src="./icons/tg.png" alt="Telegram" style="height: 24px; width: 24px;">
</a>
</div>
</header>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
{
"symbols": [
{"proName":"FX_IDC:EURUSD", "title": "EUR/USD"},
{"proName":"FX_IDC:USDJPY", "title": "USD/JPY"},
{"proName":"FX_IDC:GBPUSD", "title": "GBP/USD"},
{"proName":"FX_IDC:AUDUSD", "title": "AUD/USD"},
{"proName":"FX_IDC:USDCAD", "title": "USD/CAD"},
{"proName":"FX_IDC:USDCHF", "title": "USD/CHF"},
{"proName":"FX_IDC:NZDUSD", "title": "NZD/USD"},
{"proName":"FX_IDC:EURGBP", "title": "EUR/GBP"},
{"proName":"FX_IDC:EURJPY", "title": "EUR/JPY"},
{"proName":"FX_IDC:GBPJPY", "title": "GBP/JPY"},
// Add more pairs as needed
],
"colorTheme": "dark",
"isTransparent": true,
"displayMode": "adaptive",
"locale": "en"
}
</script>
</div>
<!-- TradingView Widget END -->
<body class="bg-gray-900 font-sans leading-normal tracking-normal text-white">
<div class="mx-auto mt-8">
<div class="max-w-5xl mx-auto bg-white shadow-lg rounded-lg p-4 text-black">
<!-- Text Container -->
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Payment Addresses</h2>
<h5 class="text-sm text-gray-500">Click to Copy Address</h5>
</div>
<div class="flex flex-wrap justify-between">
<!-- ETH -->
<button class="copy-btn flex items-center bg-purple-400 hover:bg-purple-800 text-white font-bold py-2 px-4 rounded m-2" data-address="0x4Ada8a45198E4D3160e123E786419bF53B9E2AE3">
<img src="./icons/ethereum.png" alt="ETH" class="h-6 w-6 mr-2"> ETH
</button>
<!-- BTC -->
<button class="copy-btn flex items-center bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded m-2" data-address="bc1qkvtpqxaksvne0x0lxctgeg0ytl5ag8twq2y3z6">
<img src="./icons/bitcoin.png" alt="BTC" class="h-6 w-6 mr-2"> BTC
</button>
<!-- LTC -->
<button class="copy-btn flex items-center bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded m-2" data-address="ltc1qscn6unrtzpmqpnn44ajnpwwvut8dqv3s2hunr6">
<img src="./icons/coin.png" alt="LTC" class="h-6 w-6 mr-2"> LTC
</button>
<!-- Doge -->
<button class="copy-btn flex items-center bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded m-2" data-address="DA6eGSbQpFweaqQtT647ZJ459Sv9mLBkvZ">
<img src="./icons/dogecoin.png" alt="Doge" class="h-6 w-6 mr-2"> Doge
</button>
<!-- Solana -->
<button class="copy-btn flex items-center bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded m-2" data-address="ECscLcxVvYWFJqboknDE4Kqjep7U5UbX3CvEahytNXYJ">
<img src="./icons/solana.png" alt="Solana" class="h-6 w-6 mr-2"> Solana
</button>
<!-- USDT(TRC20) -->
<button class="copy-btn flex items-center bg-green-800 hover:bg-green-600 text-white font-bold py-2 px-4 rounded m-2" data-address="TMHgRbmQBRjR4dU1ywqGXFsmbdGgMTWm3F">
<img src="./icons/money.png" alt="USDT" class="h-6 w-6 mr-2"> USDT(TRC20)
</button>
<!-- USDT(ERC20) -->
<button class="copy-btn flex items-center bg-green-800 hover:bg-green-600 text-white font-bold py-2 px-4 rounded m-2" data-address="0x4Ada8a45198E4D3160e123E786419bF53B9E2AE3">
<img src="./icons/money.png" alt="USDT" class="h-6 w-6 mr-2"> USDT(ERC20)
</button>
<!-- USDC(TRC20) -->
<button class="copy-btn flex items-center bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded m-2" data-address="TMHgRbmQBRjR4dU1ywqGXFsmbdGgMTWm3F">
<img src="./icons/usdc.png" alt="USDC" class="h-6 w-6 mr-2"> USDC(TRC20)
</button>
<!-- USDC(ERC20) -->
<button class="copy-btn flex items-center bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded m-2" data-address="0x4Ada8a45198E4D3160e123E786419bF53B9E2AE3">
<img src="./icons/usdc.png" alt="USDC" class="h-6 w-6 mr-2"> USDC(ERC20)
</button>
</div>
</div>
</div>
<div id="copySuccessPopup" class="modal">
<div class="modal-content">
<p id="copyMessage"></p>
<p id="currencyInfo"></p> <!-- Placeholder for currency name and address -->
<button id="closeModal">Okay</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Function to show the modal with a smooth animation
function showModal() {
const modal = document.getElementById('copySuccessPopup');
modal.style.display = "flex";
setTimeout(() => { // Timeout to ensure the display: flex applies first
modal.style.opacity = "1";
modal.querySelector('.modal-content').style.transform = "scale(1)";
modal.querySelector('.modal-content').style.opacity = "1";
}, 10); // Short delay to ensure styles apply in sequence
}
// Function to hide the modal with a smooth animation
function hideModal() {
const modal = document.getElementById('copySuccessPopup');
modal.querySelector('.modal-content').style.transform = "scale(0.9)";
modal.querySelector('.modal-content').style.opacity = "0";
modal.style.opacity = "0";
setTimeout(() => {
modal.style.display = "none";
}, 400); // Match the duration of the CSS transitions
}
// Event listener for copy buttons
document.querySelectorAll('.copy-btn').forEach(button => {
button.addEventListener('click', function() {
const address = button.getAttribute('data-address');
// Copy the address to the clipboard
navigator.clipboard.writeText(address).then(() => {
console.log('Address copied to clipboard:', address);
// Show modal with currency info
document.getElementById('currencyInfo').textContent = `Address copied: ${address}`;
showModal(); // Use the showModal function to display the modal smoothly
}).catch(err => {
console.error('Could not copy text: ', err);
});
});
});
// Close modal when "Okay" button is clicked, using the hideModal function
document.getElementById('closeModal').addEventListener('click', function() {
hideModal(); // Use the hideModal function to close the modal smoothly
});
});
</script>
<div class="container mx-auto mt-8 ml-15 mr-15">
<div class="flex flex-wrap -mx-2">
<div class="w-full lg:w-1/2 px-2 mb-4">
<!-- Dynamic account boxes will be added here -->
<div class="accounts-container bg-white p-3 rounded-lg shadow" id="accountsContainer"></div>
<button id="addAccountBtn" class="btn bg-purple-700 hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded shadow mt-4 mx-auto ml-25">Add Account</button>
</div>
<div class="w-full lg:w-1/2 px-4">
<div class=" bg-white p-3 rounded-lg shadow" id="accountsContainer">
<div class="pricing-section bg-purple-500 p-4 rounded-lg shadow">
<div id="selectionSummaries" class="mb-4">
<!-- Dynamic selection summaries will be inserted here -->
</div>
<p id="totalPrice" class="text-lg font-bold text-right">Total Price: $0</p>
<button id="downloadInvoiceBtn" class="btn bg-purple-700 hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded shadow mt-4">Download Invoice</button>
<div id="trxidInputContainer" class="mt-4 text-black" style="display:none;">
<input type="text" id="refby" class="input input-bordered w-full mb-4" placeholder="Enter your Email">
<input type="text" id="trxidInput" class="input input-bordered w-full" placeholder="Complete the Payment and Submit Your TRXID">
<button id="submitTrxidBtn" class="btn bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded shadow mt-4">Submit</button>
</div>
</div>
</div>
<img src="./icons/brand-img.png" alt="Descriptive Alt Text" class="mx-auto mr-20 mt-4 w-50" style="height: auto;">
</div>
</div>
</div>
</div>
</body>
</html>