Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
18 kB
3
Indexable
Never
<div xmlns="http://www.w3.org/1999/xhtml" id="root">
  <div class="backdrop" id="backdrop">
    <div class="form" id="background" style="background-color: rgb(255, 255, 255);">
      <span data-v-4f1211ad="" data-v-3a669130="" data-dismiss="true" class="close" style="color: #414042; font-size: 18px; width: 18px; height: 18px; line-height: 18px; display: block; position: absolute;">
        <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-651.000000, -30.000000)" fill="#4dcaf6" id="close" style="fill: rgb(27, 27, 27);">
                    <g id="zamykacz" transform="translate(650.000000, 29.000000)">
                        <polygon id="Rectangle-4" points="2.636064 1.221804 16.778196 15.363972 15.363936 16.778196 1.221804 2.636046"/>
                        <polygon id="Rectangle-4-copy" points="16.996824 2.457144 2.457144 16.99686 1.003176 15.542856 15.542856 1.003158"/>
                    </g>
                </g>
            </g>
        </svg>
      </span>

      <div class="container">
        <div class="row">
          <div class="col" id="backgroundImage" style="background-image: url('https://www.smay.pl/user/assets/bg-pic.jpg')"></div>
          <div class="col d-flex justify-content-center flex-column">
            <div class="spacing-container">
              <h2 id="heading" style="color: rgb(27, 27, 27);">Dzień dobry,</h2>

              <div id="content">Jeśli chcesz otrzymać link do naszego webinarium to wypełnij poniższy formularz:</div>

              <div id="inputPlace"><fieldset data-v-3a669130="" class="form-group mb-0">
                <label data-v-3a669130="" for="wecancallyouback_123"></label>
               <input data-v-3a669130="" class="form-control" required="" type="text" name="first_name" placeholder="podaj imię" data-value="{{ receiver.first_name }}" value="{{ receiver.first_name }}" id="wecancallyouback_123" />
             <input data-v-3a669130="" class="form-control" required="" type="text" name="email" placeholder="podaj adres email" data-value="{{ receiver.email }}" value="{{ receiver.email }}" id="wecancallyouback_123" />
               <div class="select"> Wybierz zawód <br><br>[:attr_segment_klienta_w_systemie_4 class="ue_input"]</div>
                </fieldset><div class="form-check mt-3"><br>
               <input name="z1_polityka_prywatnosci" id="ewhge" required="Zaznacz to pole" class="form-check-input" type="checkbox" />
                <label for="ewhge" class="form-check-label zgoda">
                    <div class="zgoda tooltip">Zapoznałem się z treścią <a href="https://www.smay.pl/polityka-prywatnosci/" title="Polityka prywatności" taget="_blank"> polityki prywatności</a>
                    <span class="tooltiptext"> oraz wyrażam zgodę na przetwarzanie moich danych osobowych wskazanych w niniejszym formularzu. Celem przetwarzania będzie prowadzenie korespondencji i obsługi zapytania lub załatwienie sprawy, której dotyczy ten formularz.</span>
                  </div> 
                </label>
                <br>
                <input name="z2_cele_marketingowe_newsletter" id="lorjdpg" class="form-check-input" type="checkbox" required="Zaznacz to pole" />
                <label for="lorjdpg" class="form-check-label zgoda">
                  <div class="zgoda tooltip">
                    Wyrażam zgodę na przetwarzanie moich danych osobowych w celach marketingowych.
                    <span class="tooltiptext"> Cele marketingowe obejmują: udział webinarium szkoleniowym, otrzymanie informacji szkoleniowo-reklamowych takich jak ebook czy prezentacje firmowe oraz otrzymywanie newslettera firmy SMAY. Celem marketingowym będzie również analizowanie moich preferencji, aktywności i zainteresowań w celu dopasowania treści i ofert do stworzonego indywidualnego profilu.</span>
                	</div>
                 </label>
            
              </div></div>

              <button class="btn btn-dark" style="border-color: #000000;background-color: #000000; color: #ffffff;" id="submitBtn">Zapisz mnie</button>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>

  <style>
    .zgoda { font-size: 11px;}
        .select select{
        width: 100%;
    		background: #f5f5f5;
    		border: 0px;
    		padding: 10px;
    }
    .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 80%;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
    
    
    
    .backdrop {
      background-color: rgba(22, 22, 22, 0.27);
      padding: 5em 1em;
      min-height: 100vh;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      top: 0;
      -webkit-overflow-scrolling: touch;
      overflow-y: scroll;
    }

    .form {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.07);
      position: relative;
      border-radius: 3px;
      max-width: 630px;
      width: 100%;
      overflow: hidden;
      background-color: #ffffff;
      margin: auto;
    }

    .close[data-v-4f1211ad] {
      position: absolute;
      height: 1em;
      width: 1em;
      cursor: pointer;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      font-size: 2em;
      opacity: 0.3;
      font-weight: 100;
      line-height: 1em;
      letter-spacing: 0;
      margin-left: .5em;
      text-align: center;
      overflow: hidden;
      top: 0.25em;
      left: auto;
      right: 0.25em;
      bottom: auto;
      z-index: 10;
    }

    .close[data-v-4f1211ad]:hover {
      opacity: 1;
    }

    .close svg[data-v-4f1211ad] {
      z-index: 20;
      position: absolute;
      top: 50%;
      right: 50%;
      -webkit-transform: translate3d(50%, -50%, 0);
      transform: translate3d(50%, -50%, 0);
    }

    #backgroundImage {
      background-size: cover;
      min-height: 120px;
      background-repeat: no-repeat;
      width: 240px;
    }

    .powered-by {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }

    @media (max-width: 600px) {
      .powered-by {
        right: 50%;
        transform: translateX(50%);
      }
    }

    .powered-by p {
      cursor: default;
      color: #d0d0d0;
    }

    .powered-by p,
    .powered-by a {
      font-weight: 500;
    }

    @media (max-width: 768px) {
      .form {
        width: auto;
      }

      #backgroundImage {
        display: none;
      }
    }

    #heading {
      margin: 0;
      word-break: break-word;
      hyphens: auto;

      font-size: 16px;
      font-weight: 500;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: #1b1b1b;
    }

    #content {
      margin-top: 6px;
      margin-bottom: 17px;
      font-size: 13px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: 1.42;
      letter-spacing: normal;
      text-align: center;
      color: #5b5b5b;
    }

    .spacing-container {
      padding-top: 75px;
      padding-bottom: 75px;
      padding-left: 30px;
      padding-right: 30px;
    }

    @media (max-width: 768px) {
      .spacing-container {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
      }
    }

    #inputPlace {
      border-color: #f5f5f5;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: transparent;
      border-radius: .4em;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
    }

    #cancelBtn {
      margin-top: 10px;
      text-decoration: underline;
      font-size: 12px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: #4c4c4c;
    }

    div.form-group {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      vertical-align: top;
      padding: 0;
      border: 0;
      width: 100%;
    }

    #inputPlace fieldset.form-group {
      border-color: inherit;
    }

    .form-check {
      position: relative;
      display: block;
      padding-left: 1.25rem;
    }

    input:not([type="checkbox"]), .form-check, button, .btn {
      margin-bottom: 10px;
    }

    input[type="checkbox"] {
      box-sizing: border-box;
      padding: 0;
      height: initial;
      width: initial;
      line-height: initial;
    }

    .form-check-input {
      position: absolute;
      margin-left: -1.25rem;
    }

    .form-check-label {
      margin-bottom: 0;
      hyphens: auto;
      word-break: break-word;
      font-size: 13px;
      line-height: 1.42;
      letter-spacing: normal;
      text-align: left;
      color: #5b5b5b;
    }

    .form-group label {
      hyphens: auto;
      word-break: break-word;
      font-size: 13px;
      line-height: 1.42;
      letter-spacing: normal;
      text-align: left;
      color: #5b5b5b;
    }

    fieldset {
      margin: 0;
      padding: 0;
      border: 0;
    }

    button, .btn {
      border-radius: 0;
      border: 1px solid;
      word-break: break-word;
      hyphens: auto;
      display: block;
      width: 100%;
    }

    input {
      display: block;
      font-weight: 400;
      text-align: center;
      white-space: nowrap;
      background-color: #f5f5f5;
      vertical-align: middle;
      border: none;
      padding: 0 24px;
      font-size: 14px;
      height: 38px;
      line-height: 38px;
      border-radius: 0;
      flex-grow: 1;
      width: 100%;
      outline: none;
      transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    #inputPlace input, input {
      border-color: inherit;
    }

    *, ::after, ::before {
      box-sizing: border-box;
    }

    html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      -ms-overflow-style: scrollbar;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      margin: 0;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      text-align: left;
    }

    [tabindex="-1"]:focus {
      outline: 0 !important;
    }

    h1, h2, h3, h4, h5, h6 {
      margin-top: 0;
      margin-bottom: .5rem;
    }

    p {
      margin-top: 0;
      margin-bottom: 1rem;
    }

    a {
      color: #4dcaf6;
      text-decoration: none;
      background-color: transparent;
      -webkit-text-decoration-skip: objects;
    }

    a:hover {
      color: #3e9fc2;
      text-decoration: underline;
    }

    a:not([href]):not([tabindex]) {
      color: inherit;
      text-decoration: none;
    }

    a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
      color: inherit;
      text-decoration: none;
    }

    a:not([href]):not([tabindex]):focus {
      outline: 0;
    }

    svg {
      overflow: hidden;
      vertical-align: middle;
    }

    button {
      border-radius: 0;
    }

    button:focus {
      outline: 1px dotted;
      outline: 5px auto -webkit-focus-ring-color;
    }

    button {
      margin: 0;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    button {
      overflow: visible;
    }

    button {
      text-transform: none;
    }

    [type=reset], [type=submit], button, html [type=button] {
      -webkit-appearance: button;
    }

    [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
      padding: 0;
      border-style: none;
    }

    [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
      height: auto;
    }

    [type=search] {
      outline-offset: -2px;
      -webkit-appearance: none;
    }

    [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
      -webkit-appearance: none;
    }

    ::-webkit-file-upload-button {
      font: inherit;
      -webkit-appearance: button;
    }

    [hidden] {
      display: none !important;
    }

    h1, h2, h3, h4, h5, h6 {
      margin-bottom: .5rem;
      font-family: inherit;
      font-weight: 500;
      line-height: 1.2;
      color: inherit;
    }

    h1 {
      font-size: 2.5rem;
    }

    h2 {
      font-size: 2rem;
    }

    h3 {
      font-size: 1.75rem;
    }

    h4 {
      font-size: 1.5rem;
    }

    h5 {
      font-size: 1.25rem;
    }

    h6 {
      font-size: 1rem;
    }

    .container {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }

    @media (min-width: 576px) {
      .container {
        max-width: 540px;
      }
    }

    @media (min-width: 768px) {
      .container {
        max-width: 720px;
      }
    }

    @media (min-width: 992px) {
      .container {
        max-width: 960px;
      }
    }

    @media (min-width: 1200px) {
      .container {
        max-width: 1140px;
      }
    }

    .row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
    }

    .col {
      position: relative;
      width: 100%;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
    }

    @media (min-width: 768px) {
      .col#backgroundImage {
        -ms-flex: 0 0 240px;
        flex: 0 0 240px;
        max-width: 240px;
      }

      .col:not(#backgroundImage) {
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }

    .btn {
      display: block;
      width: 100%;
      font-weight: 400;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      border: 1px solid transparent;
      padding: 0 24px;
      height: 38px;
      line-height: 38px;
      font-size: 14px;
      border-radius: 0;
      transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    @media screen and (prefers-reduced-motion: reduce) {
      .btn {
        transition: none;
      }
    }

    .btn:focus, .btn:hover {
      text-decoration: none;
    }

    .btn:focus {
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    }

    .btn:disabled {
      opacity: .65;
    }

    .btn-dark {
      color: #fff;
      background-color: #4dcaf6;
      border-color: #4dcaf6;
    }

    .btn-dark:hover {
      color: #fff;
      background-color: rgb(60, 159, 193);
      border-color: rgb(60, 159, 193);
    }

    .btn-dark:disabled {
      color: #fff;
      background-color: rgb(77, 202, 246);
      border-color: rgb(77, 202, 246);
    }

    .close {
      float: right;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1;
      color: #000;
      text-shadow: 0 1px 0 #fff;
      opacity: .5;
    }

    button.close {
      padding: 0;
      background-color: transparent;
      border: 0;
      -webkit-appearance: none;
    }

    .d-flex {
      display: -ms-flexbox !important;
      display: flex !important;
    }

    .flex-column {
      -ms-flex-direction: column !important;
      flex-direction: column !important;
    }

    .justify-content-center {
      -ms-flex-pack: center !important;
      justify-content: center !important;
    }

    @media (min-width: 768px) {
      .pl-md-0 {
        padding-left: 0 !important;
      }
    }

    @media print {
      *, ::after, ::before {
        text-shadow: none !important;
        box-shadow: none !important;
      }

      a:not(.btn) {
        text-decoration: underline;
      }

      h2, h3, p {
        orphans: 3;
        widows: 3;
      }

      h2, h3 {
        page-break-after: avoid;
      }

      @page {
        size: a3;
      }

      body {
        min-width: 992px !important;
      }

      .container {
        min-width: 992px !important;
      }
    }
  </style>
</div>