Create-a-modern,-minimalist,-and-user-friendly-web-interface-based-on-the-following-detailed-specifications.-The-layout-consists-of-three-main-sections:-a-file-upload-and-selection-panel,-a-grouped-file-information-column,-and-an-item-specific-details-section.-Use-a-monochromatic-color-palette-(mainly-black,-white,-and-shades-of-gray)-to-maintain-simplicity-and-elegance.-Incorporate-accents-of-light-pink-for-interactive-elements-(e.g.,-file-upload-area),-as-per-the-provided-design-reference.-Ensure-all-elements-are-well-aligned-and-responsive-for-optimal-usability-across-devices.-1.-Left-Column:-File-Upload-and-Selection-Panel-Purpose:-This-section-is-for-uploading-and-selecting-files.-Users-can-upload-files-by-dragging-and-dropping-or-using-a-designated-upload-button.-Appearance:-A-drop-area-styled-with-a-light-pink-background-(#f5e1e5)-and-an-upload-icon-(e.g.,-an-upward-arrow-inside-a-box).-Uploaded-files-are-listed-below-the-drop-area-as-file-cards:-Each-card-has-a-small-icon-representing-the-file-type-(e.g.,-a-PDF-symbol),-the-file-name,-and-the-file-size.-File-cards-should-have-a-white-background-with-light-gray-borders-and-black-text-for-contrast.-Hovering-over-a-file-card-will-apply-a-subtle-shadow-effect-for-feedback.-Interaction:-When-a-file-is-selected,-it-automatically-moves-to-the-middle-column-to-group-with-other-files.-The-left-column-updates-dynamically-as-files-are-added-or-removed.-2.-Middle-Column:-Grouped-File-Information-Purpose:-Displays-grouped-information-about-the-uploaded-files.-Clicking-on-any-file-in-the-left-column-will-focus-on-its-group-and-information-in-this-section.-Appearance:-Groups-are-organized-under-headers-(e.g.,-"Group-1,"-"Group-2")-with-a-horizontal-divider-separating-each-group.-Each-file-is-displayed-as-an-item-card:-Content:-File-name-(bold,-black-text)-and-a-short-description-(light-gray-text).-Item-cards-have-a-light-gray-background-(#f0f0f0)-and-slight-rounded-corners-for-a-soft,-modern-feel.-Add-a-hover-effect:-The-card-highlights-slightly-with-a-darker-gray-border-when-hovered-over.-Interaction:-Clicking-on-an-item-card-will-display-its-details-in-the-right-column.-Smooth-scrolling-or-animation-ensures-a-seamless-user-experience-when-navigating-through-groups.-3.-Right-Column:-Item-Details-Section-Purpose:-Shows-detailed-information-for-the-selected-item-from-the-middle-column.-Appearance:-A-clean,-structured-layout-with-the-following-elements:-Item-Title:-Large,-bold-black-text-at-the-top.-Short-Description:-A-subheading-in-medium-sized-black-text,-followed-by-a-brief-description-in-smaller-light-gray-text.-Additional-Details:-A-separate-section-for-extended-information-with-a-bold-subheader-(e.g.,-"Explaining-Other-Stuff")-and-descriptive-text-in-standard-size,-black-text.-Use-thin-horizontal-dividers-to-separate-sections-for-readability.-Interaction:-Content-updates-dynamically-based-on-the-selected-item-in-the-middle-column.-Include-a-scrollable-container-if-the-content-exceeds-the-visible-area.-General-Notes:-Typography:-Use-a-modern-sans-serif-font-(e.g.,-Inter,-Roboto,-or-Open-Sans)-with-well-defined-hierarchy-(e.g.,-H1-for-section-titles,-H2-for-group-headers,-and-regular-text-for-descriptions).-Color-Palette:-Primary-colors:-White-(#FFFFFF),-Black-(#000000),-Light-Gray-(#F0F0F0).-Accent-color:-Light-Pink-(#F5E1E5)-for-interactive-elements.-Spacing:-Generous-padding-and-margin-for-a-clean-and-airy-design.-Responsiveness:-Optimize-for-all-screen-sizes.-On-smaller-screens,-arrange-the-layout-vertically-with-collapsible-sections.-Ensure-drag-and-drop-functionality-is-touch-friendly.-Additional-Enhancements:-Include-subtle-animations-(e.g.,-file-upload-progress,-hover-effects).-Add-a-search-or-filter-option-for-easier-navigation-in-the-middle-column-if-the-number-of-items-grows-large.-Provide-a-"Clear-All"-button-in-the-left-column-to-reset-uploaded-files.-Implement-tooltips-for-actions-like-file-upload-or-item-selection-for-better-user-guidance.
