diff --git a/dashboard.html b/dashboard.html index e3c2d38..77b1c88 100644 --- a/dashboard.html +++ b/dashboard.html @@ -10,6 +10,7 @@ + @@ -414,7 +415,8 @@ - LAB-101Rahul VermaCBC (Complete Blood Count)HighSample Awaited + LAB-101Rahul VermaCBC (Complete Blood Count)HighSample Awaited + LAB-102Anita SharmaThyroid ProfileNormalResults Ready diff --git a/globals.css b/globals.css index 4ba8ba7..8ab6460 100644 --- a/globals.css +++ b/globals.css @@ -119,6 +119,30 @@ a { background: var(--accent-hover); } +.btn-danger { + background: var(--urgent); + color: white; +} + +.btn-danger:hover { + background: #DC2626; /* Darker red */ +} + +.btn-sm { + padding: 0.4rem 0.8rem; + font-size: 0.85rem; +} + +.btn-block { + display: flex; + width: 100%; +} + +.btn-icon { + padding: 0.5rem; + border-radius: 50%; +} + .card { background: var(--surface); border-radius: var(--radius-lg); @@ -207,3 +231,68 @@ a { .hidden { display: none !important; } + +/* Toast Notifications */ +.toast-container { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 9999; + display: flex; + flex-direction: column; + gap: 10px; +} + +.toast { + background: var(--surface); + color: var(--text-main); + padding: 1rem 1.5rem; + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); + border-left: 4px solid var(--secondary); + display: flex; + align-items: center; + gap: 0.75rem; + transform: translateX(120%); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + font-weight: 500; +} + +.toast.toast-show { + transform: translateX(0); +} + +.toast.toast-success { border-left-color: var(--accent); } +.toast.toast-error { border-left-color: var(--urgent); } +.toast.toast-warning { border-left-color: var(--warning); } +.toast.toast-info { border-left-color: var(--secondary); } + +/* Form Elements */ +.input-group { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.form-control { + padding: 0.75rem 1rem; + border: 1px solid var(--border); + border-radius: var(--radius-md); + font-family: inherit; + font-size: 0.95rem; + transition: var(--transition); +} + +.form-control:focus { + outline: none; + border-color: var(--secondary); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.form-label { + font-weight: 600; + font-size: 0.9rem; + color: var(--text-muted); +} + diff --git a/globals.js b/globals.js new file mode 100644 index 0000000..0080260 --- /dev/null +++ b/globals.js @@ -0,0 +1,56 @@ +/** + * globals.js + * Contains global UI utilities and helpers used across the CuraFlow application. + */ + +// Initialize Toast Container on load +document.addEventListener('DOMContentLoaded', () => { + if (!document.getElementById('global-toast-container')) { + const container = document.createElement('div'); + container.id = 'global-toast-container'; + container.className = 'toast-container'; + document.body.appendChild(container); + } +}); + +/** + * Displays a premium sliding toast notification + * @param {string} message - The text to display + * @param {string} type - 'success', 'error', 'warning', 'info' (default: 'info') + */ +window.showToast = function(message, type = 'info') { + const container = document.getElementById('global-toast-container'); + if (!container) return; + + const toast = document.createElement('div'); + toast.className = `toast toast-${type}`; + + // Icon based on type + let icon = 'ℹ️'; + if (type === 'success') icon = '✅'; + if (type === 'error') icon = '❌'; + if (type === 'warning') icon = '⚠️'; + + toast.innerHTML = `${icon} ${message}`; + container.appendChild(toast); + + // Trigger animation slightly after append + requestAnimationFrame(() => { + requestAnimationFrame(() => { + toast.classList.add('toast-show'); + }); + }); + + // Remove after 3 seconds + setTimeout(() => { + toast.classList.remove('toast-show'); + toast.addEventListener('transitionend', () => toast.remove()); + }, 3000); +}; + +/** + * Universal dummy handler for unimplemented features + */ +window.handleComingSoon = function(featureName = 'This feature') { + window.showToast(`${featureName} is coming soon!`, 'info'); +}; diff --git a/index.html b/index.html index 7611f7c..4dac06b 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,12 @@ Curio | WhatsApp-First Clinic Management - - - + + + + @@ -71,10 +72,10 @@
Hello! Welcome to Dr. Sharma's Clinic. How can I help you today?
-
- - - +
+ + +
diff --git a/lab.css b/lab.css index 4082490..9964712 100644 --- a/lab.css +++ b/lab.css @@ -12,16 +12,3 @@ .ai-report-card small { color: rgba(255, 255, 255, 0.8); } - -.btn-block { - width: 100%; - margin-top: 1rem; - background: white; - color: var(--secondary); - border: none; -} - -.btn-block:hover { - background: var(--bg); - transform: translateY(-2px); -} diff --git a/lab.html b/lab.html index ca5cb21..96fd902 100644 --- a/lab.html +++ b/lab.html @@ -11,6 +11,7 @@ +