1 module servers.modeller.pages.server; 2 3 @safe: 4 import servers.modeller; 5 6 void uimServer(HTTPServerRequest req, HTTPServerResponse res) { 7 debugMethodCall(moduleName!uimServer~":uimServer"); 8 STRINGAA reqParameters = readRequestParameters(req, null); 9 10 auto myController = APPPageController; 11 myController.view(APPView.layout(MDLLayout)); 12 13 auto responseContent = myController.view.render(reqParameters); 14 res.writeBody(responseContent, "text/html"); 15 } 16 17 /* static this() { 18 serverModeller.pages("server", new class DH5APPPageController { 19 this() { super(); } 20 21 override DH5Obj toH5(STRINGAA options = null) { 22 return /* `<!doctype html> 23 <html lang="en"> 24 <head> 25 <meta charset="utf-8"/> 26 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/> 27 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 28 <title>Dashboard - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title> 29 <!-- CSS files --> 30 </head> 31 <body class="antialiased"> * / 32 H5Div(["wrapper"], `<aside class="navbar fixed-top navbar-vertical navbar-expand-lg navbar-dark"> 33 <div class="container-fluid"> 34 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu"> 35 <span class="navbar-toggler-icon"></span> 36 </button> 37 <h1 class="navbar-brand navbar-brand-autodark"> 38 <a href="."> 39 <img src="./static/logo-white.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image"> 40 </a> 41 </h1> 42 <div class="navbar-nav flex-row d-lg-none"> 43 <div class="nav-item d-none d-md-flex me-3"> 44 <div class="btn-list"> 45 <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer"> 46 <!-- Download SVG icon from http://tabler-icons.io/i/brand-github --> 47 <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg> 48 Source code 49 </a> 50 <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer"> 51 <!-- Download SVG icon from http://tabler-icons.io/i/heart --> 52 <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> 53 Sponsor 54 </a> 55 </div> 56 </div> 57 <div class="nav-item dropdown d-none d-md-flex me-3"> 58 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications"> 59 <!-- Download SVG icon from http://tabler-icons.io/i/bell --> 60 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg> 61 <span class="badge bg-red"></span> 62 </a> 63 <div class="dropdown-menu dropdown-menu-end dropdown-menu-card"> 64 <div class="card"> 65 <div class="card-body"> 66 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. 67 </div> 68 </div> 69 </div> 70 </div> 71 <div class="nav-item dropdown"> 72 <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu"> 73 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span> 74 <div class="d-none d-xl-block ps-2"> 75 <div>Paweł Kuna</div> 76 <div class="mt-1 small text-muted">UI Designer</div> 77 </div> 78 </a> 79 <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"> 80 <a href="#" class="dropdown-item">Set status</a> 81 <a href="#" class="dropdown-item">Profile & account</a> 82 <a href="#" class="dropdown-item">Feedback</a> 83 <div class="dropdown-divider"></div> 84 <a href="#" class="dropdown-item">Settings</a> 85 <a href="#" class="dropdown-item">Logout</a> 86 </div> 87 </div> 88 </div> 89 <div class="collapse navbar-collapse" id="navbar-menu"> 90 <ul class="navbar-nav pt-lg-3"> 91 <li class="nav-item"> 92 <a class="nav-link" href="./index.html" > 93 <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home --> 94 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg> 95 </span> 96 <span class="nav-link-title"> 97 Home 98 </span> 99 </a> 100 </li> 101 <li class="nav-item dropdown"> 102 <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" > 103 <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package --> 104 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg> 105 </span> 106 <span class="nav-link-title"> 107 Interface 108 </span> 109 </a> 110 <div class="dropdown-menu"> 111 <div class="dropdown-menu-columns"> 112 <div class="dropdown-menu-column"> 113 <a class="dropdown-item" href="./empty.html" > 114 Empty page 115 </a> 116 <a class="dropdown-item" href="./accordion.html" > 117 Accordion 118 </a> 119 <a class="dropdown-item" href="./blank.html" > 120 Blank page 121 </a> 122 <a class="dropdown-item" href="./buttons.html" > 123 Buttons 124 </a> 125 <a class="dropdown-item" href="./cards.html" > 126 Cards 127 </a> 128 <a class="dropdown-item" href="./cards-masonry.html" > 129 Cards Masonry 130 </a> 131 <a class="dropdown-item" href="./colors.html" > 132 Colors 133 </a> 134 <a class="dropdown-item" href="./dropdowns.html" > 135 Dropdowns 136 </a> 137 <a class="dropdown-item" href="./icons.html" > 138 Icons 139 </a> 140 <a class="dropdown-item" href="./modals.html" > 141 Modals 142 </a> 143 <a class="dropdown-item" href="./maps.html" > 144 Maps 145 </a> 146 <a class="dropdown-item" href="./map-fullsize.html" > 147 Map fullsize 148 </a> 149 <a class="dropdown-item" href="./maps-vector.html" > 150 Vector maps 151 </a> 152 </div> 153 <div class="dropdown-menu-column"> 154 <a class="dropdown-item" href="./navigation.html" > 155 Navigation 156 </a> 157 <a class="dropdown-item" href="./charts.html" > 158 Charts 159 </a> 160 <a class="dropdown-item" href="./pagination.html" > 161 Pagination 162 </a> 163 <a class="dropdown-item" href="./skeleton.html" > 164 Skeleton 165 </a> 166 <a class="dropdown-item" href="./tabs.html" > 167 Tabs 168 </a> 169 <a class="dropdown-item" href="./tables.html" > 170 Tables 171 </a> 172 <a class="dropdown-item" href="./carousel.html" > 173 Carousel 174 </a> 175 <a class="dropdown-item" href="./lists.html" > 176 Lists 177 </a> 178 <a class="dropdown-item" href="./typography.html" > 179 Typography 180 </a> 181 <a class="dropdown-item" href="./markdown.html" > 182 Markdown 183 </a> 184 <div class="dropend"> 185 <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" > 186 Authentication 187 </a> 188 <div class="dropdown-menu"> 189 <a href="./sign-in.html" class="dropdown-item">Sign in</a> 190 <a href="./sign-up.html" class="dropdown-item">Sign up</a> 191 <a href="./forgot-password.html" class="dropdown-item">Forgot password</a> 192 <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a> 193 <a href="./auth-lock.html" class="dropdown-item">Lock screen</a> 194 </div> 195 </div> 196 <div class="dropend"> 197 <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" > 198 Error pages 199 </a> 200 <div class="dropdown-menu"> 201 <a href="./error-404.html" class="dropdown-item">404 page</a> 202 <a href="./error-500.html" class="dropdown-item">500 page</a> 203 <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a> 204 </div> 205 </div> 206 </div> 207 </div> 208 </div> 209 </li> 210 <li class="nav-item"> 211 <a class="nav-link" href="./form-elements.html" > 212 <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox --> 213 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg> 214 </span> 215 <span class="nav-link-title"> 216 Forms 217 </span> 218 </a> 219 </li> 220 <li class="nav-item dropdown"> 221 <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" > 222 <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star --> 223 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg> 224 </span> 225 <span class="nav-link-title"> 226 Extra 227 </span> 228 </a> 229 <div class="dropdown-menu"> 230 <a class="dropdown-item" href="./activity.html" > 231 Activity 232 </a> 233 <a class="dropdown-item" href="./gallery.html" > 234 Gallery 235 </a> 236 <a class="dropdown-item" href="./invoice.html" > 237 Invoice 238 </a> 239 <a class="dropdown-item" href="./search-results.html" > 240 Search results 241 </a> 242 <a class="dropdown-item" href="./pricing.html" > 243 Pricing cards 244 </a> 245 <a class="dropdown-item" href="./users.html" > 246 Users 247 </a> 248 <a class="dropdown-item" href="./license.html" > 249 License 250 </a> 251 <a class="dropdown-item" href="./music.html" > 252 Music 253 </a> 254 <a class="dropdown-item" href="./widgets.html" > 255 Widgets 256 </a> 257 <a class="dropdown-item" href="./wizard.html" > 258 Wizard 259 </a> 260 </div> 261 </li> 262 <li class="nav-item active dropdown"> 263 <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="true" > 264 <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 --> 265 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg> 266 </span> 267 <span class="nav-link-title"> 268 Layout 269 </span> 270 </a> 271 <div class="dropdown-menu show"> 272 <div class="dropdown-menu-columns"> 273 <div class="dropdown-menu-column"> 274 <a class="dropdown-item" href="./layout-horizontal.html" > 275 Horizontal 276 </a> 277 <a class="dropdown-item" href="./layout-vertical.html" > 278 Vertical 279 </a> 280 <a class="dropdown-item" href="./layout-vertical-transparent.html" > 281 Vertical transparent 282 </a> 283 <a class="dropdown-item" href="./layout-vertical-right.html" > 284 Right vertical 285 </a> 286 <a class="dropdown-item" href="./layout-condensed.html" > 287 Condensed 288 </a> 289 <a class="dropdown-item" href="./layout-condensed-dark.html" > 290 Condensed dark 291 </a> 292 <a class="dropdown-item active" href="./layout-combo.html" > 293 Combined 294 </a> 295 </div> 296 <div class="dropdown-menu-column"> 297 <a class="dropdown-item" href="./layout-navbar-dark.html" > 298 Navbar dark 299 </a> 300 <a class="dropdown-item" href="./layout-navbar-sticky.html" > 301 Navbar sticky 302 </a> 303 <a class="dropdown-item" href="./layout-navbar-overlap.html" > 304 Navbar overlap 305 </a> 306 <a class="dropdown-item" href="./layout-dark.html" > 307 Dark mode 308 </a> 309 <a class="dropdown-item" href="./layout-rtl.html" > 310 RTL mode 311 </a> 312 <a class="dropdown-item" href="./layout-fluid.html" > 313 Fluid 314 </a> 315 <a class="dropdown-item" href="./layout-fluid-vertical.html" > 316 Fluid vertical 317 </a> 318 </div> 319 </div> 320 </div> 321 </li> 322 <li class="nav-item"> 323 <a class="nav-link" href="./docs/index.html" > 324 <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text --> 325 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg> 326 </span> 327 <span class="nav-link-title"> 328 Documentation 329 </span> 330 </a> 331 </li> 332 </ul> 333 </div> 334 </div> 335 </aside> 336 <header class="navbar navbar-expand-md navbar-light d-none d-lg-flex d-print-none"> 337 <div class="container-xl"> 338 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu"> 339 <span class="navbar-toggler-icon"></span> 340 </button> 341 <div class="navbar-nav flex-row order-md-last"> 342 <div class="nav-item dropdown d-none d-md-flex me-3"> 343 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications"> 344 <!-- Download SVG icon from http://tabler-icons.io/i/bell --> 345 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg> 346 <span class="badge bg-red"></span> 347 </a> 348 <div class="dropdown-menu dropdown-menu-end dropdown-menu-card"> 349 <div class="card"> 350 <div class="card-body"> 351 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. 352 </div> 353 </div> 354 </div> 355 </div> 356 <div class="nav-item dropdown"> 357 <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu"> 358 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span> 359 <div class="d-none d-xl-block ps-2"> 360 <div>Paweł Kuna</div> 361 <div class="mt-1 small text-muted">UI Designer</div> 362 </div> 363 </a> 364 <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"> 365 <a href="#" class="dropdown-item">Set status</a> 366 <a href="#" class="dropdown-item">Profile & account</a> 367 <a href="#" class="dropdown-item">Feedback</a> 368 <div class="dropdown-divider"></div> 369 <a href="#" class="dropdown-item">Settings</a> 370 <a href="#" class="dropdown-item">Logout</a> 371 </div> 372 </div> 373 </div> 374 <div class="collapse navbar-collapse" id="navbar-menu"> 375 <div> 376 <form action="." method="get"> 377 <div class="input-icon"> 378 <span class="input-icon-addon"> 379 <!-- Download SVG icon from http://tabler-icons.io/i/search --> 380 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg> 381 </span> 382 <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website"> 383 </div> 384 </form> 385 </div> 386 </div> 387 </div> 388 </header> 389 <div class="page-wrapper mt-5"> 390 <div class="container-xl"> 391 <!-- Page title --> 392 <div class="page-header d-print-none"> 393 <div class="row align-items-center"> 394 <div class="col"> 395 <!-- Page pre-title --> 396 <div class="page-pretitle"> 397 Overview 398 </div> 399 <h2 class="page-title"> 400 Combo layout 401 </h2> 402 </div> 403 <!-- Page title actions --> 404 <div class="col-auto ms-auto d-print-none"> 405 <div class="btn-list"> 406 <span class="d-none d-sm-inline"> 407 <a href="#" class="btn btn-white"> 408 New view 409 </a> 410 </span> 411 <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report"> 412 <!-- Download SVG icon from http://tabler-icons.io/i/plus --> 413 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg> 414 Create new report 415 </a> 416 <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report"> 417 <!-- Download SVG icon from http://tabler-icons.io/i/plus --> 418 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg> 419 </a> 420 </div> 421 </div> 422 </div> 423 </div> 424 </div> 425 <div class="page-body"> 426 <div class="container-xl"> 427 <div class="row row-deck row-cards"> 428 <div class="col-sm-6 col-lg-3"> 429 <div class="card"> 430 <div class="card-body"> 431 <div class="d-flex align-items-center"> 432 <div class="subheader">Sales</div> 433 <div class="ms-auto lh-1"> 434 <div class="dropdown"> 435 <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a> 436 <div class="dropdown-menu dropdown-menu-end"> 437 <a class="dropdown-item active" href="#">Last 7 days</a> 438 <a class="dropdown-item" href="#">Last 30 days</a> 439 <a class="dropdown-item" href="#">Last 3 months</a> 440 </div> 441 </div> 442 </div> 443 </div> 444 <div class="h1 mb-3">75%</div> 445 <div class="d-flex mb-2"> 446 <div>Conversion rate</div> 447 <div class="ms-auto"> 448 <span class="text-green d-inline-flex align-items-center lh-1"> 449 7% <!-- Download SVG icon from http://tabler-icons.io/i/trending-up --> 450 <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" /></svg> 451 </span> 452 </div> 453 </div> 454 <div class="progress progress-sm"> 455 <div class="progress-bar bg-blue" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> 456 <span class="visually-hidden">75% Complete</span> 457 </div> 458 </div> 459 </div> 460 </div> 461 </div> 462 <div class="col-sm-6 col-lg-3"> 463 <div class="card"> 464 <div class="card-body"> 465 <div class="d-flex align-items-center"> 466 <div class="subheader">Revenue</div> 467 <div class="ms-auto lh-1"> 468 <div class="dropdown"> 469 <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a> 470 <div class="dropdown-menu dropdown-menu-end"> 471 <a class="dropdown-item active" href="#">Last 7 days</a> 472 <a class="dropdown-item" href="#">Last 30 days</a> 473 <a class="dropdown-item" href="#">Last 3 months</a> 474 </div> 475 </div> 476 </div> 477 </div> 478 <div class="d-flex align-items-baseline"> 479 <div class="h1 mb-0 me-2">$4,300</div> 480 <div class="me-auto"> 481 <span class="text-green d-inline-flex align-items-center lh-1"> 482 8% <!-- Download SVG icon from http://tabler-icons.io/i/trending-up --> 483 <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" /></svg> 484 </span> 485 </div> 486 </div> 487 </div> 488 <div id="chart-revenue-bg" class="chart-sm"></div> 489 </div> 490 </div> 491 <div class="col-sm-6 col-lg-3"> 492 <div class="card"> 493 <div class="card-body"> 494 <div class="d-flex align-items-center"> 495 <div class="subheader">New clients</div> 496 <div class="ms-auto lh-1"> 497 <div class="dropdown"> 498 <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a> 499 <div class="dropdown-menu dropdown-menu-end"> 500 <a class="dropdown-item active" href="#">Last 7 days</a> 501 <a class="dropdown-item" href="#">Last 30 days</a> 502 <a class="dropdown-item" href="#">Last 3 months</a> 503 </div> 504 </div> 505 </div> 506 </div> 507 <div class="d-flex align-items-baseline"> 508 <div class="h1 mb-3 me-2">6,782</div> 509 <div class="me-auto"> 510 <span class="text-yellow d-inline-flex align-items-center lh-1"> 511 0% <!-- Download SVG icon from http://tabler-icons.io/i/minus --> 512 <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /></svg> 513 </span> 514 </div> 515 </div> 516 <div id="chart-new-clients" class="chart-sm"></div> 517 </div> 518 </div> 519 </div> 520 <div class="col-sm-6 col-lg-3"> 521 <div class="card"> 522 <div class="card-body"> 523 <div class="d-flex align-items-center"> 524 <div class="subheader">Active users</div> 525 <div class="ms-auto lh-1"> 526 <div class="dropdown"> 527 <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a> 528 <div class="dropdown-menu dropdown-menu-end"> 529 <a class="dropdown-item active" href="#">Last 7 days</a> 530 <a class="dropdown-item" href="#">Last 30 days</a> 531 <a class="dropdown-item" href="#">Last 3 months</a> 532 </div> 533 </div> 534 </div> 535 </div> 536 <div class="d-flex align-items-baseline"> 537 <div class="h1 mb-3 me-2">2,986</div> 538 <div class="me-auto"> 539 <span class="text-green d-inline-flex align-items-center lh-1"> 540 4% <!-- Download SVG icon from http://tabler-icons.io/i/trending-up --> 541 <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" /></svg> 542 </span> 543 </div> 544 </div> 545 <div id="chart-active-users" class="chart-sm"></div> 546 </div> 547 </div> 548 </div> 549 <div class="col-lg-6"> 550 <div class="row row-cards"> 551 <div class="col-12"> 552 <div class="card"> 553 <div class="card-body"> 554 <h3 class="card-title">Traffic summary</h3> 555 <div id="chart-mentions" class="chart-lg"></div> 556 </div> 557 </div> 558 </div> 559 <div class="col-12"> 560 <div class="card"> 561 <div class="card-body"> 562 <p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p> 563 <div class="progress progress-separated mb-3"> 564 <div class="progress-bar bg-primary" role="progressbar" style="width: 44%"></div> 565 <div class="progress-bar bg-info" role="progressbar" style="width: 19%"></div> 566 <div class="progress-bar bg-success" role="progressbar" style="width: 9%"></div> 567 </div> 568 <div class="row"> 569 <div class="col-auto d-flex align-items-center pe-2"> 570 <span class="legend me-2 bg-primary"></span> 571 <span>Regular</span> 572 <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">915MB</span> 573 </div> 574 <div class="col-auto d-flex align-items-center px-2"> 575 <span class="legend me-2 bg-info"></span> 576 <span>System</span> 577 <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">415MB</span> 578 </div> 579 <div class="col-auto d-flex align-items-center px-2"> 580 <span class="legend me-2 bg-success"></span> 581 <span>Shared</span> 582 <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">201MB</span> 583 </div> 584 <div class="col-auto d-flex align-items-center ps-2"> 585 <span class="legend me-2"></span> 586 <span>Free</span> 587 <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">612MB</span> 588 </div> 589 </div> 590 </div> 591 </div> 592 </div> 593 <div class="col-sm-4"> 594 <div class="card"> 595 <div class="card-body p-2 text-center"> 596 <div class="text-end text-green"> 597 <span class="text-green d-inline-flex align-items-center lh-1">`~tablerIcon("trending-up")~`</span> 598 </div> 599 <div class="h1 m-0">43</div> 600 <div class="text-muted mb-3">New Tickets</div> 601 </div> 602 </div> 603 </div> 604 <div class="col-sm-4"> 605 <div class="card"> 606 <div class="card-body p-2 text-center"> 607 <div class="text-end text-red"> 608 <span class="text-red d-inline-flex align-items-center lh-1"> 609 -2% `~tablerIcon("trending-down")~`</span> 610 </div> 611 <div class="h1 m-0">95</div> 612 <div class="text-muted mb-3">Daily Earnings</div> 613 </div> 614 </div> 615 </div> 616 <div class="col-sm-4"> 617 <div class="card"> 618 <div class="card-body p-2 text-center"> 619 <div class="text-end text-green"> 620 <span class="text-green d-inline-flex align-items-center lh-1"> 621 9% `~tablerIcon("trending-up")~`</span> 622 </div> 623 <div class="h1 m-0">7</div> 624 <div class="text-muted mb-3">New Replies</div> 625 </div> 626 </div> 627 </div> 628 </div> 629 </div> 630 <div class="col-lg-6"> 631 <div class="card"> 632 <div class="card-header border-0"> 633 <div class="card-title">Development activity</div> 634 </div> 635 <div class="position-relative"> 636 <div class="position-absolute top-0 left-0 px-3 mt-1 w-50"> 637 <div class="row g-2"> 638 <div class="col-auto"> 639 <div class="chart-sparkline chart-sparkline-square" id="sparkline-activity"></div> 640 </div> 641 <div class="col"> 642 <div>Today's Earning: $4,262.40</div> 643 <div class="text-muted">`~tablerIcon("trending-up")~` +5% more than yesterday</div> 644 </div> 645 </div> 646 </div> 647 <div id="chart-development-activity"></div> 648 </div> 649 <div class="card-table table-responsive"> 650 <table class="table table-vcenter"> 651 <thead> 652 <tr> 653 <th>User</th> 654 <th>Commit</th> 655 <th>Date</th> 656 </tr> 657 </thead> 658 <tbody> 659 <tr> 660 <td class="w-1"> 661 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span> 662 </td> 663 <td class="td-truncate"> 664 <div class="text-truncate"> 665 Fix dart Sass compatibility (#29755) 666 </div> 667 </td> 668 <td class="text-nowrap text-muted">28 Nov 2019</td> 669 </tr> 670 <tr> 671 <td class="w-1"> 672 <span class="avatar avatar-sm">JL</span> 673 </td> 674 <td class="td-truncate"> 675 <div class="text-truncate"> 676 Change deprecated html tags to text decoration classes (#29604) 677 </div> 678 </td> 679 <td class="text-nowrap text-muted">27 Nov 2019</td> 680 </tr> 681 <tr> 682 <td class="w-1"> 683 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/002m.jpg)"></span> 684 </td> 685 <td class="td-truncate"> 686 <div class="text-truncate"> 687 justify-content:between ⇒ justify-content:space-between (#29734) 688 </div> 689 </td> 690 <td class="text-nowrap text-muted">26 Nov 2019</td> 691 </tr> 692 <tr> 693 <td class="w-1"> 694 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/003m.jpg)"></span> 695 </td> 696 <td class="td-truncate"> 697 <div class="text-truncate"> 698 Update change-version.js (#29736) 699 </div> 700 </td> 701 <td class="text-nowrap text-muted">26 Nov 2019</td> 702 </tr> 703 <tr> 704 <td class="w-1"> 705 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000f.jpg)"></span> 706 </td> 707 <td class="td-truncate"> 708 <div class="text-truncate"> 709 Regenerate package-lock.json (#29730) 710 </div> 711 </td> 712 <td class="text-nowrap text-muted">25 Nov 2019</td> 713 </tr> 714 <tr> 715 <td class="w-1"> 716 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/001f.jpg)"></span> 717 </td> 718 <td class="td-truncate"> 719 <div class="text-truncate"> 720 Some minor text tweaks 721 </div> 722 </td> 723 <td class="text-nowrap text-muted">24 Nov 2019</td> 724 </tr> 725 </tbody> 726 </table> 727 </div> 728 </div> 729 </div> 730 <div class="col-md-8"> 731 <div class="card" style="height: calc(24rem + 10px)"> 732 <div class="card-body card-body-scrollable card-body-scrollable-shadow"> 733 <div class="divide-y"> 734 <div> 735 <div class="row"> 736 <div class="col-auto"> 737 <span class="avatar">JL</span> 738 </div> 739 <div class="col"> 740 <div class="text-truncate"> 741 <strong>Jeffie Lewzey</strong> commented on your <strong>"I'm not a witch."</strong> post. 742 </div> 743 <div class="text-muted">yesterday</div> 744 </div> 745 <div class="col-auto align-self-center"> 746 <div class="badge bg-primary"></div> 747 </div> 748 </div> 749 </div> 750 <div> 751 <div class="row"> 752 <div class="col-auto"> 753 <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span> 754 </div> 755 <div class="col"> 756 <div class="text-truncate"> 757 It's <strong>Mallory Hulme</strong>'s birthday. Wish him well! 758 </div> 759 <div class="text-muted">2 days ago</div> 760 </div> 761 <div class="col-auto align-self-center"> 762 <div class="badge bg-primary"></div> 763 </div> 764 </div> 765 </div> 766 <div> 767 <div class="row"> 768 <div class="col-auto"> 769 <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span> 770 </div> 771 <div class="col"> 772 <div class="text-truncate"> 773 <strong>Dunn Slane</strong> posted <strong>"Well, what do you want?"</strong>. 774 </div> 775 <div class="text-muted">today</div> 776 </div> 777 <div class="col-auto align-self-center"> 778 <div class="badge bg-primary"></div> 779 </div> 780 </div> 781 </div> 782 <div> 783 <div class="row"> 784 <div class="col-auto"> 785 <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span> 786 </div> 787 <div class="col"> 788 <div class="text-truncate"> 789 <strong>Emmy Levet</strong> created a new project <strong>Morning alarm clock</strong>. 790 </div> 791 <div class="text-muted">4 days ago</div> 792 </div> 793 <div class="col-auto align-self-center"> 794 <div class="badge bg-primary"></div> 795 </div> 796 </div> 797 </div> 798 <div> 799 <div class="row"> 800 <div class="col-auto"> 801 <span class="avatar" style="background-image: url(./static/avatars/001f.jpg)"></span> 802 </div> 803 <div class="col"> 804 <div class="text-truncate"> 805 <strong>Maryjo Lebarree</strong> liked your photo. 806 </div> 807 <div class="text-muted">2 days ago</div> 808 </div> 809 </div> 810 </div> 811 <div> 812 <div class="row"> 813 <div class="col-auto"> 814 <span class="avatar">EP</span> 815 </div> 816 <div class="col"> 817 <div class="text-truncate"> 818 <strong>Egan Poetz</strong> registered new client as <strong>Trilia</strong>. 819 </div> 820 <div class="text-muted">yesterday</div> 821 </div> 822 </div> 823 </div> 824 <div> 825 <div class="row"> 826 <div class="col-auto"> 827 <span class="avatar" style="background-image: url(./static/avatars/002f.jpg)"></span> 828 </div> 829 <div class="col"> 830 <div class="text-truncate"> 831 <strong>Kellie Skingley</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>. 832 </div> 833 <div class="text-muted">2 days ago</div> 834 </div> 835 </div> 836 </div> 837 <div> 838 <div class="row"> 839 <div class="col-auto"> 840 <span class="avatar" style="background-image: url(./static/avatars/003f.jpg)"></span> 841 </div> 842 <div class="col"> 843 <div class="text-truncate"> 844 <strong>Christabel Charlwood</strong> created a new project for <strong>Wikibox</strong>. 845 </div> 846 <div class="text-muted">4 days ago</div> 847 </div> 848 </div> 849 </div> 850 <div> 851 <div class="row"> 852 <div class="col-auto"> 853 <span class="avatar">HS</span> 854 </div> 855 <div class="col"> 856 <div class="text-truncate"> 857 <strong>Haskel Shelper</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>. 858 </div> 859 <div class="text-muted">today</div> 860 </div> 861 </div> 862 </div> 863 <div> 864 <div class="row"> 865 <div class="col-auto"> 866 <span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span> 867 </div> 868 <div class="col"> 869 <div class="text-truncate"> 870 <strong>Lorry Mion</strong> liked <strong>Tabler UI Kit</strong>. 871 </div> 872 <div class="text-muted">yesterday</div> 873 </div> 874 </div> 875 </div> 876 <div> 877 <div class="row"> 878 <div class="col-auto"> 879 <span class="avatar" style="background-image: url(./static/avatars/004f.jpg)"></span> 880 </div> 881 <div class="col"> 882 <div class="text-truncate"> 883 <strong>Leesa Beaty</strong> posted new video. 884 </div> 885 <div class="text-muted">2 days ago</div> 886 </div> 887 </div> 888 </div> 889 <div> 890 <div class="row"> 891 <div class="col-auto"> 892 <span class="avatar" style="background-image: url(./static/avatars/007m.jpg)"></span> 893 </div> 894 <div class="col"> 895 <div class="text-truncate"> 896 <strong>Perren Keemar</strong> and 3 others followed you. 897 </div> 898 <div class="text-muted">2 days ago</div> 899 </div> 900 </div> 901 </div> 902 <div> 903 <div class="row"> 904 <div class="col-auto"> 905 <span class="avatar">SA</span> 906 </div> 907 <div class="col"> 908 <div class="text-truncate"> 909 <strong>Sunny Airey</strong> upload 3 new photos to category <strong>Inspirations</strong>. 910 </div> 911 <div class="text-muted">2 days ago</div> 912 </div> 913 </div> 914 </div> 915 <div> 916 <div class="row"> 917 <div class="col-auto"> 918 <span class="avatar" style="background-image: url(./static/avatars/009m.jpg)"></span> 919 </div> 920 <div class="col"> 921 <div class="text-truncate"> 922 <strong>Geoffry Flaunders</strong> made a <strong>$10</strong> donation. 923 </div> 924 <div class="text-muted">2 days ago</div> 925 </div> 926 </div> 927 </div> 928 <div> 929 <div class="row"> 930 <div class="col-auto"> 931 <span class="avatar" style="background-image: url(./static/avatars/010m.jpg)"></span> 932 </div> 933 <div class="col"> 934 <div class="text-truncate"> 935 <strong>Thatcher Keel</strong> created a profile. 936 </div> 937 <div class="text-muted">3 days ago</div> 938 </div> 939 </div> 940 </div> 941 <div> 942 <div class="row"> 943 <div class="col-auto"> 944 <span class="avatar" style="background-image: url(./static/avatars/005f.jpg)"></span> 945 </div> 946 <div class="col"> 947 <div class="text-truncate"> 948 <strong>Dyann Escala</strong> hosted the event <strong>Tabler UI Birthday</strong>. 949 </div> 950 <div class="text-muted">4 days ago</div> 951 </div> 952 </div> 953 </div> 954 <div> 955 <div class="row"> 956 <div class="col-auto"> 957 <span class="avatar" style="background-image: url(./static/avatars/006f.jpg)"></span> 958 </div> 959 <div class="col"> 960 <div class="text-truncate"> 961 <strong>Avivah Mugleston</strong> mentioned you on <strong>Best of 2020</strong>. 962 </div> 963 <div class="text-muted">2 days ago</div> 964 </div> 965 </div> 966 </div> 967 <div> 968 <div class="row"> 969 <div class="col-auto"> 970 <span class="avatar">AA</span> 971 </div> 972 <div class="col"> 973 <div class="text-truncate"> 974 <strong>Arlie Armstead</strong> sent a Review Request to <strong>Amanda Blake</strong>. 975 </div> 976 <div class="text-muted">2 days ago</div> 977 </div> 978 </div> 979 </div> 980 </div> 981 </div> 982 </div> 983 </div> 984 <div class="col-md-4"> 985 <div class="row row-cards"> 986 <div class="col-12"> 987 <div class="card card-sm"> 988 <div class="card-body"> 989 <div class="row align-items-center"> 990 <div class="col-auto"> 991 <span class="bg-blue text-white avatar">`~tablerIcon("currency-dollar")~`</span> 992 </div> 993 <div class="col"> 994 <div class="font-weight-medium"> 995 132 Sales 996 </div> 997 <div class="text-muted"> 998 12 waiting payments 999 </div> 1000 </div> 1001 </div> 1002 </div> 1003 </div> 1004 </div> 1005 <div class="col-12"> 1006 <div class="card card-sm"> 1007 <div class="card-body"> 1008 <div class="row align-items-center"> 1009 <div class="col-auto"> 1010 <span class="bg-green text-white avatar">`~tablerIcon("shopping-cart")~`</span> 1011 </div> 1012 <div class="col"> 1013 <div class="font-weight-medium"> 1014 78 Orders 1015 </div> 1016 <div class="text-muted"> 1017 32 shipped 1018 </div> 1019 </div> 1020 </div> 1021 </div> 1022 </div> 1023 </div> 1024 <div class="col-12"> 1025 <div class="card card-sm"> 1026 <div class="card-body"> 1027 <div class="row align-items-center"> 1028 <div class="col-auto"> 1029 <span class="bg-yellow text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/users --> 1030 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /><path d="M21 21v-2a4 4 0 0 0 -3 -3.85" /></svg> 1031 </span> 1032 </div> 1033 <div class="col"> 1034 <div class="font-weight-medium"> 1035 1352 Members 1036 </div> 1037 <div class="text-muted"> 1038 163 registered today 1039 </div> 1040 </div> 1041 </div> 1042 </div> 1043 </div> 1044 </div> 1045 <div class="col-12"> 1046 <div class="card card-sm"> 1047 <div class="card-body"> 1048 <div class="row align-items-center"> 1049 <div class="col-auto"> 1050 <span class="bg-twitter text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter --> 1051 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg> 1052 </span> 1053 </div> 1054 <div class="col"> 1055 <div class="font-weight-medium"> 1056 623 Shares 1057 </div> 1058 <div class="text-muted"> 1059 16 today 1060 </div> 1061 </div> 1062 </div> 1063 </div> 1064 </div> 1065 </div> 1066 <div class="col-12"> 1067 <div class="card card-sm"> 1068 <div class="card-body"> 1069 <div class="row align-items-center"> 1070 <div class="col-auto"> 1071 <span class="bg-facebook text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook --> 1072 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg> 1073 </span> 1074 </div> 1075 <div class="col"> 1076 <div class="font-weight-medium"> 1077 132 Likes 1078 </div> 1079 <div class="text-muted"> 1080 21 today 1081 </div> 1082 </div> 1083 </div> 1084 </div> 1085 </div> 1086 </div> 1087 </div> 1088 </div> 1089 <div class="col-md-12 col-lg-8"> 1090 <div class="card"> 1091 <div class="card-header"> 1092 <h3 class="card-title">Most Visited Pages</h3> 1093 </div> 1094 <div class="card-table table-responsive"> 1095 <table class="table table-vcenter"> 1096 <thead> 1097 <tr> 1098 <th>Page name</th> 1099 <th>Visitors</th> 1100 <th>Unique</th> 1101 <th colspan="2">Bounce rate</th> 1102 </tr> 1103 </thead> 1104 <tr> 1105 <td> 1106 /about.html 1107 <a href="#" class="ms-1" aria-label="Open website">`~tablerIcon("link")~`</a> 1108 </td> 1109 <td class="text-muted">4,896</td> 1110 <td class="text-muted">3,654</td> 1111 <td class="text-muted">82.54%</td> 1112 <td class="text-end w-1"> 1113 <div class="chart-sparkline chart-sparkline-sm" id="sparkline-bounce-rate-1"></div> 1114 </td> 1115 </tr> 1116 <tr> 1117 <td> 1118 /special-promo.html 1119 <a href="#" class="ms-1" aria-label="Open website">`~tablerIcon("link")~`</a> 1120 </td> 1121 <td class="text-muted">3,652</td> 1122 <td class="text-muted">3,215</td> 1123 <td class="text-muted">76.29%</td> 1124 <td class="text-end w-1"> 1125 <div class="chart-sparkline chart-sparkline-sm" id="sparkline-bounce-rate-2"></div> 1126 </td> 1127 </tr> 1128 <tr> 1129 <td> 1130 /news/1,new-ui-kit.html 1131 <a href="#" class="ms-1" aria-label="Open website">`~tablerIcon("link")~`</a> 1132 </td> 1133 <td class="text-muted">3,256</td> 1134 <td class="text-muted">2,865</td> 1135 <td class="text-muted">72.65%</td> 1136 <td class="text-end w-1"> 1137 <div class="chart-sparkline chart-sparkline-sm" id="sparkline-bounce-rate-3"></div> 1138 </td> 1139 </tr> 1140 <tr> 1141 <td> 1142 /lorem-ipsum-dolor-sit-amet-very-long-url.html 1143 <a href="#" class="ms-1" aria-label="Open website">`~tablerIcon("link")~`</a> 1144 </td> 1145 <td class="text-muted">986</td> 1146 <td class="text-muted">865</td> 1147 <td class="text-muted">44.89%</td> 1148 <td class="text-end w-1"> 1149 <div class="chart-sparkline chart-sparkline-sm" id="sparkline-bounce-rate-4"></div> 1150 </td> 1151 </tr> 1152 <tr> 1153 <td> 1154 /colors.html 1155 <a href="#" class="ms-1" aria-label="Open website">`~tablerIcon("link")~`</a> 1156 </td> 1157 <td class="text-muted">912</td> 1158 <td class="text-muted">822</td> 1159 <td class="text-muted">41.12%</td> 1160 <td class="text-end w-1"> 1161 <div class="chart-sparkline chart-sparkline-sm" id="sparkline-bounce-rate-5"></div> 1162 </td> 1163 </tr> 1164 <tr> 1165 <td> 1166 /docs/index.html 1167 <a href="#" class="ms-1" aria-label="Open website">`~tablerIcon("link")~`</a> 1168 </td> 1169 <td class="text-muted">855</td> 1170 <td class="text-muted">798</td> 1171 <td class="text-muted">32.65%</td> 1172 <td class="text-end w-1"> 1173 <div class="chart-sparkline chart-sparkline-sm" id="sparkline-bounce-rate-6"></div> 1174 </td> 1175 </tr> 1176 </table> 1177 </div> 1178 </div> 1179 </div> 1180 <div class="col-md-6 col-lg-4"> 1181 <a href="https://github.com/sponsors/codecalm" class="card card-sponsor" target="_blank" rel="noopener" style="background-image: url(./static/sponsor-banner-homepage.svg)" aria-label="Sponsor Tabler!"> 1182 <div class="card-body"></div> 1183 </a> 1184 </div> 1185 <div class="col-md-6 col-lg-4"> 1186 <div class="card"> 1187 <div class="card-header"> 1188 <h3 class="card-title">Social Media Traffic</h3> 1189 </div> 1190 <table class="table card-table table-vcenter"> 1191 <thead> 1192 <tr> 1193 <th>Network</th> 1194 <th colspan="2">Visitors</th> 1195 </tr> 1196 </thead> 1197 <tbody> 1198 <tr> 1199 <td>Instagram</td> 1200 <td>3,550</td> 1201 <td class="w-50"> 1202 <div class="progress progress-xs"> 1203 <div class="progress-bar bg-primary" style="width: 71.0%"></div> 1204 </div> 1205 </td> 1206 </tr> 1207 <tr> 1208 <td>Twitter</td> 1209 <td>1,798</td> 1210 <td class="w-50"> 1211 <div class="progress progress-xs"> 1212 <div class="progress-bar bg-primary" style="width: 35.96%"></div> 1213 </div> 1214 </td> 1215 </tr> 1216 <tr> 1217 <td>Facebook</td> 1218 <td>1,245</td> 1219 <td class="w-50"> 1220 <div class="progress progress-xs"> 1221 <div class="progress-bar bg-primary" style="width: 24.9%"></div> 1222 </div> 1223 </td> 1224 </tr> 1225 <tr> 1226 <td>TikTok</td> 1227 <td>986</td> 1228 <td class="w-50"> 1229 <div class="progress progress-xs"> 1230 <div class="progress-bar bg-primary" style="width: 19.72%"></div> 1231 </div> 1232 </td> 1233 </tr> 1234 <tr> 1235 <td>Pinterest</td> 1236 <td>854</td> 1237 <td class="w-50"> 1238 <div class="progress progress-xs"> 1239 <div class="progress-bar bg-primary" style="width: 17.08%"></div> 1240 </div> 1241 </td> 1242 </tr> 1243 <tr> 1244 <td>VK</td> 1245 <td>650</td> 1246 <td class="w-50"> 1247 <div class="progress progress-xs"> 1248 <div class="progress-bar bg-primary" style="width: 13.0%"></div> 1249 </div> 1250 </td> 1251 </tr> 1252 <tr> 1253 <td>Pinterest</td> 1254 <td>420</td> 1255 <td class="w-50"> 1256 <div class="progress progress-xs"> 1257 <div class="progress-bar bg-primary" style="width: 8.4%"></div> 1258 </div> 1259 </td> 1260 </tr> 1261 </tbody> 1262 </table> 1263 </div> 1264 </div> 1265 <div class="col-md-12 col-lg-8"> 1266 <div class="card"> 1267 <div class="card-header"> 1268 <h3 class="card-title">Tasks</h3> 1269 </div> 1270 <div class="table-responsive"> 1271 <table class="table card-table table-vcenter"> 1272 <tr> 1273 <td class="w-1 pe-0"> 1274 <input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task" checked > 1275 </td> 1276 <td class="w-100"> 1277 <a href="#" class="text-reset">Extend the data model.</a> 1278 </td> 1279 <td class="text-nowrap text-muted"> 1280 <!-- Download SVG icon from http://tabler-icons.io/i/calendar --> 1281 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="5" width="16" height="16" rx="2" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="4" y1="11" x2="20" y2="11" /><line x1="11" y1="15" x2="12" y2="15" /><line x1="12" y1="15" x2="12" y2="18" /></svg> 1282 January 01, 2019 1283 </td> 1284 <td class="text-nowrap"> 1285 <a href="#" class="text-muted"> 1286 <!-- Download SVG icon from http://tabler-icons.io/i/check --> 1287 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg> 1288 2/7 1289 </a> 1290 </td> 1291 <td class="text-nowrap"> 1292 <a href="#" class="text-muted"> 1293 <!-- Download SVG icon from http://tabler-icons.io/i/message --> 1294 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" /><line x1="8" y1="9" x2="16" y2="9" /><line x1="8" y1="13" x2="14" y2="13" /></svg> 1295 3</a> 1296 </td> 1297 <td> 1298 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span> 1299 </td> 1300 </tr> 1301 <tr> 1302 <td class="w-1 pe-0"> 1303 <input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task" > 1304 </td> 1305 <td class="w-100"> 1306 <a href="#" class="text-reset">Verify the event flow.</a> 1307 </td> 1308 <td class="text-nowrap text-muted"> 1309 <!-- Download SVG icon from http://tabler-icons.io/i/calendar --> 1310 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="5" width="16" height="16" rx="2" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="4" y1="11" x2="20" y2="11" /><line x1="11" y1="15" x2="12" y2="15" /><line x1="12" y1="15" x2="12" y2="18" /></svg> 1311 January 01, 2019 1312 </td> 1313 <td class="text-nowrap"> 1314 <a href="#" class="text-muted">`~tablerIcon("check")~` 3/10</a> 1315 </td> 1316 <td class="text-nowrap"> 1317 <a href="#" class="text-muted">`~tablerIcon("message")~` 6</a> 1318 </td> 1319 <td> 1320 <span class="avatar avatar-sm">JL</span> 1321 </td> 1322 </tr> 1323 <tr> 1324 <td class="w-1 pe-0"> 1325 <input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task" > 1326 </td> 1327 <td class="w-100"> 1328 <a href="#" class="text-reset">Database backup and maintenance</a> 1329 </td> 1330 <td class="text-nowrap text-muted">`~tablerIcon("calendar")~` January 01, 2019 1331 </td> 1332 <td class="text-nowrap"> 1333 <a href="#" class="text-muted">`~tablerIcon("check")~` 0/6</a> 1334 </td> 1335 <td class="text-nowrap"> 1336 <a href="#" class="text-muted">`~tablerIcon("message")~` 1</a> 1337 </td> 1338 <td> 1339 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/002m.jpg)"></span> 1340 </td> 1341 </tr> 1342 <tr> 1343 <td class="w-1 pe-0"> 1344 <input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task" checked > 1345 </td> 1346 <td class="w-100"> 1347 <a href="#" class="text-reset">Identify the implementation team.</a> 1348 </td> 1349 <td class="text-nowrap text-muted">`~tablerIcon("calendar")~` January 01, 2019 1350 </td> 1351 <td class="text-nowrap"> 1352 <a href="#" class="text-muted">`~tablerIcon("check")~` 6/10 1353 </a> 1354 </td> 1355 <td class="text-nowrap"> 1356 <a href="#" class="text-muted">`~tablerIcon("message")~` 12</a> 1357 </td> 1358 <td> 1359 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/003m.jpg)"></span> 1360 </td> 1361 </tr> 1362 <tr> 1363 <td class="w-1 pe-0"> 1364 <input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task" > 1365 </td> 1366 <td class="w-100"> 1367 <a href="#" class="text-reset">Define users and workflow</a> 1368 </td> 1369 <td class="text-nowrap text-muted">`~tablerIcon("calendar")~` January 01, 2019</td> 1370 <td class="text-nowrap"> 1371 <a href="#" class="text-muted">`~tablerIcon("check")~` 3/7</a> 1372 </td> 1373 <td class="text-nowrap"> 1374 <a href="#" class="text-muted">`~tablerIcon("message")~` 5</a> 1375 </td> 1376 <td> 1377 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000f.jpg)"></span> 1378 </td> 1379 </tr> 1380 <tr> 1381 <td class="w-1 pe-0"> 1382 <input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task" checked > 1383 </td> 1384 <td class="w-100"> 1385 <a href="#" class="text-reset">Check Pull Requests</a> 1386 </td> 1387 <td class="text-nowrap text-muted">`~tablerIcon("calendar")~` January 01, 2019 1388 </td> 1389 <td class="text-nowrap"> 1390 <a href="#" class="text-muted">`~tablerIcon("check")~` 2/9 1391 </a> 1392 </td> 1393 <td class="text-nowrap"> 1394 <a href="#" class="text-muted">`~tablerIcon("message")~` 3</a> 1395 </td> 1396 <td> 1397 <span class="avatar avatar-sm" style="background-image: url(./static/avatars/001f.jpg)"></span> 1398 </td> 1399 </tr> 1400 </table> 1401 </div> 1402 </div> 1403 </div> 1404 <div class="col-12"> 1405 <div class="card"> 1406 <div class="card-header"> 1407 <h3 class="card-title">Invoices</h3> 1408 </div> 1409 <div class="card-body border-bottom py-3"> 1410 <div class="d-flex"> 1411 <div class="text-muted"> 1412 Show 1413 <div class="mx-2 d-inline-block"> 1414 <input type="text" class="form-control form-control-sm" value="8" size="3" aria-label="Invoices count"> 1415 </div> 1416 entries 1417 </div> 1418 <div class="ms-auto text-muted"> 1419 Search: 1420 <div class="ms-2 d-inline-block"> 1421 <input type="text" class="form-control form-control-sm" aria-label="Search invoice"> 1422 </div> 1423 </div> 1424 </div> 1425 </div> 1426 <div class="table-responsive"> 1427 <table class="table card-table table-vcenter text-nowrap datatable"> 1428 <thead> 1429 <tr> 1430 <th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices"></th> 1431 <th class="w-1">No. `~tablerIcon("chevron-up")~`</th> 1432 <th>Invoice Subject</th> 1433 <th>Client</th> 1434 <th>VAT No.</th> 1435 <th>Created</th> 1436 <th>Status</th> 1437 <th>Price</th> 1438 <th></th> 1439 </tr> 1440 </thead> 1441 <tbody> 1442 <tr> 1443 <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td> 1444 <td><span class="text-muted">001401</span></td> 1445 <td><a href="invoice.html" class="text-reset" tabindex="-1">Design Works</a></td> 1446 <td> 1447 <span class="flag flag-country-us"></span> 1448 Carlson Limited 1449 </td> 1450 <td> 1451 87956621 1452 </td> 1453 <td> 1454 15 Dec 2017 1455 </td> 1456 <td> 1457 <span class="badge bg-success me-1"></span> Paid 1458 </td> 1459 <td>$887</td> 1460 <td class="text-end"> 1461 <span class="dropdown"> 1462 <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button> 1463 <div class="dropdown-menu dropdown-menu-end"> 1464 <a class="dropdown-item" href="#"> 1465 Action 1466 </a> 1467 <a class="dropdown-item" href="#"> 1468 Another action 1469 </a> 1470 </div> 1471 </span> 1472 </td> 1473 </tr> 1474 <tr> 1475 <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td> 1476 <td><span class="text-muted">001402</span></td> 1477 <td><a href="invoice.html" class="text-reset" tabindex="-1">UX Wireframes</a></td> 1478 <td> 1479 <span class="flag flag-country-gb"></span> 1480 Adobe 1481 </td> 1482 <td> 1483 87956421 1484 </td> 1485 <td> 1486 12 Apr 2017 1487 </td> 1488 <td> 1489 <span class="badge bg-warning me-1"></span> Pending 1490 </td> 1491 <td>$1200</td> 1492 <td class="text-end"> 1493 <span class="dropdown"> 1494 <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button> 1495 <div class="dropdown-menu dropdown-menu-end"> 1496 <a class="dropdown-item" href="#"> 1497 Action 1498 </a> 1499 <a class="dropdown-item" href="#"> 1500 Another action 1501 </a> 1502 </div> 1503 </span> 1504 </td> 1505 </tr> 1506 <tr> 1507 <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td> 1508 <td><span class="text-muted">001403</span></td> 1509 <td><a href="invoice.html" class="text-reset" tabindex="-1">New Dashboard</a></td> 1510 <td> 1511 <span class="flag flag-country-de"></span> 1512 Bluewolf 1513 </td> 1514 <td> 1515 87952621 1516 </td> 1517 <td> 1518 23 Oct 2017 1519 </td> 1520 <td> 1521 <span class="badge bg-warning me-1"></span> Pending 1522 </td> 1523 <td>$534</td> 1524 <td class="text-end"> 1525 <span class="dropdown"> 1526 <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button> 1527 <div class="dropdown-menu dropdown-menu-end"> 1528 <a class="dropdown-item" href="#"> 1529 Action 1530 </a> 1531 <a class="dropdown-item" href="#"> 1532 Another action 1533 </a> 1534 </div> 1535 </span> 1536 </td> 1537 </tr> 1538 <tr> 1539 <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td> 1540 <td><span class="text-muted">001404</span></td> 1541 <td><a href="invoice.html" class="text-reset" tabindex="-1">Landing Page</a></td> 1542 <td> 1543 <span class="flag flag-country-br"></span> 1544 Salesforce 1545 </td> 1546 <td> 1547 87953421 1548 </td> 1549 <td> 1550 2 Sep 2017 1551 </td> 1552 <td> 1553 <span class="badge bg-secondary me-1"></span> Due in 2 Weeks 1554 </td> 1555 <td>$1500</td> 1556 <td class="text-end"> 1557 <span class="dropdown"> 1558 <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button> 1559 <div class="dropdown-menu dropdown-menu-end"> 1560 <a class="dropdown-item" href="#"> 1561 Action 1562 </a> 1563 <a class="dropdown-item" href="#"> 1564 Another action 1565 </a> 1566 </div> 1567 </span> 1568 </td> 1569 </tr> 1570 <tr> 1571 <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td> 1572 <td><span class="text-muted">001405</span></td> 1573 <td><a href="invoice.html" class="text-reset" tabindex="-1">Marketing Templates</a></td> 1574 <td> 1575 <span class="flag flag-country-pl"></span> 1576 Printic 1577 </td> 1578 <td> 1579 87956621 1580 </td> 1581 <td> 1582 29 Jan 2018 1583 </td> 1584 <td> 1585 <span class="badge bg-danger me-1"></span> Paid Today 1586 </td> 1587 <td>$648</td> 1588 <td class="text-end"> 1589 <span class="dropdown"> 1590 <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button> 1591 <div class="dropdown-menu dropdown-menu-end"> 1592 <a class="dropdown-item" href="#"> 1593 Action 1594 </a> 1595 <a class="dropdown-item" href="#"> 1596 Another action 1597 </a> 1598 </div> 1599 </span> 1600 </td> 1601 </tr> 1602 <tr> 1603 <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td> 1604 <td><span class="text-muted">001406</span></td> 1605 <td><a href="invoice.html" class="text-reset" tabindex="-1">Sales Presentation</a></td> 1606 <td> 1607 <span class="flag flag-country-br"></span> 1608 Tabdaq 1609 </td> 1610 <td> 1611 87956621 1612 </td> 1613 <td> 1614 4 Feb 2018 1615 </td> 1616 <td> 1617 <span class="badge bg-secondary me-1"></span> Due in 3 Weeks 1618 </td> 1619 <td>$300</td> 1620 <td class="text-end"> 1621 <span class="dropdown"> 1622 <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button> 1623 <div class="dropdown-menu dropdown-menu-end"> 1624 <a class="dropdown-item" href="#"> 1625 Action 1626 </a> 1627 <a class="dropdown-item" href="#"> 1628 Another action 1629 </a> 1630 </div> 1631 </span> 1632 </td> 1633 </tr> 1634 <tr> 1635 <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td> 1636 <td><span class="text-muted">001407</span></td> 1637 <td><a href="invoice.html" class="text-reset" tabindex="-1">Logo & Print</a></td> 1638 <td> 1639 <span class="flag flag-country-us"></span> 1640 Apple 1641 </td> 1642 <td> 1643 87956621 1644 </td> 1645 <td> 1646 22 Mar 2018 1647 </td> 1648 <td> 1649 <span class="badge bg-success me-1"></span> Paid Today 1650 </td> 1651 <td>$2500</td> 1652 <td class="text-end"> 1653 <span class="dropdown"> 1654 <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button> 1655 <div class="dropdown-menu dropdown-menu-end"> 1656 <a class="dropdown-item" href="#"> 1657 Action 1658 </a> 1659 <a class="dropdown-item" href="#"> 1660 Another action 1661 </a> 1662 </div> 1663 </span> 1664 </td> 1665 </tr> 1666 <tr> 1667 <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td> 1668 <td><span class="text-muted">001408</span></td> 1669 <td><a href="invoice.html" class="text-reset" tabindex="-1">Icons</a></td> 1670 <td> 1671 <span class="flag flag-country-pl"></span> 1672 Tookapic 1673 </td> 1674 <td> 1675 87956621 1676 </td> 1677 <td> 1678 13 May 2018 1679 </td> 1680 <td> 1681 <span class="badge bg-success me-1"></span> Paid Today 1682 </td> 1683 <td>$940</td> 1684 <td class="text-end"> 1685 <span class="dropdown"> 1686 <button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">Actions</button> 1687 <div class="dropdown-menu dropdown-menu-end"> 1688 <a class="dropdown-item" href="#"> 1689 Action 1690 </a> 1691 <a class="dropdown-item" href="#"> 1692 Another action 1693 </a> 1694 </div> 1695 </span> 1696 </td> 1697 </tr> 1698 </tbody> 1699 </table> 1700 </div> 1701 <div class="card-footer d-flex align-items-center"> 1702 <p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p> 1703 <ul class="pagination m-0 ms-auto"> 1704 <li class="page-item disabled"> 1705 <a class="page-link" href="#" tabindex="-1" aria-disabled="true">`~tablerIcon("chevron-left")~` prev 1706 </a> 1707 </li> 1708 <li class="page-item"><a class="page-link" href="#">1</a></li> 1709 <li class="page-item active"><a class="page-link" href="#">2</a></li> 1710 <li class="page-item"><a class="page-link" href="#">3</a></li> 1711 <li class="page-item"><a class="page-link" href="#">4</a></li> 1712 <li class="page-item"><a class="page-link" href="#">5</a></li> 1713 <li class="page-item"> 1714 <a class="page-link" href="#"> 1715 next <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right --> 1716 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 6 15 12 9 18" /></svg> 1717 </a> 1718 </li> 1719 </ul> 1720 </div> 1721 </div> 1722 </div> 1723 </div> 1724 </div> 1725 </div> 1726 <footer class="footer footer-transparent d-print-none"> 1727 <div class="container"> 1728 <div class="row text-center align-items-center flex-row-reverse"> 1729 <div class="col-lg-auto ms-lg-auto"> 1730 <ul class="list-inline list-inline-dots mb-0"> 1731 <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li> 1732 <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li> 1733 <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li> 1734 <li class="list-inline-item"> 1735 <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener"> 1736 <!-- Download SVG icon from http://tabler-icons.io/i/heart --> 1737 <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg> 1738 Sponsor 1739 </a> 1740 </li> 1741 </ul> 1742 </div> 1743 <div class="col-12 col-lg-auto mt-3 mt-lg-0"> 1744 <ul class="list-inline list-inline-dots mb-0"> 1745 <li class="list-inline-item"> 1746 Copyright © 2021 1747 <a href="." class="link-secondary">Tabler</a>. 1748 All rights reserved. 1749 </li> 1750 <li class="list-inline-item"> 1751 <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta2</a> 1752 </li> 1753 </ul> 1754 </div> 1755 </div> 1756 </div> 1757 </footer> 1758 </div> 1759 </div> 1760 <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true"> 1761 <div class="modal-dialog modal-lg" role="document"> 1762 <div class="modal-content"> 1763 <div class="modal-header"> 1764 <h5 class="modal-title">New report</h5> 1765 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1766 </div> 1767 <div class="modal-body"> 1768 <div class="mb-3"> 1769 <label class="form-label">Name</label> 1770 <input type="text" class="form-control" name="example-text-input" placeholder="Your report name"> 1771 </div> 1772 <label class="form-label">Report type</label> 1773 <div class="form-selectgroup-boxes row mb-3"> 1774 <div class="col-lg-6"> 1775 <label class="form-selectgroup-item"> 1776 <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked> 1777 <span class="form-selectgroup-label d-flex align-items-center p-3"> 1778 <span class="me-3"> 1779 <span class="form-selectgroup-check"></span> 1780 </span> 1781 <span class="form-selectgroup-label-content"> 1782 <span class="form-selectgroup-title strong mb-1">Simple</span> 1783 <span class="d-block text-muted">Provide only basic data needed for the report</span> 1784 </span> 1785 </span> 1786 </label> 1787 </div> 1788 <div class="col-lg-6"> 1789 <label class="form-selectgroup-item"> 1790 <input type="radio" name="report-type" value="1" class="form-selectgroup-input"> 1791 <span class="form-selectgroup-label d-flex align-items-center p-3"> 1792 <span class="me-3"> 1793 <span class="form-selectgroup-check"></span> 1794 </span> 1795 <span class="form-selectgroup-label-content"> 1796 <span class="form-selectgroup-title strong mb-1">Advanced</span> 1797 <span class="d-block text-muted">Insert charts and additional advanced analyses to be inserted in the report</span> 1798 </span> 1799 </span> 1800 </label> 1801 </div> 1802 </div> 1803 <div class="row"> 1804 <div class="col-lg-8"> 1805 <div class="mb-3"> 1806 <label class="form-label">Report url</label> 1807 <div class="input-group input-group-flat"> 1808 <span class="input-group-text"> 1809 https://tabler.io/reports/ 1810 </span> 1811 <input type="text" class="form-control ps-0" value="report-01" autocomplete="off"> 1812 </div> 1813 </div> 1814 </div> 1815 <div class="col-lg-4"> 1816 <div class="mb-3"> 1817 <label class="form-label">Visibility</label> 1818 <select class="form-select"> 1819 <option value="1" selected>Private</option> 1820 <option value="2">Public</option> 1821 <option value="3">Hidden</option> 1822 </select> 1823 </div> 1824 </div> 1825 </div> 1826 </div> 1827 <div class="modal-body"> 1828 <div class="row"> 1829 <div class="col-lg-6"> 1830 <div class="mb-3"> 1831 <label class="form-label">Client name</label> 1832 <input type="text" class="form-control"> 1833 </div> 1834 </div> 1835 <div class="col-lg-6"> 1836 <div class="mb-3"> 1837 <label class="form-label">Reporting period</label> 1838 <input type="date" class="form-control"> 1839 </div> 1840 </div> 1841 <div class="col-lg-12"> 1842 <div> 1843 <label class="form-label">Additional information</label> 1844 <textarea class="form-control" rows="3"></textarea> 1845 </div> 1846 </div> 1847 </div> 1848 </div> 1849 <div class="modal-footer"> 1850 <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal"> 1851 Cancel 1852 </a> 1853 <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"> 1854 <!-- Download SVG icon from http://tabler-icons.io/i/plus --> 1855 <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg> 1856 Create new report 1857 </a> 1858 </div> 1859 </div> 1860 </div>`); 1861 /* <!-- Libs JS --> 1862 <!-- Tabler Core --> 1863 <script> 1864 // @formatter:off 1865 document.addEventListener("DOMContentLoaded", function () { 1866 window.ApexCharts && (new ApexCharts(document.getElementById('chart-revenue-bg'), { 1867 chart: { 1868 type: "area", 1869 fontFamily: 'inherit', 1870 height: 40.0, 1871 sparkline: { 1872 enabled: true 1873 }, 1874 animations: { 1875 enabled: false 1876 }, 1877 }, 1878 dataLabels: { 1879 enabled: false, 1880 }, 1881 fill: { 1882 opacity: .16, 1883 type: 'solid' 1884 }, 1885 stroke: { 1886 width: 2, 1887 lineCap: "round", 1888 curve: "smooth", 1889 }, 1890 series: [{ 1891 name: "Profits", 1892 data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67] 1893 }], 1894 grid: { 1895 strokeDashArray: 4, 1896 }, 1897 xaxis: { 1898 labels: { 1899 padding: 0, 1900 }, 1901 tooltip: { 1902 enabled: false 1903 }, 1904 axisBorder: { 1905 show: false, 1906 }, 1907 type: 'datetime', 1908 }, 1909 yaxis: { 1910 labels: { 1911 padding: 4 1912 }, 1913 }, 1914 labels: [ 1915 '2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19' 1916 ], 1917 colors: ["#206bc4"], 1918 legend: { 1919 show: false, 1920 }, 1921 })).render(); 1922 }); 1923 // @formatter:on 1924 </script> 1925 <script> 1926 // @formatter:off 1927 document.addEventListener("DOMContentLoaded", function () { 1928 window.ApexCharts && (new ApexCharts(document.getElementById('chart-new-clients'), { 1929 chart: { 1930 type: "line", 1931 fontFamily: 'inherit', 1932 height: 40.0, 1933 sparkline: { 1934 enabled: true 1935 }, 1936 animations: { 1937 enabled: false 1938 }, 1939 }, 1940 fill: { 1941 opacity: 1, 1942 }, 1943 stroke: { 1944 width: [2, 1], 1945 dashArray: [0, 3], 1946 lineCap: "round", 1947 curve: "smooth", 1948 }, 1949 series: [{ 1950 name: "May", 1951 data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67] 1952 },{ 1953 name: "April", 1954 data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37] 1955 }], 1956 grid: { 1957 strokeDashArray: 4, 1958 }, 1959 xaxis: { 1960 labels: { 1961 padding: 0, 1962 }, 1963 tooltip: { 1964 enabled: false 1965 }, 1966 type: 'datetime', 1967 }, 1968 yaxis: { 1969 labels: { 1970 padding: 4 1971 }, 1972 }, 1973 labels: [ 1974 '2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19' 1975 ], 1976 colors: ["#206bc4", "#a8aeb7"], 1977 legend: { 1978 show: false, 1979 }, 1980 })).render(); 1981 }); 1982 // @formatter:on 1983 </script> 1984 <script> 1985 // @formatter:off 1986 document.addEventListener("DOMContentLoaded", function () { 1987 window.ApexCharts && (new ApexCharts(document.getElementById('chart-active-users'), { 1988 chart: { 1989 type: "bar", 1990 fontFamily: 'inherit', 1991 height: 40.0, 1992 sparkline: { 1993 enabled: true 1994 }, 1995 animations: { 1996 enabled: false 1997 }, 1998 }, 1999 plotOptions: { 2000 bar: { 2001 columnWidth: '50%', 2002 } 2003 }, 2004 dataLabels: { 2005 enabled: false, 2006 }, 2007 fill: { 2008 opacity: 1, 2009 }, 2010 series: [{ 2011 name: "Profits", 2012 data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67] 2013 }], 2014 grid: { 2015 strokeDashArray: 4, 2016 }, 2017 xaxis: { 2018 labels: { 2019 padding: 0, 2020 }, 2021 tooltip: { 2022 enabled: false 2023 }, 2024 axisBorder: { 2025 show: false, 2026 }, 2027 type: 'datetime', 2028 }, 2029 yaxis: { 2030 labels: { 2031 padding: 4 2032 }, 2033 }, 2034 labels: [ 2035 '2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19' 2036 ], 2037 colors: ["#206bc4"], 2038 legend: { 2039 show: false, 2040 }, 2041 })).render(); 2042 }); 2043 // @formatter:on 2044 </script> 2045 <script> 2046 // @formatter:off 2047 document.addEventListener("DOMContentLoaded", function () { 2048 window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), { 2049 chart: { 2050 type: "bar", 2051 fontFamily: 'inherit', 2052 height: 240, 2053 parentHeightOffset: 0, 2054 toolbar: { 2055 show: false, 2056 }, 2057 animations: { 2058 enabled: false 2059 }, 2060 stacked: true, 2061 }, 2062 plotOptions: { 2063 bar: { 2064 columnWidth: '50%', 2065 } 2066 }, 2067 dataLabels: { 2068 enabled: false, 2069 }, 2070 fill: { 2071 opacity: 1, 2072 }, 2073 series: [{ 2074 name: "Web", 2075 data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6] 2076 },{ 2077 name: "Social", 2078 data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0] 2079 },{ 2080 name: "Other", 2081 data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6] 2082 }], 2083 grid: { 2084 padding: { 2085 top: -20, 2086 right: 0, 2087 left: -4, 2088 bottom: -4 2089 }, 2090 strokeDashArray: 4, 2091 xaxis: { 2092 lines: { 2093 show: true 2094 } 2095 }, 2096 }, 2097 xaxis: { 2098 labels: { 2099 padding: 0, 2100 }, 2101 tooltip: { 2102 enabled: false 2103 }, 2104 axisBorder: { 2105 show: false, 2106 }, 2107 type: 'datetime', 2108 }, 2109 yaxis: { 2110 labels: { 2111 padding: 4 2112 }, 2113 }, 2114 labels: [ 2115 '2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26' 2116 ], 2117 colors: ["#206bc4", "#79a6dc", "#bfe399"], 2118 legend: { 2119 show: false, 2120 }, 2121 })).render(); 2122 }); 2123 // @formatter:on 2124 </script> 2125 <script> 2126 // @formatter:off 2127 document.addEventListener("DOMContentLoaded", function () { 2128 window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-activity'), { 2129 chart: { 2130 type: "radialBar", 2131 fontFamily: 'inherit', 2132 height: 40, 2133 width: 40, 2134 animations: { 2135 enabled: false 2136 }, 2137 sparkline: { 2138 enabled: true 2139 }, 2140 }, 2141 tooltip: { 2142 enabled: false, 2143 }, 2144 plotOptions: { 2145 radialBar: { 2146 hollow: { 2147 margin: 0, 2148 size: '75%' 2149 }, 2150 track: { 2151 margin: 0 2152 }, 2153 dataLabels: { 2154 show: false 2155 } 2156 } 2157 }, 2158 colors: ["#206bc4"], 2159 series: [35], 2160 })).render(); 2161 }); 2162 // @formatter:on 2163 </script> 2164 <script> 2165 // @formatter:off 2166 document.addEventListener("DOMContentLoaded", function () { 2167 window.ApexCharts && (new ApexCharts(document.getElementById('chart-development-activity'), { 2168 chart: { 2169 type: "area", 2170 fontFamily: 'inherit', 2171 height: 192, 2172 sparkline: { 2173 enabled: true 2174 }, 2175 animations: { 2176 enabled: false 2177 }, 2178 }, 2179 dataLabels: { 2180 enabled: false, 2181 }, 2182 fill: { 2183 opacity: .16, 2184 type: 'solid' 2185 }, 2186 stroke: { 2187 width: 2, 2188 lineCap: "round", 2189 curve: "smooth", 2190 }, 2191 series: [{ 2192 name: "Purchases", 2193 data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70] 2194 }], 2195 grid: { 2196 strokeDashArray: 4, 2197 }, 2198 xaxis: { 2199 labels: { 2200 padding: 0, 2201 }, 2202 tooltip: { 2203 enabled: false 2204 }, 2205 axisBorder: { 2206 show: false, 2207 }, 2208 type: 'datetime', 2209 }, 2210 yaxis: { 2211 labels: { 2212 padding: 4 2213 }, 2214 }, 2215 labels: [ 2216 '2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19' 2217 ], 2218 colors: ["#206bc4"], 2219 legend: { 2220 show: false, 2221 }, 2222 point: { 2223 show: false 2224 }, 2225 })).render(); 2226 }); 2227 // @formatter:on 2228 </script> 2229 <script> 2230 // @formatter:off 2231 document.addEventListener("DOMContentLoaded", function () { 2232 window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-1'), { 2233 chart: { 2234 type: "line", 2235 fontFamily: 'inherit', 2236 height: 24, 2237 animations: { 2238 enabled: false 2239 }, 2240 sparkline: { 2241 enabled: true 2242 }, 2243 }, 2244 tooltip: { 2245 enabled: false, 2246 }, 2247 stroke: { 2248 width: 2, 2249 lineCap: "round", 2250 }, 2251 series: [{ 2252 color: "#206bc4", 2253 data: [17, 24, 20, 10, 5, 1, 4, 18, 13] 2254 }], 2255 })).render(); 2256 }); 2257 // @formatter:on 2258 </script> 2259 <script> 2260 // @formatter:off 2261 document.addEventListener("DOMContentLoaded", function () { 2262 window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-2'), { 2263 chart: { 2264 type: "line", 2265 fontFamily: 'inherit', 2266 height: 24, 2267 animations: { 2268 enabled: false 2269 }, 2270 sparkline: { 2271 enabled: true 2272 }, 2273 }, 2274 tooltip: { 2275 enabled: false, 2276 }, 2277 stroke: { 2278 width: 2, 2279 lineCap: "round", 2280 }, 2281 series: [{ 2282 color: "#206bc4", 2283 data: [13, 11, 19, 22, 12, 7, 14, 3, 21] 2284 }], 2285 })).render(); 2286 }); 2287 // @formatter:on 2288 </script> 2289 <script> 2290 // @formatter:off 2291 document.addEventListener("DOMContentLoaded", function () { 2292 window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-3'), { 2293 chart: { 2294 type: "line", 2295 fontFamily: 'inherit', 2296 height: 24, 2297 animations: { 2298 enabled: false 2299 }, 2300 sparkline: { 2301 enabled: true 2302 }, 2303 }, 2304 tooltip: { 2305 enabled: false, 2306 }, 2307 stroke: { 2308 width: 2, 2309 lineCap: "round", 2310 }, 2311 series: [{ 2312 color: "#206bc4", 2313 data: [10, 13, 10, 4, 17, 3, 23, 22, 19] 2314 }], 2315 })).render(); 2316 }); 2317 // @formatter:on 2318 </script> 2319 <script> 2320 // @formatter:off 2321 document.addEventListener("DOMContentLoaded", function () { 2322 window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-4'), { 2323 chart: { 2324 type: "line", 2325 fontFamily: 'inherit', 2326 height: 24, 2327 animations: { 2328 enabled: false 2329 }, 2330 sparkline: { 2331 enabled: true 2332 }, 2333 }, 2334 tooltip: { 2335 enabled: false, 2336 }, 2337 stroke: { 2338 width: 2, 2339 lineCap: "round", 2340 }, 2341 series: [{ 2342 color: "#206bc4", 2343 data: [6, 15, 13, 13, 5, 7, 17, 20, 19] 2344 }], 2345 })).render(); 2346 }); 2347 // @formatter:on 2348 </script> 2349 <script> 2350 // @formatter:off 2351 document.addEventListener("DOMContentLoaded", function () { 2352 window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-5'), { 2353 chart: { 2354 type: "line", 2355 fontFamily: 'inherit', 2356 height: 24, 2357 animations: { 2358 enabled: false 2359 }, 2360 sparkline: { 2361 enabled: true 2362 }, 2363 }, 2364 tooltip: { 2365 enabled: false, 2366 }, 2367 stroke: { 2368 width: 2, 2369 lineCap: "round", 2370 }, 2371 series: [{ 2372 color: "#206bc4", 2373 data: [2, 11, 15, 14, 21, 20, 8, 23, 18, 14] 2374 }], 2375 })).render(); 2376 }); 2377 // @formatter:on 2378 </script> 2379 <script> 2380 // @formatter:off 2381 document.addEventListener("DOMContentLoaded", function () { 2382 window.ApexCharts && (new ApexCharts(document.getElementById('sparkline-bounce-rate-6'), { 2383 chart: { 2384 type: "line", 2385 fontFamily: 'inherit', 2386 height: 24, 2387 animations: { 2388 enabled: false 2389 }, 2390 sparkline: { 2391 enabled: true 2392 }, 2393 }, 2394 tooltip: { 2395 enabled: false, 2396 }, 2397 stroke: { 2398 width: 2, 2399 lineCap: "round", 2400 }, 2401 series: [{ 2402 color: "#206bc4", 2403 data: [22, 12, 7, 14, 3, 21, 8, 23, 18, 14] 2404 }], 2405 })).render(); 2406 }); 2407 // @formatter:on 2408 </script> 2409 </body> 2410 </html>` * / 2411 } 2412 } 2413 ); 2414 } */