Highlights of this release at a glance.
A comprehensive release bringing a frosted “glass” UI across the app, tactile haptics, Android edge‑to‑edge polish, tags and multi‑select for saved items, a rounded UI option, and a refreshed, more complete onboarding tour.
A small polish release focused on bug fixes, a smoother onboarding tour, and quality-of-life tweaks in Import/Export and Test Settings.
A larger release introducing Import/Export selection pages, mobile polish, online search improvements, and dark mode refinements.
test returns three sample items (Bread, Pasta, Rice) with realistic data and thumbnails, without hitting external APIs.50,5) and ignore stray characters. Press Enter in either field to calculate..text-muted content now uses a light gray in dark mode. This prevents unreadable black text on dark backgrounds across all pages.If you notice anything off or want other improvements (like one-tap Export All), let me know and I’ll add it.
Significant improvements have been made to how API keys are managed within the application, offering greater control and ease of use.
A new graphical user interface (GUI) has been implemented for adding, editing, and managing API keys for various external services. This intuitive interface simplifies the process, making it much easier for users to integrate and control their data sources without needing to delve into code or complex settings files.
The application now supports a wider array of API key configurations, providing users with greater flexibility in choosing and utilizing different external data providers for food nutrition information. The system is designed to be more modular, allowing for easier integration of future APIs and offering users more control over their preferred data sources, enhancing the accuracy and breadth of available nutritional data.
Several updates have been implemented to enhance the overall look, feel, and responsiveness of the application across different devices.
To provide a more polished and professional user experience on larger displays, such as laptops and desktop monitors, the application's main graphical user interface (GUI) now intelligently centers itself. This ensures that the application is not only functional but also aesthetically pleasing, making optimal use of screen real estate and providing a comfortable viewing experience regardless of the monitor size or resolution.
The Dark Mode toggle within the Settings menu has received a visual upgrade to enhance usability and consistency. Specifically, when Dark Mode is active and the toggle is in the "disabled" state, it will now distinctly appear in a white color. This change significantly improves visibility against the darker background, making the toggle's status immediately clear to the user and preventing any ambiguity that might arise from less contrasting color schemes.
To create a more harmonious and visually appealing user interface, the background designs across the entire application have been standardized and made cohesive. This ensures a consistent aesthetic experience as users navigate between different sections and pages. The unified background treatment contributes to a more professional and polished look, reducing visual jarring and enhancing the overall user comfort and engagement with the application.
#resultCard) no longer just pops into existence. It now elegantly fades into view using a fade-in CSS transition. This subtle visual cue draws attention to the newly displayed information, making the calculation process feel more responsive and polished. The transition ensures that the user's focus is naturally directed to the outcome of their input, contributing to a more satisfying interaction.
The settings interface (settings.html) has undergone a complete overhaul to provide a more structured, user-friendly, and scalable experience. Previously, settings might have been scattered or presented in a linear fashion, but now they are logically grouped within an intuitive accordion layout.
This new design categorizes various settings into collapsible sections (e.g., "Visual," "About Carb Calculator"). Each section can be expanded or collapsed, allowing users to easily navigate and focus on the specific settings they wish to adjust without being overwhelmed by too many options at once. This not only improves the aesthetic appeal but also significantly enhances the usability and discoverability of different configuration options, making the application more accessible and manageable for all users.
In line with the improved organization of the settings, the dark mode toggle switch has been thoughtfully moved from its previous location on the main application page (index.html) to the dedicated "Visual" section within the new settings page (settings.html).
This relocation centralizes all visual preferences in one logical place, making it easier for users to find and manage display-related options. By consolidating such settings, we aim to reduce clutter on the main interface and provide a more consistent and intuitive user journey. Users can now access and change their preferred theme alongside other visual configurations, streamlining the customization process.
A significant improvement in this version is the implementation of dynamic UI scaling, ensuring that the Carb Calculator application provides an optimal viewing and interaction experience across a wide array of devices and screen sizes. This means the user interface is no longer static but intelligently adapts its layout, element sizes, and content presentation based on the available screen real estate.
Whether you are accessing the application on a compact smartphone, a mid-sized tablet, or a large desktop monitor, the UI will automatically adjust to maintain readability, usability, and aesthetic integrity. This responsiveness is achieved through a combination of flexible CSS layouts (like Flexbox and Grid), relative units (percentages, vw, vh), and media queries, which allow the application to apply different styles based on screen characteristics. This ensures that all interactive elements remain easily tappable or clickable, text is legible, and the overall layout remains coherent, providing a seamless and consistent experience regardless of the device or orientation.
You can now input your Nutritionix API keys directly in the settings page under the "Online Search" section. This allows for easier configuration of the primary API used for food searches.
The toggle switches in the settings page have been restyled to be larger and aligned to the right, improving their appearance and usability, especially on mobile devices.
A new setting has been added under the "Online Search" tab in the settings page. This allows users to force the application to use the Open Food Facts API for all online food searches, bypassing the default Nutritionix API. This provides more control over the data source for food information.
I've significantly refined the visual feedback within the application by introducing subtle yet impactful animations. These additions are designed to make interactions feel more fluid, intuitive, and modern, improving the overall user experience without being distracting.
slideIn animation, implemented using CSS keyframes and JavaScript to control animation-delay, provides a visually appealing and organized presentation of search outcomes. Instead of an abrupt appearance, each search result item (.online-search-result-item) is introduced with a slight delay, creating a cascading effect that guides the user's eye and enhances readability. This makes browsing search results a more pleasant and less jarring experience.
#resultCard) no longer just pops into existence. It now elegantly fades into view using a fade-in CSS transition. This subtle visual cue draws attention to the newly displayed information, making the calculation process feel more responsive and polished. The transition ensures that the user's focus is naturally directed to the outcome of their input, contributing to a more satisfying interaction.
The settings interface (settings.html) has undergone a complete overhaul to provide a more structured, user-friendly, and scalable experience. Previously, settings might have been scattered or presented in a linear fashion, but now they are logically grouped within an intuitive accordion layout.
This new design categorizes various settings into collapsible sections (e.g., "Visual," "About Carb Calculator"). Each section can be expanded or collapsed, allowing users to easily navigate and focus on the specific settings they wish to adjust without being overwhelmed by too many options at once. This not only improves the aesthetic appeal but also significantly enhances the usability and discoverability of different configuration options, making the application more accessible and manageable for all users.
In line with the improved organization of the settings, the dark mode toggle switch has been thoughtfully moved from its previous location on the main application page (index.html) to the dedicated "Visual" section within the new settings page (settings.html).
This relocation centralizes all visual preferences in one logical place, making it easier for users to find and manage display-related options. By consolidating such settings, we aim to reduce clutter on the main interface and provide a more consistent and intuitive user journey. Users can now access and change their preferred theme alongside other visual configurations, streamlining the customization process.
A significant improvement in this version is the implementation of dynamic UI scaling, ensuring that the Carb Calculator application provides an optimal viewing and interaction experience across a wide array of devices and screen sizes. This means the user interface is no longer static but intelligently adapts its layout, element sizes, and content presentation based on the available screen real estate.
Whether you are accessing the application on a compact smartphone, a mid-sized tablet, or a large desktop monitor, the UI will automatically adjust to maintain readability, usability, and aesthetic integrity. This responsiveness is achieved through a combination of flexible CSS layouts (like Flexbox and Grid), relative units (percentages, vw, vh), and media queries, which allow the application to apply different styles based on screen characteristics. This ensures that all interactive elements remain easily tappable or clickable, text is legible, and the overall layout remains coherent, providing a seamless and consistent experience regardless of the device or orientation.