Creative Tim Builder

<!doctype html> <html lang="en" dir="ltr" style="--bs-body-color: #67748e; --bs-primary: #cb0c9f; --bs-info: #17c1e8; --bs-danger: #ea0606; --bs-warning: #fbcf33; --bs-success: #82d616; --bs-light: #e9ecef; --bs-secondary: #8392ab; --bs-dark: #344767; --bs-gradient-primary-right: #7928ca; --bs-gradient-primary-left: #ff0080; --bs-gradient-info-right: #2152ff; --bs-gradient-info-left: #21d4fd; --bs-gradient-warning-right: #f53939; --bs-gradient-warning-left: #fbcf33; --bs-gradient-danger-right: #ea0606; --bs-gradient-danger-left: #ff667c; --bs-gradient-success-right: #17ad37; --bs-gradient-success-left: #98ec2d; --bs-gradient-dark-right: #141727; --bs-gradient-dark-left: #3a416f; --bs-gradient-secondary-right: #627594; --bs-gradient-secondary-left: #a8b8d8; --bs-gradient-light-right: #ced4da; --bs-gradient-light-left: #ebeff4;"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/png" href="https://builder.creative-tim.com/img/favicon.ico">  <meta name="csrf-token" content="6Gid8D0OSR7YR6UPDsTZFnsiKyUNRP1BAkHqfSHX"> <title>Creative Tim Builder</title>  <link href="https://builder.creative-tim.com/css/vendor/animate.css" rel="stylesheet"> <link href="https://builder.creative-tim.com/css/vendor/codemirror.css" rel="stylesheet"> <link href="https://builder.creative-tim.com/css/vendor/material-ocean.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <link href="https://builder.creative-tim.com/css/vendor/fontawesome-iconpicker.min.css" rel="stylesheet"> <link href="https://builder.creative-tim.com/css/app.css?v=0.1.4" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://demos.creative-tim.com/soft-ui-dashboard/assets/css/nucleo-icons.css"> <link rel="stylesheet" href="https://demos.creative-tim.com/soft-ui-dashboard/assets/css/nucleo-svg.css"> <link rel="stylesheet" href="https://demos.creative-tim.com/soft-ui-dashboard/assets/css/soft-ui-dashboard.min.css?v=1.0.2"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">  <link rel="stylesheet" href="https://cdn.statically.io/gh/Loopple/loopple-public-assets/main/soft-ui-design-system/css/soft-ui-design-system.css" rel="stylesheet">  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script>  <style >[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {animation-duration: 50000s;animation-name: livewireautofill;}@keyframes livewireautofill { from {} }</style> </head> <body class="g-sidenav-show" data-type="dashboard" data-project="project-Kncn5WRj49z2c5VDiRaMgwtNXFH0TOUIfTn" data-product="soft-ui-dashboard" data-framework="bootstrap5" data-plan=" free ">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="sidebar-builder"> <ul class="loopple-nav loopple-nav-tabs nav nav-tabs" id="myTab" role="tablist"> <li class="loopple-nav-item loopple-ml-auto" role="presentation"> <button class="loopple-nav-link active w-100 btn-sm" id="structure-tab" data-toggle="tab" data-target="#structure" type="button" role="tab" aria-controls="structure" aria-selected="true">Grid</button> </li> <li class="loopple-nav-item" role="presentation"> <button class="loopple-nav-link w-100 btn-sm" id="components-tab" data-toggle="tab" data-target="#components" type="button" role="tab" aria-controls="components" aria-selected="true">Components</button> </li> <li class="loopple-nav-item" role="presentation"> <button class="loopple-nav-link w-100 btn-sm" id="editor-tab" data-toggle="tab" data-target="#editor" type="button" role="tab" aria-controls="editor" aria-selected="false">Editor</button> </li> <li class="loopple-nav-item loopple-mr-auto" role="presentation"> <button class="loopple-nav-link w-100 btn-sm" id="pages-tab" data-toggle="tab" data-target="#pages" type="button" role="tab" aria-controls="pages" aria-selected="false">Pages</button> </li> </ul> <div class="tab-content tab-content-builder loopple-tab-content" id="myTabContent"> <div class="loopple-tab-pane fade show active" id="structure" role="tabpanel" aria-labelledby="grid-tab"> <div class="container loopple-container pb-5"> <div class="loopple-row loopple-mt-2">  <div class="accordion__item loopple-border-bottom loopple-border-top-0"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac1"> Grid <span class="loopple-ml-auto loopple-float-end accordion__number">5</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac1" aria-hidden="true"> <div class="loopple-col-12"> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 1 column</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-1-col"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-1-col.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 2 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-2-cols"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-2-cols.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 3 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-3-cols"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-3-cols.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 4 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-4-cols"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-4-cols.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 4-8 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-col-4-col-8"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-4-8-cols.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 8-4 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-col-8-col-4"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-8-4-cols.png"> </div> </div> </div> </div> </div> <div class="loopple-col-12"> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-3">Sections</h3> </div> <div class="accordion__item loopple-border-top"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset accordion__trigger--active" aria-expanded="false" aria-controls="ac2"> Cards section <span class="loopple-ml-auto loopple-float-end accordion__number">5</span> </button> </h3> <div class="accordion__body" style="height: auto;" id="ac2" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-card-stats"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-card-stats-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-card-stats-dark"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-card-stats-dark-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-cards-payment"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-cards-payment-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-card-group"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-card-group-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-cards-ecommerce"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-cards-ecommerce-soft-ui-dashboard.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac3"> Tables section <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac3" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-tables"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-tables-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-tables-dark"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-tables-dark-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-tables-ecommerce"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-tables-ecommerce-soft-ui-dashboard.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac7"> Contacts section <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac7" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-contact-simple"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-contact-simple-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-contact-horizontal"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-contact-horizontal-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-contact-image"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-contact-image-soft-ui-dashboard.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac4"> Charts Section <span class="loopple-ml-auto loopple-float-end accordion__number">1</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac4" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-charts"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-charts-soft-ui-dashboard.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac5"> Profiles Section <span class="loopple-ml-auto loopple-float-end accordion__number">2</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac5" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-profile"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-profile-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="profile-section-work"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/profile-section-work-soft-ui-dashboard.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac5"> Projects Section <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac5" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-projects"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-projects-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-projects-cards"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-projects-cards-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-projects-participants"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-projects-participants-soft-ui-dashboard.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac6"> Teams Section <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-teams-simple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-teams-simple-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-teams-social"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-teams-social-soft-ui-dashboard.png"> </div> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-teams-social-image-right"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-teams-social-image-right-soft-ui-dashboard.png"> </div> </div> </div> </div> </div> </div> </div> </div> <div class="loopple-tab-pane fade" id="components" role="tabpanel" aria-labelledby="components-tab"> <div class="container loopple-container pb-5"> <div class="loopple-row loopple-mt-2"> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset loopple-text-capitalize" aria-expanded="false" aria-controls="cards"> cards <span class="loopple-ml-auto loopple-float-end accordion__number">7</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="cards" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="card-image"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/card-image-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">card image</span> </div> </div> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="card-illustration"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/card-illustration-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">card illustration</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="card-payment"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/card-payment-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">card payment</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="card-project-user"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/card-project-user-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">card project user</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="card-profile"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/card-profile-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">card profile</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="card-stats"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/card-stats-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">card stats</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="card-stats-dark"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/card-stats-dark-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">card stats dark</span> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset loopple-text-capitalize" aria-expanded="false" aria-controls="charts"> charts <span class="loopple-ml-auto loopple-float-end accordion__number">2</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="charts" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="chart-bar"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/chart-bar-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">chart bar</span> </div> </div> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="chart-line"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/chart-line-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">chart line</span> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset loopple-text-capitalize" aria-expanded="false" aria-controls="components"> components <span class="loopple-ml-auto loopple-float-end accordion__number">6</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="components" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="button"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/button-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">button</span> </div> </div> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="input"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/input-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">input</span> </div> </div> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="input-group"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/input-group-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">input group</span> </div> </div> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="dropdown"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/dropdown-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">dropdown</span> </div> </div> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="modal"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/modal-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">modal</span> </div> </div> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="progress"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/progress-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">progress</span> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset loopple-text-capitalize" aria-expanded="false" aria-controls="forms"> forms <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="forms" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="profile-form"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/profile-form-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">profile form</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="login-form"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/login-form-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">login form</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="register-form"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/register-form-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">register form</span> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset loopple-text-capitalize" aria-expanded="false" aria-controls="tables"> tables <span class="loopple-ml-auto loopple-float-end accordion__number">5</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="tables" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="table-authors"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/table-authors-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">table authors</span> </div> </div> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="table-projects"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/table-projects-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">table projects</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="table-products"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/table-products-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">table products</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="table-countries"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/table-countries-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">table countries</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="table-analytics"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/table-analytics-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">table analytics</span> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset loopple-text-capitalize" aria-expanded="false" aria-controls="typography"> typography <span class="loopple-ml-auto loopple-float-end accordion__number">8</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="typography" aria-hidden="true"> <div class="loopple-col-12"> <div class="draggable draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="typography-p"> <div class="image-container loopple-mr-3"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/typography-p-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">typography p</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="typography-h1"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/typography-h1-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">typography h1</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="typography-h2"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/typography-h2-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">typography h2</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="typography-h3"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/typography-h3-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">typography h3</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="typography-h4"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/typography-h4-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">typography h4</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="typography-h5"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/typography-h5-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">typography h5</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="typography-h6"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/typography-h6-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">typography h6</span> </div> </div> <div class="loopple-col-12"> <div class="draggable-pro position-relative draggable-image loopple-d-flex loopple-align-items-center loopple-w-100 drag-start loopple-my-2 input" data-component="blockquote"> <div class="image-container loopple-mr-3"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO element - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/blockquote-soft-ui-dashboard.png"> </div> <span class="loopple-text-sm loopple-font-weight-bold loopple-text-capitalize loopple-text-body">blockquote</span> </div> </div> </div> </div>  </div> </div> </div> <div class="loopple-tab-pane fade" id="editor" role="tabpanel" aria-labelledby="editor-tab"> <p class="loopple-p-5 loopple-text-center loopple-text-body">You have no component selected</p> </div> <div class="loopple-tab-pane fade loopple-pb-5 loopple-mb-4" id="pages" role="tabpanel" aria-labelledby="pages-tab"> <div class="loopple-pt-3 loopple-px-4"> <div id="pages-selector"> <div class="loopple-d-flex loopple-align-items-center loopple-button-page loopple-button-page-active" data-page="index"> <a class="loopple-d-block loopple-btn-click-page loopple-cursor-pointer">index</a> <a class="loopple-btn loopple-btn-sm loopple-mr-0 loopple-ml-auto loopple-px-1" onclick="duplicatePage(event, this)"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14"> <path d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 013.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0121 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 017.5 16.125V3.375z" /> <path d="M15 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0017.25 7.5h-1.875A.375.375 0 0115 7.125V5.25zM4.875 6H6v10.125A3.375 3.375 0 009.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V7.875C3 6.839 3.84 6 4.875 6z" /> </svg> </a> </div> <a onclick="addNewPage(event)" id="add-page" class="loopple-d-block loopple-btn loopple-btn-sm loopple-btn-outline-default loopple-text-center loopple-mt-3"> <span>Add Page</span> </a> </div> </div> </div> <div class="loopple-tab-pane fade px-4" id="styles" role="tabpanel" aria-labelledby="styles-tab"> <div class="d-flex align-items-center justify-content-between mb-2 mt-4"> <div class="text-sm loopple-text-body">Body Color:</div> <div id="color-picker-1"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Primary Color:</div> <div id="color-picker-2"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Info Color:</div> <div id="color-picker-3"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Danger Color:</div> <div id="color-picker-4"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Warning Color:</div> <div id="color-picker-5"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Success Color:</div> <div id="color-picker-6"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Light Color:</div> <div id="color-picker-7"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Secondary Color:</div> <div id="color-picker-8"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Dark Color:</div> <div id="color-picker-9"></div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Primary Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-10"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-11"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Info Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-12"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-13"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Warning Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-14"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-15"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Danger Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-16"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-17"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Success Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-18"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-19"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Dark Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-20"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-21"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Light Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-22"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-23"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Secondary Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-24"></div> </div> <div class="d-flex align-items-center justify-content-between"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-25"></div> </div> </div> <div class="mb-8"></div> </div> </div> <div class="loopple-position-absolute loopple-bg-gray loopple-w-100 loopple-bottom-0 loopple-border-top loopple-z-index-2"> <div class="loopple-border-bottom loopple-d-flex loopple-align-items-top loopple-justify-content-space-between"> <div> <span class="loopple-d-block loopple-ml-2 loopple-mr-2 loopple-my-2 loopple-text-xs">Show grid layout</span> <label class="loopple-custom-toggle loopple-ml-2 loopple-mb-1"> <input type="checkbox" id="checkbox-grid" checked> <span class="loopple-custom-toggle-slider loopple-rounded-circle"></span> </label> </div> <button class="loopple-btn loopple-btn-icon loopple-btn-rounded loopple-btn-outline-dark loopple-btn-sm loopple-mr-3 loopple-mt-3 loopple-h6" onclick="openPopover(event,'popover-tips')" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.1 125.04" width="10" height="10"> <path d="M54,76c-.85-1.56-.91-2.92-1-5a23,23,0,0,1,3-12,28.6,28.6,0,0,1,8-9,44.41,44.41,0,0,1,8-5,50.26,50.26,0,0,1,12-4,50.81,50.81,0,0,1,12-1,54.37,54.37,0,0,1,12,2,49.87,49.87,0,0,1,9,3,33.58,33.58,0,0,1,7,4,31.13,31.13,0,0,1,6,6,30.72,30.72,0,0,1,4,7,26.38,26.38,0,0,1,2,8,26.66,26.66,0,0,1-2,12,29.56,29.56,0,0,1-6,10c-.51.54-2.67,2.36-7,6-4,3.32-5.95,5-6,5-5.42,4.67-5.49,6.65-13,15-5.43,6-7.94,7.83-11,8a11.11,11.11,0,0,1-5-1,10.63,10.63,0,0,1-5-5c-1.42-3.11-.72-6,0-9a24.88,24.88,0,0,1,3-7c.55-.91,2.26-3.61,7-8,3.11-2.88,6.31-5.36,11-9,2.79-2.16,4.52-3.44,6-6a16.24,16.24,0,0,0,2-6,14.17,14.17,0,0,0-1-8,13.73,13.73,0,0,0-4-5,15.46,15.46,0,0,0-6-3,17.42,17.42,0,0,0-8,0,20.43,20.43,0,0,0-11,6,30.07,30.07,0,0,0-4,6c-.81,1.6-1,2.25-2,4-1.2,2-1.79,3-3,4a10.06,10.06,0,0,1-5,2C61.89,81.58,56.26,80.14,54,76Z" transform="translate(-52.98 -39.96)"/><circle cx="39.02" cy="111.04" r="14"/></svg> </button> </div> <a class="loopple-btn loopple-btn-primary loopple-btn-icon loopple-btn-sm loopple-d-block loopple-ml-2 loopple-mr-2 loopple-my-3" id="styles-tab" onclick="changeTab('#styles-tab', '#styles');"> <span class="loopple-btn-inner--icon loopple-mr-1"> <i class="fa fa-palette"></i> </span> Edit Theme Colors </a> </div> <div class="loopple-modal loopple-fade modal fade" id="pricingModal" tabindex="-1" role="dialog" aria-labelledby="pricingModalLabel" aria-hidden="true"> <div class="loopple-modal-dialog modal-dialog" role="document"> <div class="loopple-modal-content modal-content"> <div class="loopple-modal-body loopple-p-0"> <div class="loopple-card loopple-border-0 loopple-text-center loopple-mb-2 loopple-shadow-0"> <div class="loopple-bg-gray loopple-py-5"> <img src="https://builder.creative-tim.com/img/loopple-logo-simple.png" style="width:40px" class="loopple-mb-2 loopple-mx-auto"> <h2 class="loopple-mb-0 loopple-h2 loopple-text-dark">Loopple PRO</h2> <p class="loopple-mb-0 loopple-text-body"> Get access to all sections and elements </p> <button type="button" class="close loopple-position-absolute loopple-top-3 loopple-right-3" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="loopple-card-body"> <div class="loopple-display-4 loopple-text-body"><strike>$19</strike></div> <div class="loopple-display-2 loopple-text-body">$9</div> <span class="loopple-text-muted">/month</span> <ul class="list-unstyled my-4"> </ul> <a onclick="submitProductPaymentForm('price_1JhIzMLDk0qEKSl1j4KaOlku')" class="loopple-btn loopple-btn-primary loopple-text-white">Buy Subscription</a> <br> <br> <span class="loopple-text-sm loopple-text-body">Got a question?<a href="/cdn-cgi/l/email-protection#a3cfccccd3d3cfc6c0cccdd7c2c0d7e3c4cec2cacf8dc0ccce"> Contact Us.</a></span> <br> <span class="loopple-text-xs"><a href="https://builder.creative-tim.com/pricing"> See full pricing here</a></span> </div> </div> </div> </div> </div> </div> </div> <div class="loopple-main-panel"> <nav class="loopple-navbar loopple-border-bottom navbar-expand-lg"> <a class="loopple-navbar-brand" href="https://builder.creative-tim.com"> <span>Creative Tim Builder</span> </a> <div class="loopple-border-bottom loopple-d-flex loopple-align-items-center ml-3"> <svg width="20" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.5036 10.4238L10.9438 20.5307C10.6605 20.8303 10.2664 21 9.8541 21L5.5 21C4.67157 21 4 20.3284 4 19.5L4 15.1074C4 14.7178 4.1516 14.3435 4.42271 14.0637L14.0817 4.09442C14.6582 3.49945 15.6078 3.48444 16.2028 4.0609C16.2085 4.0664 16.2141 4.07194 16.2197 4.07753L20.4745 8.33237C21.0488 8.90667 21.0617 9.83374 20.5036 10.4238Z" fill="#525f7f"/> </svg> <input class="loopple-form-control loopple-ml-1" value="Guest project" id="projectName"> </div> <p class="mx-auto loopple-cursor-pointer loopple-text mb-0" id="pageName">index.html</p> <div data-modal="modal-revert-changes" class="loopple-cursor-pointer"> <button class="loopple-btn loopple-btn-simple loopple-btn-default loopple-btn-sm loopple-opacity-5 loopple-btn-hover-none loopple-ml-auto loopple-mr-0"> <svg height="13" width="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M125.7 160H176c17.7 0 32 14.3 32 32s-14.3 32-32 32H48c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32s32 14.3 32 32v51.2L97.6 97.6c87.5-87.5 229.3-87.5 316.8 0s87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3s-163.8-62.5-226.3 0L125.7 160z"/> </svg> </button> <button class="loopple-btn loopple-btn-simple loopple-btn-default loopple-btn-sm loopple-opacity-5 loopple-mr-2 loopple-btn-hover-none"> <svg height="13" width="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z"/> </svg> </button> </div> <button class="loopple-btn loopple-btn-dark loopple-btn-sm me-2" onclick="actionSave('project-Kncn5WRj49z2c5VDiRaMgwtNXFH0TOUIfTn')">Save</button> <a href="https://builder.creative-tim.com/login" class="loopple-btn loopple-btn-sm loopple-btn-primary opacity-7" data-toggle="tooltip" data-position="top" title="Login to download project" disabled>Download Project</a> <form method="POST" action="../projects-preview/project-Kncn5WRj49z2c5VDiRaMgwtNXFH0TOUIfTn" enctype="multipart/form-data" target="_blank" class="loopple-mb-0"> <input type="hidden" name="_method" value="PATCH"> <input type="hidden" name="_token" value="6Gid8D0OSR7YR6UPDsTZFnsiKyUNRP1BAkHqfSHX"> <input name="page" value="index" class="loopple-d-none" id="previewPage"> <button type="submit" onclick="actionPreview('project-Kncn5WRj49z2c5VDiRaMgwtNXFH0TOUIfTn')" class="loopple-btn loopple-btn-sm loopple-btn-icon loopple-btn-outline-default"> <span class="loopple-btn-inner--icon"><i class="fas fa-eye"></i></span> <span class="loopple-btn-inner--text ml-1">Preview</span> </button> </form> </nav> <div class="builder-precontainer loopple-position-relative"> <div class="card-selection loopple-position-absolute"> </div> <div class="selector loopple-position-absolute"> <div class="name"> </div> </div> <div class="selector selector-click loopple-position-absolute"> </div> <div class="builder-container position-relative show-grid " onscroll="scrollContent()" data-page="index" show-code-editor="0" show-duplicate-element="0" > <nav class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start position-absolute ms-3 bg-white" id="sidenav-main"> <div class="sidebar-add" data-toggle="modal" data-target="#sidebarModal"> <svg id="Layer_1" class="m-auto" width="20px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114 114"> <rect style="fill:#525f7f;" x="0.5" y="44.5" width="113" height="24" rx="9.94" ry="9.94"></rect> <path style="fill:#525f7f;" d="M146.56,85A9.46,9.46,0,0,1,156,94.44v4.11a9.46,9.46,0,0,1-9.44,9.44H53.44A9.46,9.46,0,0,1,44,98.56V94.44A9.46,9.46,0,0,1,53.44,85h93.11m0-1H53.44A10.48,10.48,0,0,0,43,94.44v4.11A10.48,10.48,0,0,0,53.44,109h93.11A10.48,10.48,0,0,0,157,98.56V94.44A10.48,10.48,0,0,0,146.56,84Z" transform="translate(-43 -40)"></path> <rect style="fill:#525f7f;" x="45.5" y="0.5" width="24" height="113" rx="9.94" ry="9.94"></rect> <path style="fill:#525f7f;" d="M102.56,41A9.46,9.46,0,0,1,112,50.44v93.11a9.46,9.46,0,0,1-9.44,9.44H98.44A9.46,9.46,0,0,1,89,143.56V50.44A9.46,9.46,0,0,1,98.44,41h4.11m0-1H98.44A10.48,10.48,0,0,0,88,50.44v93.11A10.48,10.48,0,0,0,98.44,154h4.11A10.48,10.48,0,0,0,113,143.56V50.44A10.48,10.48,0,0,0,102.56,40Z" transform="translate(-43 -40)"></path> </svg> </div> </nav> <div class="main-content" id="panel"> <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 mt-3 shadow-none border-radius-xl loopple-navbar-empty" id="navbarTop"> <div class="navbar-add" data-toggle="modal" data-target="#navbarModal"> <svg id="Layer_1" class="m-auto" width="20px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114 114"> <rect style="fill:#cacfda;" x="0.5" y="44.5" width="113" height="24" rx="9.94" ry="9.94"></rect> <path style="fill:#cacfda;" d="M146.56,85A9.46,9.46,0,0,1,156,94.44v4.11a9.46,9.46,0,0,1-9.44,9.44H53.44A9.46,9.46,0,0,1,44,98.56V94.44A9.46,9.46,0,0,1,53.44,85h93.11m0-1H53.44A10.48,10.48,0,0,0,43,94.44v4.11A10.48,10.48,0,0,0,53.44,109h93.11A10.48,10.48,0,0,0,157,98.56V94.44A10.48,10.48,0,0,0,146.56,84Z" transform="translate(-43 -40)"></path> <rect style="fill:#cacfda;" x="45.5" y="0.5" width="24" height="113" rx="9.94" ry="9.94"></rect> <path style="fill:#cacfda;" d="M102.56,41A9.46,9.46,0,0,1,112,50.44v93.11a9.46,9.46,0,0,1-9.44,9.44H98.44A9.46,9.46,0,0,1,89,143.56V50.44A9.46,9.46,0,0,1,98.44,41h4.11m0-1H98.44A10.48,10.48,0,0,0,88,50.44v93.11A10.48,10.48,0,0,0,98.44,154h4.11A10.48,10.48,0,0,0,113,143.56V50.44A10.48,10.48,0,0,0,102.56,40Z" transform="translate(-43 -40)"></path> </svg> </div> </nav> <div class="container-fluid pt-3 drop-zone"></div>  <footer class="footer pt-3 pb-4"> <div class="container-fluid"> <div class="row align-items-center justify-content-lg-between"> <div class="col-lg-6 mb-lg-0 mb-4"> <div class="copyright text-center text-sm text-muted text-lg-start"> 漏 2021, made with <a href="https://www.creative-tim.com/product/soft-ui-dashboard" class="font-weight-bold text-capitalize" target="_blank"> Soft UI Dashboard</a> </div> </div> <div class="col-lg-6"> <ul class="nav nav-footer justify-content-center justify-content-lg-end"> <li class="nav-item"> <a href="javascript:;" class="nav-link text-muted" target="_blank">Creative Tim</a> </li> <li class="nav-item"> <a href="javascript:;" class="nav-link text-muted" target="_blank">About Us</a> </li> <li class="nav-item"> <a href="javascript:;" class="nav-link text-muted" target="_blank">Blog</a> </li> <li class="nav-item"> <a href="javascript:;" class="nav-link pe-0 text-muted" target="_blank">License</a> </li> </ul> </div> </div> </div> </footer> </div> </div> </div>  <div class="modal fade" id="sidebarModal" tabindex="-1" role="dialog" aria-labelledby="sidebarModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="loopple-modal-content loopple-modal-shadow"> <div class="modal-header"> <h5 class="loopple-modal-title loopple-h4" id="sidebarModalLabel">Change Sidebar</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-4 mx-auto mb-3 text-center"> <h5 class="loopple-h5 text-capitalize">sidebar simple</h5> <a href="javascript:;" onclick="selectSidebar(this, "<div class=\"collapse navbar-collapse w-auto\" id=\"sidenav-collapse-main\">\n <ul class=\"navbar-nav\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 45 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>shop <\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1716.000000, -439.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"shop-\" transform=\"translate(0.000000, 148.000000)\">\n <path class=\"color-background\" d=\"M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z\" id=\"Path\" opacity=\"0.598981585\"><\/path>\n <path class=\"color-background\" d=\"M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z\" id=\"Path\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Dashboard<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 42 42\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>office<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1869.000000, -293.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"office\" transform=\"translate(153.000000, 2.000000)\">\n <path class=\"color-background\" d=\"M12.25,17.5 L8.75,17.5 L8.75,1.75 C8.75,0.78225 9.53225,0 10.5,0 L31.5,0 C32.46775,0 33.25,0.78225 33.25,1.75 L33.25,12.25 L29.75,12.25 L29.75,3.5 L12.25,3.5 L12.25,17.5 Z\" id=\"Path\" opacity=\"0.6\"><\/path>\n <path class=\"color-background\" d=\"M40.25,14 L24.5,14 C23.53225,14 22.75,14.78225 22.75,15.75 L22.75,38.5 L19.25,38.5 L19.25,22.75 C19.25,21.78225 18.46775,21 17.5,21 L1.75,21 C0.78225,21 0,21.78225 0,22.75 L0,40.25 C0,41.21775 0.78225,42 1.75,42 L40.25,42 C41.21775,42 42,41.21775 42,40.25 L42,15.75 C42,14.78225 41.21775,14 40.25,14 Z M12.25,36.75 L7,36.75 L7,33.25 L12.25,33.25 L12.25,36.75 Z M12.25,29.75 L7,29.75 L7,26.25 L12.25,26.25 L12.25,29.75 Z M35,36.75 L29.75,36.75 L29.75,33.25 L35,33.25 L35,36.75 Z M35,29.75 L29.75,29.75 L29.75,26.25 L35,26.25 L35,29.75 Z M35,22.75 L29.75,22.75 L29.75,19.25 L35,19.25 L35,22.75 Z\" id=\"Shape\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Tables<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 43 36\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>credit-card<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-2169.000000, -745.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"credit-card\" transform=\"translate(453.000000, 454.000000)\">\n <path class=\"color-background\" d=\"M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z\" id=\"Path\" opacity=\"0.593633743\"><\/path>\n <path class=\"color-background\" d=\"M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z\" id=\"Shape\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Billing<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 40 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>settings<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-2020.000000, -442.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"settings\" transform=\"translate(304.000000, 151.000000)\">\n <polygon class=\"color-background\" id=\"Path\" opacity=\"0.596981957\" points=\"18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667\"><\/polygon>\n <path class=\"color-background\" d=\"M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z\" id=\"Path\" opacity=\"0.596981957\"><\/path>\n <path class=\"color-background\" d=\"M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z\" id=\"Path\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">RTL<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item mt-3\">\n <h6 class=\"ps-4 ms-2 text-uppercase text-xs font-weight-bolder opacity-6\">Account pages<\/h6>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 46 42\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>customer-support<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1717.000000, -291.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"customer-support\" transform=\"translate(1.000000, 0.000000)\">\n <path class=\"color-background\" d=\"M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z\" id=\"Path\" opacity=\"0.59858631\"><\/path>\n <path class=\"color-foreground\" d=\"M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z\" id=\"Path\"><\/path>\n <path class=\"color-foreground\" d=\"M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z\" id=\"Path\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Profile<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 40 44\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>document<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1870.000000, -591.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"document\" transform=\"translate(154.000000, 300.000000)\">\n <path class=\"color-background\" d=\"M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z\" id=\"Path\" opacity=\"0.603585379\"><\/path>\n <path class=\"color-background\" d=\"M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z\" id=\"Shape\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Sign In<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"20px\" viewBox=\"0 0 40 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>spaceship<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1720.000000, -592.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"spaceship\" transform=\"translate(4.000000, 301.000000)\">\n <path class=\"color-background\" d=\"M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z\" id=\"Shape\"><\/path>\n <path class=\"color-background\" d=\"M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z\" id=\"Path\"><\/path>\n <path class=\"color-background\" d=\"M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z\" id=\"color-2\" opacity=\"0.598539807\"><\/path>\n <path class=\"color-background\" d=\"M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z\" id=\"color-3\" opacity=\"0.598539807\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Sign Up<\/span>\n <\/a>\n <\/li>\n <\/ul>\n <\/div>")" data-sidebar="52"> <img class="w-100 loopple-component-border loopple-border-radius" src="https://loopple.s3.eu-west-3.amazonaws.com/components/sidebar-simple-soft-ui-dashboard.png" alt="sidebar-simple-soft-ui-dashboard"> </a> </div> <div class="col-4 mx-auto mb-3 text-center"> <h5 class="loopple-h5 text-capitalize">sidebar complex</h5> <a href="javascript:;" onclick="selectSidebar(this, "<div class=\"sidenav-header\">\n <i class=\"fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute right-0 top-0 d-none d-xl-none\" aria-hidden=\"true\" id=\"iconSidenav\"><\/i>\n <a class=\"navbar-brand m-0\" href=\"javascript:;\">\n <img src=\"https:\/\/demos.creative-tim.com\/soft-ui-dashboard\/assets\/img\/logo-ct.png\" class=\"navbar-brand-img h-100\" alt=\"...\">\n <span class=\"ms-1 font-weight-bold\">Soft UI Dashboard<\/span>\n <\/a>\n <\/div>\n <hr class=\"horizontal dark mt-0\">\n <div class=\"collapse navbar-collapse w-auto\" id=\"sidenav-collapse-main\">\n <ul class=\"navbar-nav\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 45 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>shop <\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1716.000000, -439.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"shop-\" transform=\"translate(0.000000, 148.000000)\">\n <path class=\"color-background\" d=\"M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z\" id=\"Path\" opacity=\"0.598981585\"><\/path>\n <path class=\"color-background\" d=\"M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z\" id=\"Path\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Dashboard<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 42 42\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>office<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1869.000000, -293.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"office\" transform=\"translate(153.000000, 2.000000)\">\n <path class=\"color-background\" d=\"M12.25,17.5 L8.75,17.5 L8.75,1.75 C8.75,0.78225 9.53225,0 10.5,0 L31.5,0 C32.46775,0 33.25,0.78225 33.25,1.75 L33.25,12.25 L29.75,12.25 L29.75,3.5 L12.25,3.5 L12.25,17.5 Z\" id=\"Path\" opacity=\"0.6\"><\/path>\n <path class=\"color-background\" d=\"M40.25,14 L24.5,14 C23.53225,14 22.75,14.78225 22.75,15.75 L22.75,38.5 L19.25,38.5 L19.25,22.75 C19.25,21.78225 18.46775,21 17.5,21 L1.75,21 C0.78225,21 0,21.78225 0,22.75 L0,40.25 C0,41.21775 0.78225,42 1.75,42 L40.25,42 C41.21775,42 42,41.21775 42,40.25 L42,15.75 C42,14.78225 41.21775,14 40.25,14 Z M12.25,36.75 L7,36.75 L7,33.25 L12.25,33.25 L12.25,36.75 Z M12.25,29.75 L7,29.75 L7,26.25 L12.25,26.25 L12.25,29.75 Z M35,36.75 L29.75,36.75 L29.75,33.25 L35,33.25 L35,36.75 Z M35,29.75 L29.75,29.75 L29.75,26.25 L35,26.25 L35,29.75 Z M35,22.75 L29.75,22.75 L29.75,19.25 L35,19.25 L35,22.75 Z\" id=\"Shape\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Tables<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 43 36\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>credit-card<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-2169.000000, -745.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"credit-card\" transform=\"translate(453.000000, 454.000000)\">\n <path class=\"color-background\" d=\"M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z\" id=\"Path\" opacity=\"0.593633743\"><\/path>\n <path class=\"color-background\" d=\"M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z\" id=\"Shape\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Billing<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 40 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>settings<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-2020.000000, -442.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"settings\" transform=\"translate(304.000000, 151.000000)\">\n <polygon class=\"color-background\" id=\"Path\" opacity=\"0.596981957\" points=\"18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667\"><\/polygon>\n <path class=\"color-background\" d=\"M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z\" id=\"Path\" opacity=\"0.596981957\"><\/path>\n <path class=\"color-background\" d=\"M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z\" id=\"Path\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">RTL<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item mt-3\">\n <h6 class=\"ps-4 ms-2 text-uppercase text-xs font-weight-bolder opacity-6\">Account pages<\/h6>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 46 42\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>customer-support<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1717.000000, -291.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"customer-support\" transform=\"translate(1.000000, 0.000000)\">\n <path class=\"color-background\" d=\"M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z\" id=\"Path\" opacity=\"0.59858631\"><\/path>\n <path class=\"color-foreground\" d=\"M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z\" id=\"Path\"><\/path>\n <path class=\"color-foreground\" d=\"M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z\" id=\"Path\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Profile<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 40 44\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>document<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1870.000000, -591.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"document\" transform=\"translate(154.000000, 300.000000)\">\n <path class=\"color-background\" d=\"M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z\" id=\"Path\" opacity=\"0.603585379\"><\/path>\n <path class=\"color-background\" d=\"M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z\" id=\"Shape\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Sign In<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link \" href=\"javascript:;\">\n <div class=\"icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center\">\n <svg width=\"12px\" height=\"20px\" viewBox=\"0 0 40 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>spaceship<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-1720.000000, -592.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"spaceship\" transform=\"translate(4.000000, 301.000000)\">\n <path class=\"color-background\" d=\"M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z\" id=\"Shape\"><\/path>\n <path class=\"color-background\" d=\"M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z\" id=\"Path\"><\/path>\n <path class=\"color-background\" d=\"M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z\" id=\"color-2\" opacity=\"0.598539807\"><\/path>\n <path class=\"color-background\" d=\"M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z\" id=\"color-3\" opacity=\"0.598539807\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <span class=\"nav-link-text ms-1\">Sign Up<\/span>\n <\/a>\n <\/li>\n <\/ul>\n <\/div>\n <div class=\"sidenav-footer mx-3 mt-3 pt-3\">\n <div class=\"card card-background shadow-none card-background-mask-secondary\" id=\"sidenavCard\">\n <div class=\"full-background\" style=\"background-image: url(https:\/\/demos.creative-tim.com\/soft-ui-dashboard\/assets\/img\/curved-images\/white-curved.jpeg)\"><\/div>\n <div class=\"card-body text-left p-3 w-100\">\n <div class=\"icon icon-shape icon-sm bg-white shadow text-center mb-3 d-flex align-items-center justify-content-center border-radius-md\">\n <i class=\"ni ni-diamond text-dark text-gradient text-lg top-0\" aria-hidden=\"true\" id=\"sidenavCardIcon\"><\/i>\n <\/div>\n <div class=\"docs-info\">\n <h6 class=\"text-white up mb-0\">Need help?<\/h6>\n <p class=\"text-xs font-weight-bold\">Please check our docs<\/p>\n <a href=\"javascript:;\" target=\"_blank\" class=\"btn btn-white btn-sm w-100 mb-0\">Documentation<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>")" data-sidebar="53"> <img class="w-100 loopple-component-border loopple-border-radius" src="https://loopple.s3.eu-west-3.amazonaws.com/components/sidebar-complex-soft-ui-dashboard.png" alt="sidebar-complex-soft-ui-dashboard"> </a> </div> <div class="col-5 mx-auto mb-3 text-center"> <h5 class="loopple-h5 text-capitalize">sidebar profile</h5> <div class="position-relative"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" onclick="closeOpenModal()" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO sidebar - Unlock </a> </div> <img class="w-100 loopple-component-border loopple-border-radius" src="https://loopple.s3.eu-west-3.amazonaws.com/components/sidebar-profile-soft-ui-dashboard.png" alt="sidebar-profile-soft-ui-dashboard"> </div> </div> <div class="col-5 mx-auto mb-3 text-center"> <h5 class="loopple-h5 text-capitalize">sidebar messages</h5> <div class="position-relative"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" onclick="closeOpenModal()" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO sidebar - Unlock </a> </div> <img class="w-100 loopple-component-border loopple-border-radius" src="https://loopple.s3.eu-west-3.amazonaws.com/components/sidebar-messages-soft-ui-dashboard.png" alt="sidebar-messages-soft-ui-dashboard"> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="loopple-btn loopple-btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="navbarModal" tabindex="-1" role="dialog" aria-labelledby="navbarModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="loopple-modal-content loopple-modal-shadow"> <div class="modal-header"> <h5 class="loopple-modal-title loopple-h4" id="navbarModalLabel">Change Navbar</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-12 mb-4"> <h5 class="loopple-h5 text-capitalize">navbar simple</h5> <a href="javascript:;" onclick="selectNavbar(this, "<div class=\"container-fluid\">\n <a class=\"navbar-brand\" href=\"\" rel=\"tooltip\" title=\"Designed and Coded by Creative Tim\" data-placement=\"bottom\" target=\"_blank\">\n Soft UI Dashboard\n <\/a>\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navigation\" aria-controls=\"navigation\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"><\/span>\n <\/button>\n <div class=\"collapse navbar-collapse\" id=\"navigation\">\n <ul class=\"navbar-nav navbar-nav-hover ms-auto\">\n <div class=\"row\">\n <div class=\"col-auto m-auto\">\n <a class=\"cursor-pointer\">\n <i class=\"fa fa-cog fixed-plugin-button-nav\" aria-hidden=\"true\"><\/i>\n <\/a>\n <\/div>\n <div class=\"col-auto m-auto\">\n <div class=\"dropdown\">\n <a class=\"cursor-pointer\" type=\"button\" id=\"dropdownMenuButton\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n <i class=\"fa fa-bell\" aria-hidden=\"true\"><\/i>\n <\/a>\n <ul class=\"dropdown-menu dropdown-menu-right px-2 py-3 ms-n4\" aria-labelledby=\"dropdownMenuButton\">\n ...\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"col-auto\">\n <div class=\"bg-white border-radius-lg d-flex me-2\">\n <input type=\"text\" class=\"form-control border-0 ps-3\" placeholder=\"Type here...\">\n <button class=\"btn bg-gradient-primary my-1 me-1\">Search<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/ul>\n <\/div>\n <\/div>")" data-navbar="48"> <img class="w-100 loopple-component-border loopple-border-radius-sm" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-simple-soft-ui-dashboard.png" alt="navbar-simple-soft-ui-dashboard"> </a> </div> <div class="col-12 mb-4"> <h5 class="loopple-h5 text-capitalize">navbar complex</h5> <a href="javascript:;" onclick="selectNavbar(this, "<div class=\"container-fluid py-1 px-3\">\n <nav aria-label=\"breadcrumb\">\n <ol class=\"breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5\">\n <li class=\"breadcrumb-item text-sm\"><a class=\"opacity-5 text-dark\" href=\"javascript:;\">Pages<\/a><\/li>\n <li class=\"breadcrumb-item text-sm text-dark active\" aria-current=\"page\">Dashboard<\/li>\n <\/ol>\n <h6 class=\"font-weight-bolder mb-0\">Dashboard<\/h6>\n <\/nav>\n <div class=\"collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4\" id=\"navbar\">\n <div class=\"ms-md-auto pe-md-3 d-flex align-items-center\">\n <div class=\"input-group\">\n <span class=\"input-group-text text-body\"><i class=\"fas fa-search\" aria-hidden=\"true\"><\/i><\/span>\n <input type=\"text\" class=\"form-control\" placeholder=\"Type here...\">\n <\/div>\n <\/div>\n <ul class=\"navbar-nav justify-content-end\">\n <li class=\"nav-item d-flex align-items-center\">\n <a href=\"javascript:;\" class=\"nav-link text-body font-weight-bold px-0\">\n <i class=\"fa fa-user me-sm-1\" aria-hidden=\"true\"><\/i>\n <span class=\"d-sm-inline d-none\">Sign In<\/span>\n <\/a>\n <\/li>\n <li class=\"nav-item d-xl-none ps-3 d-flex align-items-center\">\n <a href=\"javascript:;\" class=\"nav-link text-body p-0\" id=\"iconNavbarSidenav\">\n <div class=\"sidenav-toggler-inner\">\n <i class=\"sidenav-toggler-line\"><\/i>\n <i class=\"sidenav-toggler-line\"><\/i>\n <i class=\"sidenav-toggler-line\"><\/i>\n <\/div>\n <\/a>\n <\/li>\n <li class=\"nav-item px-3 d-flex align-items-center\">\n <a href=\"javascript:;\" class=\"nav-link text-body p-0\">\n <i class=\"fa fa-cog fixed-plugin-button-nav cursor-pointer\" aria-hidden=\"true\"><\/i>\n <\/a>\n <\/li>\n <li class=\"nav-item dropdown pe-2 d-flex align-items-center\">\n <a href=\"javascript:;\" class=\"nav-link text-body p-0\" id=\"dropdownMenuButton\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n <i class=\"fa fa-bell cursor-pointer\" aria-hidden=\"true\"><\/i>\n <\/a>\n <ul class=\"dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4\" aria-labelledby=\"dropdownMenuButton\">\n <li class=\"mb-2\">\n <a class=\"dropdown-item border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex py-1\">\n <div class=\"my-auto\">\n <img src=\"https:\/\/demos.creative-tim.com\/soft-ui-dashboard\/assets\/img\/team-2.jpg\" class=\"avatar avatar-sm me-3 \">\n <\/div>\n <div class=\"d-flex flex-column justify-content-center\">\n <h6 class=\"text-sm font-weight-normal mb-1\">\n <span class=\"font-weight-bold\">New message<\/span> from Laur\n <\/h6>\n <p class=\"text-xs text-secondary mb-0\">\n <i class=\"fa fa-clock me-1\" aria-hidden=\"true\"><\/i>\n 13 minutes ago\n <\/p>\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <li class=\"mb-2\">\n <a class=\"dropdown-item border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex py-1\">\n <div class=\"my-auto\">\n <img src=\"https:\/\/demos.creative-tim.com\/soft-ui-dashboard\/assets\/img\/small-logos\/logo-spotify.svg\" class=\"avatar avatar-sm bg-gradient-dark me-3 \">\n <\/div>\n <div class=\"d-flex flex-column justify-content-center\">\n <h6 class=\"text-sm font-weight-normal mb-1\">\n <span class=\"font-weight-bold\">New album<\/span> by Travis Scott\n <\/h6>\n <p class=\"text-xs text-secondary mb-0\">\n <i class=\"fa fa-clock me-1\" aria-hidden=\"true\"><\/i>\n 1 day\n <\/p>\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <li>\n <a class=\"dropdown-item border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex py-1\">\n <div class=\"avatar avatar-sm bg-gradient-secondary me-3 my-auto\">\n <svg width=\"12px\" height=\"12px\" viewBox=\"0 0 43 36\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>credit-card<\/title>\n <g id=\"Basic-Elements\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rounded-Icons\" transform=\"translate(-2169.000000, -745.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g id=\"Icons-with-opacity\" transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"credit-card\" transform=\"translate(453.000000, 454.000000)\">\n <path class=\"color-background\" d=\"M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z\" id=\"Path\" opacity=\"0.593633743\"><\/path>\n <path class=\"color-background\" d=\"M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z\" id=\"Shape\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"d-flex flex-column justify-content-center\">\n <h6 class=\"text-sm font-weight-normal mb-1\">\n Payment successfully completed\n <\/h6>\n <p class=\"text-xs text-secondary mb-0\">\n <i class=\"fa fa-clock me-1\" aria-hidden=\"true\"><\/i>\n 2 days\n <\/p>\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <\/ul>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>")" data-navbar="49"> <img class="w-100 loopple-component-border loopple-border-radius-sm" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-complex-soft-ui-dashboard.png" alt="navbar-complex-soft-ui-dashboard"> </a> </div> <div class="col-12 mb-4"> <h5 class="loopple-h5 text-capitalize">navbar notification</h5> <div class="position-relative"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" onclick="closeOpenModal()" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO navbar - Unlock </a> </div> <img class="w-100 loopple-component-border loopple-border-radius-sm" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-notification-soft-ui-dashboard.png" alt="navbar-notification-soft-ui-dashboard"> </div> </div> <div class="col-12 mb-4"> <h5 class="loopple-h5 text-capitalize">navbar crypto</h5> <div class="position-relative"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" onclick="closeOpenModal()" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO navbar - Unlock </a> </div> <img class="w-100 loopple-component-border loopple-border-radius-sm" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-crypto-soft-ui-dashboard.png" alt="navbar-crypto-soft-ui-dashboard"> </div> </div> </div> </div> </div> <div class="modal-footer pt-0"> <button type="button" class="loopple-btn loopple-btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>   <div class="loopple-modal loopple-z-index-1070" id="modal-revert-changes"> <div class="loopple-modal-bg loopple-modal-exit"></div> <div class="loopple-modal-container loopple-modal-container-md"> <div class="loopple-px-3 loopple-py-3"> <div class="loopple-row loopple-px-3"> <div class="loopple-col-5 loopple-pl-2 loopple-d-flex loopple-align-items-center"> <div> <p class="loopple-mb-0 loopple-h4 loopple-font-weight-500 loopple-text-body loopple-mb-3"> Get access to the revert changes feature (and many others) with a <span class="loopple-font-weight-bold">PRO plan</span> </p> <div class="loopple-display-2 loopple-text-body loopple-mb-2">$9<span class="loopple-text-muted loopple-text-sm">/month</span></div> <a onclick="submitProductPaymentForm('price_1JhIzMLDk0qEKSl1j4KaOlku')" class="loopple-btn loopple-btn-primary loopple-text-white">Buy Subscription</a> <br> <br> <span class="loopple-text-xs"><a href="https://www.creative-tim.com/builder#pricing" target="_blank" class="loopple-text-default"> See full pricing <span class="loopple-text-primary loopple-text-underline">here</span>.</a></span> </div> </div> <div class="loopple-col-7 loopple-p-2"> <img src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/gifs/soft-ui-dashboard-revert-changes.gif" class="loopple-w-100 loopple-border-radius"/> </div> </div> </div> <button class="loopple-modal-close loopple-modal-exit loopple-text-lg loopple-mt-n2 loopple-mr-n2"><span aria-hidden="true">脳</span></button> </div> </div>  <div class="loopple-modal loopple-z-index-9999" id="modal-images"> <div class="loopple-modal-bg loopple-modal-exit"></div> <div class="loopple-modal-container"> <div class="loopple-px-3 loopple-pt-3"> <h3 class="loopple-h3 loopple-mb-3">Upload an image</h3> </div> <div> <ul class="loopple-nav loopple-nav-tabs nav nav-tabs loopple-pr-3" id="tabImages" role="tablist"> <li class="loopple-nav-item" role="presentation"> <button class="loopple-nav-link loopple-nav-link-border-bottom loopple-px-3 w-100 btn-sm active" id="new-image-tab" onclick="removeSelectedImage()" data-toggle="tab" data-target="#newImage" type="button" role="tab" aria-controls="newImage" aria-selected="true">New Image</button> </li> <li class="loopple-nav-item" role="presentation"> <button class="loopple-nav-link loopple-nav-link-border-bottom loopple-px-3 w-100 btn-sm" id="my-images-tab" data-toggle="tab" data-target="#myImages" type="button" role="tab" aria-controls="myImages" aria-selected="true">My Images</button> </li> </ul> </div> <div wire:id="y7hJM8NlgAfljAQDdQZC" wire:initial-data="{"fingerprint":{"id":"y7hJM8NlgAfljAQDdQZC","name":"image-upload","locale":"en","path":"builder\/project-Kncn5WRj49z2c5VDiRaMgwtNXFH0TOUIfTn","method":"GET","v":"acj"},"effects":{"listeners":[]},"serverMemo":{"children":[],"errors":[],"htmlHash":"4b5bfddc","data":{"image":null,"projectId":144845,"projectSlug":"project-Kncn5WRj49z2c5VDiRaMgwtNXFH0TOUIfTn"},"dataMeta":[],"checksum":"28d8f54d61db94fab51f3a81b4a33cd377cc00feba5fd252aeff93f80e974efd"}}" class="tab-content tab-content-builder loopple-tab-content" id="myTabImagesContent"> <div class="loopple-tab-pane fade show active" id="newImage" role="tabpanel" aria-labelledby="new-image-tab"> <div class="loopple-mt-3 loopple-px-3 loopple-pb-3 loopple-text-center"> <div> <div class="loopple-custom-file-uploader loopple-py-2 loopple-mb-2"> <input type="text" name="filename" class="form-control loopple-file-name-get loopple-d-block loopple-mx-auto loopple-w-100 loopple-my-2" placeholder="Drop file here or click to upload"> <div wire:loading.block> <i class="fa fa-spinner fa-spin"></i> </div> <input type="file" id="file_upload" onchange="document.querySelector('.loopple-file-name-get').value = this.files[0].name; document.querySelector('.loopple-btn-upload').classList.remove('d-none');" wire:model="image" accept="image/*" /> <button class="loopple-btn loopple-btn-dark loopple-btn-sm loopple-mb-3 loopple-btn-select-file"> <i class="fa fa-file loopple-mr-1"></i> Choose File </button> </div> </div> </div> </div> <div class="loopple-tab-pane fade show" id="myImages" role="tabpanel" aria-labelledby="my-images-tab"> <div class="loopple-mt-3 loopple-px-3 loopple-pb-3 loopple-text-center loopple-max-height-500 loopple-overflow-scroll"> <div class="row"> <div class="col-md-12 text-center"> <p class="loopple-text-sm loopple-my-5">No images added for this project.</p> </div> </div> </div> </div> </div>  <div class="loopple-border-top loopple-px-3 loopple-pt-3 loopple-text-right loopple-pb-3"> <button class="loopple-btn loopple-btn-default loopple-btn-sm loopple-modal-exit">Cancel</button> <button class="loopple-btn loopple-btn-primary loopple-btn-sm loopple-opacity-6 loopple-choose-image" onclick="chooseImage(this)">Choose Image</button> </div> <button class="loopple-modal-close loopple-modal-exit loopple-text-sm"><span aria-hidden="true">脳</span></button> </div> </div> <div class=" loopple-d-none loopple-bg-white loopple-shadow loopple-border loopple-px-3 loopple-py-3 loopple-z-index-9999 loopple-border-radius loopple-transition-none " id="popover-tips" > <div> <h4 class="loopple-mb-3 loopple-h4 loopple-text-dark">Tips</h4> <ul class="loopple-pl-4"> <li class="loopple-mb-2 loopple-h5">Use <b>CMD/CTRL + S</b> to save the project</li> <li class="loopple-mb-2 loopple-h5">Double-click on texts to start editing</li> <li class="loopple-h5">Use <b>Backspace key</b> to remove an element</li> </ul> </div> </div> <div class="position-absolute top-0 left-0 h-100 w-100 loopple-z-index-9999 d-none loopple-small-devices-alert"> <div class="overflow-hidden position-relative h-100 w-100"> <span class="mask bg-gradient-dark opacity-9"></span> <div class="card position-relative mx-5 mt-10"> <div class="card-body text-center"> <h5 class="font-weight-bolder mb-2 pt-2">Creative Tim Builder is not currently working on small resolution and touchscreen devices</h5> <p>Try using the builder on higher resolution devices.</p> <a href="../../" class="btn bg-gradient-primary mb-0">Return to home page</a> </div> </div> </div> </div> </div>  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> <script src="https://builder.creative-tim.com/js/vendor/jquery.min.js"></script>  <script src="https://builder.creative-tim.com/js/vendor/bootstrap-notify.js" defer></script>  <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/popper.min.js"></script> <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/bootstrap.min.js"></script> <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/chartjs.min.js"></script> <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/Chart.extension.js"></script> <script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/soft-ui-dashboard.min.js?v=1.0.2"></script> <script> if (document.querySelector("#chart-bars")) { var ctx = document.getElementById("chart-bars").getContext("2d"); new Chart(ctx, { type: "bar", data: { labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Sales", tension: 0.4, borderWidth: 0, borderRadius: 4, borderSkipped: false, backgroundColor: "#fff", data: [450, 200, 100, 220, 500, 100, 400, 230, 500], maxBarThickness: 6 }, ], }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false, } }, interaction: { intersect: false, mode: 'index', }, scales: { y: { grid: { drawBorder: false, display: false, drawOnChartArea: false, drawTicks: false, }, ticks: { suggestedMin: 0, suggestedMax: 500, beginAtZero: true, padding: 15, font: { size: 14, family: "Open Sans", style: 'normal', lineHeight: 2 }, color: "#fff" }, }, x: { grid: { drawBorder: false, display: false, drawOnChartArea: false, drawTicks: false }, ticks: { display: false }, }, }, }, }); }; if (document.querySelector("#chart-line")) { var ctx2 = document.getElementById("chart-line").getContext("2d"); var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50); gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)"); gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)"); gradientStroke1.addColorStop(0, "rgba(203,12,159,0)"); var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50); gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)"); gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)"); gradientStroke2.addColorStop(0, "rgba(20,23,39,0)"); new Chart(ctx2, { type: "line", data: { labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Mobile apps", tension: 0.4, borderWidth: 0, pointRadius: 0, borderColor: "#cb0c9f", borderWidth: 3, backgroundColor: gradientStroke1, fill: true, data: [50, 40, 300, 220, 500, 250, 400, 230, 500], maxBarThickness: 6 }, { label: "Websites", tension: 0.4, borderWidth: 0, pointRadius: 0, borderColor: "#3A416F", borderWidth: 3, backgroundColor: gradientStroke2, fill: true, data: [30, 90, 40, 140, 290, 290, 340, 230, 400], maxBarThickness: 6 }, ], }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false, } }, interaction: { intersect: false, mode: 'index', }, scales: { y: { grid: { drawBorder: false, display: true, drawOnChartArea: true, drawTicks: false, borderDash: [5, 5] }, ticks: { display: true, padding: 10, color: '#b2b9bf', font: { size: 11, family: "Open Sans", style: 'normal', lineHeight: 2 }, } }, x: { grid: { drawBorder: false, display: false, drawOnChartArea: false, drawTicks: false, borderDash: [5, 5] }, ticks: { display: true, color: '#b2b9bf', padding: 20, font: { size: 11, family: "Open Sans", style: 'normal', lineHeight: 2 }, } }, }, }, }); }; </script> <script src="https://builder.creative-tim.com/js/vendor/axios.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify-html.js"></script> <script src="https://builder.creative-tim.com/js/bootstrap.bundle.min.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/FileSaver.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/jszip-utils.min.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/jszip.min.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/papaparse.min.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/fontawesome-iconpicker.js"></script> <script src="https://builder.creative-tim.com/js/vendor/codemirror.js"></script> <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script> <script src="https://codemirror.net/mode/xml/xml.js"></script> <script src="https://builder.creative-tim.com/js/app.js?v=0.1.4"></script> <script> // Alert dismissible function if(document.querySelector('.loopple-alert.loopple-alert-dismissible .close')){ document.querySelector('.loopple-alert.loopple-alert-dismissible .close').onclick = function() { document.querySelector('.loopple-alert').classList.add('loopple-opacity-0'); setTimeout(function(){ document.querySelector('.loopple-alert').remove(); }, 1000); } } </script> <script src="https://js.stripe.com/v3/"></script> <script> function submitProductPaymentForm(product) { var stripe = window.Stripe('pk_live_51Go8LeLDk0qEKSl1NbMfnzJNvp9smV3cc48XXBaJ64U3jYvE5pVUZo9lMPITqGnZssQJGFe829nzTjVAP6QUaBsD00phhnaIK0'); btn = $(this).attr('dataPrice'); stripe.redirectToCheckout({ mode: 'subscription', lineItems: [{ price: product, quantity: 1 }], successUrl: 'https://builder.creative-tim.com/payment/success?session_id={CHECKOUT_SESSION_ID}', cancelUrl: 'https://builder.creative-tim.com', clientReferenceId: btn }).then(function (result) { console.log('result'); console.log(result.error.message); }); } </script> <script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script><script data-turbo-eval="false" data-turbolinks-eval="false" >window.livewire = new Livewire();window.Livewire = window.livewire;window.livewire_app_url = '';window.livewire_token = '6Gid8D0OSR7YR6UPDsTZFnsiKyUNRP1BAkHqfSHX';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script> </body> </html>

CINXE.COM

Creative Tim Builder