GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Gmail Inbox Mock</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;9 position:relative; overflow:hidden;10 background:#121212; color:#fff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:96px; background:#1a1a1a;17 display:flex; align-items:center;18 padding:0 28px; font-weight:600; font-size:36px;19 }20 .status-left {21 display:flex; align-items:center; gap:22px;22 }23 .status-icons {24 display:flex; align-items:center; gap:20px; margin-left:18px;25 }26 .dot-icon {27 width:26px; height:26px; border-radius:50%; background:#e0e0e0; opacity:0.85;28 }29 .status-right {30 margin-left:auto; display:flex; align-items:center; gap:24px;31 font-size:28px; color:#cfcfcf;32 }33 .wifi-icon, .battery-icon {34 width:44px; height:28px;35 }36 37 /* Inbox list */38 .list {39 position:absolute; top:96px; left:0; right:0; bottom:210px;40 overflow:hidden;41 }42 .email-item {43 display:flex; align-items:flex-start;44 padding:36px 120px 30px 30px;45 border-bottom:1px solid #1e1e1e;46 }47 .avatar {48 width:96px; height:96px; border-radius:50%;49 flex:0 0 96px;50 display:flex; align-items:center; justify-content:center;51 font-weight:bold; color:#1b1b1b; font-size:42px;52 }53 .avatar.yellow { background:#f4c33b; }54 .avatar.gray { background:#3a3a3a; color:#9e9e9e; }55 .content {56 margin-left:28px; flex:1;57 }58 .row-top {59 display:flex; align-items:flex-start;60 }61 .subject {62 font-size:40px; line-height:44px; font-weight:700; color:#f5f5f5;63 flex:1;64 }65 .date {66 font-size:28px; color:#bdbdbd; margin-left:20px;67 }68 .preview {69 margin-top:10px; font-size:32px; color:#b3b3b3;70 }71 .star {72 position:absolute; right:36px; top:40px; width:56px; height:56px;73 display:flex; align-items:center; justify-content:center;74 }75 .star svg { width:46px; height:46px; stroke:#bdbdbd; fill:none; stroke-width:3; }76 77 /* Bottom navigation */78 .bottom-bar {79 position:absolute; left:0; right:0; bottom:0;80 height:170px; background:#171717; border-top:1px solid #222;81 display:flex; align-items:center; justify-content:center; gap:220px;82 }83 .nav-btn {84 width:180px; height:90px; border-radius:45px;85 background:#2c6766; display:flex; align-items:center; justify-content:center;86 }87 .nav-btn.gray { background:#2a2a2a; }88 .nav-btn svg { width:72px; height:72px; fill:#d0eceb; }89 .nav-btn.gray svg { fill:#cfcfcf; }90 91 /* Floating compose */92 .fab {93 position:absolute; right:36px; bottom:190px;94 width:160px; height:160px; border-radius:36px;95 background:#2c6766; display:flex; align-items:center; justify-content:center;96 box-shadow:0 8px 20px rgba(0,0,0,0.5);97 }98 .fab svg { width:90px; height:90px; stroke:#fff; stroke-width:6; fill:none; }99 100 /* Home indicator */101 .home-indicator {102 position:absolute; bottom:46px; left:50%; transform:translateX(-50%);103 width:620px; height:16px; background:#ffffff; border-radius:10px; opacity:0.85;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status bar -->111 <div class="status-bar">112 <div class="status-left">113 <div>9:03</div>114 <div class="status-icons">115 <div class="dot-icon"></div>116 <div class="dot-icon"></div>117 <div class="dot-icon"></div>118 <div class="dot-icon"></div>119 </div>120 </div>121 <div class="status-right">122 <!-- simple wifi -->123 <svg class="wifi-icon" viewBox="0 0 24 24">124 <path d="M2 8c5-4 15-4 20 0" stroke="#cfcfcf" stroke-width="2" fill="none"/>125 <path d="M5 12c3-3 11-3 14 0" stroke="#cfcfcf" stroke-width="2" fill="none"/>126 <path d="M9 16c2-2 4-2 6 0" stroke="#cfcfcf" stroke-width="2" fill="none"/>127 <circle cx="12" cy="19.5" r="1.5" fill="#cfcfcf"/>128 </svg>129 <!-- simple battery -->130 <svg class="battery-icon" viewBox="0 0 26 14">131 <rect x="1" y="2" width="20" height="10" rx="2" ry="2" stroke="#cfcfcf" fill="none" stroke-width="2"/>132 <rect x="3" y="4" width="14" height="6" fill="#cfcfcf"/>133 <rect x="22" y="5" width="3" height="4" fill="#cfcfcf"/>134 </svg>135 </div>136 </div>137 138 <!-- Inbox list -->139 <div class="list">140 141 <div class="email-item">142 <div class="avatar yellow">C</div>143 <div class="content">144 <div class="row-top">145 <div class="subject">Cerebra Research</div>146 <div class="date">Aug 21</div>147 </div>148 <div class="preview">401k monthly</div>149 <div class="preview">Monthly updates</div>150 </div>151 <div class="star">152 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 18.8 5.6 21.6l1.2-7.1-5.1-5 7.1-1L12 2z"/></svg>153 </div>154 </div>155 156 <div class="email-item">157 <div class="avatar gray">👤</div>158 <div class="content">159 <div class="row-top">160 <div class="subject">Team Snapchat</div>161 <div class="date">Aug 19</div>162 </div>163 <div class="preview">Welcome to Snapchat 👻 Let's Get Started!</div>164 <div class="preview">Welcome to Snapchat! Hi janecorbet, We wa...</div>165 </div>166 <div class="star">167 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 18.8 5.6 21.6l1.2-7.1-5.1-5 7.1-1L12 2z"/></svg>168 </div>169 </div>170 171 <div class="email-item">172 <div class="avatar gray">👤</div>173 <div class="content">174 <div class="row-top">175 <div class="subject">Trulia</div>176 <div class="date">Aug 18</div>177 </div>178 <div class="preview">Your Rental Search Just Got Easier!</div>179 <div class="preview">Ready to find the perfect rental? Your next h...</div>180 </div>181 <div class="star">182 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 18.8 5.6 21.6l1.2-7.1-5.1-5 7.1-1L12 2z"/></svg>183 </div>184 </div>185 186 <div class="email-item">187 <div class="avatar gray">👤</div>188 <div class="content">189 <div class="row-top">190 <div class="subject">Facebook</div>191 <div class="date">Aug 18</div>192 </div>193 <div class="preview">Three ways to get the most from Facebook...</div>194 <div class="preview">Thanks for signing up to Facebook mobile!...</div>195 </div>196 <div class="star">197 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 18.8 5.6 21.6l1.2-7.1-5.1-5 7.1-1L12 2z"/></svg>198 </div>199 </div>200 201 <div class="email-item">202 <div class="avatar gray">👤</div>203 <div class="content">204 <div class="row-top">205 <div class="subject">Facebook</div>206 <div class="date">Aug 18</div>207 </div>208 <div class="preview">62651 is your Facebook confirmation code</div>209 <div class="preview">Hi, Someone tried to create a Facebook acc...</div>210 </div>211 <div class="star">212 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 18.8 5.6 21.6l1.2-7.1-5.1-5 7.1-1L12 2z"/></svg>213 </div>214 </div>215 216 <div class="email-item">217 <div class="avatar gray">👤</div>218 <div class="content">219 <div class="row-top">220 <div class="subject">Team Snapchat</div>221 <div class="date">Aug 18</div>222 </div>223 <div class="preview">Confirm your email</div>224 <div class="preview">Snap, Chat & Video Call your friends from y...</div>225 </div>226 <div class="star">227 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 18.8 5.6 21.6l1.2-7.1-5.1-5 7.1-1L12 2z"/></svg>228 </div>229 </div>230 231 <div class="email-item">232 <div class="avatar yellow">G</div>233 <div class="content">234 <div class="row-top">235 <div class="subject">Google Community Team</div>236 <div class="date">Aug 4</div>237 </div>238 <div class="preview">Jane-dbw-, take the next step by customizi...</div>239 <div class="preview">Access your account features and services. ...</div>240 </div>241 <div class="star">242 <svg viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 18.8 5.6 21.6l1.2-7.1-5.1-5 7.1-1L12 2z"/></svg>243 </div>244 </div>245 246 </div>247 248 <!-- Floating compose button -->249 <div class="fab">250 <svg viewBox="0 0 24 24">251 <path d="M3 17v4h4l12-12-4-4L3 17z" fill="none" stroke="#fff" stroke-width="2"/>252 <path d="M14 4l4 4" stroke="#fff" stroke-width="2"/>253 </svg>254 </div>255 256 <!-- Bottom navigation bar -->257 <div class="bottom-bar">258 <div class="nav-btn">259 <!-- Envelope icon -->260 <svg viewBox="0 0 24 24">261 <path d="M3 5h18v14H3z" fill="none" stroke="#d0eceb" stroke-width="2"/>262 <path d="M3 6l9 7 9-7" fill="none" stroke="#d0eceb" stroke-width="2"/>263 </svg>264 </div>265 <div class="nav-btn gray">266 <!-- Camera/Meet icon -->267 <svg viewBox="0 0 24 24">268 <rect x="3" y="6" width="12" height="12" rx="2" fill="#cfcfcf"/>269 <polygon points="16,9 22,12 16,15" fill="#cfcfcf"/>270 </svg>271 </div>272 </div>273 274 <div class="home-indicator"></div>275</div>276</body>277</html>