GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Mobile UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000;14 color: #fff;15 }16 17 /* Header */18 .header {19 position: absolute;20 top: 60px;21 left: 32px;22 right: 32px;23 height: 120px;24 }25 .back {26 position: absolute;27 left: 8px;28 top: 18px;29 width: 72px;30 height: 72px;31 border-radius: 36px;32 display: flex;33 align-items: center;34 justify-content: center;35 }36 .back svg { width: 56px; height: 56px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }37 38 .action-btns {39 position: absolute;40 top: 0;41 right: 0;42 display: flex;43 gap: 24px;44 }45 .action-circle {46 width: 112px;47 height: 112px;48 background: #2a2a2a;49 border-radius: 56px;50 display: flex;51 align-items: center;52 justify-content: center;53 box-shadow: 0 6px 18px rgba(0,0,0,0.5);54 }55 .action-circle svg { width: 56px; height: 56px; stroke: #fff; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }56 57 /* Content grid */58 .content {59 position: absolute;60 top: 200px;61 left: 32px;62 right: 32px;63 bottom: 240px;64 overflow: hidden;65 }66 .grid {67 display: grid;68 grid-template-columns: 1fr 1fr;69 grid-column-gap: 36px;70 grid-row-gap: 32px;71 }72 .section {73 display: flex;74 flex-direction: column;75 gap: 24px;76 }77 .card, .long-card, .medium-card, .pill {78 background: #3a3a3a;79 border-radius: 36px;80 }81 .card { height: 260px; }82 .long-card { height: 520px; }83 .medium-card { height: 360px; }84 .pill { height: 72px; border-radius: 40px; }85 86 /* Bottom navigation */87 .bottom-nav {88 position: absolute;89 bottom: 0;90 left: 0;91 right: 0;92 height: 220px;93 background: #121212;94 box-shadow: 0 -12px 28px rgba(0,0,0,0.6);95 padding: 28px 40px 34px;96 display: flex;97 align-items: flex-end;98 }99 .nav-items {100 display: flex;101 width: 100%;102 justify-content: space-between;103 align-items: flex-end;104 }105 .nav-item {106 display: flex;107 flex-direction: column;108 align-items: center;109 gap: 18px;110 color: #bdbdbd;111 font-size: 40px;112 }113 .nav-item .icon {114 width: 120px;115 height: 120px;116 border-radius: 60px;117 display: flex;118 align-items: center;119 justify-content: center;120 }121 .nav-item svg { width: 64px; height: 64px; stroke: #fff; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }122 .nav-item.active { color: #5d85ff; }123 .nav-item.active .icon { background: #1c1c1c; border: 4px solid #5d85ff; }124 125 /* Home indicator */126 .homebar {127 position: absolute;128 bottom: 10px;129 left: 50%;130 transform: translateX(-50%);131 width: 320px;132 height: 14px;133 background: #e7e7e7;134 border-radius: 10px;135 opacity: 0.85;136 }137</style>138</head>139<body>140<div id="render-target">141 142 <!-- Header -->143 <div class="header">144 <div class="back">145 <svg viewBox="0 0 24 24">146 <path d="M15 5L8 12l7 7"></path>147 </svg>148 </div>149 <div class="action-btns">150 <div class="action-circle">151 <svg viewBox="0 0 24 24">152 <circle cx="11" cy="11" r="6"></circle>153 <path d="M20 20l-4-4"></path>154 </svg>155 </div>156 <div class="action-circle">157 <svg viewBox="0 0 24 24">158 <path d="M6 6h14l-2 12H8L6 6z"></path>159 <circle cx="9" cy="20" r="1.5"></circle>160 <circle cx="17" cy="20" r="1.5"></circle>161 </svg>162 </div>163 </div>164 </div>165 166 <!-- Content grid with skeleton blocks -->167 <div class="content">168 <div class="grid">169 <div class="section">170 <div class="card"></div>171 <div class="pill"></div>172 <div class="pill"></div>173 <div class="pill"></div>174 <div class="pill"></div>175 176 <div class="long-card"></div>177 178 <div class="pill"></div>179 <div class="pill"></div>180 <div class="pill"></div>181 <div class="pill"></div>182 183 <div class="medium-card"></div>184 </div>185 186 <div class="section">187 <div class="card"></div>188 <div class="pill"></div>189 <div class="pill"></div>190 <div class="pill"></div>191 <div class="pill"></div>192 193 <div class="long-card"></div>194 195 <div class="pill"></div>196 <div class="pill"></div>197 <div class="pill"></div>198 <div class="pill"></div>199 200 <div class="medium-card"></div>201 </div>202 </div>203 </div>204 205 <!-- Bottom navigation -->206 <div class="bottom-nav">207 <div class="nav-items">208 <div class="nav-item active">209 <div class="icon">210 <svg viewBox="0 0 24 24">211 <path d="M3 12l9-8 9 8v8h-6v-5H9v5H3z"></path>212 </svg>213 </div>214 <div>Home</div>215 </div>216 217 <div class="nav-item">218 <div class="icon">219 <svg viewBox="0 0 24 24">220 <circle cx="12" cy="8" r="4"></circle>221 <path d="M4 20c2.2-4 6-4 8-4s5.8 0 8 4"></path>222 </svg>223 </div>224 <div>My eBay</div>225 </div>226 227 <div class="nav-item">228 <div class="icon">229 <svg viewBox="0 0 24 24">230 <circle cx="11" cy="11" r="6"></circle>231 <path d="M20 20l-4-4"></path>232 </svg>233 </div>234 <div>Search</div>235 </div>236 237 <div class="nav-item">238 <div class="icon">239 <svg viewBox="0 0 24 24">240 <path d="M12 3a4 4 0 0 1 4 4v3c0 1.8.7 3.2 2 4l1 1H5l1-1c1.3-1 2-2.4 2-4V7a4 4 0 0 1 4-4z"></path>241 <circle cx="12" cy="20" r="1.6"></circle>242 </svg>243 </div>244 <div>Inbox</div>245 </div>246 247 <div class="nav-item">248 <div class="icon">249 <svg viewBox="0 0 24 24">250 <path d="M5 7l10-4 4 10-10 4z"></path>251 <circle cx="9" cy="9" r="1.5"></circle>252 </svg>253 </div>254 <div>Selling</div>255 </div>256 </div>257 </div>258 259 <div class="homebar"></div>260</div>261</body>262</html>