- var theme_customizer      = true;
- var animate               = true;
- var modal_animated        = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Animated Modal
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Animated Modal
          // Container-fluid starts
          .container-fluid
            .row
              .col-sm-12
                .card
                  .card-header
                    h4 Modal With Animations
                    p.f-m-light.mt-1 
                      | Use the different types of fades and animations in modals.
                  .card-body
                    .row.justify-content-center.align-items-center
                      .col-xl-6.col-md-8
                        #animation-box.animate-img
                          .card
                            .animate-widget
                              div
                                img.img-fluid(src='../assets/images/slider/6.jpg', alt='Drawing-room')
                              .text-center.p-25
                                p.text-muted.mb-0
                                h5 It&apos;s Magic!!
                                |  Select the animation options given below and then click on the launch button.
                                p
                      .col-xl-6
                        form.form-inline.theme-form.row.animated-modal
                          .mb-3.mb-0.animated-modal-md-mb.w-100
                            label.me-3 Entrances
                            select#entrance.form-select.w-75
                              optgroup(label='Attention Seekers')
                                option(value='bounce') bounce
                                option(value='flash') flash
                                option(value='pulse') pulse
                                option(value='rubberBand') rubberBand
                                option(value='shake') shake
                                option(value='swing') swing
                                option(value='tada') tada
                                option(value='wobble') wobble
                                option(value='jello') jello
                              optgroup(label='Bouncing Entrances')
                                option(value='bounceIn', selected='') bounceIn
                                option(value='bounceInDown') bounceInDown
                                option(value='bounceInLeft') bounceInLeft
                                option(value='bounceInRight') bounceInRight
                                option(value='bounceInUp') bounceInUp
                              optgroup(label='Fading Entrances')
                                option(value='fadeIn') fadeIn
                                option(value='fadeInDown') fadeInDown
                                option(value='fadeInDownBig') fadeInDownBig
                                option(value='fadeInLeft') fadeInLeft
                                option(value='fadeInLeftBig') fadeInLeftBig
                                option(value='fadeInRight') fadeInRight
                                option(value='fadeInRightBig') fadeInRightBig
                                option(value='fadeInUp') fadeInUp
                                option(value='fadeInUpBig') fadeInUpBig
                              optgroup(label='Flippers')
                                option(value='flipInX') flipInX
                                option(value='flipInY') flipInY
                              optgroup(label='Lightspeed')
                                option(value='lightSpeedIn') lightSpeedIn
                              optgroup(label='Rotating Entrances')
                                option(value='rotateIn') rotateIn
                                option(value='rotateInDownLeft') rotateInDownLeft
                                option(value='rotateInDownRight') rotateInDownRight
                                option(value='rotateInUpLeft') rotateInUpLeft
                                option(value='rotateInUpRight') rotateInUpRight
                              optgroup(label='Sliding Entrances')
                                option(value='slideInUp') slideInUp
                                option(value='slideInDown') slideInDown
                                option(value='slideInLeft') slideInLeft
                                option(value='slideInRight') slideInRight
                              optgroup(label='Zoom Entrances')
                                option(value='zoomIn') zoomIn
                                option(value='zoomInDown') zoomInDown
                                option(value='zoomInLeft') zoomInLeft
                                option(value='zoomInRight') zoomInRight
                                option(value='zoomInUp') zoomInUp
                              optgroup(label='Specials')
                                option(value='rollIn') rollIn
                          .mb-3.mb-0.animated-modal-md-mb.w-100
                            label.me-3 Exits
                            select#exit.form-select.w-75
                              optgroup(label='Attention Seekers')
                                option(value='bounce') bounce
                                option(value='flash') flash
                                option(value='pulse') pulse
                                option(value='rubberBand') rubberBand
                                option(value='shake') shake
                                option(value='swing') swing
                                option(value='tada') tada
                                option(value='wobble') wobble
                                option(value='jello') jello
                              optgroup(label='Bouncing Exits')
                                option(value='bounceOut') bounceOut
                                option(value='bounceOutDown') bounceOutDown
                                option(value='bounceOutLeft') bounceOutLeft
                                option(value='bounceOutRight') bounceOutRight
                                option(value='bounceOutUp') bounceOutUp
                              optgroup(label='Fading Exits')
                                option(value='fadeOut') fadeOut
                                option(value='fadeOutDown') fadeOutDown
                                option(value='fadeOutDownBig') fadeOutDownBig
                                option(value='fadeOutLeft') fadeOutLeft
                                option(value='fadeOutLeftBig') fadeOutLeftBig
                                option(value='fadeOutRight') fadeOutRight
                                option(value='fadeOutRightBig') fadeOutRightBig
                                option(value='fadeOutUp') fadeOutUp
                                option(value='fadeOutUpBig') fadeOutUpBig
                              optgroup(label='Flippers')
                                option(value='flipOutX', selected='') flipOutX
                                option(value='flipOutY') flipOutY
                              optgroup(label='Lightspeed')
                                option(value='lightSpeedOut') lightSpeedOut
                              optgroup(label='Rotating Exits')
                                option(value='rotateOut') rotateOut
                                option(value='rotateOutDownLeft') rotateOutDownLeft
                                option(value='rotateOutDownRight') rotateOutDownRight
                                option(value='rotateOutUpLeft') rotateOutUpLeft
                                option(value='rotateOutUpRight') rotateOutUpRight
                              optgroup(label='Sliding Exits')
                                option(value='slideOutUp') slideOutUp
                                option(value='slideOutDown') slideOutDown
                                option(value='slideOutLeft') slideOutLeft
                                option(value='slideOutRight') slideOutRight
                              optgroup(label='Zoom Exits')
                                option(value='zoomOut') zoomOut
                                option(value='zoomOutDown') zoomOutDown
                                option(value='zoomOutLeft') zoomOutLeft
                                option(value='zoomOutRight') zoomOutRight
                                option(value='zoomOutUp') zoomOutUp
                              optgroup(label='Specials')
                                option(value='rollOut') rollOut
                          // Button trigger modal
                          .mt-2.text-center.w-100
                            button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#myModal')
                              | Launch modal
                    // Modal
                    #myModal.modal.fade.modal-popup(tabindex='-1', role='dialog')
                      .modal-dialog(role='document')
                        div
                          button.btn-close.theme-close(type='button', data-bs-dismiss='modal', aria-label='Close')
                          .modal-body
                            .card
                              .animate-widget
                                div
                                  img.img-fluid(src='../assets/images/slider/6.jpg', alt='Drawing-room')
                                .text-center.p-25
                                  p.text-muted.mb-0
                                    strong.txt-danger Wow!!!
                                    |  It's so beautiful animations in cuba theme...
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
