GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3  <head>4    <meta charset="utf-8" />5    <title>Internal Storage UI</title>6    <style>7      body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }8      #render-target {9        position: relative;10        width: 1080px;11        height: 2400px;12        overflow: hidden;13        background: #0c0d0a;14        color: #e8e8de;15      }16      /* Top header */17      .header {18        position: absolute;19        top: 0;20        left: 0;21        width: 1080px;22        height: 220px;23        background: #23280f; /* dark olive */24        box-sizing: border-box;25        padding-top: 22px;26      }27      .status {28        display: flex;29        align-items: center;30        justify-content: space-between;31        padding: 0 36px;32        color: #f0f0e3;33        font-size: 40px;34        opacity: 0.95;35      }36      .status-icons {37        display: flex;38        gap: 28px;39        align-items: center;40      }41      .title {42        padding: 40px 36px 28px 36px;43        font-size: 48px;44        font-weight: 600;45        color: #cdd77a;46      }47      .header-sep {48        position: absolute;49        bottom: 0;50        left: 0;51        width: 1080px;52        height: 2px;53        background: rgba(255,255,255,0.3);54      }55 56      /* List */57      .list {58        position: absolute;59        top: 220px;60        left: 0;61        right: 0;62        bottom: 190px;63        overflow: hidden;64        padding-top: 10px;65      }66      .row {67        display: flex;68        align-items: center;69        gap: 36px;70        padding: 36px 40px;71        border-bottom: 1px solid rgba(255,255,255,0.06);72      }73      .folder {74        width: 72px;75        height: 54px;76      }77      .row .texts {78        display: flex;79        flex-direction: column;80      }81      .row .name {82        font-size: 44px;83        line-height: 1.2;84        margin-bottom: 8px;85        color: #e7e8db;86        letter-spacing: 0.2px;87      }88      .row .meta {89        font-size: 32px;90        color: #9aa287;91      }92 93      /* Bottom action bar */94      .bottom-bar {95        position: absolute;96        left: 0;97        bottom: 0;98        width: 1080px;99        height: 190px;100        background: #262b11;101        box-shadow: 0 -10px 20px rgba(0,0,0,0.5);102        display: flex;103        align-items: center;104        justify-content: center;105      }106      .action-pill {107        width: 900px;108        height: 118px;109        background: #c9d56e;110        border-radius: 60px;111        display: flex;112        align-items: center;113        padding: 0 40px;114        gap: 28px;115        color: #1f230e;116        font-size: 42px;117        font-weight: 600;118      }119      .check {120        width: 56px;121        height: 56px;122      }123 124      /* Home indicator */125      .home-indicator {126        position: absolute;127        bottom: 18px;128        left: 50%;129        transform: translateX(-50%);130        width: 240px;131        height: 10px;132        background: #e6e6e6;133        border-radius: 8px;134        opacity: 0.9;135      }136    </style>137  </head>138  <body>139    <div id="render-target">140      <!-- Header -->141      <div class="header">142        <div class="status">143          <div>10:16</div>144          <div class="status-icons">145            <!-- Simple status icons -->146            <svg width="40" height="40" viewBox="0 0 24 24">147              <circle cx="12" cy="12" r="10" fill="none" stroke="#ffffff" stroke-width="2"></circle>148            </svg>149            <svg width="40" height="40" viewBox="0 0 24 24">150              <rect x="3" y="8" width="18" height="8" rx="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>151              <rect x="21" y="10" width="2" height="4" fill="#ffffff"></rect>152            </svg>153          </div>154        </div>155        <div class="title">Internal storage</div>156        <div class="header-sep"></div>157      </div>158 159      <!-- List -->160      <div class="list">161        <div class="row">162          <svg class="folder" viewBox="0 0 24 24">163            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>164          </svg>165          <div class="texts">166            <div class="name">Documents</div>167            <div class="meta">Aug 25</div>168          </div>169        </div>170 171        <div class="row">172          <svg class="folder" viewBox="0 0 24 24">173            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>174          </svg>175          <div class="texts">176            <div class="name">Download</div>177            <div class="meta">1 hour ago</div>178          </div>179        </div>180 181        <div class="row">182          <svg class="folder" viewBox="0 0 24 24">183            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>184          </svg>185          <div class="texts">186            <div class="name">iLovePDF</div>187            <div class="meta">Jul 19</div>188          </div>189        </div>190 191        <div class="row">192          <svg class="folder" viewBox="0 0 24 24">193            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>194          </svg>195          <div class="texts">196            <div class="name">Movies</div>197            <div class="meta">Aug 1</div>198          </div>199        </div>200 201        <div class="row">202          <svg class="folder" viewBox="0 0 24 24">203            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>204          </svg>205          <div class="texts">206            <div class="name">Music</div>207            <div class="meta">Jul 5</div>208          </div>209        </div>210 211        <div class="row">212          <svg class="folder" viewBox="0 0 24 24">213            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>214          </svg>215          <div class="texts">216            <div class="name">Notifications</div>217            <div class="meta">Jul 4</div>218          </div>219        </div>220 221        <div class="row">222          <svg class="folder" viewBox="0 0 24 24">223            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>224          </svg>225          <div class="texts">226            <div class="name">Office</div>227            <div class="meta">5 minutes ago</div>228          </div>229        </div>230 231        <div class="row">232          <svg class="folder" viewBox="0 0 24 24">233            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>234          </svg>235          <div class="texts">236            <div class="name">Pictures</div>237            <div class="meta">3 days ago</div>238          </div>239        </div>240 241        <div class="row">242          <svg class="folder" viewBox="0 0 24 24">243            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>244          </svg>245          <div class="texts">246            <div class="name">PocketBook</div>247            <div class="meta">Jul 24</div>248          </div>249        </div>250 251        <div class="row">252          <svg class="folder" viewBox="0 0 24 24">253            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#d9d9c4" stroke-width="1.8"></path>254          </svg>255          <div class="texts">256            <div class="name">Podcasts</div>257            <div class="meta">Nov 1, 2022</div>258          </div>259        </div>260      </div>261 262      <!-- Bottom action bar -->263      <div class="bottom-bar">264        <div class="action-pill">265          <svg class="check" viewBox="0 0 24 24">266            <circle cx="12" cy="12" r="11" fill="none" stroke="#1f230e" stroke-width="2"></circle>267            <path d="M6 12l4 4 8-8" fill="none" stroke="#1f230e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>268          </svg>269          <div>Move here</div>270        </div>271      </div>272 273      <!-- Home indicator -->274      <div class="home-indicator"></div>275    </div>276  </body>277</html>