GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mail Inbox Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #1b130e; color: #e8dccf;12 }13 /* Status bar */14 .status-bar {15 height: 96px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16 color: #e8dccf; font-size: 38px; letter-spacing: 0.5px;17 }18 .status-icons { display: flex; align-items: center; gap: 26px; opacity: 0.9; }19 .icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }20 /* Search */21 .search-area { padding: 18px 30px 12px; }22 .search-pill {23 background: #3a2a21; height: 110px; border-radius: 60px;24 display: flex; align-items: center; padding: 0 28px; color: #cdbfb3;25 }26 .search-text { margin-left: 16px; font-size: 40px; opacity: 0.9; }27 .avatar-n {28 margin-left: auto; width: 86px; height: 86px; border-radius: 50%;29 background: #0d7bd4; display: flex; align-items: center; justify-content: center;30 color: #fff; font-weight: 700; font-size: 44px; box-shadow: 0 0 0 6px rgba(0,0,0,0.2);31 }32 /* Section header */33 .section-header {34 display: flex; align-items: center; gap: 14px;35 padding: 28px 36px 6px; color: #d6c7b6; font-weight: 700; font-size: 42px;36 }37 /* Email list */38 .list { padding: 6px 18px 180px; }39 .item {40 display: grid; grid-template-columns: 116px 1fr 170px; column-gap: 24px;41 padding: 28px 18px; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05);42 }43 .thumb {44 width: 96px; height: 96px; border-radius: 50%;45 background: #E0E0E0; border: 1px solid #BDBDBD;46 color: #6d6d6d; font-size: 22px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; padding: 6px;47 }48 .content .top { display: flex; align-items: baseline; gap: 10px; }49 .sender { font-weight: 700; font-size: 40px; color: #fff0e0; }50 .count { font-size: 32px; opacity: 0.7; }51 .subject { font-weight: 700; font-size: 36px; color: #efe3d5; margin-top: 4px; }52 .snippet { font-size: 32px; color: #c5b7a8; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 880px; }53 .meta { text-align: right; }54 .date { font-size: 34px; color: #d4c6b6; }55 .star { margin-top: 16px; display: inline-flex; justify-content: flex-end; }56 .chip-row { display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap; }57 .chip {58 display: inline-flex; align-items: center; gap: 12px;59 padding: 14px 22px; border-radius: 30px;60 border: 2px solid rgba(255,255,255,0.18); color: #e6d9c9; font-size: 30px;61 background: rgba(255,255,255,0.06);62 }63 .chip .img {64 width: 34px; height: 26px; background: #E0E0E0; border: 1px solid #BDBDBD;65 display: inline-flex; align-items: center; justify-content: center; color: #6d6d6d; font-size: 18px;66 }67 /* Bottom nav */68 .bottom-bar {69 position: absolute; left: 0; right: 0; bottom: 0; height: 176px;70 background: #2a1c14; display: flex; align-items: center; justify-content: center; gap: 180px;71 border-top: 1px solid rgba(255,255,255,0.06);72 }73 .nav-pill {74 background: #4b372b; height: 92px; min-width: 140px; border-radius: 50px;75 display: flex; align-items: center; justify-content: center; position: relative;76 }77 .badge {78 position: absolute; top: -6px; right: -6px; width: 40px; height: 40px;79 background: #f3b4bd; border-radius: 50%; color: #5b4237; font-size: 26px; display: flex; align-items: center; justify-content: center; font-weight: 700;80 }81 .gesture {82 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);83 width: 260px; height: 10px; border-radius: 6px; background: #e9e9e9; opacity: 0.9;84 }85 /* Compose FAB */86 .compose {87 position: absolute; right: 48px; bottom: 240px;88 background: #6c5241; color: #fff7ee; border-radius: 28px; height: 120px; padding: 0 38px;89 display: inline-flex; align-items: center; gap: 18px; box-shadow: 0 12px 28px rgba(0,0,0,0.35);90 font-size: 40px; font-weight: 700;91 }92 .muted { color: #bbaea1; }93</style>94</head>95<body>96<div id="render-target">97 <!-- Status bar -->98 <div class="status-bar">99 <div>10:52</div>100 <div class="status-icons">101 <span class="icon">102 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e8dccf" xmlns="http://www.w3.org/2000/svg"><path d="M3 17h18v2H3zM3 11h18v2H3zM3 5h18v2H3z"/></svg>103 </span>104 <span class="icon">105 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e8dccf"><circle cx="12" cy="12" r="4"/></svg>106 </span>107 <span class="icon">108 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e8dccf"><path d="M5 19h14l-7-6z"/></svg>109 </span>110 <span class="icon">111 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e8dccf"><path d="M16 4h1a2 2 0 0 1 2 2v12h-2V6h-1zM6 8h8v12H6z"/></svg>112 </span>113 </div>114 </div>115 116 <!-- Search -->117 <div class="search-area">118 <div class="search-pill">119 <svg width="44" height="44" viewBox="0 0 24 24" fill="#cdbfb3" xmlns="http://www.w3.org/2000/svg"><path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h12v2H4z"/></svg>120 <div class="search-text">Search in mail</div>121 <div class="avatar-n">N</div>122 </div>123 </div>124 125 <!-- Section header -->126 <div class="section-header">127 <svg width="38" height="38" viewBox="0 0 24 24" fill="#42c27a" xmlns="http://www.w3.org/2000/svg"><path d="M20 10l-6 6H6l6-6h8zM4 8h16V4H4z"/></svg>128 <div>Primary</div>129 </div>130 131 <!-- Email list -->132 <div class="list">133 <!-- Promotions bucket -->134 <div class="item">135 <div class="thumb">[IMG: Tag]</div>136 <div class="content">137 <div class="sender">Promotions</div>138 <div class="snippet">eBay</div>139 </div>140 <div class="meta">141 <div class="date"></div>142 </div>143 </div>144 145 <!-- me, Mail -->146 <div class="item">147 <div class="thumb">[IMG: Avatar]</div>148 <div class="content">149 <div class="top"><div class="sender">me, Mail</div><div class="count" aria-label="conversation count">2</div></div>150 <div class="subject">All Recipes App</div>151 <div class="snippet">Address not found Your message wasn't deli…</div>152 </div>153 <div class="meta">154 <div class="date">Oct 12</div>155 <div class="star">156 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d9cbbd" stroke-width="2"><path d="M12 17l-5.5 3 1.5-6.2L3 8.9l6.3-.6L12 2l2.7 6.3 6.3.6-5 4.9 1.5 6.2z"/></svg>157 </div>158 </div>159 </div>160 161 <!-- eBay -->162 <div class="item">163 <div class="thumb">[IMG: eBay Logo]</div>164 <div class="content">165 <div class="sender">eBay</div>166 <div class="subject">Recently viewed: New Twin Tubs Washin…</div>167 <div class="snippet">Give it another look</div>168 </div>169 <div class="meta">170 <div class="date">Oct 12</div>171 <div class="star">172 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d9cbbd" stroke-width="2"><path d="M12 17l-5.5 3 1.5-6.2L3 8.9l6.3-.6L12 2l2.7 6.3 6.3.6-5 4.9 1.5 6.2z"/></svg>173 </div>174 </div>175 </div>176 177 <!-- Cerebra Research with attachments and starred -->178 <div class="item">179 <div class="thumb">[IMG: Avatar]</div>180 <div class="content">181 <div class="sender">Cerebra Research</div>182 <div class="subject muted">(no subject)</div>183 <div class="snippet muted">(no body)</div>184 <div class="chip-row">185 <div class="chip"><span class="img">IMG</span> Screenshot_…</div>186 <div class="chip"><span class="img">IMG</span> Screenshot_…</div>187 <div class="chip">+3</div>188 </div>189 </div>190 <div class="meta">191 <div class="date">Oct 6</div>192 <div class="star">193 <svg width="44" height="44" viewBox="0 0 24 24" fill="#f3b15a"><path d="M12 17l-6.2 3.6L7 13.5 2 9.1l6.9-.7L12 2l3.1 6.4 6.9.7-5 4.4 1.2 7.1z"/></svg>194 </div>195 </div>196 </div>197 198 <!-- me, Mail -->199 <div class="item">200 <div class="thumb">[IMG: Avatar]</div>201 <div class="content">202 <div class="top"><div class="sender">me, Mail</div><div class="count">2</div></div>203 <div class="subject">Check out Samsung Galaxy F54 5G (Stardus…</div>204 <div class="snippet">Address not found Your message wasn't deli…</div>205 </div>206 <div class="meta">207 <div class="date">Oct 5</div>208 <div class="star">209 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d9cbbd" stroke-width="2"><path d="M12 17l-5.5 3 1.5-6.2L3 8.9l6.3-.6L12 2l2.7 6.3 6.3.6-5 4.9 1.5 6.2z"/></svg>210 </div>211 </div>212 </div>213 214 <!-- me, Mail Travel plans -->215 <div class="item">216 <div class="thumb">[IMG: Avatar]</div>217 <div class="content">218 <div class="top"><div class="sender">me, Mail</div><div class="count">2</div></div>219 <div class="subject">Travel plans</div>220 <div class="snippet">Address not found Your message wasn't deli…</div>221 </div>222 <div class="meta">223 <div class="date">Sep 29</div>224 <div class="star">225 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d9cbbd" stroke-width="2"><path d="M12 17l-5.5 3 1.5-6.2L3 8.9l6.3-.6L12 2l2.7 6.3 6.3.6-5 4.9 1.5 6.2z"/></svg>226 </div>227 </div>228 </div>229 230 <!-- me, Mail Reminder App -->231 <div class="item">232 <div class="thumb">[IMG: Avatar]</div>233 <div class="content">234 <div class="top"><div class="sender">me, Mail</div><div class="count">2</div></div>235 <div class="subject">Reminder App</div>236 <div class="snippet">Address not found Your mes…</div>237 </div>238 <div class="meta">239 <div class="date">Sep 28</div>240 <div class="star">241 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#d9cbbd" stroke-width="2"><path d="M12 17l-5.5 3 1.5-6.2L3 8.9l6.3-.6L12 2l2.7 6.3 6.3.6-5 4.9 1.5 6.2z"/></svg>242 </div>243 </div>244 </div>245 </div>246 247 <!-- Compose button -->248 <div class="compose">249 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM21.41 6.34a1.25 1.25 0 0 0 0-1.77l-2-2a1.25 1.25 0 0 0-1.77 0l-1.83 1.83 3.75 3.75 1.85-1.81z"/></svg>250 Compose251 </div>252 253 <!-- Bottom navigation -->254 <div class="bottom-bar">255 <div class="nav-pill">256 <svg width="50" height="50" viewBox="0 0 24 24" fill="#e8dccf"><path d="M20 8l-8 5-8-5v10h16z"/><path d="M4 8l8 5 8-5V6H4z"/></svg>257 <div class="badge">1</div>258 </div>259 <div class="icon">260 <svg width="58" height="58" viewBox="0 0 24 24" fill="#e8dccf"><path d="M17 10.5V6a1 1 0 0 0-1-1H3v14h13a1 1 0 0 0 1-1v-4.5l4 3V7.5l-4 3z"/></svg>261 </div>262 </div>263 <div class="gesture"></div>264</div>265</body>266</html>