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

1 module source.uim.bootstrap.bs5.demos.complex.responsivecontact;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("complex/responsivecontact", 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": "Responsive Contact - Bootstrap 5 Demo",
14             ])
15             .styles(`.form4 {
16     background-color: #4DB7FE;
17     background-size: cover
18 }
19 
20 .top {
21     padding-top: 70px;
22     padding-bottom: 90px
23 }
24 
25 .form-bg {
26     background: rgba(68, 68, 65, 0.77);
27     padding: 2px
28 }
29 
30 .form {
31     background-color: white !important;
32     padding: 20px
33 }
34 
35 .form-group {
36     margin-bottom: 20px
37 }
38 
39 .sr-only {
40     position: absolute;
41     width: 1px;
42     height: 1px;
43     padding: 0;
44     margin: -1px;
45     overflow: hidden;
46     clip: rect(0, 0, 0, 0);
47     border: 0
48 }
49 
50 .form-control {
51     border-top: 0px;
52     border-left: 0px;
53     border-right: 0px;
54     border-bottom: 1px solid #61615e;
55     background: transparent;
56     -webkit-transition: all 0.3s ease 0s;
57     -moz-transition: all 0.3s ease 0s;
58     -o-transition: all 0.3s ease 0s;
59     transition: all 0.3s ease 0s
60 }
61 
62 button.btn {
63     display: block;
64     padding: 11px 32px;
65     -webkit-transition: all 0.3s ease 0s;
66     -moz-transition: all 0.3s ease 0s;
67     -o-transition: all 0.3s ease 0s;
68     transition: all 0.3s ease 0s;
69     margin: 30px 0px
70 }
71 
72 .btn-blue {
73     background-color: #4285f4;
74     color: #fff;
75     border: 1px solid #4285f4
76 }`);
77 		} 
78 			
79     override string content() { 
80 
81       return 
82 H5Main(["style":"margin-top:70px;"], 
83   H5Div(["container-fluid", "mt-3", "bg-light"],
84     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 
85     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "Responsive Contact")),
86   BS5Container(["mt-3"]).row(
87     H5Div(["col-12", "col-lg-2"], 
88       listLevels("complex"),
89       listAreas("complex", "responsivecontact")),
90     H5Div(["col-12", "col-lg-8"], 
91       dateInfo(this),
92       H5H2(["display-4"], "Responsive Contact"),
93       H5Hr,
94 
95 demoBs5Example("contact", "Stay in Contact and be happy", 
96     BS5Container.row(
97         H5Div(["col-md-7 col-md-offset-2"],
98             H5Div(["form-bg"],
99                 BS5Form(["form"])
100                 .group(
101                     H5Label(["sr-only"], "Name"),
102                     BS5InputText("nameNine", ["required":"required", "placeholder":"Your Name"]))
103                 .group(
104                     H5Label(["sr-only"], "Email"),
105                     BS5InputEmail("emailNine", ["required":"required", "placeholder":"Email Address"]))
106                 .group(
107                     H5Label(["sr-only"], "Name"),
108                     BS5InputTextarea("messageNine", ["required":"required", "rows":"7", "placeholder":"Write message"]))
109                 .submit(["text-center btn-blue"], "Send Message")
110     ))), `BS5Container.row(
111     H5Div(["col-md-7 col-md-offset-2"],
112         H5Div(["form-bg"],
113             BS5Form(["form"])
114             .group(
115                 H5Label(["sr-only"], "Name"),
116                 BS5InputText("nameNine", ["required":"required", "placeholder":"Your Name"]))
117             .group(
118                 H5Label(["sr-only"], "Email"),
119                 BS5InputEmail("emailNine", ["required":"required", "placeholder":"Email Address"]))
120             .group(
121                 H5Label(["sr-only"], "Name"),
122                 BS5InputTextarea("messageNine", ["required":"required", "rows":"7", "placeholder":"Write message"]))
123             .submit(["text-center btn-blue"], "Send Message")
124 )))`, `<div class="container">
125     <div class="row">
126         <div class="col-md-7 col-md-offset-2">
127             <div class="form-bg">
128                 <form class="form">
129                     <div class="form-group">
130                         <label class="sr-only">Name</label>
131                         <input id="nameNine" class="form-control" placeholder="Your Name" required="" type="text">
132                     </div>
133                     <div class="form-group">
134                         <label class="sr-only">Email</label>
135                         <input id="emailNine" class="form-control" placeholder="Email Address" required="" type="email">
136                     </div>
137                     <div class="form-group">
138                         <label class="sr-only">Name</label>
139                         <textarea id="messageNine" class="form-control" placeholder="Write message" required="" rows="7"></textarea>
140                     </div>
141                     <button class="btn text-center btn-blue" type="submit">Send Message</button>
142                 </form>
143             </div>
144         </div>
145     </div>
146 </div>`)
147     
148     ),
149     H5Div(["col-12", "col-lg-2"]))).toString;
150     }
151   });
152 }