GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Inbox UI 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; position: relative; overflow: hidden;9    background: #111315; color: #ECEFF1;10  }11 12  /* Status bar */13  .status-bar {14    position: absolute; top: 0; left: 0; width: 100%; height: 80px;15    background: #0d0f10; color: #ffffff; display: flex; align-items: center;16    padding: 0 24px; font-weight: 600; letter-spacing: 0.5px;17  }18  .status-time { font-size: 28px; }19  .status-icons { margin-left: auto; display: flex; gap: 18px; align-items: center; }20  .dot { width: 10px; height: 10px; background: #9fb1c5; border-radius: 50%; opacity: 0.8; }21  .battery {22    width: 36px; height: 18px; border: 2px solid #cfd8dc; border-radius: 3px; position: relative;23  }24  .battery::after {25    content: ""; position: absolute; right: -6px; top: 5px; width: 4px; height: 8px; background: #cfd8dc; border-radius: 1px;26  }27  .battery-level { width: 60%; height: 100%; background: #cfd8dc; }28 29  /* Search bar */30  .search-wrap {31    position: absolute; top: 96px; left: 24px; right: 24px; height: 110px;32    display: flex; align-items: center;33  }34  .search-bar {35    position: relative; width: 100%; height: 110px; border-radius: 55px;36    background: #252A2E; color: #CFD8DC; display: flex; align-items: center;37    padding-left: 96px; font-size: 36px;38    box-shadow: inset 0 0 0 1px #1f2225;39  }40  .hamburger {41    position: absolute; left: 32px; top: 50%; transform: translateY(-50%);42  }43  .search-text { opacity: 0.9; }44  .profile {45    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);46    width: 86px; height: 86px; border-radius: 43px; background: #3a4046;47    display: flex; align-items: center; justify-content: center; color: #E6EEF4; font-weight: 700; font-size: 40px;48    box-shadow: 0 0 0 3px #23272b inset;49  }50 51  /* Email list */52  .email-list { position: absolute; top: 230px; left: 0; right: 0; bottom: 150px; padding: 16px 0; overflow: hidden; }53  .email-item {54    display: grid; grid-template-columns: 120px 1fr 160px 90px;55    align-items: center; padding: 22px 24px; gap: 12px;56    border-bottom: 1px solid #1c1f22;57  }58  .avatar {59    width: 80px; height: 80px; border-radius: 40px; display: flex; align-items: center; justify-content: center;60    font-weight: 700; font-size: 34px; color: #111315;61  }62  .avatar.yellow { background: #F4B400; }63  .avatar.grey { background: #5a5f66; color: #E0E0E0; }64  .avatar.orange { background: #FBBC05; }65  .email-content { line-height: 1.35; }66  .sender { font-size: 36px; color: #ECEFF1; }67  .subject { font-size: 30px; color: #D0D5DA; margin-top: 6px; }68  .snippet { font-size: 28px; color: #9AA5AE; margin-top: 4px; }69  .date { font-size: 28px; color: #A7B1B9; text-align: right; align-self: start; }70  .star { display: flex; justify-content: center; }71  .star svg { width: 44px; height: 44px; }72  .star path { stroke: #909AA3; fill: none; stroke-width: 1.6; }73 74  /* Bottom actions */75  .bottom-bar {76    position: absolute; left: 0; right: 0; bottom: 0;77    height: 120px; background: #0e1113; display: flex; justify-content: space-around; align-items: center;78    box-shadow: 0 -1px 0 #1d2023;79  }80  .nav-btn { width: 140px; height: 72px; border-radius: 36px; background: #1e2226; display: flex; align-items: center; justify-content: center; }81  .nav-btn svg { width: 48px; height: 48px; fill: #C9D3DA; }82 83  /* Compose floating button */84  .compose-fab {85    position: absolute; right: 42px; bottom: 170px;86    width: 150px; height: 150px; border-radius: 36px; background: #1f3c40;87    display: flex; align-items: center; justify-content: center;88    box-shadow: 0 6px 18px rgba(0,0,0,0.5);89  }90  .compose-fab svg { width: 80px; height: 80px; stroke: #E6F7FB; stroke-width: 3; fill: none; }91 92  /* Undo toast */93  .toast {94    position: absolute; left: 24px; right: 24px; bottom: 140px;95    height: 110px; background: #1d2023; border-radius: 22px; display: flex; align-items: center;96    padding: 0 24px; color: #E5EBF0; font-size: 34px; box-shadow: 0 2px 0 #121416 inset;97  }98  .toast .spacer { flex: 1; }99  .undo { color: #A9D5FF; font-weight: 600; }100 101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status bar -->107  <div class="status-bar">108    <div class="status-time">9:03</div>109    <div class="status-icons">110      <div class="dot"></div>111      <div class="dot"></div>112      <div class="dot"></div>113      <svg width="26" height="26" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#cfd8dc" stroke-width="2"/></svg>114      <div class="battery"><div class="battery-level"></div></div>115    </div>116  </div>117 118  <!-- Search bar -->119  <div class="search-wrap">120    <div class="search-bar">121      <div class="hamburger">122        <svg width="44" height="44" viewBox="0 0 24 24">123          <path d="M3 6h18M3 12h18M3 18h12" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round"/>124        </svg>125      </div>126      <div class="search-text">Search in mail</div>127      <div class="profile">J</div>128    </div>129  </div>130 131  <!-- Email list -->132  <div class="email-list">133 134    <div class="email-item">135      <div class="avatar yellow">C</div>136      <div class="email-content">137        <div class="sender">Cerebra Research</div>138        <div class="subject">Wix, I use Wix for my blogs</div>139        <div class="snippet">Hello Jane I am using Wix for my blogs you...</div>140      </div>141      <div class="date">Aug 21</div>142      <div class="star">143        <svg viewBox="0 0 24 24">144          <path d="M12 17.3l-5.2 3 1-5.9-4.3-4.2 6-.9L12 3l2.5 6.3 6 .9-4.3 4.2 1 5.9z"/>145        </svg>146      </div>147    </div>148 149    <div class="email-item">150      <div class="avatar yellow">C</div>151      <div class="email-content">152        <div class="sender">Cerebra Research</div>153        <div class="subject">401k monthly</div>154        <div class="snippet">Monthly updates</div>155      </div>156      <div class="date">Aug 21</div>157      <div class="star">158        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.9-4.3-4.2 6-.9L12 3l2.5 6.3 6 .9-4.3 4.2 1 5.9z"/></svg>159      </div>160    </div>161 162    <div class="email-item">163      <div class="avatar grey">•</div>164      <div class="email-content">165        <div class="sender">Team Snapchat</div>166        <div class="subject">Welcome to Snapchat 🥳 Let's Get Started!</div>167        <div class="snippet">Welcome to Snapchat! Hi janecorbet, We wa...</div>168      </div>169      <div class="date">Aug 19</div>170      <div class="star">171        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.9-4.3-4.2 6-.9L12 3l2.5 6.3 6 .9-4.3 4.2 1 5.9z"/></svg>172      </div>173    </div>174 175    <div class="email-item">176      <div class="avatar grey">•</div>177      <div class="email-content">178        <div class="sender">Trulia</div>179        <div class="subject">Your Rental Search Just Got Easier!</div>180        <div class="snippet">Ready to find the perfect rental? Your next h...</div>181      </div>182      <div class="date">Aug 18</div>183      <div class="star">184        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.9-4.3-4.2 6-.9L12 3l2.5 6.3 6 .9-4.3 4.2 1 5.9z"/></svg>185      </div>186    </div>187 188    <div class="email-item">189      <div class="avatar grey">•</div>190      <div class="email-content">191        <div class="sender">Facebook</div>192        <div class="subject">Three ways to get the most from Facebook...</div>193        <div class="snippet">Thanks for signing up to Facebook mobile!...</div>194      </div>195      <div class="date">Aug 18</div>196      <div class="star">197        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.9-4.3-4.2 6-.9L12 3l2.5 6.3 6 .9-4.3 4.2 1 5.9z"/></svg>198      </div>199    </div>200 201    <div class="email-item">202      <div class="avatar grey">•</div>203      <div class="email-content">204        <div class="sender">Team Snapchat</div>205        <div class="subject">Confirm your email</div>206        <div class="snippet">Snap, Chat & Video Call your friends from y...</div>207      </div>208      <div class="date">Aug 18</div>209      <div class="star">210        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.9-4.3-4.2 6-.9L12 3l2.5 6.3 6 .9-4.3 4.2 1 5.9z"/></svg>211      </div>212    </div>213 214    <div class="email-item">215      <div class="avatar orange">G</div>216      <div class="email-content">217        <div class="sender">Google Community Team</div>218        <div class="subject">Jane-dbw-, take the next step by customizi...</div>219        <div class="snippet">Get started with your Google workspace tools...</div>220      </div>221      <div class="date">Aug 4</div>222      <div class="star">223        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.9-4.3-4.2 6-.9L12 3l2.5 6.3 6 .9-4.3 4.2 1 5.9z"/></svg>224      </div>225    </div>226 227  </div>228 229  <!-- Undo toast -->230  <div class="toast">231    <div>1 deleted</div>232    <div class="spacer"></div>233    <div class="undo">Undo</div>234  </div>235 236  <!-- Compose floating action button -->237  <div class="compose-fab">238    <svg viewBox="0 0 24 24">239      <path d="M4 20h12M6 14l8-8 4 4-8 8H6v-4z"/>240    </svg>241  </div>242 243  <!-- Bottom navigation bar -->244  <div class="bottom-bar">245    <div class="nav-btn">246      <svg viewBox="0 0 24 24">247        <path d="M2 7l10 6 10-6v10H2V7z"/>248      </svg>249    </div>250    <div class="nav-btn">251      <svg viewBox="0 0 24 24">252        <path d="M4 7h16l-3 10H7L4 7zm6-3h4v2h-4V4z"/>253      </svg>254    </div>255  </div>256 257</div>258</body>259</html>