1 module source.uim.bootstrap.bs5.demos.complex.pricingtable; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("complex/pricingtable", 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(`section.pricing { 16 background: #007bff; 17 background: linear-gradient(to right, #0062E6, #33AEFF); 18 } 19 20 .pricing .card { 21 border: none; 22 border-radius: 1rem; 23 transition: all 0.2s; 24 box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); 25 } 26 27 .pricing hr { 28 margin: 1.5rem 0; 29 } 30 31 .pricing .card-title { 32 margin: 0.5rem 0; 33 font-size: 0.9rem; 34 letter-spacing: .1rem; 35 font-weight: bold; 36 } 37 38 .pricing .card-price { 39 font-size: 3rem; 40 margin: 0; 41 } 42 43 .pricing .card-price .period { 44 font-size: 0.8rem; 45 } 46 47 .pricing ul li { 48 margin-bottom: 1rem; 49 } 50 51 .pricing .text-muted { 52 opacity: 0.7; 53 } 54 55 .pricing .btn { 56 font-size: 80%; 57 border-radius: 5rem; 58 letter-spacing: .1rem; 59 font-weight: bold; 60 padding: 1rem; 61 opacity: 0.7; 62 transition: all 0.2s; 63 } 64 65 /* Hover Effects on Card */ 66 67 @media (min-width: 992px) { 68 .pricing .card:hover { 69 margin-top: -.25rem; 70 margin-bottom: .25rem; 71 box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3); 72 } 73 74 .pricing .card:hover .btn { 75 opacity: 1; 76 } 77 }`); 78 } 79 80 override string content() { 81 82 return 83 H5Main(["style":"margin-top:70px;"], 84 H5Div(["container-fluid", "mt-3", "bg-light"], 85 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 86 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "Pricing Table")), 87 BS5Container(["mt-3"]).row( 88 H5Div(["col-12", "col-lg-2"], 89 listLevels("complex"), 90 listAreas("complex", "pricingtable")), 91 H5Div(["col-12", "col-lg-8"], 92 dateInfo(this), 93 H5H2(["display-4"], "Pricing Table"), 94 H5Hr, 95 96 demoBs5Example("pricingtable", "Right prices for great stuff", 97 BS5Container.row( 98 H5Div(["col-lg-4"], 99 BS5Card(["mb-5 mb-lg-0"]).body_( 100 H5H5(["card-title text-muted text-uppercase text-center"], "Free"), 101 H5H6(["card-price text-center"], H5String("$0"), H5Span(["period"], "/month")), 102 H5Hr, 103 H5Ul(["fa-ul"]) 104 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Single User")) 105 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("5GB Storage")) 106 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Public Projects")) 107 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Community ]ccess")) 108 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Unlimited Private Projects")) 109 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Dedicated Phone Support")) 110 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Free Subdomain")) 111 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Monthly Status Reports")), 112 BS5ButtonLink(["btn-block btn-primary text-uppercase"], ["href":"#"], "Button") 113 ) 114 ), 115 H5Div(["col-lg-4"], 116 BS5Card(["mb-5 mb-lg-0"]).body_( 117 H5H5(["card-title text-muted text-uppercase text-center"], "Plus"), 118 H5H6(["card-price text-center"], H5String("$9"), H5Span(["period"], "/month")), 119 H5Hr, 120 H5Ul(["fa-ul"]) 121 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5Strong("5 Users")) 122 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("50GB Storage")) 123 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Public Projects")) 124 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Community Access")) 125 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Private Projects")) 126 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Dedicated Phone Support")) 127 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Free Subdomain")) 128 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Monthly Status Reports")), 129 BS5ButtonLink(["btn-block btn-primary text-uppercase"], ["href":"#"], "Button") 130 ) 131 ), 132 H5Div(["col-lg-4"], 133 BS5Card.body_( 134 H5H5(["card-title text-muted text-uppercase text-center"], "Pro"), 135 H5H6(["card-price text-center"], H5String("$49"), H5Span(["period"], "/month")), 136 H5Hr, 137 H5Ul(["fa-ul"]) 138 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5Strong("Unlimited Users")) 139 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("150GB Storage")) 140 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Public Projects")) 141 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Community Access")) 142 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Private Projects")) 143 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Dedicated Phone Support")) 144 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5Strong("Unlimited"), H5String("Free Subdomains")) 145 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Monthly Status Reports")), 146 BS5ButtonLink(["btn-block btn-primary text-uppercase"], ["href":"#"], "Button") 147 ) 148 ) 149 ), `BS5Container.row( 150 H5Div(["col-lg-4"], 151 BS5Card(["mb-5 mb-lg-0"]).body_( 152 H5H5(["card-title text-muted text-uppercase text-center"], "Free"), 153 H5H6(["card-price text-center"], H5String("$0"), H5Span(["period"], "/month")), 154 H5Hr, 155 H5Ul(["fa-ul"]) 156 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Single User")) 157 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("5GB Storage")) 158 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Public Projects")) 159 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Community ]ccess")) 160 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Unlimited Private Projects")) 161 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Dedicated Phone Support")) 162 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Free Subdomain")) 163 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Monthly Status Reports")), 164 BS5ButtonLink(["btn-block btn-primary text-uppercase"], ["href":"#"], "Button") 165 ) 166 ), 167 H5Div(["col-lg-4"], 168 BS5Card(["mb-5 mb-lg-0"]).body_( 169 H5H5(["card-title text-muted text-uppercase text-center"], "Plus"), 170 H5H6(["card-price text-center"], H5String("$9"), H5Span(["period"], "/month")), 171 H5Hr, 172 H5Ul(["fa-ul"]) 173 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5Strong("5 Users")) 174 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("50GB Storage")) 175 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Public Projects")) 176 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Community Access")) 177 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Private Projects")) 178 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Dedicated Phone Support")) 179 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Free Subdomain")) 180 .item(["text-muted"], H5Span(["fa-li"], H5H5(["fas fa-times"])), H5String("Monthly Status Reports")), 181 BS5ButtonLink(["btn-block btn-primary text-uppercase"], ["href":"#"], "Button") 182 ) 183 ), 184 H5Div(["col-lg-4"], 185 BS5Card.body_( 186 H5H5(["card-title text-muted text-uppercase text-center"], "Pro"), 187 H5H6(["card-price text-center"], H5String("$49"), H5Span(["period"], "/month")), 188 H5Hr, 189 H5Ul(["fa-ul"]) 190 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5Strong("Unlimited Users")) 191 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("150GB Storage")) 192 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Public Projects")) 193 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Community Access")) 194 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Unlimited Private Projects")) 195 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Dedicated Phone Support")) 196 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5Strong("Unlimited"), H5String("Free Subdomains")) 197 .item(H5Span(["fa-li"], H5H5(["fas fa-check"])), H5String("Monthly Status Reports")), 198 BS5ButtonLink(["btn-block btn-primary text-uppercase"], ["href":"#"], "Button") 199 ) 200 ) 201 )`, 202 `<div class="container"> 203 <div class="row"> 204 <div class="col-lg-4"> 205 <div class="card mb-5 mb-lg-0"> 206 <div class="card-body"> 207 <h5 class="card-title text-muted text-uppercase text-center">Free</h5> 208 <h6 class="card-price text-center">$0<span class="period">/month</span></h6> 209 <hr> 210 <ul class="fa-ul"> 211 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Single User</li> 212 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>5GB Storage</li> 213 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Unlimited Public Projects</li> 214 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Community ]ccess</li> 215 <li class="text-muted"><span class="fa-li"><h5 class="fas fa-times"></h5></span>Unlimited Private Projects</li> 216 <li class="text-muted"><span class="fa-li"><h5 class="fas fa-times"></h5></span>Dedicated Phone Support</li> 217 <li class="text-muted"><span class="fa-li"><h5 class="fas fa-times"></h5></span>Free Subdomain</li> 218 <li class="text-muted"><span class="fa-li"><h5 class="fas fa-times"></h5></span>Monthly Status Reports</li> 219 </ul> 220 <a class="btn btn-block btn-primary text-uppercase" href="#" role="button" type="button">Button</a> 221 </div> 222 </div> 223 </div> 224 <div class="col-lg-4"> 225 <div class="card mb-5 mb-lg-0"> 226 <div class="card-body"> 227 <h5 class="card-title text-muted text-uppercase text-center">Plus</h5> 228 <h6 class="card-price text-center">$9<span class="period">/month</span></h6> 229 <hr> 230 <ul class="fa-ul"> 231 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span><strong>5 Users</strong></li> 232 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>50GB Storage</li> 233 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Unlimited Public Projects</li> 234 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Community Access</li> 235 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Unlimited Private Projects</li> 236 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Dedicated Phone Support</li> 237 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Free Subdomain</li> 238 <li class="text-muted"><span class="fa-li"><h5 class="fas fa-times"></h5></span>Monthly Status Reports</li> 239 </ul> 240 <a class="btn btn-block btn-primary text-uppercase" href="#" role="button" type="button">Button</a> 241 </div> 242 </div> 243 </div> 244 <div class="col-lg-4"> 245 <div class="card"> 246 <div class="card-body"> 247 <h5 class="card-title text-muted text-uppercase text-center">Pro</h5> 248 <h6 class="card-price text-center">$49<span class="period">/month</span></h6> 249 <hr> 250 <ul class="fa-ul"> 251 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span><strong>Unlimited Users</strong></li> 252 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>150GB Storage</li> 253 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Unlimited Public Projects</li> 254 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Community Access</li> 255 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Unlimited Private Projects</li> 256 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Dedicated Phone Support</li> 257 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span><strong>Unlimited</strong>Free Subdomains</li> 258 <li><span class="fa-li"><h5 class="fas fa-check"></h5></span>Monthly Status Reports</li> 259 </ul> 260 <a class="btn btn-block btn-primary text-uppercase" href="#" role="button" type="button">Button</a> 261 </div> 262 </div> 263 </div> 264 </div> 265 </div>`) 266 267 ), 268 H5Div(["col-12", "col-lg-2"]))).toString; 269 } 270 }); 271 }