GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Search - Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#121212; color:#EAEAEA;12    border-radius:20px;13  }14  /* Status bar */15  .status-bar {16    height:90px; padding:0 36px;17    display:flex; align-items:center; justify-content:space-between;18    color:#eaeaea; font-weight:600; font-size:40px;19  }20  .status-icons { display:flex; gap:28px; align-items:center; }21  .dot { width:26px; height:26px; border-radius:50%; background:#eaeaea; opacity:.8; }22  .right-icons { display:flex; gap:28px; align-items:center; }23  .icon-small {24    width:36px; height:36px; border-radius:6px;25    background:#eaeaea22;26    display:flex; align-items:center; justify-content:center;27  }28  /* Search header */29  .search-wrap { padding:18px 24px 8px; }30  .search-bar {31    height:120px; background:#1E1E1E; border-radius:60px;32    display:flex; align-items:center; gap:24px; padding:0 32px;33    border:1px solid #2A2A2A;34  }35  .search-text { flex:1; font-size:40px; color:#f0f0f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }36  .circle-btn { width:72px; height:72px; border-radius:50%; background:#2A2A2A; display:flex; align-items:center; justify-content:center; }37  svg { fill:none; stroke:#EAEAEA; stroke-width:6px; }38  .close-btn svg { stroke-width:8px; }39  /* Filter chips */40  .chips { display:flex; gap:24px; padding:22px 24px; }41  .chip {42    background:#1E1E1E; border:1px solid #2A2A2A; color:#ddd;43    padding:22px 32px; border-radius:32px; font-size:36px;44    display:flex; align-items:center; gap:16px;45  }46  .chip svg { width:22px; height:22px; stroke:#bdbdbd; }47  /* Sections */48  .section-title { color:#cccccc; font-size:40px; padding:26px 36px 12px; }49  /* List items */50  .mail-item {51    display:flex; gap:28px; padding:28px 36px;52    border-bottom:1px solid #242424;53  }54  .avatar {55    width:94px; height:94px; border-radius:50%;56    background:#FFB74D; color:#3A2A00; font-weight:700; font-size:52px;57    display:flex; align-items:center; justify-content:center;58    flex-shrink:0;59  }60  .content { flex:1; }61  .line-top {62    display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;63  }64  .sender { font-size:40px; color:#eaeaea; }65  .count { color:#bdbdbd; margin-left:10px; font-size:36px; }66  .date { color:#bdbdbd; font-size:36px; }67  .subject { font-size:42px; color:#eaeaea; line-height:1.25; }68  .preview { font-size:38px; color:#bfbfbf; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }69  .highlight {70    background:#FFE082; color:#1b1b1b; padding:4px 6px; border-radius:6px;71  }72  .right-tools { display:flex; align-items:center; gap:20px; }73  .star svg { width:44px; height:44px; stroke:#bdbdbd; }74  .pill {75    border:1px solid #3a3a3a; color:#d9d9d9; background:#1e1e1e;76    padding:10px 18px; border-radius:24px; font-size:32px;77  }78  /* Attachment pill */79  .attach-pill {80    display:inline-flex; align-items:center; gap:14px;81    border:1px solid #3a3a3a; border-radius:38px; padding:14px 18px; margin-top:16px;82    font-size:34px; color:#d9d9d9;83  }84  .attach-pill .pdf {85    background:#d32f2f; color:#fff; border-radius:26px; padding:8px 14px; font-weight:700; font-size:30px;86  }87  /* Bottom nav */88  .bottom-bar {89    position:absolute; bottom:0; left:0; right:0;90    height:160px; background:#1A1A1A; border-top:1px solid #2A2A2A;91    display:flex; align-items:center; justify-content:center; gap:160px;92  }93  .nav-btn {94    width:160px; height:110px; background:#2A2A2A; border-radius:56px;95    display:flex; align-items:center; justify-content:center; position:relative;96  }97  .badge {98    position:absolute; top:-12px; right:-6px;99    background:#f48fb1; color:#fff; padding:10px 16px; border-radius:26px;100    font-size:34px; font-weight:700; border:3px solid #1A1A1A;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Top Status Bar -->108  <div class="status-bar">109    <div>8:19</div>110    <div class="status-icons">111      <div class="dot"></div>112      <div class="dot"></div>113      <div class="dot"></div>114      <div class="dot"></div>115      <div class="dot"></div>116    </div>117    <div class="right-icons">118      <div class="icon-small"></div>119      <div class="icon-small"></div>120    </div>121  </div>122 123  <!-- Search Bar -->124  <div class="search-wrap">125    <div class="search-bar">126      <div class="circle-btn">127        <svg viewBox="0 0 24 24">128          <path d="M15 5 L7 12 L15 19" />129        </svg>130      </div>131      <div class="search-text">International Education Week</div>132      <div class="circle-btn close-btn">133        <svg viewBox="0 0 24 24">134          <path d="M5 5 L19 19M19 5 L5 19" />135        </svg>136      </div>137    </div>138  </div>139 140  <!-- Filter Chips -->141  <div class="chips">142    <div class="chip">Labels143      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"/></svg>144    </div>145    <div class="chip">From146      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"/></svg>147    </div>148    <div class="chip">To149      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"/></svg>150    </div>151    <div class="chip">Attachment152      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"/></svg>153    </div>154  </div>155 156  <!-- Top Results -->157  <div class="section-title">Top results</div>158 159  <!-- Item 1 -->160  <div class="mail-item">161    <div class="avatar">M</div>162    <div class="content">163      <div class="line-top">164        <div class="sender">me <span class="count">2</span></div>165        <div class="right-tools">166          <div class="date">Oct 10</div>167          <div class="star">168            <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>169          </div>170        </div>171      </div>172      <div class="subject"><span class="highlight">International Education week</span></div>173      <div class="preview">Subject: <span class="highlight">International Education week</span>. To: ...</div>174    </div>175  </div>176 177  <!-- Item 2 -->178  <div class="mail-item">179    <div class="avatar">M</div>180    <div class="content">181      <div class="line-top">182        <div class="sender">me</div>183        <div class="right-tools">184          <div class="date">Sep 26</div>185          <div class="star">186            <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>187          </div>188        </div>189      </div>190      <div class="subject">Reminder App</div>191      <div class="preview">==================== Reminder in 23 ho...</div>192    </div>193  </div>194 195  <!-- Results in mail -->196  <div class="section-title">Results in mail</div>197 198  <!-- Item 3 -->199  <div class="mail-item">200    <div class="avatar">M</div>201    <div class="content">202      <div class="line-top">203        <div class="sender">me <span class="count">2</span></div>204        <div class="right-tools">205          <div class="date">Oct 10</div>206          <div class="star">207            <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>208          </div>209        </div>210      </div>211      <div class="subject"><span class="highlight">International Education week</span></div>212      <div class="preview">-- From: Amelia miller Date: Mon, Oct 9, 202...</div>213    </div>214  </div>215 216  <!-- Item 4 -->217  <div class="mail-item">218    <div class="avatar">N</div>219    <div class="content">220      <div class="line-top">221        <div class="sender">me, Natalie <span class="count">3</span></div>222        <div class="right-tools">223          <div class="date">Oct 10</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      <div class="subject">(no subject)</div>230      <div class="preview">231        <span class="pill">Inbox</span>232      </div>233    </div>234  </div>235 236  <!-- Item 5 -->237  <div class="mail-item">238    <div class="avatar">M</div>239    <div class="content">240      <div class="line-top">241        <div class="sender">me</div>242        <div class="right-tools">243          <div class="date">Sep 26</div>244          <div class="star">245            <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>246          </div>247        </div>248      </div>249      <div class="subject">Reminder App</div>250      <div class="preview">==================== Reminder in 23 ho...</div>251    </div>252  </div>253 254  <!-- Item 6 -->255  <div class="mail-item">256    <div class="avatar">N</div>257    <div class="content">258      <div class="line-top">259        <div class="sender">Natalie Larson</div>260        <div class="right-tools">261          <div class="date">Sep 26</div>262          <div class="star">263            <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>264          </div>265        </div>266      </div>267      <div class="subject">(no subject)</div>268      <div class="preview">(no body)</div>269      <div class="attach-pill">270        <span class="pdf">PDF</span>271        typhoon-mcm-o...272      </div>273      <div class="preview">274        <span class="pill">Inbox</span>275      </div>276    </div>277  </div>278 279  <!-- Bottom bar -->280  <div class="bottom-bar">281    <div class="nav-btn">282      <!-- simple envelope -->283      <svg viewBox="0 0 24 24" width="72" height="72" stroke="#eaeaea"><path d="M2 5 H22 V19 H2 Z M2 6 L12 13 L22 6"/></svg>284      <div class="badge">17</div>285    </div>286    <div class="nav-btn">287      <!-- video camera icon -->288      <svg viewBox="0 0 24 24" width="76" height="76" stroke="#eaeaea">289        <path d="M3 7 H14 V17 H3 Z" />290        <path d="M14 10 L21 7 V17 L14 14 Z" />291      </svg>292    </div>293  </div>294 295</div>296</body>297</html>