1+ {% extends "layouts/base.html" %}
2+ {% load static %}
3+
4+ {% block content %}
5+
6+ < div class ="container-fluid py-2 ">
7+ < div class ="row ">
8+ < div class ="col-lg-8 col-md-10 mx-auto ">
9+ < div class ="card mt-4 ">
10+ < div class ="card-header p-3 ">
11+ < h5 class ="mb-0 "> Alerts</ h5 >
12+ </ div >
13+ < div class ="card-body p-3 pb-0 ">
14+ < div class ="alert alert-primary alert-dismissible text-white " role ="alert ">
15+ < span class ="text-sm "> A simple primary alert with < a href ="javascript:; " class ="alert-link text-white "> an example link</ a > . Give it a click if you like.</ span >
16+ < button type ="button " class ="btn-close text-lg py-3 opacity-10 " data-bs-dismiss ="alert " aria-label ="Close ">
17+ < span aria-hidden ="true "> ×</ span >
18+ </ button >
19+ </ div >
20+ < div class ="alert alert-secondary alert-dismissible text-white " role ="alert ">
21+ < span class ="text-sm "> A simple secondary alert with < a href ="javascript:; " class ="alert-link text-white "> an example link</ a > . Give it a click if you like.</ span >
22+ < button type ="button " class ="btn-close text-lg py-3 opacity-10 " data-bs-dismiss ="alert " aria-label ="Close ">
23+ < span aria-hidden ="true "> ×</ span >
24+ </ button >
25+ </ div >
26+ < div class ="alert alert-success alert-dismissible text-white " role ="alert ">
27+ < span class ="text-sm "> A simple success alert with < a href ="javascript:; " class ="alert-link text-white "> an example link</ a > . Give it a click if you like.</ span >
28+ < button type ="button " class ="btn-close text-lg py-3 opacity-10 " data-bs-dismiss ="alert " aria-label ="Close ">
29+ < span aria-hidden ="true "> ×</ span >
30+ </ button >
31+ </ div >
32+ < div class ="alert alert-danger alert-dismissible text-white " role ="alert ">
33+ < span class ="text-sm "> A simple danger alert with < a href ="javascript:; " class ="alert-link text-white "> an example link</ a > . Give it a click if you like.</ span >
34+ < button type ="button " class ="btn-close text-lg py-3 opacity-10 " data-bs-dismiss ="alert " aria-label ="Close ">
35+ < span aria-hidden ="true "> ×</ span >
36+ </ button >
37+ </ div >
38+ < div class ="alert alert-warning alert-dismissible text-white " role ="alert ">
39+ < span class ="text-sm "> A simple warning alert with < a href ="javascript:; " class ="alert-link text-white "> an example link</ a > . Give it a click if you like.</ span >
40+ < button type ="button " class ="btn-close text-lg py-3 opacity-10 " data-bs-dismiss ="alert " aria-label ="Close ">
41+ < span aria-hidden ="true "> ×</ span >
42+ </ button >
43+ </ div >
44+ < div class ="alert alert-info alert-dismissible text-white " role ="alert ">
45+ < span class ="text-sm "> A simple info alert with < a href ="javascript:; " class ="alert-link text-white "> an example link</ a > . Give it a click if you like.</ span >
46+ < button type ="button " class ="btn-close text-lg py-3 opacity-10 " data-bs-dismiss ="alert " aria-label ="Close ">
47+ < span aria-hidden ="true "> ×</ span >
48+ </ button >
49+ </ div >
50+ < div class ="alert alert-light alert-dismissible text-white " role ="alert ">
51+ < span class ="text-sm "> A simple light alert with < a href ="javascript:; " class ="alert-link text-white "> an example link</ a > . Give it a click if you like.</ span >
52+ < button type ="button " class ="btn-close text-lg py-3 opacity-10 " data-bs-dismiss ="alert " aria-label ="Close ">
53+ < span aria-hidden ="true "> ×</ span >
54+ </ button >
55+ </ div >
56+ < div class ="alert alert-dark alert-dismissible text-white " role ="alert ">
57+ < span class ="text-sm "> A simple dark alert with < a href ="javascript:; " class ="alert-link text-white "> an example link</ a > . Give it a click if you like.</ span >
58+ < button type ="button " class ="btn-close text-lg py-3 opacity-10 " data-bs-dismiss ="alert " aria-label ="Close ">
59+ < span aria-hidden ="true "> ×</ span >
60+ </ button >
61+ </ div >
62+ </ div >
63+ </ div >
64+ < div class ="card mt-4 ">
65+ < div class ="card-header p-3 ">
66+ < h5 class ="mb-0 "> Notifications</ h5 >
67+ < p class ="text-sm mb-0 ">
68+ Notifications on this page use Toasts from Bootstrap. Read more details < a href ="https://getbootstrap.com/docs/5.0/components/toasts/ " target ="
69+ "> here</ a > .
70+ </ p >
71+ </ div >
72+ < div class ="card-body p-3 ">
73+ < div class ="row ">
74+ < div class ="col-lg-3 col-sm-6 col-12 ">
75+ < button class ="btn bg-gradient-success w-100 mb-0 toast-btn " type ="button " data-target ="successToast "> Success</ button >
76+ </ div >
77+ < div class ="col-lg-3 col-sm-6 col-12 mt-sm-0 mt-2 ">
78+ < button class ="btn bg-gradient-info w-100 mb-0 toast-btn " type ="button " data-target ="infoToast "> Info</ button >
79+ </ div >
80+ < div class ="col-lg-3 col-sm-6 col-12 mt-lg-0 mt-2 ">
81+ < button class ="btn bg-gradient-warning w-100 mb-0 toast-btn " type ="button " data-target ="warningToast "> Warning</ button >
82+ </ div >
83+ < div class ="col-lg-3 col-sm-6 col-12 mt-lg-0 mt-2 ">
84+ < button class ="btn bg-gradient-danger w-100 mb-0 toast-btn " type ="button " data-target ="dangerToast "> Danger</ button >
85+ </ div >
86+ </ div >
87+ </ div >
88+ </ div >
89+ </ div >
90+ </ div >
91+ < div class ="position-fixed bottom-1 end-1 z-index-2 ">
92+ < div class ="toast fade hide p-2 bg-white " role ="alert " aria-live ="assertive " id ="successToast " aria-atomic ="true ">
93+ < div class ="toast-header border-0 ">
94+ < i class ="material-symbols-rounded text-success me-2 ">
95+ check
96+ </ i >
97+ < span class ="me-auto font-weight-bold "> Material Dashboard </ span >
98+ < small class ="text-body "> 11 mins ago</ small >
99+ < i class ="fas fa-times text-md ms-3 cursor-pointer " data-bs-dismiss ="toast " aria-label ="Close "> </ i >
100+ </ div >
101+ < hr class ="horizontal dark m-0 ">
102+ < div class ="toast-body ">
103+ Hello, world! This is a notification message.
104+ </ div >
105+ </ div >
106+ < div class ="toast fade hide p-2 mt-2 bg-gradient-info " role ="alert " aria-live ="assertive " id ="infoToast " aria-atomic ="true ">
107+ < div class ="toast-header bg-transparent border-0 ">
108+ < i class ="material-symbols-rounded text-white me-2 ">
109+ notifications
110+ </ i >
111+ < span class ="me-auto text-white font-weight-bold "> Material Dashboard </ span >
112+ < small class ="text-white "> 11 mins ago</ small >
113+ < i class ="fas fa-times text-md text-white ms-3 cursor-pointer " data-bs-dismiss ="toast " aria-label ="Close "> </ i >
114+ </ div >
115+ < hr class ="horizontal light m-0 ">
116+ < div class ="toast-body text-white ">
117+ Hello, world! This is a notification message.
118+ </ div >
119+ </ div >
120+ < div class ="toast fade hide p-2 mt-2 bg-white " role ="alert " aria-live ="assertive " id ="warningToast " aria-atomic ="true ">
121+ < div class ="toast-header border-0 ">
122+ < i class ="material-symbols-rounded text-warning me-2 ">
123+ travel_explore
124+ </ i >
125+ < span class ="me-auto font-weight-bold "> Material Dashboard </ span >
126+ < small class ="text-body "> 11 mins ago</ small >
127+ < i class ="fas fa-times text-md ms-3 cursor-pointer " data-bs-dismiss ="toast " aria-label ="Close "> </ i >
128+ </ div >
129+ < hr class ="horizontal dark m-0 ">
130+ < div class ="toast-body ">
131+ Hello, world! This is a notification message.
132+ </ div >
133+ </ div >
134+ < div class ="toast fade hide p-2 mt-2 bg-white " role ="alert " aria-live ="assertive " id ="dangerToast " aria-atomic ="true ">
135+ < div class ="toast-header border-0 ">
136+ < i class ="material-symbols-rounded text-danger me-2 ">
137+ campaign
138+ </ i >
139+ < span class ="me-auto text-gradient text-danger font-weight-bold "> Material Dashboard </ span >
140+ < small class ="text-body "> 11 mins ago</ small >
141+ < i class ="fas fa-times text-md ms-3 cursor-pointer " data-bs-dismiss ="toast " aria-label ="Close "> </ i >
142+ </ div >
143+ < hr class ="horizontal dark m-0 ">
144+ < div class ="toast-body ">
145+ Hello, world! This is a notification message.
146+ </ div >
147+ </ div >
148+ </ div >
149+ {% include "includes/footer.html" %}
150+ </ div >
151+
152+ {% endblock content %}
0 commit comments