216 lines
12 KiB
HTML
216 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Click Client Portal | Send SMS</title>
|
|
<link rel="icon" type="image/png" href="assets/img/click-logo.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="assets/css/theme.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container py-3 py-lg-4">
|
|
<header class="topbar">
|
|
<div class="topbar-card d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<img src="assets/img/click-logo.png" alt="Click Mobile" class="brand-logo">
|
|
<div>
|
|
<div class="small text-uppercase text-primary fw-semibold">Client Portal</div>
|
|
<div class="fw-semibold">Compose outbound SMS</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap align-items-center gap-2">
|
|
<span class="badge rounded-pill text-bg-light px-3 py-2">Acme Finance Ltd</span>
|
|
<a href="sms-traffic.html" class="btn btn-ghost px-4"><i class="bi bi-arrow-left me-2"></i>Back to traffic</a>
|
|
<a href="index.html" class="btn btn-ghost px-4">Log out</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="traffic-hero mb-4">
|
|
<div class="row g-4 align-items-end">
|
|
<div class="col-lg-8">
|
|
<div class="text-uppercase small fw-semibold opacity-75 mb-2">Campaign Composer</div>
|
|
<h1 class="display-6 fw-semibold mb-3">Create and send an SMS campaign in one flow.</h1>
|
|
<p class="fs-5 opacity-75 mb-0">
|
|
Draft the message, choose sender and recipients, then send immediately or schedule it for later delivery.
|
|
</p>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="rounded-4 p-3 bg-white bg-opacity-10">
|
|
<div class="small opacity-75">Available credit</div>
|
|
<div class="h3 mb-0">48.2k</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="rounded-4 p-3 bg-white bg-opacity-10">
|
|
<div class="small opacity-75">Sender IDs</div>
|
|
<div class="h3 mb-0">3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="row g-4">
|
|
<div class="col-xl-8">
|
|
<div class="compose-card mb-4">
|
|
<div class="section-kicker mb-2">Message setup</div>
|
|
<div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 mb-4">
|
|
<div>
|
|
<h2 class="h3 mb-1">Compose message</h2>
|
|
<p class="text-secondary mb-0">Set campaign details, recipients, and delivery rules before sending.</p>
|
|
</div>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<span class="option-chip active"><i class="bi bi-lightning-charge"></i>Send now</span>
|
|
<span class="option-chip"><i class="bi bi-calendar-event"></i>Schedule</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<label for="campaignName" class="form-label fw-semibold">Campaign name</label>
|
|
<input id="campaignName" type="text" class="form-control" value="March savings reminder">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="senderSelect" class="form-label fw-semibold">Sender ID</label>
|
|
<select id="senderSelect" class="form-select">
|
|
<option>CLICKINFO</option>
|
|
<option>CLICKOTP</option>
|
|
<option>ACMEBANK</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="country" class="form-label fw-semibold">Primary market</label>
|
|
<select id="country" class="form-select">
|
|
<option>Ghana</option>
|
|
<option>Malawi</option>
|
|
<option>Zambia</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
|
<label for="messageText" class="form-label fw-semibold mb-0">Message content</label>
|
|
<span class="muted-label">54 / 160 characters</span>
|
|
</div>
|
|
<textarea id="messageText" class="form-control py-3" rows="5">Dear customer, grow your savings with our new fixed plan. Visit any branch today.</textarea>
|
|
<div class="char-progress mt-3"><span></span></div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-2 mb-2">
|
|
<label class="form-label fw-semibold mb-0">Recipients</label>
|
|
<span class="muted-label">Paste numbers, upload CSV, or target a saved segment</span>
|
|
</div>
|
|
<div class="recipient-box">
|
|
<span class="recipient-tag"><i class="bi bi-telephone"></i>+233245559001</span>
|
|
<span class="recipient-tag"><i class="bi bi-telephone"></i>+233502287744</span>
|
|
<span class="recipient-tag"><i class="bi bi-telephone"></i>+265884412280</span>
|
|
<span class="recipient-tag"><i class="bi bi-people"></i>Retail Savers Segment</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<label for="deliveryWindow" class="form-label fw-semibold">Delivery window</label>
|
|
<select id="deliveryWindow" class="form-select">
|
|
<option>Immediately</option>
|
|
<option>09:00 - 12:00</option>
|
|
<option>12:00 - 15:00</option>
|
|
<option>15:00 - 18:00</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="failover" class="form-label fw-semibold">Retry policy</label>
|
|
<select id="failover" class="form-select">
|
|
<option>Retry once after 5 minutes</option>
|
|
<option>Retry twice after 10 minutes</option>
|
|
<option>No retries</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column flex-lg-row gap-3">
|
|
<button type="button" class="btn btn-click flex-grow-1"><i class="bi bi-send me-2"></i>Send SMS campaign</button>
|
|
<button type="button" class="btn btn-ghost flex-grow-1"><i class="bi bi-floppy me-2"></i>Save draft</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-4">
|
|
<aside class="preview-card mb-4">
|
|
<div class="section-kicker mb-2">Live preview</div>
|
|
<h2 class="h4 mb-3">Recipient experience</h2>
|
|
<div class="preview-phone">
|
|
<div class="preview-screen">
|
|
<div class="small text-secondary mb-3">Today 10:35</div>
|
|
<div class="sms-bubble-in mb-3">Acme Bank Promotions</div>
|
|
<div class="sms-bubble-out">
|
|
Dear customer, grow your savings with our new fixed plan. Visit any branch today.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<aside class="preview-card mb-4">
|
|
<div class="section-kicker mb-2">Campaign summary</div>
|
|
<h2 class="h4 mb-3">Before you send</h2>
|
|
<div class="summary-list">
|
|
<div class="summary-item">
|
|
<div>
|
|
<div class="fw-semibold">Estimated recipients</div>
|
|
<div class="muted-label">Individual numbers plus one saved segment</div>
|
|
</div>
|
|
<div class="fw-semibold">2,460</div>
|
|
</div>
|
|
<div class="summary-item">
|
|
<div>
|
|
<div class="fw-semibold">Estimated cost</div>
|
|
<div class="muted-label">Based on Ghana and Malawi routes</div>
|
|
</div>
|
|
<div class="fw-semibold">2,214 credits</div>
|
|
</div>
|
|
<div class="summary-item">
|
|
<div>
|
|
<div class="fw-semibold">Encoding</div>
|
|
<div class="muted-label">Single-part GSM message</div>
|
|
</div>
|
|
<div class="fw-semibold">1 part</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<aside class="detail-card">
|
|
<h2 class="h5 mb-3">Sending checklist</h2>
|
|
<div class="timeline-item pt-0 mt-0 border-0">
|
|
<div class="fw-semibold">Sender ID approved</div>
|
|
<div class="muted-label">CLICKINFO is active for Ghana and Malawi.</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="fw-semibold">Quiet hours</div>
|
|
<div class="muted-label">No restrictions detected for the selected delivery window.</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="fw-semibold">Credit balance</div>
|
|
<div class="muted-label">Sufficient balance available to send this campaign.</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|