From ec9469332e8f08d1c6b53dd33523994306ddd5ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Sat, 29 Nov 2025 11:58:51 +0100 Subject: [PATCH] feat: Add card gradients page and gradient card components (#2554) --- .changeset/card-gradient-components.md | 6 + .changeset/card-gradients-page.md | 6 + core/scss/_props.scss | 1 + core/scss/_variables.scss | 5 +- core/scss/ui/_buttons.scss | 4 + core/scss/ui/_cards.scss | 132 +++++++++++++++--- core/scss/ui/_payments.scss | 2 +- core/scss/ui/_tables.scss | 2 + preview/pages/card-gradients.html | 97 +++++++++++++ preview/pages/charts.html | 12 +- shared/data/menu.json | 5 + shared/data/sri.json | 22 +-- shared/includes/cards/body-placeholder.html | 4 +- .../includes/cards/charts/active-users-2.html | 13 ++ .../cards/charts/social-referrals.html | 12 ++ shared/includes/cards/charts/total-users.html | 14 ++ shared/includes/cards/delete-confirm.html | 12 ++ shared/includes/cards/happy-birthday.html | 12 ++ shared/includes/cards/pricing-plan.html | 37 +++++ shared/includes/cards/profile-contact.html | 20 +++ shared/includes/cards/small-stats.html | 2 +- shared/includes/cards/stat-gradient.html | 23 +++ shared/includes/cards/storage-usage.html | 33 +++++ shared/includes/cards/store-product.html | 4 +- shared/includes/cards/success-message.html | 14 ++ shared/includes/cards/weather.html | 24 ++++ shared/includes/cards/welcome.html | 4 +- shared/includes/cards/you-win.html | 11 ++ shared/includes/layout/homepage.html | 60 +------- 29 files changed, 487 insertions(+), 106 deletions(-) create mode 100644 .changeset/card-gradient-components.md create mode 100644 .changeset/card-gradients-page.md create mode 100644 preview/pages/card-gradients.html create mode 100644 shared/includes/cards/charts/active-users-2.html create mode 100644 shared/includes/cards/charts/social-referrals.html create mode 100644 shared/includes/cards/charts/total-users.html create mode 100644 shared/includes/cards/delete-confirm.html create mode 100644 shared/includes/cards/happy-birthday.html create mode 100644 shared/includes/cards/pricing-plan.html create mode 100644 shared/includes/cards/profile-contact.html create mode 100644 shared/includes/cards/stat-gradient.html create mode 100644 shared/includes/cards/storage-usage.html create mode 100644 shared/includes/cards/success-message.html create mode 100644 shared/includes/cards/weather.html create mode 100644 shared/includes/cards/you-win.html diff --git a/.changeset/card-gradient-components.md b/.changeset/card-gradient-components.md new file mode 100644 index 000000000..c159ed0b6 --- /dev/null +++ b/.changeset/card-gradient-components.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": minor +--- + +Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds. + diff --git a/.changeset/card-gradients-page.md b/.changeset/card-gradients-page.md new file mode 100644 index 000000000..780e62164 --- /dev/null +++ b/.changeset/card-gradients-page.md @@ -0,0 +1,6 @@ +--- +"@tabler/preview": minor +--- + +Added new `card-gradients.html` page showcasing various gradient card styles and components. + diff --git a/core/scss/_props.scss b/core/scss/_props.scss index 39bee52e1..3f1a65f5f 100644 --- a/core/scss/_props.scss +++ b/core/scss/_props.scss @@ -32,6 +32,7 @@ /** Theme colors */ @each $name, $color in map.merge($theme-colors, $social-colors) { + @debug contrast-ratio($color, white), $name, $min-contrast-ratio; --#{$prefix}#{$name}: #{$color}; --#{$prefix}#{$name}-rgb: #{to-rgb($color)}; --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))}; diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index fe350da2d..f90460e6f 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -106,7 +106,7 @@ $colors: ( 'gray-dark': $gray-800, ) !default; -$min-contrast-ratio: 4.5 !default; +$min-contrast-ratio: 2 !default; $color-contrast-dark: $black !default; $color-contrast-light: $white !default; @@ -444,7 +444,7 @@ $headings-font-style: null !default; $headings-line-height: 1.2 !default; $headings-font-weight: var(--#{$prefix}font-weight-semibold) !default; $headings-margin-bottom: var(--#{$prefix}spacer) !default; -$headings-color: inherit !default; +$headings-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white)) !default; $font-weights: ( 'light': $font-weight-light, @@ -556,7 +556,6 @@ $zindex-levels: ( 3: 3, ) !default; -$min-contrast-ratio: 1.5 !default; $text-secondary-opacity: 0.7 !default; $text-secondary-light-opacity: 0.4 !default; $text-secondary-dark-opacity: 0.8 !default; diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index 7dc82a2e3..f602313be 100644 --- a/core/scss/ui/_buttons.scss +++ b/core/scss/ui/_buttons.scss @@ -207,6 +207,10 @@ @include elements-list; } +.btn-list-center { + justify-content: center; +} + // // Button floating // diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index d48fe84ff..1da6fc608 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -1,3 +1,21 @@ +@use 'sass:map'; + +@property --tblr-card-gradient-direction { + syntax: ''; + inherits: true; + initial-value: 180deg; +} + +@keyframes gradient-animation { + 0% { + --#{$prefix}card-gradient-direction: 180deg; + } + + 100% { + --#{$prefix}card-gradient-direction: 540deg; + } +} + .card { @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out); @@ -22,6 +40,7 @@ // Card borderless .card-borderless { + &, .card-header, .card-footer { @@ -122,7 +141,7 @@ background: $active-bg; } - & + & { + &+& { border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); } } @@ -137,8 +156,8 @@ Stacked card &:after { position: absolute; top: calc(-1 * var(--#{$prefix}card-stacked-offset)); - inset-inline-end: var(--#{$prefix}card-stacked-offset); - inset-inline-start: var(--#{$prefix}card-stacked-offset); + inset-inline-end: var(--#{$prefix}card-stacked-offset); + inset-inline-start: var(--#{$prefix}card-stacked-offset); height: var(--#{$prefix}card-stacked-offset); content: ''; background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); @@ -155,9 +174,9 @@ Stacked card &:before { position: absolute; top: 0; - inset-inline-end: 0; + inset-inline-end: 0; bottom: 0; - inset-inline-start: 0; + inset-inline-start: 0; content: ''; background: rgba($dark, 0.48); } @@ -287,7 +306,7 @@ Stacked card margin: 0 0 1rem; font-size: $h3-font-size; font-weight: var(--#{$prefix}font-weight-medium); - color: $headings-color; + color: var(--#{$prefix}heading-color); line-height: 1.5rem; @at-root a#{&}:hover { @@ -321,17 +340,17 @@ Stacked card margin-bottom: 0; } - .card-sm > & { + .card-sm>& { padding: 1rem; } - .card-md > & { + .card-md>& { @include media-breakpoint-up(md) { padding: 2.5rem; } } - .card-lg > & { + .card-lg>& { @include media-breakpoint-up(md) { padding: 2rem; } @@ -345,7 +364,7 @@ Stacked card padding: 0; } - & + & { + &+& { border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); } } @@ -408,6 +427,7 @@ Card table margin-bottom: 0 !important; tr { + td, th { &:first-child { @@ -436,11 +456,11 @@ Card table tfoot { &:last-child { tr:last-child { - > *:last-child { + >*:last-child { border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width)); } - > *:first-child { + >*:first-child { border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width)); } } @@ -476,7 +496,7 @@ Card table } } - .card-body + & { + .card-body+& { border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color); } } @@ -521,7 +541,7 @@ Card avatar Card list group */ .card-list-group { - .card-body + & { + .card-body+& { border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); } @@ -580,7 +600,7 @@ Card list group } } - + .nav-item { + +.nav-item { margin-inline-start: calc(-1 * #{$card-border-width}); } } @@ -620,7 +640,7 @@ Card list group border-end-start-radius: 0; } - .nav-tabs + .tab-content .card { + .nav-tabs+.tab-content .card { border-end-start-radius: var(--#{$prefix}card-border-radius); border-start-start-radius: 0; } @@ -633,3 +653,83 @@ Card note --#{$prefix}card-bg: #fff7dd; --#{$prefix}card-border-color: #fff1c9; } + + +/** +Card gradient +*/ +.card-gradient { + --#{$prefix}card-gradient-direction: 180deg; + --#{$prefix}card-gradient-opacity: 86%; + --#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary); + + background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box, + linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box, + linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box; + +} + +@each $name, $color in map.merge($colors, $theme-colors) { + .card-gradient-#{$name} { + --#{$prefix}card-gradient: var(--tblr-#{$name}), var(--tblr-#{$name}); + } +} + +.card-gradient-rainbow { + --#{$prefix}card-gradient: #78C5D6, + #459BA8, + #79C267, + #C5D647, + #F5D63D, + #F08B33, + #E868A2, + #BE61A5; +} + +.card-gradient-sun { + --#{$prefix}card-gradient: #fd1d1d, #fcb045; +} + +.card-gradient-snow { + --#{$prefix}card-gradient: #333, #e9ecef; +} + +.card-gradient-ocean { + --#{$prefix}card-gradient: #1CB5E0, #000851; +} + +.card-gradient-mellow { + --#{$prefix}card-gradient: #f8ff00, #3ad59f; +} + +.card-gradient-disco { + --#{$prefix}card-gradient: #FC466B, #3F5EFB; +} + +.card-gradient-psychedelic { + --#{$prefix}card-gradient: #fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75; +} + +.card-gradient-love { + --#{$prefix}card-gradient: #f235e6, #bc0707; +} + +.card-gradient-gold { + --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700; +} + +.card-gradient-animated { + animation: gradient-animation 15s linear infinite; +} + +.card-gradient-bottom { + --#{$prefix}card-gradient-direction: 0deg; +} + +.card-gradient-end { + --#{$prefix}card-gradient-direction: 270deg; +} + +.card-gradient-start { + --#{$prefix}card-gradient-direction: 90deg; +} \ No newline at end of file diff --git a/core/scss/ui/_payments.scss b/core/scss/ui/_payments.scss index b0ed84610..d1d7a6623 100644 --- a/core/scss/ui/_payments.scss +++ b/core/scss/ui/_payments.scss @@ -9,7 +9,7 @@ vertical-align: bottom; font-style: normal; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); - border-radius: 2px; + border-radius: var(--#{config.$prefix}border-radius); } @each $payment in config.$payment-providers { diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss index 4c5316917..7a4d2da18 100644 --- a/core/scss/ui/_tables.scss +++ b/core/scss/ui/_tables.scss @@ -1,4 +1,6 @@ .table { + font: inherit; + thead { th { background: $table-th-bg; diff --git a/preview/pages/card-gradients.html b/preview/pages/card-gradients.html new file mode 100644 index 000000000..c0634c649 --- /dev/null +++ b/preview/pages/card-gradients.html @@ -0,0 +1,97 @@ +--- +title: Card Gradients +page-header: Card Gradients +page-menu: base.cards.gradients +layout: default +permalink: card-gradients.html +page-libs: [apexcharts] +--- + +{% assign gradients = 'sunset,rainbow,ocean,mellow,disco,psychedelic' | split: ',' %} + +
+
+
+
+ {% include "cards/welcome.html" %} +
+
+
+
+
+
+ {% include "cards/delete-confirm.html" %} +
+
+ {% include "cards/success-message.html" %} +
+
+
+
+
+
+ {% include "cards/pricing-plan.html" %} +
+
+ {% include "cards/stat-gradient.html" title="Earned" value="$2,847" icon="credit-card" color="success" + progress=75 %} +
+
+ {% include "cards/stat-gradient.html" title="Pending Orders" value="47" icon="clock" color="yellow" + progress=38 %} +
+
+ {% include "cards/stat-gradient.html" title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red" + progress=8 %} +
+
+
+
+
+
+
+
+
+
+ {% include "cards/happy-birthday.html" %} +
+
+ {% include "cards/you-win.html" %} +
+ +
+
+
+
+
+ {% include "cards/weather.html" city="Warsaw, PL" temperature=3 color="rain" icon="cloud-rain" + description="Cloudy morning" %} +
+
+ {% include "cards/weather.html" city="Oslo, NO" temperature="-5" color="snow" icon="cloud" + description="Snowy day" %} +
+
+ {% include "cards/weather.html" city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny + day" %} +
+
+ {% include "cards/profile-contact.html" person=people[6] %} +
+
+ {% include "cards/small-stats.html" chart-type="line" chart-data="11,16,13,20,17,24,19,23,16,20,13,17,11,19" + color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" %} +
+
+ {% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" title="$5,256.99" + description="Revenue last 30 days" description-value="+4%" class="card-gradient card-gradient-end + card-gradient-green" %} +
+
+ {% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" title="342" description="Sales + last 30 days" description-value="-4.3%" description-value-color="red" class="card-gradient card-gradient-end + card-gradient-red" %} +
+
+
+
\ No newline at end of file diff --git a/preview/pages/charts.html b/preview/pages/charts.html index f2362399d..8e0e8d94a 100644 --- a/preview/pages/charts.html +++ b/preview/pages/charts.html @@ -13,17 +13,7 @@ permalink: charts.html
-
-
-
-

Social referrals

-
- {% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %} -
-
- {% include "ui/chart.html" chart-id="social-referrals" legend=true %} -
-
+ {% include "cards/charts/social-referrals.html" %}
diff --git a/shared/data/menu.json b/shared/data/menu.json index 3a481c23b..93206751e 100644 --- a/shared/data/menu.json +++ b/shared/data/menu.json @@ -105,6 +105,11 @@ "title": "Card actions", "badge": "New" }, + "gradients": { + "url": "card-gradients.html", + "title": "Card gradients", + "badge": "New" + }, "masonry": { "url": "cards-masonry.html", "title": "Cards Masonry" diff --git a/shared/data/sri.json b/shared/data/sri.json index 684215599..c1fd18cef 100644 --- a/shared/data/sri.json +++ b/shared/data/sri.json @@ -1,21 +1,21 @@ { - "css": "sha384-b08Yxo9kzlsLLcHA4bMBkC8EAIBeP3G8rhhIT584owzLn88bcWJkSVtGZMc78Rax", - "css-rtl": "sha384-EVH/sV9+QVa/y7Vl1JFsVYjru0/gKkqDf8zBqdfu2R8t84BwCBeV7jsu7kQ93abg", - "css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9", - "css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC", - "css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se", - "css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6", + "css": "sha384-8CTJ1aEYI+cbgqgYVub8YVfKOnKa/men0DZ4qZqmwvgzNGG1/anW0L4o7/8G171h", + "css-rtl": "sha384-c4pkMIjCDw9LwOOYLU2NkDMg4rsDpqEj+xqDXhrTVRtDiAvk2083ZRDsxMOl9Qpw", + "css-flags": "sha384-Z+NVuLczJm4wqbXhRrVWeCqKJzY3VmwtOZTMpek7tjmZJU9Yqu+6F7aPT0KDBTvS", + "css-flags-rtl": "sha384-9zdt+TQAk+aAdQAyWQ158584Cr9KDLcgJMDG5iDvrYE2Ha/sZdG6l3FcjWyHAFx8", + "css-marketing": "sha384-O1oTT08rQgRZEq0WgPfYFyGadtTu90+tM9zTv+9yYv1qgNw8ldbGTr6levIIXXNl", + "css-marketing-rtl": "sha384-jU6iDpXSyHHkiqBvDtPRuDWr+4ccgr3SNjNYMN0FtyaDaIi4Qe6WNn5Ir1+jr/aZ", "css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9", "css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+", "css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC", "css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl", - "css-props": "sha384-HpzBfAj1xJcNLtdedYZunJBHqgdO12KqrCrc6/7pmKDiP8YmUF71cm+iGBtVawWM", - "css-props-rtl": "sha384-/vKK+yuQsAI8lJmR4uothydKQAHFK+fp1QrbJnfk2deAzII9WUj3h5rXUxZPyUAo", + "css-props": "sha384-41GCSlvwCdfsb6AHZx7QXQq17CAqXvvToJCecMxqvUUsap3aYqIvR3ARxb5ug/o7", + "css-props-rtl": "sha384-JgFdeK5dAxT/nZPtUTt3cnBng9TLxoF6ZetumffFIzqF/4XXLEQIemFDshpleF/f", "css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk", "css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF", - "css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb", - "css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv", - "js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk", + "css-vendors-rtl": "sha384-fHhTRXlGYaUjLAbSnADjVs2DrSBSKbnTDhjiOgVT0+aWDjKbwtPZU6y54bLo2FCm", + "css-vendors": "sha384-9R1luLy+gN6Ob3LEWsGiGo3nyPVDzVGyEBcDlat6sH2lF7zHZhnpDILTEgEvalsh", + "js": "sha384-dUqGQ2Iu2WGMnF+glqmZxV78vxbRuwGaM3diaq+Wp0a6mek1k5samXVe60XqZcTT", "js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5", "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA", "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z" diff --git a/shared/includes/cards/body-placeholder.html b/shared/includes/cards/body-placeholder.html index 79c751c33..af2c1810e 100644 --- a/shared/includes/cards/body-placeholder.html +++ b/shared/includes/cards/body-placeholder.html @@ -1,5 +1,5 @@ {% assign width = include.width | default: 400 %} {% assign height = include.height | default: 200 %} -
- {% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100" %} +
+ {% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100 border rounded" %}
\ No newline at end of file diff --git a/shared/includes/cards/charts/active-users-2.html b/shared/includes/cards/charts/active-users-2.html new file mode 100644 index 000000000..a23494a32 --- /dev/null +++ b/shared/includes/cards/charts/active-users-2.html @@ -0,0 +1,13 @@ +
+
+
Active Users
+
+
25,782
+
+ {% include "ui/trending.html" value=-1 %} +
+
+ {% include "ui/chart.html" chart-id="active-users-3" height="12" %} +
+
+ diff --git a/shared/includes/cards/charts/social-referrals.html b/shared/includes/cards/charts/social-referrals.html new file mode 100644 index 000000000..2b005bef9 --- /dev/null +++ b/shared/includes/cards/charts/social-referrals.html @@ -0,0 +1,12 @@ +
+
+
+

Social referrals

+
+ {% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %} +
+
+ {% include "ui/chart.html" chart-id="social-referrals" legend=true %} +
+
+ diff --git a/shared/includes/cards/charts/total-users.html b/shared/includes/cards/charts/total-users.html new file mode 100644 index 000000000..52327aebc --- /dev/null +++ b/shared/includes/cards/charts/total-users.html @@ -0,0 +1,14 @@ +
+
+
Total Users
+
+
75,782
+
+ {% include "ui/trending.html" value=2 %} +
+
+
24,635 users increased from last month
+
+ {% include "ui/chart.html" chart-id="visitors" height="6" %} +
+ diff --git a/shared/includes/cards/delete-confirm.html b/shared/includes/cards/delete-confirm.html new file mode 100644 index 000000000..dcf48ab32 --- /dev/null +++ b/shared/includes/cards/delete-confirm.html @@ -0,0 +1,12 @@ +
+
+

Are you sure to delete this card?

+

If you delete this card, you will not be able to recover it.

+ +
+ {% include "ui/button.html" text="Yes, delete it" color="danger" %} + {% include "ui/button.html" text="Cancel" %} +
+
+
+ diff --git a/shared/includes/cards/happy-birthday.html b/shared/includes/cards/happy-birthday.html new file mode 100644 index 000000000..7ff27b975 --- /dev/null +++ b/shared/includes/cards/happy-birthday.html @@ -0,0 +1,12 @@ +
+
+
🍾 🎉
+

Happy Birthday, Andrew!

+

We truly hope your day is brimming with joy, laughter, and countless moments that bring a smile to your face!

+

To celebrate your special day, here's a discount code just for you: NWYR20. Enjoy 20% off your next purchase!

+
+ {% include "ui/button.html" text="Grab my special deal" icon="gift" color="primary" %} +
+
+
+ diff --git a/shared/includes/cards/pricing-plan.html b/shared/includes/cards/pricing-plan.html new file mode 100644 index 000000000..f467d01e3 --- /dev/null +++ b/shared/includes/cards/pricing-plan.html @@ -0,0 +1,37 @@ +
+
+ Featured +
+
+
+ Professional +
+
+
$199
+
/ month
+
+
    +
  • +
    {% include "ui/icon.html" icon="check" color="success" %}
    +
    Unlimited Target Audience
    +
    • +
  • +
    {% include "ui/icon.html" icon="check" color="success" %}
    +
    1 User Account
    +
    • +
  • +
    {% include "ui/icon.html" icon="check" color="success" %}
    +
    100+ Video Tuts
    +
    • +
  • +
    {% include "ui/icon.html" icon="x" color="secondary" %}
    +
    Public Displays
    +
    • +
+

This plan is perfect for small businesses and startups. It includes all the features you need to get started.

+
+ {% include "ui/button.html" text="Purchase Now" color="pink" block %} +
+
+
+ diff --git a/shared/includes/cards/profile-contact.html b/shared/includes/cards/profile-contact.html new file mode 100644 index 000000000..479544b42 --- /dev/null +++ b/shared/includes/cards/profile-contact.html @@ -0,0 +1,20 @@ +{% assign person = include.person | default: people[1] %} +
+
+
+
{% include "ui/icon.html" icon="star" color="yellow" type="filled" %}
+
+
+ {% include "ui/avatar.html" size="2xl" person=person shape="rounded-circle" %} +
+
{{ person.full_name }}
+
{{ person.job_title }}
+ +
+ {% include "ui/icon.html" icon="message" %} + {% include "ui/icon.html" icon="phone" %} + {% include "ui/icon.html" icon="mail" %} +
+
+
+ diff --git a/shared/includes/cards/small-stats.html b/shared/includes/cards/small-stats.html index 7dc5958f1..7281489e7 100644 --- a/shared/includes/cards/small-stats.html +++ b/shared/includes/cards/small-stats.html @@ -1,6 +1,6 @@ {% assign chart-type = include.chart-type | default: 'line' %} {% assign chart-position = include.chart-position | default: 'right' %} -
+
{% if include.icon %} diff --git a/shared/includes/cards/stat-gradient.html b/shared/includes/cards/stat-gradient.html new file mode 100644 index 000000000..4c18736bc --- /dev/null +++ b/shared/includes/cards/stat-gradient.html @@ -0,0 +1,23 @@ +{% assign card-color = include.color | default: 'primary' %} +{% assign card-icon = include.icon | default: 'trending-up' %} +{% assign card-title = include.title | default: 'Total' %} +{% assign card-value = include.value | default: '0' %} +{% assign card-progress = include.progress | default: 0 %} + +
+
+
+
+

{{ card-title }}

+
{{ card-value }}
+
+
+ {% include "ui/avatar.html" icon=card-icon color=card-color %} +
+
+ {% include "ui/progress.html" value=card-progress color=card-color size="sm" %} +
+
+
+
+ diff --git a/shared/includes/cards/storage-usage.html b/shared/includes/cards/storage-usage.html new file mode 100644 index 000000000..55caadd14 --- /dev/null +++ b/shared/includes/cards/storage-usage.html @@ -0,0 +1,33 @@ +
+
+

Using Storage 6854.45 MB of 8 GB

+
+
+
+
+
+
+
+ + Regular + 915MB +
+
+ + System + 415MB +
+
+ + Shared + 201MB +
+
+ + Free + 612MB +
+
+
+
+ diff --git a/shared/includes/cards/store-product.html b/shared/includes/cards/store-product.html index 76427be95..be7f39d94 100644 --- a/shared/includes/cards/store-product.html +++ b/shared/includes/cards/store-product.html @@ -3,7 +3,7 @@
- Apple iPhone 7 128GB + {{ product.name }}

{{ product.name }}

@@ -11,7 +11,7 @@ {{ product.price }}
- {% include "ui/icon.html" icon='plus' %} Add to cart + {% include "ui/icon.html" icon='shopping-cart' %} Buy
diff --git a/shared/includes/cards/success-message.html b/shared/includes/cards/success-message.html new file mode 100644 index 000000000..863c526b3 --- /dev/null +++ b/shared/includes/cards/success-message.html @@ -0,0 +1,14 @@ +
+
+
+ {% include "ui/icon.html" icon="circle-check" class="icon-lg" color="success" %} +
+

Success!

+

Your changes have been saved successfully.

+ +
+ {% include "ui/button.html" text="Continue" color="success" %} +
+
+
+ diff --git a/shared/includes/cards/weather.html b/shared/includes/cards/weather.html new file mode 100644 index 000000000..54a3d22ba --- /dev/null +++ b/shared/includes/cards/weather.html @@ -0,0 +1,24 @@ +{% assign icon = include.icon | default: 'cloud-rain' %} +
+
+
+
+
+
+

{{ include.city | default: 'Warsaw' }}

+
+
+ {% include "ui/icon.html" icon=icon %} +
+
+
+ {{ include.description | default: 'Cloudy morning' }} +
+
+
+
{{ include.temperature | default: 20 }}°
+
+
+
+
+ diff --git a/shared/includes/cards/welcome.html b/shared/includes/cards/welcome.html index 5afee416d..1087ebe2e 100644 --- a/shared/includes/cards/welcome.html +++ b/shared/includes/cards/welcome.html @@ -1,9 +1,9 @@ -
+

Welcome back, Paweł

-

You have 5 new messages and 2 new notifications.

+

You have 5 new messages and 2 new notifications.

diff --git a/shared/includes/cards/you-win.html b/shared/includes/cards/you-win.html new file mode 100644 index 000000000..73325ee82 --- /dev/null +++ b/shared/includes/cards/you-win.html @@ -0,0 +1,11 @@ +
+
+
🏆
+

You are winner!

+

You've been selected as our lucky winner for completing 100 orders this month! Click below to claim your exclusive prize and enjoy the benefits!

+
+ {% include "ui/button.html" text="Claim Your Prize" icon="gift" color="primary" %} +
+
+
+ diff --git a/shared/includes/layout/homepage.html b/shared/includes/layout/homepage.html index cdb06ba41..a07fb08d7 100644 --- a/shared/includes/layout/homepage.html +++ b/shared/includes/layout/homepage.html @@ -3,33 +3,10 @@ {% include "cards/welcome.html" %}
-
-
-
Total Users
-
-
75,782
-
- {% include "ui/trending.html" value=2 %} -
-
-
24,635 users increased from last month
-
- {% include "ui/chart.html" chart-id="visitors" height="6" %} -
+ {% include "cards/charts/total-users.html" %}
-
-
-
Active Users
-
-
25,782
-
- {% include "ui/trending.html" value=-1 %} -
-
- {% include "ui/chart.html" chart-id="active-users-3" height="12" %} -
-
+ {% include "cards/charts/active-users-2.html" %}
{% include "cards/charts/sales.html" %} @@ -97,38 +74,7 @@
-
-
-

Using Storage 6854.45 MB of 8 GB

-
-
-
-
-
-
-
- - Regular - 915MB -
-
- - System - 415MB -
-
- - Shared - 201MB -
-
- - Free - 612MB -
-
-
-
+ {% include "cards/storage-usage.html" %}
{% include "cards/activity.html" %}