Hugging Face's logo

Spaces:
2025Amplify
/
Amplify.com
Running

App Files Community
Fazbeeer commited on
Commit
0b5fa84
·
verified ·
1 Parent(s): 5423328

add Currency Converter

Browse files
Files changed (3) hide show
  1. about.html +4 -2
  2. currency.html +269 -0
  3. index.html +3 -1
about.html CHANGED
@@ -43,7 +43,8 @@
43
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
44
  <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
45
  <a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About</a>
46
- </div>
 
47
  <div class="flex items-center space-x-4">
48
  <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
49
  <i data-feather="user" class="mr-2"></i> Login
@@ -242,7 +243,8 @@
242
  <h3 class="text-lg font-bold text-white mb-4">Company</h3>
243
  <ul class="space-y-2">
244
  <li><a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About Us</a></li>
245
- <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
 
246
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
247
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
248
  </ul>
 
43
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
44
  <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
45
  <a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About</a>
46
+ <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
47
+ </div>
48
  <div class="flex items-center space-x-4">
49
  <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
50
  <i data-feather="user" class="mr-2"></i> Login
 
243
  <h3 class="text-lg font-bold text-white mb-4">Company</h3>
244
  <ul class="space-y-2">
245
  <li><a href="about.html" class="text-yellow-500 hover:text-yellow-400 transition">About Us</a></li>
246
+ <li><a href="currency.html" class="text-gray-400 hover:text-yellow-500 transition">Currency Converter</a></li>
247
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
248
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
249
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
250
  </ul>
