GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Rendering</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #3a3a3a;14  }15 16  /* Top status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 110px;21    background: #3f8fe9;22    color: #fff;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27  }28  .status-left, .status-right {29    display: flex; align-items: center; gap: 22px;30  }31  .time { font-size: 38px; font-weight: 600; letter-spacing: 0.5px; }32  .status-icon {33    width: 30px; height: 30px; opacity: 0.95;34  }35 36  /* App toolbar */37  .toolbar {38    position: absolute;39    top: 110px; left: 0; right: 0;40    height: 160px;41    background: #5aaaf6;42    display: flex;43    align-items: center;44    padding: 0 26px;45    color: #fff;46  }47  .back-btn { width: 70px; height: 70px; margin-right: 12px; }48  .toolbar-title {49    flex: 1;50    font-size: 46px;51    font-weight: 600;52    white-space: nowrap;53    overflow: hidden;54    text-overflow: ellipsis;55  }56  .toolbar-actions { display: flex; gap: 26px; }57  .toolbar-icon {58    width: 70px; height: 70px;59  }60 61  /* Green strip */62  .green-strip {63    position: absolute;64    top: 270px; left: 0; right: 0;65    height: 70px;66    background: #a6d63e;67    color: #173f00;68    font-weight: 700;69    padding-left: 36px;70    display: flex; align-items: center;71    font-size: 36px;72  }73 74  /* Floating tooltip/banner near top */75  .tooltip {76    position: absolute;77    top: 260px; left: 160px;78    width: 760px; height: 90px;79    background: #4a4a4a;80    color: #fff;81    border-radius: 8px;82    box-shadow: 0 6px 10px rgba(0,0,0,0.35);83    display: flex; align-items: center;84    padding: 0 22px;85    font-size: 34px;86  }87 88  /* Event card header */89  .card {90    position: absolute;91    top: 340px; left: 0; right: 0;92    background: #353535;93    padding: 34px 36px 28px;94    box-shadow: 0 2px 0 rgba(0,0,0,0.35);95  }96  .card-title {97    color: #fff;98    font-size: 48px;99    font-weight: 600;100    margin-bottom: 28px;101  }102  .meta-line {103    display: flex; align-items: center;104    gap: 22px;105    color: #cfcfcf;106    font-size: 34px;107    margin: 12px 0;108  }109  .meta-icon {110    width: 40px; height: 40px;111  }112  .chevron {113    margin-left: auto;114    width: 46px; height: 46px;115  }116 117  /* Main dark area fill */118  .content-fill {119    position: absolute;120    top: 480px;121    left: 0; right: 0;122    bottom: 180px; /* leaves room for banner */123    background: #3a3a3a;124  }125 126  /* Floating action button */127  .fab {128    position: absolute;129    right: 60px;130    bottom: 240px;131    width: 120px; height: 120px;132    background: #69aef8;133    border-radius: 60px;134    box-shadow: 0 12px 20px rgba(0,0,0,0.35);135    display: flex; align-items: center; justify-content: center;136  }137  .fab svg { width: 78px; height: 78px; }138 139  /* Banner Ad placeholder */140  .banner {141    position: absolute;142    left: 0; right: 0; bottom: 0;143    height: 180px;144    background: #E0E0E0;145    border-top: 1px solid #BDBDBD;146    display: flex; align-items: center; justify-content: center;147    color: #757575;148    font-size: 32px;149    z-index: 1;150  }151 152  /* Home indicator */153  .home-indicator {154    position: absolute;155    left: 50%;156    transform: translateX(-50%);157    bottom: 24px;158    width: 360px; height: 10px;159    background: #ffffff;160    border-radius: 6px;161    opacity: 0.9;162    z-index: 2;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status bar -->170  <div class="status-bar">171    <div class="status-left">172      <div class="time">9:12</div>173      <!-- simple status icons -->174      <svg class="status-icon" viewBox="0 0 24 24">175        <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>176        <circle cx="12" cy="12" r="2" fill="#fff"></circle>177      </svg>178      <svg class="status-icon" viewBox="0 0 24 24">179        <path d="M4 12h16" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>180        <path d="M8 8h8M8 16h8" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>181      </svg>182      <svg class="status-icon" viewBox="0 0 24 24">183        <path d="M12 2v20M2 12h20" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>184      </svg>185      <svg class="status-icon" viewBox="0 0 24 24">186        <circle cx="12" cy="12" r="2" fill="#fff"></circle>187      </svg>188    </div>189    <div class="status-right">190      <svg class="status-icon" viewBox="0 0 24 24">191        <path d="M2 18c3-4 6-6 10-6s7 2 10 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>192        <circle cx="12" cy="18" r="2" fill="#fff"></circle>193      </svg>194      <svg class="status-icon" viewBox="0 0 24 24">195        <path d="M3 8h18v8H3z" fill="none" stroke="#fff" stroke-width="2"></path>196        <rect x="5" y="10" width="10" height="4" fill="#fff"></rect>197      </svg>198    </div>199  </div>200 201  <!-- Toolbar -->202  <div class="toolbar">203    <svg class="back-btn" viewBox="0 0 48 48">204      <path d="M28 10L12 24l16 14" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>205    </svg>206    <div class="toolbar-title">Renew Peloton and Soul Cycle membership</div>207    <div class="toolbar-actions">208      <svg class="toolbar-icon" viewBox="0 0 48 48">209        <circle cx="24" cy="24" r="20" fill="none" stroke="#fff" stroke-width="3"></circle>210        <path d="M24 14v20M14 24h20" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>211      </svg>212      <svg class="toolbar-icon" viewBox="0 0 48 48">213        <circle cx="24" cy="24" r="20" fill="none" stroke="#fff" stroke-width="3"></circle>214        <path d="M16 24l6 6 10-12" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>215      </svg>216    </div>217  </div>218 219  <!-- Green strip -->220  <div class="green-strip">Upcoming</div>221 222  <!-- Tooltip -->223  <div class="tooltip">Renew Peloton and Soul cycle membership</div>224 225  <!-- Event Card -->226  <div class="card">227    <div class="card-title">Renew Peloton and Soul cycle membership</div>228    <div class="meta-line">229      <svg class="meta-icon" viewBox="0 0 24 24">230        <circle cx="12" cy="12" r="9" fill="none" stroke="#cfcfcf" stroke-width="2"></circle>231        <path d="M12 12l4 2M12 6v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>232      </svg>233      <span>05:00 PM</span>234      <span style="margin-left:18px;"></span>235      <svg class="meta-icon" viewBox="0 0 24 24">236        <path d="M6 6a9 9 0 0112 0l2-2M18 18a9 9 0 01-12 0l-2 2" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>237      </svg>238      <span>2months</span>239      <svg class="chevron" viewBox="0 0 24 24">240        <path d="M6 9l6 6 6-6" fill="none" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>241      </svg>242    </div>243    <div class="meta-line">244      <svg class="meta-icon" viewBox="0 0 24 24">245        <path d="M3 6h18v14H3z" fill="none" stroke="#cfcfcf" stroke-width="2"></path>246        <path d="M7 3v6M17 3v6" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"></path>247      </svg>248      <span>Sat, Sep 16, 2023</span>249    </div>250  </div>251 252  <!-- Fill area -->253  <div class="content-fill"></div>254 255  <!-- Floating action button -->256  <div class="fab">257    <svg viewBox="0 0 64 64">258      <!-- alarm clock circle -->259      <circle cx="32" cy="36" r="18" fill="none" stroke="#fff" stroke-width="3"></circle>260      <path d="M24 20l-6-6M40 20l6-6" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>261      <!-- hands -->262      <path d="M32 28v8M32 36h6" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>263      <!-- plus overlay -->264      <path d="M32 44v10M27 49h10" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>265    </svg>266  </div>267 268  <!-- Banner Ad placeholder -->269  <div class="banner">270    [IMG: Banner Ad - Tata AIG Car Insurance]271  </div>272 273  <!-- Home indicator -->274  <div class="home-indicator"></div>275 276</div>277</body>278</html>