GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #111316;13 color: #ffffff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;15 }16 .status-bar {17 height: 120px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #eaeaea;23 font-weight: 600;24 font-size: 40px;25 }26 .status-right {27 display: flex;28 gap: 24px;29 align-items: center;30 }31 .icon { width: 54px; height: 54px; }32 .app-bar {33 height: 120px;34 padding: 0 36px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 }39 .app-left {40 display:flex; align-items:center; gap:28px;41 }42 .title { font-size: 72px; font-weight: 700; }43 .app-actions { display:flex; align-items:center; gap:44px; }44 .search-wrap {45 margin: 22px 36px 0 36px;46 background:#1b1f23;47 height: 120px;48 border-radius: 60px;49 display:flex;50 align-items:center;51 padding: 0 32px;52 box-shadow: inset 0 0 0 1px #2a2f35;53 }54 .search-input {55 flex:1;56 color:#cfd6dc;57 font-size: 44px;58 }59 .promo {60 margin: 28px 0 0 0;61 padding: 36px 36px;62 background:#171a1d;63 border-top: 1px solid #22272d;64 border-bottom: 1px solid #22272d;65 display:flex;66 align-items:center;67 justify-content: space-between;68 }69 .promo-text { font-size:46px; }70 .promo-sub { font-size:40px; color:#9aa7b2; margin-top:8px; }71 .promo-right { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }72 .section {73 padding: 40px 36px;74 }75 .section-header {76 display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;77 }78 .section-left { display:flex; align-items:center; gap:24px; }79 .section-title { font-size:56px; font-weight:700; }80 .see-all { color:#3a82f6; font-size:46px; }81 .list-item {82 display:flex; align-items:center;83 gap:30px;84 padding: 24px 0;85 }86 .thumb {87 width: 180px; height: 180px; background:#E0E0E0; border:1px solid #BDBDBD;88 display:flex; align-items:center; justify-content:center; color:#757575; border-radius: 12px;89 }90 .file-meta { flex:1; }91 .file-name { font-size:46px; line-height:1.2; }92 .file-source { font-size:38px; color:#8c97a3; margin-top:10px; }93 .kebab { width:18px; display:flex; flex-direction:column; gap:12px; margin-right:20px; }94 .dot { width:18px; height:18px; background:#cfd6dc; border-radius:50%; }95 .divider { height:2px; background:#22272d; margin:30px 0; }96 .starred-card {97 background:#131619;98 border:1px solid #22272d;99 border-radius: 24px;100 padding: 30px 30px;101 display:flex;102 align-items:center;103 gap:30px;104 }105 .img-placeholder {106 width: 420px; height: 280px; background:#E0E0E0; border:1px solid #BDBDBD;107 display:flex; align-items:center; justify-content:center; color:#757575; border-radius: 18px;108 }109 .starred-text { font-size:46px; color:#cfd6dc; line-height:1.3; }110 .shared-section { padding: 30px 36px 140px 36px; }111 .shared-head { display:flex; align-items:center; gap:20px; font-size:54px; font-weight:700; }112 .fab {113 position:absolute; right:60px; bottom:260px;114 width:160px; height:160px; border-radius:50%;115 background:#2d7cff; display:flex; align-items:center; justify-content:center;116 box-shadow: 0 18px 36px rgba(0,0,0,0.5);117 }118 .bottom-nav {119 position:absolute; bottom:0; left:0; right:0;120 height: 210px; background:#0e1013; border-top:1px solid #22272d;121 display:flex; justify-content:space-around; align-items:center;122 }123 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#cfd6dc; font-size:36px; }124 .nav-item.active { color:#ffffff; }125 .active-dot {126 position:absolute; left:120px; bottom:210px; width:28px; height:28px; background:#f59f45; border-radius:50%;127 }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Status bar -->134 <div class="status-bar">135 <div>9:32</div>136 <div class="status-right">137 <!-- simple status icons -->138 <svg class="icon" viewBox="0 0 24 24">139 <path d="M4 10h16v8H4z" fill="#ffffff"/>140 <rect x="19" y="6" width="3" height="6" fill="#ffffff"/>141 </svg>142 <svg class="icon" viewBox="0 0 24 24">143 <path d="M2 18l9-12 9 12H2z" fill="none" stroke="#ffffff" stroke-width="2"/>144 </svg>145 <svg class="icon" viewBox="0 0 24 24">146 <rect x="3" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>147 <rect x="5" y="9" width="12" height="6" fill="#ffffff"/>148 </svg>149 <span style="font-size:40px;">100%</span>150 </div>151 </div>152 153 <!-- App bar -->154 <div class="app-bar">155 <div class="app-left">156 <!-- hamburger -->157 <svg class="icon" viewBox="0 0 24 24">158 <path d="M3 6h18M3 12h18M3 18h18" stroke="#ffffff" stroke-width="2"/>159 </svg>160 <div class="title">Home</div>161 </div>162 <div class="app-actions">163 <!-- bell -->164 <svg class="icon" viewBox="0 0 24 24">165 <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z" fill="none" stroke="#ffffff" stroke-width="2"/>166 <circle cx="12" cy="20" r="2" fill="#ffffff"/>167 </svg>168 <!-- upload -->169 <svg class="icon" viewBox="0 0 24 24">170 <path d="M12 5l-5 5h3v6h4v-6h3z" fill="#ffffff"/>171 </svg>172 <!-- palette -->173 <svg class="icon" viewBox="0 0 24 24">174 <circle cx="12" cy="14" r="8" fill="none" stroke="#ffffff" stroke-width="2"/>175 <circle cx="9" cy="11" r="1.5" fill="#ffffff"/>176 <circle cx="14" cy="10" r="1.5" fill="#ffffff"/>177 <circle cx="16" cy="14" r="1.5" fill="#ffffff"/>178 </svg>179 </div>180 </div>181 182 <!-- Search -->183 <div class="search-wrap">184 <svg class="icon" viewBox="0 0 24 24" style="margin-right:18px;">185 <circle cx="11" cy="11" r="7" fill="none" stroke="#cfd6dc" stroke-width="2"/>186 <path d="M20 20l-4-4" stroke="#cfd6dc" stroke-width="2"/>187 </svg>188 <div class="search-input">Search</div>189 </div>190 191 <!-- Promo card -->192 <div class="promo">193 <div>194 <div class="promo-text">Get these files on your computer</div>195 <div class="promo-sub">Sync files</div>196 </div>197 <div class="promo-right">198 <svg viewBox="0 0 24 24" width="60" height="60">199 <path d="M6 6l12 12M18 6L6 18" stroke="#cfd6dc" stroke-width="2"/>200 </svg>201 </div>202 </div>203 204 <!-- Recent section -->205 <div class="section">206 <div class="section-header">207 <div class="section-left">208 <svg class="icon" viewBox="0 0 24 24">209 <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"/>210 <path d="M12 7v6l4 2" stroke="#ffffff" stroke-width="2"/>211 </svg>212 <div class="section-title">Recent</div>213 </div>214 <div class="see-all">See all</div>215 </div>216 217 <div class="list-item">218 <div class="thumb">[IMG: Book Cover]</div>219 <div class="file-meta">220 <div class="file-name">A_short_history_of_Germany_(IA_shorthistoryofge00hawt).pdf</div>221 <div class="file-source">Dropbox</div>222 </div>223 <div class="kebab">224 <div class="dot"></div>225 <div class="dot"></div>226 <div class="dot"></div>227 </div>228 </div>229 </div>230 231 <div class="divider"></div>232 233 <!-- Starred section -->234 <div class="section">235 <div class="section-header">236 <div class="section-title">Starred</div>237 <div class="see-all">See all</div>238 </div>239 240 <div class="starred-card">241 <div class="img-placeholder">[IMG: Hand placing stars]</div>242 <div class="starred-text">243 Anything you star shows up here for quick access.244 </div>245 </div>246 </div>247 248 <!-- Shared header near bottom -->249 <div class="shared-section">250 <div class="shared-head">251 <svg class="icon" viewBox="0 0 24 24">252 <circle cx="8" cy="10" r="3.5" fill="none" stroke="#ffffff" stroke-width="2"/>253 <circle cx="16" cy="10" r="3.5" fill="none" stroke="#ffffff" stroke-width="2"/>254 <path d="M3 19c1.5-3 4-4 7-4s5.5 1 7 4" fill="none" stroke="#ffffff" stroke-width="2"/>255 </svg>256 <div>Shared</div>257 </div>258 </div>259 260 <!-- Floating Action Button -->261 <div class="fab">262 <svg viewBox="0 0 24 24" width="80" height="80">263 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>264 </svg>265 </div>266 267 <!-- Active dot near Home icon (like the small orange indicator) -->268 <div class="active-dot"></div>269 270 <!-- Bottom navigation -->271 <div class="bottom-nav">272 <div class="nav-item active">273 <svg class="icon" viewBox="0 0 24 24">274 <path d="M4 11l8-6 8 6v8H4z" fill="none" stroke="#ffffff" stroke-width="2"/>275 <rect x="10" y="14" width="4" height="5" fill="#ffffff"/>276 </svg>277 <div>Home</div>278 </div>279 <div class="nav-item">280 <svg class="icon" viewBox="0 0 24 24">281 <path d="M3 7h14l4 4v8H3z" fill="none" stroke="#cfd6dc" stroke-width="2"/>282 <path d="M11 12h6" stroke="#cfd6dc" stroke-width="2"/>283 </svg>284 <div>Files</div>285 </div>286 <div class="nav-item">287 <svg class="icon" viewBox="0 0 24 24">288 <rect x="4" y="6" width="16" height="12" fill="none" stroke="#cfd6dc" stroke-width="2"/>289 <path d="M4 16l6-5 4 3 6-6" stroke="#cfd6dc" stroke-width="2" fill="none"/>290 </svg>291 <div>Photos</div>292 </div>293 <div class="nav-item">294 <svg class="icon" viewBox="0 0 24 24">295 <circle cx="12" cy="9" r="4" fill="none" stroke="#cfd6dc" stroke-width="2"/>296 <path d="M4 20c2.5-5 6.5-6 8-6s5.5 1 8 6" fill="none" stroke="#cfd6dc" stroke-width="2"/>297 </svg>298 <div>Account</div>299 </div>300 </div>301 302</div>303</body>304</html>