AI生成UI-玻璃拟态（柔和橙色）

作为一名资深APP UI设计师，请根据以下详细的产品需求和设计规范，为下列应用创建一套完整的UI界面设计方案，并最终生成一个包含所有设计页面的、符合技术规格的**单一HTML文件**。 ## 1. 应用概念与核心功能 * **应用名称:** * **核心理念:** * **核心模块与功能:** ## 2. 新视觉风格 * **玻璃拟态背景 (Glassmorphism):** * 应用于关键卡片（首页摘要卡、目标卡片）、底部导航栏、弹出的模态窗口/操作菜单。 * 效果：使用 `background-color` 设置半透明底色 (如 `rgba(255, 255, 255, 0.6)`)，`backdrop-filter: blur(10px)` 实现背景模糊，并添加柔和的内阴影或边框 `border: 1px solid rgba(255, 255, 255, 0.2)` 模拟光感边缘。 * **低饱和配色:** * 主背景: 温暖米白 `#F8F4F0`。 * 主文字: 深灰 `#4A4A4A`。 * 次要文字/提示文字: 浅灰 `#888888`。 * 点缀色/强调色: 柔和橙色 `#FF7F50` (用于按钮、图标、图表线条、选中状态、焦点指示)。 * 卡片/玻璃背景下的文字颜色需要确保对比度足够。 * **极简字体排版:** * 字体: 优先使用 `Poppins`, `Roboto`, `思源黑体` (Sans-serif)。 * 显示：文字显示为中文 * 层级: * 大标题 (页面标题): `30px` Bold。 * 卡片标题/重要标签: `20px` Medium。 * 正文/列表项: `16px` Regular。 * 小字号/说明文字: `14px` Regular。 * 通过字重 (Bold, Medium, Regular) 和颜色 (`#4A4A4A`, `#888888`) 区分信息主次。 * **表单优化:** * 输入框 (``, `

`): **去除默认边框** (`border: none;`)，使用流畅圆角 (`border-radius: 12px;`) 和浅色背景 (`background-color: #FFFFFF;` 或略带透明的白色)，内边距 (`padding`) 舒适。获得焦点 (`:focus`) 时，可显示橙色外发光 (`box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.3);`) 或底部细线。
*   **交互动效:**
    *   **按钮:** 默认状态有极其微弱的**呼吸感阴影** (通过 `animation` 循环改变 `box-shadow` 的模糊半径或扩散范围)。点击时有 `transform: scale(0.98)` 或 透明度变化 `opacity: 0.8` 的反馈。
    *   **卡片:** 在支持悬停的场景（代码预览时模拟），鼠标悬停 (`:hover`) 时触发**轻微上浮** (`transform: translateY(-4px);`) 和**增强的阴影** (`filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));` 或 `box-shadow`)。阴影效果优先使用 `filter: drop-shadow()` 以获得更自然的悬浮感，尤其是在非纯色背景上。

## 3. 技术规格

*   **输出格式:** 单个完整的HTML文件。所有CSS样式使用 `` 标签内嵌，必要的简单JS（如图表动画触发）也内嵌在 `` 标签中。
*   **布局:**
    *   HTML Body内创建一个容器，用于横向排列所有页面预览。
    *   每行展示 **6个** 页面预览。使用 Flexbox 或 Grid 布局实现。
    *   当页面数量超过6个时，自动换行。
*   **页面预览画板:**
    *   每个页面预览模拟手机屏幕，尺寸严格为 **375x812px**。
    *   为每个画板添加 **1px 的灰色描边** (`border: 1px solid #CCCCCC;`) 模拟手机边框。
    *   画板之间需要有适当的间距 (`margin`)。
*   **矢量图标系统:**
    *   **必须** 使用SVG `` 技术定义图标。在HTML文件顶部 `` 块中定义所有需要的图标（如 home, target, quote, image, journal, settings, add, check, arrow-right, search, edit, delete, play-circle 等）。
    *   在页面中通过 `` 的方式引用图标。图标颜色应能通过CSS `fill: currentColor;` 控制，以便继承父元素的颜色或单独设置。
