diff --git a/data_analyzer/templates/data_analyzer/detail.html b/data_analyzer/templates/data_analyzer/detail.html index b489c9a..13b4703 100644 --- a/data_analyzer/templates/data_analyzer/detail.html +++ b/data_analyzer/templates/data_analyzer/detail.html @@ -58,6 +58,12 @@ body { margin-bottom: var(--spacing-xl); } +.header-controls { + display: flex; + align-items: center; + gap: var(--spacing-lg); +} + .agent-grid { display: flex; gap: var(--spacing-lg); @@ -770,6 +776,208 @@ body { border: 1px solid #fecaca; } +/* Quick Agent Access Toggle & Panel */ +.quick-agent-toggle { + display: flex; + align-items: center; + gap: var(--spacing-sm); + padding: var(--spacing-md) var(--spacing-lg); + background: var(--surface); + border: 1px solid var(--outline-variant); + border-radius: var(--radius-md); + color: var(--on-surface); + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + position: relative; +} + +.quick-agent-toggle:hover { + background: var(--surface-variant); + border-color: var(--primary); + transform: translateY(-1px); + box-shadow: var(--shadow-sm); +} + +.quick-agent-toggle.active { + background: var(--primary); + color: white; + border-color: var(--primary); +} + +.toggle-icon { + font-size: 16px; + transition: transform 0.2s ease; +} + +.quick-agent-toggle.active .toggle-icon { + transform: rotate(180deg); +} + +.quick-agents-panel { + position: fixed; + top: 0; + right: 0; + width: 400px; + height: 100vh; + background: var(--surface); + border-left: 1px solid var(--outline); + box-shadow: var(--shadow-lg); + z-index: 1000; + transform: translateX(100%); + transition: transform 0.3s ease; + overflow-y: auto; +} + +.quick-agents-panel.active { + transform: translateX(0); +} + +.quick-agents-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-lg); + border-bottom: 1px solid var(--outline-variant); + background: var(--surface-variant); +} + +.quick-agents-header h3 { + margin: 0; + font-size: 18px; + font-weight: 600; + color: var(--on-surface); +} + +.close-panel { + background: none; + border: none; + font-size: 24px; + color: var(--on-surface-variant); + cursor: pointer; + padding: 4px; + border-radius: var(--radius-sm); + transition: all 0.2s ease; +} + +.close-panel:hover { + background: var(--surface); + color: var(--on-surface); +} + +.quick-agents-grid { + padding: var(--spacing-lg); + display: flex; + flex-direction: column; + gap: var(--spacing-md); +} + +.quick-agent-card { + display: flex; + align-items: center; + gap: var(--spacing-md); + padding: var(--spacing-md); + border: 1px solid var(--outline-variant); + border-radius: var(--radius-md); + text-decoration: none; + color: var(--on-surface); + transition: all 0.2s ease; + background: var(--surface); +} + +.quick-agent-card:hover { + background: var(--surface-variant); + border-color: var(--primary); + transform: translateY(-1px); + box-shadow: var(--shadow-sm); +} + +.agent-icon { + font-size: 24px; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--surface-variant); + border-radius: var(--radius-md); + flex-shrink: 0; +} + +.agent-info { + flex: 1; +} + +.agent-info h4 { + margin: 0 0 4px 0; + font-size: 14px; + font-weight: 600; + color: var(--on-surface); +} + +.agent-info p { + margin: 0; + font-size: 12px; + color: var(--on-surface-variant); + line-height: 1.4; +} + +.agent-price { + font-size: 12px; + font-weight: 600; + color: var(--primary); + background: rgba(0, 0, 0, 0.05); + padding: 2px 8px; + border-radius: var(--radius-sm); + margin-top: 4px; + display: inline-block; +} + +.quick-agents-footer { + padding: var(--spacing-md) var(--spacing-lg); + border-top: 1px solid var(--outline-variant); + background: var(--surface-variant); +} + +.view-all-agents { + display: block; + text-align: center; + padding: var(--spacing-md); + background: var(--primary); + color: white; + text-decoration: none; + border-radius: var(--radius-md); + font-size: 14px; + font-weight: 500; + transition: all 0.2s ease; +} + +.view-all-agents:hover { + background: #333333; + transform: translateY(-1px); + box-shadow: var(--shadow-sm); +} + +/* Overlay for mobile */ +.quick-agents-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; +} + +.quick-agents-overlay.active { + opacity: 1; + visibility: visible; +} + /* Toast Notifications */ .toast { position: fixed; @@ -902,6 +1110,24 @@ body { margin-top: 0; /* Remove margin since we're positioned below header */ } + .header-controls { + width: 100%; + justify-content: space-between; + } + + .quick-agent-toggle { + flex: 1; + margin-right: var(--spacing-md); + justify-content: center; + } + + .quick-agents-panel { + width: 100%; + max-width: 100%; + right: 0; + left: 0; + } + .agent-title { font-size: 24px; } @@ -974,20 +1200,76 @@ body {

Data Analyzer

Upload your data file and get AI-powered analysis with advanced insights

-
-
-

Your Wallet

-
💳
-
-
-
- {{ user.wallet_balance|floatformat:2 }} AED +
+ + + +
+
+

Your Wallet

+
💳
+
+
+
+ {{ user.wallet_balance|floatformat:2 }} AED +
+
Available Balance
-
Available Balance
+ +
+
@@ -1602,5 +1884,46 @@ function initializeAgent() { // Any agent-specific initialization can go here console.log('Agent initialized'); } + +// Quick Agent Access Toggle Functions +function toggleQuickAgents() { + const panel = document.getElementById('quickAgentsPanel'); + const overlay = document.getElementById('quickAgentsOverlay'); + const toggle = document.querySelector('.quick-agent-toggle'); + + const isActive = panel.classList.contains('active'); + + if (isActive) { + // Close panel + panel.classList.remove('active'); + overlay.classList.remove('active'); + toggle.classList.remove('active'); + document.body.style.overflow = 'auto'; + } else { + // Open panel + panel.classList.add('active'); + overlay.classList.add('active'); + toggle.classList.add('active'); + document.body.style.overflow = 'hidden'; + } +} + +function closeQuickAgents() { + const panel = document.getElementById('quickAgentsPanel'); + const overlay = document.getElementById('quickAgentsOverlay'); + const toggle = document.querySelector('.quick-agent-toggle'); + + panel.classList.remove('active'); + overlay.classList.remove('active'); + toggle.classList.remove('active'); + document.body.style.overflow = 'auto'; +} + +// Close panel with Escape key +document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') { + closeQuickAgents(); + } +}); {% endblock %} \ No newline at end of file