Rafata12/FindMy-Wallet
1
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>Crypto Transfer Platform | Secure Email-Confirmed Transactions</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>11 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">12 <script>13 tailwind.config = {14 theme: {15 extend: {16 colors: {17 primary: {18 500: '#8b5cf6',19 600: '#7c3aed',20 },21 dark: {22 900: '#0f172a',23 800: '#1e293b',24 700: '#334155',25 }26 }27 }28 }29 }30 </script>31 <style>32 .gradient-text {33 background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%);34 -webkit-background-clip: text;35 background-clip: text;36 color: transparent;37 }38 .hero-gradient {39 background: radial-gradient(circle at 30% 50%, rgba(139, 92, 246, 0.2) 0%, rgba(30, 41, 59, 0) 60%);40 }41 </style>42</head>43<body class="bg-dark-900 text-gray-100 min-h-screen">44 <script>AOS.init();</script>45 46 <!-- Navigation -->47 <nav class="border-b border-dark-700">48 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">49 <div class="flex items-center justify-between h-16">50 <div class="flex items-center">51 <div class="flex-shrink-0 flex items-center">52 <i data-feather="send" class="text-primary-500 h-6 w-6"></i>53 <span class="ml-2 text-xl font-bold">CryptoTransfer</span>54 </div>55 </div>56 <div class="hidden md:block">57 <div class="ml-10 flex items-baseline space-x-4">58 <a href="#features" class="px-3 py-2 rounded-md text-sm font-medium hover:text-primary-500">Features</a>59 <a href="#how-it-works" class="px-3 py-2 rounded-md text-sm font-medium hover:text-primary-500">How It Works</a>60 <a href="#documentation" class="px-3 py-2 rounded-md text-sm font-medium hover:text-primary-500">Documentation</a>61 <a href="https://github.com/your-repo" target="_blank" class="px-3 py-2 rounded-md text-sm font-medium hover:text-primary-500 flex items-center">62 <i data-feather="github" class="mr-1 w-4 h-4"></i> GitHub63 </a>64 </div>65 </div>66 <div class="-mr-2 flex md:hidden">67 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">68 <i data-feather="menu" class="block h-6 w-6"></i>69 </button>70 </div>71 </div>72 </div>73 74 <!-- Mobile menu -->75 <div class="hidden border-t border-dark-700 md:hidden" id="mobile-menu">76 <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">77 <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500">Features</a>78 <a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500">How It Works</a>79 <a href="#documentation" class="block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500">Documentation</a>80 <a href="https://github.com/your-repo" target="_blank" class="block px-3 py-2 rounded-md text-base font-medium hover:text-primary-500 flex items-center">81 <i data-feather="github" class="mr-1 w-4 h-4"></i> GitHub82 </a>83 </div>84 </div>85 </nav>86 87 <!-- Hero Section -->88 <section class="pt-24 pb-16 hero-gradient">89 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">90 <div class="text-center" data-aos="fade-up">91 <h1 class="text-4xl sm:text-6xl font-bold mb-6">92 Secure Crypto Transfers <span class="gradient-text">Made Simple</span>93 </h1>94 <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">95 Transfer cryptocurrencies across blockchains with email confirmation. 96 Powered by Kotlin, Jetpack Compose, and Ktor backend.97 </p>98 <div class="flex flex-wrap justify-center gap-4">99 <!-- Get Started -->100 <a href="#features" class="px-6 py-3 bg-primary-600 rounded-lg font-medium hover:bg-primary-500 transition">101 Get Started102 </a>103 <!-- GitHub -->104 <a href="https://github.com/your-repo" target="_blank" 105 class="px-6 py-3 border border-gray-700 rounded-lg font-medium hover:bg-dark-800 transition">106 View on GitHub107 </a>108 <!-- Live Demo -->109 <a href="https://your-demo-link.com" target="_blank" 110 class="px-6 py-3 bg-green-600 rounded-lg font-medium hover:bg-green-500 transition flex items-center gap-2">111 Live Demo112 </a>113 </div>114 </div>115 </div>116 </section>117 118 <!-- Features Section -->119 <section id="features" class="py-20 bg-dark-800">120 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">121 <div class="text-center mb-16" data-aos="fade-up">122 <h2 class="text-3xl md:text-4xl font-bold mb-4">Key Features</h2>123 <p class="text-lg text-gray-300 max-w-3xl mx-auto">124 A secure and modern approach to cryptocurrency transfers125 </p>126 </div>127 128 <div class="grid md:grid-cols-3 gap-8">129 <div class="bg-dark-700 rounded-xl p-6 border border-dark-600 hover:border-primary-500 transition duration-300" data-aos="fade-up" data-aos-delay="100">130 <div class="bg-primary-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">131 <i data-feather="mail" class="text-primary-500 w-6 h-6"></i>132 </div>133 <h3 class="text-xl font-bold mb-3">Email Confirmation</h3>134 <p class="text-gray-300">135 Every transfer requires confirmation via email with a secure code, adding an extra layer of security.136 </p>137 </div>138 139 <div class="bg-dark-700 rounded-xl p-6 border border-dark-600 hover:border-primary-500 transition duration-300" data-aos="fade-up" data-aos-delay="200">140 <div class="bg-primary-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">141 <i data-feather="smartphone" class="text-primary-500 w-6 h-6"></i>142 </div>143 <h3 class="text-xl font-bold mb-3">Modern Android App</h3>144 <p class="text-gray-300">145 Built with Jetpack Compose for a beautiful, responsive UI with Kotlin for robust functionality.146 </p>147 </div>148 149 <div class="bg-dark-700 rounded-xl p-6 border border-dark-600 hover:border-primary-500 transition duration-300" data-aos="fade-up" data-aos-delay="300">150 <div class="bg-primary-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">151 <i data-feather="server" class="text-primary-500 w-6 h-6"></i>152 </div>153 <h3 class="text-xl font-bold mb-3">Ktor Backend</h3>154 <p class="text-gray-300">155 High-performance backend with Ktor, handling blockchain interactions and email confirmations.156 </p>157 </div>158 </div>159 </div>160 </section>161 162 <!-- How It Works Section -->163 <section id="how-it-works" class="py-20">164 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">165 <div class="text-center mb-16" data-aos="fade-up">166 <h2 class="text-3xl md:text-4xl font-bold mb-4">How It Works</h2>167 <p class="text-lg text-gray-300 max-w-3xl mx-auto">168 The secure transfer flow in three simple steps169 </p>170 </div>171 172 <div class="grid md:grid-cols-3 gap-8">173 <div class="flex flex-col items-center text-center" data-aos="fade-up" data-aos-delay="100">174 <div class="bg-primary-500/10 w-16 h-16 rounded-full flex items-center justify-center mb-4">175 <span class="text-primary-500 text-xl font-bold">1</span>176 </div>177 <h3 class="text-xl font-bold mb-3">Initiate Transfer</h3>178 <p class="text-gray-300">179 User selects asset and enters destination address in the Android app.180 </p>181 </div>182 183 <div class="flex flex-col items-center text-center" data-aos="fade-up" data-aos-delay="200">184 <div class="bg-primary-500/10 w-16 h-16 rounded-full flex items-center justify-center mb-4">185 <span class="text-primary-500 text-xl font-bold">2</span>186 </div>187 <h3 class="text-xl font-bold mb-3">Email Confirmation</h3>188 <p class="text-gray-300">189 System sends confirmation email with secure code and verification link.190 </p>191 </div>192 193 <div class="flex flex-col items-center text-center" data-aos="fade-up" data-aos-delay="300">194 <div class="bg-primary-500/10 w-16 h-16 rounded-full flex items-center justify-center mb-4">195 <span class="text-primary-500 text-xl font-bold">3</span>196 </div>197 <h3 class="text-xl font-bold mb-3">Complete Transfer</h3>198 <p class="text-gray-300">199 User confirms via email, backend verifies and executes the blockchain transfer.200 </p>201 </div>202 </div>203 204 <div class="mt-16 bg-dark-800 rounded-xl p-6 border border-dark-700" data-aos="fade-up">205 <div class="flex flex-col md:flex-row items-center">206 <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">207 <h3 class="text-2xl font-bold mb-4">Technical Architecture</h3>208 <p class="text-gray-300 mb-4">209 The system consists of an Android client built with Jetpack Compose and a Ktor backend that handles:210 </p>211 <ul class="space-y-2 text-gray-300">212 <li class="flex items-start">213 <i data-feather="check" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>214 <span>Wallet address mapping</span>215 </li>216 <li class="flex items-start">217 <i data-feather="check" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>218 <span>Balance lookups via Etherscan/BscScan APIs</span>219 </li>220 <li class="flex items-start">221 <i data-feather="check" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>222 <span>Email confirmation with SMTP</span>223 </li>224 <li class="flex items-start">225 <i data-feather="check" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>226 <span>Transfer simulation/execution</span>227 </li>228 </ul>229 </div>230 <div class="md:w-1/2 bg-dark-900 rounded-lg p-4 border border-dark-700">231 <div class="text-xs text-gray-400 mb-2">Backend Structure</div>232 <div class="font-mono text-sm text-gray-300">233 <div class="text-purple-400">backend/</div>234 <div class="pl-4 text-blue-400">├── src/main/kotlin/com/example/backend/</div>235 <div class="pl-8 text-green-400">├── routes/</div>236 <div class="pl-12 text-gray-400">│ ├── BalanceRoutes.kt</div>237 <div class="pl-12 text-gray-400">│ ├── TransferRoutes.kt</div>238 <div class="pl-12 text-gray-400">│ └── WalletRoutes.kt</div>239 <div class="pl-8 text-green-400">├── services/</div>240 <div class="pl-12 text-gray-400">│ ├── EtherscanService.kt</div>241 <div class="pl-12 text-gray-400">│ ├── BscScanService.kt</div>242 <div class="pl-12 text-gray-400">│ └── EmailService.kt</div>243 <div class="pl-8 text-green-400">└── store/</div>244 <div class="pl-12 text-gray-400"> └── PendingStore.kt</div>245 </div>246 </div>247 </div>248 </div>249 </div>250 </section>251 252 <!-- Documentation Section -->253 <section id="documentation" class="py-20 bg-dark-800">254 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">255 <div class="text-center mb-16" data-aos="fade-up">256 <h2 class="text-3xl md:text-4xl font-bold mb-4">Documentation</h2>257 <p class="text-lg text-gray-300 max-w-3xl mx-auto">258 Get started with the Crypto Transfer Platform259 </p>260 </div>261 262 <div class="grid md:grid-cols-2 gap-8">263 <div class="bg-dark-700 rounded-xl p-6 border border-dark-600" data-aos="fade-up" data-aos-delay="100">264 <h3 class="text-xl font-bold mb-4 flex items-center">265 <i data-feather="book" class="text-primary-500 mr-2"></i>266 <span>Prerequisites</span>267 </h3>268 <ul class="space-y-3 text-gray-300">269 <li class="flex items-start">270 <i data-feather="check-circle" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>271 <span>Etherscan API key</span>272 </li>273 <li class="flex items-start">274 <i data-feather="check-circle" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>275 <span>BscScan API key</span>276 </li>277 <li class="flex items-start">278 <i data-feather="check-circle" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>279 <span>SMTP account (Gmail, SendGrid, Mailtrap)</span>280 </li>281 <li class="flex items-start">282 <i data-feather="check-circle" class="text-primary-500 mr-2 mt-1 w-4 h-4"></i>283 <span>Android Studio (Giraffe+) with JDK 17</span>284 </li>285 </ul>286 </div>287 288 <div class="bg-dark-700 rounded-xl p-6 border border-dark-600" data-aos="fade-up" data-aos-delay="200">289 <h3 class="text-xl font-bold mb-4 flex items-center">290 <i data-feather="terminal" class="text-primary-500 mr-2"></i>291 <span>Quick Start</span>292 </h3>293 <div class="bg-dark-900 rounded-lg p-4 overflow-x-auto">294 <pre class="text-sm text-gray-300 font-mono">295<span class="text-green-400"># Start backend</span>296cd backend297./gradlew run \298 -DETHERSCAN_API_KEY=YOUR_KEY \299 -DBSCSCAN_API_KEY=YOUR_KEY \300 -DSMTP_HOST=smtp.gmail.com \301 -DSMTP_PORT=587 \302 -DSMTP_USER=you@gmail.com \303 -DSMTP_PASS=app_password \304 -DEMAIL_FROM="Your App <you@gmail.com>" \305 -DBASE_URL=http://localhost:8080306 307<span class="text-green-400"># Run Android app</span>308Open android-app in Android Studio309Build and launch on emulator310Use email: demo@example.com</pre>311 </div>312 </div>313 </div>314 315 <div class="mt-8 bg-dark-700 rounded-xl p-6 border border-dark-600" data-aos="fade-up" data-aos-delay="300">316 <h3 class="text-xl font-bold mb-4 flex items-center">317 <i data-feather="code" class="text-primary-500 mr-2"></i>318 <span>API Endpoints</span>319 </h3>320 <div class="space-y-4">321 <div class="bg-dark-800 rounded-lg p-4 border border-dark-700">322 <div class="flex items-center mb-2">323 <div class="bg-green-500/20 text-green-400 px-2 py-1 rounded text-xs font-mono mr-3">GET</div>324 <div class="font-mono text-sm">/wallets?email={email}</div>325 </div>326 <div class="text-gray-400 text-sm">Get wallet addresses associated with an email</div>327 </div>328 329 <div class="bg-dark-800 rounded-lg p-4 border border-dark-700">330 <div class="flex items-center mb-2">331 <div class="bg-blue-500/20 text-blue-400 px-2 py-1 rounded text-xs font-mono mr-3">POST</div>332 <div class="font-mono text-sm">/balances</div>333 </div>334 <div class="text-gray-400 text-sm">Get balances for all wallets associated with an email</div>335 </div>336 337 <div class="bg-dark-800 rounded-lg p-4 border border-dark-700">338 <div class="flex items-center mb-2">339 <div class="bg-purple-500/20 text-purple-400 px-2 py-1 rounded text-xs font-mono mr-3">POST</div>340 <div class="font-mono text-sm">/transfer/initiate</div>341 </div>342 <div class="text-gray-400 text-sm">Initiate a transfer (sends confirmation email)</div>343 </div>344 345 <div class="bg-dark-800 rounded-lg p-4 border border-dark-700">346 <div class="flex items-center mb-2">347 <div class="bg-yellow-500/20 text-yellow-400 px-2 py-1 rounded text-xs font-mono mr-3">GET</div>348 <div class="font-mono text-sm">/transfer/confirm?pendingId={id}&code={code}</div>349 </div>350 <div class="text-gray-400 text-sm">Confirm and execute a pending transfer</div>351 </div>352 </div>353 </div>354 </div>355 </section>356 357 <!-- CTA Section -->358 <section class="py-20">359 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">360 <div class="bg-gradient-to-r from-primary-500/10 to-blue-500/10 rounded-2xl p-8 md:p-12" data-aos="zoom-in">361 <h2 class="text-2xl md:text-3xl font-bold mb-4">Ready to implement secure crypto transfers?</h2>362 <p class="text-lg text-gray-300 max-w-3xl mx-auto mb-8">363 Clone the repository and start building your secure transfer solution today.364 </p>365 <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">366 <a href="https://github.com/your-repo" target="_blank" class="bg-primary-600 hover:bg-primary-500 text-white px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center justify-center">367 <i data-feather="github" class="mr-2"></i> View on GitHub368 </a>369 <a href="#documentation" class="border border-gray-600 hover:border-primary-500 text-gray-300 hover:text-primary-500 px-6 py-3 rounded-lg font-medium transition duration-300">370 View Documentation371 </a>372 </div>373 </div>374 </div>375 </section>376 377 <!-- Footer -->378 <footer class="border-t border-dark-700 py-12">379 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">380 <div class="flex flex-col md:flex-row justify-between items-center">381 <div class="flex items-center mb-6 md:mb-0">382 <i data-feather="send" class="text-primary-500 h-6 w-6"></i>383 <span class="ml-2 text-xl font-bold">CryptoTransfer</span>384 </div>385 <div class="flex space-x-6">386 <a href="#" class="text-gray-400 hover:text-primary-500">387 <i data-feather="github" class="w-5 h-5"></i>388 </a>389 <a href="#" class="text-gray-400 hover:text-primary-500">390 <i data-feather="twitter" class="w-5 h-5"></i>391 </a>392 <a href="#" class="text-gray-400 hover:text-primary-500">393 <i data-feather="mail" class="w-5 h-5"></i>394 </a>395 </div>396 </div>397 <div class="mt-8 pt-8 border-t border-dark-700 text-center text-gray-400 text-sm">398 <p>Open-source project licensed under MIT. Built with Kotlin, Jetpack Compose, and Ktor.</p>399 </div>400 </div>401 </footer>402 403 <script>404 // Mobile menu toggle405 document.getElementById('mobile-menu-button').addEventListener('click', function() {406 const menu = document.getElementById('mobile-menu');407 menu.classList.toggle('hidden');408 });409 410 // Close mobile menu when clicking a link411 document.querySelectorAll('#mobile-menu a').forEach(link => {412 link.addEventListener('click', () => {413 document.getElementById('mobile-menu').classList.add('hidden');414 });415 });416 417 // Feather icons replacement418 feather.replace();419 </script>420</body>421</html>422