*   **动态折线图:**
    *   在“目标详情页”的进度追踪模块中实现。
    *   使用SVG `` 绘制折线。
    *   **必须** 使用CSS `stroke-dasharray` 和 `stroke-dashoffset` 属性，并配合 `@keyframes` 动画，实现线条从起点到终点动态绘制出来的效果。
*   **卡片悬浮效果:**
    *   应用于主页、目标列表等页面的卡片元素。
    *   **必须** 优先尝试通过 CSS `filter: drop-shadow(...)` 属性实现悬浮时的阴影效果。如果实现复杂或效果不佳，可回退到 `box-shadow`。配合 `transition` 使效果平滑。
*   **图片占位:**
    *   **问题说明:** 之前的尝试中使用 `source.unsplash.com/random` 导致图片显示不稳定或缺失。
    *   **可靠性要求:** 为了确保所有图片占位符 **必须** 可靠显示.
## 4. 预期产出

请基于以上所有需求，生成一份结构清晰、代码规范的 **HTML完整代码**。代码应能直接在浏览器中打开，并展示所有设计的页面预览，符合布局和样式要求。确保包含了SVG图标定义、CSS样式（含玻璃拟态、配色、字体、无边框表单、动效）、以及图表动画的实现。 
                     
                     </div>
                         <div class="text-center theme-box muted-3-color box-body separator em09">THE END</div>
                         <div class="theme-box article-tags">
                         
                         
                        
     
                                 
                                 </div>
                     </div>
                
          
                 </article>
                 <div class="theme-box" style="height:99px">
                 
                 
                 
                 
                 <nav class="article-nav">
                 
                  
                 
                 
                 <div class="main-bg box-body radius8 main-shadow">
<a href="/sj-prompter/5459.html"><p class="muted-2-color"><i class="fa fa-angle-left em12"></i><i class="fa fa-angle-left em12 mr6"></i>上一篇</p><div class="text-ellipsis-2">AI生成UI-纯手绘艺术风格</div>
</a></div>
    <div class="main-bg box-body radius8 main-shadow">
