booking/assets/pug/pages/theme/modal-animated.pug
2025-03-24 22:58:00 +03:00

178 lines
12 KiB
Plaintext

- var theme_customizer = true;
- var tooltip = true;
- var animate = true;
- var modal_animated = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
// page-wrapper Start
#pageWrapper.page-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper.horizontal-menu
include ../../components/sidebar
.page-body
.container-fluid
.page-header
.row
.col-sm-6
h3
| Animated Modal
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Advance
li.breadcrumb-item.active Animated Modal
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
.col-sm-12
.card
.card-header
h5 Modal with animate.js
.card-body
.row
.col-xl-6.col-md-8.offset-xl-3.offset-md-2
#animation-box
.card
.animate-widget
div
img.img-fluid(src='assets/images/banner/3.jpg', alt='')
.text-center.p-25
p.text-muted.mb-0
| Denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings
.col-md-12.text-center
form.form-inline.theme-form.row.justify-content-center.animated-modal.d-flex
.mb-2.me-2.mb-0.animated-modal-md-mb.w-auto
label.me-3 Entrances
select#entrance.form-select
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-2.me-2.mb-0.animated-modal-md-mb.w-auto
label.me-3 Exits
select#exit.form-select
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
.mb-2.mb-0.me-0.w-auto
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#myModal')
| Launch demo modal
// Modal
#myModal.modal.fade(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/banner/3.jpg', alt='')
.text-center.p-25
p.text-muted.mb-0
| Denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files