GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mail Inbox UI</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: #1B171F;12    color: #EEE9F3;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 20px; left: 24px; right: 24px;18    height: 70px; display: flex; align-items: center; justify-content: space-between;19    color: #EDE7F3; font-weight: 600; font-size: 40px;20  }21  .status-icons { display: flex; gap: 26px; align-items: center; }22  .icon { width: 40px; height: 40px; }23  .dot { width: 12px; height: 12px; background: #D8D0DF; border-radius: 50%; }24 25  /* Search row */26  .search-row {27    position: absolute; top: 120px; left: 32px; right: 32px;28    display: flex; align-items: center; gap: 28px;29  }30  .hamburger {31    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;32  }33  .search-bar {34    flex: 1; height: 96px; border-radius: 48px;35    background: #4A3E53; color: #CFC3D7;36    display: flex; align-items: center; padding: 0 36px; font-size: 38px;37  }38  .profile {39    width: 84px; height: 84px; border-radius: 42px;40    background: #6A5344; color: #EADAE5; font-weight: 700;41    display: flex; align-items: center; justify-content: center;42  }43 44  /* Section title */45  .section-title {46    position: absolute; top: 260px; left: 40px;47    color: #BFB2C8; font-size: 36px; letter-spacing: 0.3px;48  }49 50  /* List */51  .list {52    position: absolute; top: 330px; left: 24px; right: 24px; bottom: 380px;53    padding-right: 12px;54  }55  .item {56    display: flex; align-items: flex-start; gap: 28px;57    padding: 36px 12px; border-bottom: 1px solid rgba(255,255,255,0.04);58  }59  .avatar {60    width: 100px; height: 100px; border-radius: 50%;61    display: flex; align-items: center; justify-content: center;62    font-weight: 700;63  }64  .avatar.user { background: #8A8A8A; color: #232026; }65  .avatar.purple { background: #B29DD3; color: #2A2334; }66  .avatar.yellow { background: #FFC530; color: #3A2F00; }67 68  .item-content { flex: 1; min-width: 0; }69  .row-top {70    display: flex; align-items: center; justify-content: space-between;71    margin-bottom: 10px;72  }73  .sender { font-size: 44px; font-weight: 800; color: #F3EDF8; }74  .date { font-size: 34px; color: #C9BFD1; }75  .subject { font-size: 40px; font-weight: 800; color: #EDE6F4; margin-bottom: 6px; }76  .snippet { font-size: 36px; color: #B5A8BE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }77  .star { width: 48px; height: 48px; margin-left: 22px; }78 79  /* Compose FAB */80  .compose {81    position: absolute; right: 40px; bottom: 260px;82    height: 120px; width: 360px; background: #685672; border-radius: 36px;83    display: flex; align-items: center; justify-content: center; gap: 22px;84    color: #F1E8F6; font-size: 44px; font-weight: 700;85    box-shadow: 0 10px 24px rgba(0,0,0,0.35);86  }87  .compose .icon { width: 50px; height: 50px; }88 89  /* Bottom nav */90  .bottom-bar {91    position: absolute; left: 0; right: 0; bottom: 0; height: 180px;92    background: #151219; display: flex; align-items: center; justify-content: space-between;93    padding: 0 140px;94  }95  .pill {96    height: 96px; width: 220px; background: #4A3E53; border-radius: 48px;97    display: flex; align-items: center; justify-content: center; position: relative;98  }99  .badge {100    position: absolute; right: 16px; top: -10px; height: 48px; width: 48px;101    border-radius: 24px; background: #EAB0AE; color: #3D2525; font-weight: 800;102    display: flex; align-items: center; justify-content: center; font-size: 32px;103    border: 2px solid rgba(0,0,0,0.15);104  }105  .home-indicator {106    position: absolute; left: 50%; transform: translateX(-50%);107    bottom: 22px; width: 160px; height: 10px; border-radius: 6px; background: #EDE9F4; opacity: 0.75;108  }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status Bar -->115  <div class="status-bar">116    <div>11:36</div>117    <div class="status-icons">118      <!-- Simple app icons -->119      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="6" rx="1" fill="#EDE7F3"/><rect x="3" y="14" width="18" height="6" rx="1" fill="#EDE7F3"/></svg>120      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="6" rx="1" fill="#EDE7F3"/><rect x="3" y="11" width="18" height="6" rx="1" fill="#EDE7F3"/><rect x="3" y="19" width="18" height="2" rx="1" fill="#EDE7F3"/></svg>121      <svg class="icon" viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="1" fill="#EDE7F3"/><rect x="7" y="6" width="10" height="4" fill="#1B171F"/><rect x="7" y="12" width="10" height="6" fill="#1B171F"/></svg>122      <div class="dot"></div>123      <!-- Wi-Fi -->124      <svg class="icon" viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0" stroke="#EDE7F3" stroke-width="2" fill="none"/><path d="M5 12c4-3 10-3 14 0" stroke="#EDE7F3" stroke-width="2" fill="none"/><path d="M8 15c3-2 5-2 8 0" stroke="#EDE7F3" stroke-width="2" fill="none"/><circle cx="12" cy="18" r="2" fill="#EDE7F3"/></svg>125      <!-- Battery -->126      <svg class="icon" viewBox="0 0 26 24">127        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#EDE7F3" stroke-width="2" fill="none"/>128        <rect x="4" y="8" width="12" height="8" fill="#EDE7F3"/>129        <rect x="20.5" y="9" width="3" height="6" rx="1" fill="#EDE7F3"/>130      </svg>131    </div>132  </div>133 134  <!-- Search Row -->135  <div class="search-row">136    <div class="hamburger">137      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="2" fill="#EDE7F3"/><rect x="3" y="11" width="18" height="2" fill="#EDE7F3"/><rect x="3" y="16" width="18" height="2" fill="#EDE7F3"/></svg>138    </div>139    <div class="search-bar">Search in mail</div>140    <div class="profile">F</div>141  </div>142 143  <!-- Section Title -->144  <div class="section-title">Primary</div>145 146  <!-- Message List -->147  <div class="list">148 149    <!-- Item 1 -->150    <div class="item">151      <div class="avatar purple">C</div>152      <div class="item-content">153        <div class="row-top">154          <div class="sender">Cerebra Research</div>155          <div style="display:flex; align-items:center; gap:24px;">156            <div class="date">11:30 PM</div>157            <svg class="star" viewBox="0 0 24 24">158              <polygon points="12,2 15,9 22,9 17,13 19,21 12,16 5,21 7,13 2,9 9,9" fill="none" stroke="#C9BFD1" stroke-width="2"/>159            </svg>160          </div>161        </div>162        <div class="subject">Hi</div>163        <div class="snippet">Do you Agree with our policy?</div>164      </div>165    </div>166 167    <!-- Item 2 -->168    <div class="item">169      <div class="avatar user">170        <svg width="60" height="60" viewBox="0 0 24 24">171          <circle cx="12" cy="9" r="5" fill="#E0E0E0"/>172          <path d="M3 22c2-5 16-5 18 0" fill="#E0E0E0"/>173        </svg>174      </div>175      <div class="item-content">176        <div class="row-top">177          <div class="sender">Kitchen Stories</div>178          <div style="display:flex; align-items:center; gap:24px;">179            <div class="date">Oct 17</div>180            <svg class="star" viewBox="0 0 24 24">181              <polygon points="12,2 15,9 22,9 17,13 19,21 12,16 5,21 7,13 2,9 9,9" fill="none" stroke="#C9BFD1" stroke-width="2"/>182            </svg>183          </div>184        </div>185        <div class="subject">Good news is just one click away!</div>186        <div class="snippet">Please confirm your registration to receive ...</div>187      </div>188    </div>189 190    <!-- Item 3 -->191    <div class="item">192      <div class="avatar user">193        <svg width="60" height="60" viewBox="0 0 24 24">194          <circle cx="12" cy="9" r="5" fill="#E0E0E0"/>195          <path d="M3 22c2-5 16-5 18 0" fill="#E0E0E0"/>196        </svg>197      </div>198      <div class="item-content">199        <div class="row-top">200          <div class="sender">Kitchen Stories</div>201          <div style="display:flex; align-items:center; gap:24px;">202            <div class="date">Oct 17</div>203            <svg class="star" viewBox="0 0 24 24">204              <polygon points="12,2 15,9 22,9 17,13 19,21 12,16 5,21 7,13 2,9 9,9" fill="none" stroke="#C9BFD1" stroke-width="2"/>205            </svg>206          </div>207        </div>208        <div class="subject">Welcome to Kitchen Stories!</div>209        <div class="snippet">Thank you for signing up. Let's get cooking...</div>210      </div>211    </div>212 213    <!-- Item 4 -->214    <div class="item">215      <div class="avatar yellow">M</div>216      <div class="item-content">217        <div class="row-top">218          <div class="sender">Mail Delivery Subsystem</div>219          <div style="display:flex; align-items:center; gap:24px;">220            <div class="date">Oct 16</div>221            <svg class="star" viewBox="0 0 24 24">222              <polygon points="12,2 15,9 22,9 17,13 19,21 12,16 5,21 7,13 2,9 9,9" fill="none" stroke="#C9BFD1" stroke-width="2"/>223            </svg>224          </div>225        </div>226        <div class="subject">Delivery Status Notification (Failure)</div>227        <div class="snippet">Address not found Your message wasn't deli...</div>228      </div>229    </div>230 231    <!-- Item 5 -->232    <div class="item">233      <div class="avatar yellow">G</div>234      <div class="item-content">235        <div class="row-top">236          <div class="sender">Google Community Team</div>237          <div style="display:flex; align-items:center; gap:24px;">238            <div class="date">Oct 12</div>239            <svg class="star" viewBox="0 0 24 24">240              <polygon points="12,2 15,9 22,9 17,13 19,21 12,16 5,21 7,13 2,9 9,9" fill="none" stroke="#C9BFD1" stroke-width="2"/>241            </svg>242          </div>243        </div>244        <div class="subject">Farida, take the next step by customizin...</div>245        <div class="snippet">Access your account features and services. ...</div>246      </div>247    </div>248 249  </div>250 251  <!-- Compose Floating Button -->252  <div class="compose">253    <svg class="icon" viewBox="0 0 24 24">254      <path d="M3 17v4h4l10-10-4-4L3 17z" fill="#F3EDF8"/>255      <path d="M14 5l4 4" stroke="#1B171F" stroke-width="2"/>256    </svg>257    <div>Compose</div>258  </div>259 260  <!-- Bottom Navigation -->261  <div class="bottom-bar">262    <div class="pill">263      <svg width="48" height="48" viewBox="0 0 24 24">264        <path d="M2 6l10 7L22 6v12H2V6z" fill="#EDE7F3"/>265      </svg>266      <div class="badge">5</div>267    </div>268    <svg width="64" height="64" viewBox="0 0 24 24">269      <rect x="3" y="7" width="16" height="10" rx="2" fill="#EDE7F3"/>270      <polygon points="19,12 23,9 23,15" fill="#EDE7F3"/>271    </svg>272    <div class="home-indicator"></div>273  </div>274 275</div>276</body>277</html>