GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Inbox UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #F6F5FA; /* light app background */12 color: #222;13 }14 .status-bar {15 position: absolute; top: 0; left: 0; right: 0;16 height: 110px; display: flex; align-items: center; justify-content: space-between;17 padding: 0 40px; font-size: 36px; color: #3A3A3A;18 }19 .status-icons { display: flex; align-items: center; gap: 14px; }20 .badge {21 font-size: 26px; color: #666; background: #E5E5EA; padding: 6px 12px; border-radius: 12px; border: 1px solid #D0D0D0;22 }23 .icon-small svg { width: 40px; height: 40px; fill: none; stroke: #62666C; stroke-width: 2.5px; }24 .battery { width: 52px; height: 28px; border: 3px solid #62666C; border-radius: 6px; position: relative; }25 .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #62666C; border-radius: 2px; }26 .battery .level { position: absolute; left: 3px; top: 3px; height: 20px; width: 28px; background: #62666C; border-radius: 3px; }27 /* Search area */28 .search-area { position: absolute; top: 120px; left: 0; right: 0; padding: 0 36px; height: 150px; }29 .search-pill {30 height: 96px; border-radius: 48px; background: #ECECF3;31 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;32 box-shadow: inset 0 0 0 1px #E0E0E8;33 }34 .search-pill .menu { margin-right: 24px; }35 .search-pill .menu svg { width: 48px; height: 48px; stroke: #666; }36 .search-text { font-size: 34px; color: #8B8D97; }37 .profile {38 position: absolute; right: 36px; top: 126px;39 width: 72px; height: 72px; border-radius: 50%;40 background: #6BC1B2; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 36px;41 box-shadow: 0 2px 0 rgba(0,0,0,0.06);42 }43 /* Section header and tip */44 .section-title { position: absolute; top: 290px; left: 40px; font-size: 30px; color: #8D8FA0; letter-spacing: 0.2px; }45 .tip-row {46 position: absolute; top: 340px; left: 40px; right: 40px; height: 90px;47 display: flex; align-items: center; justify-content: space-between; color: #5F6380;48 }49 .tip-left { display: flex; align-items: center; gap: 22px; }50 .tip-icon svg { width: 42px; height: 42px; stroke: #7E6BD7; fill: none; stroke-width: 3px; }51 .tip-text { font-size: 30px; color: #666A83; }52 .tip-dismiss { font-size: 30px; color: #5A6BD6; }53 /* Email list */54 .list { position: absolute; top: 430px; left: 0; right: 0; }55 .email-item {56 display: flex; padding: 28px 40px; border-bottom: 1px solid #E9E9EF; background: transparent;57 }58 .avatar {59 width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 26px;60 font-size: 40px; color: #fff; font-weight: bold;61 }62 .avatar.blue { background: #2E64D6; }63 .avatar.white { background: #fff; color: #333; border: 2px solid #E0E0E0; }64 .avatar.purple { background: #B776D9; }65 .email-content { flex: 1; }66 .row-top { display: flex; align-items: baseline; justify-content: space-between; }67 .sender { font-size: 34px; font-weight: 700; }68 .date { font-size: 28px; color: #878B99; margin-left: 10px; }69 .subject { font-size: 30px; font-weight: 700; margin-top: 6px; }70 .snippet { font-size: 28px; color: #7E8294; margin-top: 4px; }71 .right-controls { width: 120px; display: flex; align-items: flex-start; justify-content: flex-end; }72 .star svg { width: 44px; height: 44px; stroke: #9AA0AE; fill: none; stroke-width: 3px; }73 /* Attachment chip */74 .chip {75 display: inline-flex; align-items: center; gap: 10px;76 border: 2px solid #D8DAE2; border-radius: 26px; padding: 10px 16px; margin-top: 10px; color: #5D6172; font-size: 26px; background: #F7F7FB;77 }78 .chip .img-icon {79 width: 30px; height: 30px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 6px;80 display: inline-flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;81 }82 /* Floating compose */83 .compose {84 position: absolute; right: 40px; bottom: 300px;85 background: #E9E8F7; color: #2D2D3A; border-radius: 26px; padding: 26px 34px; display: flex; align-items: center; gap: 16px;86 box-shadow: 0 8px 24px rgba(0,0,0,0.12);87 font-size: 32px; font-weight: 600;88 }89 .compose svg { width: 40px; height: 40px; stroke: #2D2D3A; fill: none; stroke-width: 3px; }90 /* Bottom navigation */91 .bottom-bar {92 position: absolute; left: 0; right: 0; bottom: 0;93 height: 160px; background: #FFFFFF; border-top-left-radius: 22px; border-top-right-radius: 22px;94 box-shadow: 0 -2px 0 rgba(0,0,0,0.04);95 display: flex; align-items: center; justify-content: space-around;96 }97 .nav-btn { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #606778; }98 .nav-btn svg { width: 52px; height: 52px; stroke: #606778; fill: none; stroke-width: 3px; }99 .badge-mail {100 position: absolute; bottom: 120px; left: 180px;101 background: #ECEAF7; border-radius: 20px; padding: 12px 18px; display: flex; align-items: center; gap: 12px;102 box-shadow: 0 1px 0 rgba(0,0,0,0.08); color: #222;103 }104 .badge-mail .count {105 background: #D93025; color: #fff; font-size: 26px; border-radius: 16px; padding: 4px 10px; margin-left: 6px;106 }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Status bar -->113 <div class="status-bar">114 <div>2:47</div>115 <div class="status-icons">116 <div class="badge">ovo</div>117 <div class="badge">ebay</div>118 <div class="badge">YT</div>119 <div class="badge">YT</div>120 <div class="icon-small">121 <svg viewBox="0 0 24 24"><path d="M3 16c3-3 6-3 9 0s6 3 9 0"></path><circle cx="12" cy="10" r="3"></circle></svg>122 </div>123 <div class="battery"><div class="level"></div></div>124 </div>125 </div>126 127 <!-- Search area -->128 <div class="search-area">129 <div class="search-pill">130 <div class="menu">131 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"></path></svg>132 </div>133 <div class="search-text">Search in mail</div>134 </div>135 <div class="profile">C</div>136 </div>137 138 <div class="section-title">Primary</div>139 140 <div class="tip-row">141 <div class="tip-left">142 <div class="tip-icon">143 <svg viewBox="0 0 24 24"><path d="M8 12a4 4 0 0 1 0-6l3-3m5 5a4 4 0 0 1 0 6l-3 3"></path></svg>144 </div>145 <div class="tip-text">Tap a sender image to select that conversation.</div>146 </div>147 <div class="tip-dismiss">Dismiss</div>148 </div>149 150 <!-- Email list -->151 <div class="list">152 153 <!-- Booking.com -->154 <div class="email-item">155 <div class="avatar blue">B</div>156 <div class="email-content">157 <div class="row-top">158 <div class="sender">Booking.com</div>159 <div class="right-controls">160 <div class="date">10:04 AM</div>161 </div>162 </div>163 <div class="subject">Research, welcome to Booking.com!</div>164 <div class="snippet">Booking.com Research, welcome to Bookin...</div>165 </div>166 <div class="right-controls">167 <div class="star">168 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>169 </div>170 </div>171 </div>172 173 <!-- eBay -->174 <div class="email-item">175 <div class="avatar white" style="color:#3A8BFF; font-weight:700;">eBay</div>176 <div class="email-content">177 <div class="row-top">178 <div class="sender">eBay</div>179 <div class="right-controls">180 <div class="date">Jun 17</div>181 </div>182 </div>183 <div class="subject">Recently viewed: Samsung Galaxy S20...</div>184 <div class="snippet">Give it another look</div>185 </div>186 <div class="right-controls">187 <div class="star">188 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>189 </div>190 </div>191 </div>192 193 <!-- Cerebra Research -->194 <div class="email-item">195 <div class="avatar purple">C</div>196 <div class="email-content">197 <div class="row-top">198 <div class="sender">Cerebra Research</div>199 <div class="right-controls">200 <div class="date">Jun 16</div>201 </div>202 </div>203 <div class="subject">Weather&Radar - know your weather</div>204 <div class="snippet">Weather&Radar - know your weather https:/...</div>205 </div>206 <div class="right-controls">207 <div class="star">208 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>209 </div>210 </div>211 </div>212 213 <!-- Cerebra Research (no subject) -->214 <div class="email-item">215 <div class="avatar purple">C</div>216 <div class="email-content">217 <div class="row-top">218 <div class="sender">Cerebra Research</div>219 <div class="right-controls">220 <div class="date">Jun 16</div>221 </div>222 </div>223 <div class="subject">(no subject)</div>224 <div class="snippet">(no body)</div>225 <div class="chip">226 <div class="img-icon">IMG</div>227 <div>IMG_168689638...</div>228 </div>229 </div>230 <div class="right-controls">231 <div class="star">232 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>233 </div>234 </div>235 </div>236 237 <!-- Cerebra Research via Google Drive -->238 <div class="email-item">239 <div class="avatar purple">C</div>240 <div class="email-content">241 <div class="row-top">242 <div class="sender">Cerebra Research (via Google Dri...)</div>243 <div class="right-controls">244 <div class="date">Jun 15</div>245 </div>246 </div>247 <div class="subject">Folder shared with you: "Palm"</div>248 <div class="snippet">Cerebra Research shared a folder Cerebra R...</div>249 </div>250 <div class="right-controls">251 <div class="star">252 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>253 </div>254 </div>255 </div>256 257 <!-- Cerebra Research via Google Drive with attachment -->258 <div class="email-item">259 <div class="avatar purple">C</div>260 <div class="email-content">261 <div class="row-top">262 <div class="sender">Cerebra Research (via Google Dri...)</div>263 <div class="right-controls">264 <div class="date">Jun 15</div>265 </div>266 </div>267 <div class="subject">Item shared with you: "showcase..."</div>268 <div class="snippet">Cerebra Research shared an item...</div>269 <div class="chip">270 <div class="img-icon">DOC</div>271 <div>showcase_andr...</div>272 </div>273 </div>274 <div class="right-controls">275 <div class="star">276 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>277 </div>278 </div>279 </div>280 281 </div>282 283 <!-- Floating compose button -->284 <div class="compose">285 <svg viewBox="0 0 24 24"><path d="M3 21h18M5 17l9-9 4 4-9 9H5zM15 8l3 3"></path></svg>286 <div>Compose</div>287 </div>288 289 <!-- Bottom navigation -->290 <div class="bottom-bar">291 <div class="nav-btn">292 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M3 7l9 6 9-6"></path></svg>293 <div>Mail</div>294 </div>295 <div class="nav-btn">296 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="14" height="12" rx="2"></rect><polygon points="18,9 22,12 18,15" style="fill:none; stroke:#606778;"></polygon></svg>297 <div>Meet</div>298 </div>299 </div>300 301 <!-- Little mail badge above nav -->302 <div class="badge-mail">303 <svg viewBox="0 0 24 24" style="width:34px;height:34px;stroke:#606778;fill:none;stroke-width:3px;"><rect x="3" y="6" width="18" height="12" rx="2"></rect><path d="M3 7l9 6 9-6"></path></svg>304 <div class="count">11</div>305 </div>306 307</div>308</body>309</html>