ondc-campaign-sdk/test-output/campaigns-first-two.html

[](https://www.npmjs.com/package/ondc-campaign-sdk) [](LICENSE) [![Made with ❤️](https://img.shields.io/badge/Made%20with-%

      <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: 0;
          background: #f8fafc;
        }
        
        #sdkCampaignsCarousel .carousel-inner {
          border-radius: 16px;
          overflow: hidden;
        }
        
        #sdkCampaignsCarousel .carousel-control-prev,
        #sdkCampaignsCarousel .carousel-control-next {
          width: 50px !important;
          height: 50px !important;
          background: rgba(255,255,255,0.9) !important;
          border-radius: 50% !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          opacity: 0.8 !important;
          transition: all 0.3s ease !important;
          z-index: 1000 !important;
          border: 2px solid rgba(255,255,255,0.2) !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        
        #sdkCampaignsCarousel .carousel-control-prev {
          left: 10px !important;
        }
        
        #sdkCampaignsCarousel .carousel-control-next {
          right: 10px !important;
        }
        
        #sdkCampaignsCarousel .carousel-control-prev:hover,
        #sdkCampaignsCarousel .carousel-control-next:hover {
          opacity: 1 !important;
          background: rgba(255,255,255,1) !important;
          box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
          transform: translateY(-50%) scale(1.1) !important;
        }
        
        #sdkCampaignsCarousel .carousel-control-prev-icon,
        #sdkCampaignsCarousel .carousel-control-next-icon {
          width: 20px !important;
          height: 20px !important;
          background-image: none !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        
        #sdkCampaignsCarousel .carousel-control-prev-icon::before {
          content: '<' !important;
          font-size: 20px !important;
          color: #374151 !important;
          font-weight: bold !important;
        }
        
        #sdkCampaignsCarousel .carousel-control-next-icon::before {
          content: '>' !important;
          font-size: 20px !important;
          color: #374151 !important;
          font-weight: bold !important;
        }
        
        #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;
        }
        
        /* Template-specific styles matching test-carousel.html */
        #sdkCampaignsCarousel .banner-showcase {
          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 !important;
          justify-content: center !important;
          text-align: center !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-left-aligned {
          align-items: center !important;
          justify-content: flex-start !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-overlay {
          align-items: center !important;
          justify-content: center !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-card-style {
          align-items: center !important;
          justify-content: center !important;
          text-align: center !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-left-text .banner-text-content {
          text-align: left !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-left-text .banner-headline {
          text-align: left !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-left-text .banner-description-text {
          text-align: left !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-left-text .banner-cta-button {
          margin: 0 !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-overlay-text .banner-text-content {
          text-align: center !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-overlay-text .banner-headline {
          text-align: center !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-overlay-text .banner-description-text {
          text-align: center !important;
        }
        
        #sdkCampaignsCarousel .banner-content-wrapper.template-overlay-text .banner-cta-button {
          margin: 0 auto !important;
        }
        
        #sdkCampaignsCarousel .banner-cta-button:hover svg {
          transform: translateX(3px) !important;
        }
        
        @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 !important;
          }
          
          #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% !important;
            width: 100% !important;
            padding: 1.5rem !important;
          }
          
          #sdkCampaignsCarousel .banner-content-wrapper.template-overlay .banner-text-content,
          #sdkCampaignsCarousel .banner-content-wrapper.template-card-style .banner-text-content {
            padding: 1.5rem !important;
          }
        }
      </style>
      
      <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;
                " onclick="event.stopPropagation();"></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;
                " onclick="event.stopPropagation();"></button>
      
        </div>
        
        <div class="carousel-inner">
          
    <div class="carousel-item active" onclick="
    (function(event) {
      event.preventDefault();
      
      var campaignId = '684974687df302329d8753ea';
      var affiliateId = '';
      var userId = '';
      var campaignUrl = 'https://seller.samhita.org/campaign/684974687df302329d8753ea?affiliate_id=undefined&user_id=undefined';
      
      
        window.open(campaignUrl, '_blank');
      
      
      return false;
    })(event);
  " style="cursor: pointer;">
      <div class="banner-showcase">
        <div class="banner-container" style="
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          position: relative;
          height: 480px;
          overflow: hidden;
          border-radius: 16px;
        ">
          
            <img src="https://childfoundation.org/wp-content/uploads/2024/06/20230822-B2S-email-to-sponsors.jpg" 
                 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 style="
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.8);
            z-index: 1;
          "></div>
          <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: #ffa200;
                font-weight: bold;
                margin: 0 0 1rem 0;
                line-height: 1.2;
                word-wrap: break-word;
                white-space: normal;
                text-align: center;
              ">Back to School Drive</h2>
              
              <p class="banner-description-text" style="
                font-size: 1rem;
                color: #ffae00;
                margin: 0 0 1.5rem 0;
                line-height: 1.5;
                word-wrap: break-word;
                white-space: normal;
                text-align: center;
              ">Join us in providing essential school supplies to underprivileged children. Help them start the academic year with confidence and hope</p>
              
              
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <div class="carousel-item " onclick="
    (function(event) {
      event.preventDefault();
      
      var campaignId = '681b16e4d8fb313db1bbeff8';
      var affiliateId = '';
      var userId = '';
      var campaignUrl = 'https://seller.samhita.org/campaign/681b16e4d8fb313db1bbeff8?affiliate_id=undefined&user_id=undefined';
      
      
        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: 480px;
          overflow: hidden;
          border-radius: 16px;
        ">
          <img src="https://img.freepik.com/premium-photo/online-shopping-mobile-phone_172660-107.jpg?uid=R122331431&ga=GA1.1.1606667448.1732733109&semt=ais_hybrid&w=740" 
               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: 1.5rem;
                color: #eb0505;
                font-weight: bold;
                margin: 0 0 1rem 0;
                line-height: 1.2;
                word-wrap: break-word;
                white-space: normal;
                text-align: center;
              ">Winter Wonderland Sale(Up to 50% off)</h2>
              
              <p class="banner-description-text" style="
                font-size: 0.875rem;
                color: #fddd0d;
                margin: 0 0 1.5rem 0;
                line-height: 1.5;
                word-wrap: break-word;
                white-space: normal;
                text-align: center;
              ">A campaign is a coordinated set of activities designed to </p>
              
              
                <button type="button" class="banner-cta-button" style="
                  background-color: #d400ff;
                  color: #f0f0f0;
                  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)';
                ">
                  Live
                  <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>
      
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>