GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">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: #e6e6e6;12    font-family: Roboto, Arial, Helvetica, sans-serif;13  }14 15  .status-bar {16    height: 110px;17    display: flex;18    align-items: center;19    padding: 0 34px;20    font-size: 40px;21    color: #f5f5f5;22  }23  .status-icons {24    margin-left: 18px;25    display: flex; gap: 12px;26  }27  .dot { width: 12px; height: 12px; background: #f5f5f5; border-radius: 50%; opacity: 0.8; }28  .sb-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }29  .wifi, .battery {30    width: 42px; height: 28px;31    border: 2px solid #f5f5f5; border-radius: 4px;32  }33  .battery::after {34    content: ""; position: absolute; width: 6px; height: 16px; background:#f5f5f5;35    transform: translate(42px, 6px); border-radius: 2px;36  }37 38  .search-wrap {39    padding: 20px 34px 8px 34px;40  }41  .search-bar {42    height: 120px; border-radius: 60px;43    background: #2b2f32;44    display: flex; align-items: center;45    padding: 0 34px;46  }47  .search-text {48    color: #cfd8dc; font-size: 42px; margin-left: 24px; letter-spacing: 0.2px;49  }50  .avatar {51    margin-left: auto;52    width: 88px; height: 88px; border-radius: 50%;53    background: #7d695f; color: #fff; display: flex; align-items: center; justify-content: center;54    font-weight: 600; font-size: 46px;55  }56 57  .tabs {58    display: flex; gap: 40px; padding: 18px 34px 26px 34px; align-items: flex-end;59    font-size: 40px;60  }61  .tab {62    color: #9aa5ae;63  }64  .tab.active { color: #8ab4f8; position: relative; }65  .tab.active::after {66    content: ""; position: absolute; left: 0; right: 0; bottom: -24px;67    margin: auto; width: 160px; height: 10px; border-radius: 6px; background: #8ab4f8;68  }69 70  .divider { height: 2px; background: #262626; margin: 0; }71 72  .card {73    padding: 36px 34px 24px 34px;74  }75  .file-header {76    display: flex; align-items: center; gap: 22px; margin-bottom: 24px;77  }78  .file-name { font-size: 42px; font-weight: 600; color: #f1f3f4; }79  .spacer { margin-left: auto; }80  .kebab { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }81  .image-icon {82    width: 56px; height: 56px; border-radius: 8px; background: #e57373;83    display: flex; align-items: center; justify-content: center;84  }85  .thumb {86    width: 100%; max-width: 1012px; height: 460px;87    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;88    border-radius: 28px;89    display: flex; align-items: center; justify-content: center;90    font-size: 36px; margin-top: 8px;91  }92  .meta {93    display: flex; align-items: center; gap: 22px; margin-top: 28px; color: #c3c7ca; font-size: 38px;94  }95  .meta .avatar { width: 82px; height: 82px; font-size: 42px; background: #8a6c5b; }96 97  .fab {98    position: absolute; right: 34px; bottom: 512px;99    width: 130px; height: 130px; border-radius: 34px;100    background: #39444d; box-shadow: 0 8px 16px rgba(0,0,0,0.4);101    display: flex; align-items: center; justify-content: center;102  }103 104  .bottom-nav {105    position: absolute; left: 0; right: 0; bottom: 0;106    height: 240px; background: #1a1a1a; border-top: 2px solid #2a2a2a;107    display: flex; align-items: center; justify-content: space-around;108    padding-top: 16px;109  }110  .nav-item { display: flex; flex-direction: column; align-items: center; color: #c5c6c7; font-size: 36px; gap: 12px; }111  .nav-item.active { color: #ffffff; }112  .nav-icon {113    width: 96px; height: 72px; border-radius: 36px; background: transparent;114    display: flex; align-items: center; justify-content: center;115  }116  .nav-item.active .nav-icon { background: #2f3f4a; }117 118  .home-indicator {119    position: absolute; left: 50%; transform: translateX(-50%);120    bottom: 248px; width: 360px; height: 16px; border-radius: 10px; background: #e0e0e0; opacity: 0.85;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <div class="status-bar">128    <div>6:09</div>129    <div class="status-icons">130      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>131      <div class="dot" style="opacity:.4"></div>132    </div>133    <div class="sb-right">134      <div class="wifi"></div>135      <div class="battery" style="position: relative;"></div>136    </div>137  </div>138 139  <div class="search-wrap">140    <div class="search-bar">141      <svg width="52" height="52" viewBox="0 0 24 24" fill="#cfd8dc">142        <rect x="2" y="5" width="20" height="2" rx="1"></rect>143        <rect x="2" y="11" width="20" height="2" rx="1"></rect>144        <rect x="2" y="17" width="14" height="2" rx="1"></rect>145      </svg>146      <div class="search-text">Search in Drive</div>147      <div class="avatar">C</div>148    </div>149  </div>150 151  <div class="tabs">152    <div class="tab active">Suggested</div>153    <div class="tab">Notifications</div>154  </div>155  <div class="divider"></div>156 157  <!-- First file card -->158  <div class="card">159    <div class="file-header">160      <div class="image-icon">161        <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">162          <rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>163          <path d="M6 15l3-3 3 4 4-5 2 4" stroke="#fff" stroke-width="2" fill="none"></path>164        </svg>165      </div>166      <div class="file-name">Riviera maya.jpg</div>167      <div class="spacer"></div>168      <div class="kebab">169        <svg width="32" height="32" viewBox="0 0 24 24" fill="#bdbdbd">170          <circle cx="12" cy="5" r="2"></circle>171          <circle cx="12" cy="12" r="2"></circle>172          <circle cx="12" cy="19" r="2"></circle>173        </svg>174      </div>175    </div>176    <div class="thumb">[IMG: Tropical beach photo]</div>177    <div class="meta">178      <div class="avatar">C</div>179      <div>You opened today</div>180    </div>181  </div>182 183  <div class="divider"></div>184 185  <!-- Second file card -->186  <div class="card" style="padding-bottom: 180px;">187    <div class="file-header">188      <div class="image-icon">189        <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">190          <rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>191          <path d="M6 15l3-3 3 4 4-5 2 4" stroke="#fff" stroke-width="2" fill="none"></path>192        </svg>193      </div>194      <div class="file-name">images (1).jpeg</div>195      <div class="spacer"></div>196      <div class="kebab">197        <svg width="32" height="32" viewBox="0 0 24 24" fill="#bdbdbd">198          <circle cx="12" cy="5" r="2"></circle>199          <circle cx="12" cy="12" r="2"></circle>200          <circle cx="12" cy="19" r="2"></circle>201        </svg>202      </div>203    </div>204    <div class="thumb">[IMG: Snowy mountains and forest]</div>205    <div class="meta">206      <div class="avatar">C</div>207      <div>You edited today</div>208    </div>209 210    <!-- Floating Action Button -->211    <div class="fab">212      <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffffff">213        <rect x="11" y="4" width="2" height="16"></rect>214        <rect x="4" y="11" width="16" height="2"></rect>215      </svg>216    </div>217  </div>218 219  <!-- Bottom navigation -->220  <div class="home-indicator"></div>221  <div class="bottom-nav">222    <div class="nav-item active">223      <div class="nav-icon">224        <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">225          <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z"></path>226        </svg>227      </div>228      <div>Home</div>229    </div>230    <div class="nav-item">231      <div class="nav-icon">232        <svg width="44" height="44" viewBox="0 0 24 24" fill="#c5c6c7">233          <path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"></path>234        </svg>235      </div>236      <div>Starred</div>237    </div>238    <div class="nav-item">239      <div class="nav-icon">240        <svg width="44" height="44" viewBox="0 0 24 24" fill="#c5c6c7">241          <path d="M16 11c1.66 0 3-1.34 3-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.67 0-8 1.34-8 4v2h12v-2c0-2.66-5.33-4-8-4zm8 0c-.7 0-1.36.07-2 .18 1.22.73 2 1.73 2 3.32V19h8v-2c0-2.66-5.33-4-8-4z"></path>242        </svg>243      </div>244      <div>Shared</div>245    </div>246    <div class="nav-item">247      <div class="nav-icon">248        <svg width="44" height="44" viewBox="0 0 24 24" fill="#c5c6c7">249          <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z"></path>250        </svg>251      </div>252      <div>Files</div>253    </div>254  </div>255 256</div>257</body>258</html>