Unofficial Dub Package Documentation 
1 module source.uim.bootstrap.bs5.demos.complex.flightbooking;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("complex/flightbooking", 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": "Pricing Table - Bootstrap 5 Demo",
14             ])
15             .styles(`@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
16 
17 * {
18     padding: 0;
19     margin: 0;
20     box-sizing: border-box;
21     font-family: 'Poppins', sans-serif
22 }
23 
24 .wrapper {
25     max-width: 800px;
26     margin: 50px auto
27 }
28 
29 .wrapper form {
30     padding: 30px 50px
31 }
32 
33 .wrapper form .form-group {
34     padding-bottom: .5rem
35 }
36 
37 .wrapper form .option {
38     position: relative;
39     padding-left: 25px;
40     cursor: pointer;
41     display: block
42 }
43 
44 .wrapper form .option input {
45     display: none
46 }
47 
48 .wrapper form .checkmark {
49     position: absolute;
50     top: 4px;
51     left: 0;
52     height: 17px;
53     width: 17px;
54     background-color: #fff;
55     border: 1px solid #aaa;
56     border-radius: 50%
57 }
58 
59 .wrapper form .option input:checked~.checkmark:after {
60     display: block
61 }
62 
63 .wrapper form .option .checkmark:after {
64     content: "";
65     width: 7px;
66     height: 7px;
67     display: block;
68     border-radius: 50%;
69     background-color: #333;
70     position: absolute;
71     top: 48%;
72     left: 52%;
73     transform: translate(-50%, -50%) scale(0);
74     transition: 200ms ease-in-out 0s
75 }
76 
77 .wrapper form .option:hover input[type="radio"]~.checkmark {
78     background-color: #f4f4f4
79 }
80 
81 .wrapper form .option input[type="radio"]:checked~.checkmark {
82     background: #fff;
83     color: #fff;
84     transition: 300ms ease-in-out 0s
85 }
86 
87 .wrapper form .option input[type="radio"]:checked~.checkmark:after {
88     transform: translate(-50%, -50%) scale(1);
89     color: #fff
90 }
91 
92 .wrapper form a {
93     color: #333
94 }
95 
96 .wrapper form .form-control {
97     outline: none;
98     border: none
99 }
100 
101 .wrapper form .form-control:focus {
102     box-shadow: none
103 }
104 
105 .wrapper form input[type="text"]:focus::placeholder {
106     color: transparent
107 }
108 
109 input[type="date"] {
110     cursor: pointer
111 }
112 
113 .wrapper form .label::after {
114     position: absolute;
115     top: 5px;
116     left: 0px;
117     font-size: 0.9rem;
118     margin: 0rem 0.4rem;
119     text-transform: uppercase;
120     letter-spacing: 0.08rem;
121     font-weight: 600;
122     color: #999;
123     transition: all .2s ease-in-out;
124     transform: scale(0)
125 }
126 
127 .wrapper form .label#from::after {
128     content: 'From'
129 }
130 
131 .wrapper form .label#to::after {
132     content: 'To'
133 }
134 
135 .wrapper form .label#depart::after {
136     content: 'Depart Date'
137 }
138 
139 .wrapper form .label#return::after {
140     content: 'Return Date'
141 }
142 
143 .wrapper form .label#psngr::after {
144     content: 'Traveller(s)'
145 }
146 
147 .wrapper form input[type="text"]:focus~.label::after {
148     top: -15px;
149     left: 0px;
150     transform: scale(1)
151 }
152 
153 .wrapper form input[type="date"]:focus~.label::after {
154     top: -15px;
155     left: 0px;
156     transform: scale(1)
157 }
158 
159 .margin {
160     margin: 2rem 0rem
161 }
162 
163 @media(max-width: 575.5px) {
164     .wrapper {
165         margin: 10px
166     }
167 
168     .wrapper form {
169         padding: 20px
170     }
171 
172     .margin {
173         margin: .2rem 0rem
174     }
175 }`);
176 		} 
177 			
178     override string content() { 
179 
180       return 
181 H5Main(["style":"margin-top:70px;"], 
182   H5Div(["container-fluid", "mt-3", "bg-light"],
183     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 
184     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "Flight Booking")),
185   BS5Container(["mt-3"]).row(
186     H5Div(["col-12", "col-lg-2"], 
187       listLevels("complex"),
188       listAreas("complex", "flightbooking")),
189     H5Div(["col-12", "col-lg-8"], 
190       dateInfo(this),
191       H5H2(["display-4"], "Flight Booking"),
192       H5Hr,
193 
194 demoBs5Example("ecommercecardsanimation", "Start your vacation right here", 
195     H5Div(
196         H5Form(["action":"#"], 
197             BS5FormGroup(["border-bottom d-flex align-items-center justify-content-between flex-wrap"], 
198                 H5Label(["option my-sm-0 my-2"], 
199                     H5Input(["type":"radio", "name":"radio", "checked":"checked"]), 
200                     H5String(" Round Trip"), 
201                     H5Span(["checkmark"])
202                 ), 
203                 H5Label(["option my-sm-0 my-2"], 
204                     H5Input(["type":"radio", "name":"radio"]), 
205                     H5String(" One Way"), 
206                     H5Span(["checkmark"])
207                 ),
208                 H5Div(["d-flex", "align-items-center", "my-sm-0 my-2"], 
209                     H5A(["text-decoration-none"], ["href":"#"], 
210                         H5String("Multi-city/Stopovers"),  
211                         H5Span(["fas fa-angle-right ps-2 text-primary"])))
212             ),
213             BS5FormGroup(["d-sm-flex margin"], 
214                 H5Div(["d-flex", "align-items-center", "flex-fill me-sm-1 my-sm-0 my-4 border-bottom position-relative"], 
215                     BS5InputText(["type":"text", "required":"required", "placeholder":"From"]),
216                     H5Div("from", ["label"]), 
217                     H5Span(["fas fa-dot-circle text-muted ms-1"])
218                 ),
219                 H5Div(["d-flex", "align-items-center", "flex-fill ms-sm-1 my-sm-0 my-4 border-bottom position-relative"],  
220                     BS5InputText(["type":"text", "required":"required", "placeholder":"To"]),
221                     H5Div("to", ["label"]),
222                     H5Span(["fas fa-map-marker text-muted ms-1"])
223                 )
224             ),
225             BS5FormGroup(["d-sm-flex margin"], 
226                 H5Div(["d-flex", "align-items-center", "flex-fill me-sm1 my-sm-0 border-bottom position-relative"],  
227                     BS5InputDate(["type":"date", "required":"required", "placeholder":"Depart Date"]),
228                     H5Div("depart", ["label"])
229                 ),
230                 H5Div(["d-flex", "align-items-center", "flex-fill ms-sm-1 my-sm-0 my-4 border-bottom position-relative"],  
231                     BS5InputDate(["type":"date", "required":"required", "placeholder":"Return Date"]),
232                     H5Div("return", ["label"])
233                 )
234             ),
235             BS5FormGroup(["border-bottom d-flex align-items-center position-relative"],  
236                 BS5InputText(["type":"text", "required":"required", "placeholder":"Traveller(s)"]),
237                 H5Div("psngr", ["label"]), 
238                 H5Span(["fas fa-users text-muted ms-1"])
239             ),
240             BS5FormGroup(["my-3"], 
241                 BS5Button(["btn-primary", "rounded-0", "d-flex", "justify-content-center", "text-center", "p-3"], "Search Flights")
242             )
243         )
244         ), `H5Form(["action":"#"], 
245     BS5FormGroup(["border-bottom d-flex align-items-center justify-content-between flex-wrap"], 
246         H5Label(["option my-sm-0 my-2"], 
247             H5Input(["type":"radio", "name":"radio", "checked":"checked"]), 
248             H5String(" Round Trip"), 
249             H5Span(["checkmark"])
250         ), 
251         H5Label(["option my-sm-0 my-2"], 
252             H5Input(["type":"radio", "name":"radio"]), 
253             H5String(" One Way"), 
254             H5Span(["checkmark"])
255         ),
256         H5Div(["d-flex", "align-items-center", "my-sm-0 my-2"], 
257             H5A(["text-decoration-none"], ["href":"#"], 
258                 H5String("Multi-city/Stopovers"),  
259                 H5Span(["fas fa-angle-right ps-2 text-primary"])))
260     ),
261     BS5FormGroup(["d-sm-flex margin"], 
262         H5Div(["d-flex", "align-items-center", "flex-fill me-sm-1 my-sm-0 my-4 border-bottom position-relative"], 
263             BS5InputText(["type":"text", "required":"required", "placeholder":"From"]),
264             H5Div("from", ["label"]), 
265             H5Span(["fas fa-dot-circle text-muted ms-1"])
266         ),
267         H5Div(["d-flex", "align-items-center", "flex-fill ms-sm-1 my-sm-0 my-4 border-bottom position-relative"],  
268             BS5InputText(["type":"text", "required":"required", "placeholder":"To"]),
269             H5Div("to", ["label"]),
270             H5Span(["fas fa-map-marker text-muted ms-1"])
271         )
272     ),
273     BS5FormGroup(["d-sm-flex margin"], 
274         H5Div(["d-flex", "align-items-center", "flex-fill me-sm1 my-sm-0 border-bottom position-relative"],  
275             BS5InputDate(["type":"date", "required":"required", "placeholder":"Depart Date"]),
276             H5Div("depart", ["label"])
277         ),
278         H5Div(["d-flex", "align-items-center", "flex-fill ms-sm-1 my-sm-0 my-4 border-bottom position-relative"],  
279             BS5InputDate(["type":"date", "required":"required", "placeholder":"Return Date"]),
280             H5Div("return", ["label"])
281         )
282     ),
283     BS5FormGroup(["border-bottom d-flex align-items-center position-relative"],  
284         BS5InputText(["type":"text", "required":"required", "placeholder":"Traveller(s)"]),
285         H5Div("psngr", ["label"]), 
286         H5Span(["fas fa-users text-muted ms-1"])
287     ),
288     BS5FormGroup(["my-3"], 
289         BS5Button(["btn-primary", "rounded-0", "d-flex", "justify-content-center", "text-center", "p-3"], "Search Flights")
290     )
291 )`, `<form action="#">
292     <div class="border-bottom d-flex align-items-center justify-content-between flex-wrap form-group">
293         <label class="option my-sm-0 my-2">
294             <input checked="" name="radio" type="radio"> Round Trip<span class="checkmark"></span>
295         </label>
296         <label class="option my-sm-0 my-2">
297             <input name="radio" type="radio"> One Way<span class="checkmark"></span>
298         </label>
299         <div class="align-items-center d-flex my-sm-0 my-2">
300             <a class="text-decoration-none" href="#">Multi-city/Stopovers<span class="fas fa-angle-right ps-2 text-primary"></span></a>
301         </div>
302     </div>
303     <div class="d-sm-flex margin form-group">
304         <div class="align-items-center d-flex flex-fill me-sm-1 my-sm-0 my-4 border-bottom position-relative">
305             <input class="form-control" placeholder="From" required="" type="text">
306             <div id="from" class="label"></div>
307             <span class="fas fa-dot-circle text-muted ms-1"></span>
308         </div>
309         <div class="align-items-center d-flex flex-fill ms-sm-1 my-sm-0 my-4 border-bottom position-relative">
310             <input class="form-control" placeholder="To" required="" type="text">
311             <div id="to" class="label"></div>
312             <span class="fas fa-map-marker text-muted ms-1"></span>
313         </div>
314     </div>
315     <div class="d-sm-flex margin form-group">
316         <div class="align-items-center d-flex flex-fill me-sm1 my-sm-0 border-bottom position-relative">
317             <input class="form-control" placeholder="Depart Date" required="" type="date">
318             <div id="depart" class="label"></div>
319         </div>
320         <div class="align-items-center d-flex flex-fill ms-sm-1 my-sm-0 my-4 border-bottom position-relative">
321             <input class="form-control" placeholder="Return Date" required="" type="date">
322             <div id="return" class="label"></div>
323         </div>
324     </div>
325     <div class="border-bottom d-flex align-items-center position-relative form-group">
326         <input class="form-control" placeholder="Traveller(s)" required="" type="text">
327         <div id="psngr" class="label"></div>
328         <span class="fas fa-users text-muted ms-1"></span>
329     </div>
330     <div class="form-group my-3">
331         <button class="btn btn-primary d-flex justify-content-center p-3 rounded-0 text-center" type="button">Search Flights</button>
332     </div>
333 </form>`)
334     
335     ),
336     H5Div(["col-12", "col-lg-2"]))).toString;
337     }
338   });
339 }

Page generated by adrdox