ondc-campaign-sdk
Version:
[](https://www.npmjs.com/package/ondc-campaign-sdk) [](LICENSE) [ • 35.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campaign Carousel Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 20px;
background: #f8fafc;
}
.test-container {
max-width: 800px;
margin: 0 auto;
}
#sdkCampaignsCarousel .carousel-inner {
border-radius: 16px;
overflow: hidden;
}
#sdkCampaignsCarousel .carousel-control-prev,
#sdkCampaignsCarousel .carousel-control-next {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.9);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 0.8;
transition: all 0.3s ease;
z-index: 10;
}
#sdkCampaignsCarousel .carousel-control-prev {
left: 10px;
}
#sdkCampaignsCarousel .carousel-control-next {
right: 10px;
}
#sdkCampaignsCarousel .carousel-control-prev:hover,
#sdkCampaignsCarousel .carousel-control-next:hover {
opacity: 1;
background: rgba(255,255,255,1);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
#sdkCampaignsCarousel .carousel-control-prev-icon,
#sdkCampaignsCarousel .carousel-control-next-icon {
width: 20px;
height: 20px;
filter: invert(1);
}
#sdkCampaignsCarousel .carousel-indicators {
bottom: -40px;
z-index: 10;
}
#sdkCampaignsCarousel .carousel-indicators button {
z-index: 10;
}
#sdkCampaignsCarousel .carousel-item {
transition: transform 0.6s ease-in-out;
border-radius: 16px;
overflow: hidden;
}
/* Angular-matching template styles */
#sdkCampaignsCarousel .banner-showcase {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#sdkCampaignsCarousel .banner-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#sdkCampaignsCarousel .banner-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-centered {
align-items: center ;
justify-content: center ;
text-align: center ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-left-aligned {
align-items: center ;
justify-content: flex-start ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-overlay {
align-items: center ;
justify-content: center ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-card-style {
align-items: center ;
justify-content: center ;
text-align: center ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-left-text .banner-text-content {
text-align: left ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-left-text .banner-headline {
text-align: left ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-left-text .banner-description-text {
text-align: left ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-left-text .banner-cta-button {
margin: 0 ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-overlay-text .banner-text-content {
text-align: center ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-overlay-text .banner-headline {
text-align: center ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-overlay-text .banner-description-text {
text-align: center ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-overlay-text .banner-cta-button {
margin: 0 auto ;
}
#sdkCampaignsCarousel .banner-cta-button:hover svg {
transform: translateX(3px) ;
}
@media (max-width: 768px) {
#sdkCampaignsCarousel .carousel-control-prev,
#sdkCampaignsCarousel .carousel-control-next {
width: 40px;
height: 40px;
}
#sdkCampaignsCarousel .carousel-control-prev-icon,
#sdkCampaignsCarousel .carousel-control-next-icon {
width: 16px;
height: 16px;
}
#sdkCampaignsCarousel .banner-content-wrapper {
padding: 1.5rem ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-left-aligned .banner-text-content,
#sdkCampaignsCarousel .banner-content-wrapper.template-overlay .banner-text-content,
#sdkCampaignsCarousel .banner-content-wrapper.template-card-style .banner-text-content {
max-width: 100% ;
width: 100% ;
padding: 1.5rem ;
}
#sdkCampaignsCarousel .banner-content-wrapper.template-overlay .banner-text-content,
#sdkCampaignsCarousel .banner-content-wrapper.template-card-style .banner-text-content {
padding: 1.5rem ;
}
}
</style>
</head>
<body>
<div class="test-container">
<h1>Campaign Carousel Test</h1>
<p>Testing different banner templates</p>
<div id="sdkCampaignsCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
<div class="carousel-indicators" onclick="event.stopPropagation();">
<button type="button" data-bs-target="#sdkCampaignsCarousel" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1" style="
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 4px;
background-color: #3b82f6;
border: none;
transition: all 0.3s ease;
"></button>
<button type="button" data-bs-target="#sdkCampaignsCarousel" data-bs-slide-to="1"
class="" aria-current="false" aria-label="Slide 2" style="
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 4px;
background-color: rgba(255,255,255,0.5);
border: none;
transition: all 0.3s ease;
"></button>
<button type="button" data-bs-target="#sdkCampaignsCarousel" data-bs-slide-to="2"
class="" aria-current="false" aria-label="Slide 3" style="
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 4px;
background-color: rgba(255,255,255,0.5);
border: none;
transition: all 0.3s ease;
"></button>
<button type="button" data-bs-target="#sdkCampaignsCarousel" data-bs-slide-to="3"
class="" aria-current="false" aria-label="Slide 4" style="
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 4px;
background-color: rgba(255,255,255,0.5);
border: none;
transition: all 0.3s ease;
"></button>
</div>
<div class="carousel-inner">
<!-- Slide 1: Centered Template -->
<div class="carousel-item active" onclick="
(function(event) {
event.preventDefault();
var campaignUrl = 'https://seller.samhita.org/campaign/123';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: #3b82f6;
position: relative;
height: 400px;
overflow: hidden;
border-radius: 16px;
">
<div class="banner-content-wrapper template-centered" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
width: 100%;
height: 100%;
padding: 2.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: center;
text-align: center;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 600px;
width: 100%;
text-align: center;
">
<h2 class="banner-headline" style="
font-size: 2rem;
color: #ffffff;
font-weight: bold;
margin: 0 0 1rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: center;
">Centered Template Campaign</h2>
<p class="banner-description-text" style="
font-size: 1rem;
color: #e2e8f0;
margin: 0 0 1.5rem 0;
line-height: 1.5;
word-wrap: break-word;
white-space: normal;
text-align: center;
">This is a centered template layout with text in the middle</p>
<button type="button" class="banner-cta-button" style="
background-color: #ffffff;
color: #3b82f6;
border: none;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: semibold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0 auto;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 2: Left Aligned Template -->
<div class="carousel-item" onclick="
(function(event) {
event.preventDefault();
var campaignUrl = 'https://seller.samhita.org/campaign/456';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 400px;
overflow: hidden;
border-radius: 16px;
">
<img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&h=400&fit=crop"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-overlay-gradient" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 1;
"></div>
<div class="banner-content-wrapper template-left-aligned template-left-text" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
width: 100%;
height: 100%;
padding: 4.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: flex-start;
text-align: left;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 50%;
width: 50%;
text-align: left;
">
<h2 class="banner-headline" style="
font-size: 2.5rem;
color: #ffffff;
font-weight: bold;
margin: 0 0 1rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: left;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
">Left Aligned Campaign</h2>
<p class="banner-description-text" style="
font-size: 1.125rem;
color: #e2e8f0;
margin: 0 0 1.5rem 0;
line-height: 1.5;
word-wrap: break-word;
white-space: normal;
text-align: left;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
">Content positioned on the left side with 50% width</p>
<button type="button" class="banner-cta-button" style="
background-color: #ef4444;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Explore Now
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 3: Overlay Template -->
<div class="carousel-item" onclick="
(function(event) {
event.preventDefault();
var campaignUrl = 'https://seller.samhita.org/campaign/789';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 400px;
overflow: hidden;
border-radius: 16px;
">
<img src="https://images.unsplash.com/photo-1560472355-536de3962603?w=800&h=400&fit=crop"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-overlay-gradient" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.18) 70%, transparent 100%);
z-index: 1;
"></div>
<div class="banner-content-wrapper template-overlay template-overlay-text" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
width: 100%;
height: 100%;
padding: 2.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: center;
text-align: center;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 600px;
width: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 2.5rem;
border-radius: 20px;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
">
<h2 class="banner-headline" style="
font-size: 3rem;
color: #ffffff;
font-weight: bolder;
margin: 0 0 1rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: center;
">Overlay Template</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1.5rem 0;
line-height: 1.5;
word-wrap: break-word;
white-space: normal;
text-align: center;
">Content with dark overlay background and blur effect</p>
<button type="button" class="banner-cta-button" style="
background-color: #10b981;
color: #ffffff;
border: none;
border-radius: 20px;
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0 auto;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Discover
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 4: Card Style Template -->
<div class="carousel-item" onclick="
(function(event) {
event.preventDefault();
var campaignUrl = 'https://seller.samhita.org/campaign/101';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 400px;
overflow: hidden;
border-radius: 16px;
">
<img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&h=400&fit=crop"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-overlay-gradient" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 1;
"></div>
<div class="banner-content-wrapper template-card-style" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
width: 100%;
height: 100%;
padding: 2.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: center;
text-align: center;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 480px;
width: auto;
text-align: center;
background: rgba(255, 255, 255, 0.95);
padding: 2.5rem;
border-radius: 20px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #1f2937;
font-weight: normal;
margin: 0 0 1rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: center;
">Card Style Template</h2>
<p class="banner-description-text" style="
font-size: 1rem;
color: #4b5563;
margin: 0 0 1.5rem 0;
line-height: 1.5;
word-wrap: break-word;
white-space: normal;
text-align: center;
">Floating card design with white background and blur effect</p>
<button type="button" class="banner-cta-button" style="
background-color: #8b5cf6;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
font-weight: semibold;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0 auto;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Get Started
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sdkCampaignsCarousel" data-bs-slide="prev" onclick="event.stopPropagation();">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#sdkCampaignsCarousel" data-bs-slide="next" onclick="event.stopPropagation();">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>