currency.html ADDED
@@ -0,0 +1,269 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Currency Converter - Amplify</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
13
+ .hero-gradient {
14
+ background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #3a0000 100%);
15
+ }
16
+ .glow-text {
17
+ text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-black text-white font-['Montserrat']">
22
+ <!-- Vanta.js Background -->
23
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
24
+
25
+ <!-- Navigation -->
26
+ <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
27
+ <div class="container mx-auto px-6 py-4">
28
+ <div class="flex justify-between items-center">
29
+ <div class="flex items-center space-x-2">
30
+ <i data-feather="zap" class="text-yellow-500"></i>
31
+ <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
32
+ </div>
33
+
34
+ <div class="hidden md:flex items-center space-x-8">
35
+ <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
36
+ <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
37
+ <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
38
+ <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
39
+ <a href="currency.html" class="text-yellow-500 hover:text-yellow-400 transition">Currency</a>
40
+ </div>
41
+ <div class="flex items-center space-x-4">
42
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
43
+ <i data-feather="user" class="mr-2"></i> Login
44
+ </button>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </nav>
49
+
50
+ <!-- Currency Converter Section -->
51
+ <section class="relative z-10 py-20 hero-gradient">
52
+ <div class="container mx-auto px-6">
53
+ <h1 class="text-4xl md:text-6xl font-bold text-center mb-12 font-['Bebas+Neue'] tracking-wider">
54
+ <span class="text-yellow-500 glow-text">CURRENCY</span> <span class="text-white">CONVERTER</span>
55
+ </h1>
56
+
57
+ <div class="max-w-2xl mx-auto bg-black bg-opacity-70 rounded-xl p-8 border border-yellow-500">
58
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
59
+ <div>
60
+ <label class="block text-gray-300 mb-2">Amount</label>
61
+ <input type="number" id="amount" class="w-full bg-gray-900 text-white border border-yellow-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500" value="1">
62
+ </div>
63
+ <div>
64
+ <label class="block text-gray-300 mb-2">From</label>
65
+ <select id="from-currency" class="w-full bg-gray-900 text-white border border-yellow-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500">
66
+ <option value="USD">USD - US Dollar</option>
67
+ <option value="EUR">EUR - Euro</option>
68
+ <option value="GBP">GBP - British Pound</option>
69
+ <option value="JPY">JPY - Japanese Yen</option>
70
+ <option value="CAD">CAD - Canadian Dollar</option>
71
+ <option value="AUD">AUD - Australian Dollar</option>
72
+ </select>
73
+ </div>
74
+ <div>
75
+ <label class="block text-gray-300 mb-2">To</label>
76
+ <select id="to-currency" class="w-full bg-gray-900 text-white border border-yellow-500 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500">
77
+ <option value="EUR">EUR - Euro</option>
78
+ <option value="USD">USD - US Dollar</option>
79
+ <option value="GBP">GBP - British Pound</option>
80
+ <option value="JPY">JPY - Japanese Yen</option>
81
+ <option value="CAD">CAD - Canadian Dollar</option>
82
+ <option value="AUD">AUD - Australian Dollar</option>
83
+ </select>
84
+ </div>
85
+ </div>
86
+
87
+ <button id="convert-btn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 rounded-lg transition mb-6 flex items-center justify-center">
88
+ <i data-feather="refresh-cw" class="mr-2"></i> Convert
89
+ </button>
90
+
91
+ <div id="result" class="text-center py-6 px-4 bg-gray-900 rounded-lg border border-yellow-500 hidden">
92
+ <div class="text-4xl font-bold text-yellow-500 mb-2" id="converted-amount">0</div>
93
+ <div class="text-gray-300" id="conversion-text">1 USD = 0 EUR</div>
94
+ </div>
95
+
96
+ <div class="mt-8">
97
+ <h3 class="text-xl font-bold mb-4 text-yellow-500">Popular Conversions</h3>
98
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
99
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="USD" data-to="EUR">
100
+ USD → EUR
101
+ </button>
102
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="EUR" data-to="USD">
103
+ EUR → USD
104
+ </button>
105
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="USD" data-to="GBP">
106
+ USD → GBP
107
+ </button>
108
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="GBP" data-to="USD">
109
+ GBP → USD
110
+ </button>
111
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="USD" data-to="JPY">
112
+ USD → JPY
113
+ </button>
114
+ <button class="quick-convert bg-gray-900 hover:bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700" data-from="JPY" data-to="USD">
115
+ JPY → USD
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- Footer -->
124
+ <footer class="relative z-10 bg-black bg-opacity-90 border-t border-gray-800 py-12">
125
+ <div class="container mx-auto px-6">
126
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
127
+ <div>
128
+ <div class="flex items-center space-x-2 mb-4">
129
+ <i data-feather="zap" class="text-yellow-500"></i>
130
+ <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500">AMPLIFY</span>
131
+ </div>
132
+ <p class="text-gray-400 mb-4">
133
+ Mental performance technology for champions in sports, business, and life.
134
+ </p>
135
+ <div class="flex space-x-4">
136
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
137
+ <i data-feather="facebook"></i>
138
+ </a>
139
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
140
+ <i data-feather="twitter"></i>
141
+ </a>
142
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
143
+ <i data-feather="instagram"></i>
144
+ </a>
145
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition">
146
+ <i data-feather="linkedin"></i>
147
+ </a>
148
+ </div>
149
+ </div>
150
+
151
+ <div>
152
+ <h3 class="text-lg font-bold text-white mb-4">Products</h3>
153
+ <ul class="space-y-2">
154
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
155
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
156
+ <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
157
+ </ul>
158
+ </div>
159
+
160
+ <div>
161
+ <h3 class="text-lg font-bold text-white mb-4">Company</h3>
162
+ <ul class="space-y-2">
163
+ <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
164
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
165
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
166
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
167
+ </ul>
168
+ </div>
169
+
170
+ <div>
171
+ <h3 class="text-lg font-bold text-white mb-4">Resources</h3>
172
+ <ul class="space-y-2">
173
+ <li><a href="currency.html" class="text-yellow-500 hover:text-yellow-400 transition">Currency Converter</a></li>
174
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Blog</a></li>
175
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Help Center</a></li>
176
+ </ul>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
181
+ <p class="text-gray-500 mb-4 md:mb-0">
182
+ © 2025 Amplify Technologies. All rights reserved.
183
+ </p>
184
+ <div class="flex space-x-6">
185
+ <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Privacy Policy</a>
186
+ <a href="#" class="text-gray-500 hover:text-yellow-500 transition">Terms of Service</a>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </footer>
191
+
192
+ <script>
193
+ // Initialize Vanta.js background
194
+ VANTA.GLOBE({
195
+ el: "#vanta-bg",
196
+ mouseControls: true,
197
+ touchControls: true,
198
+ gyroControls: false,
199
+ minHeight: 200.00,
200
+ minWidth: 200.00,
201
+ scale: 1.00,
202
+ scaleMobile: 1.00,
203
+ color: 0xb8860b,
204
+ backgroundColor: 0x0,
205
+ size: 0.8
206
+ });
207
+
208
+ // Currency Converter
209
+ document.addEventListener('DOMContentLoaded', function() {
210
+ feather.replace();
211
+
212
+ const convertBtn = document.getElementById('convert-btn');
213
+ const resultDiv = document.getElementById('result');
214
+ const quickConvertBtns = document.querySelectorAll('.quick-convert');
215
+
216
+ // Fetch exchange rates from API
217
+ async function fetchExchangeRate(from, to) {
218
+ try {
219
+ const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${from}`);
220
+ const data = await response.json();
221
+ return data.rates[to];
222
+ } catch (error) {
223
+ console.error('Error fetching exchange rate:', error);
224
+ return null;
225
+ }
226
+ }
227
+
228
+ // Perform conversion
229
+ async function convertCurrency() {
230
+ const amount = parseFloat(document.getElementById('amount').value);
231
+ const fromCurrency = document.getElementById('from-currency').value;
232
+ const toCurrency = document.getElementById('to-currency').value;
233
+
234
+ if (isNaN(amount) || amount <= 0) {
235
+ alert('Please enter a valid amount');
236
+ return;
237
+ }
238
+
239
+ const rate = await fetchExchangeRate(fromCurrency, toCurrency);
240
+ if (rate) {
241
+ const convertedAmount = (amount * rate).toFixed(2);
242
+ document.getElementById('converted-amount').textContent = convertedAmount;
243
+ document.getElementById('conversion-text').textContent =
244
+ `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
245
+ resultDiv.classList.remove('hidden');
246
+ } else {
247
+ alert('Unable to get exchange rate. Please try again later.');
248
+ }
249
+ }
250
+
251
+ // Handle quick convert buttons
252
+ quickConvertBtns.forEach(btn => {
253
+ btn.addEventListener('click', function() {
254
+ const from = this.getAttribute('data-from');
255
+ const to = this.getAttribute('data-to');
256
+
257
+ document.getElementById('from-currency').value = from;
258
+ document.getElementById('to-currency').value = to;
259
+
260
+ convertCurrency();
261
+ });
262
+ });
263
+
264
+ // Event listeners
265
+ convertBtn.addEventListener('click', convertCurrency);
266
+ });
267
+ </script>
268
+ </body>
269
+ </html>
index.html CHANGED
@@ -53,6 +53,7 @@
53
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
54
  <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
55
  <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
 
56
  </div>
57
  <div class="flex items-center space-x-4">
58
  <div class="relative">
@@ -563,7 +564,8 @@
563
  <div>
564
  <h3 class="text-lg font-bold text-white mb-4">Company</h3>
565
  <ul class="space-y-2">
566
- <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
 
567
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
568
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
569
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>
 
53
  <a href="index.html#features" class="text-white hover:text-yellow-500 transition">Features</a>
54
  <a href="index.html#pricing" class="text-white hover:text-yellow-500 transition">Pricing</a>
55
  <a href="about.html" class="text-white hover:text-yellow-500 transition">About</a>
56
+ <a href="currency.html" class="text-white hover:text-yellow-500 transition">Currency</a>
57
  </div>
58
  <div class="flex items-center space-x-4">
59
  <div class="relative">
 
564
  <div>
565
  <h3 class="text-lg font-bold text-white mb-4">Company</h3>
566
  <ul class="space-y-2">
567
+ <li><a href="about.html" class="text-gray-400 hover:text-yellow-500 transition">About Us</a></li>
568
+ <li><a href="currency.html" class="text-gray-400 hover:text-yellow-500 transition">Currency Converter</a></li>
569
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Careers</a></li>
570
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Press</a></li>
571
  <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Contact</a></li>