source.uim.bootstrap.bs5.demos.complex.notificationcard source code

1 module source.uim.bootstrap.bs5.demos.complex.notificationcard;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("complex/notificationcard", new class DH5AppPage {
7 		this() { 
8 			super(); 
9 			this
10 			.created(DateTime(2020, 12, 20, 10, 10, 0))
11 			.changed(timeLastModified(__FILE_FULL_PATH__))
12 			.parameters([
13 					"pageTitle": "Notification Card - Bootstrap 5 Demo",
14             ])
15             .styles(`body {
16     background-color: #5165ff;
17     height: 100vh;
18     display: flex;
19     justify-content: center;
20     align-items: center
21 }
22 
23 .modal-body {
24     background-color: #5165ff;
25     border-color: #5165ff
26 }
27 
28 .intro-1 {
29     font-size: 20px
30 }
31 
32 .close {
33     color: #fff
34 }
35 
36 .close:hover {
37     color: #fff
38 }
39 
40 .intro-2 {
41     font-size: 13px
42 }
43 
44 .btn-primary {
45     color: #5165ff;
46     background-color: #fffaff;
47     border-color: #fffaff;
48     padding: 12px;
49     font-weight: 700;
50     border-radius: 41px;
51     padding-right: 20px;
52     padding-left: 20px
53 }`);
54 		} 
55 			
56     override string content() { 
57 
58       return 
59 H5Main(["style":"margin-top:70px;"], 
60   H5Div(["container-fluid", "mt-3", "bg-light"],
61     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 
62     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "Notification cards")),
63   BS5Container(["mt-3"]).row(
64     H5Div(["col-12", "col-lg-2"], 
65       listLevels("complex"),
66       listAreas("complex", "notificationcard")),
67     H5Div(["col-12", "col-lg-8"], 
68       dateInfo(this),
69       H5H2(["display-4"], "Job cards"),
70       H5Hr,
71 
72 demoBs5Example("notificationcard", "Click for news?", 
73     H5Div(
74         BS5Button(["btn-primary launch"], ["data-toggle":"modal", "data-target":"#staticBackdrop"], 
75             H5I(["fa fa-info"]), H5String(" Get information")),
76         H5Div("staticBackdrop", ["modal fade"], ["data-backdrop":"static", "data-keyboard":"false", "tabindex":"-1", "aria-labelledby":"staticBackdropLabel", "aria-hidden":"true"],
77             H5Div(["modal-dialog modal-lg"], 
78                 H5Div(["modal-content"], 
79                     H5Div(["modal-body"], 
80                         H5Div(["text-right"],  H5I(["fa fa-close close"], ["data-dismiss":"modal"])),
81                         H5Div(["row"], 
82                             H5Div(["col-md-6"], 
83                                 H5Div(["text-center mt-2"], H5Img(["src":"https://i.imgur.com/zZUiqsU.png", "width":"200"]))
84                             ),
85                             H5Div(["col-md-6"], 
86                                 H5Div(["text-white mt-4"], H5Span(["intro-1"], "This is fake Data")),
87                                 H5Div(["mt-2"],  H5Span(["intro-2"], "Gain access to analytic tools, desktop apps, templates, read-through, features, and autp-translate all for the price of a pro subscription")),
88                                 H5Div(["mt-4 mb-5"], BS5Button(["btn-primary"], H5String("Import my data"), H5I(["fa fa-cloud-download"])))
89                             )
90                         )
91                     )
92                 )
93             )
94         )
95 ), ``, ``)
96 
97     ),
98     H5Div(["col-12", "col-lg-2"]))).toString;
99     }
100   });
101 }