GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Mobile UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1C191F;14    color: #EDEAF3;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #D9D5E3;30    font-weight: 600;31    letter-spacing: 0.5px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .status-icons svg { fill: #D9D5E3; }39 40  /* Search bar area */41  .search-area {42    position: absolute;43    top: 120px;44    left: 36px;45    width: 1008px;46    height: 120px;47    border-radius: 60px;48    background: #3B3442;49    display: flex;50    align-items: center;51    padding: 0 28px;52    box-sizing: border-box;53    gap: 28px;54  }55  .search-text {56    flex: 1;57    color: #C9C4D5;58    font-size: 36px;59  }60  .avatar {61    position: absolute;62    right: 36px;63    top: 120px;64    transform: translateY(-50%);65    /* separate visual circle on the right end */66  }67  .avatar .circle {68    width: 96px;69    height: 96px;70    background: #6A564A;71    border-radius: 48px;72    display: flex;73    align-items: center;74    justify-content: center;75    font-weight: 700;76    color: #F2E8D8;77    box-shadow: 0 6px 16px rgba(0,0,0,0.35);78  }79 80  /* Section header */81  .section-header {82    position: absolute;83    top: 300px;84    left: 36px;85    width: 1008px;86    height: 72px;87    display: flex;88    align-items: center;89    justify-content: space-between;90    color: #CFCAD9;91    font-size: 36px;92  }93  .section-header .left {94    display: flex;95    align-items: center;96    gap: 18px;97  }98 99  /* Grid of documents */100  .grid {101    position: absolute;102    top: 380px;103    left: 36px;104    width: 1008px;105    display: grid;106    grid-template-columns: repeat(2, 1fr);107    grid-column-gap: 36px;108    grid-row-gap: 54px;109  }110  .doc-card {111    width: 486px;112  }113  .thumb {114    width: 486px;115    height: 300px;116    border-radius: 24px;117    background: #2C2731;118    box-shadow: inset 0 0 0 2px #3F3947;119    position: relative;120    display: flex;121    align-items: center;122    justify-content: center;123  }124  .thumb .page-preview {125    width: 380px;126    height: 220px;127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    color: #757575;130    display: flex;131    align-items: center;132    justify-content: center;133    font-size: 28px;134    border-radius: 10px;135  }136  .badge {137    position: absolute;138    right: 24px;139    bottom: 24px;140    display: flex;141    gap: 12px;142  }143  .badge .pill {144    width: 60px;145    height: 60px;146    background: #EAE7F7;147    border-radius: 30px;148    display: flex;149    align-items: center;150    justify-content: center;151  }152  .doc-meta {153    display: flex;154    align-items: center;155    justify-content: space-between;156    margin-top: 18px;157  }158  .doc-left {159    display: flex;160    align-items: center;161    gap: 18px;162  }163  .doc-title {164    color: #EDEAF3;165    font-size: 34px;166    line-height: 38px;167    max-width: 360px;168    white-space: nowrap;169    overflow: hidden;170    text-overflow: ellipsis;171  }172 173  /* icons */174  .icon-btn {175    width: 72px;176    height: 72px;177    display: flex;178    align-items: center;179    justify-content: center;180    border-radius: 36px;181  }182  .icon-light { fill: #D9D5E3; }183  .icon-grey { fill: #B9B5C4; }184 185  /* Floating Action Button */186  .fab {187    position: absolute;188    right: 60px;189    bottom: 220px;190    width: 150px;191    height: 150px;192    background: #4A4352;193    border-radius: 36px;194    box-shadow: 0 18px 36px rgba(0,0,0,0.45);195    display: flex;196    align-items: center;197    justify-content: center;198  }199  .home-indicator {200    position: absolute;201    bottom: 120px;202    left: 50%;203    transform: translateX(-50%);204    width: 540px;205    height: 16px;206    background: #E0DFE6;207    border-radius: 8px;208    opacity: 0.8;209  }210</style>211</head>212<body>213<div id="render-target">214 215  <!-- Status bar -->216  <div class="status-bar">217    <div class="time">3:04</div>218    <div class="status-icons">219      <!-- simple circle icon -->220      <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>221      <!-- search icon -->222      <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#D9D5E3" stroke-width="2"/><line x1="16" y1="16" x2="21" y2="21" stroke="#D9D5E3" stroke-width="2"/></svg>223      <!-- wifi -->224      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#D9D5E3" stroke-width="2" fill="none"/><path d="M5 12c4-3 10-3 14 0" stroke="#D9D5E3" stroke-width="2" fill="none"/><path d="M8 16c3-2 5-2 8 0" stroke="#D9D5E3" stroke-width="2" fill="none"/><circle cx="12" cy="19" r="1.8" fill="#D9D5E3"/></svg>225      <!-- battery -->226      <svg width="36" height="28" viewBox="0 0 28 16"><rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#D9D5E3" stroke-width="2"/><rect x="3" y="4" width="16" height="8" rx="1" fill="#D9D5E3"/><rect x="23" y="5" width="4" height="6" rx="1" fill="#D9D5E3"/></svg>227    </div>228  </div>229 230  <!-- Search bar -->231  <div class="search-area">232    <div class="icon-btn">233      <!-- hamburger -->234      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-light"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/></svg>235    </div>236    <div class="search-text">Search Docs</div>237    <div class="icon-btn">238      <!-- folder icon -->239      <svg width="44" height="44" viewBox="0 0 24 24" class="icon-light"><path d="M3 6h6l2 2h10v10H3z"/></svg>240    </div>241  </div>242 243  <!-- Avatar at far right -->244  <div class="avatar" style="top: 180px;">245    <div class="circle">F</div>246  </div>247 248  <!-- Section Header -->249  <div class="section-header">250    <div class="left">251      <div>Last opened by me</div>252      <!-- caret down -->253      <svg width="28" height="28" viewBox="0 0 24 24" class="icon-grey"><path d="M6 9l6 6 6-6z"/></svg>254    </div>255    <!-- list/grid toggle -->256    <svg width="46" height="46" viewBox="0 0 24 24" class="icon-grey"><path d="M3 5h18v2H3zm0 6h18v2H3zm0 6h18v2H3z"/></svg>257  </div>258 259  <!-- Grid of documents -->260  <div class="grid">261    <!-- Card 1 -->262    <div class="doc-card">263      <div class="thumb">264        <div class="page-preview">[IMG: Document Preview]</div>265        <div class="badge">266          <div class="pill">267            <!-- group icon -->268