|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>محفظتي الموحدة - جميع المحافظ الإلكترونية اليمنية</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="loading-screen" class="loading-screen"> |
|
|
<div class="loading-content"> |
|
|
<div class="loading-logo"> |
|
|
<i class="fas fa-wallet"></i> |
|
|
</div> |
|
|
<h2>محفظتي الموحدة</h2> |
|
|
<div class="loading-spinner"></div> |
|
|
<p>جاري تحميل محافظك...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="login-screen" class="screen active"> |
|
|
<div class="login-container"> |
|
|
<div class="login-header"> |
|
|
<div class="app-logo"> |
|
|
<i class="fas fa-wallet"></i> |
|
|
</div> |
|
|
<h1>محفظتي الموحدة</h1> |
|
|
<p>جميع محافظك الإلكترونية في مكان واحد</p> |
|
|
</div> |
|
|
|
|
|
<div class="login-form"> |
|
|
<div class="form-group"> |
|
|
<label for="phone-number">رقم الهاتف</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-prefix">+967</span> |
|
|
<input type="tel" id="phone-number" placeholder="7xxxxxxxx" maxlength="9"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="pin-code">رمز PIN</label> |
|
|
<input type="password" id="pin-code" placeholder="أدخل رمز PIN" maxlength="6"> |
|
|
</div> |
|
|
|
|
|
<button id="login-btn" class="btn-primary"> |
|
|
<i class="fas fa-sign-in-alt"></i> |
|
|
تسجيل الدخول |
|
|
</button> |
|
|
|
|
|
<div class="alternative-login"> |
|
|
<p>أو</p> |
|
|
<button id="biometric-login" class="btn-secondary"> |
|
|
<i class="fas fa-fingerprint"></i> |
|
|
تسجيل الدخول بالبصمة |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="register-link"> |
|
|
<p>ليس لديك حساب؟ <a href="#" id="register-link">إنشاء حساب جديد</a></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="supported-wallets"> |
|
|
<h3>المحافظ المدعومة</h3> |
|
|
<div class="wallet-logos"> |
|
|
<div class="wallet-logo" title="جوالي"> |
|
|
<img src="https://play-lh.googleusercontent.com/NuKV_Snecpx633RHzIWvFauG32WBAk-jt3lcZOajw2w7VD8Hdt8h5Lb0pYLopB_Qk4Y=w240-h480" alt="جوالي"> |
|
|
</div> |
|
|
<div class="wallet-logo" title="ONE Cash"> |
|
|
<img src="https://play-lh.googleusercontent.com/OF2xMRUmNH47BIaOTbv7GgvmLRTQbT1xHkFF_Ocswx6Jq5gfX4VlfAl_275UmjH2pg=w240-h480" alt="ONE Cash"> |
|
|
</div> |
|
|
<div class="wallet-logo" title="Cash"> |
|
|
<img src="https://play-lh.googleusercontent.com/zkV8HeO6iF2xa77ObHdKfAXfrfjU5fgWB0XsWt7_DmG4VGSKob2jU_CrqWyKQtghQyE=w240-h480" alt="Cash"> |
|
|
</div> |
|
|
<div class="wallet-logo" title="Jaib"> |
|
|
<img src="https://play-lh.googleusercontent.com/EAaXnjh1FVPYpI5qWZwWvZIV5oD1hm9auDX0owOgREBjMAzYKX9od1USWRzlXIhRvKMx=w240-h480" alt="Jaib"> |
|
|
</div> |
|
|
<div class="wallet-logo" title="mFloos"> |
|
|
<img src="https://play-lh.googleusercontent.com/mNvakjEk-3VX7icU5w4xmAhT4MQgGAGcQYpRvPkBLVTzD-sYnmzAH_wuglMujTsaqQ=w240-h480" alt="mFloos"> |
|
|
</div> |
|
|
<div class="wallet-logo" title="Mobile Money"> |
|
|
<img src="https://play-lh.googleusercontent.com/51r7PLMlK0gVvITgOoJ7BnGX-9Gq3_ayiSiHHxSDbJZPCgABXI_LnU6jNCHAefWHvSPV=w240-h480" alt="Mobile Money"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="main-screen" class="screen"> |
|
|
<header class="main-header"> |
|
|
<div class="header-top"> |
|
|
<div class="user-info"> |
|
|
<div class="user-avatar"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div class="user-details"> |
|
|
<h3 id="user-name">مرحباً بك</h3> |
|
|
<p id="user-phone">+967 7xxxxxxxx</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="header-actions"> |
|
|
<button class="icon-btn" id="notifications-btn"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="badge">3</span> |
|
|
</button> |
|
|
<button class="icon-btn" id="settings-btn"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="total-balance"> |
|
|
<h2>إجمالي الرصيد</h2> |
|
|
<div class="balance-amount" id="total-balance">0 ر.ي</div> |
|
|
<div class="balance-actions"> |
|
|
<button class="btn-small" id="refresh-balance"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
تحديث |
|
|
</button> |
|
|
<button class="btn-small" id="hide-balance"> |
|
|
<i class="fas fa-eye-slash"></i> |
|
|
إخفاء |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="main-content"> |
|
|
|
|
|
<section class="quick-actions"> |
|
|
<h3>الإجراءات السريعة</h3> |
|
|
<div class="actions-grid"> |
|
|
<button class="action-btn" id="transfer-btn"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
<span>تحويل</span> |
|
|
</button> |
|
|
<button class="action-btn" id="pay-bills-btn"> |
|
|
<i class="fas fa-file-invoice-dollar"></i> |
|
|
<span>دفع فواتير</span> |
|
|
</button> |
|
|
<button class="action-btn" id="recharge-btn"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
<span>شحن رصيد</span> |
|
|
</button> |
|
|
<button class="action-btn" id="qr-scan-btn"> |
|
|
<i class="fas fa-qrcode"></i> |
|
|
<span>مسح QR</span> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="wallets-section"> |
|
|
<div class="section-header"> |
|
|
<h3>محافظي</h3> |
|
|
<button class="btn-link" id="manage-wallets">إدارة المحافظ</button> |
|
|
</div> |
|
|
<div class="wallets-list" id="wallets-list"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="transactions-section"> |
|
|
<div class="section-header"> |
|
|
<h3>آخر المعاملات</h3> |
|
|
<button class="btn-link" id="view-all-transactions">عرض الكل</button> |
|
|
</div> |
|
|
<div class="transactions-list" id="transactions-list"> |
|
|
|
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<nav class="bottom-nav"> |
|
|
<button class="nav-item active" data-screen="main"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span>الرئيسية</span> |
|
|
</button> |
|
|
<button class="nav-item" data-screen="transfer"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
<span>تحويل</span> |
|
|
</button> |
|
|
<button class="nav-item" data-screen="history"> |
|
|
<i class="fas fa-history"></i> |
|
|
<span>السجل</span> |
|
|
</button> |
|
|
<button class="nav-item" data-screen="profile"> |
|
|
<i class="fas fa-user"></i> |
|
|
<span>الملف الشخصي</span> |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="transfer-screen" class="screen"> |
|
|
<header class="screen-header"> |
|
|
<button class="back-btn" id="transfer-back"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</button> |
|
|
<h2>تحويل الأموال</h2> |
|
|
</header> |
|
|
|
|
|
<div class="transfer-content"> |
|
|
<div class="transfer-steps"> |
|
|
<div class="step-indicator"> |
|
|
<div class="step active" id="transfer-step-1">1</div> |
|
|
<div class="step-line"></div> |
|
|
<div class="step" id="transfer-step-2">2</div> |
|
|
<div class="step-line"></div> |
|
|
<div class="step" id="transfer-step-3">3</div> |
|
|
</div> |
|
|
<div class="step-labels"> |
|
|
<span>اختيار المحفظة</span> |
|
|
<span>تفاصيل التحويل</span> |
|
|
<span>التأكيد</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="transfer-step-content active" id="transfer-step-content-1"> |
|
|
<h3>اختر المحفظة المرسلة</h3> |
|
|
<div class="wallet-selection" id="source-wallet-selection"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="transfer-step-content" id="transfer-step-content-2"> |
|
|
<h3>تفاصيل التحويل</h3> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>المحفظة المستقبلة</label> |
|
|
<select id="destination-wallet" class="form-control"> |
|
|
<option value="">-- اختر المحفظة --</option> |
|
|
<option value="jawali">جوالي</option> |
|
|
<option value="onecash">ONE Cash</option> |
|
|
<option value="cash">Cash</option> |
|
|
<option value="jaib">Jaib</option> |
|
|
<option value="mfloos">mFloos</option> |
|
|
<option value="mobilemoney">Mobile Money</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>رقم المستقبل</label> |
|
|
<div class="input-group"> |
|
|
<span class="input-prefix">+967</span> |
|
|
<input type="tel" id="recipient-number" placeholder="7xxxxxxxx" maxlength="9" class="form-control"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>المبلغ (ر.ي)</label> |
|
|
<input type="number" id="transfer-amount" placeholder="أدخل المبلغ" class="form-control"> |
|
|
<div class="amount-suggestions"> |
|
|
<button type="button" class="amount-btn" data-amount="100">100</button> |
|
|
<button type="button" class="amount-btn" data-amount="500">500</button> |
|
|
<button type="button" class="amount-btn" data-amount="1000">1000</button> |
|
|
<button type="button" class="amount-btn" data-amount="5000">5000</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>ملاحظة (اختياري)</label> |
|
|
<textarea id="transfer-note" placeholder="أضف ملاحظة..." rows="3" class="form-control"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="transfer-step-content" id="transfer-step-content-3"> |
|
|
<h3>تأكيد التحويل</h3> |
|
|
|
|
|
<div class="transfer-summary"> |
|
|
<div class="summary-item"> |
|
|
<span>من:</span> |
|
|
<strong id="summary-from-wallet">-</strong> |
|
|
</div> |
|
|
<div class="summary-item"> |
|
|
<span>إلى:</span> |
|
|
<strong id="summary-to-wallet">-</strong> |
|
|
</div> |
|
|
<div class="summary-item"> |
|
|
<span>رقم المستقبل:</span> |
|
|
<strong id="summary-recipient">-</strong> |
|
|
</div> |
|
|
<div class="summary-item"> |
|
|
<span>المبلغ:</span> |
|
|
<strong id="summary-amount">-</strong> |
|
|
</div> |
|
|
<div class="summary-item"> |
|
|
<span>رسوم التحويل:</span> |
|
|
<strong id="summary-fee">-</strong> |
|
|
</div> |
|
|
<div class="summary-item total"> |
|
|
<span>إجمالي المبلغ المخصوم:</span> |
|
|
<strong id="summary-total">-</strong> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>رمز PIN للتأكيد</label> |
|
|
<input type="password" id="transfer-pin" placeholder="أدخل رمز PIN" maxlength="6" class="form-control"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="transfer-navigation"> |
|
|
<button type="button" id="transfer-prev-btn" class="btn-secondary" style="display: none;"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
السابق |
|
|
</button> |
|
|
<button type="button" id="transfer-next-btn" class="btn-primary"> |
|
|
التالي |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<button type="button" id="transfer-confirm-btn" class="btn-primary" style="display: none;"> |
|
|
<i class="fas fa-check"></i> |
|
|
تأكيد التحويل |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="modal-overlay" class="modal-overlay"></div> |
|
|
|
|
|
|
|
|
<script type="module" src="https://unpkg.com/@capacitor/core@4/dist/capacitor.js"></script> |
|
|
|
|
|
|
|
|
<script src="notifications.js"></script> |
|
|
<script src="auth.js"></script> |
|
|
<script src="wallets.js"></script> |
|
|
<script src="app.js"></script> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
if (window.Capacitor) { |
|
|
console.log('Capacitor is available'); |
|
|
|
|
|
|
|
|
if (window.Capacitor.Plugins.LocalNotifications) { |
|
|
window.Capacitor.Plugins.LocalNotifications.requestPermissions(); |
|
|
} |
|
|
|
|
|
|
|
|
if (window.Capacitor.Plugins.StatusBar) { |
|
|
window.Capacitor.Plugins.StatusBar.setStyle({ style: 'LIGHT' }); |
|
|
window.Capacitor.Plugins.StatusBar.setBackgroundColor({ color: '#4361ee' }); |
|
|
} |
|
|
|
|
|
|
|
|
if (window.Capacitor.Plugins.SplashScreen) { |
|
|
setTimeout(() => { |
|
|
window.Capacitor.Plugins.SplashScreen.hide(); |
|
|
}, 2000); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
