GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #d8dee9;12  }13 14  /* Status bar + header */15  .header {16    position: absolute; top: 0; left: 0; width: 100%; height: 330px;17    background: #3f536b;18    color: #e6edf6;19  }20  .status-bar {21    height: 70px; padding: 0 24px;22    display: flex; align-items: center; justify-content: space-between;23    font-weight: 600; font-size: 36px; letter-spacing: 0.5px;24    color: #ffffff;25  }26  .status-icons { display: flex; align-items: center; gap: 22px; }27  .icon-wifi, .icon-battery, .icon-signal { width: 36px; height: 24px; }28  .icon-battery rect { stroke: #fff; fill: none; stroke-width: 2; }29  .icon-battery .cell { fill: #fff; }30  .icon-wifi path { stroke: #fff; stroke-width: 3; fill: none; }31  .icon-signal rect { fill: #fff; }32 33  .search-row {34    position: absolute; top: 90px; left: 24px; right: 24px; height: 60px;35    display: flex; align-items: center; gap: 20px;36  }37  .back-btn {38    width: 50px; height: 50px;39    display: flex; align-items: center; justify-content: center;40  }41  .back-btn svg path { stroke: #e6edf6; stroke-width: 4; fill: none; }42 43  .search-box {44    flex: 1; height: 60px; border-radius: 12px;45    background: rgba(255,255,255,0.08);46    color: #bfc8d4; font-size: 34px; padding: 10px 16px;47    display: flex; align-items: center;48  }49 50  .chips {51    position: absolute; top: 170px; left: 24px; right: 24px;52    display: flex; gap: 24px;53  }54  .chip {55    background: #3a4e64;56    border: 1.5px solid #2e4359;57    color: #dfe6f1; font-size: 30px;58    padding: 16px 28px; border-radius: 28px;59  }60  .chip.active {61    border-color: #f1e66b;62    box-shadow: inset 0 0 0 2px #f1e66b;63  }64 65  /* Ad banner placeholder */66  .ad-banner {67    position: absolute; top: 330px; left: 40px; width: 1000px; height: 140px;68    background: #E0E0E0; border: 1px solid #BDBDBD;69    display: flex; align-items: center; justify-content: center;70    color: #757575; font-size: 30px; border-radius: 8px;71  }72 73  /* List area */74  .list {75    position: absolute; top: 480px; left: 0; right: 0; bottom: 740px;76    background: #dbe1ee;77    overflow: hidden;78  }79  .item {80    padding: 28px 40px 32px 40px;81    border-top: 1px solid #bcc6d6;82    position: relative;83  }84  .item:first-child { border-top: none; }85  .title {86    font-size: 44px; color: #313843; margin-bottom: 10px;87  }88  .meta, .freq {89    font-size: 30px; color: #6e7786;90  }91  .right-info {92    position: absolute; top: 36px; right: 40px;93    color: #6e7786; font-size: 32px;94  }95  .star {96    position: absolute; right: 40px; top: 96px;97    width: 34px; height: 34px;98  }99  .star svg path { fill: #f3d23e; }100 101  /* Bottom tabs above keyboard */102  .tabs {103    position: absolute; bottom: 740px; left: 0; width: 100%;104    display: flex; justify-content: space-between;105    padding: 22px 60px; background: #dbe1ee; color: #3e4652;106    font-size: 34px; font-weight: 700;107  }108  .tabs .active {109    border-bottom: 4px solid #2f3f56;110    padding-bottom: 6px;111  }112 113  /* FAB */114  .fab {115    position: absolute; right: 48px; bottom: 860px;116    width: 140px; height: 140px; border-radius: 50%;117    background: #3c5169; box-shadow: 0 8px 24px rgba(0,0,0,0.25);118    display: flex; align-items: center; justify-content: center;119  }120  .fab svg { width: 64px; height: 64px; }121  .fab svg path { stroke: #ffffff; stroke-width: 8; }122 123  /* Keyboard placeholder */124  .keyboard {125    position: absolute; bottom: 0; left: 0; width: 100%; height: 740px;126    background: #1f1f1f; color: #bfbfbf;127    display: flex; align-items: center; justify-content: center;128    font-size: 36px; border-top: 1px solid #333;129  }130</style>131</head>132<body>133<div id="render-target">134  <div class="header">135    <div class="status-bar">136      <div>3:55</div>137      <div class="status-icons">138        <svg class="icon-signal" viewBox="0 0 24 24">139          <rect x="1" y="14" width="4" height="9"></rect>140          <rect x="7" y="10" width="4" height="13"></rect>141          <rect x="13" y="6" width="4" height="17"></rect>142        </svg>143        <svg class="icon-wifi" viewBox="0 0 24 24">144          <path d="M2 8c5-5 15-5 20 0"></path>145          <path d="M5 11c4-4 10-4 14 0"></path>146          <path d="M9 15c3-3 6-3 9 0"></path>147          <circle cx="12" cy="18" r="2" fill="#fff"></circle>148        </svg>149        <svg class="icon-battery" viewBox="0 0 32 18">150          <rect x="1" y="2" width="26" height="14" rx="2"></rect>151          <rect x="29" y="6" width="2" height="6" rx="1" class="cell"></rect>152          <rect x="3" y="4" width="22" height="10" class="cell"></rect>153        </svg>154      </div>155    </div>156 157    <div class="search-row">158      <div class="back-btn">159        <svg viewBox="0 0 24 24">160          <path d="M15 5 L7 12 L15 19"></path>161        </svg>162      </div>163      <div class="search-box">Search...</div>164    </div>165 166    <div class="chips">167      <div class="chip active">All</div>168      <div class="chip">Default</div>169      <div class="chip">Critical</div>170      <div class="chip">Important</div>171      <div class="chip">Favorites</div>172    </div>173  </div>174 175  <div class="ad-banner">[IMG: Ad Banner - Luxury Decorative Lighting]</div>176 177  <div class="list">178    <div class="item">179      <div class="title">Reading</div>180      <div class="meta">17/06/2023  8:00 am</div>181      <div class="freq">Every Day</div>182      <div class="right-info">in 5 days</div>183    </div>184 185    <div class="item">186      <div class="title">Dbw team meeting</div>187      <div class="meta">18/06/2023  1:53 am</div>188      <div class="freq">One Time</div>189      <div class="right-info">in 6 days</div>190      <div class="star">191        <svg viewBox="0 0 24 24">192          <path d="M12 2 L14.9 8.6 L22 9.3 L16.8 13.8 L18.5 20.6 L12 17 L5.5 20.6 L7.2 13.8 L2 9.3 L9.1 8.6 Z"></path>193        </svg>194      </div>195    </div>196 197    <div class="item">198      <div class="title">Nbc News</div>199      <div class="meta">19/06/2023  8:00 am</div>200      <div class="freq">One Time</div>201      <div class="right-info">in 7 days</div>202    </div>203 204    <div class="item">205      <div class="title">Ravi anniversary</div>206      <div class="meta">20/06/2023  12:00 pm</div>207      <div class="freq">One Time</div>208      <div class="right-info">in 8 days</div>209    </div>210  </div>211 212  <div class="tabs">213    <div class="active">ACTIVE</div>214    <div>COMPLETED</div>215  </div>216 217  <div class="fab">218    <svg viewBox="0 0 48 48">219      <path d="M24 10 L24 38 M10 24 L38 24" />220    </svg>221  </div>222 223  <div class="keyboard">[System Keyboard]</div>224</div>225</body>226</html>