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: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#e7efe6; /* soft pale background similar to screenshot */10 }11 12 /* Status bar */13 .status-bar {14 height:120px; padding:0 40px; display:flex; align-items:center; justify-content:space-between;15 color:#2c2c2c; font-size:40px;16 }17 .status-icons { display:flex; align-items:center; gap:22px; color:#616161; }18 .status-dot { width:24px; height:24px; background:#616161; border-radius:50%; }19 20 /* Top app bar */21 .top-bar {22 height:140px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;23 color:#1f1f1f;24 }25 .top-left, .top-right { display:flex; align-items:center; gap:36px; }26 .top-title { font-size:44px; font-weight:600; }27 28 /* Simple icon styles */29 svg { display:block; }30 .icon { width:64px; height:64px; }31 .icon.small { width:48px; height:48px; }32 33 /* List area */34 .list {35 position:absolute; left:0; right:0; top:260px; bottom:0;36 overflow:hidden;37 }38 .items { overflow-y:hidden; padding-bottom:180px; }39 .item {40 padding:34px 36px; border-bottom:1px solid #d9dfd3; position:relative;41 display:flex; gap:30px;42 }43 .item .avatar {44 width:96px; height:96px; border-radius:48px; background:#f1c35b; color:#fff;45 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:46px;46 flex-shrink:0;47 }48 .avatar.google { background:#f3d068; color:#7a5c00; }49 .avatar.me { background:#f0b26d; }50 .avatar.mmt { background:#d14b34; color:#fff; font-size:40px; }51 .avatar.purple { background:#b99be6; color:#fff; }52 53 .content { flex:1; }54 .line1 { display:flex; align-items:center; justify-content:space-between; }55 .sender { font-size:42px; font-weight:700; color:#1a1a1a; }56 .date { font-size:34px; color:#6b6b6b; }57 .subject { margin-top:12px; font-size:36px; font-weight:700; color:#151515; }58 .snippet { margin-top:10px; font-size:32px; color:#707070; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }59 60 .star { position:absolute; right:30px; top:50%; transform:translateY(-50%); }61 .star svg { width:56px; height:56px; }62 63 /* Selected item style */64 .item.selected {65 background:#cfe3c7; border-radius:36px; margin:18px 24px;66 }67 .selected .avatar {68 background:#2f6c39; color:#fff;69 }70 71 /* Floating compose */72 .compose {73 position:absolute; right:36px; bottom:150px;74 width:176px; height:176px; border-radius:40px; background:#bfd5bd;75 box-shadow:0 10px 20px rgba(0,0,0,0.15);76 display:flex; align-items:center; justify-content:center;77 }78 .gesture {79 position:absolute; left:50%; bottom:70px; transform:translateX(-50%);80 width:360px; height:16px; background:#808080; border-radius:8px; opacity:0.6;81 }82</style>83</head>84<body>85<div id="render-target">86 87 <!-- Status Bar -->88 <div class="status-bar">89 <div>11:29</div>90 <div class="status-icons">91 <div class="status-dot"></div>92 <div class="status-dot" style="width:30px;height:30px;border-radius:8px;"></div>93 <div class="status-dot" style="background:#9e9e9e;"></div>94 <div style="width:36px; height:22px; border:2px solid #616161; border-radius:4px; position:relative;">95 <div style="position:absolute; right:-10px; top:6px; width:6px; height:10px; background:#616161;"></div>96 </div>97 </div>98 </div>99 100 <!-- Top App Bar -->101 <div class="top-bar">102 <div class="top-left">103 <!-- back arrow -->104 <svg class="icon" viewBox="0 0 24 24">105 <path d="M15 6L9 12l6 6" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>106 </svg>107 <div class="top-title">1</div>108 </div>109 <div class="top-right">110 <!-- download icon -->111 <svg class="icon" viewBox="0 0 24 24">112 <path d="M12 3v10M7 8l5 5 5-5M5 20h14" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>113 </svg>114 <!-- delete/trash -->115 <svg class="icon" viewBox="0 0 24 24">116 <path d="M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>117 </svg>118 <!-- mail icon -->119 <svg class="icon" viewBox="0 0 24 24">120 <path d="M3 5h18v14H3zM3 5l9 7 9-7" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>121 </svg>122 <!-- more vert -->123 <svg class="icon" viewBox="0 0 24 24">124 <circle cx="12" cy="5" r="2" fill="#1f1f1f"/>125 <circle cx="12" cy="12" r="2" fill="#1f1f1f"/>126 <circle cx="12" cy="19" r="2" fill="#1f1f1f"/>127 </svg>128 </div>129 </div>130 131 <!-- Email List -->132 <div class="list">133 <div class="items">134 135 <!-- Google Security alert -->136 <div class="item">137 <div class="avatar google">G</div>138 <div class="content">139 <div class="line1">140 <div class="sender">Google</div>141 <div class="date">Jun 8</div>142 </div>143 <div class="subject">Security alert</div>144 <div class="snippet">A new sign-in on Google Pixel 5a 5G dbwscr...</div>145 </div>146 <div class="star">147 <svg viewBox="0 0 24 24">148 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 19l-6.2 3.1 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#5d7c4f" stroke-width="2"/>149 </svg>150 </div>151 </div>152 153 <!-- Google verify -->154 <div class="item">155 <div class="avatar google">G</div>156 <div class="content">157 <div class="line1">158 <div class="sender">Google</div>159 <div class="date">Jun 7</div>160 </div>161 <div class="subject">Help strengthen the security of your Google…</div>162 <div class="snippet">Verify tapomoy.mukherjee@globallogic.com…</div>163 </div>164 <div class="star">165 <svg viewBox="0 0 24 24">166 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 19l-6.2 3.1 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#8e8e8e" stroke-width="2"/>167 </svg>168 </div>169 </div>170 171 <!-- me, Mail - bounced -->172 <div class="item">173 <div class="avatar me">M</div>174 <div class="content">175 <div class="line1">176 <div class="sender">me, Mail 2</div>177 <div class="date">Jun 7</div>178 </div>179 <div class="subject">hello</div>180 <div class="snippet">Address not found Your message wasn't deli…</div>181 </div>182 <div class="star">183 <svg viewBox="0 0 24 24">184 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 19l-6.2 3.1 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#8e8e8e" stroke-width="2"/>185 </svg>186 </div>187 </div>188 189 <!-- MakeMyTrip selected -->190 <div class="item selected">191 <div class="avatar mmt">192 <!-- check icon inside green circle -->193 <svg class="icon small" viewBox="0 0 24 24">194 <circle cx="12" cy="12" r="12" fill="#2f6c39"/>195 <path d="M6 12l4 4 8-8" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>196 </svg>197 </div>198 <div class="content">199 <div class="line1">200 <div class="sender">MakeMyTrip</div>201 <div class="date">Jun 4</div>202 </div>203 <div class="subject">Your Offer Expires Tomorrow!</div>204 <div class="snippet">Open & grab these great deals now. Downlo…</div>205 </div>206 <div class="star">207 <svg viewBox="0 0 24 24">208 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 19l-6.2 3.1 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#8e8e8e" stroke-width="2"/>209 </svg>210 </div>211 </div>212 213 <!-- MakeMyTrip Have You Decided Yet? -->214 <div class="item">215 <div class="avatar mmt">my</div>216 <div class="content">217 <div class="line1">218 <div class="sender">MakeMyTrip</div>219 <div class="date">Jun 3</div>220 </div>221 <div class="subject">Have You Decided Yet?</div>222 <div class="snippet">Open to know more.. Download MakeMyTrip…</div>223 </div>224 <div class="star">225 <svg viewBox="0 0 24 24">226 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 19l-6.2 3.1 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#8e8e8e" stroke-width="2"/>227 </svg>228 </div>229 </div>230 231 <!-- MakeMyTrip discounts -->232 <div class="item">233 <div class="avatar mmt">my</div>234 <div class="content">235 <div class="line1">236 <div class="sender">MakeMyTrip</div>237 <div class="date">Jun 2</div>238 </div>239 <div class="subject">We've Increased Discounts, Just for You!</div>240 <div class="snippet">Open to know more.. Download MakeMyTrip…</div>241 </div>242 <div class="star">243 <svg viewBox="0 0 24 24">244 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 19l-6.2 3.1 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#8e8e8e" stroke-width="2"/>245 </svg>246 </div>247 </div>248 249 <!-- MakeMyTrip unlocked benefits -->250 <div class="item">251 <div class="avatar purple">M</div>252 <div class="content">253 <div class="line1">254 <div class="sender">MakeMyTrip</div>255 <div class="date">Jun 2</div>256 </div>257 <div class="subject">You’ve Unlocked Two Benefits 😮</div>258 <div class="snippet">So, book your 1st trip on our app using code…</div>259 </div>260 <div class="star">261 <svg viewBox="0 0 24 24">262 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 19l-6.2 3.1 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#8e8e8e" stroke-width="2"/>263 </svg>264 </div>265 </div>266 267 <!-- MakeMyTrip monthly bonus -->268 <div class="item">269 <div class="avatar mmt">my</div>270 <div class="content">271 <div class="line1">272 <div class="sender">MakeMyTrip</div>273 <div class="date">Jun 1</div>274 </div>275 <div class="subject">Your Monthly Bonus Has Arrived (for t…)</div>276 <div class="snippet">Open to reveal. Grab this never-seen-bet…</div>277 </div>278 <div class="star">279 <svg viewBox="0 0 24 24">280 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 19l-6.2 3.1 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#8e8e8e" stroke-width="2"/>281 </svg>282 </div>283 </div>284 285 </div>286 </div>287 288 <!-- Floating compose button -->289 <div class="compose">290 <svg viewBox="0 0 24 24" class="icon">291 <path d="M4 20h10M14 4l6 6-8 8H6V12l8-8z" fill="none" stroke="#2f6c39" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>292 </svg>293 </div>294 295 <!-- Gesture bar -->296 <div class="gesture"></div>297 298</div>299</body>300</html>