GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Internal Storage UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0E0F0B; /* dark olive/black */13    color: #F5F5F5;14  }15  .status-bar {16    height: 100px;17    padding: 0 36px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    color: #F5F5F5;22    font-weight: 600;23    font-size: 40px;24    opacity: 0.9;25  }26  .status-icons { display: flex; align-items: center; gap: 24px; }27  .status-icons .dot {28    width: 18px; height: 18px; border-radius: 50%; background: #F5F5F5; opacity: 0.8;29  }30  .status-icons .square {31    width: 22px; height: 22px; background: #F5F5F5; opacity: 0.8;32  }33  .battery {34    width: 50px; height: 26px; border: 3px solid #F5F5F5; border-radius: 4px; position: relative;35  }36  .battery::after {37    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 10px; background: #F5F5F5; border-radius: 2px;38  }39  .battery .level { width: 32px; height: 18px; background: #F5F5F5; margin: 3px; }40 41  .header {42    padding: 16px 36px 8px 36px;43  }44  .header-top {45    display: flex; align-items: center; justify-content: space-between;46    margin-top: 8px;47  }48  .title-wrap {49    display: flex; align-items: center; gap: 24px;50  }51  .back-btn svg { display: block; }52  .title {53    font-size: 64px; line-height: 1.2; font-weight: 700;54  }55  .header-actions { display: flex; align-items: center; gap: 36px; }56  .subpath {57    margin-top: 18px;58    font-size: 38px;59    color: #B7D36C; /* pale green accent */60    font-weight: 600;61  }62  .divider {63    height: 2px; background: #272A23; margin-top: 18px;64  }65 66  .list {67    padding: 10px 0 260px 0;68  }69  .row {70    display: flex; align-items: center;71    padding: 28px 36px;72    gap: 28px;73  }74  .row .icon {75    width: 72px; height: 60px;76  }77  .row .texts {78    display: flex; flex-direction: column;79  }80  .name {81    font-size: 46px; font-weight: 600; color: #F5F5F5;82  }83  .meta {84    font-size: 32px; color: #BDBDBD; margin-top: 6px;85  }86 87  /* Add new folder special icon */88  .add-circle {89    width: 120px; height: 120px; border-radius: 60px;90    border: 2px solid #7E826C; display: flex; align-items: center; justify-content: center;91    background: #171914;92  }93  .add-circle .mini-folder { width: 72px; height: 48px; position: relative; }94  .mini-folder .tab { width: 22px; height: 12px; background: #C9C8B4; border-radius: 2px; position: absolute; left: 6px; top: -10px; }95  .mini-folder .body { width: 72px; height: 48px; background: #C9C8B4; border-radius: 6px; }96  .mini-folder .plus-vert, .mini-folder .plus-hor {97    position: absolute; background: #0E0F0B;98  }99  .mini-folder .plus-vert { width: 8px; height: 26px; left: 32px; top: 10px; border-radius: 4px; }100  .mini-folder .plus-hor { width: 26px; height: 8px; left: 23px; top: 19px; border-radius: 4px; }101 102  /* Folder icon */103  .folder-icon svg { display: block; }104  .folder-icon path { fill: #C9C8B4; }105 106  /* Bottom action */107  .bottom-action {108    position: absolute; left: 0; right: 0; bottom: 120px;109    padding: 0 36px;110  }111  .pill {112    height: 120px; background: #C3D46A; border-radius: 60px;113    display: flex; align-items: center; justify-content: center; gap: 24px;114    color: #0E0F0B; font-size: 42px; font-weight: 700;115    box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;116  }117  .pill .check {118    width: 44px; height: 44px; border-radius: 50%;119    border: 3px solid #0E0F0B; position: relative;120  }121  .pill .check::after {122    content: ""; position: absolute; left: 9px; top: 13px;123    width: 20px; height: 10px; border-left: 4px solid #0E0F0B; border-bottom: 4px solid #0E0F0B;124    transform: rotate(-45deg);125  }126  .home-indicator {127    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);128    width: 220px; height: 10px; background: #EDEDED; border-radius: 8px; opacity: 0.9;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status bar -->136  <div class="status-bar">137    <div>10:16</div>138    <div class="status-icons">139      <div class="square"></div>140      <div class="dot"></div>141      <div class="square"></div>142      <div class="dot"></div>143      <div class="battery"><div class="level"></div></div>144    </div>145  </div>146 147  <!-- Header -->148  <div class="header">149    <div class="header-top">150      <div class="title-wrap">151        <div class="back-btn">152          <svg width="64" height="64" viewBox="0 0 64 64">153            <path d="M38 14 L20 32 L38 50" stroke="#E0E0E0" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154            <path d="M20 32 H52" stroke="#E0E0E0" stroke-width="6" stroke-linecap="round"/>155          </svg>156        </div>157        <div class="title">Internal storage</div>158      </div>159      <div class="header-actions">160        <!-- Grid icon -->161        <svg width="56" height="56" viewBox="0 0 56 56">162          <rect x="6" y="6" width="16" height="16" rx="3" fill="#E0E0E0" />163          <rect x="34" y="6" width="16" height="16" rx="3" fill="#E0E0E0" />164          <rect x="6" y="34" width="16" height="16" rx="3" fill="#E0E0E0" />165          <rect x="34" y="34" width="16" height="16" rx="3" fill="#E0E0E0" />166        </svg>167        <!-- Sort icon -->168        <svg width="56" height="56" viewBox="0 0 56 56">169          <rect x="8" y="10" width="40" height="6" fill="#E0E0E0"/>170          <rect x="16" y="24" width="32" height="6" fill="#E0E0E0"/>171          <rect x="24" y="38" width="24" height="6" fill="#E0E0E0"/>172        </svg>173      </div>174    </div>175    <div class="subpath">Internal storage</div>176    <div class="divider"></div>177  </div>178 179  <!-- List -->180  <div class="list">181    <!-- Add new folder -->182    <div class="row">183      <div class="add-circle">184        <div class="mini-folder">185          <div class="tab"></div>186          <div class="body"></div>187          <div class="plus-vert"></div>188          <div class="plus-hor"></div>189        </div>190      </div>191      <div class="texts">192        <div class="name">Add new folder</div>193      </div>194    </div>195 196    <!-- Alarms -->197    <div class="row">198      <div class="folder-icon icon">199        <svg width="72" height="60" viewBox="0 0 72 60">200          <path d="M8 16 h18 l6 6 h32 c4 0 6 2 6 6 v18 c0 4-2 6-6 6 H12 c-4 0-6-2-6-6 V22 c0-4 2-6 6-6 z"/>201        </svg>202      </div>203      <div class="texts">204        <div class="name">Alarms</div>205        <div class="meta">Nov 1, 2022</div>206      </div>207    </div>208 209    <!-- Android -->210    <div class="row">211      <div class="folder-icon icon">212        <svg width="72" height="60" viewBox="0 0 72 60">213          <path d="M8 16 h18 l6 6 h32 c4 0 6 2 6 6 v18 c0 4-2 6-6 6 H12 c-4 0-6-2-6-6 V22 c0-4 2-6 6-6 z"/>214        </svg>215      </div>216      <div class="texts">217        <div class="name">Android</div>218        <div class="meta">Nov 1, 2022</div>219      </div>220    </div>221 222    <!-- Audiobooks -->223    <div class="row">224      <div class="folder-icon icon">225        <svg width="72" height="60" viewBox="0 0 72 60">226          <path d="M8 16 h18 l6 6 h32 c4 0 6 2 6 6 v18 c0 4-2 6-6 6 H12 c-4 0-6-2-6-6 V22 c0-4 2-6 6-6 z"/>227        </svg>228      </div>229      <div class="texts">230        <div class="name">Audiobooks</div>231        <div class="meta">Nov 1, 2022</div>232      </div>233    </div>234 235    <!-- Books -->236    <div class="row">237      <div class="folder-icon icon">238        <svg width="72" height="60" viewBox="0 0 72 60">239          <path d="M8 16 h18 l6 6 h32 c4 0 6 2 6 6 v18 c0 4-2 6-6 6 H12 c-4 0-6-2-6-6 V22 c0-4 2-6 6-6 z"/>240        </svg>241      </div>242      <div class="texts">243        <div class="name">Books</div>244        <div class="meta">Jul 24</div>245      </div>246    </div>247 248    <!-- Coding -->249    <div class="row">250      <div class="folder-icon icon">251        <svg width="72" height="60" viewBox="0 0 72 60">252          <path d="M8 16 h18 l6 6 h32 c4 0 6 2 6 6 v18 c0 4-2 6-6 6 H12 c-4 0-6-2-6-6 V22 c0-4 2-6 6-6 z"/>253        </svg>254      </div>255      <div class="texts">256        <div class="name">Coding</div>257        <div class="meta">Jul 6</div>258      </div>259    </div>260 261    <!-- com.google.intelligence.dbw.showcase -->262    <div class="row">263      <div class="folder-icon icon">264        <svg width="72" height="60" viewBox="0 0 72 60">265          <path d="M8 16 h18 l6 6 h32 c4 0 6 2 6 6 v18 c0 4-2 6-6 6 H12 c-4 0-6-2-6-6 V22 c0-4 2-6 6-6 z"/>266        </svg>267      </div>268      <div class="texts">269        <div class="name">com.google.intelligence.dbw.showcase</div>270        <div class="meta">Jun 8</div>271      </div>272    </div>273 274    <!-- DCIM -->275    <div class="row">276      <div class="folder-icon icon">277        <svg width="72" height="60" viewBox="0 0 72 60">278          <path d="M8 16 h18 l6 6 h32 c4 0 6 2 6 6 v18 c0 4-2 6-6 6 H12 c-4 0-6-2-6-6 V22 c0-4 2-6 6-6 z"/>279        </svg>280      </div>281      <div class="texts">282        <div class="name">DCIM</div>283        <div class="meta">3 days ago</div>284      </div>285    </div>286 287    <!-- Documents -->288    <div class="row">289      <div class="folder-icon icon">290        <svg width="72" height="60" viewBox="0 0 72 60">291          <path d="M8 16 h18 l6 6 h32 c4 0 6 2 6 6 v18 c0 4-2 6-6 6 H12 c-4 0-6-2-6-6 V22 c0-4 2-6 6-6 z"/>292        </svg>293      </div>294      <div class="texts">295        <div class="name">Documents</div>296        <div class="meta">Aug 25</div>297      </div>298    </div>299  </div>300 301  <!-- Bottom action -->302  <div class="bottom-action">303    <div class="pill">304      <div class="check"></div>305      <div>Move here</div>306    </div>307  </div>308 309  <div class="home-indicator"></div>310</div>311</body>312</html>