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<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0b0b0b;15    font-family: "Roboto", Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 0 36px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #ffffff;32    font-weight: 500;33    font-size: 38px;34  }35  .status-icons {36    display: flex;37    gap: 28px;38    align-items: center;39  }40  .icon-svg { width: 44px; height: 44px; fill: #ffffff; opacity: 0.9; }41 42  /* Header / Tabs */43  .top-bar {44    position: absolute;45    top: 130px;46    left: 0;47    width: 1080px;48    padding: 0 36px;49    box-sizing: border-box;50    color: #ddd;51  }52  .close-row {53    display: flex;54    align-items: center;55    gap: 24px;56  }57  .close-btn {58    width: 60px;59    height: 60px;60  }61  .tabs {62    margin-top: 12px;63    display: flex;64    align-items: center;65    gap: 40px;66  }67  .tab {68    font-size: 48px;69    font-weight: 700;70    color: #bfbfbf;71    padding-bottom: 12px;72  }73  .tab.active {74    color: #ffffff;75    border-bottom: 6px solid #3d7cff;76  }77  .hide-md {78    margin-top: 18px;79    display: flex;80    align-items: center;81    gap: 16px;82    color: #bfbfbf;83    font-size: 34px;84  }85  .radio {86    width: 36px;87    height: 36px;88    border-radius: 50%;89    border: 3px solid #8e8e8e;90    box-sizing: border-box;91  }92 93  /* Card */94  .card {95    position: absolute;96    top: 360px;97    left: 36px;98    width: 1008px;99    background: #262626;100    border-radius: 28px;101    box-sizing: border-box;102    padding: 40px;103    box-shadow: 0 12px 24px rgba(0,0,0,0.45);104  }105  .card h1 {106    margin: 0 0 16px 0;107    font-size: 56px;108    font-weight: 800;109    color: #ffffff;110    letter-spacing: 0.2px;111  }112  .card .due {113    font-size: 32px;114    color: #e8e8e8;115    margin-bottom: 36px;116  }117  .card .source-label {118    font-size: 32px;119    color: #9e9e9e;120    margin-top: 30px;121  }122 123  /* Bottom share sheet */124  .share-sheet {125    position: absolute;126    bottom: 0;127    left: 0;128    width: 1080px;129    height: 280px;130    background: #1e1e1e;131    box-shadow: 0 -10px 24px rgba(0,0,0,0.5);132    padding: 26px 48px 36px;133    box-sizing: border-box;134  }135  .share-row {136    display: flex;137    justify-content: space-between;138    align-items: center;139    margin-top: 18px;140  }141  .share-item {142    width: 160px;143    display: flex;144    flex-direction: column;145    align-items: center;146    gap: 18px;147    color: #cfcfcf;148    font-size: 30px;149  }150  .circle {151    width: 102px;152    height: 102px;153    border-radius: 50%;154    display: flex;155    align-items: center;156    justify-content: center;157    color: #fff;158    font-weight: 800;159    font-size: 42px;160  }161  .twitter { background: #1DA1F2; }162  .google { background: #DB4437; }163  .email  { background: #3B5AFB; }164  .copy   { background: #F4B000; color: #111; }165  .more   { background: #25D3A6; }166 167  /* Gesture pill */168  .gesture-pill {169    position: absolute;170    bottom: 300px; /* sit just above share sheet */171    left: 50%;172    transform: translateX(-50%);173    width: 220px;174    height: 12px;175    background: #ffffff;176    opacity: 0.9;177    border-radius: 12px;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    <div class="time">10:02</div>187    <div class="status-icons">188      <!-- Alarm icon -->189      <svg class="icon-svg" viewBox="0 0 24 24">190        <path d="M7 3l-3 3 2 2 3-3-2-2zm10 0l-2 2 3 3 2-2-3-3zM12 6a8 8 0 100 16 8 8 0 000-16zm1 4h-2v6h6v-2h-4V10z"/>191      </svg>192      <!-- Cloud icon -->193      <svg class="icon-svg" viewBox="0 0 24 24">194        <path d="M6 18h10a4 4 0 000-8 5 5 0 00-9-2A4 4 0 006 18z"/>195      </svg>196      <!-- WiFi icon -->197      <svg class="icon-svg" viewBox="0 0 24 24">198        <path d="M12 20l2-2-2-2-2 2 2 2zm-6-8l2-2a8 8 0 0112 0l2 2-2 2a6 6 0 00-8 0l-2-2-2 2-2-2z"/>199      </svg>200      <!-- Battery icon -->201      <svg class="icon-svg" viewBox="0 0 24 24">202        <path d="M18 7h2v10h-2V7zM4 8h12v8H4V8z"/>203      </svg>204    </div>205  </div>206 207  <!-- Header / Tabs -->208  <div class="top-bar">209    <div class="close-row">210      <svg class="close-btn" viewBox="0 0 24 24">211        <path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2.5" stroke-linecap="round" fill="none"/>212      </svg>213    </div>214    <div class="tabs">215      <div class="tab active">Text</div>216      <div class="tab">Image</div>217    </div>218    <div class="hide-md">219      <div class="radio"></div>220      <span>Hide Markdown</span>221    </div>222  </div>223 224  <!-- Card -->225  <div class="card">226    <h1>Shimla tour</h1>227    <div class="due">Due Date: Aug 20, 09:00AM</div>228 229    <div class="source-label">From TickTick:<br>www.ticktick.com</div>230  </div>231 232  <!-- Bottom Share Sheet -->233  <div class="share-sheet">234    <div class="share-row">235      <div class="share-item">236        <div class="circle twitter">t</div>237        <div>Twitter</div>238      </div>239      <div class="share-item">240        <div class="circle google">G+</div>241        <div>Google+</div>242      </div>243      <div class="share-item">244        <div class="circle email">✉</div>245        <div>Email</div>246      </div>247      <div class="share-item">248        <div class="circle copy">A</div>249        <div>Copy Link</div>250      </div>251      <div class="share-item">252        <div class="circle more">…</div>253        <div>More</div>254      </div>255    </div>256  </div>257 258  <!-- Gesture pill -->259  <div class="gesture-pill"></div>260 261</div>262</body>263</html>