GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Dropbox Mobile UI Mock</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#121212; color:#fff;10  }11  .status-bar {12    height:80px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#e0e0e0; font-weight:600; font-size:40px;13  }14  /* Header */15  .app-header {16    height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17  }18  .title-area { display:flex; align-items:center; gap:28px; }19  .title-text { font-size:56px; font-weight:700; letter-spacing:0.3px; }20  .header-actions { display:flex; align-items:center; gap:36px; }21  .icon-btn { width:76px; height:76px; display:flex; align-items:center; justify-content:center; border-radius:10px; }22  /* Search */23  .search-bar {24    margin:24px 36px 20px; height:104px; border-radius:52px; background:#1c1c1c;25    display:flex; align-items:center; padding:0 36px; gap:24px; color:#bcbcbc; font-size:40px;26    box-shadow: inset 0 0 0 1px #2a2a2a;27  }28  /* Quick actions */29  .quick-actions { display:flex; gap:24px; padding:0 36px; }30  .qa-card {31    background:#252525; border-radius:16px; width:318px; height:132px;32    display:flex; align-items:center; gap:22px; padding:0 32px; box-shadow: inset 0 0 0 1px #2e2e2e;33    font-size:42px; color:#fff; font-weight:600;34  }35  /* List header */36  .list-header { margin:40px 36px 0; display:flex; align-items:center; justify-content:space-between; color:#e9e9e9; }37  .list-header .name { font-size:44px; font-weight:700; display:flex; align-items:center; gap:14px; }38  /* Items */39  .item { margin:30px 36px 0; padding:26px 0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #1e1e1e; }40  .item-left { display:flex; align-items:center; gap:28px; }41  .folder-icon {42    width:66px; height:54px; background:#4f92ff; border-radius:6px; position:relative;43  }44  .folder-icon::before {45    content:""; position:absolute; left:6px; top:-12px; width:28px; height:18px; background:#4f92ff; border-top-left-radius:6px; border-top-right-radius:6px;46  }47  .file-thumb {48    width:86px; height:86px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; justify-content:center; align-items:center; color:#757575; font-size:26px;49  }50  .item-text { display:flex; flex-direction:column; }51  .item-title { font-size:42px; color:#fff; }52  .item-sub { font-size:34px; color:#a0a0a0; margin-top:8px; }53  .item-right { display:flex; align-items:center; gap:26px; }54  .green-check {55    width:52px; height:52px; border-radius:50%; background:#1db954; display:flex; align-items:center; justify-content:center;56  }57  /* FAB */58  .fab {59    position:absolute; right:54px; bottom:250px; width:160px; height:160px; border-radius:80px; background:#3b7cff;60    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,0.5);61  }62  /* Bottom nav */63  .bottom-nav {64    position:absolute; left:0; bottom:0; width:100%; height:184px; background:#171717; border-top:1px solid #262626;65    display:flex; align-items:center; justify-content:space-around; color:#cfcfcf;66  }67  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; font-size:34px; }68  .nav-item.active { color:#fff; }69  .dot-notif { position:absolute; top:42px; left:110px; width:24px; height:24px; background:#e58d73; border-radius:50%; }70  /* Simple helpers */71  .svg { width:48px; height:48px; }72</style>73</head>74<body>75<div id="render-target">76 77  <!-- Status bar -->78  <div class="status-bar">79    <div style="display:flex; align-items:center; gap:18px;">80      <span>8:50</span>81      <svg class="svg" viewBox="0 0 24 24" fill="#cfcfcf"><circle cx="12" cy="12" r="10"/></svg>82      <svg class="svg" viewBox="0 0 24 24" fill="#cfcfcf"><rect x="4" y="6" width="16" height="12" rx="2"/></svg>83    </div>84    <div style="display:flex; align-items:center; gap:18px;">85      <svg class="svg" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M18 6v12l-6-4-6 4V6l6 4 6-4z"/></svg>86      <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2"><path d="M20 6v12"/></svg>87      <span style="font-size:34px;">75%</span>88    </div>89  </div>90 91  <!-- App header -->92  <div class="app-header">93    <div class="title-area">94      <!-- Hamburger -->95      <svg class="svg" viewBox="0 0 24 24" fill="#fff">96        <rect x="3" y="5" width="18" height="2"></rect>97        <rect x="3" y="11" width="18" height="2"></rect>98        <rect x="3" y="17" width="18" height="2"></rect>99      </svg>100      <div class="title-text">Dropbox</div>101    </div>102    <div class="header-actions">103      <!-- Upload icon -->104      <div class="icon-btn">105        <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">106          <path d="M12 16V7"></path>107          <path d="M8 11l4-4 4 4"></path>108          <rect x="4" y="18" width="16" height="2" rx="1" fill="#fff"></rect>109        </svg>110      </div>111      <!-- Checkbox icon -->112      <div class="icon-btn">113        <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">114          <rect x="4" y="4" width="16" height="16" rx="2" stroke="#fff"></rect>115          <path d="M8 12l3 3 5-7" stroke="#fff"></path>116        </svg>117      </div>118    </div>119  </div>120 121  <!-- Search bar -->122  <div class="search-bar">123    <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#bcbcbc" stroke-width="2">124      <circle cx="11" cy="11" r="7"></circle>125      <path d="M21 21l-4.3-4.3"></path>126    </svg>127    <div>Search for anything</div>128  </div>129 130  <!-- Quick actions -->131  <div class="quick-actions">132    <div class="qa-card">133      <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">134        <path d="M12 16V7"></path>135        <path d="M8 11l4-4 4 4"></path>136        <rect x="4" y="18" width="16" height="2" rx="1" fill="#fff"></rect>137      </svg>138      <div>Upload</div>139    </div>140    <div class="qa-card">141      <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">142        <path d="M3 7h6l2 2h10v10H3z"></path>143      </svg>144      <div>Folder</div>145    </div>146    <div class="qa-card">147      <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">148        <rect x="4" y="4" width="16" height="16" rx="3"></rect>149        <path d="M8 12h8"></path>150        <path d="M12 8v8"></path>151      </svg>152      <div>Scan</div>153    </div>154  </div>155 156  <!-- List header -->157  <div class="list-header">158    <div class="name">Name159      <svg class="svg" viewBox="0 0 24 24" fill="#e9e9e9"><path d="M7 10l5 5 5-5z"/></svg>160    </div>161    <!-- Grid icon -->162    <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#e9e9e9" stroke-width="2">163      <rect x="3" y="3" width="7" height="7"></rect>164      <rect x="14" y="3" width="7" height="7"></rect>165      <rect x="3" y="14" width="7" height="7"></rect>166      <rect x="14" y="14" width="7" height="7"></rect>167    </svg>168  </div>169 170  <!-- Folder item -->171  <div class="item">172    <div class="item-left">173      <div class="folder-icon"></div>174      <div class="item-text">175        <div class="item-title">Favourite Book</div>176      </div>177    </div>178    <div class="item-right">179      <!-- vertical dots -->180      <svg class="svg" viewBox="0 0 24 24" fill="#cfcfcf">181        <circle cx="12" cy="5" r="2"></circle>182        <circle cx="12" cy="12" r="2"></circle>183        <circle cx="12" cy="19" r="2"></circle>184      </svg>185    </div>186  </div>187 188  <!-- File item -->189  <div class="item">190    <div class="item-left">191      <div class="file-thumb">[IMG: PDF Page]</div>192      <div class="item-text">193        <div class="item-title">the-diary-of-anne-frank-1.pdf</div>194        <div class="item-sub">702 KB, modified 1 hour ago</div>195      </div>196    </div>197    <div class="item-right">198      <div class="green-check">199        <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#fff" stroke-width="3">200          <path d="M6 12l4 4 8-8"></path>201        </svg>202      </div>203      <svg class="svg" viewBox="0 0 24 24" fill="#cfcfcf">204        <circle cx="12" cy="5" r="2"></circle>205        <circle cx="12" cy="12" r="2"></circle>206        <circle cx="12" cy="19" r="2"></circle>207      </svg>208    </div>209  </div>210 211  <!-- Floating Action Button -->212  <div class="fab">213    <svg viewBox="0 0 24 24" width="80" height="80" fill="none" stroke="#fff" stroke-width="3">214      <path d="M12 5v14M5 12h14"></path>215    </svg>216  </div>217 218  <!-- Bottom navigation -->219  <div class="bottom-nav">220    <div class="nav-item" style="position:relative;">221      <div class="dot-notif"></div>222      <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#cfcfcf" stroke-width="2">223        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>224        <path d="M9 21V12h6v9"></path>225      </svg>226      <div>Home</div>227    </div>228    <div class="nav-item active">229      <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#fff" stroke-width="2">230        <path d="M3 7h7l2 2h9v10H3z"></path>231      </svg>232      <div>Files</div>233    </div>234    <div class="nav-item">235      <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#cfcfcf" stroke-width="2">236        <rect x="3" y="5" width="18" height="14" rx="2"></rect>237        <path d="M8 14l3-3 3 3 4-4"></path>238      </svg>239      <div>Photos</div>240    </div>241    <div class="nav-item">242      <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#cfcfcf" stroke-width="2">243        <circle cx="12" cy="7" r="4"></circle>244        <path d="M4 21a8 8 0 0 1 16 0"></path>245      </svg>246      <div>Account</div>247    </div>248  </div>249 250</div>251</body>252</html>