GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mail Inbox UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #212121;17 }18 19 /* Top bars */20 .status-bar {21 height: 110px;22 background: #2196F3;23 color: #fff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 box-sizing: border-box;29 font-size: 34px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 18px;35 }36 .sb-icon {37 width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;38 }39 40 .app-bar {41 height: 220px;42 background: #2196F3;43 color: #fff;44 display: flex;45 align-items: center;46 padding: 0 36px;47 box-sizing: border-box;48 }49 .menu-btn, .search-btn {50 width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; cursor: default;51 }52 .app-title {53 font-size: 54px;54 font-weight: 600;55 margin-left: 20px;56 display: inline-flex; align-items: center; gap: 12px;57 }58 .caret {59 width: 18px; height: 18px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #fff;60 margin-top: 8px;61 }62 63 /* List */64 .list {65 position: absolute;66 top: 330px;67 left: 0;68 right: 0;69 bottom: 0;70 overflow: hidden;71 }72 .scroller {73 height: 100%;74 overflow-y: auto;75 }76 .email {77 display: flex;78 padding: 36px 32px;79 border-bottom: 1px solid #ECECEC;80 box-sizing: border-box;81 }82 .avatar {83 width: 120px; height: 120px; border-radius: 60px;84 color: #fff; font-weight: 700; font-size: 60px;85 display: flex; align-items: center; justify-content: center;86 flex: 0 0 120px;87 }88 .avatar.yellow { background: #D6B634; }89 .avatar.orange { background: #F39B32; }90 .avatar.teal { background: #4DB6AC; }91 .avatar.blue { background: #42A5F5; }92 .avatar.deeporange { background: #F57C00; }93 94 .content { flex: 1; padding-left: 28px; }95 .row1 {96 display: flex; align-items: center; justify-content: space-between;97 }98 .sender-wrap { display: inline-flex; align-items: center; gap: 16px; min-width: 100px; }99 .dot {100 width: 20px; height: 20px; border-radius: 50%; background: #1E88E5;101 }102 .sender { font-size: 44px; font-weight: 700; }103 .time { font-size: 34px; color: #1E88E5; font-weight: 700; }104 105 .subject { margin-top: 8px; font-size: 38px; font-weight: 700; color: #212121; }106 .snippet {107 margin-top: 6px; font-size: 32px; color: #757575;108 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;109 }110 111 /* FAB */112 .fab {113 position: absolute;114 right: 64px;115 bottom: 220px;116 width: 160px; height: 160px;117 border-radius: 50%;118 background: #42A5F5;119 box-shadow: 0 10px 26px rgba(0,0,0,0.24);120 display: flex; align-items: center; justify-content: center;121 }122 123 /* Gesture bar */124 .gesture {125 position: absolute;126 bottom: 30px; left: 50%;127 width: 420px; height: 16px; border-radius: 10px;128 background: rgba(0,0,0,0.75);129 transform: translateX(-50%);130 }131</style>132</head>133<body>134<div id="render-target">135 <!-- Status Bar -->136 <div class="status-bar">137 <div>7:58</div>138 <div class="status-icons">139 <!-- Simple network icon -->140 <div class="sb-icon">141 <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="white" stroke-width="2">142 <path d="M2 18h20M6 14h12M10 10h4"/>143 </svg>144 </div>145 <!-- Battery -->146 <div class="sb-icon">147 <svg viewBox="0 0 28 14" width="40" height="24" fill="white">148 <rect x="1" y="1" width="22" height="12" rx="2" ry="2" stroke="white" stroke-width="2" fill="none"></rect>149 <rect x="3" y="3" width="18" height="8" fill="white"></rect>150 <rect x="23" y="4" width="3" height="6" fill="white"></rect>151 </svg>152 </div>153 <div>100%</div>154 </div>155 </div>156 157 <!-- App Bar -->158 <div class="app-bar">159 <div class="menu-btn">160 <svg viewBox="0 0 24 24" width="54" height="54" fill="#fff">161 <rect x="3" y="5" width="18" height="2"></rect>162 <rect x="3" y="11" width="18" height="2"></rect>163 <rect x="3" y="17" width="18" height="2"></rect>164 </svg>165 </div>166 <div class="app-title">Inbox <span class="caret"></span></div>167 <div style="flex:1"></div>168 <div class="search-btn">169 <svg viewBox="0 0 24 24" width="56" height="56" fill="#fff">170 <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"></circle>171 <rect x="16" y="16" width="6" height="2" transform="rotate(45 16 16)" fill="#fff"></rect>172 </svg>173 </div>174 </div>175 176 <!-- List -->177 <div class="list">178 <div class="scroller">179 <!-- Item 1 -->180 <div class="email">181 <div class="avatar yellow">W</div>182 <div class="content">183 <div class="row1">184 <div class="sender-wrap">185 <div class="dot"></div>186 <div class="sender">Webex</div>187 </div>188 <div class="time">04:16 AM</div>189 </div>190 <div class="subject">Let's schedule your first meeting!</div>191 <div class="snippet">Webex …</div>192 </div>193 </div>194 195 <!-- Item 2 -->196 <div class="email">197 <div class="avatar orange">G</div>198 <div class="content">199 <div class="row1">200 <div class="sender-wrap">201 <div class="dot"></div>202 <div class="sender">Google Accounts Team</div>203 </div>204 <div class="time">02:47 AM</div>205 </div>206 <div class="subject">Updating our Google Account inactivity policy</div>207 <div class="snippet">Google Account policy update Every day Google works …</div>208 </div>209 </div>210 211 <!-- Item 3 -->212 <div class="email">213 <div class="avatar teal">F</div>214 <div class="content">215 <div class="row1">216 <div class="sender-wrap">217 <div class="dot"></div>218 <div class="sender">Flipboard 10 For Today</div>219 </div>220 <div class="time">01:25 AM</div>221 </div>222 <div class="subject">Inside the world of 'reborn' doll lovers</div>223 <div class="snippet">Flipboard Plus, an interview with the late Ray Liotta …</div>224 </div>225 </div>226 227 <!-- Item 4 -->228 <div class="email">229 <div class="avatar deeporange">F</div>230 <div class="content">231 <div class="row1">232 <div class="sender-wrap">233 <div class="dot"></div>234 <div class="sender">Flipboard</div>235 </div>236 <div class="time">12:37 AM</div>237 </div>238 <div class="subject">Android users asked — and we listened!</div>239 <div class="snippet">Flipboard Now supporting Custom Tabs. Open Flipboar…</div>240 </div>241 </div>242 243 <!-- Item 5 -->244 <div class="email">245 <div class="avatar deeporange">F</div>246 <div class="content">247 <div class="row1">248 <div class="sender-wrap">249 <div class="dot"></div>250 <div class="sender">Flipboard</div>251 </div>252 <div class="time">Yesterday</div>253 </div>254 <div class="subject">What's new on Flipboard: Stories from U.S. Poli…</div>255 <div class="snippet">Flipboard A daily roundup of highlights from your Flipb…</div>256 </div>257 </div>258 259 <!-- Item 6 -->260 <div class="email">261 <div class="avatar blue">C</div>262 <div class="content">263 <div class="row1">264 <div class="sender-wrap">265 <div class="dot" style="opacity:.35;"></div>266 <div class="sender">Cerebra Dbw</div>267 </div>268 <div class="time">Yesterday</div>269 </div>270 <div class="subject">Re: Zoomba session</div>271 <div class="snippet">We will be available in the Zoomba session. Get Outloo…</div>272 </div>273 </div>274 275 <!-- Item 7 -->276 <div class="email">277 <div class="avatar orange">G</div>278 <div class="content">279 <div class="row1">280 <div class="sender-wrap">281 <div class="dot"></div>282 <div class="sender">Google</div>283 </div>284 <div class="time">Yesterday</div>285 </div>286 <div class="subject">Security alert</div>287 <div class="snippet">EasyMail - easy & fast email was granted access to yo…</div>288 </div>289 </div>290 291 <!-- Item 8 -->292 <div class="email">293 <div class="avatar orange">C</div>294 <div class="content">295 <div class="row1">296 <div class="sender-wrap">297 <div class="dot" style="opacity:.35;"></div>298 <div class="sender">Cerebra Research</div>299 </div>300 <div class="time">Yesterday</div>301 </div>302 <div class="subject">Business meeting with the Clients</div>303 <div class="snippet">We have a business meeting on August 30, 2023, so yo…</div>304 </div>305 </div>306 307 <!-- Item 9 -->308 <div class="email">309 <div class="avatar orange">C</div>310 <div class="content">311 <div class="row1">312 <div class="sender-wrap">313 <div class="dot"></div>314 <div class="sender">Cerebra Research</div>315 </div>316 <div class="time">Yesterday</div>317 </div>318 <div class="subject">M.O.M | Discussion on Multiple Judgments</div>319 <div class="snippet">Task Overlay should be not in this type of video as it is …</div>320 </div>321 </div>322 323 <div style="height: 260px"></div>324 </div>325 </div>326 327 <!-- Floating compose button -->328 <div class="fab" aria-label="Compose">329 <svg viewBox="0 0 24 24" width="80" height="80" fill="#fff">330 <path d="M3 17.25V21h3.75L19.81 7.94l-3.75-3.75L3 17.25z"></path>331 </svg>332 </div>333 334 <!-- Gesture bar -->335 <div class="gesture"></div>336</div>337</body>338</html>