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
329
screen_design/zappcare_create_template_request/code.html
Normal file
329
screen_design/zappcare_create_template_request/code.html
Normal file
@ -0,0 +1,329 @@
|
||||
<!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 - Create Template</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&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": {
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"background": "#f7f9fc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"outline": "#6f787d",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"tertiary": "#865219",
|
||||
"on-primary-container": "#005870",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"inverse-surface": "#2d3133",
|
||||
"on-surface": "#191c1e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface": "#f7f9fc",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"on-background": "#191c1e",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"surface-tint": "#0c6780",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"primary-container": "#87ceeb",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container": "#eceef0",
|
||||
"primary": "#0c6780",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"secondary": "#35637d",
|
||||
"primary-fixed": "#baeaff"
|
||||
},
|
||||
"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
|
||||
}
|
||||
.whatsapp-bg {
|
||||
background-color: #e5ddd5;
|
||||
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuDfL7PcPkN70760n-t_vFNqauujQSzU8hCEufKv0_ZJjHOTugNyMjk9tVNREZzjiLuLnDR65NWavSgdqOYTZbFGlJ42i-abzEeQGOipBlW8ROB35hHmhvZk0O774ked8U-IfWmBrm94MrDv1je_8sRFPGCywvbXXTcIdWrjvp4x3H-g6sB_VTQwY0d-SKh14cmBPABvZMbn-Z7E8AznrgmcSbo13-T5DkVHbKKlhUCGXx4oOUWJRsjKpt7xgziFP3XPwJPHgI31rK8)
|
||||
}</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface antialiased flex h-screen overflow-hidden">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="h-screen w-72 flex-shrink-0 sticky left-0 top-0 bg-[#f2f4f6] dark:bg-slate-900/80 backdrop-blur-xl shadow-[24px_0_24px_-4px_rgba(25,28,30,0.04)] flex flex-col p-4 gap-2 z-50">
|
||||
<div class="mb-6 px-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container">
|
||||
<span class="material-symbols-outlined">shield_person</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-sm font-bold font-headline leading-tight text-on-surface">Client Settings</h2>
|
||||
<p class="text-[10px] text-slate-500 uppercase tracking-wider">Manage workspace configurations</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<!-- Navigation Items -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="schedule">schedule</span>
|
||||
<span class="font-medium text-sm">Business Hours</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="rule">rule</span>
|
||||
<span class="font-medium text-sm">Auto-Assignment</span>
|
||||
</a>
|
||||
<!-- Active State: Templates -->
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-[#87ceeb] text-[#005870] rounded-xl font-bold transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="font-medium text-sm">Templates</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
<span class="font-medium text-sm">Team Members</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="hub">hub</span>
|
||||
<span class="font-medium text-sm">Integrations</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-200 group" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="history">history</span>
|
||||
<span class="font-medium text-sm">Audit Logs</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 flex flex-col gap-1">
|
||||
<button class="mb-4 bg-gradient-to-br from-primary to-primary-container text-white rounded-xl py-3 px-4 font-bold text-sm shadow-lg shadow-primary/20 flex items-center justify-center gap-2 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined text-sm">add</span>
|
||||
New Template
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="support_agent">support_agent</span>
|
||||
<span class="font-medium text-sm">Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span class="font-medium text-sm">Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Workspace -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full top-0 sticky flex justify-between items-center px-6 py-3 bg-[#f7f9fc] dark:bg-slate-900 z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="text-xl font-bold text-[#0c6780] font-headline tracking-tight">ZappCare</h1>
|
||||
<div class="h-6 w-[1px] bg-outline-variant/30"></div>
|
||||
<nav class="hidden md:flex gap-6">
|
||||
<a class="text-sm font-semibold text-[#0c6780] border-b-2 border-[#0c6780] pb-1" href="#">Templates</a>
|
||||
<a class="text-sm font-semibold text-slate-500 hover:text-[#0c6780] transition-colors duration-200 pb-1" href="#">Campaigns</a>
|
||||
<a class="text-sm font-semibold text-slate-500 hover:text-[#0c6780] transition-colors duration-200 pb-1" href="#">Analytics</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative hidden sm:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
|
||||
<input class="bg-surface-container-low border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary-container w-64" placeholder="Search templates..." type="text"/>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-500 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-500 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||
</button>
|
||||
<img alt="Admin Profile" class="w-8 h-8 rounded-full object-cover ring-2 ring-primary-container/20" data-alt="Professional portrait of a male corporate administrator with a confident smile and modern office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxbC-e_K_xMZkJ2jn2-UoXvbJt1omKIC6zocRoX2lC8CWnAy7q4u5hAd0B2jLMnBcGcpW438v-I8LWPEaNfRRYCN4DPzJeXFp9Uq0LcjyCC_5pRi7OLUELxqaNVPw9Wcm0MKI6wC9Ngob0LYpV6Ei3YLKwoW1VwTn_sIPfRDg3sHxFfS-m3WJuATA3AFM0VtG9XIuzj8QNDkYS1U6RuTfB9V6VgiHZJ-QS9xtU_Wz0UxaoIeaUACUREyzoPCqku6DdNwY7ZMhOR9M"/>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<main class="flex-1 overflow-y-auto p-8 flex flex-col gap-8">
|
||||
<header class="flex justify-between items-end">
|
||||
<div>
|
||||
<nav class="flex items-center gap-2 text-sm text-slate-500 mb-2">
|
||||
<span>Templates</span>
|
||||
<span class="material-symbols-outlined text-xs">chevron_right</span>
|
||||
<span class="text-on-surface">Create Template Request</span>
|
||||
</nav>
|
||||
<h2 class="text-3xl font-extrabold font-headline tracking-tight text-on-surface">Create Template Request</h2>
|
||||
<p class="text-slate-500 max-w-lg mt-2">Design and submit your WhatsApp message template for approval. Follow Meta's quality guidelines to ensure quick validation.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-6 py-2.5 rounded-xl border border-outline-variant/30 text-slate-600 font-semibold hover:bg-slate-100 transition-colors">Save Draft</button>
|
||||
<button class="px-8 py-2.5 rounded-xl bg-gradient-to-r from-primary to-primary-container text-white font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">Submit for Review</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Layout Grid -->
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<!-- Form Column -->
|
||||
<div class="col-span-12 lg:col-span-7 flex flex-col gap-6">
|
||||
<!-- Basic Information Section -->
|
||||
<section class="bg-surface-container-lowest p-8 rounded-3xl shadow-sm space-y-6">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="w-8 h-8 rounded-lg bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
||||
<span class="material-symbols-outlined text-lg">info</span>
|
||||
</span>
|
||||
<h3 class="text-lg font-bold font-headline">Basic Information</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Template Name</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white transition-all" placeholder="e.g. appointment_reminder_v1" type="text"/>
|
||||
<p class="text-[11px] text-slate-400 italic">Use lowercase letters, numbers, and underscores only.</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Category</label>
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary">
|
||||
<option>Marketing</option>
|
||||
<option>Utility</option>
|
||||
<option>Authentication</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Language</label>
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary">
|
||||
<option>English (US)</option>
|
||||
<option>Spanish (ES)</option>
|
||||
<option>Portuguese (BR)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Header Type</label>
|
||||
<select class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary">
|
||||
<option>None</option>
|
||||
<option>Text</option>
|
||||
<option>Image</option>
|
||||
<option>Video</option>
|
||||
<option>Document</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Content Section -->
|
||||
<section class="bg-surface-container-lowest p-8 rounded-3xl shadow-sm space-y-6">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="w-8 h-8 rounded-lg bg-tertiary-container flex items-center justify-center text-on-tertiary-container">
|
||||
<span class="material-symbols-outlined text-lg">edit_note</span>
|
||||
</span>
|
||||
<h3 class="text-lg font-bold font-headline">Message Content</h3>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<label class="text-sm font-semibold text-slate-700">Body Text</label>
|
||||
<button class="text-[11px] font-bold text-primary flex items-center gap-1 hover:underline">
|
||||
<span class="material-symbols-outlined text-xs">add_circle</span> Add Variable {{1}}
|
||||
</button>
|
||||
</div>
|
||||
<textarea class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white transition-all resize-none" placeholder="Enter message body here..." rows="6">Hello {{1}}! This is a reminder for your appointment on {{2}} at {{3}}. We look forward to seeing you!</textarea>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Footer Text (Optional)</label>
|
||||
<input class="w-full bg-surface-container-highest border-none rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white transition-all" placeholder="e.g. Reply STOP to opt out" type="text"/>
|
||||
</div>
|
||||
<div class="space-y-2 pt-2">
|
||||
<label class="text-sm font-semibold text-slate-700 ml-1">Buttons (Optional)</label>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-lg text-slate-600 text-xs font-bold border border-dashed border-slate-300 hover:border-primary hover:text-primary transition-all">
|
||||
<span class="material-symbols-outlined text-sm">call</span> Call to Action
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-lg text-slate-600 text-xs font-bold border border-dashed border-slate-300 hover:border-primary hover:text-primary transition-all">
|
||||
<span class="material-symbols-outlined text-sm">reply</span> Quick Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Preview Column -->
|
||||
<div class="col-span-12 lg:col-span-5">
|
||||
<div class="sticky top-8 space-y-4">
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<h3 class="text-sm font-bold uppercase tracking-widest text-slate-400">Live Preview</h3>
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 text-[10px] font-bold rounded uppercase">WhatsApp Business</span>
|
||||
</div>
|
||||
<div class="aspect-[9/16] max-w-[340px] mx-auto whatsapp-bg rounded-[3rem] p-4 shadow-2xl relative border-[8px] border-slate-800 overflow-hidden">
|
||||
<!-- Phone Top Bar -->
|
||||
<div class="flex justify-between items-center px-4 pt-4 pb-6">
|
||||
<span class="text-[10px] font-bold text-slate-600">9:41</span>
|
||||
<div class="flex gap-1 items-center">
|
||||
<span class="material-symbols-outlined text-[10px]">signal_cellular_alt</span>
|
||||
<span class="material-symbols-outlined text-[10px]">wifi</span>
|
||||
<span class="material-symbols-outlined text-[10px]">battery_full</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WhatsApp Header -->
|
||||
<div class="bg-[#075e54] text-white p-3 -mx-4 -mt-2 flex items-center gap-3">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-300 flex-shrink-0">
|
||||
<img alt="Profile" class="w-full h-full rounded-full object-cover" data-alt="Minimalist company logo with geometric shapes and professional blue and white color scheme on circular background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB9xxj_JdhwqnbQDS5iPAgy0oDQjLw6jujdPu5EkXsY4DcFyP8ZMp5hK49EfhUZmo5g6wb5qu2mzOCO9US-nYkNItVhwR9-b3yy5TgdzX7Xn0NkqSj8CuU06RsezLi8lMU3nm_6Y4RxyZgKJL5TpQ2FIqIV8HhTLmbaXjjnFz7Jjh1K67JgvEOI1zBSLbq9Qk5o8AgVpkTjX8rGSmyupmEcVkkfZGyF1tD4yGX5zOqQ_Ljl3EY6xrKTmPuy4TSopjkD1btXIIfuoEQ"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-bold">ZappCare Support</p>
|
||||
<p class="text-[10px] opacity-80">Online</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</div>
|
||||
<!-- Chat Area -->
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="bg-white rounded-xl rounded-tl-none p-3 shadow-sm max-w-[85%] relative">
|
||||
<div class="space-y-2">
|
||||
<p class="text-xs text-slate-800">Hello <span class="text-primary font-bold">[Customer Name]</span>! This is a reminder for your appointment on <span class="text-primary font-bold">[Date]</span> at <span class="text-primary font-bold">[Time]</span>. We look forward to seeing you!</p>
|
||||
<p class="text-[10px] text-slate-400 italic">Reply STOP to opt out</p>
|
||||
</div>
|
||||
<div class="absolute bottom-1 right-2 flex items-center gap-1">
|
||||
<span class="text-[8px] text-slate-400">10:42 AM</span>
|
||||
<span class="material-symbols-outlined text-[10px] text-blue-400">done_all</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phone Bottom Indicator -->
|
||||
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 bg-slate-800 rounded-full"></div>
|
||||
</div>
|
||||
<!-- Tip Box -->
|
||||
<div class="bg-[#87ceeb]/10 border border-[#87ceeb]/20 p-4 rounded-2xl flex gap-3">
|
||||
<span class="material-symbols-outlined text-primary">lightbulb</span>
|
||||
<div>
|
||||
<h4 class="text-xs font-bold text-on-primary-container">Pro Tip</h4>
|
||||
<p class="text-[11px] text-slate-600 mt-1 leading-relaxed">Templates with higher personalization variables ({{1}}, {{2}}) typically see 40% higher engagement rates in WhatsApp Business campaigns.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
screen_design/zappcare_create_template_request/screen.png
Normal file
BIN
screen_design/zappcare_create_template_request/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Reference in New Issue
Block a user