GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EDEDED;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #EDEDED; font-weight: 600; font-size: 40px;21  }22  .status-right { display: flex; align-items: center; gap: 22px; font-size: 32px; color: #BFBFBF; }23  .status-icon { width: 30px; height: 30px; border-radius: 50%; background: #3A3A3A; }24 25  /* Search header */26  .search-header {27    position: absolute; top: 120px; left: 30px; right: 30px;28    display: flex; align-items: center; gap: 24px;29  }30  .back-btn {31    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;32    border-radius: 45px; background: transparent;33  }34  .back-btn svg { width: 44px; height: 44px; }35  .search-pill {36    flex: 1; height: 110px; border-radius: 55px;37    background: #2E3A2C; /* olive/greenish dark */38    display: flex; align-items: center; justify-content: space-between;39    padding: 0 34px; color: #D8E0D0; font-size: 44px; font-weight: 600;40  }41  .search-text { letter-spacing: 0.2px; }42  .clear-btn svg { width: 36px; height: 36px; }43 44  /* Filter chips */45  .chips {46    position: absolute; top: 260px; left: 30px; right: 30px;47    display: flex; gap: 22px;48  }49  .chip {50    height: 88px; padding: 0 36px; border-radius: 44px;51    border: 1px solid #3A3A3A; background: #1B1B1B;52    display: inline-flex; align-items: center; gap: 18px;53    color: #CFCFCF; font-size: 34px; font-weight: 600;54  }55  .chip svg { width: 22px; height: 22px; fill: #8A8A8A; }56 57  /* Section heading */58  .section-label {59    position: absolute; top: 380px; left: 40px;60    font-size: 36px; color: #9E9E9E;61  }62 63  /* Email list */64  .email {65    position: relative;66    width: 1000px; margin-left: 40px;67    display: grid; grid-template-columns: 120px 1fr 80px;68    column-gap: 30px; align-items: center;69    padding: 32px 0; border-bottom: 1px solid transparent;70  }71  .email + .email { margin-top: 22px; }72  .avatar {73    width: 100px; height: 100px; border-radius: 50%;74    background: #E0E0E0; border: 1px solid #BDBDBD;75    display: flex; align-items: center; justify-content: center;76    color: #757575; font-size: 22px; text-align: center;77  }78  .email-content { display: grid; grid-template-rows: auto auto auto; row-gap: 10px; }79  .title-row {80    display: flex; align-items: baseline; justify-content: space-between;81  }82  .email-title {83    font-size: 42px; font-weight: 800; color: #F5F5F5;84  }85  .highlight {86    background: #FFE08A; color: #2B2B2B; padding: 6px 8px; border-radius: 6px; margin-right: 6px;87  }88  .time { font-size: 34px; color: #CFCFCF; }89  .subject { font-size: 36px; color: #EDEDED; font-weight: 700; }90  .snippet {91    font-size: 32px; color: #BDBDBD;92    display: flex; align-items: center; gap: 16px;93    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;94  }95  .label-pill {96    font-size: 28px; color: #CFCFCF;97    background: #222; border: 1px solid #444; border-radius: 16px;98    padding: 6px 14px;99  }100  .star-btn {101    display: flex; align-items: center; justify-content: center;102  }103  .star-btn svg { width: 46px; height: 46px; stroke: #CFCFCF; fill: none; stroke-width: 2.5; }104 105  /* Bottom bar */106  .bottom-bar {107    position: absolute; bottom: 120px; left: 0; right: 0;108    height: 160px; padding: 0 80px;109    display: flex; align-items: center; justify-content: space-between;110    color: #EDEDED;111  }112  .nav-pill {113    width: 260px; height: 100px; background: #314433; border-radius: 50px;114    display: flex; align-items: center; justify-content: center; position: relative;115  }116  .badge {117    position: absolute; top: -10px; right: 40px;118    background: #E6A1A1; color: #1B1B1B; font-weight: 700;119    width: 58px; height: 58px; border-radius: 29px;120    display: flex; align-items: center; justify-content: center; font-size: 34px; border: 2px solid #D38D8D;121  }122  .nav-icon svg { width: 42px; height: 42px; }123  .meet-icon { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; }124 125  /* Gesture bar */126  .gesture {127    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);128    width: 360px; height: 16px; background: #FFFFFF; border-radius: 8px; opacity: 0.85;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status bar -->136  <div class="status-bar">137    <div class="time">11:25</div>138    <div class="status-right">139      <div class="status-icon"></div>140      <div class="status-icon"></div>141      <div>100%</div>142      <svg width="48" height="28" viewBox="0 0 48 28">143        <rect x="2" y="4" width="38" height="20" rx="4" fill="none" stroke="#CFCFCF" stroke-width="2"/>144        <rect x="4" y="6" width="32" height="16" rx="3" fill="#CFCFCF"/>145        <rect x="42" y="10" width="4" height="8" rx="2" fill="#CFCFCF"/>146      </svg>147    </div>148  </div>149 150  <!-- Search header -->151  <div class="search-header">152    <div class="back-btn">153      <svg viewBox="0 0 24 24">154        <path d="M15 5 L6 12 L15 19" stroke="#EDEDED" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>155      </svg>156    </div>157    <div class="search-pill">158      <span class="search-text">Netalie Larson</span>159      <div class="clear-btn">160        <svg viewBox="0 0 24 24">161          <path d="M6 6 L18 18 M18 6 L6 18" stroke="#D8E0D0" stroke-width="2.5" stroke-linecap="round"/>162        </svg>163      </div>164    </div>165  </div>166 167  <!-- Filter chips -->168  <div class="chips">169    <div class="chip">170      <span>Labels</span>171      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" /></svg>172    </div>173    <div class="chip">174      <span>From</span>175      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" /></svg>176    </div>177    <div class="chip">178      <span>To</span>179      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" /></svg>180    </div>181    <div class="chip">182      <span>Attachment</span>183      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" /></svg>184    </div>185  </div>186 187  <!-- Section -->188  <div class="section-label">Results in mail</div>189 190  <!-- Email 1 -->191  <div class="email" style="top: 440px;">192    <div class="avatar">[IMG: Avatar]</div>193    <div class="email-content">194      <div class="title-row">195        <div class="email-title">196          <span class="highlight">Natalie</span><span class="highlight">Larson</span>197        </div>198        <div class="time">10:45 PM</div>199      </div>200      <div class="subject">Happiness</div>201      <div class="snippet">Hi, Karin How are you ? <span class="label-pill">Inbox</span></div>202    </div>203    <div class="star-btn">204      <svg viewBox="0 0 24 24">205        <path d="M12 2 L14.8 8.8 L22 9.2 L16.7 13.7 L18.6 21 L12 17.2 L5.4 21 L7.3 13.7 L2 9.2 L9.2 8.8 Z"/>206      </svg>207    </div>208  </div>209 210  <!-- Email 2 -->211  <div class="email" style="top: 480px;">212    <div class="avatar">[IMG: Avatar]</div>213    <div class="email-content">214      <div class="title-row">215        <div class="email-title">216          <span class="highlight">Natalie</span><span class="highlight">Larson</span>217        </div>218        <div class="time">5:38 PM</div>219      </div>220      <div class="subject">(no subject)</div>221      <div class="snippet">, Karin <span class="highlight">Natalie</span> this side , I want to sha... <span class="label-pill">Inbox</span></div>222    </div>223    <div class="star-btn">224      <svg viewBox="0 0 24 24">225        <path d="M12 2 L14.8 8.8 L22 9.2 L16.7 13.7 L18.6 21 L12 17.2 L5.4 21 L7.3 13.7 L2 9.2 L9.2 8.8 Z"/>226      </svg>227    </div>228  </div>229 230  <!-- Bottom navigation -->231  <div class="bottom-bar">232    <div class="nav-pill">233      <div class="nav-icon">234        <svg viewBox="0 0 24 24">235          <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#DDE7D3" stroke-width="2"/>236          <path d="M4 6 L12 12 L20 6" stroke="#DDE7D3" stroke-width="2" fill="none"/>237        </svg>238      </div>239      <div class="badge">8</div>240    </div>241    <div class="meet-icon">242      <svg viewBox="0 0 24 24">243        <rect x="3" y="6" width="14" height="12" rx="2" fill="none" stroke="#CFCFCF" stroke-width="2"/>244        <polygon points="17,9 22,12 17,15" fill="#CFCFCF"/>245      </svg>246    </div>247  </div>248 249  <!-- Gesture bar -->250  <div class="gesture"></div>251 252</div>253</body>254</html>