git / moonbite-network / moonbite-wallet-premium-design.html · raw
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>🌙 MoonBite Wallet - Premium Design</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(135deg, #0f0f2e 0%, #1a0f3a 100%); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #e0e0e0; min-height: 100vh; padding: 20px; } .container { max-width: 400px; margin: 0 auto; } /* Header */ .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-top: 12px; } .account-info { display: flex; flex-direction: column; gap: 4px; } .account-label { font-size: 13px; color: #b0b0b0; font-weight: 500; } .account-id { font-size: 12px; color: #808080; font-family: 'Courier New', monospace; } .moon-icon { font-size: 32px; } /* Premium Balance Card */ .balance-card { background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFD700 100%); border-radius: 24px; padding: 28px; margin-bottom: 28px; box-shadow: 0 20px 60px rgba(255, 107, 53, 0.4); position: relative; overflow: hidden; } .balance-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: shine 3s infinite; } @keyframes shine { 0% { transform: translate(0, 0); } 50% { transform: translate(10px, 10px); } 100% { transform: translate(0, 0); } } .card-chip { display: inline-block; width: 40px; height: 28px; background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1)); border-radius: 6px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.2); } .card-number { font-size: 16px; color: rgba(255,255,255,0.8); letter-spacing: 2px; margin-bottom: 24px; font-weight: 500; } .balance-amount { font-size: 52px; font-weight: 900; color: #ffffff; margin-bottom: 8px; text-shadow: 0 4px 12px rgba(0,0,0,0.2); } .mbite-label { font-size: 14px; color: rgba(255,255,255,0.9); font-weight: 600; } .wallet-name { position: absolute; bottom: 20px; left: 28px; font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500; } .card-expiry { position: absolute; bottom: 20px; right: 28px; font-size: 11px; color: rgba(255,255,255,0.7); font-family: 'Courier New', monospace; } /* Action Buttons */ .actions { display: flex; gap: 16px; margin-bottom: 32px; } .action-btn { flex: 1; background: rgba(255, 107, 53, 0.15); border: 1px solid rgba(255, 107, 53, 0.3); border-radius: 16px; padding: 16px; color: #FF8C42; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s ease; } .action-btn:hover { background: rgba(255, 107, 53, 0.25); border-color: rgba(255, 107, 53, 0.5); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 107, 53, 0.2); } /* Contacts Section */ .section-title { font-size: 13px; color: #b0b0b0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; } .see-all { font-size: 12px; color: #808080; cursor: pointer; transition: color 0.3s; } .see-all:hover { color: #FFD700; } .contacts-list { display: flex; gap: 12px; overflow-x: auto; margin-bottom: 32px; padding-bottom: 8px; } .contacts-list::-webkit-scrollbar { height: 4px; } .contacts-list::-webkit-scrollbar-track { background: rgba(255, 107, 53, 0.1); border-radius: 2px; } .contacts-list::-webkit-scrollbar-thumb { background: rgba(255, 107, 53, 0.4); border-radius: 2px; } .contact-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: fit-content; cursor: pointer; transition: transform 0.3s; } .contact-item:hover { transform: scale(1.1); } .contact-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #FF6B35, #FFD700); display: flex; align-items: center; justify-content: center; font-size: 24px; border: 2px solid rgba(255, 107, 53, 0.3); } .contact-name { font-size: 11px; color: #b0b0b0; text-align: center; max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Transactions Section */ .transaction { display: flex; align-items: center; gap: 12px; padding: 16px; background: rgba(255, 107, 53, 0.05); border: 1px solid rgba(255, 107, 53, 0.1); border-radius: 16px; margin-bottom: 12px; transition: all 0.3s; cursor: pointer; } .transaction:hover { background: rgba(255, 107, 53, 0.1); border-color: rgba(255, 107, 53, 0.2); transform: translateX(4px); } .tx-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #FF6B35, #FFD700); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .tx-info { flex: 1; } .tx-name { font-size: 14px; color: #e0e0e0; font-weight: 600; margin-bottom: 4px; } .tx-date { font-size: 12px; color: #808080; } .tx-amount { font-size: 14px; font-weight: 700; color: #FF8C42; } /* Add New Button */ .add-new { display: flex; align-items: center; gap: 8px; color: #FFD700; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 24px; transition: all 0.3s; } .add-new:hover { transform: translateX(4px); } .add-icon { width: 28px; height: 28px; border-radius: 50%; border: 2px dashed rgba(255, 215, 0, 0.4); display: flex; align-items: center; justify-content: center; font-size: 14px; } </style></head><body> <div class="container"> <!-- Header --> <div class="header"> <div class="account-info"> <div class="account-label">Personal Account</div> <div class="account-id">0m1z4s67 00-00-00</div> </div> <div class="moon-icon">🌙</div> </div> <!-- Balance Card --> <div class="balance-card"> <div class="card-chip"></div> <div class="card-number">MBITE MBITE MBITE MBITE</div> <div class="balance-amount">32,987.05</div> <div class="mbite-label">MOONBITE</div> <div class="wallet-name">Your Wallet</div> <div class="card-expiry">12/2025</div> </div> <!-- Action Buttons --> <div class="actions"> <button class="action-btn">📤 Send</button> <button class="action-btn">📥 Request</button> </div> <!-- Contacts Section --> <div class="section-title"> Contacts <span class="see-all">See all</span> </div> <div class="contacts-list"> <div class="add-new"> <div class="add-icon">+</div> <span>Add new</span> </div> <div class="contact-item"> <div class="contact-avatar">🧑</div> <div class="contact-name">Daniel S.</div> </div> <div class="contact-item"> <div class="contact-avatar">👨</div> <div class="contact-name">Kai Fisher</div> </div> <div class="contact-item"> <div class="contact-avatar">👩</div> <div class="contact-name">Mina P.</div> </div> <div class="contact-item"> <div class="contact-avatar">👱♀️</div> <div class="contact-name">Laura L.</div> </div> <div class="contact-item"> <div class="contact-avatar">👩🦰</div> <div class="contact-name">Jessy M.</div> </div> </div> <!-- Transactions Section --> <div class="section-title"> Transactions <span class="see-all">See all</span> </div> <div class="transaction"> <div class="tx-avatar">👤</div> <div class="tx-info"> <div class="tx-name">Kai Fisher</div> <div class="tx-date">17 Nov 2022</div> </div> <div class="tx-amount">- 48.29 MBITE</div> </div> <div class="transaction"> <div class="tx-avatar">👥</div> <div class="tx-info"> <div class="tx-name">Laura L.</div> <div class="tx-date">15 Nov 2022</div> </div> <div class="tx-amount">+ 125.50 MBITE</div> </div> <div class="transaction"> <div class="tx-avatar">👨💼</div> <div class="tx-info"> <div class="tx-name">Daniel S.</div> <div class="tx-date">12 Nov 2022</div> </div> <div class="tx-amount">- 75.00 MBITE</div> </div> </div></body></html>