From 819af159a94437dd66d08c1b9f896f9028e097dc Mon Sep 17 00:00:00 2001 From: Lindsey Bieda Date: Sat, 13 Dec 2025 05:59:16 +0000 Subject: [PATCH 1/6] Remove border-left --- static/css/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/static/css/style.css b/static/css/style.css index 436f58a..ee2119d 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -164,7 +164,6 @@ button.loading:hover { padding: 20px; background: var(--section-bg); border-radius: 10px; - border-left: 5px solid #667eea; transition: background 0.3s ease; } From 27c16adf574de464b60c04837102bccb76fbf27a Mon Sep 17 00:00:00 2001 From: Lindsey Bieda Date: Sat, 13 Dec 2025 06:17:42 +0000 Subject: [PATCH 2/6] Add toggles for for full chart sections --- static/css/style.css | 72 +++++++++++++++++++++++++++++++++++++ static/js/section-toggle.js | 67 ++++++++++++++++++++++++++++++++++ templates/full_chart.html | 19 +++++++--- 3 files changed, 154 insertions(+), 4 deletions(-) create mode 100644 static/js/section-toggle.js diff --git a/static/css/style.css b/static/css/style.css index ee2119d..b87d268 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -847,3 +847,75 @@ input[readonly] { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } +/* Toggleable Section Styles */ +.toggleable-section { + position: relative; + padding: 0; +} + +.section-header { + display: flex; + align-items: center; + cursor: pointer; + user-select: none; + padding: 15px; + margin: 0; + border-radius: 8px; + transition: all 0.2s ease; + width: 100%; + border: 1px solid var(--border-color); + background: var(--section-bg); + text-align: left; + box-shadow: none; +} + +.section-header:hover { + background: rgba(102, 126, 234, 0.05); + border-color: #667eea; + box-shadow: none; +} + +.dark-mode .section-header:hover { + background: rgba(102, 126, 234, 0.1); + border-color: #667eea; + box-shadow: none; +} + +.section-header h2 { + margin: 0; + flex: 1; + pointer-events: none; +} + +.toggle-btn { + background: transparent; + border: none; + font-size: 16px; + cursor: pointer; + padding: 0; + margin-right: 10px; + color: var(--text-secondary); + transition: color 0.2s ease; + line-height: 1; + flex-shrink: 0; + width: 16px; + height: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + font-family: monospace; +} + +.section-content { + max-height: 10000px; + overflow: hidden; + transition: max-height 0.5s ease, opacity 0.3s ease, padding 0.3s ease; + opacity: 1; + padding: 20px; +} + +.section-content.collapsed { + max-height: 0; + opacity: 0; + padding: 0; +} \ No newline at end of file diff --git a/static/js/section-toggle.js b/static/js/section-toggle.js new file mode 100644 index 0000000..91c36b2 --- /dev/null +++ b/static/js/section-toggle.js @@ -0,0 +1,67 @@ +/** + * Toggle functionality for collapsible sections + */ + +function initializeToggleSections() { + const headers = document.querySelectorAll('.section-header'); + + headers.forEach(header => { + header.addEventListener('click', function(e) { + e.preventDefault(); + + const sectionId = this.getAttribute('data-section'); + const content = document.getElementById(sectionId); + const toggleIcon = this.querySelector('.toggle-btn'); + const isCollapsed = content.classList.contains('collapsed'); + + if (isCollapsed) { + // Expand section + content.classList.remove('collapsed'); + toggleIcon.classList.remove('collapsed'); + toggleIcon.textContent = '▼'; + this.setAttribute('aria-expanded', 'true'); + + // Save state to localStorage + localStorage.setItem(`section-${sectionId}`, 'expanded'); + } else { + // Collapse section + content.classList.add('collapsed'); + toggleIcon.classList.add('collapsed'); + toggleIcon.textContent = '▶'; + this.setAttribute('aria-expanded', 'false'); + + // Save state to localStorage + localStorage.setItem(`section-${sectionId}`, 'collapsed'); + } + }); + }); + + // Restore saved states from localStorage + restoreSectionStates(); +} + +function restoreSectionStates() { + const headers = document.querySelectorAll('.section-header'); + + headers.forEach(header => { + const sectionId = header.getAttribute('data-section'); + const savedState = localStorage.getItem(`section-${sectionId}`); + const content = document.getElementById(sectionId); + const toggleIcon = header.querySelector('.toggle-btn'); + + if (savedState === 'expanded') { + content.classList.remove('collapsed'); + toggleIcon.classList.remove('collapsed'); + toggleIcon.textContent = '▼'; + header.setAttribute('aria-expanded', 'true'); + } + // Default is already collapsed, no need to do anything + }); +} + +// Initialize when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeToggleSections); +} else { + initializeToggleSections(); +} diff --git a/templates/full_chart.html b/templates/full_chart.html index 4df3309..31063d3 100644 --- a/templates/full_chart.html +++ b/templates/full_chart.html @@ -5,6 +5,7 @@ {% block extra_scripts %} + {% if streaming %} @@ -148,8 +149,12 @@

⬆️ Ascendant

-
-

🪐 All Planets

+
+ +
-
-

🏠 Houses

+
+ + +
From b689434fccb109035f78f93cd7a307b7330aeb7d Mon Sep 17 00:00:00 2001 From: Lindsey Bieda Date: Sat, 13 Dec 2025 06:32:48 +0000 Subject: [PATCH 3/6] Modal for location help --- static/css/style.css | 128 ++++++++++++++++++++++++++++++++++++++++++- static/js/modal.js | 60 ++++++++++++++++++++ templates/index.html | 34 ++++++++---- 3 files changed, 210 insertions(+), 12 deletions(-) create mode 100644 static/js/modal.js diff --git a/static/css/style.css b/static/css/style.css index b87d268..ad92f76 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -83,7 +83,8 @@ h1, h2 { } label { - display: block; + display: flex; + align-items: center; margin-bottom: 5px; font-weight: bold; color: var(--text-tertiary); @@ -847,6 +848,131 @@ input[readonly] { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } + +/* Modal Styles */ +.modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 2000; + justify-content: center; + align-items: center; + backdrop-filter: blur(5px); + animation: fadeIn 0.2s ease; +} + +.modal-overlay.active { + display: flex; +} + +.modal-content { + background: var(--container-bg); + border-radius: 15px; + padding: 30px; + max-width: 500px; + width: 90%; + max-height: 80vh; + overflow-y: auto; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + position: relative; + animation: slideIn 0.3s ease; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slideIn { + from { transform: translateY(-30px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.modal-header h3 { + margin: 0; + color: var(--text-secondary); +} + +.modal-close { + background: transparent; + border: 2px solid var(--text-tertiary); + font-size: 28px; + cursor: pointer; + color: var(--text-tertiary); + padding: 0; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; +} + +.modal-close:hover { + background: rgba(102, 126, 234, 0.1); + color: var(--text-tertiary); + border-color: #667eea; +} + +.modal-body { + color: var(--text-color); +} + +.modal-body p { + margin: 15px 0; +} + +.modal-body ul { + margin: 10px 0; + padding-left: 20px; +} + +.modal-body li { + margin: 8px 0; +} + +.help-icon-btn { + background: transparent; + border: 2px solid var(--border-color); + border-radius: 50%; + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: var(--text-secondary); + font-size: 14px; + font-weight: bold; + font-family: Arial, sans-serif; + margin-left: 8px; + padding: 0; + line-height: 1; + transition: all 0.2s ease; + flex-shrink: 0; +} + +.help-icon-btn:hover { + background: #667eea; + border-color: #667eea; + color: white; + transform: scale(1.1); +} + /* Toggleable Section Styles */ .toggleable-section { position: relative; diff --git a/static/js/modal.js b/static/js/modal.js new file mode 100644 index 0000000..69d2972 --- /dev/null +++ b/static/js/modal.js @@ -0,0 +1,60 @@ +/** + * Modal functionality for help dialogs + */ + +function openModal(modalId) { + const modal = document.getElementById(modalId); + if (modal) { + modal.classList.add('active'); + document.body.style.overflow = 'hidden'; // Prevent background scrolling + } +} + +function closeModal(modalId) { + const modal = document.getElementById(modalId); + if (modal) { + modal.classList.remove('active'); + document.body.style.overflow = ''; // Restore scrolling + } +} + +// Initialize modal listeners when DOM is ready +function initializeModals() { + // Close modal when clicking on overlay (outside modal content) + const overlays = document.querySelectorAll('.modal-overlay'); + overlays.forEach(overlay => { + overlay.addEventListener('click', function(e) { + if (e.target === this) { + closeModal(this.id); + } + }); + }); + + // Close modal when clicking close button + const closeButtons = document.querySelectorAll('.modal-close'); + closeButtons.forEach(button => { + button.addEventListener('click', function() { + const modal = this.closest('.modal-overlay'); + if (modal) { + closeModal(modal.id); + } + }); + }); + + // Close modal on Escape key + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') { + const activeModal = document.querySelector('.modal-overlay.active'); + if (activeModal) { + closeModal(activeModal.id); + } + } + }); +} + +// Initialize when DOM is ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeModals); +} else { + initializeModals(); +} diff --git a/templates/index.html b/templates/index.html index 3109838..21ef949 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,6 +5,7 @@ + {% endblock %} @@ -66,7 +67,10 @@

🌟 Astro Horoscope

- +
@@ -109,15 +113,23 @@

🌟 Astro Horoscope

-
-

📍 Location Help

-

🗺️ Using the Interactive Map:

-
    -
  • Click anywhere on the map to set your birth location
    • -
  • Search for your birth city in the search box above the map
    • -
  • The map will automatically detect your current location (if you allow it)
    • -
  • Coordinates will be automatically converted to astrology format
    • -
-

💡 The map makes it easy to find your exact birth location - just click or search!

+ + {% endblock %} From fef053389b3214ec7d267ebfaffe9958f72c4a35 Mon Sep 17 00:00:00 2001 From: Lindsey Bieda Date: Sat, 13 Dec 2025 13:58:24 -0800 Subject: [PATCH 4/6] Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- static/css/style.css | 16 ++++++++-------- static/js/section-toggle.js | 10 ++++++---- templates/full_chart.html | 4 ++-- templates/index.html | 2 +- 4 files changed, 17 insertions(+), 15 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index ad92f76..a88285e 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -911,8 +911,8 @@ input[readonly] { cursor: pointer; color: var(--text-tertiary); padding: 0; - width: 30px; - height: 30px; + width: 44px; + height: 44px; display: flex; align-items: center; justify-content: center; @@ -947,16 +947,16 @@ input[readonly] { background: transparent; border: 2px solid var(--border-color); border-radius: 50%; - width: 24px; - height: 24px; - min-width: 24px; - min-height: 24px; + width: 44px; + height: 44px; + min-width: 44px; + min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); - font-size: 14px; + font-size: 24px; /* Ensures the icon remains visually 24px */ font-weight: bold; font-family: Arial, sans-serif; margin-left: 8px; @@ -1033,7 +1033,7 @@ input[readonly] { } .section-content { - max-height: 10000px; + max-height: none; overflow: hidden; transition: max-height 0.5s ease, opacity 0.3s ease, padding 0.3s ease; opacity: 1; diff --git a/static/js/section-toggle.js b/static/js/section-toggle.js index 91c36b2..ef6042d 100644 --- a/static/js/section-toggle.js +++ b/static/js/section-toggle.js @@ -50,10 +50,12 @@ function restoreSectionStates() { const toggleIcon = header.querySelector('.toggle-btn'); if (savedState === 'expanded') { - content.classList.remove('collapsed'); - toggleIcon.classList.remove('collapsed'); - toggleIcon.textContent = '▼'; - header.setAttribute('aria-expanded', 'true'); + if (content && toggleIcon) { + content.classList.remove('collapsed'); + toggleIcon.classList.remove('collapsed'); + toggleIcon.textContent = '▼'; + header.setAttribute('aria-expanded', 'true'); + } } // Default is already collapsed, no need to do anything }); diff --git a/templates/full_chart.html b/templates/full_chart.html index 31063d3..ab4de8c 100644 --- a/templates/full_chart.html +++ b/templates/full_chart.html @@ -150,9 +150,9 @@

⬆️ Ascendant

+

🪐 All Planets