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>Dropbox Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#111314; color:#fff;11  }12  .status-bar {13    height:92px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;14    color:#DADADA; font-size:32px;15  }16  .status-icons { display:flex; align-items:center; gap:26px; }17  .app-bar {18    height:120px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;19  }20  .title { display:flex; align-items:center; gap:28px; font-size:56px; font-weight:700; }21  .title svg { width:44px; height:44px; }22  .app-actions { display:flex; align-items:center; gap:34px; }23  .search-wrap { padding:20px 32px 0; }24  .search {25    height:110px; border-radius:18px; background:#1B1C1E; color:#BDBDBD;26    display:flex; align-items:center; gap:20px; padding:0 26px; font-size:40px;27  }28  .quick-actions { padding:26px 32px; display:flex; gap:22px; }29  .pill {30    flex:0 0 230px; height:120px; border-radius:18px; background:#1B1C1E;31    display:flex; align-items:center; justify-content:center; gap:18px; font-size:40px; color:#EDEDED;32    border:1px solid #242628;33  }34  .list-header {35    padding:18px 32px; display:flex; align-items:center; justify-content:space-between;36    color:#e9e9e9; font-size:36px;37  }38  .list-header .left { display:flex; align-items:center; gap:10px; }39  .file-list { padding:0 0 0; }40  .row {41    display:flex; align-items:center; padding:28px 32px; gap:26px;42    border-bottom:1px solid #22272A;43  }44  .thumb {45    width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; color:#555;46    display:flex; align-items:center; justify-content:center; font-size:28px; border-radius:10px;47  }48  .meta { flex:1; min-width:0; }49  .name { font-size:42px; color:#F3F3F3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }50  .sub { margin-top:10px; font-size:34px; color:#A5A5A5; }51  .kebab { width:48px; height:48px; color:#CFCFCF; }52  .grid-icon { width:54px; height:54px; }53  .fab {54    position:absolute; right:48px; bottom:250px; width:160px; height:160px; background:#347AF6;55    border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,0.4);56  }57  .bottom-nav {58    position:absolute; left:0; right:0; bottom:0; height:180px; background:#181A1C; border-top:1px solid #25282B;59    display:flex; align-items:center; justify-content:space-around;60  }61  .tab { display:flex; flex-direction:column; align-items:center; gap:14px; color:#D8D8D8; font-size:32px; }62  .tab .icon { width:58px; height:58px; }63  .active .label { color:#fff; }64  .badge { width:12px; height:12px; background:#F3A58D; border-radius:50%; position:absolute; top:-4px; right:-6px; }65  .home-wrap { position:relative; }66</style>67</head>68<body>69<div id="render-target">70  <!-- Android status bar -->71  <div class="status-bar">72    <div>9:11</div>73    <div class="status-icons">74      <!-- simple status icons -->75      <svg width="36" height="36" viewBox="0 0 24 24" fill="#DADADA"><path d="M7 2h10v2H7zM5 6h14v2H5zM3 10h18v2H3z"/></svg>76      <svg width="36" height="36" viewBox="0 0 24 24" fill="#DADADA"><path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v7l5 3 1-1-4-2z"/></svg>77      <svg width="36" height="36" viewBox="0 0 24 24" fill="#DADADA"><path d="M17 4h4v16h-4zM3 10h12v10H3z"/></svg>78    </div>79  </div>80 81  <!-- App bar -->82  <div class="app-bar">83    <div class="title">84      <!-- hamburger -->85      <svg viewBox="0 0 24 24" fill="#EAEAEA">86        <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/>87      </svg>88      <div>Dropbox</div>89    </div>90    <div class="app-actions">91      <!-- upload icon -->92      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2">93        <path d="M12 3v12m0-12l-4 4m4-4l4 4M4 20h16v-5"/>94      </svg>95      <!-- checkbox square -->96      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2">97        <rect x="3" y="3" width="18" height="18" rx="2"/>98        <path d="M7 12l3 3 7-7"/>99      </svg>100    </div>101  </div>102 103  <!-- Search -->104  <div class="search-wrap">105    <div class="search">106      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">107        <circle cx="11" cy="11" r="7"/><path d="M21 21l-3.5-3.5"/>108      </svg>109      <div>Search for anything</div>110    </div>111  </div>112 113  <!-- Quick actions -->114  <div class="quick-actions">115    <div class="pill">116      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">117        <path d="M12 3v12m0-12l-4 4m4-4l4 4M4 20h16v-5"/>118      </svg>119      <div>Upload</div>120    </div>121    <div class="pill">122      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">123        <path d="M3 7h6l2 2h10v10H3z"/>124      </svg>125      <div>Folder</div>126    </div>127    <div class="pill">128      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">129        <path d="M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4"/>130      </svg>131      <div>Scan</div>132    </div>133  </div>134 135  <!-- List header -->136  <div class="list-header">137    <div class="left">138      <div>Name</div>139      <svg width="22" height="22" viewBox="0 0 24 24" fill="#EDEDED"><path d="M7 10l5 5 5-5z"/></svg>140    </div>141    <!-- grid/list icon -->142    <svg class="grid-icon" viewBox="0 0 24 24" fill="#EDEDED">143      <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/>144    </svg>145  </div>146 147  <!-- Files list -->148  <div class="file-list">149    <!-- Row 1 -->150    <div class="row">151      <div class="thumb">[IMG: Gallery]</div>152      <div class="meta">153        <div class="name">Gallery_1695401456546.jpg</div>154        <div class="sub">527 KB, modified 32 minutes ago</div>155      </div>156      <svg class="kebab" viewBox="0 0 24 24" fill="#CFCFCF">157        <path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>158      </svg>159    </div>160 161    <!-- Row 2 -->162    <div class="row">163      <div class="thumb">[IMG: PXL]</div>164      <div class="meta">165        <div class="name">PXL_20230922_135709517.MP.jpg</div>166        <div class="sub">4.4 MB, modified 32 minutes ago</div>167      </div>168      <svg class="kebab" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>169    </div>170 171    <!-- Row 3 -->172    <div class="row">173      <div class="thumb">[IMG: PXL]</div>174      <div class="meta">175        <div class="name">PXL_20230922_135714108.jpg</div>176        <div class="sub">2.5 MB, modified 32 minutes ago</div>177      </div>178      <svg class="kebab" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>179    </div>180 181    <!-- Row 4 -->182    <div class="row">183      <div class="thumb">[IMG: PXL]</div>184      <div class="meta">185        <div class="name">PXL_20230922_135722837.jpg</div>186        <div class="sub">2.1 MB, modified 32 minutes ago</div>187      </div>188      <svg class="kebab" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>189    </div>190 191    <!-- Row 5 -->192    <div class="row">193      <div class="thumb">[IMG: Office]</div>194      <div class="meta">195        <div class="name">PXL_ofc21.jpg</div>196        <div class="sub">2.2 MB, modified 32 minutes ago</div>197      </div>198      <svg class="kebab" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>199    </div>200 201    <!-- Row 6 -->202    <div class="row">203      <div class="thumb">[IMG: PDF Doc]</div>204      <div class="meta">205        <div class="name">Structured query language.pdf</div>206        <div class="sub">248 KB, modified 19 minutes ago</div>207      </div>208      <svg class="kebab" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>209    </div>210  </div>211 212  <!-- Floating Action Button -->213  <div class="fab">214    <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">215      <path d="M12 5v14M5 12h14"/>216    </svg>217  </div>218 219  <!-- Bottom navigation -->220  <div class="bottom-nav">221    <div class="tab">222      <div class="home-wrap">223        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#D8D8D8" stroke-width="2">224          <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-5H9v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>225        </svg>226        <span class="badge"></span>227      </div>228      <div class="label">Home</div>229    </div>230    <div class="tab active">231      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">232        <path d="M3 7h6l2 2h10v10H3z"/>233      </svg>234      <div class="label">Files</div>235    </div>236    <div class="tab">237      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#D8D8D8" stroke-width="2">238        <path d="M4 20h16V4H4v16z"/><path d="M8 14l3-3 2 2 3-4 4 5"/>239      </svg>240      <div class="label">Photos</div>241    </div>242    <div class="tab">243      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#D8D8D8" stroke-width="2">244        <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>245      </svg>246      <div class="label">Account</div>247    </div>248  </div>249</div>250</body>251</html>