Hugging Face's logo

Spaces:
Maeso
/
libyapay-platform
Running

App Files Community
libyapay-platform / index.html
Maeso's picture
Maeso
ุงูƒู…ู„ ุงู†ู‡ ุชุทุจูŠู‚ ุฏูุน ูˆู„ูŠุณ ู…ูˆู‚ุน ุงู„ูƒุชุฑูˆู†ูŠ
3596161 verified
raw
history blame contribute delete
11.8 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>LibyaPay - ุชุทุจูŠู‚ ุงู„ุฏูุน ุงู„ุฑู‚ู…ูŠ</title>
<meta name="description" content="ุชุทุจูŠู‚ ู„ูŠุจุงูŠ ู„ู„ุฏูุน ุงู„ุฑู‚ู…ูŠ ุงู„ุขู…ู† ูˆุงู„ุณุฑูŠุน ููŠ ู„ูŠุจูŠุง">
<meta name="theme-color" content="#9C27B0">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="apple-touch-icon" href="/static/icon-192.png">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'libyana': {
50: '#F3E5F5',
100: '#E1BEE7',
200: '#CE93D8',
300: '#BA68C8',
400: '#AB47BC',
500: '#9C27B0',
600: '#8E24AA',
700: '#7B1FA2',
800: '#6A1B9A',
900: '#4A148C',
}
},
fontFamily: {
'cairo': ['Cairo', 'sans-serif'],
},
animation: {
'fade-in': 'fadeIn 0.5s ease-out',
'slide-up': 'slideUp 0.5s ease-out',
'pulse-slow': 'pulse 3s infinite',
}
}
}
}
</script>
</head>
<body class="bg-neutral-50 font-cairo text-neutral-900 min-h-screen flex flex-col">
<!-- Mobile App Container -->
<div class="max-w-md mx-auto w-full bg-white min-h-screen shadow-xl flex flex-col">
<!-- App Header -->
<mobile-header></mobile-header>
<!-- Main App Content -->
<main class="flex-1 overflow-y-auto">
<!-- Balance Card -->
<div class="bg-gradient-to-br from-libyana-500 to-libyana-700 p-6 text-white">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-libyana-200 text-sm mb-1">ุงู„ุฑุตูŠุฏ ุงู„ุญุงู„ูŠ</p>
<h1 class="text-3xl font-bold">1,234.56 ุฏ.ู„</h1>
</div>
<div class="bg-white/20 rounded-full p-2">
<i data-feather="eye" class="w-5 h-5"></i>
</div>
</div>
<div class="flex gap-3">
<button class="bg-white text-libyana-600 px-4 py-2 rounded-full text-sm font-semibold flex items-center gap-2">
<i data-feather="plus" class="w-4 h-4"></i>
ุฅูŠุฏุงุน
</button>
<button class="bg-white/20 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center gap-2">
<i data-feather="arrow-up" class="w-4 h-4"></i>
ุชุญูˆูŠู„
</button>
</div>
</div>
<!-- Quick Actions -->
<div class="p-6">
<h2 class="text-lg font-semibold mb-4">ุฎุฏู…ุงุช ุณุฑูŠุนุฉ</h2>
<div class="grid grid-cols-4 gap-4">
<button class="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-neutral-50 transition-colors">
<div class="w-12 h-12 bg-libyana-100 rounded-full flex items-center justify-center">
<i data-feather="send" class="text-libyana-600 w-5 h-5"></i>
</div>
<span class="text-xs">ุฅุฑุณุงู„</span>
</button>
<button class="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-neutral-50 transition-colors">
<div class="w-12 h-12 bg-libyana-100 rounded-full flex items-center justify-center">
<i data-feather="download" class="text-libyana-600 w-5 h-5"></i>
</div>
<span class="text-xs">ุงุณุชู‚ุจุงู„</span>
</button>
<button class="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-neutral-50 transition-colors">
<div class="w-12 h-12 bg-libyana-100 rounded-full flex items-center justify-center">
<i data-feather="grid" class="text-libyana-600 w-5 h-5"></i>
</div>
<span class="text-xs">ู…ุณุญ QR</span>
</button>
<button class="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-neutral-50 transition-colors">
<div class="w-12 h-12 bg-libyana-100 rounded-full flex items-center justify-center">
<i data-feather="credit-card" class="text-libyana-600 w-5 h-5"></i>
</div>
<span class="text-xs">ุฏูุน ููˆุงุชูŠุฑ</span>
</button>
</div>
</div>
<!-- Recent Transactions -->
<div class="px-6 pb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">ุขุฎุฑ ุงู„ู…ุนุงู…ู„ุงุช</h2>
<button class="text-libyana-600 text-sm font-medium">ุนุฑุถ ุงู„ูƒู„</button>
</div>
<div class="space-y-3">
<div class="bg-white border border-neutral-200 rounded-xl p-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
<i data-feather="arrow-down-left" class="text-green-600 w-4 h-4"></i>
</div>
<div>
<p class="font-medium">ุงุณุชู„ุงู… ู…ู† ุฃุญู…ุฏ ู…ุญู…ุฏ</p>
<p class="text-xs text-neutral-500">ู…ู†ุฐ 5 ุฏู‚ุงุฆู‚</p>
</div>
</div>
<div class="text-left">
<p class="font-semibold text-green-600">+250.00 ุฏ.ู„</p>
</div>
</div>
<div class="bg-white border border-neutral-200 rounded-xl p-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<i data-feather="arrow-up-right" class="text-red-600 w-4 h-4"></i>
</div>
<div>
<p class="font-medium">ุชุญูˆูŠู„ ุฅู„ู‰ ูุงุทู…ุฉ ุนู„ูŠ</p>
<p class="text-xs text-neutral-500">ู…ู†ุฐ ุณุงุนุชูŠู†</p>
</div>
</div>
<div class="text-left">
<p class="font-semibold text-red-600">-100.00 ุฏ.ู„</p>
</div>
</div>
<div class="bg-white border border-neutral-200 rounded-xl p-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i data-feather="smartphone" class="text-blue-600 w-4 h-4"></i>
</div>
<div>
<p class="font-medium">ุดุญู† ุฑุตูŠุฏ - Libyana</p>
<p class="text-xs text-neutral-500">ุฃู…ุณ</p>
</div>
</div>
<div class="text-left">
<p class="font-semibold text-red-600">-20.00 ุฏ.ู„</p>
</div>
</div>
</div>
</div>
<!-- Services Section -->
<div class="px-6 pb-6">
<h2 class="text-lg font-semibold mb-4">ุฌู…ูŠุน ุงู„ุฎุฏู…ุงุช</h2>
<div class="grid grid-cols-2 gap-3">
<button class="bg-white border border-neutral-200 rounded-xl p-4 flex items-center gap-3 hover:bg-neutral-50 transition-colors">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
<i data-feather="zap" class="text-orange-600 w-5 h-5"></i>
</div>
<div class="text-right">
<p class="font-medium text-sm">ุงู„ูƒู‡ุฑุจุงุก</p>
<p class="text-xs text-neutral-500">GECOL</p>
</div>
</button>
<button class="bg-white border border-neutral-200 rounded-xl p-4 flex items-center gap-3 hover:bg-neutral-50 transition-colors">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i data-feather="droplet" class="text-blue-600 w-5 h-5"></i>
</div>
<div class="text-right">
<p class="font-medium text-sm">ุงู„ู…ูŠุงู‡</p>
<p class="text-xs text-neutral-500">GWA</p>
</div>
</button>
<button class="bg-white border border-neutral-200 rounded-xl p-4 flex items-center gap-3 hover:bg-neutral-50 transition-colors">
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
<i data-feather="wifi" class="text-purple-600 w-5 h-5"></i>
</div>
<div class="text-right">
<p class="font-medium text-sm">ุงู„ุฅู†ุชุฑู†ุช</p>
<p class="text-xs text-neutral-500">ู…ุฒูˆุฏูŠ ุงู„ุฎุฏู…ุฉ</p>
</div>
</button>
<button class="bg-white border border-neutral-200 rounded-xl p-4 flex items-center gap-3 hover:bg-neutral-50 transition-colors">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
<i data-feather="phone" class="text-green-600 w-5 h-5"></i>
</div>
<div class="text-right">
<p class="font-medium text-sm">ุดุญู† ุฑุตูŠุฏ</p>
<p class="text-xs text-neutral-500">ุฌู…ูŠุน ุงู„ุดุจูƒุงุช</p>
</div>
</button>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<mobile-nav></mobile-nav>
</div>
<script src="components/mobile-header.js"></script>
<script src="components/mobile-nav.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
</body>
</html>