GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<meta name="viewport" content="width=1440, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width:1440px; height:3120px;11    position:relative; overflow:hidden;12    background:#121613; color:#ECECEC;13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:130px; padding:0 40px;19    display:flex; align-items:center; justify-content:space-between;20    color:#ffffff; font-size:52px; letter-spacing:0.5px;21  }22  .status-right { display:flex; align-items:center; gap:28px; }23  .icon-battery svg, .icon-wifi svg, .icon-dnd svg { display:block; }24 25  /* Top tabs */26  .top-tabs {27    position:absolute; top:130px; left:0; right:0;28    height:126px; padding:0 54px;29    display:flex; align-items:flex-end; gap:48px;30    border-bottom:1px solid #2A2F2B;31  }32  .tab {33    font-size:56px; line-height:1; padding-bottom:22px; color:#9aa19a;34  }35  .tab.active { color:#9BD37D; position:relative; }36  .tab.active::after {37    content:""; position:absolute; left:0; bottom:0;38    width:180px; height:6px; background:#9BD37D; border-radius:6px;39  }40 41  /* List area */42  .content {43    position:absolute; top:256px; left:64px; right:64px;44  }45 46  .item { margin-bottom:140px; }47  .item-head { display:flex; align-items:center; gap:28px; }48  .file-icon {49    width:54px; height:54px; border-radius:8px; background:#78A6FF; display:flex; align-items:center; justify-content:center;50  }51  .file-icon svg { width:36px; height:36px; }52  .item-title { font-size:58px; color:#F0F0F0; flex:1; }53  .menu-btn { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }54  .card {55    margin-top:24px;56    background:#1A1F1C; border-radius:28px; padding:40px;57    height:540px;58    display:flex; align-items:center; justify-content:center;59  }60  .img-ph {61    width:100%; height:100%;62    background:#E0E0E0; border:1px solid #BDBDBD;63    color:#757575; display:flex; align-items:center; justify-content:center;64    font-size:44px; border-radius:22px;65  }66  .meta {67    display:flex; align-items:center; gap:24px;68    margin-top:26px;69  }70  .avatar {71    width:84px; height:84px; border-radius:50%;72    background:#3D6D3E; color:#EAF4EA; display:flex; align-items:center; justify-content:center;73    font-size:46px; font-weight:bold;74  }75  .meta-text { font-size:40px; color:#C9D0C9; }76 77  /* Divider between cards */78  .divider {79    height:1px; background:#2A2F2B; margin:40px 0;80  }81 82  /* Toast */83  .toast {84    position:absolute; left:28px; right:28px; bottom:630px;85    background:#FFFFFF; color:#161A17; border:1px solid #D6D6D6;86    border-radius:20px; box-shadow:0 6px 18px rgba(0,0,0,0.35);87    padding:32px 36px; font-size:44px;88  }89 90  /* Bottom nav */91  .bottom-nav {92    position:absolute; left:0; right:0; bottom:0;93    height:270px; background:#141914;94    border-top:1px solid #2A2F2B;95    padding-top:36px;96  }97  .nav-items {98    display:flex; justify-content:space-around; align-items:center;99    padding:0 40px;100  }101  .nav-item { color:#C7CECA; text-align:center; }102  .nav-icon { width:100px; height:100px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; }103  .nav-item.active .nav-icon {104    background:#2F3A2E; border-radius:32px;105  }106  .nav-item.active .label { color:#9BD37D; }107  .label { font-size:40px; }108 109  /* gesture bar */110  .gesture {111    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);112    width:260px; height:16px; border-radius:16px; background:#EAEAEA;113    opacity:0.85;114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status bar -->121  <div class="status-bar">122    <div class="status-left">5:36</div>123    <div class="status-right">124      <div class="icon-dnd">125        <svg width="44" height="44" viewBox="0 0 44 44">126          <circle cx="22" cy="22" r="18" fill="none" stroke="#9AA19A" stroke-width="4"/>127          <rect x="12" y="20" width="20" height="4" fill="#9AA19A"/>128        </svg>129      </div>130      <div class="icon-wifi">131        <svg width="44" height="44" viewBox="0 0 44 44">132          <path d="M6 18c8-6 24-6 32 0" stroke="#9AA19A" stroke-width="4" fill="none" />133          <path d="M12 24c6-4 14-4 20 0" stroke="#9AA19A" stroke-width="4" fill="none" />134          <circle cx="22" cy="30" r="3" fill="#9AA19A"/>135        </svg>136      </div>137      <div class="icon-battery">138        <svg width="60" height="44" viewBox="0 0 60 44">139          <rect x="4" y="10" width="46" height="24" rx="4" fill="none" stroke="#9AA19A" stroke-width="4"/>140          <rect x="52" y="16" width="6" height="12" rx="2" fill="#9AA19A"/>141          <rect x="8" y="14" width="34" height="16" fill="#9AA19A"/>142        </svg>143      </div>144    </div>145  </div>146 147  <!-- Top Tabs -->148  <div class="top-tabs">149    <div class="tab active">Suggested</div>150    <div class="tab">Notifications</div>151  </div>152 153  <!-- Content list -->154  <div class="content">155 156    <!-- Item 1 -->157    <div class="item">158      <div class="item-head">159        <div class="file-icon">160          <svg viewBox="0 0 24 24">161            <rect x="3" y="3" width="18" height="18" rx="3" fill="#8DB2FF"/>162            <rect x="7" y="7" width="10" height="3" fill="#2A3A57"/>163            <rect x="7" y="12" width="10" height="3" fill="#2A3A57"/>164            <rect x="7" y="17" width="6" height="3" fill="#2A3A57"/>165          </svg>166        </div>167        <div class="item-title">agents.txt</div>168        <div class="menu-btn">169          <svg width="28" height="60" viewBox="0 0 28 60">170            <circle cx="14" cy="12" r="5" fill="#A5ABA5"/>171            <circle cx="14" cy="30" r="5" fill="#A5ABA5"/>172            <circle cx="14" cy="48" r="5" fill="#A5ABA5"/>173          </svg>174        </div>175      </div>176      <div class="card">177        <div class="img-ph">[IMG: Text document preview]</div>178      </div>179      <div class="meta">180        <div class="avatar">C</div>181        <div class="meta-text">You edited today</div>182      </div>183    </div>184 185    <div class="divider"></div>186 187    <!-- Item 2 -->188    <div class="item">189      <div class="item-head">190        <div class="file-icon">191          <svg viewBox="0 0 24 24">192            <rect x="3" y="3" width="18" height="18" rx="3" fill="#8DB2FF"/>193            <rect x="7" y="7" width="10" height="3" fill="#2A3A57"/>194            <rect x="7" y="12" width="10" height="3" fill="#2A3A57"/>195            <rect x="7" y="17" width="6" height="3" fill="#2A3A57"/>196          </svg>197        </div>198        <div class="item-title">Shopping list</div>199        <div class="menu-btn">200          <svg width="28" height="60" viewBox="0 0 28 60">201            <circle cx="14" cy="12" r="5" fill="#A5ABA5"/>202            <circle cx="14" cy="30" r="5" fill="#A5ABA5"/>203            <circle cx="14" cy="48" r="5" fill="#A5ABA5"/>204          </svg>205        </div>206      </div>207      <div class="card">208        <div class="img-ph">[IMG: Document icon]</div>209      </div>210      <div class="meta">211        <div class="avatar">C</div>212        <div class="meta-text">You modified today</div>213      </div>214    </div>215 216  </div>217 218  <!-- Toast -->219  <div class="toast">1 item will be downloaded. See notification for details.</div>220 221  <!-- Bottom Navigation -->222  <div class="bottom-nav">223    <div class="nav-items">224      <div class="nav-item active">225        <div class="nav-icon">226          <svg width="60" height="60" viewBox="0 0 60 60">227            <path d="M30 10 L52 28 V50 H38 V36 H22 V50 H8 V28 Z" fill="#9BD37D"/>228          </svg>229        </div>230        <div class="label">Home</div>231      </div>232      <div class="nav-item">233        <div class="nav-icon">234          <svg width="60" height="60" viewBox="0 0 60 60">235            <path d="M30 8 L36 24 H54 L40 34 L46 52 L30 42 L14 52 L20 34 L6 24 H24 Z" fill="#C7CECA"/>236          </svg>237        </div>238        <div class="label">Starred</div>239      </div>240      <div class="nav-item">241        <div class="nav-icon">242          <svg width="60" height="60" viewBox="0 0 60 60">243            <circle cx="18" cy="24" r="10" fill="#C7CECA"/>244            <circle cx="42" cy="24" r="10" fill="#C7CECA"/>245            <rect x="12" y="38" width="36" height="10" rx="5" fill="#C7CECA"/>246          </svg>247        </div>248        <div class="label">Shared</div>249      </div>250      <div class="nav-item">251        <div class="nav-icon">252          <svg width="60" height="60" viewBox="0 0 60 60">253            <rect x="8" y="16" width="44" height="30" rx="6" fill="#C7CECA"/>254            <rect x="16" y="10" width="28" height="8" rx="3" fill="#C7CECA"/>255          </svg>256        </div>257        <div class="label">Files</div>258      </div>259    </div>260  </div>261 262  <div class="gesture"></div>263</div>264</body>265</html>