UI Enhancement: Modernize Weather Page Design#1856
Merged
Conversation
|
@Aditya8369 is attempting to deploy a commit to the Om Roy's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for creating a PR for your Issue!
|
Contributor
Author
|
@omroy07 merge under NSOC |
|
🎉 Congrats @Aditya8369 on getting your PR merged! 🙌 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
I have successfully modernized the weather page visual design and layout, integrated the theme engine, and resolved a major API performance issue:
Style & Layout Enhancements (
weather.css
):
Implemented design tokens mapping variables for light, dark, ocean, and neon themes.
Added a body backdrop mask overlay (body::after) to preserve text contrast when dynamic weather background images load.
Upgraded the weather container card (.box) to a modern, glassmorphic layout (blur filters, borders, and shadows) with dynamic height flex rules.
Styled custom scrollbars, autocomplete dropdowns, search buttons, .hData-card (hourly card), and .dayData-card (day card).
Improved responsiveness for tablets and mobile devices with flex wrappers and stacked alignment rules.
Theme Switcher & Fixes (
weather.html
):
Added the inline theme check script to prevent style flashes on load.
Integrated the animated Sun/Moon toggle button in the header.
Fixed a syntax error in the mouseover listener (missing single quote) that was breaking script parsing.
Added a themeChanged listener bridge at the bottom to synchronize local changes.
API & Animation Optimizations (
weather.js
):
Consolidated queries into a single fetch to /forecast.json asking for 10 days of data. This eliminates a loop that fired up to 24 sequential hourly fetches, solving severe flickering issues.
Added a fallback to tomorrow's forecast if the page is checked late at night (when no hourly slots remain for today).
Appended cascading fade-in slide-up delay values to newly spawned hourly and daily cards.
Updated weather backgrounds with high-resolution scenic backgrounds from Unsplash.
closes #308