GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #ffffff; color: #222;11  }12  .status-bar {13    height: 90px; padding: 20px 36px 0 36px; font-size: 34px; color: #333;14    display: flex; align-items: center; justify-content: space-between;15  }16  .icons-right { display: flex; gap: 22px; align-items: center; }17  .rounded {18    background: #F2F2F2; border-radius: 40px;19    box-shadow: inset 0 0 0 1px #e6e6e6;20  }21  .search-wrap {22    margin: 20px 30px 0 30px; height: 120px; display: flex; align-items: center;23    padding: 0 30px;24  }25  .hamburger { width: 64px; height: 64px; margin-right: 20px; display:flex; align-items:center; justify-content:center; }26  .search-placeholder { flex: 1; color: #7a7a7a; font-size: 38px; }27  .avatar {28    width: 88px; height: 88px; border-radius: 44px; background: #8B6B5D; color: white;29    display: flex; align-items: center; justify-content: center; font-size: 44px; margin-left: 22px;30  }31  .blue-banner {32    margin: 28px 30px 0 30px; background: #E9F2FF; border-radius: 28px; padding: 26px 30px;33    display: flex; align-items: center; gap: 24px; color: #273e66; font-size: 36px;34  }35  .bell {36    width: 64px; height: 64px; border-radius: 32px; background: #ffffff; display:flex; align-items:center; justify-content:center;37    box-shadow: inset 0 0 0 1px #d9e6ff;38  }39  .banner-right { margin-left: auto; }40  .tabs {41    display: flex; align-items: center; gap: 44px; padding: 30px; font-size: 40px;42  }43  .tab-active { color: #2F6FFF; font-weight: 700; }44  .filter-icon { margin-left: auto; width: 66px; height: 66px; display:flex; align-items:center; justify-content:center; }45  .list {46    margin-top: 10px;47  }48  .item {49    display: flex; align-items: center; padding: 24px 30px; gap: 26px;50  }51  .item + .item { border-top: 1px solid #f1f1f1; }52  .icon-square {53    width: 74px; height: 74px; border-radius: 18px; background: #EAF0FF; display:flex; align-items:center; justify-content:center;54    box-shadow: inset 0 0 0 1px #dfe7ff;55  }56  .item-content { flex: 1; }57  .item-title { font-size: 40px; }58  .item-sub { margin-top: 10px; font-size: 32px; color: #666; }59  .kebab { width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; }60  .ad-row {61    margin: 8px 0; padding: 26px 30px; display: flex; align-items: center; gap: 26px; background: #FAFAFA;62  }63  .ad-label {64    position: absolute; right: 24px; top: 0; transform: translateY(-50%); background:#eee; color:#777; font-size:28px; padding:6px 12px; border-radius:20px;65    border:1px solid #ddd;66  }67  .ad-wrap { position: relative; }68  .cta { margin-left: auto; color: #2F6FFF; font-size: 36px; }69  .open-files {70    width: 880px; height: 120px; margin: 30px auto; border-radius: 60px; background: #F2F2F2;71    display: flex; align-items: center; justify-content: center; color: #4285F4; font-weight: 700; font-size: 44px;72  }73  .center-note { text-align: center; color: #888; font-size: 40px; margin-top: 40px; }74  /* Floating scanner button */75  .scan-btn {76    position: absolute; right: 40px; bottom: 420px;77    width: 150px; height: 150px; border-radius: 36px; background: #ffffff; box-shadow: 0 12px 30px rgba(0,0,0,0.12);78    display:flex; align-items:center; justify-content:center;79  }80  /* Bottom navigation */81  .bottom-nav {82    position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; border-top: 1px solid #eee; background: #ffffff;83    display: flex; align-items: center; justify-content: space-around; padding: 0 20px;84  }85  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #666; font-size: 30px; width: 160px; }86  .nav-item.active { color: #2F6FFF; }87  .nav-icon { width: 76px; height: 76px; display:flex; align-items:center; justify-content:center; }88  .plus-fab {89    position: absolute; left: 50%; bottom: 160px; transform: translateX(-50%);90    width: 160px; height: 160px; border-radius: 40px; background: #3F72FF; box-shadow: 0 16px 36px rgba(63,114,255,0.5);91    display:flex; align-items:center; justify-content:center;92  }93  .red-dot {94    position: absolute; width: 22px; height: 22px; background:#FF4D3D; border-radius:50%;95    transform: translate(-10px,-10px);96  }97  .relative { position: relative; }98  .small-note { color:#2F6FFF; font-weight:700; font-size:30px; margin-left:12px; letter-spacing: 4px; }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div>9:37</div>107    <div class="icons-right">108      <!-- Circle minus icon -->109      <svg width="38" height="38"><circle cx="19" cy="19" r="17" stroke="#777" fill="none" stroke-width="2"/><rect x="9" y="18" width="20" height="3" fill="#777"/></svg>110      <!-- WiFi -->111      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 18l-2 2 2 2 2-2-2-2z" fill="#777"/><path d="M2 8c6-6 14-6 20 0" stroke="#777" stroke-width="2" fill="none"/><path d="M6 12c4-4 8-4 12 0" stroke="#777" stroke-width="2" fill="none"/><path d="M9 15c3-3 6-3 9 0" stroke="#777" stroke-width="2" fill="none"/></svg>112      <!-- Battery -->113      <svg width="60" height="40" viewBox="0 0 60 40">114        <rect x="4" y="8" width="46" height="24" rx="4" ry="4" stroke="#777" fill="none" stroke-width="3"/>115        <rect x="52" y="15" width="6" height="10" rx="1" fill="#777"/>116        <rect x="8" y="12" width="34" height="16" fill="#777"/>117      </svg>118      <span style="font-size:34px; color:#333;">85%</span>119    </div>120  </div>121 122  <!-- Search bar -->123  <div class="search-wrap rounded">124    <div class="hamburger">125      <svg width="52" height="52" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="2" fill="#555"/><rect x="3" y="11" width="18" height="2" fill="#555"/><rect x="3" y="16" width="18" height="2" fill="#555"/></svg>126    </div>127    <div class="search-placeholder">Search files, tools</div>128    <div class="avatar">I</div>129  </div>130 131  <!-- Blue offer banner -->132  <div class="blue-banner">133    <div class="bell">134      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z" fill="#7AA5FF"/><circle cx="12" cy="20" r="2" fill="#7AA5FF"/></svg>135    </div>136    <div>You have a limited-time offer. Tap to view.</div>137    <div class="small-note">23 : 30 : 27</div>138    <div class="banner-right">139      <svg width="50" height="50" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" stroke="#3F72FF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>140    </div>141  </div>142 143  <!-- Tabs -->144  <div class="tabs">145    <div class="tab-active">Recent</div>146    <div>Starred</div>147    <div class="filter-icon">148      <svg width="46" height="46" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4L3 5z" fill="#777"/></svg>149    </div>150  </div>151 152  <!-- List -->153  <div class="list">154 155    <!-- Item: Events -->156    <div class="item">157      <div class="icon-square">158        <svg width="42" height="42" viewBox="0 0 24 24">159          <path d="M4 7h6l2 2h8v10H4z" fill="#5D7BFF"/>160        </svg>161      </div>162      <div class="item-content">163        <div class="item-title">Events</div>164        <div class="item-sub">09:30 · 8 KB · My Cloud</div>165      </div>166      <div class="kebab">167        <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#999"/><circle cx="12" cy="12" r="2" fill="#999"/><circle cx="12" cy="19" r="2" fill="#999"/></svg>168      </div>169    </div>170 171    <!-- Ad tile -->172    <div class="ad-wrap">173      <div class="ad-row">174        <div style="width:96px; height:96px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Zomato Logo]</div>175        <div style="flex:1;">176          <div class="item-title">Zomato: Food Delivery & Dining</div>177        </div>178        <div class="cta">Install now</div>179      </div>180      <div class="ad-label">Ad</div>181    </div>182 183    <!-- Item: Original+Glazed™+Flavored+Iced+Coffee -->184    <div class="item relative">185      <div class="red-dot" style="left:24px; top:24px;"></div>186      <div class="icon-square" style="background:#EBEFF6;">187        <svg width="42" height="42" viewBox="0 0 24 24">188          <path d="M4 7h10v10H4z" fill="#6B7D99"/>189          <path d="M16 9l4-2v10l-4-2z" fill="#6B7D99"/>190        </svg>191      </div>192      <div class="item-content">193        <div class="item-title">Original+Glazed™+Flavored+Iced+Coffee</div>194        <div class="item-sub">Received files from Download</div>195      </div>196      <div class="kebab">197        <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#999"/><circle cx="12" cy="12" r="2" fill="#999"/><circle cx="12" cy="19" r="2" fill="#999"/></svg>198      </div>199    </div>200 201    <!-- Open files button -->202    <div class="open-files">Open files</div>203 204    <!-- Note -->205    <div class="center-note">No earlier history</div>206  </div>207 208  <!-- Floating scan button -->209  <div class="scan-btn">210    <svg width="84" height="84" viewBox="0 0 24 24">211      <rect x="7" y="7" width="10" height="10" rx="2" stroke="#3F72FF" stroke-width="2" fill="none"/>212      <path d="M3 9V5h4" stroke="#3F72FF" stroke-width="2" fill="none"/>213      <path d="M21 9V5h-4" stroke="#3F72FF" stroke-width="2" fill="none"/>214      <path d="M3 15v4h4" stroke="#3F72FF" stroke-width="2" fill="none"/>215      <path d="M21 15v4h-4" stroke="#3F72FF" stroke-width="2" fill="none"/>216    </svg>217  </div>218 219  <!-- Plus FAB -->220  <div class="plus-fab">221    <svg width="80" height="80" viewBox="0 0 24 24"><path d="M11 5h2v14h-2zM5 11h14v2H5z" fill="#ffffff"/></svg>222  </div>223 224  <!-- Bottom Navigation -->225  <div class="bottom-nav">226    <div class="nav-item active">227      <div class="nav-icon">228        <svg width="54" height="54" viewBox="0 0 24 24"><path d="M3 8l9-5 9 5v9H3z" fill="#2F6FFF"/></svg>229      </div>230      <div>Recent</div>231    </div>232    <div class="nav-item">233      <div class="nav-icon">234        <svg width="54" height="54" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="6" fill="#999"/><rect x="4" y="12" width="16" height="8" fill="#999"/></svg>235      </div>236      <div>Files</div>237    </div>238    <div style="width: 200px;"></div> <!-- space for center FAB -->239    <div class="nav-item">240      <div class="nav-icon">241        <svg width="54" height="54" viewBox="0 0 24 24"><path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z" fill="#999"/></svg>242      </div>243      <div>Discover</div>244    </div>245    <div class="nav-item">246      <div class="nav-icon" style="position:relative;">247        <svg width="54" height="54" viewBox="0 0 24 24"><path d="M13 2l-2 6h-6l5 4-2 8 7-6 6 2-4-5 5-4z" fill="#999"/></svg>248        <span style="position:absolute; right:-2px; top:-2px; width:16px; height:16px; background:#FF3B30; border-radius:8px;"></span>249      </div>250      <div>WPS Pro</div>251    </div>252  </div>253 254</div>255</body>256</html>