chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
352
screen_design/zappcare_billing_subscription/code.html
Normal file
352
screen_design/zappcare_billing_subscription/code.html
Normal file
@ -0,0 +1,352 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ZappCare Billing & Subscription</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-tint": "#0c6780",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"on-background": "#191c1e",
|
||||
"primary-container": "#87ceeb",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-surface": "#191c1e",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary": "#0c6780",
|
||||
"surface": "#f7f9fc",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-container": "#005870",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary-container": "#36647e",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"secondary": "#35637d",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"tertiary-container": "#fbb674",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"outline": "#6f787d",
|
||||
"tertiary": "#865219",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"error-container": "#ffdad6"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="z-50 flex flex-col space-y-8 fixed left-0 top-0 h-full w-24 flex flex-col items-center py-8 bg-slate-50/85 dark:bg-slate-900/85 backdrop-blur-xl shadow-2xl shadow-slate-900/5">
|
||||
<div class="mb-6">
|
||||
<span class="text-sky-800 dark:text-sky-300 font-bold text-xl font-headline">ZC</span>
|
||||
</div>
|
||||
<nav class="flex flex-col items-center space-y-6 w-full">
|
||||
<a class="group flex flex-col items-center p-3 text-slate-500 dark:text-slate-400 opacity-70 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors ease-in-out duration-200 hover:scale-105" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Overview</span>
|
||||
</a>
|
||||
<a class="group flex flex-col items-center p-3 text-slate-500 dark:text-slate-400 opacity-70 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors ease-in-out duration-200 hover:scale-105" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="card_membership">card_membership</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Subscription</span>
|
||||
</a>
|
||||
<a class="group flex flex-col items-center p-3 bg-sky-200 dark:bg-sky-900/60 text-sky-900 dark:text-sky-100 rounded-xl scale-110 ease-in-out duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Billing</span>
|
||||
</a>
|
||||
<a class="group flex flex-col items-center p-3 text-slate-500 dark:text-slate-400 opacity-70 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors ease-in-out duration-200 hover:scale-105" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group_add">group_add</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Team</span>
|
||||
</a>
|
||||
<a class="group flex flex-col items-center p-3 text-slate-500 dark:text-slate-400 opacity-70 hover:bg-slate-200/50 dark:hover:bg-slate-700/50 transition-colors ease-in-out duration-200 hover:scale-105" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-['Manrope'] tracking-tight text-[10px] font-semibold mt-1">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- TopAppBar Shell -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-6rem)] h-16 flex justify-between items-center px-12 bg-white/80 dark:bg-slate-950/80 backdrop-blur-lg z-40">
|
||||
<div class="flex items-center space-x-4">
|
||||
<h1 class="text-xl font-black text-sky-900 dark:text-white font-['Manrope']">ZappCare</h1>
|
||||
<span class="h-4 w-[1px] bg-outline-variant/30"></span>
|
||||
<span class="text-sm font-label text-on-surface-variant font-medium">Billing & Invoices</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex space-x-6 items-center">
|
||||
<a class="text-slate-600 dark:text-slate-400 font-['Inter'] text-sm hover:text-sky-600 transition-all" href="#">Docs</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 font-['Inter'] text-sm hover:text-sky-600 transition-all" href="#">Support</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4 border-l border-outline-variant/20 pl-6">
|
||||
<button class="material-symbols-outlined text-sky-700 dark:text-sky-400">notifications</button>
|
||||
<button class="material-symbols-outlined text-sky-700 dark:text-sky-400">help_outline</button>
|
||||
<img alt="User Profile" class="w-8 h-8 rounded-full object-cover" data-alt="Close-up portrait of a professional man in a business casual environment with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTQrK1OvNUi8fEA_mp1tDHN-qFIotJvwK9-0PNG53O3uDCpGMv5o6hz8WblIrJfkAuKBwLNic6m-cQKrKjyeppE6FIG46r_qqayHOClK-QVMQReHnsAS43JpEIJoWIoySAcshqXFVsxXio6KltN9ynUmNfm6lh3DWjrb0sF4ioVF6d69U9T-UoFN9zzH9etjvjVP50D0unUU20qOjmvSIR5cOGmuEr8KIgl-at1XTpJdva8ob3zB7y9-BbhLJm3OKocKPwosz69Ek"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-24 pt-24 px-12 pb-12 min-h-screen">
|
||||
<div class="max-w-7xl mx-auto space-y-8">
|
||||
<!-- Subscription Overview Header -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Current Plan Card (Bento Style) -->
|
||||
<div class="lg:col-span-2 bg-surface-container-lowest p-8 rounded-full shadow-sm flex justify-between items-center relative overflow-hidden group">
|
||||
<div class="z-10">
|
||||
<span class="text-primary font-bold font-label tracking-wider uppercase text-xs">Current Subscription</span>
|
||||
<h2 class="text-4xl font-black font-headline text-on-surface mt-2">Pro Plan</h2>
|
||||
<div class="flex items-center mt-4 space-x-4">
|
||||
<div class="flex items-center text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-primary text-sm mr-2" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<span class="text-sm font-medium">Renewal: Oct 24, 2024</span>
|
||||
</div>
|
||||
<div class="flex items-center px-3 py-1 bg-primary-container/20 rounded-full">
|
||||
<span class="h-2 w-2 rounded-full bg-primary mr-2"></span>
|
||||
<span class="text-xs font-bold text-on-primary-container">ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-10 flex flex-col items-end space-y-3">
|
||||
<div class="text-right">
|
||||
<span class="text-sm text-on-surface-variant">Annual Billing</span>
|
||||
<p class="text-2xl font-headline font-bold text-on-surface">$1,490<span class="text-sm font-normal text-on-surface-variant">/year</span></p>
|
||||
</div>
|
||||
<button class="bg-gradient-to-br from-primary to-primary-container text-white px-8 py-3 rounded-full font-bold text-sm hover:shadow-lg transition-all active:scale-95">
|
||||
Manage Plan
|
||||
</button>
|
||||
</div>
|
||||
<!-- Decorative Abstract Gradient -->
|
||||
<div class="absolute -right-20 -top-20 w-64 h-64 bg-primary-container/10 rounded-full blur-3xl group-hover:bg-primary-container/20 transition-colors"></div>
|
||||
</div>
|
||||
<!-- Payment Method Mini-Card -->
|
||||
<div class="bg-surface-container-low p-8 rounded-full flex flex-col justify-between border border-outline-variant/10">
|
||||
<div class="flex justify-between items-start">
|
||||
<span class="material-symbols-outlined text-3xl text-primary">credit_card</span>
|
||||
<button class="text-primary text-sm font-bold hover:underline">Update</button>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface-variant">Primary Method</p>
|
||||
<p class="text-lg font-headline font-bold text-on-surface mt-1">•••• •••• •••• 8291</p>
|
||||
<p class="text-xs text-on-surface-variant mt-1">Visa Business — Expires 09/27</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quotas & Usage Chart Section -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<!-- Usage Breakdown Chart (Asymmetric) -->
|
||||
<div class="lg:col-span-3 bg-surface-container-lowest p-8 rounded-full shadow-sm">
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold font-headline">Messaging Volume</h3>
|
||||
<p class="text-sm text-on-surface-variant">Daily activity over the last 30 days</p>
|
||||
</div>
|
||||
<select class="bg-surface-container-low border-none rounded-full text-sm font-medium px-4 focus:ring-primary-container">
|
||||
<option>Last 30 Days</option>
|
||||
<option>Last 3 Months</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="h-64 flex items-end justify-between space-x-2 px-2">
|
||||
<!-- Simulated Chart Bars -->
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[40%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[55%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[35%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-primary-container rounded-t-full h-[85%]"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[60%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[45%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[70%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[30%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[90%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[50%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-surface-container rounded-t-full h-[65%] hover:bg-primary-container/40 transition-colors"></div>
|
||||
<div class="w-full bg-primary rounded-t-full h-[75%]"></div>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-between items-center pt-6 border-t border-outline-variant/10">
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-primary mr-2"></span><span class="text-xs font-medium text-on-surface-variant">Inbound</span></div>
|
||||
<div class="flex items-center"><span class="w-3 h-3 rounded-full bg-primary-container mr-2"></span><span class="text-xs font-medium text-on-surface-variant">Outbound</span></div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">Avg. 1,420 msgs / day</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Usage Quotas (Vertical Stack) -->
|
||||
<div class="space-y-6">
|
||||
<!-- Messages Quota -->
|
||||
<div class="bg-surface-container-low p-6 rounded-full">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-xs font-bold text-on-surface-variant uppercase tracking-tighter">Messages</span>
|
||||
<span class="text-xs font-bold text-primary">72% Used</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-[72%]"></div>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-headline font-bold">36,012 <span class="text-xs font-normal text-on-surface-variant">/ 50k</span></p>
|
||||
</div>
|
||||
<!-- Seats Quota -->
|
||||
<div class="bg-surface-container-low p-6 rounded-full">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-xs font-bold text-on-surface-variant uppercase tracking-tighter">Team Seats</span>
|
||||
<span class="text-xs font-bold text-on-surface-variant">80% Used</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-secondary w-[80%]"></div>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-headline font-bold">12 <span class="text-xs font-normal text-on-surface-variant">/ 15</span></p>
|
||||
</div>
|
||||
<!-- Broadcasts Quota -->
|
||||
<div class="bg-surface-container-low p-6 rounded-full">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-xs font-bold text-on-surface-variant uppercase tracking-tighter">Broadcasts</span>
|
||||
<span class="text-xs font-bold text-error">95% Used</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-surface-container rounded-full overflow-hidden">
|
||||
<div class="h-full bg-error w-[95%]"></div>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-headline font-bold">19 <span class="text-xs font-normal text-on-surface-variant">/ 20</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Invoices / Billing History Section -->
|
||||
<section class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden">
|
||||
<div class="px-10 py-8 border-b border-outline-variant/10 flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold font-headline">Billing History</h3>
|
||||
<p class="text-sm text-on-surface-variant">Download and view past invoices</p>
|
||||
</div>
|
||||
<button class="flex items-center text-sm font-bold text-primary group">
|
||||
<span class="material-symbols-outlined mr-2">download</span>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto px-6 pb-6">
|
||||
<table class="w-full text-left">
|
||||
<thead>
|
||||
<tr class="text-on-surface-variant text-xs uppercase tracking-wider">
|
||||
<th class="px-4 py-6 font-bold">Invoice ID</th>
|
||||
<th class="px-4 py-6 font-bold">Date</th>
|
||||
<th class="px-4 py-6 font-bold">Amount</th>
|
||||
<th class="px-4 py-6 font-bold">Status</th>
|
||||
<th class="px-4 py-6 text-right font-bold">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/5">
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-4 py-5 font-bold text-sm">#INV-2024-009</td>
|
||||
<td class="px-4 py-5 text-sm text-on-surface-variant">Oct 24, 2024</td>
|
||||
<td class="px-4 py-5 font-bold text-sm">$1,490.00</td>
|
||||
<td class="px-4 py-5">
|
||||
<span class="px-3 py-1 bg-primary-container/20 text-on-primary-container text-[10px] font-black rounded-full">PAID</span>
|
||||
</td>
|
||||
<td class="px-4 py-5 text-right">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">description</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low transition-colors">
|
||||
<td class="px-4 py-5 font-bold text-sm">#INV-2023-008</td>
|
||||
<td class="px-4 py-5 text-sm text-on-surface-variant">Oct 24, 2023</td>
|
||||
<td class="px-4 py-5 font-bold text-sm">$1,490.00</td>
|
||||
<td class="px-4 py-5">
|
||||
<span class="px-3 py-1 bg-primary-container/20 text-on-primary-container text-[10px] font-black rounded-full">PAID</span>
|
||||
</td>
|
||||
<td class="px-4 py-5 text-right">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">description</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low transition-colors">
|
||||
<td class="px-4 py-5 font-bold text-sm">#INV-2022-007</td>
|
||||
<td class="px-4 py-5 text-sm text-on-surface-variant">Oct 24, 2022</td>
|
||||
<td class="px-4 py-5 font-bold text-sm">$990.00</td>
|
||||
<td class="px-4 py-5">
|
||||
<span class="px-3 py-1 bg-primary-container/20 text-on-primary-container text-[10px] font-black rounded-full">PAID</span>
|
||||
</td>
|
||||
<td class="px-4 py-5 text-right">
|
||||
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">description</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Bottom CTA Grid (Bento) -->
|
||||
<section class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="glass-panel p-10 rounded-full border border-outline-variant/10 flex items-center space-x-8 group">
|
||||
<div class="p-6 bg-tertiary-container/20 rounded-full text-tertiary">
|
||||
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1;">rocket_launch</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold font-headline">Need more power?</h4>
|
||||
<p class="text-on-surface-variant mt-1 text-sm">Upgrade to Enterprise for unlimited broadcasts and 24/7 dedicated support.</p>
|
||||
<a class="inline-block mt-4 text-primary font-bold text-sm border-b-2 border-primary-container hover:border-primary transition-all" href="#">Talk to Sales</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container p-10 rounded-full border border-outline-variant/10 flex items-center justify-between">
|
||||
<div>
|
||||
<h4 class="text-xl font-bold font-headline">Help Center</h4>
|
||||
<p class="text-on-surface-variant mt-1 text-sm">Have questions about your billing or usage limits?</p>
|
||||
</div>
|
||||
<button class="bg-surface-container-lowest p-4 rounded-full shadow-sm hover:shadow-md transition-all">
|
||||
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB (Hidden as per rules on detail/setting screens, but structure provided if needed) -->
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_billing_subscription/screen.png
Normal file
BIN
screen_design/zappcare_billing_subscription/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Reference in New Issue
Block a user