1 module uim.bootstrap.bs5.demos.examples.product; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/starter", 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": "Starter Page - Bootstrap 5 Demo", 14 ]) 15 .styles(`.bd-placeholder-img { 16 font-size: 1.125rem; 17 text-anchor: middle; 18 -webkit-user-select: none; 19 -moz-user-select: none; 20 user-select: none; 21 } 22 23 @media (min-width: 768px) { 24 .bd-placeholder-img-lg { 25 font-size: 3.5rem; 26 } 27 }`) 28 .styles(["href":"product.css", "rel":"stylesheet"]); 29 } 30 31 override string content() { 32 33 return 34 H5Header(["site-header sticky-top py-1"], 35 H5Nav(["container d-flex", "flex-column flex-md-row justify-content-between"], 36 H5A(["py-2"], ["href":"#", "aria-label":"Product"], 37 /* <svg xmlns="http://www.w3.org/2000/svg" "width":"24" "height":"24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-"width":"2" class="d-block mx-auto" "role":"img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> 38 */ ), 39 H5A(["py-2 d-none d-md-inline-block"], ["href":"#"], "Tour"), 40 H5A(["py-2 d-none d-md-inline-block"], ["href":"#"], "Product"), 41 H5A(["py-2 d-none d-md-inline-block"], ["href":"#"], "Features"), 42 H5A(["py-2 d-none d-md-inline-block"], ["href":"#"], "Enterprise"), 43 H5A(["py-2 d-none d-md-inline-block"], ["href":"#"], "Support"), 44 H5A(["py-2 d-none d-md-inline-block"], ["href":"#"], "Pricing"), 45 H5A(["py-2 d-none d-md-inline-block"], ["href":"#"], "Cart"), 46 ) 47 ).toString~ 48 H5Main( 49 H5Div(["position-relative overflow-hidden p-3", "p-md-5 m-md-3 text-center bg-light"], 50 H5Div(["col-md-5 p-lg-5 mx-auto my-5"], 51 H5H1(["display-4 fw-normal"], "Punny headline"), 52 H5P(["lead fw-normal"], "And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages."), 53 H5A(["btn btn-outline-secondary"], ["href":"#"], "Coming soon"), 54 ), 55 H5Div(["product-device", "shadow-sm d-none d-md-block"]), 56 H5Div(["product-device product-device-2", "shadow-sm d-none d-md-block"]), 57 ), 58 H5Div(["d-md-flex", "flex-md-equal w-100", "my-md-3", "ps-md-3"], 59 H5Div(["bg-dark", "me-md-3", "pt-3", "px-3", "pt-md-5", "px-md-5", "text-center text-white overflow-hidden"], 60 H5Div(["my-3", "py-3"], 61 H5H2(["display-5"], "Another headline"), 62 H5P(["lead"], "And an even wittier subheading.") 63 ), 64 H5Div(["bg-light", "shadow-sm mx-auto"], ["style":"width: 80%; height: 300px; border-radius: 21px 21px 0 0;"]) 65 ), 66 H5Div(["bg-light", "me-md-3", "pt-3", "px-3", "pt-md-5", "px-md-5", "text-center", "overflow-hidden"], 67 H5Div(["my-3", "p-3"], 68 H5H2(["display-5"], "Another headline"), 69 H5P(["lead"], "And an even wittier subheading.") 70 ), 71 H5Div(["bg-dark", "shadow-sm mx-auto"], ["style":"width: 80%; height: 300px; border-radius: 21px 21px 0 0;"]) 72 ) 73 ), 74 H5Div(["d-md-flex", "flex-md-equal w-100", "my-md-3", "ps-md-3"], 75 H5Div(["bg-light", "me-md-3", "pt-3", "px-3", "pt-md-5", "px-md-5", "text-center", "overflow-hidden"], 76 H5Div(["my-3", "p-3"], 77 H5H2(["display-5"], "Another headline"), 78 H5P(["lead"], "And an even wittier subheading.") 79 ), 80 H5Div(["bg-dark", "shadow-sm mx-auto"], ["style":"width: 80%; height: 300px; border-radius: 21px 21px 0 0;"]) 81 ), 82 H5Div(["bg-primary", "me-md-3", "pt-3", "px-3", "pt-md-5", "px-md-5", "text-center text-white overflow-hidden"], 83 H5Div(["my-3", "py-3"], 84 H5H2(["display-5"], "Another headline"), 85 H5P(["lead"], "And an even wittier subheading.") 86 ), 87 H5Div(["bg-light", "shadow-sm mx-auto"], ["style":"width: 80%; height: 300px; border-radius: 21px 21px 0 0;"]) 88 ) 89 ), 90 H5Div(["d-md-flex", "flex-md-equal w-100", "my-md-3", "ps-md-3"], 91 H5Div(["bg-light", "me-md-3", "pt-3", "px-3", "pt-md-5", "px-md-5", "text-center", "overflow-hidden"], 92 H5Div(["my-3", "p-3"], 93 H5H2(["display-5"], "Another headline"), 94 H5P(["lead"], "And an even wittier subheading.") 95 ), 96 H5Div(["bg-white", "shadow-sm mx-auto"], ["style":"width: 80%; height: 300px; border-radius: 21px 21px 0 0;"]) 97 ), 98 H5Div(["bg-light", "me-md-3", "pt-3", "px-3", "pt-md-5", "px-md-5", "text-center", "overflow-hidden"], 99 H5Div(["my-3", "py-3"], 100 H5H2(["display-5"], "Another headline"), 101 H5P(["lead"], "And an even wittier subheading.") 102 ), 103 H5Div(["bg-white", "shadow-sm mx-auto"], ["style":"width: 80%; height: 300px; border-radius: 21px 21px 0 0;"]) 104 ) 105 ), 106 H5Div(["d-md-flex", "flex-md-equal w-100", "my-md-3", "ps-md-3"], 107 H5Div(["bg-light", "me-md-3", "pt-3", "px-3", "pt-md-5", "px-md-5", "text-center", "overflow-hidden"], 108 H5Div(["my-3", "p-3"], 109 H5H2(["display-5"], "Another headline"), 110 H5P(["lead"], "And an even wittier subheading.") 111 ), 112 H5Div(["bg-white", "shadow-sm mx-auto"], ["style":"width: 80%; height: 300px; border-radius: 21px 21px 0 0;"]) 113 ), 114 H5Div(["bg-light", "me-md-3", "pt-3", "px-3", "pt-md-5", "px-md-5", "text-center", "overflow-hidden"], 115 H5Div(["my-3", "py-3"], 116 H5H2(["display-5"], "Another headline"), 117 H5P(["lead"], "And an even wittier subheading.") 118 ), 119 H5Div(["bg-white", "shadow-sm mx-auto"], ["style":"width: 80%; height: 300px; border-radius: 21px 21px 0 0;"]) 120 ) 121 ) 122 ).toString~ 123 H5Footer(["container py-5"], 124 H5Div(["row"], 125 H5Div(["col-12 col-md"], 126 /* <svg xmlns="http://www.w3.org/2000/svg" "width":"24" "height":"24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-"width":"2" class="d-block mb-2" "role":"img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> 127 */ 128 H5Small(["d-block mb-3 text-muted"], "© 2017-2020") 129 ), 130 H5Div(["col-6 col-md"], 131 H5H5("Features"), 132 H5Ul(["list-unstyled text-small"], 133 H5Li(H5A(["link-secondary"], ["href":"#"], "Cool stuff")), 134 H5Li(H5A(["link-secondary"], ["href":"#"], "Random feature")), 135 H5Li(H5A(["link-secondary"], ["href":"#"], "Team feature")), 136 H5Li(H5A(["link-secondary"], ["href":"#"], "Stuff for developers")), 137 H5Li(H5A(["link-secondary"], ["href":"#"], "Another one")), 138 H5Li(H5A(["link-secondary"], ["href":"#"], "Last time")) 139 ) 140 ), 141 H5Div(["col-6 col-md"], 142 H5H5("Resources"), 143 H5Ul(["list-unstyled text-small"], 144 H5Li(H5A(["link-secondary"], ["href":"#"], "Resource name")), 145 H5Li(H5A(["link-secondary"], ["href":"#"], "Resource")), 146 H5Li(H5A(["link-secondary"], ["href":"#"], "Another resource")), 147 H5Li(H5A(["link-secondary"], ["href":"#"], "Final resource")) 148 ) 149 ), 150 H5Div(["col-6 col-md"], 151 H5H5("Resources"), 152 H5Ul(["list-unstyled text-small"], 153 H5Li(H5A(["link-secondary"], ["href":"#"], "Business")), 154 H5Li(H5A(["link-secondary"], ["href":"#"], "Education")), 155 H5Li(H5A(["link-secondary"], ["href":"#"], "Government")), 156 H5Li(H5A(["link-secondary"], ["href":"#"], "Gaming")) 157 ) 158 ), 159 H5Div(["col-6 col-md"], 160 H5H5("About"), 161 H5Ul(["list-unstyled text-small"], 162 H5Li(H5A(["link-secondary"], ["href":"#"], "Team")), 163 H5Li(H5A(["link-secondary"], ["href":"#"], "Locations")), 164 H5Li(H5A(["link-secondary"], ["href":"#"], "Privacy")), 165 H5Li(H5A(["link-secondary"], ["href":"#"], "Terms")) 166 ) 167 ) 168 ) 169 ).toString; 170 171 } 172 }); 173 } 174