GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #111316; color: #EDEDED;11  }12 13  /* Top status */14  .status-bar {15    height: 92px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;16    color: #cfcfcf;17  }18  .status-left { display: flex; align-items: center; gap: 16px; font-weight: 600; }19  .app-dot { width: 26px; height: 26px; background: #f06292; border-radius: 50%; }20  .status-right { display: flex; align-items: center; gap: 22px; }21  .icon { width: 28px; height: 28px; fill: #cfcfcf; }22 23  /* Ad pill */24  .ad-pill {25    margin: 18px auto 8px; width: 1000px; height: 160px;26    background: #2b2f34; border-radius: 80px; display: flex; align-items: center;27    padding: 0 24px; gap: 24px;28  }29  .ad-icon {30    width: 96px; height: 96px; border-radius: 50%;31    background: #ff6c8f; display: flex; align-items: center; justify-content: center; color: #1a1a1a; font-weight: 700;32  }33  .ad-banner {34    flex: 1; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;35    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 20px;36  }37  .ad-chevron {38    width: 64px; height: 64px; border-radius: 32px; background: #1f2328;39    display: flex; align-items: center; justify-content: center;40  }41 42  /* Section label */43  .section-label {44    margin: 14px 40px 0; font-size: 36px; color: #cfcfcf;45  }46 47  /* Email list */48  .email {49    position: relative; padding: 36px 40px; display: grid; grid-template-columns: 100px 1fr 200px; align-items: start;50    border-bottom: 1px solid #23272b;51  }52  .avatar {53    width: 96px; height: 96px; border-radius: 48px; display: flex; align-items: center; justify-content: center;54    font-weight: 700; font-size: 42px; color: #111316;55  }56  .avatar.yellow { background: #ffcc66; }57  .avatar.grey { background: #c9c9c9; color: #333; }58  .avatar.pink { background: #ff7aa2; color: #222; }59 60  .email-content { padding-left: 18px; }61  .sender { font-size: 40px; font-weight: 700; }62  .subject { font-size: 34px; margin-top: 6px; color: #e8e8e8; }63  .snippet { font-size: 30px; margin-top: 6px; color: #b7b7b7; }64  .meta { text-align: right; }65  .date { font-size: 30px; color: #bfbfbf; margin-top: 6px; }66  .star { margin-top: 18px; display: flex; justify-content: flex-end; }67  .star svg { width: 42px; height: 42px; fill: none; stroke: #bfbfbf; stroke-width: 2.5px; }68  .star.filled svg { fill: #5ea0ff; stroke: #5ea0ff; }69 70  .tag {71    display: inline-block; background: #263845; color: #a8d1ff; border: 1px solid #3a5164;72    padding: 8px 14px; border-radius: 24px; font-size: 26px; margin-top: 12px;73  }74 75  /* Compose FAB */76  .compose-fab {77    position: absolute; right: 40px; bottom: 240px;78    background: #3b4654; color: #fff; border-radius: 32px; padding: 28px 34px;79    display: flex; align-items: center; gap: 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.35);80  }81  .compose-fab .pencil { width: 40px; height: 40px; fill: #fff; }82 83  /* Bottom mini bar */84  .bottom-bar {85    position: absolute; left: 0; right: 0; bottom: 120px; display: flex; justify-content: space-between; padding: 0 60px;86    align-items: center;87  }88  .mail-bubble {89    background: #2a3138; color: #fff; border-radius: 48px; padding: 22px 30px; display: flex; align-items: center; gap: 16px;90  }91  .mail-bubble .count {92    background: #ef6c73; color: #fff; border-radius: 24px; padding: 6px 14px; font-weight: 700; font-size: 24px;93  }94  .mini-icon { width: 44px; height: 44px; fill: #cfcfcf; }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status bar -->101  <div class="status-bar">102    <div class="status-left">103      <div class="app-dot"></div>104      <div>Snapdeal</div>105    </div>106    <div class="status-right">107      <!-- simple wifi and battery icons -->108      <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/></svg>109      <svg class="icon" viewBox="0 0 24 24"><path d="M16 6h2l1 2h2a1 1 0 0 1 1 1v8a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V9a1 1 0 0 1 1-1h2l1-2h8z"/></svg>110    </div>111  </div>112 113  <!-- Ad pill -->114  <div class="ad-pill">115    <div class="ad-icon">S</div>116    <div class="ad-banner">[IMG: Festive Party Styles Ad Banner]</div>117    <div class="ad-chevron">118      <svg width="32" height="32" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M7 10l5 5 5-5z"/></svg>119    </div>120  </div>121 122  <!-- Section label -->123  <div class="section-label">Primary</div>124 125  <!-- Email items -->126  <div class="email">127    <div class="avatar yellow">N</div>128    <div class="email-content">129      <div class="sender">Natalie Larson</div>130      <div class="subject">You have to try this recipe I found...</div>131      <div class="snippet">Hi, I just found this great recipe using the fr...</div>132    </div>133    <div class="meta">134      <div class="date">Oct 5</div>135      <div class="star">136        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.8L3 9.8l5.9-.9L12 3.5l3.1 5.4 5.9.9-4 4.7 1 5.8z"/></svg>137      </div>138    </div>139  </div>140 141  <div class="email">142    <div class="avatar yellow">N</div>143    <div class="email-content">144      <div class="sender">Natalie Larson</div>145      <div class="subject">(no subject)</div>146      <div class="snippet">https://www.kitchenstories.com/en/recipes/f...</div>147    </div>148    <div class="meta">149      <div class="date">Oct 4</div>150      <div class="star">151        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.8L3 9.8l5.9-.9L12 3.5l3.1 5.4 5.9.9-4 4.7 1 5.8z"/></svg>152      </div>153    </div>154  </div>155 156  <div class="email">157    <div class="avatar yellow">N</div>158    <div class="email-content">159      <div class="sender">Natalie Larson</div>160      <div class="subject">(no subject)</div>161      <div class="snippet">I found this restaurant on TheFork, what do...</div>162    </div>163    <div class="meta">164      <div class="date">Oct 4</div>165      <div class="star">166        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.8L3 9.8l5.9-.9L12 3.5l3.1 5.4 5.9.9-4 4.7 1 5.8z"/></svg>167      </div>168    </div>169  </div>170 171  <div class="email">172    <div class="avatar yellow">N</div>173    <div class="email-content">174      <div class="sender">Natalie Larson</div>175      <div class="subject">Check out Hard Rock Cafe - Amsterdam on...</div>176      <div class="snippet">I think you'd like this restaurant I found on O...</div>177    </div>178    <div class="meta">179      <div class="date">Oct 4</div>180      <div class="star filled">181        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.8L3 9.8l5.9-.9L12 3.5l3.1 5.4 5.9.9-4 4.7 1 5.8z"/></svg>182      </div>183    </div>184  </div>185 186  <div class="email">187    <div class="avatar grey">P</div>188    <div class="email-content">189      <div class="sender">Pinta Libre</div>190      <div class="subject">Un amigo te invitó a pintear 🍻</div>191      <div class="snippet">Tu salida la armás vos</div>192    </div>193    <div class="meta">194      <div class="date">Oct 3</div>195      <div class="star">196        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.8L3 9.8l5.9-.9L12 3.5l3.1 5.4 5.9.9-4 4.7 1 5.8z"/></svg>197      </div>198    </div>199  </div>200 201  <div class="email">202    <div class="avatar pink">N</div>203    <div class="email-content">204      <div class="sender">Natalie Larson (via Google Drive)</div>205      <div class="subject">Item shared with you: "01. A Voyage to th..."</div>206      <div class="snippet">Natalie Larson shared an item Natalie Larso...</div>207      <div class="tag">01. A Voyage to ...</div>208    </div>209    <div class="meta">210      <div class="date">Oct 3</div>211      <div class="star">212        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.8L3 9.8l5.9-.9L12 3.5l3.1 5.4 5.9.9-4 4.7 1 5.8z"/></svg>213      </div>214    </div>215  </div>216 217  <div class="email">218    <div class="avatar yellow">N</div>219    <div class="email-content">220      <div class="sender">Natalie Larson</div>221      <div class="subject">(no subject)</div>222      <div class="snippet">https://www.ebav.com/itm/305159709874?m...</div>223    </div>224    <div class="meta">225      <div class="date">Sep 29</div>226      <div class="star">227        <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3 1-5.8L3 9.8l5.9-.9L12 3.5l3.1 5.4 5.9.9-4 4.7 1 5.8z"/></svg>228      </div>229    </div>230  </div>231 232  <!-- Compose button -->233  <div class="compose-fab">234    <svg class="pencil" viewBox="0 0 24 24"><path d="M3 17.2V21h3.8l11-11-3.8-3.8-11 11zM17.7 3.3l3 3-2.4 2.4-3-3 2.4-2.4z"/></svg>235    <div>Compose</div>236  </div>237 238  <!-- Bottom mini bar -->239  <div class="bottom-bar">240    <div class="mail-bubble">241      <svg class="mini-icon" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z"/></svg>242      <div class="count">17</div>243    </div>244    <svg class="mini-icon" viewBox="0 0 24 24"><path d="M4 7h16v10H4zM9 17V7m6 10V7"/></svg>245  </div>246 247</div>248</body>249</html>