ondc-campaign-sdk/test-output/campaigns-first.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>
      
        </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>
        
        
      </div>
      
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>