GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 color: #212121;14 }15 16 /* Status bar */17 .status-bar {18 height: 110px;19 padding: 0 34px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #212121;24 font-size: 36px;25 }26 .status-left {27 display: flex;28 align-items: center;29 gap: 26px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 18px;35 color: #666;36 }37 .status-right {38 display: flex;39 align-items: center;40 gap: 26px;41 color: #666;42 }43 .icon {44 width: 40px; height: 40px;45 }46 47 /* List */48 .list {49 position: absolute;50 top: 110px;51 left: 0;52 right: 0;53 bottom: 0;54 overflow: hidden;55 }56 .email {57 display: flex;58 align-items: flex-start;59 padding: 26px 34px;60 border-bottom: 1px solid #eee;61 }62 .avatar {63 width: 96px;64 height: 96px;65 border-radius: 50%;66 background: #C5E1A5;67 color: #1B5E20;68 display: flex;69 align-items: center;70 justify-content: center;71 font-weight: 700;72 font-size: 44px;73 flex: 0 0 96px;74 margin-right: 28px;75 }76 .avatar.yellow { background: #FFEB3B; color: #5D4037; }77 .avatar.orange { background: #FF7043; color: #fff; font-weight: 800; }78 .avatar.purple { background: #B39DDB; color: #fff; }79 .content {80 flex: 1;81 min-width: 0;82 }83 .row-top {84 display: flex;85 align-items: center;86 gap: 18px;87 }88 .sender {89 font-size: 40px;90 font-weight: 700;91 color: #222;92 flex: 1;93 white-space: nowrap;94 overflow: hidden;95 text-overflow: ellipsis;96 }97 .date {98 font-size: 32px;99 color: #757575;100 margin-right: 18px;101 }102 .star {103 width: 52px;104 height: 52px;105 }106 .subject {107 font-size: 38px;108 font-weight: 800;109 margin-top: 8px;110 color: #222;111 }112 .snippet {113 font-size: 32px;114 color: #666;115 margin-top: 8px;116 white-space: nowrap;117 overflow: hidden;118 text-overflow: ellipsis;119 }120 121 /* Floating compose */122 .compose {123 position: absolute;124 right: 40px;125 bottom: 180px;126 width: 170px;127 height: 170px;128 background: #B8E2C1;129 border-radius: 36px;130 box-shadow: 0 8px 22px rgba(0,0,0,0.15);131 display: flex;132 align-items: center;133 justify-content: center;134 }135 136 /* Gesture bar */137 .gesture {138 position: absolute;139 bottom: 36px;140 left: 50%;141 transform: translateX(-50%);142 width: 420px;143 height: 12px;144 background: #C7C7C7;145 border-radius: 8px;146 }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status Bar -->153 <div class="status-bar">154 <div class="status-left">155 <div class="time">11:28</div>156 <div class="status-icons">157 <!-- Simple globe -->158 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"></circle><path d="M4 12h16M12 4c3 2 3 14 0 16M12 4c-3 2-3 14 0 16" fill="none" stroke="#666" stroke-width="1.5"></path></svg>159 <!-- Phone icon -->160 <svg class="icon" viewBox="0 0 24 24"><rect x="6" y="3" width="12" height="18" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"></rect><rect x="10" y="17" width="4" height="2" fill="#666"></rect></svg>161 <!-- Cloud icon -->162 <svg class="icon" viewBox="0 0 24 24"><path d="M5 16a4 4 0 010-8 5 5 0 019-2 4 4 0 014 4 3 3 0 010 6H5z" fill="none" stroke="#666" stroke-width="2"></path></svg>163 </div>164 </div>165 <div class="status-right">166 <!-- WiFi -->167 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c1-1 3-1 4 0" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"></path><circle cx="12" cy="19" r="1.8" fill="#666"></circle></svg>168 <!-- Battery -->169 <svg class="icon" viewBox="0 0 26 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#666" stroke-width="2"></rect><rect x="4" y="8" width="12" height="8" fill="#666"></rect><rect x="20" y="9" width="4" height="6" rx="1" fill="#666"></rect></svg>170 </div>171 </div>172 173 <!-- List -->174 <div class="list">175 <!-- Email 1 -->176 <div class="email">177 <div class="avatar">C</div>178 <div class="content">179 <div class="row-top">180 <div class="sender">Cerebra Research</div>181 <div class="date">Jun 12</div>182 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#B0BEC5" stroke-width="2"></path></svg>183 </div>184 <div class="subject">Reminder App</div>185 <div class="snippet">==================== Reminder in 3 day...</div>186 </div>187 </div>188 189 <!-- Email 2 -->190 <div class="email">191 <div class="avatar yellow">G</div>192 <div class="content">193 <div class="row-top">194 <div class="sender">Google</div>195 <div class="date">Jun 8</div>196 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="#66BB6A"></path></svg>197 </div>198 <div class="subject">Security alert</div>199 <div class="snippet">A new sign‑in on Google Pixel 5a 5G dbwscr...</div>200 </div>201 </div>202 203 <!-- Email 3 -->204 <div class="email">205 <div class="avatar yellow">G</div>206 <div class="content">207 <div class="row-top">208 <div class="sender">Google</div>209 <div class="date">Jun 7</div>210 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#B0BEC5" stroke-width="2"></path></svg>211 </div>212 <div class="subject">Help strengthen the security of your Google...</div>213 <div class="snippet">Verify tapomoy.mukherjee@globallogic.com...</div>214 </div>215 </div>216 217 <!-- Email 4 -->218 <div class="email">219 <div class="avatar">M</div>220 <div class="content">221 <div class="row-top">222 <div class="sender">me, Mail 2</div>223 <div class="date">Jun 7</div>224 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#B0BEC5" stroke-width="2"></path></svg>225 </div>226 <div class="subject">hello</div>227 <div class="snippet">Address not found Your message wasn't deli...</div>228 </div>229 </div>230 231 <!-- Email 5 -->232 <div class="email">233 <div class="avatar orange">my</div>234 <div class="content">235 <div class="row-top">236 <div class="sender">MakeMyTrip</div>237 <div class="date">Jun 4</div>238 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#B0BEC5" stroke-width="2"></path></svg>239 </div>240 <div class="subject">Your Offer Expires Tomorrow!</div>241 <div class="snippet">Open & grab these great deals now. Downlo...</div>242 </div>243 </div>244 245 <!-- Email 6 -->246 <div class="email">247 <div class="avatar orange">my</div>248 <div class="content">249 <div class="row-top">250 <div class="sender">MakeMyTrip</div>251 <div class="date">Jun 3</div>252 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#B0BEC5" stroke-width="2"></path></svg>253 </div>254 <div class="subject">Have You Decided Yet?</div>255 <div class="snippet">Open to know more.. Download MakeMyTrip...</div>256 </div>257 </div>258 259 <!-- Email 7 -->260 <div class="email">261 <div class="avatar orange">my</div>262 <div class="content">263 <div class="row-top">264 <div class="sender">MakeMyTrip</div>265 <div class="date">Jun 2</div>266 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#B0BEC5" stroke-width="2"></path></svg>267 </div>268 <div class="subject">We've Increased Discounts, Just for You!</div>269 <div class="snippet">Open to know more.. Download MakeMyTrip...</div>270 </div>271 </div>272 273 <!-- Email 8 -->274 <div class="email">275 <div class="avatar purple">M</div>276 <div class="content">277 <div class="row-top">278 <div class="sender">MakeMyTrip</div>279 <div class="date">Jun 2</div>280 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#B0BEC5" stroke-width="2"></path></svg>281 </div>282 <div class="subject">You’ve Unlocked Two Benefits 😮</div>283 <div class="snippet">So, book your 1st trip on our app using code...</div>284 </div>285 </div>286 287 <!-- Email 9 -->288 <div class="email">289 <div class="avatar orange">my</div>290 <div class="content">291 <div class="row-top">292 <div class="sender">MakeMyTrip</div>293 <div class="date">Jun 1</div>294 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#B0BEC5" stroke-width="2"></path></svg>295 </div>296 <div class="subject">Your Monthly Bonus Has Arrived (for t...</div>297 <div class="snippet">Open to reveal. Grab this never‑seen‑bet...</div>298 </div>299 </div>300 </div>301 302 <!-- Floating compose button -->303 <div class="compose">304 <svg viewBox="0 0 24 24" width="72" height="72">305 <path d="M4 17l10-10 3 3-10 10H4v-3z" fill="#2E7D32"></path>306 <rect x="16" y="5" width="3" height="3" fill="#2E7D32"></rect>307 </svg>308 </div>309 310 <!-- Gesture bar -->311 <div class="gesture"></div>312 313</div>314</body>315</html>