cfone/app/home/templates/ui-modals.html

406 lines
19 KiB
HTML
Raw Permalink Normal View History

2021-09-23 03:46:35 +00:00
{% extends "layouts/base.html" %}
{% block title %} UI Cards {% endblock %}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}
{% block content %}
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Modals</h1>
<div class="row">
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Default modal</h5>
<h6 class="card-subtitle text-muted">Default Bootstrap modal.</h6>
</div>
<div class="card-body text-center">
<p>Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
<!-- BEGIN primary modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#defaultModalPrimary">
Primary
</button>
<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END primary modal -->
<!-- BEGIN success modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#defaultModalSuccess">
Success
</button>
<div class="modal fade" id="defaultModalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END success modal -->
<!-- BEGIN danger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#defaultModalDanger">
Danger
</button>
<div class="modal fade" id="defaultModalDanger" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END danger modal -->
<!-- BEGIN warning modal -->
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#defaultModalWarning">
Warning
</button>
<div class="modal fade" id="defaultModalWarning" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END warning modal -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Colored modal</h5>
<h6 class="card-subtitle text-muted">Colored Bootstrap modal.</h6>
</div>
<div class="card-body text-center">
<p>Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
<!-- BEGIN primary modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#coloredModalPrimary">
Primary
</button>
<div class="modal modal-colored modal-primary fade" id="coloredModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Colored modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-light">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END primary modal -->
<!-- BEGIN success modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#coloredModalSuccess">
Success
</button>
<div class="modal modal-colored modal-success fade" id="coloredModalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Colored modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-light">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END success modal -->
<!-- BEGIN danger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#coloredModalDanger">
Danger
</button>
<div class="modal modal-colored modal-danger fade" id="coloredModalDanger" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Colored modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-light">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END danger modal -->
<!-- BEGIN warning modal -->
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#coloredModalWarning">
Warning
</button>
<div class="modal modal-colored modal-warning fade" id="coloredModalWarning" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Colored modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-light">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END warning modal -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Centered modal</h5>
<h6 class="card-subtitle text-muted">Vertically centered modal.</h6>
</div>
<div class="card-body text-center">
<p>Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
<!-- BEGIN primary modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centeredModalPrimary">
Primary
</button>
<div class="modal fade" id="centeredModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END primary modal -->
<!-- BEGIN success modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#centeredModalSuccess">
Success
</button>
<div class="modal fade" id="centeredModalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END success modal -->
<!-- BEGIN danger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#centeredModalDanger">
Danger
</button>
<div class="modal fade" id="centeredModalDanger" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END danger modal -->
<!-- BEGIN warning modal -->
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#centeredModalWarning">
Warning
</button>
<div class="modal fade" id="centeredModalWarning" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END warning modal -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Modal sizes</h5>
<h6 class="card-subtitle text-muted">These sizes kick in at certain breakpoints to avoid scrollbars on smaller viewports.</h6>
</div>
<div class="card-body text-center">
<p>Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
<!-- BEGIN modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizedModalSm">
Small
</button>
<div class="modal fade" id="sizedModalSm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Small modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END modal -->
<!-- BEGIN modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizedModalMd">
Medium
</button>
<div class="modal fade" id="sizedModalMd" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Medium modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END modal -->
<!-- BEGIN modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sizedModalLg">
Large
</button>
<div class="modal fade" id="sizedModalLg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- END modal -->
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}{% endblock javascripts %}