GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mail UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#121212; color:#fff;10 }11 12 /* Top purple app bar */13 .appbar { position:absolute; left:0; top:0; width:100%; height:260px; background:#5B42C2; }14 .status { height:110px; display:flex; align-items:center; padding:0 36px; color:#fff; font-size:32px; }15 .status .icons { margin-left:auto; display:flex; gap:26px; align-items:center; }16 .titlebar { height:150px; display:flex; align-items:center; padding:0 36px; color:#fff; }17 .title { font-size:56px; font-weight:700; margin-left:20px; }18 .titlebar .right { margin-left:auto; display:flex; gap:34px; align-items:center; }19 20 /* List container */21 .list { position:absolute; left:0; top:260px; width:100%; bottom:200px; overflow:hidden; }22 .email { display:flex; padding:34px 40px; border-bottom:1px solid rgba(255,255,255,0.06); background:#0e0e0e; position:relative; }23 .email.alt { background:#111111; }24 .email.highlight { background:#2e2e2e; }25 .left-dot { width:18px; height:18px; background:#3DA5FF; border-radius:50%; margin-right:26px; margin-top:10px; }26 .content { flex:1; }27 .top-row { display:flex; align-items:center; }28 .sender { font-size:42px; font-weight:800; }29 .subject { font-size:36px; font-weight:700; color:#ffffff; margin-top:10px; }30 .snippet { font-size:32px; color:#b9b9b9; margin-top:8px; }31 .time { position:absolute; right:40px; top:40px; color:#b9b9b9; font-size:30px; }32 33 /* Right side star icon */34 .star { margin-left:auto; width:48px; height:48px; }35 .star svg { width:48px; height:48px; fill:none; stroke:#cfcfcf; stroke-width:4; }36 37 /* Bottom nav */38 .bottom { position:absolute; left:0; right:0; bottom:0; height:200px; background:#1a1a1a; border-top:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:space-around; padding:0 30px; }39 .nav-icon { width:90px; height:90px; display:flex; align-items:center; justify-content:center; }40 .nav-icon svg { width:72px; height:72px; fill:none; stroke:#e0e0e0; stroke-width:4; }41 .compose { width:120px; height:120px; border-radius:26px; background:#2a2a2a; display:flex; align-items:center; justify-content:center; }42 .home-indicator { position:absolute; left:50%; transform:translateX(-50%); bottom:20px; width:500px; height:16px; background:#eaeaea; border-radius:10px; opacity:0.85; }43 44 /* Small utilities */45 .hamburger svg, .search svg, .wave svg { width:52px; height:52px; stroke:#fff; fill:none; stroke-width:6; }46</style>47</head>48<body>49<div id="render-target">50 51 <!-- Top App Bar -->52 <div class="appbar">53 <div class="status">54 <div>12:32</div>55 <div class="icons">56 <!-- simple status dots -->57 <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#fff"/></svg>58 <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#fff" opacity="0.7"/></svg>59 <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#fff" opacity="0.5"/></svg>60 <svg width="34" height="34"><rect x="6" y="6" width="22" height="22" fill="#fff"/></svg>61 <svg width="34" height="34"><polygon points="6,30 28,30 28,10 6,20" fill="#fff"/></svg>62 </div>63 </div>64 <div class="titlebar">65 <!-- Hamburger -->66 <div class="hamburger">67 <svg viewBox="0 0 24 24">68 <path d="M3 5h18M3 12h18M3 19h18"/>69 </svg>70 </div>71 <div class="title">All Mail</div>72 <div class="right">73 <!-- Wave/Activity icon -->74 <div class="wave">75 <svg viewBox="0 0 24 24">76 <path d="M2 12c3-6 5 6 8 0s5 6 12-2" />77 </svg>78 </div>79 <!-- Search -->80 <div class="search">81 <svg viewBox="0 0 24 24">82 <circle cx="11" cy="11" r="7"></circle>83 <path d="M21 21l-5.2-5.2"></path>84 </svg>85 </div>86 </div>87 </div>88 </div>89 90 <!-- Mail List -->91 <div class="list">92 93 <!-- Email 1 -->94 <div class="email alt">95 <div class="left-dot"></div>96 <div class="content">97 <div class="top-row">98 <div class="sender">Raghav Himatsingka</div>99 <div class="star">100 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"/></svg>101 </div>102 </div>103 <div class="subject">Secret 1 of Upcoming Masterclass For Your Child</div>104 <div class="snippet">Sneak Preview of your upcoming Masterclass!</div>105 </div>106 <div class="time">11m</div>107 </div>108 109 <!-- Email 2 -->110 <div class="email alt">111 <div class="left-dot" style="background:#0000;"></div>112 <div class="content">113 <div class="top-row">114 <div class="sender">Me & dbwscratch.test.id6</div>115 <div class="star">116 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"/></svg>117 </div>118 </div>119 <div class="subject">Re: Working from office</div>120 <div class="snippet">I Will come office from 1 sep 2023.</div>121 </div>122 <div class="time">1h</div>123 </div>124 125 <!-- Email 3 -->126 <div class="email alt">127 <div class="left-dot" style="background:#0000;"></div>128 <div class="content">129 <div class="top-row">130 <div class="sender">Me & Cerebra</div>131 <div class="star">132 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"/></svg>133 </div>134 </div>135 <div class="subject">OFFICIAL WEEKEND PARTY</div>136 <div class="snippet">Thanks a lot.</div>137 </div>138 <div class="time">2h</div>139 </div>140 141 <!-- Email 4 (highlight) -->142 <div class="email highlight">143 <div class="left-dot"></div>144 <div class="content">145 <div class="top-row">146 <div class="sender">Glow Nurture</div>147 <div class="star">148 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"/></svg>149 </div>150 </div>151 <div class="subject">Your baby on Day 302</div>152 </div>153 <div class="time">2h</div>154 </div>155 156 <!-- Email 5 -->157 <div class="email alt">158 <div class="left-dot" style="background:#0000;"></div>159 <div class="content">160 <div class="top-row">161 <div class="sender">Cerebra Research</div>162 <div class="star">163 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"/></svg>164 </div>165 </div>166 <div class="subject">Event organiser</div>167 <div class="snippet">Hello, I am organising a small event on 14th August...</div>168 </div>169 <div class="time">2h</div>170 </div>171 172 <!-- Email 6 -->173 <div class="email alt">174 <div class="left-dot" style="background:#0000;"></div>175 <div class="content">176 <div class="top-row">177 <div class="sender">Me to Cerebra</div>178 <div class="star">179 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"/></svg>180 </div>181 </div>182 <div class="subject">Business meeting with the Clients</div>183 <div class="snippet">We have a business meeting on August 30, 2023, s...</div>184 </div>185 <div class="time">2h</div>186 </div>187 188 <!-- Email 7 -->189 <div class="email alt">190 <div class="left-dot" style="background:#0000;"></div>191 <div class="content">192 <div class="top-row">193 <div class="sender">Google</div>194 <div class="star">195 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"/></svg>196 </div>197 </div>198 <div class="subject">Security alert</div>199 <div class="snippet">Newton by CloudMagic was granted access to your...</div>200 </div>201 <div class="time">4h</div>202 </div>203 204 <!-- Email 8 -->205 <div class="email alt">206 <div class="left-dot" style="background:#0000;"></div>207 <div class="content">208 <div class="top-row">209 <div class="sender">Webex</div>210 <div class="star">211 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"/></svg>212 </div>213 </div>214 <div class="subject">Limited Spots. Unlimited Potential.</div>215 </div>216 </div>217 218 </div>219 220 <!-- Bottom Navigation -->221 <div class="bottom">222 <div class="nav-icon">223 <!-- inbox tray -->224 <svg viewBox="0 0 24 24">225 <path d="M3 4h18v10h-6l-3 3-3-3H3z"></path>226 </svg>227 </div>228 <div class="nav-icon">229 <!-- star -->230 <svg viewBox="0 0 24 24">231 <path d="M12 3l3 6 6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9z"></path>232 </svg>233 </div>234 <div class="nav-icon">235 <!-- envelope -->236 <svg viewBox="0 0 24 24">237 <path d="M3 6h18v12H3z"></path>238 <path d="M3 7l9 6 9-6"></path>239 </svg>240 </div>241 <div class="nav-icon">242 <!-- people / group -->243 <svg viewBox="0 0 24 24">244 <circle cx="9" cy="9" r="4"></circle>245 <circle cx="17" cy="11" r="3"></circle>246 <path d="M3 21c2-5 10-5 12 0M12 20c2-3 7-3 9 0"></path>247 </svg>248 </div>249 <div class="compose">250 <!-- pencil -->251 <svg viewBox="0 0 24 24">252 <path d="M4 20l4-1 10-10-3-3L5 16l-1 4z"></path>253 <path d="M13 5l3 3"></path>254 </svg>255 </div>256 </div>257 258 <div class="home-indicator"></div>259 260</div>261</body>262</html>