GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Gmail Inbox - Dark</title>6<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">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:#121212; color:#fff;12 }13 14 /* Status bar */15 .status-bar{16 height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;17 color:#e8e8e8; font-size:34px; letter-spacing:1px;18 }19 .status-icons{ display:flex; gap:20px; align-items:center; opacity:.85; }20 .dot{ width:10px; height:10px; background:#e8e8e8; border-radius:50%; display:inline-block; }21 22 /* Search bar */23 .search-wrap{ padding:12px 24px 8px; }24 .search{25 height:120px; border-radius:60px; background:#263238; display:flex; align-items:center; padding:0 34px;26 box-sizing:border-box;27 }28 .hamburger{29 width:62px; height:62px; display:flex; align-items:center; justify-content:center; margin-right:24px;30 }31 .hamburger svg path{ fill:#cfd8dc; }32 .search input{33 flex:1; background:transparent; border:none; outline:none; color:#e0e0e0; font-size:40px;34 }35 .avatar{36 width:88px; height:88px; background:#546E7A; border-radius:50%; color:#e8f0f2; display:flex; align-items:center; justify-content:center;37 font-weight:700; font-size:42px; margin-left:20px;38 }39 40 /* Section label */41 .section-label{ padding:22px 34px 12px; color:#cfcfcf; font-size:34px; letter-spacing:.3px; }42 43 /* Email list */44 .list{ padding-bottom:220px; }45 .email-item{46 display:flex; padding:28px 30px; gap:26px; position:relative; border-bottom:1px solid rgba(255,255,255,0.05);47 }48 .email-avatar{49 width:96px; height:96px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;50 color:#111; font-weight:700; font-size:42px;51 }52 .email-content{ flex:1; min-width:0; }53 .row-top{54 display:flex; align-items:center; justify-content:space-between; margin-top:2px;55 }56 .sender{57 display:flex; align-items:center; gap:10px; font-weight:700; color:#eaeaea; font-size:40px;58 }59 .count{ color:#b0bec5; font-weight:700; font-size:34px; }60 .time{ color:#b0bec5; font-size:32px; }61 .subject{62 color:#e5e5e5; font-size:38px; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;63 }64 .snippet{65 color:#a8b0b6; font-size:32px; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;66 }67 .star{68 width:56px; height:56px; position:absolute; right:30px; top:86px; opacity:.85;69 }70 .chip{71 display:inline-block; background:#1f2a2e; color:#cfd8dc; padding:12px 22px; border:1px solid #3a4a4f;72 border-radius:40px; font-size:30px; margin-top:14px;73 }74 75 /* Bottom nav */76 .bottom-bar{77 position:absolute; left:0; right:0; bottom:0; height:140px; background:rgba(0,0,0,0.65);78 display:flex; align-items:center; justify-content:space-around; border-top:1px solid rgba(255,255,255,0.06);79 }80 .nav-btn{81 width:160px; height:90px; background:#223236; border-radius:48px; display:flex; align-items:center; justify-content:center;82 }83 .nav-btn svg path{ fill:#cfd8dc; }84 .nav-ico{ width:56px; height:56px; }85 86 /* Compose FAB */87 .compose{88 position:absolute; right:34px; bottom:170px; height:150px; padding:0 44px; background:#2b3f41; border-radius:80px;89 display:flex; align-items:center; gap:28px; box-shadow:0 8px 20px rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.08);90 }91 .compose .pen{92 width:58px; height:58px; border-radius:16px; background:transparent; display:flex; align-items:center; justify-content:center;93 }94 .compose span{ color:#d9e3e4; font-size:44px; font-weight:600; }95 96 /* Helper colors for avatars */97 .c-blue{ background:#90A4AE; }98 .c-yellow{ background:#FBC02D; }99 .c-grey{ background:#B0BEC5; }100 .c-white{ background:#eeeeee; color:#444; }101 .c-silver{ background:#9E9E9E; }102</style>103</head>104<body>105<div id="render-target">106 107 <!-- Status Bar -->108 <div class="status-bar">109 <div>9:02</div>110 <div class="status-icons">111 <span class="dot"></span>112 <span class="dot"></span>113 <span class="dot"></span>114 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#e8e8e8" d="M21 8v8a2 2 0 0 1-2 2H7l-4 4V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>115 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#e8e8e8" d="M12 4a8 8 0 0 0-8 8h2a6 6 0 0 1 12 0h2a8 8 0 0 0-8-8zm-1 9v5h2v-5h-2z"/></svg>116 </div>117 </div>118 119 <!-- Search -->120 <div class="search-wrap">121 <div class="search">122 <div class="hamburger">123 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>124 </div>125 <input type="text" placeholder="Search in mail">126 <div class="avatar">J</div>127 </div>128 </div>129 130 <!-- Section -->131 <div class="section-label">Primary</div>132 133 <!-- Email List -->134 <div class="list">135 136 <!-- Item 1 -->137 <div class="email-item">138 <div class="email-avatar c-blue">C</div>139 <div class="email-content">140 <div class="row-top">141 <div class="sender">me, Cole <span class="count">4</span></div>142 <div class="time">Sep 4</div>143 </div>144 <div class="subject">School Annual function</div>145 <div class="snippet">--------- Forwarded message --------- Fr…</div>146 </div>147 <div class="star">148 <svg viewBox="0 0 24 24"><path fill="#b0bec5" d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z" opacity=".35"/></svg>149 </div>150 </div>151 152 <!-- Item 2 -->153 <div class="email-item">154 <div class="email-avatar c-yellow">M</div>155 <div class="email-content">156 <div class="row-top">157 <div class="sender">Mail Delivery Subsystem</div>158 <div class="time">Sep 4</div>159 </div>160 <div class="subject">Delivery Status Notification (Failure)</div>161 <div class="snippet">Address not found Your message wasn't deli…</div>162 </div>163 <div class="star">164 <svg viewBox="0 0 24 24"><path fill="#b0bec5" d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z" opacity=".35"/></svg>165 </div>166 </div>167 168 <!-- Item 3 -->169 <div class="email-item">170 <div class="email-avatar c-grey">C</div>171 <div class="email-content">172 <div class="row-top">173 <div class="sender">me, Cole2 <span class="count">3</span></div>174 <div class="time">Sep 1</div>175 </div>176 <div class="subject">Please accept my request</div>177 <div class="snippet">Thanks a lot. On Fri, Sep 1, 2023, 12:30 PM C…</div>178 </div>179 <div class="star">180 <svg viewBox="0 0 24 24"><path fill="#b0bec5" d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z" opacity=".35"/></svg>181 </div>182 </div>183 184 <!-- Item 4 -->185 <div class="email-item">186 <div class="email-avatar c-yellow">M</div>187 <div class="email-content">188 <div class="row-top">189 <div class="sender">me, Mail <span class="count">2</span></div>190 <div class="time">Aug 30</div>191 </div>192 <div class="subject">(no subject)</div>193 <div class="snippet">Address not found Your message wasn't deli…</div>194 <div class="chip">Essay Business …</div>195 </div>196 <div class="star">197 <svg viewBox="0 0 24 24"><path fill="#b0bec5" d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z" opacity=".35"/></svg>198 </div>199 </div>200 201 <!-- Item 5 -->202 <div class="email-item">203 <div class="email-avatar c-white">v</div>204 <div class="email-content">205 <div class="row-top">206 <div class="sender">Vimeo <span class="count">2</span></div>207 <div class="time">Aug 28</div>208 </div>209 <div class="subject">Your video is now on Vimeo</div>210 <div class="snippet">Untitled is ready to watch Vimeo Untitled is…</div>211 </div>212 <div class="star">213 <svg viewBox="0 0 24 24"><path fill="#b0bec5" d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z" opacity=".35"/></svg>214 </div>215 </div>216 217 <!-- Item 6 -->218 <div class="email-item">219 <div class="email-avatar c-silver"></div>220 <div class="email-content">221 <div class="row-top">222 <div class="sender">Cerebra Research</div>223 <div class="time">Aug 21</div>224 </div>225 <div class="subject">Wix, I use wix for my blogs</div>226 <div class="snippet">Use wix in blogs</div>227 </div>228 <div class="star">229 <svg viewBox="0 0 24 24"><path fill="#b0bec5" d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z" opacity=".35"/></svg>230 </div>231 </div>232 233 <!-- Item 7 -->234 <div class="email-item">235 <div class="email-avatar c-silver"></div>236 <div class="email-content">237 <div class="row-top">238 <div class="sender">Cerebra Research</div>239 <div class="time">Aug 21</div>240 </div>241 <div class="subject">401k monthly</div>242 <div class="snippet">401k monthly data</div>243 </div>244 <div class="star">245 <svg viewBox="0 0 24 24"><path fill="#b0bec5" d="M12 17.3l-6.18 3.7 1.64-7.03L2 9.24l7.19-.62L12 2l2.81 6.62 7.19.62-5.46 4.73 1.64 7.03z" opacity=".35"/></svg>246 </div>247 </div>248 249 </div>250 251 <!-- Compose Button -->252 <div class="compose">253 <div class="pen">254 <svg width="58" height="58" viewBox="0 0 24 24"><path fill="#d5e6e7" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>255 </div>256 <span>Compose</span>257 </div>258 259 <!-- Bottom Navigation -->260 <div class="bottom-bar">261 <div class="nav-btn">262 <svg class="nav-ico" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12l4-3h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/></svg>263 </div>264 <div style="width:160px;height:90px; display:flex;align-items:center;justify-content:center;">265 <svg class="nav-ico" viewBox="0 0 24 24"><path fill="#cfd8dc" d="M17 10.5V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4.5l4 4v-11l-4 4z"/></svg>266 </div>267 </div>268 269</div>270</body>271</html>