1 module source.uim.bootstrap.bs5.demos.complex.userprofile; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("complex/userprofile", 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(` 16 .form-control:focus { 17 box-shadow: none; 18 border-color: #BA68C8 19 } 20 21 .profile-button { 22 background: rgb(99, 39, 120); 23 box-shadow: none; 24 border: none 25 } 26 27 .profile-button:hover { 28 background: #682773 29 } 30 31 .profile-button:focus { 32 background: #682773; 33 box-shadow: none 34 } 35 36 .profile-button:active { 37 background: #682773; 38 box-shadow: none 39 } 40 41 .back:hover { 42 color: #682773; 43 cursor: pointer 44 } 45 46 .labels { 47 font-size: 11px 48 } 49 50 .add-experience:hover { 51 background: #BA68C8; 52 color: #fff; 53 cursor: pointer; 54 border: solid 1px #BA68C8 55 }`); 56 } 57 58 override string content() { 59 60 return 61 H5Main(["style":"margin-top:70px;"], 62 H5Div(["container-fluid", "mt-3", "bg-light"], 63 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 64 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "Pricing Table")), 65 BS5Container(["mt-3"]).row( 66 H5Div(["col-12", "col-lg-2"], 67 listLevels("complex"), 68 listAreas("complex", "userprofile")), 69 H5Div(["col-12", "col-lg-8"], 70 dateInfo(this), 71 H5H2(["display-4"], "Pricing Table"), 72 H5Hr, 73 74 demoBs5Example("social", "Any news? Post it", 75 H5Div( 76 H5Div(["row"], 77 H5Div(["col-md-3 border-right"], 78 H5Div(["d-flex flex-column align-items-center text-center p-3 py-5"], 79 H5Img(["rounded-circle img-fluid mt-5"], ["src":"/img/officelady_300x300.jpg"]), 80 H5Span(["font-weight-bold"], "Lilith"), 81 H5Span(["text-black-50"], "lilith.marry@demo.com"), 82 H5Span) 83 ), 84 H5Div(["col-md-5 border-right"], 85 H5Div(["p-3 py-5"], 86 H5Div(["d-flex justify-content-between align-items-center mb-3"], 87 H5H4(["text-right"], "Profile Settings") 88 ), 89 H5Div(["row mt-2"], 90 H5Div(["col-md-6"], 91 H5Label(["labels"], "Name"), 92 BS5InputText(["placeholder":"first name", "value":""])), 93 H5Div(["col-md-6"], 94 H5Label(["labels"], "Surname"), 95 BS5InputText(["value":"", "placeholder":"surname"])) 96 ), 97 H5Div(["row mt-3"], 98 H5Div(["col-md-12"], 99 H5Label(["labels"], "PhoneNumber"), 100 BS5InputText(["placeholder":"enter phone number", "value":""])), 101 H5Div(["col-md-12"], 102 H5Label(["labels"], "Address"), 103 BS5InputText(["placeholder":"enter address", "value":""])), 104 H5Div(["col-md-12"], 105 H5Label(["labels"], "Email ID"), 106 BS5InputText(["placeholder":"enter email id", "value":""])), 107 H5Div(["col-md-12"], 108 H5Label(["labels"], "Education"), 109 BS5InputText(["placeholder":"education", "value":""])) 110 ), 111 H5Div(["row mt-3"], 112 H5Div(["col-md-6"], 113 H5Label(["labels"], "Country"), 114 BS5InputText(["placeholder":"country", "value":""])), 115 H5Div(["col-md-6"], 116 H5Label(["labels"], "State/Region"), 117 BS5InputText(["value":"", "placeholder":"state"])) 118 ), 119 H5Div(["mt-5 text-center"], 120 BS5Button(["btn-primary profile-button"], "Save Profile") 121 ) 122 ) 123 ), 124 H5Div(["col-md-4"], 125 H5Div(["p-3 py-5"], 126 H5Div(["d-flex justify-content-between align-items-center experience"], 127 H5Span("Edit Experience"), 128 H5Span(["border px-3 p-1 add-experience"], H5I(["fa fa-plus"]), H5String(" Experience"))), 129 H5Br, 130 H5Div(["col-md-12"], 131 H5Label(["labels"], "Experience in Designing"), 132 BS5InputText(["placeholder":"experience", "value":""])), 133 H5Br, 134 H5Div(["col-md-12"], 135 H5Label(["labels"], "Additional Details"), 136 BS5InputText(["placeholder":"additional details", "value":""])) 137 ) 138 ) 139 ) 140 ), `H5Div( 141 H5Div(["row"], 142 H5Div(["col-md-3 border-right"], 143 H5Div(["d-flex flex-column align-items-center text-center p-3 py-5"], 144 H5Img(["rounded-circle img-fluid mt-5"], ["src":"/img/officelady_300x300.jpg"]), 145 H5Span(["font-weight-bold"], "Lilith"), 146 H5Span(["text-black-50"], "lilith.marry@demo.com"), 147 H5Span) 148 ), 149 H5Div(["col-md-5 border-right"], 150 H5Div(["p-3 py-5"], 151 H5Div(["d-flex justify-content-between align-items-center mb-3"], 152 H5H4(["text-right"], "Profile Settings") 153 ), 154 H5Div(["row mt-2"], 155 H5Div(["col-md-6"], 156 H5Label(["labels"], "Name"), 157 BS5InputText(["placeholder":"first name", "value":""])), 158 H5Div(["col-md-6"], 159 H5Label(["labels"], "Surname"), 160 BS5InputText(["value":"", "placeholder":"surname"])) 161 ), 162 H5Div(["row mt-3"], 163 H5Div(["col-md-12"], 164 H5Label(["labels"], "PhoneNumber"), 165 BS5InputText(["placeholder":"enter phone number", "value":""])), 166 H5Div(["col-md-12"], 167 H5Label(["labels"], "Address"), 168 BS5InputText(["placeholder":"enter address", "value":""])), 169 H5Div(["col-md-12"], 170 H5Label(["labels"], "Email ID"), 171 BS5InputText(["placeholder":"enter email id", "value":""])), 172 H5Div(["col-md-12"], 173 H5Label(["labels"], "Education"), 174 BS5InputText(["placeholder":"education", "value":""])) 175 ), 176 H5Div(["row mt-3"], 177 H5Div(["col-md-6"], 178 H5Label(["labels"], "Country"), 179 BS5InputText(["placeholder":"country", "value":""])), 180 H5Div(["col-md-6"], 181 H5Label(["labels"], "State/Region"), 182 BS5InputText(["value":"", "placeholder":"state"])) 183 ), 184 H5Div(["mt-5 text-center"], 185 BS5Button(["btn-primary profile-button"], "Save Profile")), 186 ) 187 ), 188 H5Div(["col-md-4"], 189 H5Div(["p-3 py-5"], 190 H5Div(["d-flex justify-content-between align-items-center experience"], 191 H5Span("Edit Experience"), 192 H5Span(["border px-3 p-1 add-experience"], H5I(["fa fa-plus"]), H5String(" Experience"))), 193 H5Br, 194 H5Div(["col-md-12"], 195 H5Label(["labels"], "Experience in Designing"), 196 BS5InputText(["placeholder":"experience", "value":""])), 197 H5Br, 198 H5Div(["col-md-12"], 199 H5Label(["labels"], "Additional Details"), 200 BS5InputText(["placeholder":"additional details", "value":""])) 201 ) 202 ) 203 ) 204 )`, `<div> 205 <div class="row"> 206 <div class="col-md-3 border-right"> 207 <div class="d-flex flex-column align-items-center text-center p-3 py-5"> 208 <img class="rounded-circle img-fluid mt-5" src="/img/officelady_300x300.jpg"> 209 <span class="font-weight-bold">Lilith</span> 210 <span class="text-black-50">lilith.marry@demo.com</span> 211 <span></span> 212 </div> 213 </div> 214 <div class="col-md-5 border-right"> 215 <div class="p-3 py-5"> 216 <div class="d-flex justify-content-between align-items-center mb-3"> 217 <h4 class="text-right">Profile Settings2</h4> 218 </div> 219 <div class="row mt-2"> 220 <div class="col-md-6"> 221 <label class="labels">Name</label> 222 <input class="form-control" placeholder="first name" type="text" value=""> 223 </div> 224 <div class="col-md-6"> 225 <label class="labels">Surname</label> 226 <input class="form-control" placeholder="surname" type="text" value=""> 227 </div> 228 </div> 229 <div class="row mt-3"> 230 <div class="col-md-12"> 231 <label class="labels">PhoneNumber</label> 232 <input class="form-control" placeholder="enter phone number" type="text" value=""> 233 </div> 234 <div class="col-md-12"> 235 <label class="labels">Address</label> 236 <input class="form-control" placeholder="enter address" type="text" value=""> 237 </div> 238 <div class="col-md-12"> 239 <label class="labels">Email ID</label> 240 <input class="form-control" placeholder="enter email id" type="text" value=""> 241 </div> 242 <div class="col-md-12"> 243 <label class="labels">Education</label> 244 <input class="form-control" placeholder="education" type="text" value=""> 245 </div> 246 </div> 247 <div class="row mt-3"> 248 <div class="col-md-6"> 249 <label class="labels">Country</label> 250 <input class="form-control" placeholder="country" type="text" value=""> 251 </div> 252 <div class="col-md-6"> 253 <label class="labels">State/Region</label><input class="form-control" placeholder="state" type="text" value=""></div></div><div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Save Profile</button></div></div></div><div class="col-md-4"><div class="p-3 py-5"><div class="d-flex justify-content-between align-items-center experience"><span>Edit Experience</span><span class="border px-3 p-1 add-experience"><i class="fa fa-plus"></i> Experience</span></div><br><div class="col-md-12"><label class="labels">Experience in Designing</label><input class="form-control" placeholder="experience" type="text" value=""></div><br><div class="col-md-12"><label class="labels">Additional Details</label><input class="form-control" placeholder="additional details" type="text" value=""></div></div></div></div></div>`) 254 255 ), 256 H5Div(["col-12", "col-lg-2"]))).toString; 257 } 258 }); 259 }