<a href="/sj-prompter/5461.html"><p class="muted-2-color">下一篇<i class="fa fa-angle-right em12 ml6"></i><i class="fa fa-angle-right em12"></i></p><div class="text-ellipsis-2">AI生成UI-可交互式UI</div>
</a></div></nav>
   
                     <nav class="article-nav">
                     
                     
                      
             
                         
                             
                  
                         
                         
                         
                     </nav>
                 </div>
                 <div class="theme-box relates relates-thumb">
                     <div class="box-body notop">
                         <div class="title-theme">相关推荐</div>
                     </div>
                     <div class="zib-widget">
                         <div class="swiper-container swiper-scroll swiper-scroll-eq-0 swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events swiper-container-free-mode"
                             swiper-scroll-index="0">
                             <div class="swiper-wrapper" id="swiper-wrapper-7f10f13ef85510fed2" aria-live="polite"
                                 style="transform: translate3d(0px, 0px, 0px);">
  
                    
 
                        
                        
                         
                                 <div class="swiper-slide mr10 swiper-slide-active" role="group" aria-label="1 / 6"><a
                                         href="/sj-prompter/5502.html">
                                         <div class="graphic hover-zoom-img mb10 style-3"
                                             style="padding-bottom: 70%!important;"><img class="fit-cover lazyload"
                                                 data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                                                 src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                                                 alt="产品ui原型设计-九宫格布局预览">
                                             <div class="abs-center left-bottom graphic-text text-ellipsis">
                                                 产品ui原型设计-九宫格布局预览</div>
                                             <div class="abs-center left-bottom graphic-text">
                                                 <div class="em09 opacity8">产品ui原型设计-九宫格布局预览</div>
                                                 <div class="px12 opacity8 mt6">
                                                     <item>    2025年06月17日     </item>
                                                     <item class="pull-right"><svg class="icon" aria-hidden="true">
                                                             <use xlink:href="#icon-view"></use>
                                                         </svg> 1+</item>
                                                 </div>
                                             </div>
                                         </div>
                                     </a></div>
                                     
                                       
                                 <div class="swiper-slide mr10 swiper-slide-active" role="group" aria-label="1 / 6"><a
                                         href="/sj-prompter/5501.html">
                                         <div class="graphic hover-zoom-img mb10 style-3"
                                             style="padding-bottom: 70%!important;"><img class="fit-cover lazyload"
                                                 data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                                                 src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                                                 alt="iOS App 风格 (复制)">
                                             <div class="abs-center left-bottom graphic-text text-ellipsis">
                                                 iOS App 风格 (复制)</div>
                                             <div class="abs-center left-bottom graphic-text">
                                                 <div class="em09 opacity8">iOS App 风格 (复制)</div>
                                                 <div class="px12 opacity8 mt6">
                                                     <item>    2025年06月15日     </item>
                                                     <item class="pull-right"><svg class="icon" aria-hidden="true">
                                                             <use xlink:href="#icon-view"></use>
                                                         </svg> 1+</item>
                                                 </div>
                                             </div>
                                         </div>
                                     </a></div>
                                     
                                       
                                 <div class="swiper-slide mr10 swiper-slide-active" role="group" aria-label="1 / 6"><a
                                         href="/sj-prompter/5491.html">
                                         <div class="graphic hover-zoom-img mb10 style-3"
                                             style="padding-bottom: 70%!important;"><img class="fit-cover lazyload"
                                                 data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                                                 src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                                                 alt="iOS App 风格">
                                             <div class="abs-center left-bottom graphic-text text-ellipsis">
                                                 iOS App 风格</div>
                                             <div class="abs-center left-bottom graphic-text">
                                                 <div class="em09 opacity8">iOS App 风格</div>
                                                 <div class="px12 opacity8 mt6">
                                                     <item>    2025年06月15日     </item>
                                                     <item class="pull-right"><svg class="icon" aria-hidden="true">
                                                             <use xlink:href="#icon-view"></use>
                                                         </svg> 1+</item>
                                                 </div>
                                             </div>
                                         </div>
                                     </a></div>
                                     
                                       
                                 <div class="swiper-slide mr10 swiper-slide-active" role="group" aria-label="1 / 6"><a
                                         href="/sj-prompter/5490.html">
                                         <div class="graphic hover-zoom-img mb10 style-3"
                                             style="padding-bottom: 70%!important;"><img class="fit-cover lazyload"
                                                 data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                                                 src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                                                 alt="WWDC苹果最新液态玻璃效果UI">
                                             <div class="abs-center left-bottom graphic-text text-ellipsis">
                                                 WWDC苹果最新液态玻璃效果UI</div>
                                             <div class="abs-center left-bottom graphic-text">
                                                 <div class="em09 opacity8">WWDC苹果最新液态玻璃效果UI</div>
                                                 <div class="px12 opacity8 mt6">
                                                     <item>    2025年06月15日     </item>
                                                     <item class="pull-right"><svg class="icon" aria-hidden="true">
                                                             <use xlink:href="#icon-view"></use>
                                                         </svg> 1+</item>
                                                 </div>
                                             </div>
                                         </div>
                                     </a></div>
                                     
                                       
                                     
                                
                                     
 
                        
 
 
 
 
 
                             </div>
                             <div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button"
                                 aria-label="Previous slide" aria-controls="swiper-wrapper-7f10f13ef85510fed2"
                                 aria-disabled="true"></div>
                             <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
                                 aria-controls="swiper-wrapper-7f10f13ef85510fed2" aria-disabled="false"></div><span
                                 class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                         </div>
                     </div>
                 </div>
 
 
             </div>
         </div>

