1 module source.uim.bootstrap.bs5.demos.complex.ecommerce.cardsanimation; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("complex/ecommerce/cardsanimation", 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": "eCommerce Cards - Bootstrap 5 Demo", 14 ]) 15 .styles(`.wrapper { 16 margin-top: 30px 17 } 18 19 .ecommerce { 20 border: 1px solid #eee; 21 cursor: pointer 22 } 23 24 .weight { 25 margin-top: -65px; 26 transition: all 0.5s 27 } 28 29 .weight small { 30 color: #aaaaaa 31 } 32 33 .buttons { 34 padding: 10px; 35 background-color: #d6d4d44f; 36 border-radius: 4px; 37 position: relative; 38 margin-top: 7px; 39 opacity: 0; 40 transition: all 0.8s 41 } 42 43 .dot { 44 height: 14px; 45 width: 14px; 46 background-color: green; 47 border-radius: 50%; 48 position: absolute; 49 left: 27%; 50 display: flex; 51 justify-content: center; 52 align-items: center; 53 font-size: 8px; 54 color: #fff; 55 opacity: 0 56 } 57 58 .cart-button { 59 height: 48px 60 } 61 62 .cart-button:focus { 63 box-shadow: none 64 } 65 66 .cart { 67 position: relative; 68 height: 48px !important; 69 width: 50px; 70 margin-right: 8px; 71 display: flex; 72 justify-content: center; 73 align-items: center; 74 background-color: #fff; 75 padding: 11px; 76 border-radius: 5px; 77 font-size: 14px; 78 transition: 1s ease-in-out; 79 overflow: hidden 80 } 81 82 .cart-button.clicked span.dot { 83 animation: item 0.3s ease-in forwards 84 } 85 86 @keyframes item { 87 0% { 88 opacity: 1; 89 top: 30%; 90 left: 30% 91 } 92 93 25% { 94 opacity: 1; 95 left: 26%; 96 top: 0% 97 } 98 99 50% { 100 opacity: 1; 101 left: 23%; 102 top: -22% 103 } 104 105 75% { 106 opacity: 1; 107 left: 19%; 108 top: -18% 109 } 110 111 100% { 112 opacity: 1; 113 left: 14%; 114 top: 28% 115 } 116 } 117 118 .ecommerce:hover .buttons { 119 opacity: 1 120 } 121 122 .ecommerce:hover .weight { 123 margin-top: 10px 124 } 125 126 .ecommerce:hover { 127 transform: scale(1.04); 128 z-index: 2; 129 overflow: hidden 130 }`).scripts(`document.addEventListener("DOMContentLoaded", function(event) { 131 const cartButtons = document.querySelectorAll('.cart-button'); 132 cartButtons.forEach(button => { 133 button.addEventListener('click',cartClick); 134 }); 135 136 function cartClick(){ 137 let button =this; 138 button.classList.add('clicked'); 139 } 140 });`); 141 } 142 143 override string content() { 144 145 return 146 H5Main(["style":"margin-top:70px;"], 147 H5Div(["container-fluid", "mt-3", "bg-light"], 148 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 149 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "eCommerce Cards with Animation")), 150 BS5Container(["mt-3"]).row( 151 H5Div(["col-12", "col-lg-2"], 152 listLevels("complex"), 153 listAreas("complex", "ecommercecardsanimation")), 154 H5Div(["col-12", "col-lg-8"], 155 dateInfo(this), 156 H5H2(["display-4"], "eCommerce Cards with Animation"), 157 H5Hr, 158 159 demoBs5Example("ecommercecardsanimation", "Fruits are healthy. Buy some", 160 BS5Container 161 .row(["g-1"], 162 H5Div(["col-md-3"], 163 BS5Card(["p-3 ecommerce"], 164 H5Div(["text-center"], 165 H5Img(["img-fluid"], ["src":"/img/strawberries_200x200.jpg"])), 166 H5Div(["product-details"], 167 H5Span(["font-weight-bold d-block"], "€ 7.00 "), 168 H5Span("Strawberries")), 169 H5Div(["buttons d-flex flex-row"], 170 H5Div(["cart"], H5I(["fa fa-shopping-cart"])), 171 BS5Button(["btn-success cart-button btn-block"], H5Span(["dot"], "1"), H5String("To cart")) 172 ), 173 H5Div(["weight"], H5Small("1 piece 0,5kg")) 174 ) 175 ), 176 H5Div(["col-md-3"], 177 BS5Card(["p-3 ecommerce"], 178 H5Div(["text-center"], 179 H5Img(["img-fluid"], ["src":"/img/blueberries_200x200.jpg"])), 180 H5Div(["product-details"], 181 H5Span(["font-weight-bold d-block"], "€ 7.00 "), 182 H5Span("Blueberries")), 183 H5Div(["buttons d-flex flex-row"], 184 H5Div(["cart"], H5I(["fa fa-shopping-cart"])), 185 BS5Button(["btn-success cart-button btn-block"], H5Span(["dot"], "1"), H5String("To cart")) 186 ), 187 H5Div(["weight"], H5Small("100 piece 2.5kg")) 188 ) 189 ), 190 H5Div(["col-md-3"], 191 BS5Card(["p-3 ecommerce"], 192 H5Div(["text-center"], 193 H5Img(["img-fluid"], ["src":"/img/pears_200x200.jpg"])), 194 H5Div(["product-details"], 195 H5Span(["font-weight-bold d-block"], "€ 7.00 "), 196 H5Span("Pears")), 197 H5Div(["buttons d-flex flex-row"], 198 H5Div(["cart"], H5I(["fa fa-shopping-cart"])), 199 BS5Button(["btn-success cart-button btn-block"], H5Span(["dot"], "1"), H5String("To cart")) 200 ), 201 H5Div(["weight"], H5Small("1 piece 1,0kg")) 202 ) 203 ), 204 H5Div(["col-md-3"], 205 BS5Card(["p-3 ecommerce"], 206 H5Div(["text-center"], 207 H5Img(["img-fluid"], ["src":"/img/tomatoes_200x200.jpg"])), 208 H5Div(["product-details"], 209 H5Span(["font-weight-bold d-block"], "€ 7.00 "), 210 H5Span("Tomatoes")), 211 H5Div(["buttons d-flex flex-row"], 212 H5Div(["cart"], H5I(["fa fa-shopping-cart"])), 213 BS5Button(["btn-success cart-button btn-block"], H5Span(["dot"], "1"), H5String("To cart")) 214 ), 215 H5Div(["weight"], H5Small("20 piece 2.5kg")) 216 ) 217 ) 218 ), `BS5Container 219 .row(["g-1"], 220 H5Div(["col-md-3"], 221 BS5Card(["p-3 ecommerce"], 222 H5Div(["text-center"], 223 H5Img(["img-fluid"], ["src":"/img/strawberries_200x200.jpg"])), 224 H5Div(["product-details"], 225 H5Span(["font-weight-bold d-block"], "€ 7.00 "), 226 H5Span("Strawberries")), 227 H5Div(["buttons d-flex flex-row"], 228 H5Div(["cart"], H5I(["fa fa-shopping-cart"])), 229 BS5Button(["btn-success cart-button btn-block"], H5Span(["dot"], "1"), H5String("To cart")) 230 ), 231 H5Div(["weight"], H5Small("1 piece 0,5kg")) 232 ) 233 ), 234 H5Div(["col-md-3"], 235 BS5Card(["p-3 ecommerce"], 236 H5Div(["text-center"], 237 H5Img(["img-fluid"], ["src":"/img/blueberries_200x200.jpg"])), 238 H5Div(["product-details"], 239 H5Span(["font-weight-bold d-block"], "€ 7.00 "), 240 H5Span("Blueberries")), 241 H5Div(["buttons d-flex flex-row"], 242 H5Div(["cart"], H5I(["fa fa-shopping-cart"])), 243 BS5Button(["btn-success cart-button btn-block"], H5Span(["dot"], "1"), H5String("To cart")) 244 ), 245 H5Div(["weight"], H5Small("100 piece 2.5kg")) 246 ) 247 ), 248 H5Div(["col-md-3"], 249 BS5Card(["p-3 ecommerce"], 250 H5Div(["text-center"], 251 H5Img(["img-fluid"], ["src":"/img/pears_200x200.jpg"])), 252 H5Div(["product-details"], 253 H5Span(["font-weight-bold d-block"], "€ 7.00 "), 254 H5Span("Pears")), 255 H5Div(["buttons d-flex flex-row"], 256 H5Div(["cart"], H5I(["fa fa-shopping-cart"])), 257 BS5Button(["btn-success cart-button btn-block"], H5Span(["dot"], "1"), H5String("To cart")) 258 ), 259 H5Div(["weight"], H5Small("1 piece 1,0kg")) 260 ) 261 ), 262 H5Div(["col-md-3"], 263 BS5Card(["p-3 ecommerce"], 264 H5Div(["text-center"], 265 H5Img(["img-fluid"], ["src":"/img/tomatoes_200x200.jpg"])), 266 H5Div(["product-details"], 267 H5Span(["font-weight-bold d-block"], "€ 7.00 "), 268 H5Span("Tomatoes")), 269 H5Div(["buttons d-flex flex-row"], 270 H5Div(["cart"], H5I(["fa fa-shopping-cart"])), 271 BS5Button(["btn-success cart-button btn-block"], H5Span(["dot"], "1"), H5String("To cart")) 272 ), 273 H5Div(["weight"], H5Small("20 piece 2.5kg")) 274 ) 275 ) 276 )`, `<div class="container"> 277 <div class="g-1 row"> 278 <div class="col-md-3"> 279 <div class="card p-3 ecommerce"> 280 <div class="text-center"> 281 <img class="img-fluid" src="/img/strawberries_200x200.jpg"> 282 </div> 283 <div class="product-details"> 284 <span class="font-weight-bold d-block">€ 7.00 </span> 285 <span>Strawberries</span> 286 </div> 287 <div class="buttons d-flex flex-row"> 288 <div class="cart"> 289 <i class="fa fa-shopping-cart"></i> 290 </div> 291 <button class="btn btn-success cart-button btn-block" type="button"> 292 <span class="dot">1</span>To cart 293 </button> 294 </div> 295 <div class="weight"> 296 <small>1 piece 0,5kg</small> 297 </div> 298 </div> 299 </div> 300 <div class="col-md-3"> 301 <div class="card p-3 ecommerce"> 302 <div class="text-center"> 303 <img class="img-fluid" src="/img/blueberries_200x200.jpg"> 304 </div> 305 <div class="product-details"> 306 <span class="font-weight-bold d-block">€ 7.00 </span> 307 <span>Blueberries</span> 308 </div> 309 <div class="buttons d-flex flex-row"> 310 <div class="cart"> 311 <i class="fa fa-shopping-cart"></i> 312 </div> 313 <button class="btn btn-success cart-button btn-block" type="button"> 314 <span class="dot">1</span>To cart 315 </button> 316 </div> 317 <div class="weight"> 318 <small>100 piece 2.5kg</small> 319 </div> 320 </div> 321 </div> 322 <div class="col-md-3"> 323 <div class="card p-3 ecommerce"> 324 <div class="text-center"> 325 <img class="img-fluid" src="/img/pears_200x200.jpg"> 326 </div> 327 <div class="product-details"> 328 <span class="font-weight-bold d-block">€ 7.00 </span> 329 <span>Pears</span> 330 </div> 331 <div class="buttons d-flex flex-row"> 332 <div class="cart"> 333 <i class="fa fa-shopping-cart"></i> 334 </div> 335 <button class="btn btn-success cart-button btn-block" type="button"> 336 <span class="dot">1</span>To cart 337 </button> 338 </div> 339 <div class="weight"> 340 <small>1 piece 1,0kg</small> 341 </div> 342 </div> 343 </div> 344 <div class="col-md-3"> 345 <div class="card p-3 ecommerce"> 346 <div class="text-center"> 347 <img class="img-fluid" src="/img/tomatoes_200x200.jpg"> 348 </div> 349 <div class="product-details"> 350 <span class="font-weight-bold d-block">€ 7.00 </span> 351 <span>Tomatoes</span> 352 </div> 353 <div class="buttons d-flex flex-row"> 354 <div class="cart"> 355 <i class="fa fa-shopping-cart"></i> 356 </div> 357 <button class="btn btn-success cart-button btn-block" type="button"> 358 <span class="dot">1</span>To cart 359 </button> 360 </div> 361 <div class="weight"> 362 <small>20 piece 2.5kg</small> 363 </div> 364 </div> 365 </div> 366 </div> 367 </div>`) 368 369 ), 370 H5Div(["col-12", "col-lg-2"]))).toString; 371 } 372 }); 373 }