GD-ML/AndroidCode

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:Roboto, Arial, sans-serif;color:#222;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#e8eee5;10  }11  /* Status bar */12  .status-bar{13    position:absolute;top:0;left:0;width:100%;height:90px;14    display:flex;align-items:center;justify-content:space-between;15    padding:0 36px;color:#333;font-size:38px;16  }17  .status-right{display:flex;gap:26px;align-items:center;}18  .icon-signal,.icon-battery{width:40px;height:40px;background:#666;border-radius:6px;}19  /* Action bar */20  .action-bar{21    position:absolute;top:90px;left:0;width:100%;height:120px;22    display:flex;align-items:center;justify-content:space-between;23    padding:0 28px;border-bottom:1px solid #d6dbd2;24  }25  .ab-left{display:flex;align-items:center;gap:36px;}26  .ab-right{display:flex;align-items:center;gap:40px;}27  .ab-count{font-size:46px;font-weight:500;}28  .ab-icon svg{width:62px;height:62px;fill:#333;}29  /* List area */30  .list{31    position:absolute;top:210px;left:0;right:0;bottom:0;32    padding:0 26px;33  }34  .row{35    display:flex;align-items:flex-start;gap:28px;36    padding:26px 16px;border-bottom:1px solid #eceeee;position:relative;37  }38  .avatar{39    width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;40    font-weight:700;color:#fff;font-size:42px;flex-shrink:0;41  }42  .avatar.yellow{background:#f0c13b;}43  .avatar.orange{background:#d5522c;}44  .avatar.purple{background:#b496ff;}45  .avatar.green{background:#4b8b4b;color:#fff;}46  .content{flex:1;min-width:0;}47  .title{font-size:46px;font-weight:700;margin-bottom:6px;}48  .subtitle{font-size:38px;color:#333;margin-bottom:4px;}49  .snippet{font-size:34px;color:#6b6f73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}50  .meta{position:absolute;right:24px;top:40px;display:flex;align-items:center;gap:26px;}51  .date{font-size:34px;color:#555;}52  .star svg{width:52px;height:52px;stroke:#6b6f73;fill:none;stroke-width:3px;}53  .star.filled svg{fill:#8aa83d;stroke:#8aa83d;}54  /* Selected row styling */55  .selected{56    background:#d7ead2;border-radius:26px;border:1px solid #c7dbbf;margin:20px 0;padding:26px 16px;57  }58  .check-wrap{59    width:92px;height:92px;border-radius:50%;background:#447a44;display:flex;align-items:center;justify-content:center;flex-shrink:0;60  }61  .check-wrap svg{width:52px;height:52px;stroke:#fff;stroke-width:10px;fill:none;}62  /* Floating compose button */63  .fab{64    position:absolute;right:36px;bottom:320px;width:160px;height:160px;border-radius:80px;65    background:#dfe9d9;box-shadow:0 8px 20px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;66  }67  .fab svg{width:80px;height:80px;stroke:#1f3a1f;fill:none;stroke-width:16px;}68  /* Snackbar */69  .snackbar{70    position:absolute;left:26px;right:26px;bottom:120px;height:120px;border-radius:22px;background:#1e1e1e;color:#fff;71    display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:40px;72  }73  .undo{color:#74c36a;font-weight:600;}74</style>75</head>76<body>77<div id="render-target">78 79  <!-- Status Bar -->80  <div class="status-bar">81    <div>11:29</div>82    <div class="status-right">83      <div class="icon-signal" title="signal"></div>84      <div class="icon-signal" title="wifi"></div>85      <div class="icon-battery" title="battery"></div>86    </div>87  </div>88 89  <!-- Action Bar -->90  <div class="action-bar">91    <div class="ab-left">92      <div class="ab-icon">93        <svg viewBox="0 0 24 24"><path d="M15 4 L5 12 L15 20" stroke="#333" stroke-width="3" fill="none"/></svg>94      </div>95      <div class="ab-count">1</div>96    </div>97    <div class="ab-right">98      <div class="ab-icon" title="archive">99        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="6" rx="2"></rect><rect x="3" y="10" width="18" height="10" rx="2"></rect><path d="M9 13 L12 16 L15 13" stroke="#333" stroke-width="2" fill="none"/></svg>100      </div>101      <div class="ab-icon" title="delete">102        <svg viewBox="0 0 24 24"><rect x="6" y="7" width="12" height="14" rx="1"></rect><rect x="9" y="4" width="6" height="3"></rect></svg>103      </div>104      <div class="ab-icon" title="mail">105        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect><path d="M3 7 L12 13 L21 7" stroke="#333" stroke-width="2" fill="none"/></svg>106      </div>107      <div class="ab-icon" title="more">108        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>109      </div>110    </div>111  </div>112 113  <!-- List -->114  <div class="list">115 116    <!-- Row 1 -->117    <div class="row">118      <div class="avatar yellow">G</div>119      <div class="content">120        <div class="title">Google</div>121        <div class="subtitle">Security alert</div>122        <div class="snippet">A new sign‑in on Google Pixel 5a 5G dbwscr...</div>123      </div>124      <div class="meta">125        <div class="date">Jun 8</div>126        <div class="star filled">127          <svg viewBox="0 0 24 24"><path d="M12 3 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>128        </div>129      </div>130    </div>131 132    <!-- Row 2 -->133    <div class="row">134      <div class="avatar yellow">G</div>135      <div class="content">136        <div class="title">Google</div>137        <div class="subtitle">Help strengthen the security of your Google…</div>138        <div class="snippet">Verify tapomoy.mukherjee@globallogic.com…</div>139      </div>140      <div class="meta">141        <div class="date">Jun 7</div>142        <div class="star">143          <svg viewBox="0 0 24 24"><path d="M12 3 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>144        </div>145      </div>146    </div>147 148    <!-- Row 3 -->149    <div class="row">150      <div class="avatar yellow">M</div>151      <div class="content">152        <div class="title">me, Mail 2</div>153        <div class="subtitle">hello</div>154        <div class="snippet">Address not found Your message wasn't deli…</div>155      </div>156      <div class="meta">157        <div class="date">Jun 7</div>158        <div class="star">159          <svg viewBox="0 0 24 24"><path d="M12 3 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>160        </div>161      </div>162    </div>163 164    <!-- Selected Row -->165    <div class="row selected">166      <div class="check-wrap">167        <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 7"/></svg>168      </div>169      <div class="content">170        <div class="title">MakeMyTrip</div>171        <div class="subtitle">Your Offer Expires Tomorrow!</div>172        <div class="snippet">Open & grab these great deals now. Downlo…</div>173      </div>174      <div class="meta">175        <div class="date">Jun 4</div>176        <div class="star">177          <svg viewBox="0 0 24 24"><path d="M12 3 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>178        </div>179      </div>180    </div>181 182    <!-- Row 5 -->183    <div class="row">184      <div class="avatar orange">m</div>185      <div class="content">186        <div class="title">MakeMyTrip</div>187        <div class="subtitle">Have You Decided Yet?</div>188        <div class="snippet">Open to know more.. Download MakeMyTrip…</div>189      </div>190      <div class="meta">191        <div class="date">Jun 3</div>192        <div class="star">193          <svg viewBox="0 0 24 24"><path d="M12 3 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>194        </div>195      </div>196    </div>197 198    <!-- Row 6 -->199    <div class="row">200      <div class="avatar orange">m</div>201      <div class="content">202        <div class="title">MakeMyTrip</div>203        <div class="subtitle">We've Increased Discounts, Just for You!</div>204        <div class="snippet">Open to know more.. Download MakeMyTrip…</div>205      </div>206      <div class="meta">207        <div class="date">Jun 2</div>208        <div class="star">209          <svg viewBox="0 0 24 24"><path d="M12 3 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>210        </div>211      </div>212    </div>213 214    <!-- Row 7 -->215    <div class="row">216      <div class="avatar purple">M</div>217      <div class="content">218        <div class="title">MakeMyTrip</div>219        <div class="subtitle">You’ve Unlocked Two Benefits 😮</div>220        <div class="snippet">So, book your 1st trip on our app using cod…</div>221      </div>222      <div class="meta">223        <div class="date">Jun 2</div>224        <div class="star">225          <svg viewBox="0 0 24 24"><path d="M12 3 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>226        </div>227      </div>228    </div>229 230    <!-- Extra row preview -->231    <div class="row">232      <div class="avatar orange">m</div>233      <div class="content">234        <div class="title">MakeMyTrip</div>235        <div class="subtitle">Your Monthly Rewards Await</div>236        <div class="snippet">Start planning your next getaway with exciti…</div>237      </div>238      <div class="meta">239        <div class="date">Jun 1</div>240        <div class="star">241          <svg viewBox="0 0 24 24"><path d="M12 3 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>242        </div>243      </div>244    </div>245 246  </div>247 248  <!-- Floating compose button -->249  <div class="fab">250    <svg viewBox="0 0 24 24"><path d="M4 20 L4 16 L16 4 L20 8 L8 20 Z"/></svg>251  </div>252 253  <!-- Snackbar -->254  <div class="snackbar">255    <div>1 marked as read</div>256    <div class="undo">Undo</div>257  </div>258 259</div>260</body>261</html>