<div class="sidebar">
    <div class="sidebar-affix affix-top" style="width: 311px; top: 88px;"></div>
    <div data-affix="true"></div>
  
    <div data-affix="true" class=" hidden-xs">
       
        <div class="zib-widget hot-posts">
        
          
            <div class="relative"><a target="_blank" href="/AI-news/4467.html">
                    <div class="graphic hover-zoom-img" style="padding-bottom: 60%!important;"><img data-lazyloaded="1"
                            src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            alt="Woodmart 8.2.2汉化中文版|快速高级WooCommerce WordPress企业主题模板-搬主题"
                            class="fit-cover radius8 entered litespeed-loaded ls-is-cached lazyloaded lazyloadafter"
                            data-ll-status="loaded">
                        <div class="absolute linear-mask"></div>
                        <div class="abs-center left-bottom box-body">
                            <div class="mb6"><span class="badg b-theme badg-sm">174人已阅读</span></div>AI新动态：Grok能看懂世界了 OpenAI开放超强图像生成API                        </div>
                    </div>
                </a>
                <badge class="img-badge left hot em12"><i>TOP1</i></badge>
            </div>
              
            
            <div class="flex mt15 relative hover-zoom-img"><a target="_blank"
                    href="/sj-prompter/5502.html">
                    <div class="graphic"><img data-lazyloaded="1"
                            src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            alt="产品ui原型设计-九宫格布局预览"
                            class="fit-cover radius8 entered litespeed-loaded ls-is-cached lazyloaded lazyloadafter"
                            data-ll-status="loaded"></div>
                </a>
                <div class="term-title ml10 flex xx flex1 jsb">
                    <div class="text-ellipsis-2"><a class="" target="_blank" href="/sj-prompter/5502.html">产品ui原型设计-九宫格布局预览</a>
                    </div>
                    <div class="px12 muted-3-color text-ellipsis flex jsb"><span><i class="fa fa-clock-o mr3"
                                aria-hidden="true"></i>06月17日</span><span>156人已阅读</span></div>
                </div>
                <badge class="img-badge left hot jb-red"><i>TOP2</i></badge>
            </div>
         
         
            
                   
            
            <div class="flex mt15 relative hover-zoom-img"><a target="_blank"
                    href="/wordpress-mannual/4219.html">
                    <div class="graphic"><img data-lazyloaded="1"
                            src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            alt="1 WordPress基础知识"
                            class="fit-cover radius8 entered litespeed-loaded ls-is-cached lazyloaded lazyloadafter"
                            data-ll-status="loaded"></div>
                </a>
                <div class="term-title ml10 flex xx flex1 jsb">
                    <div class="text-ellipsis-2"><a class="" target="_blank" href="/wordpress-mannual/4219.html">1 WordPress基础知识</a>
                    </div>
                    <div class="px12 muted-3-color text-ellipsis flex jsb"><span><i class="fa fa-clock-o mr3"
                                aria-hidden="true"></i>02月04日</span><span>132人已阅读</span></div>
                </div>
                <badge class="img-badge left hot jb-red"><i>TOP3</i></badge>
            </div>
         
         
            
                   
            
            <div class="flex mt15 relative hover-zoom-img"><a target="_blank"
                    href="/qita-prompter/5482.html">
                    <div class="graphic"><img data-lazyloaded="1"
                            src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            alt="AI音乐制作提示词"
                            class="fit-cover radius8 entered litespeed-loaded ls-is-cached lazyloaded lazyloadafter"
                            data-ll-status="loaded"></div>
                </a>
                <div class="term-title ml10 flex xx flex1 jsb">
                    <div class="text-ellipsis-2"><a class="" target="_blank" href="/qita-prompter/5482.html">AI音乐制作提示词</a>
                    </div>
                    <div class="px12 muted-3-color text-ellipsis flex jsb"><span><i class="fa fa-clock-o mr3"
                                aria-hidden="true"></i>06月15日</span><span>77人已阅读</span></div>
                </div>
                <badge class="img-badge left hot jb-red"><i>TOP4</i></badge>
            </div>
         
         
            
                   
            
            <div class="flex mt15 relative hover-zoom-img"><a target="_blank"
                    href="/AI-news/4483.html">
                    <div class="graphic"><img data-lazyloaded="1"
                            src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            data-src="https://hxlsw.com/assets/addons/cms/img/noimage.jpg"
                            alt="AI普惠化阿联酋向所有公民和居民免费提供ChatGPT Plus"
                            class="fit-cover radius8 entered litespeed-loaded ls-is-cached lazyloaded lazyloadafter"
                            data-ll-status="loaded"></div>
                </a>
                <div class="term-title ml10 flex xx flex1 jsb">
                    <div class="text-ellipsis-2"><a class="" target="_blank" href="/AI-news/4483.html">AI普惠化阿联酋向所有公民和居民免费提供ChatGPT Plus</a>
                    </div>
                    <div class="px12 muted-3-color text-ellipsis flex jsb"><span><i class="fa fa-clock-o mr3"
                                aria-hidden="true"></i>06月12日</span><span>40人已阅读</span></div>
                </div>
                <badge class="img-badge left hot jb-red"><i>TOP5</i></badge>
            </div>
         
         
            
               
            
            
            
            
            
            
        </div>
    </div>
     
    <div data-affix="true" class="widget-main-post mb20 style-mini hidden-xs">
        <div class="box-body notop">
            <div class="title-theme">最新文章</div>
        </div>
        <div class="zib-widget posts-mini-lists">
            <div class="widget-ajaxpager lazyloaded lazyloadafter" lazyload-action="ias">
               
               
               
               
                
                
            
            
            
                   
               
                                    <div class="posts-mini ajax-item">
                                        <div class="posts-mini-con flex xx flex1 jsb">
                                            <h2 class="item-heading text-ellipsis-2">
                                            <a target="_blank" href="/Scrapes/5508.html">WordPress Scrapes 插件分析与二次开发说明<span class="focus-color"></span></a></h2>
                                            <div class="item-meta muted-2-color flex jsb ac">
                                                <item title="2025年06月17日" class="icon-circle mln3">2025年06月17日</item>
                                                <div class="meta-right">
                                                    <item class="meta-view"><svg class="icon" aria-hidden="true">
                                                            <use xlink:href="#icon-view"></use>
                                                        </svg>34人已阅读</item>   
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                     
                   
               
                                    <div class="posts-mini ajax-item">
                                        <div class="posts-mini-con flex xx flex1 jsb">
                                            <h2 class="item-heading text-ellipsis-2">
                                            <a target="_blank" href="/sj-prompter/5502.html">产品ui原型设计-九宫格布局预览<span class="focus-color"></span></a></h2>
                                            <div class="item-meta muted-2-color flex jsb ac">
                                                <item title="2025年06月17日" class="icon-circle mln3">2025年06月17日</item>
                                                <div class="meta-right">
                                                    <item class="meta-view"><svg class="icon" aria-hidden="true">
                                                            <use xlink:href="#icon-view"></use>
                                                        </svg>156人已阅读</item>   
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                     
                   
               
                                    <div class="posts-mini ajax-item">
                                        <div class="posts-mini-con flex xx flex1 jsb">
                                            <h2 class="item-heading text-ellipsis-2">
                                            <a target="_blank" href="/sj-prompter/5501.html">iOS App 风格 (复制)<span class="focus-color"></span></a></h2>
                                            <div class="item-meta muted-2-color flex jsb ac">
                                                <item title="2025年06月15日" class="icon-circle mln3">2025年06月15日</item>
                                                <div class="meta-right">
                                                    <item class="meta-view"><svg class="icon" aria-hidden="true">
                                                            <use xlink:href="#icon-view"></use>
                                                        </svg>17人已阅读</item>   
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                     
                   
               
                                    <div class="posts-mini ajax-item">
                                        <div class="posts-mini-con flex xx flex1 jsb">
                                            <h2 class="item-heading text-ellipsis-2">
                                            <a target="_blank" href="/fx-prompter/5500.html">人群洞察串联分析<span class="focus-color"></span></a></h2>
                                            <div class="item-meta muted-2-color flex jsb ac">
                                                <item title="2025年06月15日" class="icon-circle mln3">2025年06月15日</item>
                                                <div class="meta-right">
                                                    <item class="meta-view"><svg class="icon" aria-hidden="true">
                                                            <use xlink:href="#icon-view"></use>
                                                        </svg>22人已阅读</item>   
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                     
               
                                     
                    
                    
                    
               
                
                
                
      
                 
            </div>
        </div>
    </div>
