GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; color:#333; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#ffffff; border-radius:0;13  }14  /* Status bar */15  .status-bar {16    height:120px; background:#2d2330; color:#fff;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; font-size:42px; letter-spacing:0.5px;19  }20  .status-right { display:flex; align-items:center; gap:28px; }21  .dot { width:16px; height:16px; background:#cfc6d6; border-radius:50%; display:inline-block; }22  /* Top filter bar */23  .toolbar {24    height:160px; background:#fff;25    border-bottom:1px solid #e6e6e6;26    display:flex;27  }28  .tool-item {29    flex:1; border-right:1px solid #efefef;30    display:flex; flex-direction:column; align-items:center; justify-content:center;31    position:relative;32  }33  .tool-item:last-child { border-right:none; }34  .tool-title { font-size:42px; color:#3a3a3a; }35  .tool-sub { font-size:30px; color:#8a8a8a; margin-top:8px; }36  .tool-icon { position:absolute; left:48px; top:50%; transform:translateY(-50%); }37  /* Grid list */38  .content { background:#fafafa; }39  .grid { display:flex; flex-wrap:wrap; gap:20px; padding:20px; }40  .card {41    width:520px; background:#fff;42    border:1px solid #e5e5e5; border-radius:16px; overflow:hidden;43  }44  .img-wrap { position:relative; background:#fff; }45  .ribbon {46    position:absolute; top:0; left:0;47    background:#f47979; color:#fff; font-size:32px; padding:18px 22px; border-bottom-right-radius:8px;48  }49  .placeholder {50    width:100%; height:420px; background:#E0E0E0;51    border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;52    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;53  }54  .buy-phone {55    position:absolute; right:22px; bottom:22px;56    background:#fff3e8; color:#ff7a1e; border:1px solid #ffd2a8; border-radius:16px;57    font-size:34px; padding:20px 24px; box-shadow:0 4px 8px rgba(0,0,0,0.08);58  }59  .meta-row {60    display:flex; align-items:center; justify-content:space-between;61    padding:18px 22px;62  }63  .color-chip { display:flex; align-items:center; gap:14px; }64  .wheel {65    width:54px; height:54px; border-radius:50%;66    background: conic-gradient(#ff5959 0 25%, #ffcf4a 25% 50%, #55d66b 50% 75%, #5aa9ff 75% 100%);67    border:2px solid #d9d9d9;68  }69  .color-text { font-size:34px; color:#666; }70  .heart {71    width:60px; height:60px; border-radius:50%; border:2px solid #d8d8d8;72    display:flex; align-items:center; justify-content:center;73  }74  .card-body { padding:0 24px 24px 24px; }75  .title { font-size:40px; line-height:1.28; color:#2d2d2d; margin-bottom:16px; }76  .byline { font-size:30px; color:#8b8b8b; margin-bottom:16px; }77  .badge {78    display:inline-block; background:#ff7a30; color:#fff; font-weight:bold;79    padding:10px 16px; border-radius:8px; font-size:30px; margin-bottom:16px;80  }81  .price-row { font-size:46px; font-weight:800; margin:4px 0 10px 0; }82  .strike { font-size:34px; color:#9d9d9d; text-decoration:line-through; margin-left:16px; font-weight:normal; }83  .save { font-size:32px; color:#666; margin-bottom:8px; }84  .green { color:#1db85a; font-weight:700; }85  .link { font-size:32px; color:#1a73e8; }86  .rating { color:#ff9f2f; font-size:36px; margin-bottom:10px; }87  /* Floating chat */88  .chat-bubble {89    position:absolute; right:30px; bottom:300px;90    display:flex; align-items:center; gap:14px;91    background:#ff7a30; color:#fff; border-radius:16px;92    padding:20px 26px; box-shadow:0 8px 16px rgba(0,0,0,0.15);93    font-size:36px;94  }95  .chat-face {96    width:64px; height:64px; background:#fff; border-radius:50%; border:2px solid #ffd2a8;97    position:relative;98  }99  .chat-face::before, .chat-face::after {100    content:""; position:absolute; width:10px; height:10px; background:#333; border-radius:50%;101    top:24px;102  }103  .chat-face::before { left:18px; }104  .chat-face::after { right:18px; }105  /* Bottom nav */106  .bottom-nav {107    position:absolute; left:0; right:0; bottom:120px;108    height:220px; background:#fff; border-top:1px solid #e6e6e6;109    display:flex; align-items:center; justify-content:space-around;110  }111  .nav-item { width:216px; text-align:center; color:#6f6f6f; font-size:32px; }112  .nav-item.active { color:#ff7a30; }113  .nav-icon { width:56px; height:56px; margin:0 auto 12px auto; }114  .active-underline {115    position:absolute; left:22px; bottom:332px; width:180px; height:8px; background:#ff7a30; border-radius:4px;116  }117  .gesture-bar {118    position:absolute; left:330px; bottom:40px; width:420px; height:18px; background:#cfcfcf; border-radius:9px;119  }120</style>121</head>122<body>123<div id="render-target">124 125  <!-- Status bar -->126  <div class="status-bar">127    <div>11:04</div>128    <div class="status-right">129      <span>87°</span>130      <span class="dot"></span>131      <span class="dot"></span>132      <span class="dot"></span>133      <svg width="42" height="42"><circle cx="21" cy="21" r="8" fill="#d9d0e0"/></svg>134      <svg width="42" height="42"><rect x="8" y="10" width="26" height="22" rx="4" fill="#e8deee"/></svg>135    </div>136  </div>137 138  <!-- Toolbar -->139  <div class="toolbar">140    <div class="tool-item">141      <div class="tool-icon">142        <!-- Chevron down -->143        <svg width="48" height="48" viewBox="0 0 24 24">144          <path d="M6 9l6 6 6-6" fill="none" stroke="#6f6f6f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>145        </svg>146      </div>147      <div class="tool-title">Categories</div>148    </div>149    <div class="tool-item">150      <div class="tool-icon">151        <!-- Sort icon -->152        <svg width="48" height="48" viewBox="0 0 24 24">153          <path d="M8 4v12M4 12l4 4 4-4M16 20V8M12 12l4-4 4 4" fill="none" stroke="#6f6f6f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>154        </svg>155      </div>156      <div class="tool-title">Sort By</div>157      <div class="tool-sub">Relevance</div>158    </div>159    <div class="tool-item">160      <div class="tool-icon">161        <!-- Filter icon -->162        <svg width="48" height="48" viewBox="0 0 24 24">163          <path d="M4 6h16M7 12h10M10 18h4" stroke="#6f6f6f" stroke-width="2" fill="none" stroke-linecap="round"></path>164        </svg>165      </div>166      <div class="tool-title">Filter</div>167      <div class="tool-sub">0 Filters Applied</div>168    </div>169  </div>170 171  <!-- Product grid -->172  <div class="content">173    <div class="grid">174 175      <!-- Card 1 -->176      <div cl