GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Internal Storage UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #FFFFFF;12    font-family: Arial, Helvetica, sans-serif;13  }14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 120px; padding: 0 36px;17    display: flex; align-items: center; justify-content: space-between;18    color: #cfcfcf; background: #121212;19  }20  .status-left { display: flex; align-items: center; gap: 22px; }21  .status-right { display: flex; align-items: center; gap: 24px; }22  .status-time { font-size: 36px; letter-spacing: 0.5px; }23  .icon { display: inline-flex; align-items: center; justify-content: center; }24  .app-header {25    position: absolute; top: 120px; left: 0; right: 0;26    height: 180px; padding: 0 40px;27    display: flex; align-items: center; justify-content: space-between;28  }29  .title-area { display: flex; align-items: center; gap: 28px; }30  .title-text { font-size: 64px; font-weight: 600; }31  .header-actions { display: flex; align-items: center; gap: 30px; }32  .crumb {33    position: absolute; top: 300px; left: 40px;34    height: 70px; display: flex; align-items: center;35    color: #7EB6FF; font-size: 36px;36  }37  .list-area {38    position: absolute; top: 370px; left: 0; right: 0;39    bottom: 240px; /* space for bottom bar */40    overflow: hidden;41  }42  .row {43    height: 140px; padding: 0 40px;44    display: flex; align-items: center;45    border-bottom: 1px solid rgba(255,255,255,0.04);46  }47  .folder-icon {48    width: 72px; height: 72px; margin-right: 36px;49  }50  .row .text { display: flex; flex-direction: column; }51  .row .name { font-size: 44px; line-height: 52px; }52  .row .sub { font-size: 32px; color: #A7A7A7; margin-top: 8px; }53  .bottom-bar {54    position: absolute; left: 0; right: 0; bottom: 0;55    height: 220px; padding: 30px 40px;56    background: #121212;57  }58  .cta {59    height: 120px; border-radius: 60px;60    background: #9EC6FF; color: #0b2540;61    display: flex; align-items: center; justify-content: center;62    font-size: 44px; font-weight: 600;63  }64  .cta .icon { margin-right: 24px; }65  .gesture {66    position: absolute; bottom: 18px; left: 50%;67    transform: translateX(-50%);68    width: 360px; height: 10px; border-radius: 6px;69    background: #E9E9E9;70  }71  /* Simple buttons look */72  .action-btn { width: 72px; height: 72px; border-radius: 14px; background: #1f1f1f; }73  /* utility */74  svg { display: block; }75</style>76</head>77<body>78<div id="render-target">79 80  <!-- Status Bar -->81  <div class="status-bar">82    <div class="status-left">83      <div class="status-time">11:42</div>84      <!-- tiny status dots -->85      <div class="icon">86        <svg width="24" height="24">87          <circle cx="12" cy="12" r="6" fill="#bcbcbc"/>88        </svg>89      </div>90      <div class="icon">91        <svg width="24" height="24">92          <rect x="6" y="6" width="12" height="12" rx="2" fill="#bcbcbc"/>93        </svg>94      </div>95      <div class="icon">96        <svg width="24" height="24">97          <circle cx="12" cy="12" r="3" fill="#bcbcbc"/>98          <circle cx="20" cy="12" r="3" fill="#bcbcbc"/>99          <circle cx="4" cy="12" r="3" fill="#bcbcbc"/>100        </svg>101      </div>102    </div>103    <div class="status-right">104      <!-- Wi‑Fi -->105      <div class="icon">106        <svg width="34" height="24" viewBox="0 0 34 24">107          <path d="M2 8c7-7 23-7 30 0" stroke="#cfcfcf" stroke-width="2" fill="none"/>108          <path d="M7 12c5-5 15-5 20 0" stroke="#cfcfcf" stroke-width="2" fill="none"/>109          <circle cx="17" cy="18" r="3" fill="#cfcfcf"/>110        </svg>111      </div>112      <!-- Battery -->113      <div class="icon">114        <svg width="40" height="24" viewBox="0 0 40 24">115          <rect x="2" y="5" width="32" height="14" rx="3" stroke="#cfcfcf" fill="none" stroke-width="2"/>116          <rect x="4" y="7" width="26" height="10" rx="2" fill="#cfcfcf"/>117          <rect x="35" y="9" width="3" height="6" rx="1" fill="#cfcfcf"/>118        </svg>119      </div>120    </div>121  </div>122 123  <!-- App Header -->124  <div class="app-header">125    <div class="title-area">126      <!-- back arrow -->127      <div class="icon">128        <svg width="52" height="52" viewBox="0 0 52 52">129          <path d="M34 12 L18 26 L34 40" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>130        </svg>131      </div>132      <div class="title-text">Internal storage</div>133    </div>134    <div class="header-actions">135      <!-- grid -->136      <div class="action-btn icon">137        <svg width="36" height="36" viewBox="0 0 36 36">138          <rect x="4" y="4" width="10" height="10" rx="2" fill="#cfcfcf"/>139          <rect x="22" y="4" width="10" height="10" rx="2" fill="#cfcfcf"/>140          <rect x="4" y="22" width="10" height="10" rx="2" fill="#cfcfcf"/>141          <rect x="22" y="22" width="10" height="10" rx="2" fill="#cfcfcf"/>142        </svg>143      </div>144      <!-- sort -->145      <div class="action-btn icon">146        <svg width="36" height="36" viewBox="0 0 36 36">147          <rect x="6" y="8" width="24" height="3" fill="#cfcfcf"/>148          <rect x="10" y="16" width="20" height="3" fill="#cfcfcf"/>149          <rect x="14" y="24" width="16" height="3" fill="#cfcfcf"/>150        </svg>151      </div>152    </div>153  </div>154 155  <!-- Breadcrumb -->156  <div class="crumb">Internal storage</div>157 158  <!-- List Area -->159  <div class="list-area">160    <div class="row">161      <div class="folder-icon icon">162        <!-- folder add -->163        <svg width="72" height="72" viewBox="0 0 72 72">164          <path d="M10 26h22l6 6h24v24H10z" fill="#7EC4FF"/>165          <rect x="32" y="12" width="16" height="10" rx="2" fill="#7EC4FF"/>166          <path d="M36 42h0" stroke="#7EC4FF"/>167          <path d="M36 38v16M28 46h16" stroke="#0b2540" stroke-width="4"/>168        </svg>169      </div>170      <div class="text">171        <div class="name">Add new folder</div>172      </div>173    </div>174 175    <div class="row">176      <div class="folder-icon icon">177        <svg width="72" height="72" viewBox="0 0 72 72">178          <rect x="10" y="28" width="52" height="32" rx="6" fill="#B0BEC5"/>179          <rect x="16" y="20" width="20" height="10" rx="3" fill="#B0BEC5"/>180        </svg>181      </div>182      <div class="text">183        <div class="name">Alarms</div>184        <div class="sub">Sep 27</div>185      </div>186    </div>187 188    <div class="row">189      <div class="folder-icon icon">190        <svg width="72" height="72" viewBox="0 0 72 72">191          <rect x="10" y="28" width="52" height="32" rx="6" fill="#B0BEC5"/>192          <rect x="16" y="20" width="20" height="10" rx="3" fill="#B0BEC5"/>193        </svg>194      </div>195      <div class="text">196        <div class="name">Android</div>197        <div class="sub">Sep 27</div>198      </div>199    </div>200 201    <div class="row">202      <div class="folder-icon icon">203        <svg width="72" height="72" viewBox="0 0 72 72">204          <rect x="10" y="28" width="52" height="32" rx="6" fill="#B0BEC5"/>205          <rect x="16" y="20" width="20" height="10" rx="3" fill="#B0BEC5"/>206        </svg>207      </div>208      <div class="text">209        <div class="name">Audiobooks</div>210        <div class="sub">Sep 27</div>211      </div>212    </div>213 214    <div class="row">215      <div class="folder-icon icon">216        <svg width="72" height="72" viewBox="0 0 72 72">217          <rect x="10" y="28" width="52" height="32" rx="6" fill="#B0BEC5"/>218          <rect x="16" y="20" width="20" height="10" rx="3" fill="#B0BEC5"/>219        </svg>220      </div>221      <div class="text" style="max-width: 860px;">222        <div class="name">com.google.intelligence.dbw.showcase</div>223        <div class="sub">4 days ago</div>224      </div>225    </div>226 227    <div class="row">228      <div class="folder-icon icon">229        <svg width="72" height="72" viewBox="0 0 72 72">230          <rect x="10" y="28" width="52" height="32" rx="6" fill="#B0BEC5"/>231          <rect x="16" y="20" width="20" height="10" rx="3" fill="#B0BEC5"/>232        </svg>233      </div>234      <div class="text">235        <div class="name">DCIM</div>236        <div class="sub">4 days ago</div>237      </div>238    </div>239 240    <div class="row">241      <div class="folder-icon icon">242        <svg width="72" height="72" viewBox="0 0 72 72">243          <rect x="10" y="28" width="52" height="32" rx="6" fill="#B0BEC5"/>244          <rect x="16" y="20" width="20" height="10" rx="3" fill="#B0BEC5"/>245        </svg>246      </div>247      <div class="text">248        <div class="name">Documents</div>249        <div class="sub">Sep 27</div>250      </div>251    </div>252 253    <div class="row">254      <div class="folder-icon icon">255        <svg width="72" height="72" viewBox="0 0 72 72">256          <rect x="10" y="28" width="52" height="32" rx="6" fill="#B0BEC5"/>257          <rect x="16" y="20" width="20" height="10" rx="3" fill="#B0BEC5"/>258        </svg>259      </div>260      <div class="text">261        <div class="name">Download</div>262        <div class="sub">27 minutes ago</div>263      </div>264    </div>265 266    <div class="row">267      <div class="folder-icon icon">268        <svg width="72" height="72" viewBox="0 0 72 72">269          <rect x="10" y="28" width="52" height="32" rx="6" fill="#B0BEC5"/>270          <rect x="16" y="20" width="20" height="10" rx="3" fill="#B0BEC5"/>271        </svg>272      </div>273      <div class="text">274        <div class="name">Movies</div>275        <div class="sub">Sep 27</div>276      </div>277    </div>278  </div>279 280  <!-- Bottom CTA -->281  <div class="bottom-bar">282    <div class="cta">283      <div class="icon">284        <svg width="44" height="44" viewBox="0 0 44 44">285          <path d="M18 30l-6-6 3-3 3 3 14-14 3 3z" fill="#0b2540"/>286        </svg>287      </div>288      Move here289    </div>290  </div>291 292  <!-- Gesture handle -->293  <div class="gesture"></div>294 295</div>296</body>297</html>