diff --git a/public/js/color-mode.js b/public/js/color-mode.js new file mode 100644 index 0000000..0fc9d66 --- /dev/null +++ b/public/js/color-mode.js @@ -0,0 +1,80 @@ +/*! + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2023 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + */ + +(() => { + 'use strict' + + const getStoredTheme = () => localStorage.getItem('theme') + const setStoredTheme = theme => localStorage.setItem('theme', theme) + + const getPreferredTheme = () => { + const storedTheme = getStoredTheme() + if (storedTheme) { + return storedTheme + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + const setTheme = theme => { + if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-bs-theme', 'dark') + } else { + document.documentElement.setAttribute('data-bs-theme', theme) + } + } + + setTheme(getPreferredTheme()) + + const showActiveTheme = (theme, focus = false) => { + const themeSwitcher = document.querySelector('#bd-theme') + + if (!themeSwitcher) { + return + } + + const themeSwitcherText = document.querySelector('#bd-theme-text') + const activeThemeIcon = document.querySelector('.theme-icon-active use') + const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) + const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') + + document.querySelectorAll('[data-bs-theme-value]').forEach(element => { + element.classList.remove('active') + element.setAttribute('aria-pressed', 'false') + }) + + btnToActive.classList.add('active') + btnToActive.setAttribute('aria-pressed', 'true') + activeThemeIcon.setAttribute('href', svgOfActiveBtn) + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` + themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) + + if (focus) { + themeSwitcher.focus() + } + } + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + const storedTheme = getStoredTheme() + if (storedTheme !== 'light' && storedTheme !== 'dark') { + setTheme(getPreferredTheme()) + } + }) + + window.addEventListener('DOMContentLoaded', () => { + showActiveTheme(getPreferredTheme()) + + document.querySelectorAll('[data-bs-theme-value]') + .forEach(toggle => { + toggle.addEventListener('click', () => { + const theme = toggle.getAttribute('data-bs-theme-value') + setStoredTheme(theme) + setTheme(theme) + showActiveTheme(theme, true) + }) + }) + }) +})() \ No newline at end of file diff --git a/public/js/dashboard.js b/public/js/dashboard.js new file mode 100644 index 0000000..8db7231 --- /dev/null +++ b/public/js/dashboard.js @@ -0,0 +1,49 @@ +/* globals Chart:false */ + +(() => { + 'use strict' + + // Graphs + const ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + const myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + plugins: { + legend: { + display: false + }, + tooltip: { + boxPadding: 3 + } + } + } + }) +})() \ No newline at end of file diff --git a/resources/views/layouts/dashb5.blade.php b/resources/views/layouts/dashb5.blade.php index ccda6f6..d6841ba 100644 --- a/resources/views/layouts/dashb5.blade.php +++ b/resources/views/layouts/dashb5.blade.php @@ -1,214 +1,918 @@ - - + + + - - - + + + + + + + + + - gtag('config', 'UA-140677389-1'); - - @yield('title') + + + + - - @vite(['resources/sass/app.scss', 'resources/js/app.js']) - - - - - - - - - - - - - - Alliance-Services - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- @yield('content') -
-
- -
- + +
+ + + + + + + + +
+
+ +
+

Dashboard

+
+
+ + +
+ +
+
+ +
+
+ + +
+ +

This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg

+
+
+
+
Customers
+
+
345k
+

Feb 1 - Apr 1, United States

+

18.2% increase since last month

+
+
+
+
+
+
Revenue
+
+
$2.4k
+

Feb 1 - Apr 1, United States

+

4.6% increase since last month

+
+
+
+
+
+
Purchases
+
+
43
+

Feb 1 - Apr 1, United States

+

2.6% decrease since last month

+
+
+
+
+
+
Traffic
+
+
64k
+

Feb 1 - Apr 1, United States

+

2.5% increase since last month

+
+
+
+
+
+
+
+
Latest transactions
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OrderProductCustomerTotalDate
17371705Volt Premium Bootstrap 5 Dashboardjohndoe@gmail.com€61.11Aug 31 2020View
17370540Pixel Pro Premium Bootstrap UI Kitjacob.monroe@company.com$153.11Aug 28 2020View
17371705Volt Premium Bootstrap 5 Dashboardjohndoe@gmail.com€61.11Aug 31 2020View
17370540Pixel Pro Premium Bootstrap UI Kitjacob.monroe@company.com$153.11Aug 28 2020View
17371705Volt Premium Bootstrap 5 Dashboardjohndoe@gmail.com€61.11Aug 31 2020View
17370540Pixel Pro Premium Bootstrap UI Kitjacob.monroe@company.com$153.11Aug 28 2020View
+
+ View all +
+
+
+
+
+
Traffic last 6 months
+
+
+
+
+
+
+
+ +
+ + +

Section title

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeaderHeaderHeaderHeader
1,001randomdataplaceholdertext
1,002placeholderirrelevantvisuallayout
1,003datarichdashboardtabular
1,003informationplaceholderillustrativedata
1,004textrandomlayoutdashboard
1,005dashboardirrelevanttextplaceholder
1,006dashboardillustrativerichdata
1,007placeholdertabularinformationirrelevant
1,008randomdataplaceholdertext
1,009placeholderirrelevantvisuallayout
1,010datarichdashboardtabular
1,011informationplaceholderillustrativedata
1,012textplaceholderlayoutdashboard
1,013dashboardirrelevanttextvisual
1,014dashboardillustrativerichdata
1,015randomtabularinformationtext
+
+
+ +
+ @yield('content') +
+ +
+
Recent updates
+
+ + Placeholder + 32x32 + +

+ @username + Some representative placeholder content, with some information about this user. Imagine this being some sort + of status update, perhaps? +

+
+
+ + Placeholder + 32x32 + +

+ @username + Some more representative placeholder content, related to this other user. Another status update, perhaps. +

+
+
+ + Placeholder + 32x32 + +

+ @username + This user also gets some representative placeholder content. Maybe they did something interesting, and you + really want to highlight this in the recent updates. +

+
+ + All updates + +
+ +
+
Suggestions
+
+ + Placeholder + 32x32 + +
+
+ Full Name + Follow +
+ @username +
+
+
+ + Placeholder + 32x32 + +
+
+ Full Name + Follow +
+ @username +
+
+
+ + Placeholder + 32x32 + +
+
+ Full Name + Follow +
+ @username +
+
+ + All suggestions + +
+ + +
+ +
+ + +
+
+ + + +
+
+
Offcanvas
+ +
+
+ + + + + Sidebar + +
+ +
+ +
+
+ + + mdo + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/views/layouts/dashb5_orig.blade.php b/resources/views/layouts/dashb5_orig.blade.php new file mode 100644 index 0000000..ccda6f6 --- /dev/null +++ b/resources/views/layouts/dashb5_orig.blade.php @@ -0,0 +1,214 @@ + + + + + + + @yield('title') + + + @vite(['resources/sass/app.scss', 'resources/js/app.js']) + + + + + + + + + + + + + + + Alliance-Services + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ @yield('content') +
+
+ +
+ +
+ + \ No newline at end of file