GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>John birthday UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    font-family: Arial, Helvetica, sans-serif;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 90px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 40px;29    color: #E0E0E0;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .dot { width: 10px; height: 10px; background: #E0E0E0; border-radius: 50%; display: inline-block; }39 40  /* Top app bar */41  .toolbar {42    position: absolute;43    top: 90px;44    left: 0;45    width: 1080px;46    height: 140px;47    display: flex;48    align-items: center;49    padding: 0 36px;50  }51  .toolbar .title {52    font-size: 64px;53    font-weight: 700;54    margin-left: 24px;55  }56  .toolbar .right {57    margin-left: auto;58  }59  .icon-btn {60    width: 72px; height: 72px; border-radius: 36px;61    display: flex; align-items: center; justify-content: center;62  }63  .icon { width: 48px; height: 48px; fill: #E0E0E0; }64 65  /* Info text */66  .info {67    position: absolute;68    top: 250px;69    left: 120px;70    right: 120px;71    color: #B0B0B0;72    font-size: 34px;73  }74 75  .year {76    position: absolute;77    top: 350px;78    left: 120px;79    font-size: 42px;80    color: #E0E0E0;81    font-weight: 600;82  }83 84  /* Timeline row */85  .timeline {86    position: absolute;87    top: 460px;88    left: 0;89    width: 1080px;90    padding: 0 48px;91    display: flex;92    gap: 24px;93    align-items: flex-start;94  }95  .dateCol {96    width: 110px;97    text-align: left;98    color: #E0E0E0;99  }100  .dateCol .month {101    font-size: 34px;102    color: #BDBDBD;103  }104  .dateCol .day {105    font-size: 70px;106    font-weight: 700;107    margin-top: 6px;108  }109 110  .eventCard {111    flex: 1;112    height: 310px;113    border-radius: 36px;114    position: relative;115    overflow: hidden;116    border: 1px solid #2A2A2A;117    background: #1E1E1E;118  }119  .eventImage {120    position: absolute;121    inset: 0;122    background: #E0E0E0;123    border: 1px solid #BDBDBD;124    display: flex;125    align-items: center;126    justify-content: center;127    color: #757575;128    font-size: 34px;129  }130  .eventText {131    position: absolute;132    left: 32px;133    bottom: 34px;134    color: #FFFFFF;135  }136  .eventTitle {137    font-size: 48px;138    font-weight: 700;139  }140  .eventTime {141    font-size: 34px;142    margin-top: 8px;143    color: #D6D6D6;144  }145 146  /* Bottom gesture pill */147  .gesture-pill {148    position: absolute;149    bottom: 56px;150    left: 50%;151    transform: translateX(-50%);152    width: 560px;153    height: 12px;154    border-radius: 12px;155    background: #E0E0E0;156    opacity: 0.85;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status bar -->164  <div class="statusbar">165    <div class="time">6:52</div>166    <div class="status-icons">167      <span class="dot"></span>168      <span class="dot"></span>169      <span class="dot"></span>170      <span class="dot"></span>171      <!-- Simple battery icon -->172      <svg class="icon" viewBox="0 0 24 24">173        <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>174        <rect x="20" y="9" width="2" height="6"></rect>175      </svg>176    </div>177  </div>178 179  <!-- Top app bar -->180  <div class="toolbar">181    <div class="icon-btn">182      <!-- Back arrow -->183      <svg class="icon" viewBox="0 0 24 24">184        <path d="M15 6l-6 6 6 6" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>185      </svg>186    </div>187    <div class="title">John birthday</div>188    <div class="right icon-btn">189      <!-- Close icon -->190      <svg class="icon" viewBox="0 0 24 24">191        <path d="M6 6l12 12M18 6l-12 12" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round"/>192      </svg>193    </div>194  </div>195 196  <div class="info">Only entries after Aug 30, 2022 are shown here</div>197  <div class="year">2023</div>198 199  <!-- Timeline item -->200  <div class="timeline">201    <div class="dateCol">202      <div class="month">Sep</div>203      <div class="day">25</div>204    </div>205 206    <div class="eventCard">207      <div class="eventImage">[IMG: Birthday cake banner]</div>208      <div class="eventText">209        <div class="eventTitle">John birthday</div>210        <div class="eventTime">8:35 – 9:35 PM</div>211      </div>212    </div>213  </div>214 215  <!-- Bottom gesture pill -->216  <div class="gesture-pill"></div>217</div>218</body>219</html>