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>Birthday List</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #cfd4de; /* light bluish gray */15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    background: #3a4f69;21    color: #fff;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    box-sizing: border-box;27  }28  .status-left { display: flex; align-items: center; gap: 16px; }29  .status-time { font-size: 38px; letter-spacing: 1px; }30  .status-right { display: flex; align-items: center; gap: 20px; }31 32  /* Simple status icons */33  .icon { display: inline-flex; }34  .icon svg { display: block; }35 36  /* App bar */37  .appbar {38    height: 140px;39    background: #3a4f69;40    display: flex;41    align-items: center;42    padding: 0 28px;43    box-sizing: border-box;44    color: #eaeff7;45  }46  .appbar .title {47    font-size: 56px;48    font-weight: 500;49    margin-left: 20px;50    letter-spacing: 0.5px;51  }52  .appbar .spacer { flex: 1; }53  .appbar .close {54    width: 84px; height: 84px;55    display: flex; align-items: center; justify-content: center;56  }57 58  /* Chips */59  .chips-wrap {60    background: #3a4f69;61    padding: 20px 22px 28px;62    box-sizing: border-box;63    display: flex;64    gap: 18px;65    flex-wrap: nowrap;66    overflow: hidden;67  }68  .chip {69    padding: 18px 28px;70    font-size: 36px;71    color: #e8edf5;72    border: 2px solid #4b5f78;73    border-radius: 26px;74    background: #2f4158;75    white-space: nowrap;76  }77  .chip.active {78    border: 3px solid #f1e97c;79    color: #fffde5;80  }81 82  /* Ad banner placeholder */83  .ad-banner {84    width: 100%;85    padding: 22px 36px;86    box-sizing: border-box;87    background: transparent;88  }89  .ad-box {90    width: 100%;91    height: 150px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    color: #606060;95    display: flex;96    align-items: center;97    justify-content: center;98    font-size: 34px;99    border-radius: 8px;100  }101 102  /* List area */103  .list {104    width: 100%;105  }106  .item {107    display: flex;108    align-items: flex-start;109    padding: 28px 36px 34px;110    box-sizing: border-box;111    border-bottom: 2px solid rgba(0,0,0,0.06);112  }113  .item .left { flex: 1; }114  .item .title {115    font-size: 52px;116    color: #253242;117    margin-bottom: 10px;118  }119  .item .meta {120    font-size: 34px;121    color: #6e7581;122    margin-bottom: 6px;123  }124  .item .repeat {125    font-size: 34px;126    color: #6e7581;127  }128  .item .right {129    font-size: 34px;130    color: #6e7581;131    padding-top: 10px;132    white-space: nowrap;133  }134 135  /* Floating Action Button */136  .fab {137    position: absolute;138    right: 80px;139    bottom: 360px;140    width: 150px;141    height: 150px;142    background: #3a4f69;143    border-radius: 50%;144    display: flex;145    align-items: center;146    justify-content: center;147    box-shadow: 0 18px 30px rgba(0,0,0,0.25);148  }149  .fab svg { width: 74px; height: 74px; }150 151  /* Bottom tabs */152  .bottom-tabs {153    position: absolute;154    bottom: 190px;155    left: 0;156    width: 100%;157    display: flex;158    justify-content: space-between;159    padding: 0 120px;160    box-sizing: border-box;161    color: #1f2430;162  }163  .bottom-tabs .tab {164    font-size: 40px;165    letter-spacing: 1px;166    padding: 10px 6px;167  }168  .bottom-tabs .tab.active {169    font-weight: 800;170    border-bottom: 6px solid #1f2430;171  }172 173  /* Android navigation pill */174  .nav-pill {175    position: absolute;176    bottom: 90px;177    left: 50%;178    transform: translateX(-50%);179    width: 320px;180    height: 14px;181    background: #6b6f77;182    border-radius: 8px;183    opacity: 0.8;184  }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status Bar -->191  <div class="status-bar">192    <div class="status-left">193      <div class="status-time">11:39</div>194      <div class="icon" title="mail">195        <svg width="38" height="28" viewBox="0 0 24 16" fill="none">196          <rect x="1" y="1" width="22" height="14" rx="2" stroke="white" stroke-width="2"/>197          <path d="M2 2l10 7 10-7" stroke="white" stroke-width="2"/>198        </svg>199      </div>200    </div>201    <div class="status-right">202      <div class="icon" title="wifi">203        <svg width="40" height="26" viewBox="0 0 24 16" fill="none">204          <path d="M2 8c5-4 15-4 20 0" stroke="white" stroke-width="2" opacity="0.6"/>205          <path d="M5 11c4-3 10-3 14 0" stroke="white" stroke-width="2" opacity="0.8"/>206          <circle cx="12" cy="14" r="2" fill="white"/>207        </svg>208      </div>209      <div class="icon" title="battery">210        <svg width="48" height="26" viewBox="0 0 26 14" fill="none">211          <rect x="1" y="1" width="20" height="12" rx="2" stroke="white" stroke-width="2" />212          <rect x="22" y="4" width="3" height="6" fill="white"/>213          <rect x="3" y="3" width="16" height="8" fill="white"/>214        </svg>215      </div>216    </div>217  </div>218 219  <!-- App Bar -->220  <div class="appbar">221    <div class="icon">222      <svg width="60" height="60" viewBox="0 0 24 24" fill="none">223        <path d="M15 19L8 12l7-7" stroke="#eaeff7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>224      </svg>225    </div>226    <div class="title">birthday</div>227    <div class="spacer"></div>228    <div class="close">229      <svg width="60" height="60" viewBox="0 0 24 24" fill="none">230        <path d="M6 6l12 12M18 6L6 18" stroke="#eaeff7" stroke-width="2.5" stroke-linecap="round"/>231      </svg>232    </div>233  </div>234 235  <!-- Filter Chips -->236  <div class="chips-wrap">237    <div class="chip active">All</div>238    <div class="chip">Critical</div>239    <div class="chip">Important</div>240    <div class="chip">Favorites</div>241    <div class="chip">Optional</div>242  </div>243 244  <!-- Ad Banner -->245  <div class="ad-banner">246    <div class="ad-box">[IMG: Advertisement Banner]</div>247  </div>248 249  <!-- List Item -->250  <div class="list">251    <div class="item">252      <div class="left">253        <div class="title">Kiran´s birthday</div>254        <div class="meta">08/18/2023  &nbsp; 8:00 PM</div>255        <div class="repeat">Every Day</div>256      </div>257      <div class="right">in 8 days</div>258    </div>259  </div>260 261  <!-- Floating Action Button -->262  <div class="fab" aria-label="Add">263    <svg viewBox="0 0 24 24">264      <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round"/>265    </svg>266  </div>267 268  <!-- Bottom Tabs -->269  <div class="bottom-tabs">270    <div class="tab active">ACTIVE</div>271    <div class="tab">COMPLETED</div>272  </div>273 274  <!-- Navigation Pill -->275  <div class="nav-pill"></div>276 277</div>278</body>279</html>