Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-14 09:34:19 +04:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/tabler/tabler into fix-1927

Browse Source
This commit is contained in:
Bartek
2026-02-26 14:36:17 +01:00
parent 9e5069a736 65829e9d5e
commit f04d994c3b
543 changed files with 17492 additions and 8244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/banner/index.mjs
+2 -2
View File
@@ -1,11 +1,11 @@
import fs from 'node:fs/promises'
import { readFileSync } from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const pkgJson = path.join(__dirname, '../../core/package.json')
const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
const pkg = JSON.parse(readFileSync(pkgJson, 'utf8'))
const year = new Date().getFullYear()
shared/data/activity.json
+212 -18
View File
@@ -1,56 +1,250 @@
[
{
"text": "<strong>%p</strong> commented on your <strong>\"I'm not a witch.\"</strong> post."
"text": "<strong>%p</strong> commented on your post: <strong>Not everything is what it seems</strong>",
"icon": "message-circle"
},
{
"text": "It's <strong>%p</strong>'s birthday. Wish him well!"
"text": "It's <strong>%p</strong>'s birthday today",
"icon": "cake"
},
{
"text": "<strong>%p</strong> posted <strong>\"Well, what do you want?\"</strong>."
"text": "<strong>%p</strong> posted a status: <strong>Trying to figure things out one step at a time.</strong>",
"icon": "pencil"
},
{
"text": "<strong>%p</strong> created a new project <strong>Morning alarm clock</strong>."
"text": "<strong>%p</strong> created a new project: <strong>Smart Morning Alarm</strong>",
"icon": "alarm"
},
{
"text": "<strong>%p</strong> liked your photo."
"text": "<strong>%p</strong> liked your photo",
"icon": "heart"
},
{
"text": "<strong>%p</strong> registered new client as <strong>%c</strong>."
"text": "<strong>%p</strong> registered a new client: <strong>Trilia Solutions</strong>",
"icon": "user-plus"
},
{
"text": "<strong>%p</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>."
"text": "<strong>%p</strong> closed a new deal on project: <strong>PPAP Campaign Strategy</strong>",
"icon": "handshake"
},
{
"text": "<strong>%p</strong> created a new project for <strong>%c</strong>."
"text": "<strong>%p</strong> created a new project: <strong>Wikibox Knowledge Platform</strong>",
"icon": "folder-plus"
},
{
"text": "<strong>%p</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>."
"text": "<strong>%p</strong> changed project status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>",
"icon": "check"
},
{
"text": "<strong>%p</strong> liked <strong>Tabler UI Kit</strong>."
"text": "<strong>%p</strong> liked the <strong>Tabler UI Kit</strong>",
"icon": "thumb-up"
},
{
"text": "<strong>%p</strong> posted new video."
"text": "<strong>%p</strong> shared a new video: <strong>Design Tips for Busy Creators</strong>",
"icon": "video"
},
{
"text": "<strong>%p</strong> and 3 others followed you."
"text": "<strong>%p</strong> and <strong>3 others</strong> followed you",
"icon": "user-plus"
},
{
"text": "<strong>%p</strong> upload 3 new photos to category <strong>Inspirations</strong>."
"text": "<strong>%p</strong> uploaded <strong>3 new photos</strong> to category: <strong>Creative Inspirations</strong>",
"icon": "photo"
},
{
"text": "<strong>%p</strong> made a <strong>$10</strong> donation."
"text": "<strong>%p</strong> made a <strong>$10 donation</strong>",
"icon": "coin"
},
{
"text": "<strong>%p</strong> created a profile."
"text": "<strong>%p</strong> created a profile",
"icon": "id"
},
{
"text": "<strong>%p</strong> hosted the event <strong>Tabler UI Birthday</strong>."
"text": "<strong>%p</strong> hosted the event: <strong>Tabler UI Anniversary</strong>",
"icon": "calendar-event"
},
{
"text": "<strong>%p</strong> mentioned you on <strong>Best of 2020</strong>."
"text": "<strong>%p</strong> mentioned you in <strong>Best of 2020 Highlights</strong>",
"icon": "at"
},
{
"text": "<strong>%p</strong> sent a Review Request to <strong>Amanda Blake</strong>."
"text": "<strong>%p</strong> sent a review request to <strong>Amanda Blake</strong>",
"icon": "send"
},
{
"text": "<strong>%p</strong> posted a photo from her vacation in <strong>Tuscany</strong>",
"icon": "camera"
},
{
"text": "<strong>%p</strong> shared an article: <strong>Top 10 productivity hacks</strong>",
"icon": "book"
},
{
"text": "<strong>%p</strong> commented on your photo",
"icon": "message-circle"
},
{
"text": "<strong>%p</strong> joined the group: <strong>UX Designers Hub</strong>",
"icon": "users"
},
{
"text": "<strong>%p</strong> uploaded new design mockups",
"icon": "layout"
},
{
"text": "<strong>%p</strong> reacted with ❤️ to your story",
"icon": "emoji-heart-eyes"
},
{
"text": "<strong>%p</strong> posted a video: <strong>Building Better Dashboards</strong>",
"icon": "video"
},
{
"text": "<strong>%p</strong> joined your webinar: <strong>Intro to TypeScript</strong>",
"icon": "presentation"
},
{
"text": "<strong>%p</strong> commented: <strong>This is so helpful!</strong>",
"icon": "message-circle"
},
{
"text": "<strong>%p</strong> updated her profile photo",
"icon": "user-edit"
},
{
"text": "<strong>%p</strong> posted a job listing: <strong>Frontend Developer</strong>",
"icon": "briefcase"
},
{
"text": "<strong>%p</strong> started following your project: <strong>Clean Code Patterns</strong>",
"icon": "code"
},
{
"text": "<strong>%p</strong> gave feedback on your latest design",
"icon": "message-check"
},
{
"text": "<strong>%p</strong> shared a playlist: <strong>Coding Flow</strong>",
"icon": "music"
},
{
"text": "<strong>%p</strong> joined the event: <strong>Night UI Meetup</strong>",
"icon": "calendar-plus"
},
{
"text": "<strong>%p</strong> shared a memory: <strong>2 years at Tabler!</strong>",
"icon": "history"
},
{
"text": "<strong>%p</strong> retweeted your latest post",
"icon": "repeat"
},
{
"text": "<strong>%p</strong> shared your story to their network",
"icon": "share"
},
{
"text": "<strong>%p</strong> invited you to collaborate on her workspace",
"icon": "user-plus"
},
{
"text": "<strong>%p</strong> published a new blog post: <strong>Dark Mode for All</strong>",
"icon": "article"
},
{
"text": "<strong>%p</strong> mentioned you in a comment",
"icon": "at"
},
{
"text": "<strong>%p</strong> shared a new design: <strong>Modern Dashboard UI</strong>",
"icon": "layout"
},
{
"text": "<strong>%p</strong> completed the course: <strong>Advanced React Patterns</strong>",
"icon": "certificate"
},
{
"text": "<strong>%p</strong> started a new discussion: <strong>Best practices for mobile UI</strong>",
"icon": "message-square"
},
{
"text": "<strong>%p</strong> reached <strong>1000 followers</strong> milestone",
"icon": "trophy"
},
{
"text": "<strong>%p</strong> published a tutorial: <strong>Building Responsive Components</strong>",
"icon": "book-open"
},
{
"text": "<strong>%p</strong> organized a workshop: <strong>Design System Fundamentals</strong>",
"icon": "users-group"
},
{
"text": "<strong>%p</strong> contributed to <strong>Open Source Project</strong>",
"icon": "git-branch"
},
{
"text": "<strong>%p</strong> received a <strong>5-star review</strong> on their latest work",
"icon": "star"
},
{
"text": "<strong>%p</strong> launched a new product: <strong>TaskFlow Pro</strong>",
"icon": "rocket"
},
{
"text": "<strong>%p</strong> joined the mentorship program",
"icon": "graduation-cap"
},
{
"text": "<strong>%p</strong> created a design challenge: <strong>Minimalist Dashboard</strong>",
"icon": "target"
},
{
"text": "<strong>%p</strong> won the <strong>Design Award 2024</strong>",
"icon": "award"
},
{
"text": "<strong>%p</strong> started a podcast: <strong>Design & Development</strong>",
"icon": "microphone"
},
{
"text": "<strong>%p</strong> completed a <strong>30-day design challenge</strong>",
"icon": "calendar-check"
},
{
"text": "<strong>%p</strong> became a <strong>verified designer</strong>",
"icon": "badge-check"
},
{
"text": "<strong>%p</strong> published a case study: <strong>Redesigning E-commerce UX</strong>",
"icon": "file-text"
},
{
"text": "<strong>%p</strong> hosted a live stream: <strong>Design Q&A Session</strong>",
"icon": "video-plus"
},
{
"text": "<strong>%p</strong> created a design system: <strong>Component Library v2.0</strong>",
"icon": "library"
},
{
"text": "<strong>%p</strong> reached <strong>50k downloads</strong> on their template",
"icon": "download"
},
{
"text": "<strong>%p</strong> started a newsletter: <strong>Weekly Design Insights</strong>",
"icon": "mail"
},
{
"text": "<strong>%p</strong> collaborated on <strong>Community Design Project</strong>",
"icon": "users"
},
{
"text": "<strong>%p</strong> published a research paper: <strong>UI/UX Trends 2024</strong>",
"icon": "file-search"
},
{
"text": "<strong>%p</strong> became a <strong>featured creator</strong>",
"icon": "crown"
}
]
shared/data/articles.json
+309 -21
View File
@@ -1,44 +1,332 @@
[
{
"title": "And this isn't my nose. This is a false one.",
"description": "Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Well, I got better.",
"title": "How to Build a Modern Web App with Vue 3",
"description": "Learn the fundamentals of Vue 3 and Composition API by creating a fully functional, modern web application from scratch.",
"tags": [
"vue",
"javascript",
"frontend"
],
"image": 14,
"author": 3
"author": 10
},
{
"title": "Well, I didn't vote for you.",
"description": "Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!",
"image": 15,
"author": 4
"title": "10 UX Principles Every Designer Should Know",
"description": "A concise guide to user experience best practices, helping you design more intuitive and user-friendly interfaces.",
"tags": [
"ux",
"design",
"usability"
],
"image": 5,
"author": 8
},
{
"title": "How do you know she is a witch?",
"description": "Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You don't vote for kings. Ah, now we see the violence inherent in the system!",
"title": "Optimizing JavaScript Performance in Large-Scale Projects",
"description": "Explore techniques and tools to improve the speed and maintainability of your JavaScript applications at scale.",
"tags": [
"javascript",
"performance",
"best-practices"
],
"image": 19,
"author": 14
},
{
"title": "The Future of CSS: What's Coming in 2025",
"description": "Get an early look at the next generation of CSS features and how they'll transform modern web development.",
"tags": [
"css",
"future",
"web-development"
],
"image": 3,
"author": 11
},
{
"title": "Understanding TypeScript: A Beginner's Guide",
"description": "This article walks you through the basics of TypeScript, helping you write safer and more scalable JavaScript code.",
"tags": [
"typescript",
"javascript",
"beginner"
],
"image": 16,
"author": 5
},
{
"title": "Shut up!",
"description": "Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!",
"image": 17,
"title": "Building a Design System with Tailwind CSS",
"description": "Learn how to create a consistent, reusable design system using utility-first CSS with Tailwind.",
"tags": [
"tailwind",
"design-system",
"css"
],
"image": 22,
"author": 6
},
{
"title": "Weaseling out of things is important to learn.",
"description": "Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secret ingredient is… Love!? Who's been screwing with this thing?",
"title": "5 Mistakes to Avoid in Web Accessibility",
"description": "Avoid common accessibility pitfalls and make your website inclusive for all users.",
"tags": [
"a11y",
"accessibility",
"html"
],
"image": 12,
"author": 7
},
{
"title": "Deploying Your App with Vercel and GitHub Actions",
"description": "A step-by-step guide to automating your deployment process using GitHub Actions and Vercel.",
"tags": [
"devops",
"vercel",
"ci/cd"
],
"image": 2,
"author": 15
},
{
"title": "A Dive into Reactive Programming with RxJS",
"description": "Understand the core concepts of reactive programming and learn how to use RxJS in real-world scenarios.",
"tags": [
"rxjs",
"reactive",
"javascript"
],
"image": 17,
"author": 4
},
{
"title": "Creating Stunning Data Visualizations with D3.js",
"description": "Learn how to transform complex data into interactive, beautiful charts using D3.js.",
"tags": [
"d3",
"data-viz",
"charts"
],
"image": 8,
"author": 12
},
{
"title": "State Management in Vue 3 with Pinia",
"description": "Pinia is the new official store library for Vue—here's how to use it effectively.",
"tags": [
"vue",
"pinia",
"state-management"
],
"image": 21,
"author": 3
},
{
"title": "Dark Mode in CSS: Best Practices",
"description": "Implementing dark mode isn't just about switching colors. Learn how to do it right with CSS variables and media queries.",
"tags": [
"css",
"dark-mode",
"ui"
],
"image": 7,
"author": 13
},
{
"title": "Next.js vs Nuxt 3: A Head-to-Head Comparison",
"description": "Comparing the most popular frameworks for React and Vue. Which one should you choose?",
"tags": [
"nextjs",
"nuxt",
"frameworks"
],
"image": 15,
"author": 6
},
{
"title": "Progressive Web Apps: How to Make Your Website Installable",
"description": "Turn your web project into a PWA and reach users offline or on mobile devices.",
"tags": [
"pwa",
"web-apps",
"offline"
],
"image": 11,
"author": 9
},
{
"title": "Using Figma for Developer Handoff",
"description": "Bridge the gap between designers and developers by mastering Figma's handoff features.",
"tags": [
"figma",
"design",
"workflow"
],
"image": 9,
"author": 14
},
{
"title": "Improving Lighthouse Scores with Modern Techniques",
"description": "A practical guide to fixing common issues and optimizing your site for better Lighthouse results.",
"tags": [
"performance",
"seo",
"lighthouse"
],
"image": 6,
"author": 2
},
{
"title": "Animating Interfaces with Framer Motion",
"description": "Bring your UI to life with simple, declarative animations using Framer Motion.",
"tags": [
"react",
"animations",
"framer-motion"
],
"image": 1,
"author": 7
},
{
"title": "GraphQL vs REST: Which Should You Choose?",
"description": "Breaking down the pros and cons of GraphQL and REST to help you pick the right API design.",
"tags": [
"graphql",
"rest",
"api"
],
"image": 13,
"author": 16
},
{
"title": "Building a Blog with Astro and Markdown",
"description": "Leverage Astro's performance and use Markdown to create a fast, flexible blog.",
"tags": [
"astro",
"markdown",
"static-sites"
],
"image": 10,
"author": 5
},
{
"title": "Why You Should Use CSS Container Queries",
"description": "The long-awaited feature is here. Learn how to use container queries to write smarter, more responsive CSS.",
"tags": [
"css",
"container-queries",
"responsive"
],
"image": 18,
"author": 11
},
{
"title": "Mastering React Server Components: A Complete Guide",
"description": "Dive deep into React Server Components and learn how to build faster, more efficient applications with this revolutionary feature.",
"tags": [
"react",
"server-components",
"performance"
],
"image": 4,
"author": 8
},
{
"title": "Building Micro-Frontends with Module Federation",
"description": "Learn how to break down monolithic frontend applications into smaller, independently deployable micro-frontends.",
"tags": [
"micro-frontends",
"webpack",
"architecture"
],
"image": 20,
"author": 12
},
{
"title": "You don't like your job, you don't strike.",
"description": "But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's how drunk you get.",
"image": 21,
"title": "The Complete Guide to CSS Grid Layout",
"description": "Master CSS Grid Layout with practical examples and real-world use cases for modern web layouts.",
"tags": [
"css",
"grid",
"layout"
],
"image": 23,
"author": 9
},
{
"title": "Testing React Applications with Vitest and Testing Library",
"description": "Set up a modern testing environment for React applications using Vitest and React Testing Library.",
"tags": [
"react",
"testing",
"vitest"
],
"image": 24,
"author": 15
},
{
"title": "Building Scalable APIs with Fastify and TypeScript",
"description": "Create high-performance APIs using Fastify and TypeScript with best practices for production applications.",
"tags": [
"fastify",
"typescript",
"api"
],
"image": 25,
"author": 6
},
{
"title": "Implementing Authentication with NextAuth.js",
"description": "Add secure authentication to your Next.js applications with NextAuth.js and multiple provider support.",
"tags": [
"nextjs",
"authentication",
"security"
],
"image": 26,
"author": 11
},
{
"title": "Optimizing Images for the Web: A Developer's Guide",
"description": "Learn modern techniques for optimizing images, including WebP, AVIF, and responsive image strategies.",
"tags": [
"images",
"performance",
"webp"
],
"image": 27,
"author": 14
},
{
"title": "Building Interactive Maps with Mapbox and React",
"description": "Create stunning, interactive maps for your web applications using Mapbox GL JS and React.",
"tags": [
"maps",
"react",
"mapbox"
],
"image": 28,
"author": 7
},
{
"title": "Mastering CSS Custom Properties and Theming",
"description": "Build flexible design systems with CSS custom properties and create dynamic theming solutions.",
"tags": [
"css",
"theming",
"design-system"
],
"image": 29,
"author": 13
},
{
"title": "I hope I didn't brain my damage.",
"description": "I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneliness and cheeseburgers are a dangerous mix. Jesus must be spinning in his grave! I hope this has taught you kids a lesson: kids never learn.",
"image": 22,
"author": 14
"title": "Building Real-Time Applications with Socket.io",
"description": "Create real-time features like chat, notifications, and live updates using Socket.io and Node.js.",
"tags": [
"socket.io",
"real-time",
"nodejs"
],
"image": 30,
"author": 10
}
]
shared/data/channels.json
+132
View File
@@ -0,0 +1,132 @@
[
{
"channel": "Facebook",
"icon": "brand-facebook",
"visitors": 11873,
"revenues": 8423.78,
"sales": 336,
"conversion": 2.83,
"bounceRate": 45.6,
"sessionDuration": 183,
"pagesPerSession": 3.1,
"costPerAcquisition": 7.22,
"clickThroughRate": 1.8
},
{
"channel": "Github",
"icon": "brand-github",
"visitors": 5372,
"revenues": 4876.12,
"sales": 188,
"conversion": 3.50,
"bounceRate": 32.4,
"sessionDuration": 246,
"pagesPerSession": 4.5,
"costPerAcquisition": 5.75,
"clickThroughRate": 2.1
},
{
"channel": "Twitter",
"icon": "brand-twitter",
"visitors": 7941,
"revenues": 6184.39,
"sales": 272,
"conversion": 3.42,
"bounceRate": 39.1,
"sessionDuration": 174,
"pagesPerSession": 3.3,
"costPerAcquisition": 6.90,
"clickThroughRate": 1.6
},
{
"channel": "LinkedIn",
"icon": "brand-linkedin",
"visitors": 3127,
"revenues": 2748.56,
"sales": 121,
"conversion": 3.87,
"bounceRate": 28.9,
"sessionDuration": 209,
"pagesPerSession": 4.0,
"costPerAcquisition": 6.10,
"clickThroughRate": 2.3
},
{
"channel": "Instagram",
"icon": "brand-instagram",
"visitors": 9442,
"revenues": 7632.91,
"sales": 308,
"conversion": 3.26,
"bounceRate": 41.2,
"sessionDuration": 192,
"pagesPerSession": 3.4,
"costPerAcquisition": 6.15,
"clickThroughRate": 1.9
},
{
"channel": "Reddit",
"icon": "brand-reddit",
"visitors": 4347,
"revenues": 3311.34,
"sales": 147,
"conversion": 3.38,
"bounceRate": 46.8,
"sessionDuration": 167,
"pagesPerSession": 2.9,
"costPerAcquisition": 7.10,
"clickThroughRate": 1.5
},
{
"channel": "YouTube",
"icon": "brand-youtube",
"visitors": 14856,
"revenues": 10573.44,
"sales": 393,
"conversion": 2.64,
"bounceRate": 38.7,
"sessionDuration": 221,
"pagesPerSession": 3.6,
"costPerAcquisition": 6.55,
"clickThroughRate": 2.0
},
{
"channel": "Pinterest",
"icon": "brand-pinterest",
"visitors": 3879,
"revenues": 2824.07,
"sales": 132,
"conversion": 3.40,
"bounceRate": 36.2,
"sessionDuration": 195,
"pagesPerSession": 3.7,
"costPerAcquisition": 6.00,
"clickThroughRate": 1.7
},
{
"channel": "TikTok",
"icon": "brand-tiktok",
"visitors": 8749,
"revenues": 6887.63,
"sales": 293,
"conversion": 3.35,
"bounceRate": 43.0,
"sessionDuration": 181,
"pagesPerSession": 3.2,
"costPerAcquisition": 6.40,
"clickThroughRate": 1.8
},
{
"channel": "Dribbble",
"icon": "brand-dribbble",
"visitors": 2623,
"revenues": 2113.28,
"sales": 99,
"conversion": 3.78,
"bounceRate": 29.6,
"sessionDuration": 204,
"pagesPerSession": 4.1,
"costPerAcquisition": 5.90,
"clickThroughRate": 2.2
}
]
shared/data/charts.json
+221
View File
@@ -2057,5 +2057,226 @@
]
}
]
},
"dashboard-crypto-candlestick": {
"type": "candlestick",
"height": 29,
"toolbar": true,
"datetime": true,
"y-tooltip": true,
"series": [
{
"name": "LTC/BTC",
"candlestick-data": [
{
"x": 1735686000000,
"y": [
98803.1,
102306.14,
88978.24,
94328.03
]
},
{
"x": 1738278000000,
"y": [
95236.1,
97032.03,
87375.16,
96251.77
]
},
{
"x": 1740870000000,
"y": [
96487.56,
103797.77,
90697.28,
90697.28
]
},
{
"x": 1743458400000,
"y": [
91806.76,
94895.54,
87431.18,
87431.18
]
},
{
"x": 1746050400000,
"y": [
87011.25,
93211.62,
84356.3,
87282.02
]
},
{
"x": 1748642400000,
"y": [
88933.8,
94105.65,
87086.95,
89538.17
]
},
{
"x": 1751234400000,
"y": [
90270.85,
95138.57,
88785.87,
92076.59
]
},
{
"x": 1753826400000,
"y": [
91635.08,
95329.73,
88139.43,
93398.3
]
},
{
"x": 1756418400000,
"y": [
94084.03,
96110.64,
90758.23,
92847.27
]
},
{
"x": 1759010400000,
"y": [
94427.13,
104031.87,
91181.21,
91387.19
]
},
{
"x": 1761606000000,
"y": [
89676.79,
96432.19,
86003.07,
91270.33
]
},
{
"x": 1764198000000,
"y": [
90221.19,
92256.21,
87250.08,
90572.57
]
},
{
"x": 1766790000000,
"y": [
91467.48,
99939.37,
84023.53,
91412.42
]
},
{
"x": 1769382000000,
"y": [
92347.68,
102495.71,
84694.68,
86861.46
]
},
{
"x": 1771974000000,
"y": [
86450.15,
97703.82,
73654.73,
89304.96
]
},
{
"x": 1774566000000,
"y": [
89954.07,
93720.75,
83099.84,
86765.37
]
},
{
"x": 1777154400000,
"y": [
85041.33,
93162.71,
79493.01,
80950.82
]
},
{
"x": 1779746400000,
"y": [
81356.55,
89872.84,
75889.88,
84397.86
]
},
{
"x": 1782338400000,
"y": [
84500.33,
86553.16,
81499.11,
86553.16
]
},
{
"x": 1784930400000,
"y": [
87615.26,
93796.77,
81616.41,
87524.49
]
},
{
"x": 1787522400000,
"y": [
86016.31,
91621.26,
80661.81,
83468.77
]
},
{
"x": 1790114400000,
"y": [
84712.23,
90825.8,
81702.56,
86377.51
]
},
{
"x": 1792706400000,
"y": [
86028.52,
91660.63,
77064.28,
83253.51
]
}
]
}
]
}
}
shared/data/comments.json
+11 -1
View File
@@ -4,5 +4,15 @@
"She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD",
"Did anyone go camping in Oshkosh Wisconsin last month?",
"Hey i am subbed but i didnt get the notification how?",
"This is the best by far! I laughed for the hole sticking time 😂"
"This is the best by far! I laughed for the hole sticking time 😂",
"Can't stop watching this! The vibes are immaculate ✨",
"Who else is here from the algorithm? This popped up and I'm obsessed now 🔥",
"The editing in this is absolutely insane! How do you do it? 🤯",
"Finally found my new favorite channel! Subscribed immediately 💯",
"This gives me such good memories from last summer... anyone else? 🌞",
"The way you captured that moment is pure magic! Love it so much 🥰",
"Can we get a part 2? I need more of this content in my life! 🙏",
"This is exactly what I needed today, thank you for sharing! 💖",
"The quality is amazing! What camera do you use? 📸",
"This made my day so much better, sending good vibes back! ✌️"
]
shared/data/commits.json
+134 -134
View File
File diff suppressed because it is too large Load Diff
shared/data/countries.json
+53
View File
@@ -0,0 +1,53 @@
[
{
"name": "United States",
"flag": "us",
"code": "us"
},
{
"name": "United Kingdom",
"flag": "gb",
"code": "gb"
},
{
"name": "Germany",
"flag": "de",
"code": "de"
},
{
"name": "France",
"flag": "fr",
"code": "fr"
},
{
"name": "Poland",
"flag": "pl",
"code": "pl"
},
{
"name": "Spain",
"flag": "es",
"code": "es"
},
{
"name": "Italy",
"flag": "it",
"code": "it"
},
{
"name": "Canada",
"flag": "ca",
"code": "ca"
},
{
"name": "Australia",
"flag": "au",
"code": "au"
},
{
"name": "Japan",
"flag": "jp",
"code": "jp"
}
]
shared/data/crypto-currencies.json
+106 -776
View File
File diff suppressed because it is too large Load Diff
shared/data/crypto-markets.json
+122
View File
@@ -0,0 +1,122 @@
[
{
"coin": "ETH",
"price": "0.03530991",
"volume": "168,726.341",
"change": "+1.11",
"changeType": "success",
"favorite": true
},
{
"coin": "XRP",
"price": "0.00002269",
"volume": "22,843.185",
"change": "-0.98",
"changeType": "danger",
"favorite": true
},
{
"coin": "ETC",
"price": "0.00014852",
"volume": "529.209",
"change": "+2.35",
"changeType": "success",
"favorite": true
},
{
"coin": "LTC",
"price": "0.00089821",
"volume": "5,928.536",
"change": "+3.89",
"changeType": "success",
"favorite": true
},
{
"coin": "XMR",
"price": "0.00310306",
"volume": "1,382.046",
"change": "+4.42",
"changeType": "success",
"favorite": true
},
{
"coin": "BSC",
"price": "0.00989344",
"volume": "12,531.037",
"change": "+0.79",
"changeType": "success",
"favorite": false
},
{
"coin": "ABC",
"price": "0.02613303",
"volume": "21.597",
"change": "-3.20",
"changeType": "danger",
"favorite": false
},
{
"coin": "TRX",
"price": "0.0000027",
"volume": "4,250.916",
"change": "+0.44",
"changeType": "success",
"favorite": false
},
{
"coin": "SC",
"price": "0.00000002",
"volume": "48.092",
"change": "+2.23",
"changeType": "success",
"favorite": false
},
{
"coin": "OMG",
"price": "0.00000102",
"volume": "9.695",
"change": "+0.30",
"changeType": "success",
"favorite": false
},
{
"coin": "CHR",
"price": "0.00000223",
"volume": "7.428",
"change": "-4.21",
"changeType": "danger",
"favorite": false
},
{
"coin": "AVA",
"price": "0.00016909",
"volume": "3,088.149",
"change": "+2.27",
"changeType": "success",
"favorite": false
},
{
"coin": "DASH",
"price": "0.00063201",
"volume": "6,344.102",
"change": "+46.90",
"changeType": "success",
"favorite": false
},
{
"coin": "LINK",
"price": "0.00015636",
"volume": "4,510.014",
"change": "+0.23",
"changeType": "success",
"favorite": false
},
{
"coin": "EOS",
"price": "0.00000246",
"volume": "1.072",
"change": "+0.97",
"changeType": "success",
"favorite": false
}
]
shared/data/crypto-orders.json
+106
View File
@@ -0,0 +1,106 @@
{
"sell_orders": [
{
"price": "0.00091279",
"btc": "0.55002151",
"sum": "0.55002151"
},
{
"price": "0.00092146",
"btc": "1.97294243",
"sum": "2.52296394"
},
{
"price": "0.00094672",
"btc": "0.67387767",
"sum": "3.19684161"
},
{
"price": "0.00095269",
"btc": "0.93727595",
"sum": "4.13411756"
},
{
"price": "0.00095926",
"btc": "0.8976753",
"sum": "5.03179286"
},
{
"price": "0.00097736",
"btc": "0.94088124",
"sum": "5.9726741"
},
{
"price": "0.00100026",
"btc": "0.51299752",
"sum": "6.48567162"
},
{
"price": "0.00102267",
"btc": "1.18050103",
"sum": "7.66617265"
},
{
"price": "0.00104506",
"btc": "1.17318909",
"sum": "8.83936174"
},
{
"price": "0.00104974",
"btc": "2.19498873",
"sum": "11.03435047"
}
],
"buy_orders": [
{
"price": "0.00088217",
"btc": "2.59949934",
"sum": "2.59949934"
},
{
"price": "0.00085874",
"btc": "0.9852387",
"sum": "3.58473804"
},
{
"price": "0.00084954",
"btc": "2.39434245",
"sum": "5.97908049"
},
{
"price": "0.0008322",
"btc": "2.31112332",
"sum": "8.29020381"
},
{
"price": "0.00081524",
"btc": "2.66443099",
"sum": "10.9546348"
},
{
"price": "0.00080303",
"btc": "1.79223619",
"sum": "12.74687099"
},
{
"price": "0.00077858",
"btc": "1.61051825",
"sum": "14.35738924"
},
{
"price": "0.00075508",
"btc": "0.71279599",
"sum": "15.07018523"
},
{
"price": "0.00073013",
"btc": "0.89425132",
"sum": "15.96443655"
},
{
"price": "0.00071941",
"btc": "1.85521536",
"sum": "17.81965191"
}
]
}
shared/data/icons-info.json
+1 -1
View File
@@ -1 +1 @@
{"version":"3.31.0","count":5880}
{"version":"3.36.1","count":5986}
shared/data/icons.json
+1 -1
View File
File diff suppressed because one or more lines are too long
shared/data/illustrations.json
+1 -1
View File
@@ -1 +1 @@
["weightlifting","wait","vr","video","valentines-day-love","valentines-day-heart","valentines-day-gift","to-do","tiredness","telescope","snowman","shopping","shield","searching-for-a-signal","search","project","printer","podcast","payment","painting","not-found","new-year","new-year-2","neutral-info","music","morning","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","hybrid-work","halloween-pumpkin","guitar","good-news","good-info","girl-refresh","girl-phone","gift","ghost","folders","flowers","fingerprint","exit","error","email","electric-scooter","easter-egg","easter-bunny","discount","dart","dance","conversation","computer-fix","clock-and-cat","christmas-tree","christmas-gifts","christmas-fireplace","chill","chill-sofa","chart","chart-circle","cat","calendar","building","boy","boy-with-key","boy-refresh","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai","500","403"]
["403","500","504","ai","archive","bad-news","bicycle","boy","boy-and-cat","boy-and-laptop","boy-girl","boy-gives-flowers","boy-refresh","boy-with-key","building","calendar","camping","cat","chart","chart-circle","chatbot","chill","chill-sofa","christmas-fireplace","christmas-gifts","christmas-tree","clock-and-cat","computer-fix","contract","conversation","dance","dart","discount","download","easter-bunny","easter-egg","electric-scooter","email","error","exit","fingerprint","flowers","folders","game","ghost","ghost-2","gift","girl-phone","girl-refresh","good-info","good-news","graduation","guitar","halloween","halloween-pumpkin","hybrid-work","ice-skates","icons","icons-drawing","icons-drawing-run","icons-ladder","icons-production","icons-workshop","kite","loading","map-destination","message","mobile-computer","morning","music","neutral-info","new-year","new-year-2","not-found","painting","payment","podcast","printer","project","reading","search","searching-for-a-signal","shield","shopping","snowman","telescope","tiredness","to-do","valentines-day-gift","valentines-day-heart","valentines-day-love","vampire","version-control","video","vr","wait","weightlifting","welcome-on-board","witch","witch-2"]
shared/data/languages.json
+44 -26
View File
@@ -1,94 +1,112 @@
[
{
"name": "العربية",
"flag": "ar"
},
{
"name": "Čeština",
"flag": "cz"
"flag": "cz",
"code": "cs"
},
{
"name": "Deutsch",
"flag": "de"
"flag": "de",
"code": "de"
},
{
"name": "Ελληνικά",
"flag": "gr"
"flag": "gr",
"code": "el"
},
{
"name": "English",
"flag": "gb"
"flag": "gb",
"code": "en"
},
{
"name": "Español",
"flag": "es"
"flag": "es",
"code": "es"
},
{
"name": "Français",
"flag": "fr"
"flag": "fr",
"code": "fr"
},
{
"name": "हिंदी",
"flag": "in"
"flag": "in",
"code": "hi"
},
{
"name": "Magyar",
"flag": "hu"
"flag": "hu",
"code": "hu"
},
{
"name": "Bahasa Indonesia",
"flag": "in"
"flag": "id",
"code": "id"
},
{
"name": "Italiano",
"flag": "it"
"flag": "it",
"code": "it"
},
{
"name": "日本語",
"flag": "jp"
"flag": "jp",
"code": "ja"
},
{
"name": "한국어",
"flag": "kr"
"flag": "kr",
"code": "ko"
},
{
"name": "Nederlands (Nederland)",
"flag": "ne"
"flag": "ne",
"code": "nl"
},
{
"name": "Polski",
"flag": "pl"
"flag": "pl",
"code": "pl"
},
{
"name": "Português",
"flag": "pt"
"flag": "pt",
"code": "pt"
},
{
"name": "Română",
"flag": "ro"
"flag": "ro",
"code": "ro"
},
{
"name": "Русский",
"flag": "ru"
"flag": "ru",
"code": "ru"
},
{
"name": "ภาษาไทย",
"flag": "th"
"flag": "th",
"code": "th"
},
{
"name": "Türkçe",
"flag": "tr"
"flag": "tr",
"code": "tr"
},
{
"name": "Українською",
"flag": "ua"
"flag": "ua",
"code": "uk"
},
{
"name": "Tiếng Việt",
"flag": "vn"
"flag": "vn",
"code": "vi"
},
{
"name": "中文",
"flag": "cn"
"flag": "cn",
"code": "zh"
}
]
shared/data/mails.json
+202
View File
@@ -0,0 +1,202 @@
[
{
"id": "e1",
"sender": "Lucas, me (4)",
"senderEmail": "lucas@example.com",
"subject": "Direct message on Twitter",
"preview": "@LucasKriebel - Very cool :) You have a new direct message. Open Twitter to read and reply now.",
"labels": ["Social"],
"starred": true,
"date": "2025-08-27T11:49:00Z"
},
{
"id": "e2",
"sender": "Acme Support",
"senderEmail": "support@acme.io",
"subject": "Your ticket #48213 has been updated",
"preview": "Hi, we've added a detailed note to your request regarding billing. Please review the update and let us know if anything looks off.",
"labels": ["Updates"],
"starred": false,
"date": "2025-08-26T09:15:00Z"
},
{
"id": "e3",
"sender": "Marketing Weekly",
"senderEmail": "news@marketingweekly.com",
"subject": "10 growth tactics you can try today",
"preview": "We curated a list of actionable ideas from top marketers to boost acquisition, retention, and activation this quarter.",
"labels": ["Promotions"],
"starred": false,
"date": "2025-08-25T17:02:00Z"
},
{
"id": "e4",
"sender": "GitHub",
"senderEmail": "noreply@github.com",
"subject": "[tabler] New issue assigned to you",
"preview": "Issue #3294: Update email inbox page to use data file. Please triage, add labels, and provide an estimate.",
"labels": ["Important", "Updates"],
"starred": true,
"date": "2025-08-25T08:41:00Z"
},
{
"id": "e5",
"sender": "me (2), Stripe",
"senderEmail": "no-reply@stripe.com",
"subject": "Payout scheduled",
"preview": "A payout of $1,248.32 is scheduled for tomorrow. Funds typically arrive within 2 business days.",
"labels": ["Updates"],
"starred": false,
"date": "2025-08-24T12:30:00Z"
},
{
"id": "e6",
"sender": "Figma",
"senderEmail": "team@figma.com",
"subject": "You were invited to a file",
"preview": "Anna shared ‘Inbox redesign v3’ with you. Review the latest components and leave feedback in comments.",
"labels": ["Social"],
"starred": false,
"date": "2025-08-24T07:58:00Z"
},
{
"id": "e7",
"sender": "Calendly",
"senderEmail": "no-reply@calendly.com",
"subject": "Event confirmed for Fri 3 PM",
"preview": "Your meeting with Chris is confirmed for this Friday at 3 PM. A calendar invite with the video link was attached.",
"labels": ["Updates"],
"starred": false,
"date": "2025-08-23T14:21:00Z"
},
{
"id": "e8",
"sender": "Twitter",
"senderEmail": "notify@twitter.com",
"subject": "New followers this week",
"preview": "You gained 27 new followers. See who followed you and engage with their posts to grow reach.",
"labels": ["Social"],
"starred": false,
"date": "2025-08-23T06:12:00Z"
},
{
"id": "e9",
"sender": "Product Hunt",
"senderEmail": "hello@producthunt.com",
"subject": "Today's top launches",
"preview": "Catch up on trending products you might like. Today's list features tools for design and developer productivity.",
"labels": ["Promotions"],
"starred": false,
"date": "2025-08-22T19:33:00Z"
},
{
"id": "e10",
"sender": "Notion",
"senderEmail": "team@notion.so",
"subject": "Weekly summary: Inbox project",
"preview": "3 tasks completed, 2 comments, 1 new page added. Click through to see highlights and next steps.",
"labels": ["Updates"],
"starred": false,
"date": "2025-08-22T08:00:00Z"
},
{
"id": "e11",
"sender": "AWS",
"senderEmail": "no-reply@aws.amazon.com",
"subject": "Billing alert threshold reached",
"preview": "Your usage exceeded the alert threshold for this month. Consider upgrading your plan or adjusting limits.",
"labels": ["Important"],
"starred": true,
"date": "2025-08-21T18:45:00Z"
},
{
"id": "e12",
"sender": "LinkedIn",
"senderEmail": "messages-noreply@linkedin.com",
"subject": "Someone viewed your profile",
"preview": "See who looked at your profile this week. Strengthen your network by following up with recent viewers.",
"labels": ["Social"],
"starred": false,
"date": "2025-08-21T10:27:00Z"
},
{
"id": "e13",
"sender": "Google Alerts",
"senderEmail": "noreply-alerts@google.com",
"subject": "Alert for: Tabler UI",
"preview": "New articles mentioning Tabler UI were found. Skim the summaries and set alerts for related keywords.",
"labels": ["Updates"],
"starred": false,
"date": "2025-08-20T16:14:00Z"
},
{
"id": "e14",
"sender": "Medium",
"senderEmail": "noreply@medium.com",
"subject": "Stories you might like",
"preview": "Handpicked stories based on your reading history. Discover deep dives on design systems and UX workflows.",
"labels": ["Promotions"],
"starred": false,
"date": "2025-08-20T07:05:00Z"
},
{
"id": "e15",
"sender": "Slack",
"senderEmail": "feedback@slack.com",
"subject": "Missed messages in #design",
"preview": "You have 14 unread messages across 3 channels. Catch up now to keep the conversation moving.",
"labels": ["Updates"],
"starred": false,
"date": "2025-08-19T21:43:00Z"
},
{
"id": "e16",
"sender": "Sentry",
"senderEmail": "alerts@sentry.io",
"subject": "New error: TypeError in preview",
"preview": "Tabler preview threw TypeError: cannot read properties of undefined. Investigate stack trace and recent commits.",
"labels": ["Important", "Updates"],
"starred": true,
"date": "2025-08-19T11:20:00Z"
},
{
"id": "e17",
"sender": "Dribbble",
"senderEmail": "no-reply@dribbble.com",
"subject": "New shots from designers you follow",
"preview": "A fresh batch of inspiration is here. Explore new shots and save your favorites to collections.",
"labels": ["Social"],
"starred": false,
"date": "2025-08-18T15:37:00Z"
},
{
"id": "e18",
"sender": "Airbnb",
"senderEmail": "express@airbnb.com",
"subject": "Plan your next getaway",
"preview": "Deals on stays you'll love this fall. Flexible dates and free cancellation on many options.",
"labels": ["Promotions"],
"starred": false,
"date": "2025-08-18T06:50:00Z"
},
{
"id": "e19",
"sender": "Google Calendar",
"senderEmail": "calendar-notification@google.com",
"subject": "Reminder: Standup in 10 minutes",
"preview": "Daily standup starts at 9:30 AM. Share yesterday's progress, today's plan, and blockers.",
"labels": ["Updates"],
"starred": false,
"date": "2025-08-17T09:20:00Z"
},
{
"id": "e20",
"sender": "Superstore",
"senderEmail": "offers@superstore.com",
"subject": "Exclusive 25% off for you",
"preview": "Save big on electronics this weekend only. Limited quantities—use code WEEKEND25 at checkout.",
"labels": ["Promotions"],
"starred": false,
"date": "2025-08-16T13:00:00Z"
}
]
shared/data/menu.json
+62 -8
View File
@@ -1,14 +1,27 @@
{
"home": {
"url": "",
"title": "Home",
"icon": "home"
"dashboards": {
"title": "Dashboards",
"icon": "home",
"children": {
"default": {
"url": "index.html",
"title": "Default"
},
"crypto": {
"url": "dashboard-crypto.html",
"title": "Crypto"
}
}
},
"base": {
"title": "Interface",
"icon": "package",
"columns": 2,
"children": {
"all-elements": {
"title": "All Elements",
"url": "all-elements.html"
},
"accordion": {
"title": "Accordion",
"url": "accordion.html",
@@ -92,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"
@@ -139,9 +157,9 @@
"url": "modals.html",
"title": "Modals"
},
"markdown": {
"title": "Markdown",
"url": "markdown.html"
"prose": {
"title": "Prose",
"url": "prose.html"
},
"navigation": {
"url": "navigation.html",
@@ -155,10 +173,20 @@
"url": "pagination.html",
"title": "Pagination"
},
"patterns": {
"url": "patterns.html",
"title": "Patterns",
"badge": "New"
},
"placeholder": {
"url": "placeholder.html",
"title": "Placeholder"
},
"progress": {
"url": "progress.html",
"title": "Progress",
"badge": "New"
},
"segmented-control": {
"title": "Segmented control",
"url": "segmented-control.html",
@@ -231,6 +259,11 @@
"title": "Chat",
"url": "chat.html"
},
"email-inbox": {
"title": "Email inbox",
"url": "email-inbox.html",
"badge": "New"
},
"cookie-banner": {
"title": "Cookie banner",
"url": "cookie-banner.html"
@@ -251,6 +284,10 @@
"title": "Invoice",
"url": "invoice.html"
},
"pay": {
"title": "Pay",
"url": "pay.html"
},
"job-listing": {
"title": "Job listing",
"url": "job-listing.html"
@@ -302,7 +339,16 @@
},
"tasks": {
"title": "Tasks",
"url": "tasks.html"
"children": {
"kanban": {
"title": "Kanban",
"url": "tasks.html"
},
"list": {
"title": "Task List",
"url": "tasks-list.html"
}
}
},
"text-features": {
"title": "Text features",
@@ -410,6 +456,10 @@
"title": "Dropzone",
"url": "dropzone.html"
},
"sortable": {
"title": "Sortable",
"url": "sortable.html"
},
"fullcalendar": {
"url": "fullcalendar.html",
"title": "Fullcalendar"
@@ -434,6 +484,10 @@
"url": "maps-vector.html",
"title": "Map vector"
},
"tour": {
"url": "tour.html",
"title": "Tour"
},
"turbo": {
"url": "turbo-loader.html",
"title": "Turbo loader"
shared/data/notifications.json
+170
View File
@@ -0,0 +1,170 @@
[
{
"id": "1",
"title": "New order received",
"description": "Order #12345 has been placed by John Doe",
"type": "order",
"status": "unread",
"priority": "high",
"icon": "shopping-cart",
"color": "success",
"timestamp": "2025-01-15T10:30:00Z",
"user_id": "123",
"action_url": "/orders/12345",
"is_important": true
},
{
"id": "2",
"title": "Payment failed",
"description": "Payment for order #12340 failed. Please review payment details.",
"type": "payment",
"status": "unread",
"priority": "critical",
"icon": "alert-triangle",
"color": "danger",
"timestamp": "2025-01-15T09:15:00Z",
"user_id": "456",
"action_url": "/payments/12340",
"is_important": true
},
{
"id": "3",
"title": "System maintenance",
"description": "Scheduled maintenance will begin in 2 hours. Expected downtime: 30 minutes.",
"type": "system",
"status": "unread",
"priority": "medium",
"icon": "settings",
"color": "warning",
"timestamp": "2025-01-15T08:45:00Z",
"user_id": null,
"action_url": "/maintenance",
"is_important": false
},
{
"id": "4",
"title": "New customer registered",
"description": "Sarah Johnson has created a new account",
"type": "user",
"status": "read",
"priority": "low",
"icon": "user-plus",
"color": "info",
"timestamp": "2025-01-15T07:20:00Z",
"user_id": "789",
"action_url": "/customers/789",
"is_important": false
},
{
"id": "5",
"title": "Inventory alert",
"description": "Product 'Premium Widget' is running low on stock (5 items remaining)",
"type": "inventory",
"status": "unread",
"priority": "high",
"icon": "package",
"color": "warning",
"timestamp": "2025-01-15T06:30:00Z",
"user_id": null,
"action_url": "/inventory/premium-widget",
"is_important": true
},
{
"id": "6",
"title": "Support ticket resolved",
"description": "Ticket #TKT-2025-001 has been resolved by support team",
"type": "support",
"status": "read",
"priority": "medium",
"icon": "message-circle",
"color": "success",
"timestamp": "2025-01-15T05:45:00Z",
"user_id": "234",
"action_url": "/support/tickets/TKT-2025-001",
"is_important": false
},
{
"id": "7",
"title": "Security alert",
"description": "Unusual login activity detected from new location",
"type": "security",
"status": "unread",
"priority": "critical",
"icon": "shield",
"color": "danger",
"timestamp": "2025-01-15T04:15:00Z",
"user_id": "567",
"action_url": "/security/activity",
"is_important": true
},
{
"id": "8",
"title": "Backup completed",
"description": "Daily backup has been completed successfully",
"type": "system",
"status": "read",
"priority": "low",
"icon": "database",
"color": "success",
"timestamp": "2025-01-15T03:00:00Z",
"user_id": null,
"action_url": "/system/backups",
"is_important": false
},
{
"id": "9",
"title": "New review received",
"description": "5-star review received for product 'Deluxe Package'",
"type": "review",
"status": "unread",
"priority": "medium",
"icon": "star",
"color": "success",
"timestamp": "2025-01-15T02:30:00Z",
"user_id": "890",
"action_url": "/reviews/deluxe-package",
"is_important": false
},
{
"id": "10",
"title": "API rate limit warning",
"description": "API usage is approaching the rate limit (85% used)",
"type": "system",
"status": "unread",
"priority": "medium",
"icon": "activity",
"color": "warning",
"timestamp": "2025-01-15T01:45:00Z",
"user_id": null,
"action_url": "/api/usage",
"is_important": true
},
{
"id": "11",
"title": "Refund processed",
"description": "Refund for order #12335 has been processed and sent to customer",
"type": "refund",
"status": "read",
"priority": "medium",
"icon": "refresh-ccw",
"color": "info",
"timestamp": "2025-01-15T00:20:00Z",
"user_id": "345",
"action_url": "/refunds/12335",
"is_important": false
},
{
"id": "12",
"title": "New feature available",
"description": "Advanced analytics dashboard is now available for all users",
"type": "feature",
"status": "unread",
"priority": "low",
"icon": "bar-chart",
"color": "info",
"timestamp": "2025-01-14T23:10:00Z",
"user_id": null,
"action_url": "/features/analytics",
"is_important": false
}
]
shared/data/package-managers.json
+4
View File
File diff suppressed because one or more lines are too long
shared/data/people.json
+677 -2372
View File
File diff suppressed because it is too large Load Diff
shared/data/tasks.json
+221 -43
View File
@@ -1,30 +1,79 @@
{
"columns": [
{
"name": "To Do",
"name": "Upcoming",
"tasks": [
{
"name": "Enable analytics tracking",
"users": 4,
"users-offset": 6,
"name": "Improve email marketing strategy",
"assigned_to": 5,
"due_date": "August 1, 2023",
"priority": "Medium",
"users": 1,
"users-offset": 4,
"comments": 2,
"image": "static/projects/dashboard-1.png",
"likes": 7
},
{
"name": "User should receive a daily digest email",
"name": "Develop new product video",
"assigned_to": 2,
"due_date": "July 15, 2023",
"priority": "High",
"description": "Dedicated form for a category of users that will perform actions.",
"users": 1,
"users-offset": 4,
"due-date": "10 Sep",
"users-offset": 1,
"likes": 6
},
{
"name": "Change license and remove references to products",
"name": "Conduct user interviews for new feature",
"assigned_to": 3,
"due_date": "June 20, 2023",
"priority": "Low",
"color": "yellow",
"favorite": true,
"comments": 4,
"likes": 34
},
{
"name": "Create social media content calendar",
"assigned_to": 6,
"due_date": "September 5, 2023",
"priority": "Medium",
"description": "Plan and schedule social media posts for Q3",
"users": 2,
"users-offset": 5,
"comments": 8,
"likes": 12
},
{
"name": "Review and update documentation",
"assigned_to": 4,
"due_date": "July 25, 2023",
"priority": "Medium",
"users": 1,
"users-offset": 3,
"comments": 5
},
{
"name": "Plan quarterly team meeting",
"assigned_to": 7,
"due_date": "August 20, 2023",
"priority": "Low",
"favorite": true,
"users": 3,
"users-offset": 8,
"likes": 9
},
{
"name": "Redesign product landing page",
"assigned_to": 8,
"due_date": "September 1, 2023",
"priority": "High",
"description": "Complete redesign based on user feedback",
"users": 2,
"users-offset": 6,
"comments": 15,
"likes": 23
}
]
},
@@ -32,7 +81,10 @@
"name": "In Progress",
"tasks": [
{
"name": "Write a release note for Admin v1.0",
"name": "Implement new analytics tracking",
"assigned_to": 2,
"due_date": "July 1, 2023",
"priority": "Low",
"color": "green",
"comments": 11,
"subtasks": [
@@ -49,7 +101,10 @@
]
},
{
"name": "Product Update - Q4 2021",
"name": "Design new marketing campaign",
"assigned_to": 3,
"due_date": "August 15, 2023",
"priority": "High",
"description": "Dedicated form for a category of users that will perform actions.",
"starred": true,
"users": 2,
@@ -58,42 +113,77 @@
"likes": 11
},
{
"name": "Code HTML email template for welcome email",
"name": "Conduct A/B testing on landing page",
"assigned_to": 5,
"due_date": "June 30, 2023",
"priority": "Low",
"image": "static/projects/dashboard-3.png",
"comments": 11
}
]
},
{
"name": "Test",
"tasks": [
{
"name": "Design new diagrams",
"color": "red",
"users": 2,
"users-offset": 9,
"comments": 9,
"likes": 6
},
{
"name": "Improve animation loader",
"favorite": true,
"likes": 5,
"name": "Implement user authentication system",
"assigned_to": 9,
"due_date": "July 20, 2023",
"priority": "High",
"color": "red",
"description": "Add OAuth and JWT authentication",
"users": 3,
"users-offset": 4,
"comments": 18,
"likes": 14
},
{
"name": "Write blog post about product launch",
"assigned_to": 10,
"due_date": "August 5, 2023",
"priority": "Medium",
"users": 1,
"users-offset": 9,
"comments": 7,
"likes": 10
},
{
"name": "Update customer onboarding flow",
"assigned_to": 11,
"due_date": "July 12, 2023",
"priority": "Medium",
"starred": true,
"users": 2,
"users-offset": 2,
"comments": 12,
"likes": 8
},
{
"name": "Setup automated testing pipeline",
"assigned_to": 12,
"due_date": "August 25, 2023",
"priority": "High",
"color": "blue",
"users": 4,
"users-offset": 10,
"comments": 20,
"likes": 16,
"subtasks": [
{
"name": "Configure CI/CD",
"done": true
},
{
"name": "Write unit tests"
},
{
"name": "Setup code coverage"
}
]
},
{
"name": "Review customer support tickets",
"assigned_to": 13,
"due_date": "July 8, 2023",
"priority": "Low",
"users": 1,
"users-offset": 11,
"comments": 6,
"image": "static/projects/dashboard-2.png"
},
{
"name": "iOS App home page",
"users": 2,
"users-offset": 2
},
{
"name": "Changelog 1.7",
"color": "blue",
"due-date": "10 Jan",
"comments": 6
"comments": 4
}
]
},
@@ -101,13 +191,19 @@
"name": "Completed",
"tasks": [
{
"name": "Enable analytics tracking",
"name": "Optimize website performance",
"assigned_to": 3,
"due_date": "June 15, 2023",
"priority": "Low",
"users": 1,
"users-offset": 7,
"likes": 1
},
{
"name": "Coordinate with business development",
"name": "Develop mobile app prototype",
"assigned_to": 5,
"due_date": "August 10, 2023",
"priority": "Medium",
"description": "This content is a little bit longer.",
"favorite": true,
"likes": 7,
@@ -126,11 +222,93 @@
]
},
{
"name": "Managing teams",
"name": "Conduct user research interviews",
"assigned_to": 5,
"due_date": "July 20, 2023",
"priority": "Low",
"description": "Publishing industries for previewing layouts and visual <a href=\"#\">#family</a> 🔥",
"users": 2,
"likes": 4,
"users-offset": 10
},
{
"name": "Migrate database to new server",
"assigned_to": 14,
"due_date": "June 10, 2023",
"priority": "Medium",
"description": "Complete database migration with zero downtime",
"users": 5,
"users-offset": 12,
"comments": 25,
"likes": 18
},
{
"name": "Launch new marketing website",
"assigned_to": 15,
"due_date": "May 30, 2023",
"priority": "High",
"favorite": true,
"users": 3,
"users-offset": 14,
"comments": 30,
"likes": 45,
"image": "static/projects/dashboard-2.png"
},
{
"name": "Complete annual security audit",
"assigned_to": 16,
"due_date": "May 25, 2023",
"priority": "High",
"color": "red",
"users": 4,
"users-offset": 15,
"comments": 22,
"likes": 12
},
{
"name": "Design new company logo",
"assigned_to": 17,
"due_date": "April 15, 2023",
"priority": "Low",
"users": 2,
"users-offset": 16,
"comments": 9,
"likes": 21
},
{
"name": "Write technical documentation",
"assigned_to": 18,
"due_date": "June 5, 2023",
"priority": "Medium",
"description": "Document all API endpoints and integrations",
"users": 1,
"users-offset": 17,
"comments": 14,
"likes": 7,
"subtasks": [
{
"name": "Document REST API",
"done": true
},
{
"name": "Document GraphQL API",
"done": true
},
{
"name": "Create code examples"
}
]
},
{
"name": "Organize team building event",
"assigned_to": 19,
"due_date": "April 20, 2023",
"priority": "Low",
"favorite": true,
"users": 6,
"users-offset": 18,
"comments": 35,
"likes": 52
}
]
}
shared/data/transactions.json
+422
View File
@@ -0,0 +1,422 @@
[
{
"id": "1",
"counterparty": "Form Builder CP",
"counterparty_logo": "static/brands/form-builder.svg",
"payment_date": "2025-01-22",
"status_name": "pending",
"status": "warning",
"amount": -1299.22,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Annual subscription renewal",
"reference": "FB-2025-001"
},
{
"id": "2",
"counterparty": "Imperial Hotel ****",
"counterparty_logo": "static/brands/hotel.svg",
"payment_date": "2025-01-22",
"status_name": "completed",
"status": "success",
"amount": -1029.77,
"currency": "USD",
"transaction_type": "hotel",
"category": "travel",
"description": "Hotel accommodation for business trip",
"reference": "IH-2025-002"
},
{
"id": "3",
"counterparty": "Aprilynne Pills",
"counterparty_logo": "static/avatars/000m.jpg",
"payment_date": "2025-01-22",
"status_name": "pending",
"status": "warning",
"amount": 499.99,
"currency": "USD",
"transaction_type": "refund",
"category": "healthcare",
"description": "Refund for cancelled prescription",
"reference": "AP-2025-003"
},
{
"id": "4",
"counterparty": "Google Limited UK",
"counterparty_logo": "static/brands/google.svg",
"payment_date": "2025-01-22",
"status_name": "completed",
"status": "success",
"amount": -1029.77,
"currency": "USD",
"transaction_type": "advertising",
"category": "marketing",
"description": "Google Ads campaign payment",
"reference": "GL-2025-004"
},
{
"id": "5",
"counterparty": "Acme LTD UK",
"counterparty_logo": "static/brands/acme.svg",
"payment_date": "2025-01-22",
"status_name": "pending",
"status": "warning",
"amount": 2179.36,
"currency": "USD",
"transaction_type": "payment",
"category": "business",
"description": "Payment received for consulting services",
"reference": "AL-2025-005"
},
{
"id": "6",
"counterparty": "Google Limited UK",
"counterparty_logo": "static/brands/google.svg",
"payment_date": "2025-01-22",
"status_name": "canceled",
"status": "danger",
"amount": -1029.77,
"currency": "USD",
"transaction_type": "advertising",
"category": "marketing",
"description": "Cancelled Google Ads campaign",
"reference": "GL-2025-006"
},
{
"id": "7",
"counterparty": "Uber",
"counterparty_logo": "static/brands/uber.svg",
"payment_date": "2025-01-22",
"status_name": "completed",
"status": "success",
"amount": -272.88,
"currency": "USD",
"transaction_type": "transport",
"category": "travel",
"description": "Ride sharing service",
"reference": "UB-2025-007"
},
{
"id": "8",
"counterparty": "PublicOne Inc.",
"counterparty_logo": "static/brands/publicone.svg",
"payment_date": "2025-01-22",
"status_name": "completed",
"status": "success",
"amount": -199.87,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Monthly software subscription",
"reference": "PO-2025-008"
},
{
"id": "9",
"counterparty": "Github Inc.",
"counterparty_logo": "static/brands/github.svg",
"payment_date": "2025-01-22",
"status_name": "completed",
"status": "success",
"amount": -42.87,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "GitHub Pro subscription",
"reference": "GH-2025-009"
},
{
"id": "10",
"counterparty": "Form Builder PRO",
"counterparty_logo": "static/brands/form-builder-pro.svg",
"payment_date": "2025-01-22",
"status_name": "completed",
"status": "success",
"amount": -112.44,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Premium form builder subscription",
"reference": "FBP-2025-010"
},
{
"id": "11",
"counterparty": "Netflix",
"counterparty_logo": "static/brands/netflix.svg",
"payment_date": "2025-01-21",
"status_name": "completed",
"status": "success",
"amount": -15.99,
"currency": "USD",
"transaction_type": "subscription",
"category": "entertainment",
"description": "Monthly streaming subscription",
"reference": "NF-2025-011"
},
{
"id": "12",
"counterparty": "Amazon",
"counterparty_logo": "static/brands/amazon.svg",
"payment_date": "2025-01-21",
"status_name": "completed",
"status": "success",
"amount": -89.99,
"currency": "USD",
"transaction_type": "purchase",
"category": "shopping",
"description": "Office supplies purchase",
"reference": "AMZ-2025-012"
},
{
"id": "13",
"counterparty": "Starbucks",
"counterparty_logo": "static/brands/starbucks.svg",
"payment_date": "2025-01-21",
"status_name": "completed",
"status": "success",
"amount": -4.75,
"currency": "USD",
"transaction_type": "food",
"category": "dining",
"description": "Coffee purchase",
"reference": "SB-2025-013"
},
{
"id": "14",
"counterparty": "Microsoft",
"counterparty_logo": "static/brands/microsoft.svg",
"payment_date": "2025-01-21",
"status_name": "pending",
"status": "warning",
"amount": -299.99,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Microsoft 365 Business subscription",
"reference": "MS-2025-014"
},
{
"id": "15",
"counterparty": "TechCorp Solutions",
"counterparty_logo": "static/brands/techcorp.svg",
"payment_date": "2025-01-21",
"status_name": "completed",
"status": "success",
"amount": 1500.00,
"currency": "USD",
"transaction_type": "payment",
"category": "business",
"description": "Payment for web development services",
"reference": "TCS-2025-015"
},
{
"id": "16",
"counterparty": "Spotify",
"counterparty_logo": "static/brands/spotify.svg",
"payment_date": "2025-01-20",
"status_name": "completed",
"status": "success",
"amount": -9.99,
"currency": "USD",
"transaction_type": "subscription",
"category": "entertainment",
"description": "Premium music subscription",
"reference": "SP-2025-016"
},
{
"id": "17",
"counterparty": "Zoom",
"counterparty_logo": "static/brands/zoom.svg",
"payment_date": "2025-01-20",
"status_name": "completed",
"status": "success",
"amount": -149.90,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Annual Zoom Pro subscription",
"reference": "ZM-2025-017"
},
{
"id": "18",
"counterparty": "Slack",
"counterparty_logo": "static/brands/slack.svg",
"payment_date": "2025-01-20",
"status_name": "completed",
"status": "success",
"amount": -67.50,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Monthly Slack workspace subscription",
"reference": "SL-2025-018"
},
{
"id": "19",
"counterparty": "Dropbox",
"counterparty_logo": "static/brands/dropbox.svg",
"payment_date": "2025-01-20",
"status_name": "pending",
"status": "warning",
"amount": -119.88,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Annual cloud storage subscription",
"reference": "DB-2025-019"
},
{
"id": "20",
"counterparty": "Digital Marketing Agency",
"counterparty_logo": "static/brands/dma.svg",
"payment_date": "2025-01-19",
"status_name": "completed",
"status": "success",
"amount": 2500.00,
"currency": "USD",
"transaction_type": "payment",
"category": "business",
"description": "Payment for marketing campaign",
"reference": "DMA-2025-020"
},
{
"id": "21",
"counterparty": "Apple",
"counterparty_logo": "static/brands/apple.svg",
"payment_date": "2025-01-19",
"status_name": "completed",
"status": "success",
"amount": -99.99,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Apple Developer Program",
"reference": "APL-2025-021"
},
{
"id": "22",
"counterparty": "LinkedIn",
"counterparty_logo": "static/brands/linkedin.svg",
"payment_date": "2025-01-19",
"status_name": "completed",
"status": "success",
"amount": -29.99,
"currency": "USD",
"transaction_type": "subscription",
"category": "business",
"description": "LinkedIn Premium subscription",
"reference": "LI-2025-022"
},
{
"id": "23",
"counterparty": "Canva",
"counterparty_logo": "static/brands/canva.svg",
"payment_date": "2025-01-18",
"status_name": "completed",
"status": "success",
"amount": -119.99,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Annual Canva Pro subscription",
"reference": "CV-2025-023"
},
{
"id": "24",
"counterparty": "Figma",
"counterparty_logo": "static/brands/figma.svg",
"payment_date": "2025-01-18",
"status_name": "completed",
"status": "success",
"amount": -144.00,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Annual Figma Professional subscription",
"reference": "FG-2025-024"
},
{
"id": "25",
"counterparty": "Notion",
"counterparty_logo": "static/brands/notion.svg",
"payment_date": "2025-01-18",
"status_name": "pending",
"status": "warning",
"amount": -96.00,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Annual Notion Team subscription",
"reference": "NT-2025-025"
},
{
"id": "26",
"counterparty": "Salesforce",
"counterparty_logo": "static/brands/salesforce.svg",
"payment_date": "2025-01-17",
"status_name": "completed",
"status": "success",
"amount": -150.00,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Monthly Salesforce subscription",
"reference": "SF-2025-026"
},
{
"id": "27",
"counterparty": "HubSpot",
"counterparty_logo": "static/brands/hubspot.svg",
"payment_date": "2025-01-17",
"status_name": "completed",
"status": "success",
"amount": -89.00,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Monthly HubSpot Marketing subscription",
"reference": "HS-2025-027"
},
{
"id": "28",
"counterparty": "Mailchimp",
"counterparty_logo": "static/brands/mailchimp.svg",
"payment_date": "2025-01-17",
"status_name": "completed",
"status": "success",
"amount": -59.99,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Monthly email marketing subscription",
"reference": "MC-2025-028"
},
{
"id": "29",
"counterparty": "Trello",
"counterparty_logo": "static/brands/trello.svg",
"payment_date": "2025-01-16",
"status_name": "completed",
"status": "success",
"amount": -59.88,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Annual Trello Business Class",
"reference": "TR-2025-029"
},
{
"id": "30",
"counterparty": "Asana",
"counterparty_logo": "static/brands/asana.svg",
"payment_date": "2025-01-16",
"status_name": "completed",
"status": "success",
"amount": -131.88,
"currency": "USD",
"transaction_type": "subscription",
"category": "software",
"description": "Annual Asana Premium subscription",
"reference": "AS-2025-030"
}
]
shared/data/urls.json
+70
View File
@@ -54,5 +54,75 @@
"unique": 450,
"bounce": "8.69%",
"data": "6, 15, 13, 13, 5, 7, 17, 20, 19"
},
{
"uri": "/buttons.html",
"visitors": 542,
"unique": 487,
"bounce": "28.45%",
"data": "8, 12, 15, 9, 6, 11, 14, 7, 13"
},
{
"uri": "/cards.html",
"visitors": 498,
"unique": 445,
"bounce": "31.23%",
"data": "5, 9, 12, 8, 15, 11, 6, 14, 10"
},
{
"uri": "/typography.html",
"visitors": 423,
"unique": 378,
"bounce": "35.67%",
"data": "7, 11, 9, 13, 8, 12, 6, 15, 10"
},
{
"uri": "/alerts.html",
"visitors": 387,
"unique": 342,
"bounce": "42.18%",
"data": "4, 8, 11, 7, 13, 9, 12, 6, 14"
},
{
"uri": "/modals.html",
"visitors": 356,
"unique": 298,
"bounce": "38.76%",
"data": "9, 6, 12, 8, 11, 14, 7, 13, 10"
},
{
"uri": "/tables.html",
"visitors": 312,
"unique": 267,
"bounce": "45.83%",
"data": "6, 10, 8, 12, 7, 11, 9, 13, 5"
},
{
"uri": "/charts.html",
"visitors": 289,
"unique": 234,
"bounce": "52.94%",
"data": "3, 7, 9, 5, 11, 8, 12, 6, 10"
},
{
"uri": "/pricing.html",
"visitors": 267,
"unique": 223,
"bounce": "48.69%",
"data": "8, 5, 11, 7, 9, 12, 6, 10, 13"
},
{
"uri": "/blog/",
"visitors": 245,
"unique": 198,
"bounce": "55.10%",
"data": "4, 8, 6, 10, 7, 9, 11, 5, 12"
},
{
"uri": "/profile.html",
"visitors": 198,
"unique": 156,
"bounce": "61.62%",
"data": "2, 6, 8, 4, 9, 7, 10, 5, 11"
}
]
shared/e11ty/config.mjs
+21
View File
@@ -0,0 +1,21 @@
export function appConfig(eleventyConfig) {
eleventyConfig.setOutputDirectory("dist");
eleventyConfig.setInputDirectory("pages");
eleventyConfig.setLayoutsDirectory("../../shared/layouts");
eleventyConfig.setIncludesDirectory("../../shared/includes");
eleventyConfig.setDataDirectory("../../shared/data");
eleventyConfig.addWatchTarget("../shared/**/*.html");
eleventyConfig.addWatchTarget("./pages/**/*.html");
eleventyConfig.setLiquidOptions({
timezoneOffset: 0,
jekyllInclude: true,
dynamicPartials: true,
jekyllWhere: true,
});
eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
}
shared/e11ty/data.mjs
+10 -4
View File
@@ -1,10 +1,16 @@
import { readFileSync } from "fs";
import { join } from "path";
import { join, dirname } from "path";
import { fileURLToPath } from "url";
export function appData(eleventyConfig) {
eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "core", "CHANGELOG.md"), "utf-8"));
eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join("..", "core", "libs.json"), "utf-8")));
const currentDir = dirname(fileURLToPath(import.meta.url));
console.log('currentDir', currentDir);
eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join(currentDir, "..", "..", "core", "package.json"), "utf-8"))) ;
eleventyConfig.addGlobalData("changelog", readFileSync(join(currentDir, "..", "..", "core", "CHANGELOG.md"), "utf-8"));
eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join(currentDir, "..", "..", "core", "libs.json"), "utf-8")));
// Analytics Environment Variables
eleventyConfig.addGlobalData("posthogApiKey", process.env.NEXT_PUBLIC_POSTHOG_KEY);
shared/e11ty/filters.mjs
+203 -31
View File
@@ -1,20 +1,10 @@
import { readFileSync, existsSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
import { join, dirname } from 'node:path';
const __dirname = dirname(fileURLToPath(import.meta.url));
export function appFilters(eleventyConfig) {
/**
* Server
*/
if (process.env.ELEVENTY_RUN_MODE === "serve") {
eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
}
eleventyConfig.setLiquidOptions({
timezoneOffset: 0,
jekyllInclude: true,
dynamicPartials: true,
jekyllWhere: true,
});
eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
/**
* Filters
*/
@@ -135,7 +125,7 @@ export function appFilters(eleventyConfig) {
eleventyConfig.addFilter("random_number", randomNumber);
eleventyConfig.addFilter("first_letters", function capitalizeFirstLetter(string) {
return string.split(' ').map(word => word.charAt(0)).join('');
return (string || '').split(' ').map(word => word.charAt(0)).join('');
})
eleventyConfig.addFilter("uc_first", function capitalizeFirstLetter(string) {
@@ -147,7 +137,11 @@ export function appFilters(eleventyConfig) {
return Object.keys(elem).length;
}
return elem.length;
if (elem) {
return elem.length;
}
return 0;
})
eleventyConfig.addFilter("first", function (elem) {
@@ -155,7 +149,7 @@ export function appFilters(eleventyConfig) {
return elem[Object.keys(elem)[0]];
}
return elem[0];
return elem ? elem[0] : null;
})
// Convert a URL path to an absolute URL
@@ -172,40 +166,218 @@ export function appFilters(eleventyConfig) {
// time ago from today
eleventyConfig.addFilter("timeago", function (date) {
const seconds = Math.floor((new Date() - date) / 1000);
let seconds;
if (typeof date === 'number') {
seconds = date;
} else {
seconds = Math.floor((new Date() - date) / 1000);
}
let interval = Math.floor(seconds / 31536000);
if (interval > 1) {
return interval + " years ago";
if (interval >= 1) {
return `${interval} year${interval > 1 ? 's' : ''} ago`;
}
interval = Math.floor(seconds / 2592000);
if (interval > 1) {
return interval + " months ago";
if (interval >= 1) {
return `${interval} month${interval > 1 ? 's' : ''} ago`;
}
interval = Math.floor(seconds / 86400);
if (interval > 1) {
return interval + " days ago";
if (interval >= 1) {
return `${interval} day${interval > 1 ? 's' : ''} ago`;
}
interval = Math.floor(seconds / 3600);
if (interval > 1) {
return interval + " hours ago";
if (interval >= 1) {
return `${interval} hour${interval > 1 ? 's' : ''} ago`;
}
interval = Math.floor(seconds / 60);
if (interval > 1) {
return interval + " minutes ago";
if (interval >= 1) {
return `${interval} minute${interval > 1 ? 's' : ''} ago`;
}
if (seconds > 0) {
return Math.floor(seconds) + " seconds ago";
return `${Math.floor(seconds)} second${Math.floor(seconds) > 1 ? 's' : ''} ago`;
}
return "now";
})
function buildCollectionTree(flatData) {
const tree = [];
const lookup = {};
flatData
.filter(item => item.url !== '/')
.forEach(item => {
lookup[item.url] = { ...item, children: [] };
});
flatData.forEach(item => {
const parts = item.url.split('/').filter(Boolean);
if (parts.length === 1) {
tree.push(lookup[item.url]);
} else {
const parentUrl = '/' + parts.slice(0, -1).join('/') + '/';
if (lookup[parentUrl]) {
lookup[parentUrl].children.push(lookup[item.url]);
} else {
tree.push(lookup[item.url]);
}
}
});
return tree;
}
eleventyConfig.addFilter("collection-tree", function (collection) {
const a = collection.map(item => {
return {
data: item.data,
page: item.page,
url: item.url,
children: []
}
}).sort((a, b) => {
const orderA = a.data.order ?? 999;
const orderB = b.data.order ?? 999;
if (orderA !== orderB) {
return orderA - orderB;
}
const titleA = a.data.title ?? '';
const titleB = b.data.title ?? '';
return titleA.localeCompare(titleB);
});
return buildCollectionTree(a);
});
eleventyConfig.addFilter("collection-children", function (collection, page) {
const url = page.url.split('/').filter(Boolean).join('/');
const filteredCollection = collection.filter(item => {
const parts = item.url.split('/').filter(Boolean);
return parts.length > 1 && parts.slice(0, -1).join('/') === url;
});
return filteredCollection.sort((a, b) => {
return (a.data?.order || 999) - (b.data?.order || 999);
});
});
eleventyConfig.addFilter("next-prev", function (collection, page) {
const items = collection
.filter(item => {
const parts = item.url.split('/').filter(Boolean);
return parts.length > 1 && parts.slice(0, -1).join('/') === page.url.split('/').filter(Boolean).slice(0, -1).join('/');
})
.sort((a, b) => {
return a.data.title.localeCompare(b.data.title);
})
.sort((a, b) => {
return (a.data?.order || 999) - (b.data?.order || 999);
});
const index = items.findIndex(item => item.url === page.url);
const prevPost = index > 0 ? items[index - 1] : null;
const nextPost = index < items.length - 1 ? items[index + 1] : null;
return {
prev: prevPost ? prevPost : null,
next: nextPost ? nextPost : null,
};
});
const generateUniqueId = (text) => {
let id = text
.replace(/<[^>]+>/g, "")
.replace(/\s/g, "-")
.replace(/[^\w-]+/g, "")
.replace(/--+/g, "-")
.replace(/^-+|-+$/g, "")
.toLowerCase();
// Ensure ID doesn't start with a number (invalid HTML)
if (/^[0-9]/.test(id)) {
id = "h" + id;
}
return id;
}
eleventyConfig.addFilter("headings-id", function (content) {
return content.replace(/<h([1-6])>([^<]+)<\/h\1>/g, (match, level, text) => {
const headingId = generateUniqueId(text);
return `<h${level} id="${headingId}">${text}</h${level}>`;
});
})
eleventyConfig.addFilter("toc", function (name) {
const toc = [];
const contentWithoutExamples = name.replace(/<!--EXAMPLE-->[\s\S]*?<!--\/EXAMPLE-->/g, '');
const headings = contentWithoutExamples.match(/<h([23])>([^<]+)<\/h\1>/g);
if (headings) {
headings.forEach(heading => {
const level = parseInt(heading.match(/<h([1-6])>/)[1]);
const text = heading.replace(/<[^>]+>/g, "");
const id = generateUniqueId(text);
toc.push({ level, text, id });
});
}
return toc;
})
eleventyConfig.addFilter("remove-href", function (content) {
return content.replace(/href="#"/g, 'href="javascript:void(0)"');
})
/**
* Shortcodes
*/
eleventyConfig.addShortcode('scss-docs', function (name, filename) {
const file = join(__dirname, `../../core/scss/${filename}`)
if (existsSync(file)) {
const content = readFileSync(file, 'utf8');
const regex = new RegExp(`\/\/\\sscss-docs-start\\s${name}\\n(.+?)\/\/\\sscss-docs-end`, 'gs')
const m = content.matchAll(regex)
if (m) {
const matches = [...m]
if (matches[0] && matches[0][1]) {
const lines = matches[0][1].split('\n');
// Find minimum number of leading spaces in non-empty lines
const minIndent = lines
.filter(line => line.trim().length > 0)
.reduce((min, line) => {
const match = line.match(/^(\s*)/);
const leadingSpaces = match ? match[1].length : 0;
return Math.min(min, leadingSpaces);
}, Infinity);
// Remove that many spaces from the start of each line
const result = lines.map(line => line.startsWith(' '.repeat(minIndent))
? line.slice(minIndent)
: line).join('\n');
return "\n```scss\n" + result.trimRight() + "\n```\n"
}
}
}
return ''
})
const tags = ["capture_global", "endcapture_global", "highlight", "endhighlight"];
tags.forEach(tag => {
eleventyConfig.addLiquidTag(tag, function (liquidEngine) {
shared/includes/cards/body-placeholder.html
+2 -2
View File
@@ -1,5 +1,5 @@
{% assign width = include.width | default: 400 %}
{% assign height = include.height | default: 200 %}
<div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100" %}
<div class="card-body{% if include.class %} {{ include.class }}{% endif %}">
{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100 border rounded" %}
</div>
shared/includes/cards/card-background-icon.html
+12
View File
@@ -0,0 +1,12 @@
<div class="card bg-primary text-primary-fg">
<div class="card-stamp">
<div class="card-stamp-icon bg-white text-primary">
{% include "ui/icon.html" icon="star" %}
</div>
</div>
<div class="card-body">
<h3 class="card-title">Card with background and icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
shared/includes/cards/card-ribbon-text.html
+8
View File
@@ -0,0 +1,8 @@
<div class="card">
<div class="ribbon bg-red">NEW</div>
<div class="card-body">
<h3 class="card-title">Card with text ribbon</h3>
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
shared/includes/cards/card-ribbon-top.html
+8
View File
@@ -0,0 +1,8 @@
<div class="card">
<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
<div class="card-body">
<h3 class="card-title">Card with top ribbon</h3>
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
shared/includes/cards/card-tabs.html
+4 -4
View File
@@ -1,12 +1,12 @@
{% assign tabs-count = include.count | default: 3 %}
{% assign id = include.id | default: 'top' %}
{% assign tabs = (1..tabs-count) %}
{% assign tabs = 'Activity,Profile,Settings' | split: "," %}
{% capture tabs-html %}
<!-- Cards navigation -->
<ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
{% for tab in tabs %}
<li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
<li class="nav-item"><a href="#tab-{{ id }}-{{ forloop.index }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">{{ tab }}</a></li>
{% endfor %}
</ul>
{%- endcapture %}
@@ -15,9 +15,9 @@
<div class="tab-content">
{% for tab in tabs %}
<!-- Content of card #{{ tab }} -->
<div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
<div id="tab-{{ id }}-{{ forloop.index }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
<div class="card-body">
<div class="card-title">Content of tab #{{ tab }}</div>
<div class="card-title">{{ tab }}</div>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
shared/includes/cards/card.html
+2 -2
View File
@@ -2,7 +2,7 @@
<{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include['empty'] %}
{% include "ui/empty.html" illustration=true %}
{% include "ui/empty.html" illustration="not-found" height=160 %}
{% else %}
@@ -78,7 +78,7 @@
{% when "check" %}
{% include "ui/form/check.html" empty=true checked=true class="m-0" %}
{% when "avatars" %}
{% include "ui/avatar-list.html" stacked=true text="+3" %}
{% include "ui/avatar-list.html" stacked=true text="+3" size="sm" %}
{% when "more" %}
<a href="#">More information</a>
{% endcase %}
shared/includes/cards/charts/active-users-2.html
+13
View File
@@ -0,0 +1,13 @@
<div class="card">
<div class="card-body">
<div class="subheader">Active Users</div>
<div class="d-flex align-items-baseline mb-2">
<div class="h1 mb-0 me-2">25,782</div>
<div class="me-auto">
{% include "ui/trending.html" value=-1 %}
</div>
</div>
{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
</div>
</div>
shared/includes/cards/charts/revenue.html
+1 -1
View File
@@ -13,5 +13,5 @@
</div>
</div>
</div>
{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom" %}
{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom-3" %}
</div>
shared/includes/cards/charts/social-referrals.html
+12
View File
@@ -0,0 +1,12 @@
<div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ms-auto">
{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
</div>
</div>
{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
</div>
</div>
shared/includes/cards/charts/total-users.html
+14
View File
@@ -0,0 +1,14 @@
<div class="card">
<div class="card-body">
<div class="subheader">Total Users</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 me-2">75,782</div>
<div class="me-auto">
{% include "ui/trending.html" value=2 %}
</div>
</div>
<div class="text-secondary mt-2">24,635 users increased from last month</div>
</div>
{% include "ui/chart.html" chart-id="visitors" height="6" %}
</div>
shared/includes/cards/code.html
+1 -1
View File
@@ -3,7 +3,7 @@
<h3 class="card-title">Card with code</h3>
</div>
<div class="card-code">
{% highlight scss %}
{% highlight css %}
.card-footer {
background: transparent;
shared/includes/cards/configuration.html
+1 -1
View File
@@ -18,7 +18,7 @@
<dd class="col-7">tabler</dd>
<dt class="col-5">Location:</dt>
<dd class="col-7">{% include "ui/flag.html" flag="pl" %} Poland</dd>
<dd class="col-7">{% include "ui/flag.html" flag="pl" size="xxs" %} Poland</dd>
<dt class="col-5">IP Address:</dt>
<dd class="col-7">46.113.11.3</dd>
shared/includes/cards/delete-confirm.html
+12
View File
@@ -0,0 +1,12 @@
<div class="card card-gradient card-gradient-danger">
<div class="card-body p-5 text-center">
<h3 class="card-title">Are you sure to delete this card?</h3>
<p class="text-secondary">If you delete this card, you will not be able to recover it.</p>
<div class="btn-list btn-list-center mt-5">
{% include "ui/button.html" text="Yes, delete it" color="danger" %}
{% include "ui/button.html" text="Cancel" %}
</div>
</div>
</div>
shared/includes/cards/empty-team.html
+12
View File
@@ -0,0 +1,12 @@
<div class="card card-lg card-dashed card-transparent">
<div class="card-body text-center">
<div class="mb-3">
{% include "ui/avatar-list.html" stacked %}
</div>
<h3 class="card-title">No Team Members</h3>
<p class="text-secondary">Invite your team to<br>collaborate on this project.</p>
<div class="mt-4">
{% include "ui/button.html" text="Invite Members" color="primary" icon="plus" %}
</div>
</div>
</div>
shared/includes/cards/form/layout.html
+4 -1
View File
@@ -1,5 +1,5 @@
{% assign horizontal = include.horizontal | default: false %}
<form class="card">
<form class="card h-100">
<div class="card-header">
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
</div>
@@ -64,6 +64,9 @@
</label>
</div>
</div>
</div>
<div class="card-footer">
<div class="text-end">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
shared/includes/cards/form/payment.html
+91
View File
@@ -0,0 +1,91 @@
<form class="card">
<div class="card-body">
<h3 class="card-title">Payment Method</h3>
<p class="card-subtitle mb-4">All transactions are secure and encrypted</p>
<div class="mb-3">
<label class="form-label">Name on Card</label>
<input type="text" class="form-control" placeholder="John Doe">
</div>
<div class="row">
<div class="col-8">
<div class="mb-3">
<label class="form-label">Card Number</label>
<input type="text" class="form-control" placeholder="1234 5678 9012 3456">
<small class="form-hint">Enter your 16-digit number.</small>
</div>
</div>
<div class="col-4">
<div class="mb-3">
<label class="form-label">CVV</label>
<input type="text" class="form-control" placeholder="123">
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="mb-3">
<label class="form-label">Month</label>
<select class="form-select">
<option value="">MM</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="col-6">
<div class="mb-3">
<label class="form-label">Year</label>
<select class="form-select">
<option value="">YYYY</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</div>
</div>
</div>
<hr class="my-4" />
<h3 class="card-title">Billing Address</h3>
<p class="card-subtitle mb-4">The billing address associated with your payment method</p>
<div class="mb-3">
<label class="form-check">
<input class="form-check-input" type="checkbox" checked>
<span class="form-check-label">Same as shipping address</span>
</label>
</div>
<hr class="my-4" />
<div class="mb-3">
<label class="form-label">Comments</label>
<textarea class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
</div>
<div class="mt-4">
<div class="btn-list">
{% include "ui/button.html" text="Submit" color="primary" %}
{% include "ui/button.html" text="Cancel" %}
</div>
</div>
</div>
</form>
shared/includes/cards/happy-birthday.html
+12
View File
@@ -0,0 +1,12 @@
<div class="card card-gradient card-gradient-rainbow">
<div class="card-body text-center p-5">
<div class="display-5 leading-none mb-2">🍾 🎉</div>
<h1>Happy Birthday, Andrew!</h1>
<p class="text-secondary">We truly hope your day is brimming with joy, laughter, and countless moments that bring a smile to your face!</p>
<p class="text-secondary">To celebrate your special day, here's a discount code just for you: <strong class="text-body">NWYR20</strong>. Enjoy <strong class="text-body">20% off</strong> your next purchase!</p>
<div class="mt-5">
{% include "ui/button.html" text="Grab my special deal" icon="gift" color="primary" %}
</div>
</div>
</div>
shared/includes/cards/icons-banner.html
+2 -2
View File
@@ -1,6 +1,6 @@
{% assign icons-count = icons-info.count %}
<div class="card card-md sticky-top{% if include.class %} {{ include.class }}{% endif %}">
<div class="card card-md{% if include.class %} {{ include.class }}{% endif %}">
<div class="card-stamp card-stamp-lg">
<div class="card-stamp-icon bg-primary">
{% include "ui/icon.html" icon="ghost" %}
@@ -10,7 +10,7 @@
<div class="row align-items-center">
<div class="col-10">
<h3 class="h1">Tabler Icons</h3>
<div class="markdown">
<div class="prose">
All icons come from the Tabler Icons set and are MIT-licensed. Visit
<a href="{{ site.icons.link }}" target="_blank" rel="noopener">Tabler Icons Website</a>,
download any of the {{ icons-count }} icons in SVG, PNG or&nbsp;React and use them in your favourite design tools.
shared/includes/cards/invoice.html
+2 -2
View File
@@ -84,8 +84,8 @@
<td class="text-end">$5.000,00</td>
</tr>
<tr>
<td colspan="4" class="font-weight-bold text-uppercase text-end">Total Due</td>
<td class="font-weight-bold text-end">$30.000,00</td>
<td colspan="4" class="fw-semibold text-uppercase text-end">Total Due</td>
<td class="fw-semibold text-end">$30.000,00</td>
</tr>
</table>
shared/includes/cards/pricing-card.html
+1 -1
View File
@@ -6,7 +6,7 @@
{% endif %}
<div class="card-body text-center">
<div class="text-uppercase text-secondary font-weight-medium">{{ include.category | default: 'Enterprise' }}</div>
<div class="text-uppercase text-secondary fw-medium">{{ include.category | default: 'Enterprise' }}</div>
<div class="display-5 fw-bold my-3">${{ include.price | default: '79' }}</div>
shared/includes/cards/pricing-plan.html
+37
View File
@@ -0,0 +1,37 @@
<div class="card card-gradient card-gradient-love">
<div class="ribbon bg-pink">
Featured
</div>
<div class="card-body">
<div class="h-subheader text-pink">
Professional
</div>
<div class="d-flex align-items-baseline mt-5">
<div class="display-5">$199</div>
<div class="fs-1 text-secondary">/ month</div>
</div>
<ul class="list-unstyled mt-6 space-y space-y-2">
<li class="d-flex gap-2">
<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
<div><strong>Unlimited</strong> Target Audience</div>
</li>
<li class="d-flex gap-2">
<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
<div><strong>1</strong> User Account</div>
</li>
<li class="d-flex gap-2">
<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
<div><strong>100+</strong> Video Tuts</div>
</li>
<li class="d-flex gap-2">
<div>{% include "ui/icon.html" icon="x" color="secondary" %}</div>
<div class="text-secondary">Public Displays</div>
</li>
</ul>
<p class="mt-4 text-muted">This plan is perfect for small businesses and startups. It includes all the features you need to get started.</p>
<div class="mt-6">
{% include "ui/button.html" text="Purchase Now" color="pink" block %}
</div>
</div>
</div>
shared/includes/cards/profile-contact.html
+20
View File
@@ -0,0 +1,20 @@
{% assign person = include.person | default: people[1] %}
<div class="card card-gradient card-gradient-{{ include.color | default: 'yellow' }}">
<div class="card-body text-center py-6">
<div class="position-absolute top-0 end-0 p-1">
<div class="btn btn-action">{% include "ui/icon.html" icon="star" color="yellow" type="filled" %}</div>
</div>
<div>
{% include "ui/avatar.html" size="2xl" person=person shape="rounded-circle" %}
</div>
<div class="h1 mt-4 mb-1">{{ person.full_name }}</div>
<div class="text-secondary">{{ person.job_title }}</div>
<div class="btn-list justify-content-center mt-3">
<a href="#" class="btn btn-icon btn-pill" title="Message" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="message" %}</a>
<a href="#" class="btn btn-icon btn-pill" title="Phone" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="phone" %}</a>
<a href="#" class="btn btn-icon btn-pill" title="Email" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="mail" %}</a>
</div>
</div>
</div>
shared/includes/cards/small-stats.html
+18 -6
View File
@@ -1,11 +1,12 @@
{% assign chart-type = include.chart-type | default: 'line' %}
{% assign chart-position = include.chart-position | default: 'right' %}
<div class="card card-sm">
{% assign chart-color = include.color | default: 'primary' %}
<div class="card card-sm{% if include.class %} {{ include.class }}{% endif %}">
<div class="card-body">
<div class="row align-items-center">
{% if include.icon %}
<div class="col-auto">
<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar">{% include "ui/icon.html" icon=include.icon %}</span>
<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar avatar-square">{% include "ui/icon.html" icon=include.icon %}</span>
</div>
{% elsif include.person-id %}
<div class="col-auto">
@@ -19,24 +20,35 @@
<div class="col">
<div class="font-weight-medium">
<div class="fw-medium">
{{ include.title | default: 1700 }}
{% if include.small-icon %}
{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
{% endif %}
{% if include.description-value %}
<span class="float-end font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
<span class="float-end fw-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
{% endif %}
</div>
<div class="text-secondary">
{{ include.description | default: "Users" }}
</div>
</div>
{% if include.chart-data and chart-position=="right" %}
<div class="col-auto">
{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=chart-color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
{% if include.trending %}
<div class="col-auto">
{% include "ui/trending.html" value=include.trending %}
</div>
{% endif %}
{% if include.button %}
<div class="col-auto">
{% include "ui/button.html" text=include.button size="sm" %}
</div>
{% endif %}
</div>
shared/includes/cards/stat-card.html
+17
View File
@@ -0,0 +1,17 @@
{% assign title = include.title | default: "Title" %}
{% assign value = include.value | default: "" %}
{% assign icon = include.icon | default: "user" %}
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<h4 class="subheader mb-1">{{ title }}</h4>
<div class="h3 m-0">{{ value }}</div>
</div>
<div class="col-auto">
{% include "ui/avatar.html" icon=icon size="lg" %}
</div>
</div>
</div>
</div>
shared/includes/cards/stat-gradient.html
+23
View File
@@ -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 %}
<div class="card card-gradient card-gradient-{{ card-color }} card-gradient-start">
<div class="card-body">
<div class="row g-3">
<div class="col">
<h4 class="subheader mb-1">{{ card-title }}</h4>
<div class="h3 m-0">{{ card-value }}</div>
</div>
<div class="col-auto">
{% include "ui/avatar.html" icon=card-icon color=card-color %}
</div>
<div class="col-12">
{% include "ui/progress.html" value=card-progress color=card-color size="sm" %}
</div>
</div>
</div>
</div>
shared/includes/cards/storage-usage.html
+33
View File
@@ -0,0 +1,33 @@
<div class="card">
<div class="card-body">
<p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
<div class="progress progress-separated mb-3">
<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
</div>
<div class="row">
<div class="col-auto d-flex align-items-center pe-2">
<span class="legend me-2 bg-primary"></span>
<span>Regular</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
</div>
<div class="col-auto d-flex align-items-center px-2">
<span class="legend me-2 bg-info"></span>
<span>System</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
</div>
<div class="col-auto d-flex align-items-center px-2">
<span class="legend me-2 bg-success"></span>
<span>Shared</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
</div>
<div class="col-auto d-flex align-items-center ps-2">
<span class="legend me-2"></span>
<span>Free</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
</div>
</div>
</div>
</div>
shared/includes/cards/store-product.html
+2 -2
View File
@@ -3,7 +3,7 @@
<div class="card">
<div class="card-body">
<div class="mb-4 text-center">
<img src="{{ page | relative }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
<img src="{{ page | relative }}/static/products/{{ product.image }}" alt="{{ product.name }}" class="img-fluid">
</div>
<h4 class="card-title"><a href="#">{{ product.name }}</a></h4>
<div class="mt-5 d-flex align-items-center">
@@ -11,7 +11,7 @@
<strong>{{ product.price }}</strong>
</div>
<div class="ms-auto">
<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='plus' %} Add to cart</a>
<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='shopping-cart' %} Buy</a>
</div>
</div>
</div>
shared/includes/cards/success-message.html
+14
View File
@@ -0,0 +1,14 @@
<div class="card card-gradient card-gradient-success">
<div class="card-body p-5 text-center">
<div class="mb-3">
{% include "ui/icon.html" icon="circle-check" class="icon-lg" color="success" %}
</div>
<h3 class="card-title">Success!</h3>
<p class="text-secondary">Your changes have been saved successfully.</p>
<div class="btn-list btn-list-center mt-5">
{% include "ui/button.html" text="Continue" color="success" %}
</div>
</div>
</div>
shared/includes/cards/tables/progressbg.html
+3 -6
View File
@@ -10,15 +10,12 @@
</tr>
</thead>
<tbody>
{% for url in urls %}
{% for url in urls limit: 8 %}
<tr>
<td>
<div class="progressbg">
{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %}
<div class="progressbg-text">{{ url.uri }}</div>
</div>
{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
</td>
<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
<td class="w-1 fw-medium text-end">{{ url.visitors }}</td>
</tr>
{% endfor %}
</tbody>
shared/includes/cards/user-card.html
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="row">
{% unless include.right %}{{ col-avatar }}{% endunless %}
<div class="col">
<div class="font-weight-medium">{{ person.full_name }}</div>
<div class="fw-medium">{{ person.full_name }}</div>
<div class="text-secondary">{{ person.job_title }}</div>
</div>
{% if include.right %}{{ col-avatar }}{% endif %}
shared/includes/cards/weather.html
+24
View File
@@ -0,0 +1,24 @@
{% assign icon = include.icon | default: 'cloud-rain' %}
<div class="card card-gradient card-gradient-{{ include.color | default: 'blue' }} card-gradient-end">
<div class="card-body">
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<h3 class="card-title mb-2">{{ include.city | default: 'Warsaw' }}</h3>
</div>
<div class="col">
{% include "ui/icon.html" icon=icon %}
</div>
</div>
<div class="text-secondary">
{{ include.description | default: 'Cloudy morning' }}
</div>
</div>
<div class="col-auto">
<div class="display-5 lh-1 fw-lighter">{{ include.temperature | default: 20 }}&deg;</div>
</div>
</div>
</div>
</div>
shared/includes/cards/welcome.html
+2 -2
View File
@@ -1,9 +1,9 @@
<div class="card">
<div class="card card-gradient">
<div class="card-body">
<div class="row gy-3">
<div class="col-12 col-sm d-flex flex-column">
<h3 class="h2">Welcome back, Paweł</h3>
<p class="text-muted">You have 5 new messages and 2 new notifications.</p>
<p class="text-secondary">You have 5 new messages and 2 new notifications.</p>
<div class="row g-5 mt-auto">
<div class="col-auto">
shared/includes/cards/you-win.html
+11
View File
@@ -0,0 +1,11 @@
<div class="card card-gradient card-gradient-gold">
<div class="card-body text-center p-5">
<div class="display-3 leading-none mb-2">🏆</div>
<h1>You are winner!</h1>
<p class="text-secondary">You've been selected as our lucky winner for completing <strong class="text-body">100 orders</strong> this month! Click below to claim your exclusive prize and enjoy the benefits!</p>
<div class="mt-5">
{% include "ui/button.html" text="Claim Your Prize" icon="gift" color="primary" %}
</div>
</div>
</div>
shared/includes/docs/example.html
+2 -2
View File
@@ -1,6 +1,6 @@
<!--EXAMPLE-->
<div
class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% else %}bg-pattern-rectangles{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}>
{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} d-flex flex-fill flex-wrap gap-2 justify-content-center{% if include.vertical %} align-items-center flex-column{% else %} justify-content-center{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
{{ include.html | remove-href }}
{%- unless include.raw -%}</div>{%- endunless -%}
@@ -14,7 +14,7 @@
</a>
```html
{{ include.html }}
{{ include.code | default: include.html }}
```
</div>
shared/includes/docs/navbar.html
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="row flex-fill align-items-md-center">
<div class="col">
<div class="d-flex align-items-center gap-4">
<a href="/" class="navbar-brand navbar-brand-autodark gap-4">
<a href="{{ page.url | relative }}" class="navbar-brand navbar-brand-autodark gap-4">
{% include "docs/logo.html" %}
</a>
<div>
shared/includes/docs/tabs-package.html
+1 -1
View File
@@ -14,7 +14,7 @@
<div class="tab-pane{% if forloop.index == 1 %} show active{% endif %}" id="{{ manager.name }}" role="tabpanel" aria-labelledby="{{ manager.name }}-tab">
```bash
{{ manager.command }} install {{ include.name }}
{{ manager.command }} {{ manager.install }} {{ include.name }}
```
</div>
shared/includes/example/colors-table.html
+1 -1
View File
@@ -9,7 +9,7 @@
<div class="avatar bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
</div>
<div class="col">
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
<span class="fw-semibold">{{ color[1].title }}</span><br/>
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
</div>
</div>
shared/includes/layout/footer.html
+13 -11
View File
@@ -3,17 +3,19 @@
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.docsUrl }}" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
<li class="list-inline-item"><a href="{{ page | relative }}/license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="{{ site.githubUrl }}" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
<li class="list-inline-item">
<a href="{{ site.githubSponsorsUrl }}" target="_blank" class="link-secondary" rel="noopener">
{% include "ui/icon.html" icon="heart" inline=true filled=true color="pink" %}
Sponsor
</a>
</li>
</ul>
<nav aria-label="Footer">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.docsUrl }}" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
<li class="list-inline-item"><a href="{{ page | relative }}/license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="{{ site.githubUrl }}" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
<li class="list-inline-item">
<a href="{{ site.githubSponsorsUrl }}" target="_blank" class="link-secondary" rel="noopener">
{% include "ui/icon.html" icon="heart" inline=true filled=true color="pink" %}
Sponsor
</a>
</li>
</ul>
</nav>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
shared/includes/layout/homepage.html
+3 -57
View File
@@ -3,33 +3,10 @@
{% include "cards/welcome.html" %}
</div>
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="subheader">Total Users</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 me-2">75,782</div>
<div class="me-auto">
{% include "ui/trending.html" value=2 %}
</div>
</div>
<div class="text-secondary mt-2">24,635 users increased from last month</div>
</div>
{% include "ui/chart.html" chart-id="visitors" height="6" %}
</div>
{% include "cards/charts/total-users.html" %}
</div>
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="subheader">Active Users</div>
<div class="d-flex align-items-baseline mb-2">
<div class="h1 mb-0 me-2">25,782</div>
<div class="me-auto">
{% include "ui/trending.html" value=-1 %}
</div>
</div>
{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
</div>
</div>
{% include "cards/charts/active-users-2.html" %}
</div>
<div class="col-sm-6 col-lg-3">
{% include "cards/charts/sales.html" %}
@@ -97,38 +74,7 @@
<div class="col-lg-6">
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body">
<p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
<div class="progress progress-separated mb-3">
<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
</div>
<div class="row">
<div class="col-auto d-flex align-items-center pe-2">
<span class="legend me-2 bg-primary"></span>
<span>Regular</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
</div>
<div class="col-auto d-flex align-items-center px-2">
<span class="legend me-2 bg-info"></span>
<span>System</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
</div>
<div class="col-auto d-flex align-items-center px-2">
<span class="legend me-2 bg-success"></span>
<span>Shared</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
</div>
<div class="col-auto d-flex align-items-center ps-2">
<span class="legend me-2"></span>
<span>Free</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
</div>
</div>
</div>
</div>
{% include "cards/storage-usage.html" %}
</div>
<div class="col-12">
{% include "cards/activity.html" %}
shared/includes/layout/navbar-menu.html
+2 -2
View File
@@ -11,7 +11,7 @@
{% for level-1 in menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ page | relative }}/{{ level-1[1].url }}" {% endif %}>
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-haspopup="true" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ page | relative }}/{{ level-1[1].url }}" {% endif %}{% if level-1[0] == current-page[0] or level-1[1].active %} aria-current="page"{% endif %}>
{% unless hide-icons %}
<span class="nav-link-icon d-md-none d-lg-inline-block">{% include "ui/icon.html" icon=icon %}</span>
{% endunless %}
@@ -47,7 +47,7 @@
{% if level-2[1].children %}<div class="dropend">{% endif %}
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}{% if level-2[1].color %} text-{{ level-2[1].color }}{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="false" {% else %}href="{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%}{{ level-2[1].url }}{% else %}{{ page | relative }}/{{ level-2[1].url }}{% endif %}"{% endif %}{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%} target="_blank" rel="noopener"{% endif %}>
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}{% if level-2[1].color %} text-{{ level-2[1].color }}{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-haspopup="true" aria-expanded="false" {% else %}href="{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%}{{ level-2[1].url }}{% else %}{{ page | relative }}/{{ level-2[1].url }}{% endif %}"{% endif %}{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%} target="_blank" rel="noopener"{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} aria-current="page"{% endif %}>
{% if level-2[1].icon %}
{% assign icon = level-2[1].icon %}
{% include "ui/icon.html" icon=icon class="icon-inline me-1" %}
shared/includes/layout/navbar-search.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% assign breakpoint = include.breakpoint | default: 'lg' %}
<div{% if include.class %} class="{{ include.class }}"{% endif %}>
<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate role="search">
{% include "ui/form/input-icon.html" prepend=true rounded=include.rounded aria-label="Search in website" %}
</form>
</div>
shared/includes/layout/navbar-side-apps.html
+12
View File
@@ -0,0 +1,12 @@
<!-- BEGIN APPS -->
<div class="nav-item dropdown d-none d-md-flex">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false">
{% include "ui/icon.html" icon="apps" %}
</a>
<!-- BEGIN NAVBAR APPS -->
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-apps.html" %}
</div>
<!-- END NAVBAR APPS -->
</div>
<!-- END APPS -->
shared/includes/layout/navbar-side-language.html
+15
View File
@@ -0,0 +1,15 @@
<!-- BEGIN LANGUAGE SELECTOR -->
<div class="nav-item dropdown d-none d-md-flex">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Select language"
data-bs-auto-close="outside" aria-expanded="false">
EN
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end">
{% for language in languages %}
<a class="dropdown-item" href="#" data-lang="{{ language.code }}">
{{ language.name }}
</a>
{% endfor %}
</div>
</div>
<!-- END LANGUAGE SELECTOR -->
shared/includes/layout/navbar-side-notifications.html
+13
View File
@@ -0,0 +1,13 @@
<!-- BEGIN NOTIFICATIONS -->
<div class="nav-item dropdown d-none d-md-flex">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
{% include "ui/icon.html" icon="bell" %}
<span class="badge bg-red"></span>
</a>
<!-- BEGIN NAVBAR NOTIFICATIONS -->
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-notifications.html" %}
</div>
<!-- END NAVBAR NOTIFICATIONS -->
</div>
<!-- END NOTIFICATIONS -->
shared/includes/layout/navbar-side-theme.html
+13
View File
@@ -0,0 +1,13 @@
<!-- BEGIN THEME TOGGLE -->
<div class="nav-item">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
data-bs-placement="bottom">
{% include "ui/icon.html" icon="moon" %}
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
data-bs-placement="bottom">
{% include "ui/icon.html" icon="sun" %}
</a>
</div>
<!-- END THEME TOGGLE -->
shared/includes/layout/navbar-side-user.html
+24
View File
@@ -0,0 +1,24 @@
<!-- BEGIN USER MENU -->
{% assign person-id = include.person-id | default: 1 %}
{% assign person = people[person-id] %}
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
{% include "ui/avatar.html" person-id=person-id size="sm" %}
{% unless include.hide-username %}
<div class="d-none d-xl-block ps-2">
<div>{{ person.full_name }}</div>
<div class="mt-1 small text-secondary">{{ person.job_title }}</div>
</div>
{% endunless %}
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"{% if include.dark %} data-bs-theme="light"{% endif %}>
<a class="dropdown-item" href="{{ page | relative }}/profile.html">{% include "ui/icon.html" icon="user" class="dropdown-item-icon" %} Profile</a>
<a class="dropdown-item" href="#">{% include "ui/icon.html" icon="chart-pie" class="dropdown-item-icon" %} Analytics</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ page | relative }}/settings.html">Settings &amp; Privacy</a>
<a class="dropdown-item" href="#">Help</a>
<a class="dropdown-item" href="{{ page | relative }}/sign-in.html">Sign out</a>
</div>
</div>
<!-- END USER MENU -->
shared/includes/layout/navbar-side.html
+18 -52
View File
@@ -5,64 +5,30 @@
{% unless include.condensed %}
<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
<div class="btn-list">
{% include "ui/button.html" icon="brand-github" outline=true text="Source code" href=site.githubUrl
external=true %}
{% include "ui/button.html" icon="heart" icon-color="pink" outline=true text="Sponsor"
href=site.githubSponsorsUrl external=true %}
</div>
</div>
{% endunless %}
<div class="d-none d-{{ include.breakpoint }}-flex">
<div class="nav-item">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
data-bs-placement="bottom">
{% include "ui/icon.html" icon="moon" %}
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
data-bs-placement="bottom">
{% include "ui/icon.html" icon="sun" %}
</a>
</div>
<div class="nav-item dropdown d-none d-md-flex">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
{% include "ui/icon.html" icon="bell" %}
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-notifications.html" %}
</div>
</div>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false">
{% include "ui/icon.html" icon="apps" %}
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-apps.html" %}
</div>
</div>
{% if include.show-theme-toggle or include.show-notifications or include.show-apps or include.show-language-selector %}
<div class="d-none d-{{ include.breakpoint }}-flex me-3">
{% if include.show-theme-toggle %}
{% include "layout/navbar-side-theme.html" %}
{% endif %}
{% if include.show-notifications %}
{% include "layout/navbar-side-notifications.html" %}
{% endif %}
{% if include.show-apps %}
{% include "layout/navbar-side-apps.html" %}
{% endif %}
{% if include.show-language-selector %}
{% include "layout/navbar-side-language.html" %}
{% endif %}
</div>
{% endif %}
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
{% include "ui/avatar.html" person-id=person-id size="sm" %}
{% unless include.hide-username %}
<div class="d-none d-xl-block ps-2">
<div>{{ person.full_name }}</div>
<div class="mt-1 small text-secondary">{{ person.job_title }}</div>
</div>
{% endunless %}
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"{% if include.dark %} data-bs-theme="light"{% endif %}>
<a href="#" class="dropdown-item">Status</a>
<a href="{{ page | relative }}/profile.html" class="dropdown-item">Profile</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="{{ page | relative }}/settings.html" class="dropdown-item">Settings</a>
<a href="{{ page | relative }}/sign-in.html" class="dropdown-item">Logout</a>
</div>
</div>
{% if include.show-user %}
{% include "layout/navbar-side-user.html" person-id=person-id hide-username=include.hide-username dark=include.dark %}
{% endif %}
</div>
shared/includes/layout/navbar-toggler.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!-- BEGIN NAVBAR TOGGLER -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"{% if include.target %} data-bs-target="#{{ include.target }}" aria-controls="{{ include.target }}"{% endif %} aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"{% if include.target %} data-bs-target="#{{ include.target }}" aria-controls="{{ include.target }}"{% endif %} aria-expanded="false" aria-label="{% if include.target == 'sidebar-menu' %}Toggle sidebar navigation{% else %}Toggle primary navigation{% endif %}">
<span class="navbar-toggler-icon"></span>
</button>
<!-- END NAVBAR TOGGLER -->
shared/includes/layout/navbar.html
+31 -8
View File
@@ -1,5 +1,10 @@
{% assign breakpoint = include.breakpoint | default: 'md' %}
{% assign condensed = include.condensed | default: false %}
{% assign show-theme = include.show-theme | default: true %}
{% assign show-notifications = include.show-notifications | default: true %}
{% assign show-apps = include.show-apps | default: true %}
{% assign show-language = include.show-language | default: true %}
{% assign show-user = include.show-user | default: true %}
{% if include.sticky %}
<div class="sticky-top">
@@ -13,25 +18,35 @@
{% include "layout/navbar-logo.html" small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
{% endunless %}
{% include "layout/navbar-side.html" class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id breakpoint=breakpoint dark=include.dark %}
{% include "layout/navbar-side.html" class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id breakpoint=breakpoint dark=include.dark show-theme-toggle=show-theme show-notifications=show-notifications show-apps=show-apps show-language-selector=show-language show-user=show-user %}
{% if condensed %}
<div class="collapse navbar-collapse" id="navbar-menu">
{% if include.hide-search %}
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
<!-- BEGIN NAVBAR MENU -->
<nav aria-label="Primary">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
</nav>
<!-- END NAVBAR MENU -->
{% elsif include.hide-menu %}
{% include "layout/navbar-search.html" rounded=include.transparent %}
{% else %}
<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
<!-- BEGIN NAVBAR MENU -->
<nav aria-label="Primary">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
</nav>
<!-- END NAVBAR MENU -->
{% unless condensed %}
{% assign search-class = "ms-md-auto ps-md-4 py-2 py-md-0 me-md-4 order-first order-md-last flex-grow-1" %}
{% unless include.fluid-search %}
{% assign search-class = search-class | append: " flex-md-grow-0" %}
{% endunless %}
<!-- BEGIN NAVBAR SEARCH -->
{% include "layout/navbar-search.html" breakpoint=breakpoint rounded=include.transparent class=search-class %}
<!-- END NAVBAR SEARCH -->
{% endunless %}
</div>
{% endif %}
@@ -41,14 +56,20 @@
</header>
{% unless condensed %}
<header class="navbar-expand-{{ breakpoint }}">
<div class="navbar-expand-{{ breakpoint }}">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}>
<div class="container-xl">
<div class="row flex-column flex-md-row flex-fill align-items-center">
<div class="col">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons long-titles=true %}
<!-- BEGIN NAVBAR MENU -->
<nav aria-label="Primary">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons long-titles=true %}
</nav>
<!-- END NAVBAR MENU -->
</div>
{% unless include.hide-search %}
<div class="col-2 d-none d-xxl-block">
{% include "layout/navbar-search.html" breakpoint=breakpoint class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
@@ -56,9 +77,10 @@
{% endunless %}
<div class="col col-md-auto">
<!-- BEGIN NAVBAR NAV -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-settings">
<span class="badge badge-sm bg-red text-red-fg">New</span>
<span class="nav-link-icon d-md-none d-lg-inline-block">
{% include "ui/icon.html" icon="settings" %}
@@ -69,12 +91,13 @@
</a>
</li>
</ul>
<!-- END NAVBAR NAV -->
</div>
</div>
</div>
</div>
</div>
</header>
</div>
{% endunless %}
{% if include.sticky %}
shared/includes/layout/page-header.html
+3 -3
View File
@@ -9,7 +9,7 @@
{% if page-header-file %}
{% include "layout/headers/{{ page-header-file }}.html" %}
{% elsif page-header %}
<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if layout-navbar-overlap and layout-navbar-dark %} text-white{% endif %}" aria-label="Page header">
<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if layout-navbar-overlap and layout-navbar-dark %} text-white{% endif %}">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
@@ -19,12 +19,12 @@
{{ pretitle }}
</div>
{% endif %}
<h2 class="page-title">
<h1 class="page-title">
{% if page-icon %}
{% include "ui/icon.html" icon=page-icon %}
{% endif %}
{{ page-header }}
</h2>
</h1>
{% if description %}
<div class="text-secondary mt-1">{{ description }}</div>
shared/includes/layout/skip-link.html
+2
View File
@@ -0,0 +1,2 @@
<a href="#content" class="visually-hidden skip-link">Skip to main content</a>
shared/includes/marketing/navbar.html
+28 -26
View File
@@ -8,36 +8,38 @@
data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
aria-label="Toggle primary navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<nav class="navbar-nav ms-auto">
<div class="nav-item">
<a class="nav-link active" href="{{ page | relative }}/marketing"><span class="nav-link-title">Home</span></a>
</div>
<div class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/testimonials.html"><span class="nav-link-title">Testimonials</span></a>
</div>
<div class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/pricing.html"><span class="nav-link-title">Pricing</span></a>
</div>
<div class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/about.html"><span class="nav-link-title">About</span></a>
</div>
<div class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/text.html"><span class="nav-link-title">Text</span></a>
</div>
<div class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/hero.html"><span class="nav-link-title">App</span></a>
</div>
<div class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/real-estate.html"><span class="nav-link-title">Real estate</span></a>
</div>
<div class="nav-item ms-4">
<a href="#" class="btn btn-primary">Buy now</a>
</div>
<nav aria-label="Primary">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="{{ page | relative }}/marketing"><span class="nav-link-title">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/testimonials.html"><span class="nav-link-title">Testimonials</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/pricing.html"><span class="nav-link-title">Pricing</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/about.html"><span class="nav-link-title">About</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/text.html"><span class="nav-link-title">Text</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/hero.html"><span class="nav-link-title">App</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/real-estate.html"><span class="nav-link-title">Real estate</span></a>
</li>
<li class="nav-item ms-4">
<a href="#" class="btn btn-primary">Buy now</a>
</li>
</ul>
</nav>
</div>
</div>
shared/includes/marketing/sections/faq.html
+6 -6
View File
@@ -4,30 +4,30 @@
<h2 class="section-title">Frequently Asked Questions</h2>
</div>
<div class="row g-lg-4">
<div class="col-md-4 markdown">
<div class="col-md-4 prose">
<h3 class="h2">How is Tabler Pro different from Tabler?</h3>
<p class="text-secondary">Tabler offers fundamental components that you can piece together to build your app or website. However, Tabler Pro offers an elevated convenience by providing pre-assembled components and page templates, acting as ready-to-use building blocks that can be swiftly integrated into your app, thereby saving development time.</p>
</div>
<div class="col-md-4 markdown">
<div class="col-md-4 prose">
<h3 class="h2">Is this a yearly subscription?</h3>
<p class="text-secondary">Certainly, you have lifelong access to all our components. This implies that you will receive new components and updates every month, continuing as long as we have new component ideas to share.</p>
</div>
<div class="col-md-4 markdown">
<div class="col-md-4 prose">
<h3 class="h2">I want to buy this but I can't afford it. Is there a discount?</h3>
<p class="text-secondary">Should you be a student or find the cost excessively high in your local currency, please reach out to us at {{ site.email }} detailing your circumstances, and we will contemplate offering you a discount.</p>
</div>
<div class="col-md-4 markdown">
<div class="col-md-4 prose">
<h3 class="h2">What can I do with this license?</h3>
<ul class="text-secondary">
<li>To build your websites or SaaS project that end-users need to pay</li>
<li>To build an open-source tool or documentation website</li>
</ul>
</div>
<div class="col-md-4 markdown">
<div class="col-md-4 prose">
<h3 class="h2">What version of Tabler is used?</h3>
<p class="text-secondary">The elements in Tabler Pro are created using Tabler v1.2 and later versions. If your current version is v0.8, we advise you to update to the latest version to make the most of the Pro components.</p>
</div>
<div class="col-md-4 markdown">
<div class="col-md-4 prose">
<h3 class="h2">What restrictions does this license have?</h3>
<ul class="text-secondary">
<li>Create a clone of Tabler PRO to sell</li>
shared/includes/parts/activity.html
+2 -2
View File
@@ -1,7 +1,7 @@
{% assign limit = include.limit | default: false %}
{% assign limit = include.limit | default: 40 %}
<div class="divide-y">
{% for item in activity %}
{% for item in activity limit: limit %}
{% assign person = people[forloop.index] %}
<div>
<div class="row">
shared/includes/parts/form/selectgroup-project-manager.html
+1 -1
View File
@@ -13,7 +13,7 @@
<div class="form-selectgroup-label-content d-flex align-items-center">
{% include "ui/avatar.html" person=person class="me-3" %}
<div>
<div class="font-weight-medium">{{ person.full_name }}</div>
<div class="fw-medium">{{ person.full_name }}</div>
<div class="text-secondary">{{ person.job_title }}</div>
</div>
</div>
shared/includes/parts/modals/add-task.html
+45
View File
@@ -0,0 +1,45 @@
<div class="modal-header">
<h4 class="modal-title">Add task</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" placeholder="Task name">
</div>
<div class="mb-3">
<label class="form-label">Assigned To</label>
<select class="form-select">
<option value="">Select person</option>
{% assign selected_people = "5,6,2,3" | split: "," %}
{% for person_id_str in selected_people %}
{% assign person_id = person_id_str | plus: 0 | minus: 1 %}
{% assign person = people[person_id] %}
<option value="{{ person.id }}">{{ person.full_name }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label class="form-label">Priority</label>
<select class="form-select">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Description</label>
<textarea class="form-control" rows="3" placeholder="Task description"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
Save
</button>
</div>
shared/includes/parts/modals/change-password.html
+138
View File
@@ -0,0 +1,138 @@
<div class="modal-header">
<h4 class="modal-title" id="password-modal-label">Change password</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<label class="form-label" for="password-current">Current password</label>
{% include "ui/form/input-group.html" type="password" id="password-current" placeholder="Enter your current password" append-button="eye:Show password" flat=true %}
</div>
<div class="mb-4">
<label class="form-label" for="password-new">New password</label>
{% include "ui/form/input-group.html" type="password" id="password-new" placeholder="Enter new password" append-button="eye:Show password" flat=true %}
<small class="form-hint">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
spaces, special characters, or emoji.
</small>
<div class="mt-2">
<div class="progress" style="height: 4px;">
<div class="progress-bar" id="password-strength" role="progressbar" style="width: 0%"></div>
</div>
<div class="text-secondary text-xs mt-1" id="password-strength-text"></div>
</div>
</div>
<div class="mb-4">
<label class="form-label" for="password-confirm">Confirm new password</label>
{% include "ui/form/input-group.html" type="password" id="password-confirm" placeholder="Confirm your new password" append-button="eye:Show password" flat=true %}
<div class="invalid-feedback d-none" id="password-match-error">
Passwords do not match.
</div>
</div>
{% include "ui/button.html" type="submit" text="Update password" color="primary" block=true class="mt-4" %}
</form>
</div>
{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
function setupPasswordToggle(inputId) {
const input = document.getElementById(inputId);
if (!input) return;
const inputGroup = input.closest('.input-group');
if (!inputGroup) return;
const toggleLink = inputGroup.querySelector('a.link-secondary');
if (!toggleLink) return;
toggleLink.addEventListener('click', function(e) {
e.preventDefault();
const isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
// Update tooltip text
const tooltipText = isPassword ? 'Hide password' : 'Show password';
this.setAttribute('title', tooltipText);
this.setAttribute('data-bs-original-title', tooltipText);
// Update icon (simple approach - toggle classes if needed)
const svg = this.querySelector('svg');
if (svg) {
const use = svg.querySelector('use');
if (use) {
use.setAttribute('href', isPassword ? '#icon-eye-off' : '#icon-eye');
}
}
});
}
setupPasswordToggle('password-current');
setupPasswordToggle('password-new');
setupPasswordToggle('password-confirm');
const newPasswordInput = document.getElementById('password-new');
const strengthBar = document.getElementById('password-strength');
const strengthText = document.getElementById('password-strength-text');
if (newPasswordInput && strengthBar && strengthText) {
newPasswordInput.addEventListener('input', function() {
const password = this.value;
let strength = 0;
let strengthLabel = '';
if (password.length >= 8) strength++;
if (password.length >= 12) strength++;
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
if (/\d/.test(password)) strength++;
if (/[^a-zA-Z0-9]/.test(password)) strength++;
const percentage = (strength / 5) * 100;
strengthBar.style.width = percentage + '%';
if (strength <= 2) {
strengthBar.className = 'progress-bar bg-danger';
strengthLabel = 'Weak';
} else if (strength <= 3) {
strengthBar.className = 'progress-bar bg-warning';
strengthLabel = 'Fair';
} else if (strength <= 4) {
strengthBar.className = 'progress-bar bg-info';
strengthLabel = 'Good';
} else {
strengthBar.className = 'progress-bar bg-success';
strengthLabel = 'Strong';
}
strengthText.textContent = password ? strengthLabel : '';
});
}
const confirmPasswordInput = document.getElementById('password-confirm');
const matchError = document.getElementById('password-match-error');
if (newPasswordInput && confirmPasswordInput && matchError) {
function validateMatch() {
const newPassword = newPasswordInput.value;
const confirmPassword = confirmPasswordInput.value;
if (confirmPassword && newPassword !== confirmPassword) {
confirmPasswordInput.classList.add('is-invalid');
matchError.classList.remove('d-none');
} else {
confirmPasswordInput.classList.remove('is-invalid');
matchError.classList.add('d-none');
}
}
newPasswordInput.addEventListener('input', validateMatch);
confirmPasswordInput.addEventListener('input', validateMatch);
}
});
</script>
{% endcapture_script %}
shared/includes/parts/modals/confirm-delete.html
+56
View File
@@ -0,0 +1,56 @@
{% include "ui/modal/close.html" %}
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
{% include "ui/icon.html" icon="alert-triangle" color="danger" size="lg" class="mb-2" %}
<h3 id="confirm-delete-title">Are you sure?</h3>
<div class="text-secondary mb-4">
<p id="confirm-delete-message">Do you really want to delete this item? This action cannot be undone.</p>
<div id="confirm-delete-items" class="text-start d-none">
<div class="card card-sm mt-3">
<div class="card-body">
<div class="fw-bold mb-2">Items to be deleted:</div>
<ul class="list-unstyled mb-0" id="confirm-delete-list">
<li>• Item 1</li>
<li>• Item 2</li>
<li>• Item 3</li>
</ul>
</div>
</div>
</div>
</div>
<label class="form-check text-start">
<input class="form-check-input" type="checkbox" id="confirm-delete-checkbox">
<span class="form-check-label">I understand this action cannot be undone</span>
</label>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col">{% include "ui/button.html" dismiss=true text="Cancel" block=true %}</div>
<div class="col">
<button type="button" class="btn btn-danger w-100" data-bs-dismiss="modal" id="confirm-delete-button" disabled>
Delete
</button>
</div>
</div>
</div>
</div>
{% capture_script %}
<script>
document.addEventListener("DOMContentLoaded", function () {
const checkbox = document.getElementById("confirm-delete-checkbox");
const deleteButton = document.getElementById("confirm-delete-button");
if (checkbox && deleteButton) {
checkbox.addEventListener("change", function() {
deleteButton.disabled = !this.checked;
});
}
});
</script>
{% endcapture_script %}
shared/includes/parts/modals/edit-profile.html
+92
View File
@@ -0,0 +1,92 @@
<div class="modal-header">
<h4 class="modal-title" id="profile-modal-label">Edit profile</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<div class="row align-items-end">
<div class="col-auto">
{% include "ui/avatar-upload.html" class="rounded" size="lg" %}
</div>
<div class="col">
<label class="form-label">Avatar</label>
<div class="text-secondary">Click to upload a new avatar</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="profile-first-name">First name</label>
<input class="form-control" id="profile-first-name" type="text" placeholder="John">
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="profile-last-name">Last name</label>
<input class="form-control" id="profile-last-name" type="text" placeholder="Doe">
</div>
</div>
</div>
<div class="mb-4">
<label class="form-label" for="profile-email">Email</label>
<input class="form-control" id="profile-email" type="email" placeholder="john.doe@example.com">
</div>
<div class="mb-4">
<label class="form-label" for="profile-phone">Phone</label>
<input class="form-control" id="profile-phone" type="tel" placeholder="+1 (555) 123-4567">
</div>
<div class="mb-4">
<label class="form-label" for="profile-bio">Bio</label>
<textarea class="form-control" id="profile-bio" rows="4" placeholder="Tell us about yourself..."></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="profile-location">Location</label>
<input class="form-control" id="profile-location" type="text" placeholder="City, Country">
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="profile-birthdate">Date of birth</label>
{% include "ui/datepicker.html" layout="icon" id="profile-birthdate" %}
</div>
</div>
</div>
<div class="mb-4">
<label class="form-label">Social links</label>
<div class="row g-2">
<div class="col-12">
<div class="input-group">
<span class="input-group-text">{% include "ui/icon.html" icon="brand-twitter" %}</span>
<input type="text" class="form-control" placeholder="twitter.com/username">
</div>
</div>
<div class="col-12">
<div class="input-group">
<span class="input-group-text">{% include "ui/icon.html" icon="brand-github" %}</span>
<input type="text" class="form-control" placeholder="github.com/username">
</div>
</div>
<div class="col-12">
<div class="input-group">
<span class="input-group-text">{% include "ui/icon.html" icon="brand-linkedin" %}</span>
<input type="text" class="form-control" placeholder="linkedin.com/in/username">
</div>
</div>
</div>
</div>
{% include "ui/button.html" type="submit" text="Save changes" color="primary" block=true class="mt-4" %}
</form>
</div>
shared/includes/parts/modals/new-email.html
+27
View File
@@ -0,0 +1,27 @@
<div class="modal-header">
<h4 class="modal-title">New Message</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">To</label>
<input type="text" class="form-control" placeholder="Example@email.com">
</div>
<div class="mb-3">
<label class="form-label">Subject</label>
<input type="text" class="form-control" placeholder="Your subject">
</div>
<div>
<label class="form-label">Message</label>
{% include "ui/wysiwyg.html" id="email-message" %}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
{% include "ui/icon.html" icon="send" %} Send Message
</button>
</div>
shared/includes/parts/modals/new-event.html
+33
View File
@@ -0,0 +1,33 @@
<div class="modal-header">
<h4 class="modal-title" id="event-modal-label">New event</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<label class="form-label" for="event-title">Title</label>
<input class="form-control" id="event-title" type="text" placeholder="Event title">
</div>
<div class="mb-4">
<label class="form-label" for="event-description">Description</label>
<textarea class="form-control" id="event-description" rows="3" placeholder="Event description"></textarea>
</div>
<div class="row">
<div class="col">
<div class="mb-4">
<label class="form-label" for="event-start">Start</label>
{% include "ui/datepicker.html" layout="icon" id="event-start" %}
</div>
</div>
<div class="col">
<div class="mb-4">
<label class="form-label" for="event-end">End</label>
{% include "ui/datepicker.html" layout="icon" id="event-end" %}
</div>
</div>
</div>
{% include "ui/button.html" type="submit" text="Create event" color="primary" block=true class="mt-4" %}
</form>
</div>
shared/includes/parts/modals/new-task.html
+51
View File
@@ -0,0 +1,51 @@
<div class="modal-header">
<h4 class="modal-title" id="task-modal-label">New task</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<label class="form-label" for="task-name">Task name</label>
<input class="form-control" id="task-name" type="text" placeholder="Enter task name">
</div>
<div class="mb-4">
<label class="form-label" for="task-description">Description</label>
<textarea class="form-control" id="task-description" rows="3" placeholder="Enter task description"></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="task-assigned">Assigned to</label>
{% include "ui/select.html" key="people" id="task-assigned" indicator="avatar" %}
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="task-priority">Priority</label>
<select class="form-select" id="task-priority">
<option value="low">Low</option>
<option value="medium" selected>Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="task-due-date">Due date</label>
{% include "ui/datepicker.html" layout="icon" id="task-due-date" %}
</div>
</div>
<div class="col-md-6">
<div class="mb-4">
<label class="form-label" for="task-category">Category / Tags</label>
{% include "ui/select.html" key="tags" id="task-category" %}
</div>
</div>
</div>
{% include "ui/button.html" type="submit" text="Create task" color="primary" block=true class="mt-4" %}
</form>
</div>
shared/includes/parts/modals/team.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col-auto">
{% include "ui/avatar-upload.html" class="rounded" %}
{% include "ui/avatar-upload.html" class="rounded" size="xl" %}
</div>
<div class="col">
<label class="form-label">Name</label>
shared/includes/parts/nav/nav-aside.html
+2 -2
View File
@@ -2,14 +2,14 @@
<div class="subheader mb-2">Category</div>
{% assign items = "Games,Clothing,Jewelery,Toys" | split: "," %}
<div class="list-group list-group-transparent mb-3">
<nav class="list-group list-group-transparent mb-3">
{% for item in items %}
<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
{{ item }}
<small class="text-secondary ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
</a>
{% endfor %}
</div>
</nav>
<div class="subheader mb-2">Rating</div>
{% assign items = "5 stars,4 stars,3 stars,2 and less stars" | split: "," %}
shared/includes/settings.html
+12 -4
View File
@@ -1,11 +1,11 @@
<div class="settings">
<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings" aria-controls="offcanvasSettings" aria-label="Theme Settings">
<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-settings" aria-controls="offcanvas-settings" aria-label="Theme Settings">
{% include "ui/icon.html" icon="brush" %}
</a>
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvas-settings" role="dialog" aria-modal="true" aria-labelledby="offcanvas-settings-title">
<div class="offcanvas-header">
<h2 class="offcanvas-title">Theme Settings</h2>
<h2 class="offcanvas-title" id="offcanvas-settings-title">Theme Settings</h2>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex flex-column">
@@ -106,6 +106,14 @@
{% capture_script %}
<script>
/*
This script handles the theme settings offcanvas functionality
It saves the selected settings to localStorage and applies them to the document
It also updates the URL with the selected settings as query parameters
It also has a reset button to clear all settings and revert to default
This is just a demo script to show how to implement theme settings. You can modify it as needed.
*/
document.addEventListener("DOMContentLoaded", function () {
var themeConfig = {
theme: "light",
@@ -116,7 +124,7 @@
}
var url = new URL(window.location)
var form = document.getElementById("offcanvasSettings")
var form = document.getElementById("offcanvas-settings")
var resetButton = document.getElementById("reset-changes")
var checkItems = function () {
shared/includes/ui/alert.html
+1 -1
View File
@@ -12,7 +12,7 @@
{%- assign icon = 'info-circle' -%}
{%- endif -%}
{%- endunless -%}
<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="alert">
<div class="alert-icon">
{%- include "ui/icon.html" icon=icon class="alert-icon" -%}
</div>
shared/includes/ui/avatar.html
+1 -1
View File
@@ -20,7 +20,7 @@
{%- endif -%}
{%- assign el = 'span' -%}
{%- if link -%}{%- assign el = 'a' -%}{%- endif -%}
<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} avatar-{{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.square %} avatar-square{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
{%- if include.status -%}
<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
{%- endif -%}
shared/includes/ui/breadcrumb.html
+21 -17
View File
@@ -1,20 +1,24 @@
{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," -%}
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}" aria-label="breadcrumbs">
{%- for page in breadcrumb-pages -%}
{%- if forloop.last -%}
<li class="breadcrumb-item active" aria-current="page">
<a href="#">{{ page }}</a>
</li>
{%- else -%}
<li class="breadcrumb-item">
{% if forloop.first and include.home-icon-%}
<a href="{{ site.baseurl }}/">
{% include "ui/icon.html" icon="home" %}
</a>
<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}">
{%- for page in breadcrumb-pages -%}
{%- if forloop.last -%}
<li class="breadcrumb-item active" aria-current="page">
{{ page }}
</li>
{%- else -%}
<a href="#">{{ page }}</a>
<li class="breadcrumb-item">
{% if forloop.first and include.home-icon-%}
<a href="{{ site.baseurl }}/">
{% include "ui/icon.html" icon="home" %}
</a>
{%- else -%}
<a href="#">{{ page }}</a>
{%- endif -%}
</li>
{%- endif -%}
</li>
{%- endif -%}
{%- endfor -%}
</ol>
{%- endfor -%}
</ol>
</nav>
<!-- END BREADCRUMB -->
shared/includes/ui/button.html
+1 -1
View File
@@ -18,7 +18,7 @@
{% endif %}
{% assign e = include.element | default: 'a' %}
<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.action %} btn-action{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
{% if include.spinner %}
{% include "ui/spinner.html" color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
shared/includes/ui/card-dropdown.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% assign icon = include.icon | default: 'dots-vertical' %}
<div class="dropdown{% if include.class %} {{ include.class }}{% endif %}">
<a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
<a href="#" class="btn btn-action" data-bs-toggle="dropdown" aria-expanded="false">
{% include "ui/icon.html" icon=icon %}
</a>
<div class="dropdown-menu dropdown-menu-end">
shared/includes/ui/card-title.html
+10
View File
@@ -0,0 +1,10 @@
<div class="d-flex">
<h3 class="card-title{% if include.class %} {{ include.class }}{% endif %}">
{{ include.text | default: include.title | default: 'Card title' }}
</h3>
{% if include.more %}
<div class="ms-auto">
{% include "ui/button.html" icon="dots" size="sm" icon-only action %}
</div>
{% endif %}
</div>
shared/includes/ui/chart.html
+32 -6
View File
@@ -21,6 +21,24 @@
{% capture script %}
{% assign chart-type = data.type | default: 'bar' -%}
{% removeemptylines %}
<style>
:root {
{% if data.series %}
{% for serie in data.series %}
{% assign color = serie.color | default: data.color | default: 'primary' %}
{% assign opacity = serie.color-opacity | default: '100%' %}
--chart-{{ id }}-color-{{ forloop.index0 }}: color-mix(in srgb, transparent, var(--tblr-{{ color }}) {{ opacity }});
{% endfor %}
{% endif %}
{% if chart-type == 'area' %}
--chart-{{ id }}-fill-0: color-mix(in srgb, transparent, var(--tblr-primary) 16%);
--chart-{{ id }}-fill-1: color-mix(in srgb, transparent, var(--tblr-primary) 16%);
{% endif %}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
@@ -40,7 +58,7 @@
{% else %}
parentHeightOffset: 0,
toolbar: {
show: false,
show: {% if data.toolbar %}true{% else %}false{% endif %},
},
{% endif %}
@@ -97,8 +115,8 @@
{% if chart-type == 'area' %}
fill: {
colors: [
'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}100%{% endif %})',
'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}80%{% endif %})',
'var(--chart-{{ id }}-fill-0)',
'var(--chart-{{ id }}-fill-1)',
],
type: 'solid'
},
@@ -130,6 +148,11 @@
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% elsif chart-type == 'candlestick' %}
series: [{% for serie in data.series %}{
name: "{{ serie.name }}",
data: [{% if serie.candlestick-data %}{% for candle in serie.candlestick-data %}{x: {{ candle.x }}, y: [{{ candle.y | join: ', ' }}]}{% unless forloop.last %}, {% endunless %}{% endfor %}{% else %}{{ serie.data | join: ', ' }}{% endif %}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% else %}series: [{% for serie in data.series %}{
name: "{{ serie.name }}",
data: [{{ serie.data | join: ', ' }}]
@@ -211,6 +234,11 @@
text: '{{ data.y-title | escape }}'
}
{% endif %}
{% if data.y-tooltip %}
tooltip: {
enabled: true
}
{% endif %}
},
{% endunless %}
@@ -224,9 +252,7 @@
{% endif %}
{% if data.series %}
colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}
'color-mix(in srgb, transparent, var(--tblr-{{ color }}) {% if serie.color-opacity %}{{ serie.color-opacity }}{% else %}100%{% endif %})'{% unless forloop.last %}, {% endunless %}{% endfor %}
],
colors: [{% for serie in data.series %}'var(--chart-{{ id }}-color-{{ forloop.index0 }})'{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
legend: {
shared/includes/ui/dropdown-menu.html
+5 -1
View File
@@ -24,7 +24,11 @@
{% endfor %}
{% elsif include.people %}
{% for person in people limit: 5 %}
<a href="#" class="dropdown-item">{% include "ui/avatar.html" person-id=person.id class="rounded me-2" size="xs" %} {{ person.full_name }}</a>
<a href="#" class="dropdown-item">{% include "ui/avatar.html" person-id=person.id size="xs" %} {{ person.full_name }}</a>
{% endfor %}
{% elsif include.flag %}
{% for country in countries limit: 5 %}
<a href="#" class="dropdown-item">{% include "ui/flag.html" flag=country.flag size="xs" %} {{ country.name }}</a>
{% endfor %}
{% elsif include.type == 'text' %}
shared/includes/ui/empty.html
+2 -1
View File
@@ -1,9 +1,10 @@
{% assign icon = include.icon | default: "mood-sad" %}
{% assign height = include.height | default: 256 %}
<div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.illustration %}
{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
<div class="empty-img">{% include "ui/illustration.html" image=illustration height="256" %}</div>
<div class="empty-img">{% include "ui/illustration.html" image=illustration height=height %}</div>
{% elsif include.icon-text %}
<div class="empty-header">{{ include.icon-text }}</div>
{% else %}

Some files were not shown because too many files have changed in this diff Show More