diff --git a/css/style.css b/css/style.css index 975f9e3..968b937 100644 --- a/css/style.css +++ b/css/style.css @@ -521,6 +521,9 @@ } } @layer utilities { + .collapse { + visibility: collapse; + } .absolute { position: absolute; } @@ -539,9 +542,15 @@ .top-2 { top: calc(var(--spacing) * 2); } + .top-\[2px\] { + top: 2px; + } .right-2 { right: calc(var(--spacing) * 2); } + .left-1 { + left: calc(var(--spacing) * 1); + } .container { width: 100%; @media (width >= 40rem) { @@ -566,6 +575,9 @@ .mt-4 { margin-top: calc(var(--spacing) * 4); } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } .mb-0 { margin-bottom: calc(var(--spacing) * 0); } @@ -596,9 +608,39 @@ .inline-block { display: inline-block; } + .inline-flex { + display: inline-flex; + } + .list-item { + display: list-item; + } + .table { + display: table; + } + .h-4 { + height: calc(var(--spacing) * 4); + } + .h-5 { + height: calc(var(--spacing) * 5); + } + .h-6 { + height: calc(var(--spacing) * 6); + } + .w-4 { + width: calc(var(--spacing) * 4); + } + .w-5 { + width: calc(var(--spacing) * 5); + } .w-5\/6 { width: calc(5/6 * 100%); } + .w-6 { + width: calc(var(--spacing) * 6); + } + .w-10 { + width: calc(var(--spacing) * 10); + } .w-96 { width: calc(var(--spacing) * 96); } @@ -608,6 +650,18 @@ .w-full { width: 100%; } + .border-collapse { + border-collapse: collapse; + } + .transform { + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } + .cursor-pointer { + cursor: pointer; + } + .resize { + resize: both; + } .list-none { list-style-type: none; } @@ -646,6 +700,9 @@ .rounded { border-radius: 0.25rem; } + .rounded-full { + border-radius: calc(infinity * 1px); + } .rounded-lg { border-radius: var(--radius-lg); } @@ -665,6 +722,9 @@ .bg-gray-100 { background-color: var(--color-gray-100); } + .bg-gray-300 { + background-color: var(--color-gray-300); + } .bg-green-500 { background-color: var(--color-green-500); } @@ -742,10 +802,20 @@ .text-white { color: var(--color-white); } + .text-yellow-500 { + color: var(--color-yellow-500); + } + .underline { + text-decoration-line: underline; + } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-inner { + --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -754,6 +824,15 @@ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .transition-transform { + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .hover\:bg-blue-600 { &:hover { @media (hover: hover) { @@ -761,6 +840,13 @@ } } } + .hover\:bg-gray-200 { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-200); + } + } + } .hover\:bg-green-600 { &:hover { @media (hover: hover) { @@ -775,6 +861,12 @@ } } } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; + } + } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -795,6 +887,37 @@ grid-template-columns: repeat(4, minmax(0, 1fr)); } } + .dark\:bg-gray-600 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-600); + } + } + .dark\:bg-gray-900 { + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-900); + } + } + .dark\:hover\:bg-gray-700 { + @media (prefers-color-scheme: dark) { + &:hover { + @media (hover: hover) { + background-color: var(--color-gray-700); + } + } + } + } +} +.dark body { + background-color: var(--color-gray-900); + color: var(--color-gray-100); + [class*="bg-white"] { + background-color: var(--color-gray-800); + color: var(--color-gray-100); + } + [class*="bg-gray-100"], [class*="bg-gray-50"] { + background-color: var(--color-gray-700); + color: var(--color-gray-100); + } } @keyframes spin { to { @@ -822,6 +945,31 @@ animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } +@property --tw-rotate-x { + syntax: "*"; + inherits: false; + initial-value: rotateX(0); +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; + initial-value: rotateY(0); +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; + initial-value: rotateZ(0); +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; + initial-value: skewX(0); +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; + initial-value: skewY(0); +} @property --tw-space-y-reverse { syntax: "*"; inherits: false; @@ -896,3 +1044,8 @@ inherits: false; initial-value: 0 0 #0000; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} diff --git a/index.php b/index.php index c30e7fe..cedd869 100644 --- a/index.php +++ b/index.php @@ -14,23 +14,36 @@
-

Bill Tracker

+
+

Bill Tracker

+ +
+ +
+

Add New Payment

- + - - - + + - +
@@ -88,7 +101,7 @@
- diff --git a/js/app.js b/js/app.js index 96d9d5d..98f7dbc 100644 --- a/js/app.js +++ b/js/app.js @@ -170,33 +170,33 @@ document.addEventListener('DOMContentLoaded', () => { ytdPieChart = new Chart(ctx, { type: 'pie', data: { - labels: labels, - datasets: [{ - data: totals, - backgroundColor: [ - '#003962', '#00607F', '#008B9C', '#00B8B9', '#00E6D6', '#00FFF4' - ], // Add more colors if needed - hoverBackgroundColor: [ - '#042c4c', '#004968', '#007384', '#009FA1', '#00CCBD', '#00FBDA' - ] - }] + labels: labels, + datasets: [{ + data: totals, + backgroundColor: [ + '#003962', '#00607F', '#008B9C', '#00B8B9', '#00E6D6', '#00FFF4', '#007ACC' // New color added + ], // Add more colors if needed + hoverBackgroundColor: [ + '#042c4c', '#004968', '#007384', '#009FA1', '#00CCBD', '#00FBDA', '#005BB5' // New hover color added + ] + }] }, options: { - responsive: true, - plugins: { - legend: { - position: 'bottom' - }, - tooltip: { - callbacks: { - label: function (tooltipItem) { - const value = tooltipItem.raw; // Raw data for this item - const percentage = ((value / overallTotal) * 100).toFixed(2); // Calculate percentage - return ` $${value.toFixed(2)} (${percentage}%)`; - } - } + responsive: true, + plugins: { + legend: { + position: 'bottom' + }, + tooltip: { + callbacks: { + label: function (tooltipItem) { + const value = tooltipItem.raw; // Raw data for this item + const percentage = ((value / overallTotal) * 100).toFixed(2); // Calculate percentage + return ` $${value.toFixed(2)} (${percentage}%)`; } } + } + } } }); } @@ -291,6 +291,45 @@ document.addEventListener('DOMContentLoaded', () => { document.getElementById('editModal').classList.remove('flex'); }); + // Dark mode toggle + const darkModeToggle = document.getElementById('darkModeToggle'); + const htmlElement = document.documentElement; + const sunIcon = document.getElementById('sunIcon'); + const moonIcon = document.getElementById('moonIcon'); + + // Function to update icons based on the current theme + function updateIcons() { + const isDarkMode = htmlElement.classList.contains('dark'); + if (isDarkMode) { + sunIcon.classList.remove('hidden'); + moonIcon.classList.add('hidden'); + } else { + sunIcon.classList.add('hidden'); + moonIcon.classList.remove('hidden'); + } + } + + // Check and apply the saved preference + const isDarkMode = localStorage.getItem('theme') === 'dark'; + if (isDarkMode) { + htmlElement.classList.add('dark'); + } + + updateIcons(); + + // Add toggle functionality + darkModeToggle.addEventListener('click', () => { + if (htmlElement.classList.contains('dark')) { + htmlElement.classList.remove('dark'); + localStorage.setItem('theme', 'light'); + } else { + htmlElement.classList.add('dark'); + localStorage.setItem('theme', 'dark'); + } + + updateIcons(); + }); + // On page load loadPayees('payeeId'); // Load payees loadYears(); // Load years diff --git a/src/input.css b/src/input.css index c400ee5..38cf0ae 100644 --- a/src/input.css +++ b/src/input.css @@ -2,4 +2,15 @@ @import "tailwindcss"; /* Basic project styles */ +.dark body { + @apply bg-gray-900 text-gray-100; + [class*="bg-white"] { + @apply bg-gray-800 text-gray-100; + } + + [class*="bg-gray-100"], + [class*="bg-gray-50"] { + @apply bg-gray-700 text-gray-100; + } +}