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>Kitchen Stories Email UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #231a14; /* deep brown */15    color: #e8dfd6;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #efe6dc;27    font-weight: 600;28    font-size: 40px;29    letter-spacing: 0.5px;30    opacity: 0.95;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .icon {38    width: 48px; height: 48px;39    fill: none; stroke: #efe6dc; stroke-width: 3;40  }41 42  /* Gmail header actions */43  .mail-header {44    padding: 26px 36px 24px 36px;45    display: flex;46    align-items: center;47    gap: 24px;48    color: #e8dfd6;49  }50  .header-left {51    display: flex; align-items: center; gap: 18px;52  }53  .header-actions {54    margin-left: auto;55    display: flex; align-items: center; gap: 34px;56  }57  .header-icon {58    width: 56px; height: 56px;59    stroke: #e8dfd6; stroke-width: 3; fill: none;60    opacity: 0.9;61  }62 63  /* Title row */64  .title-row {65    padding: 8px 36px 0 96px;66    display: flex; align-items: center;67    gap: 20px;68  }69  .title-row h1 {70    margin: 0;71    font-size: 70px;72    font-weight: 700;73    color: #efe6dc;74    letter-spacing: 0.2px;75  }76  .pill {77    background: #454a54;78    color: #d6dbe6;79    font-size: 36px;80    padding: 8px 18px;81    border-radius: 16px;82  }83  .star {84    margin-left: auto;85    width: 54px; height: 54px;86    stroke: #e8dfd6; fill: none; stroke-width: 3;87    opacity: 0.9;88  }89 90  /* Sender row */91  .sender-row {92    padding: 38px 36px 18px 36px;93    display: flex; align-items: center;94    gap: 26px;95  }96  .avatar {97    width: 110px; height: 110px; border-radius: 50%;98    background: #8c8f95;99    display: flex; align-items: center; justify-content: center;100    color: #231a14; font-weight: 700;101  }102  .sender-info {103    flex: 1;104  }105  .sender-top {106    display: flex; align-items: baseline; gap: 18px;107  }108  .sender-name {109    font-size: 44px; font-weight: 700; color: #efe6dc;110  }111  .sender-time {112    font-size: 36px; color: #c7bdb2;113  }114  .sender-meta {115    font-size: 34px; color: #c7bdb2; margin-top: 6px;116  }117  .reply-area {118    display: flex; align-items: center; gap: 26px;119  }120  .reply-icon { width: 52px; height: 52px; stroke: #e8dfd6; fill: none; stroke-width: 3; }121 122  /* Email content card */123  .content-card {124    margin: 40px 36px 0 36px;125    background: #2c211a;126    border-radius: 12px;127    padding: 80px 60px 120px 60px;128    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);129  }130  .brand {131    text-align: center;132    font-size: 64px;133    color: #121212;134    opacity: 0.9;135    letter-spacing: 1px;136    margin-bottom: 40px;137  }138  .img-placeholder {139    width: 820px; height: 360px;140    margin: 0 auto 60px auto;141    background: #E0E0E0;142    border: 1px solid #BDBDBD;143    display: flex; align-items: center; justify-content: center;144    color: #757575; font-size: 32px;145    border-radius: 8px;146  }147  .hero-title {148    text-align: center;149    font-size: 72px;150    font-weight: 800;151    color: #e9e6e2;152    line-height: 1.15;153    margin: 0 40px 30px 40px;154  }155  .hero-sub {156    text-align: center;157    font-size: 40px;158    color: #d5ccc2;159    line-height: 1.6;160    margin: 0 60px;161  }162 163  /* Bottom controls hint */164  .bottom-bar {165    position: absolute; bottom: 42px; left: 0; right: 0;166    display: flex; justify-content: center; align-items: center;167  }168  .home-handle {169    width: 320px; height: 14px; border-radius: 7px; background: #e9e6e2; opacity: 0.9;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status bar -->177  <div class="status-bar">178    <div>8:38</div>179    <div class="status-icons">180      <!-- Cast/Media -->181      <svg class="icon" viewBox="0 0 24 24">182        <path d="M3 5h18v14H3z"></path>183        <path d="M3 17c2 0 4 2 4 4"></path>184      </svg>185      <!-- Do Not Disturb (moon) -->186      <svg class="icon" viewBox="0 0 24 24">187        <path d="M12 3a9 9 0 0 0 0 18c-3-1-6-4-6-9s3-8 6-9z"></path>188      </svg>189      <!-- Cloud -->190      <svg class="icon" viewBox="0 0 24 24">191        <path d="M6 15h11a4 4 0 0 0 0-8 6 6 0 0 0-11 2"></path>192      </svg>193      <!-- WiFi -->194      <svg class="icon" viewBox="0 0 24 24">195        <path d="M2 9c9-6 11-6 20 0"></path>196        <path d="M5 12c6-4 8-4 14 0"></path>197        <path d="M8 15c3-2 5-2 8 0"></path>198        <circle cx="12" cy="18" r="1.5" fill="#efe6dc" stroke="none"></circle>199      </svg>200      <!-- Battery -->201      <svg class="icon" viewBox="0 0 24 24">202        <rect x="2" y="6" width="18" height="12" rx="2"></rect>203        <rect x="20" y="10" width="2" height="4"></rect>204        <rect x="4" y="8" width="12" height="8" fill="#efe6dc" stroke="none"></rect>205      </svg>206    </div>207  </div>208 209  <!-- Mail header row -->210  <div class="mail-header">211    <div class="header-left">212      <svg class="header-icon" viewBox="0 0 24 24">213        <path d="M14 6l-6 6 6 6"></path>214      </svg>215    </div>216    <div class="header-actions">217      <!-- Download -->218      <svg class="header-icon" viewBox="0 0 24 24">219        <path d="M12 4v9"></path>220        <path d="M8 9l4 4 4-4"></path>221        <path d="M4 20h16"></path>222      </svg>223      <!-- Trash -->224      <svg class="header-icon" viewBox="0 0 24 24">225        <path d="M4 7h16"></path>226        <path d="M7 7l1 12h8l1-12"></path>227        <path d="M9 7V5h6v2"></path>228      </svg>229      <!-- Envelope -->230      <svg class="header-icon" viewBox="0 0 24 24">231        <rect x="3" y="5" width="18" height="14" rx="2"></rect>232        <path d="M3 7l9 6 9-6"></path>233      </svg>234      <!-- More (vertical) -->235      <svg class="header-icon" viewBox="0 0 24 24">236        <circle cx="12" cy="5" r="1.6"></circle>237        <circle cx="12" cy="12" r="1.6"></circle>238        <circle cx="12" cy="19" r="1.6"></circle>239      </svg>240    </div>241  </div>242 243  <!-- Title row -->244  <div class="title-row">245    <h1>Welcome to Kitchen Stories!</h1>246    <div class="pill">Inbox</div>247    <svg class="star" viewBox="0 0 24 24">248      <path d="M12 3l3 6 6 1-4.5 4 1 7-5.5-3-5.5 3 1-7L3 10l6-1z"></path>249    </svg>250  </div>251 252  <!-- Sender row -->253  <div class="sender-row">254    <div class="avatar">255      <svg width="64" height="64" viewBox="0 0 24 24">256        <circle cx="12" cy="8" r="4" fill="#dcdfe3"></circle>257        <path d="M4 20c1-4 5-6 8-6s7 2 8 6" fill="#dcdfe3"></path>258      </svg>259    </div>260    <div class="sender-info">261      <div class="sender-top">262        <div class="sender-name">Kitchen Stories</div>263        <div class="sender-time">2 days ago</div>264      </div>265      <div class="sender-meta">to me ▾</div>266    </div>267    <div class="reply-area">268      <svg class="reply-icon" viewBox="0 0 24 24">269        <path d="M10 8l-6 4 6 4v-3h6a4 4 0 0 0 4-4"></path>270      </svg>271      <svg class="reply-icon" viewBox="0 0 24 24">272        <circle cx="12" cy="12" r="1.5"></circle>273        <circle cx="12" cy="5" r="1.5"></circle>274        <circle cx="12" cy="19" r="1.5"></circle>275      </svg>276    </div>277  </div>278 279  <!-- Email content -->280  <div class="content-card">281    <div class="brand">kitchen stories</div>282 283    <div class="img-placeholder">[IMG: Illustration - Bowl on smartphone with leaves]</div>284 285    <div class="hero-title">286      Thank you for<br>287      joining the<br>288      Kitchen Stories<br>289      family!290    </div>291    <div class="hero-sub">292      You have successfully created an account<br>293      at Kitchen Stories.294    </div>295  </div>296 297  <!-- Bottom gesture handle -->298  <div class="bottom-bar">299    <div class="home-handle"></div>300  </div>301</div>302</body>303</html>