</div>

<footer class="bg-white">
         <div class="container">
            <div class="d-flex justify-content-between">
               <div class="footer-list">
                  <h2>Wordpress</h2>
                  <ul class="list">
                  
                  
                  
  
                  
                     <li><a href="/wordpress-themes.html">wordpress主题</a></li>
               
  
                  
                     <li><a href="/wordpress-plugins.html">wordpress插件</a></li>
               
  
                  
                     <li><a href="/wordpresskaifa.html">二次开发</a></li>
               
  
                  
                     <li><a href="/wordpress-mannual.html">wordpress开发手册</a></li>
                            
              
              
                  </ul>
               </div>
               <div class="footer-list">
                  <h2>资讯</h2>
                  <ul class="list">
                      	                         				<li><a href="/AI-news.html">AI</a></li>
              				                     				<li><a href="/wordpress-dt.html">wordpress</a></li>
              				                     				<li><a href="/fastadmin-dt.html">fastadmin</a></li>
              				                  </ul>
               </div>
                <div class="footer-list">
                  <h2>FastAdmin</h2>
                  <ul class="list">
                      	                         				<li><a href="/fastadmin-kaifa.html">二次开发热评</a></li>
              				                     				<li><a href="/mediacrawlerdefastadminhoutai.html">mediacrawler的fastadmin后台热评</a></li>
              				                     				<li><a href="/fastadminkaifashouce.html">fastadmin开发手册热评</a></li>
              				                  </ul>
               </div>
               
               
               <div class="footer-list">
                  <h2>教程</h2>
                  <ul class="list">
                 
                 
                                       				<li><a href="/wordpress-jc.html">wordpress</a></li>
              				                     				<li><a href="/fastadmin-jc.html">fastadmin</a></li>
              				                     				<li><a href="/wenanchuli.html">文案处理</a></li>
              				                     				<li><a href="/dify.html">DIFY</a></li>
              				                     				<li><a href="/ai-shizhan.html">实战教程</a></li>
              				                 
                  </ul>
               </div>
               <div class="footer-list">
                   <h2>WordPress</h2>
                  <ul class="list">
                                           				<li><a href="/wordpress-themes.html">wordpress主题</a></li>
              				                     				<li><a href="/wordpress-plugins.html">wordpress插件</a></li>
              				                     				<li><a href="/wordpresskaifa.html">二次开发</a></li>
              				                     				<li><a href="/wordpress-mannual.html">wordpress开发手册</a></li>
              				                    
                  </ul>
               </div>
            </div>
            <div class="copyright">
               <div class="logo">
                  <a href="index.html">
                  <img src="/uploads/20250705/e77cbb1c5f70a8f1729402ef751e073d.jpg">
                  </a>
               </div>
               <p>© Copyright 2025 Hxlsw.com All Rights Reserved
               </p>
               <ul class="social">
                  
               </ul>
            </div>
         </div>
      </footer>