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">6<title>Generated UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #FFFFFF;30    font-weight: 600;31    font-size: 40px;32    box-sizing: border-box;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  /* Header with tabs */40  .header {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1080px;45    height: 140px;46    display: flex;47    align-items: center;48    box-sizing: border-box;49    padding: 0 30px;50    color: #eaeaea;51  }52  .back {53    width: 80px;54    height: 80px;55    display: flex;56    align-items: center;57    justify-content: center;58    margin-right: 10px;59  }60  .tabs {61    display: flex;62    align-items: flex-end;63    gap: 36px;64    margin-right: auto;65  }66  .tab {67    font-size: 48px;68    color: #8E8E8E;69    padding-bottom: 14px;70  }71  .tab.active {72    color: #FFFFFF;73    border-bottom: 6px solid #2F7DF6;74  }75 76  .markdown-toggle {77    display: flex;78    align-items: center;79    gap: 18px;80    color: #BDBDBD;81    font-size: 36px;82    margin-right: 24px;83  }84 85  /* Content card */86  .card {87    position: absolute;88    left: 36px;89    right: 36px;90    top: 360px;91    background: #2A2A2A;92    border-radius: 28px;93    padding: 48px 48px 60px 48px;94    box-sizing: border-box;95    color: #FFFFFF;96  }97  .card h1 {98    margin: 0 0 16px 0;99    font-size: 60px;100    font-weight: 700;101  }102  .card .due {103    margin: 0 0 46px 0;104    font-size: 38px;105    color: #D3D3D3;106  }107  .card .from {108    margin-top: 40px;109    font-size: 32px;110    color: #9E9E9E;111    line-height: 1.5;112  }113 114  /* Share sheet */115  .share-sheet {116    position: absolute;117    left: 0;118    right: 0;119    bottom: 120px;120    height: 260px;121    background: #0F0F0F;122    display: flex;123    align-items: center;124    justify-content: space-around;125    padding: 0 24px;126    box-sizing: border-box;127  }128  .share-item {129    width: 180px;130    display: flex;131    flex-direction: column;132    align-items: center;133    gap: 18px;134    color: #CFCFCF;135    font-size: 30px;136  }137  .share-icon {138    width: 116px;139    height: 116px;140    border-radius: 58px;141    display: flex;142    align-items: center;143    justify-content: center;144  }145  .twitter { background: #1DA1F2; }146  .google { background: #FFFFFF; }147  .email { background: #3B82F6; }148  .copy { background: #F59E0B; }149  .more { background: #10B981; }150 151  /* Floating share pill */152  .share-pill {153    position: absolute;154    left: 50%;155    transform: translateX(-50%);156    bottom: 330px;157    height: 120px;158    width: 360px;159    background: #2D2D2D;160    border-radius: 60px;161    box-shadow: 0 10px 24px rgba(0,0,0,0.5);162    display: flex;163    align-items: center;164    justify-content: center;165    gap: 20px;166    color: #FFFFFF;167    font-size: 40px;168    font-weight: 600;169  }170 171  /* Home indicator */172  .home-indicator {173    position: absolute;174    bottom: 28px;175    left: 50%;176    transform: translateX(-50%);177    width: 300px;178    height: 10px;179    background: #FFFFFF;180    border-radius: 6px;181    opacity: 0.9;182  }183</style>184</head>185<body>186<div id="render-target">187  <!-- Status Bar -->188  <div class="status-bar">189    <div>8:04</div>190    <div class="status-right">191      <!-- simple cellular -->192      <svg width="40" height="40" viewBox="0 0 24 24">193        <rect x="3" y="13" width="3" height="8" fill="#fff" opacity="0.8"/>194        <rect x="8" y="10" width="3" height="11" fill="#fff" opacity="0.8"/>195        <rect x="13" y="7" width="3" height="14" fill="#fff" opacity="0.8"/>196        <rect x="18" y="4" width="3" height="17" fill="#fff" opacity="0.8"/>197      </svg>198      <!-- WiFi -->199      <svg width="40" height="40" viewBox="0 0 24 24">200        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>201        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>202        <path d="M8 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>203        <circle cx="12" cy="19" r="1.8" fill="#fff"/>204      </svg>205      <!-- Battery -->206      <svg width="52" height="40" viewBox="0 0 28 16">207        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>208        <rect x="3" y="5" width="14" height="6" fill="#fff"/>209        <rect x="24" y="6" width="3" height="4" fill="#fff"/>210      </svg>211    </div>212  </div>213 214  <!-- Header with tabs and options -->215  <div class="header">216    <div class="back">217      <svg width="52" height="52" viewBox="0 0 24 24">218        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#FFFFFF" stroke-width="2.8" stroke-linecap="round"/>219      </svg>220    </div>221    <div class="tabs">222      <div class="tab active">Text</div>223      <div class="tab">Image</div>224    </div>225    <div class="markdown-toggle">226      <svg width="34" height="34" viewBox="0 0 24 24">227        <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2" fill="none"/>228      </svg>229      <span>Hide Markdown</span>230    </div>231  </div>232 233  <!-- Content Card -->234  <div class="card">235    <h1>Weeding plan</h1>236    <div class="due">Due Date: Jul 19, 12:30pm</div>237 238    <div class="from">239      From TickTick:<br>240      www.ticktick.com241    </div>242  </div>243 244  <!-- Floating Share pill -->245  <div class="share-pill">246    <svg width="64" height="64" viewBox="0 0 24 24">247      <circle cx="12" cy="12" r="11" fill="#FFFFFF"/>248      <path d="M7 12.5l3 3 7-7" stroke="#2F7DF6" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249    </svg>250    <span>Share</span>251  </div>252 253  <!-- Share sheet -->254  <div class="share-sheet">255    <div class="share-item">256      <div class="share-icon twitter">257        <svg width="64" height="64" viewBox="0 0 24 24">258          <path d="M20 7c-.6.3-1.3.5-2 .6.7-.4 1.2-1 1.4-1.8-.7.4-1.5.7-2.3.8C16.4 5.8 15.5 5 14.4 5c-2 0-3.4 2-2.7 3.8-2.7-.1-5.1-1.4-6.7-3.4-.9 1.7-.1 3.8 1.7 4.8-.5 0-1-.1-1.4-.4 0 1.7 1.2 3.2 2.9 3.5-.5.1-1 .1-1.5 0 .4 1.4 1.8 2.4 3.4 2.4-1.3 1-3 1.6-4.8 1.6h-.9C6 19 8 19.6 10.2 19.6c6.2 0 9.6-5.1 9.6-9.6v-.4c.6-.4 1.1-1 1.5-1.6z" fill="#fff"/>259        </svg>260      </div>261      <div>Twitter</div>262    </div>263 264    <div class="share-item">265      <div class="share-icon google">266        <svg width="64" height="64" viewBox="0 0 24 24">267          <circle cx="12" cy="12" r="10" fill="#4285F4"/>268          <path d="M12 6v12" stroke="#fff" stroke-width="2"/>269          <path d="M6 12h12" stroke="#fff" stroke-width="2"/>270        </svg>271      </div>272      <div>Google+</div>273    </div>274 275    <div class="share-item">276      <div class="share-icon email">277        <svg width="64" height="64" viewBox="0 0 24 24">278          <rect x="3" y="6" width="18" height="12" rx="2" fill="#FFFFFF"/>279          <path d="M4 7l8 6 8-6" stroke="#3B82F6" stroke-width="2" fill="none"/>280        </svg>281      </div>282      <div>Email</div>283    </div>284 285    <div class="share-item">286      <div class="share-icon copy">287        <svg width="64" height="64" viewBox="0 0 24 24">288          <rect x="7" y="5" width="11" height="14" rx="2" fill="#fff"/>289          <rect x="4" y="8" width="11" height="14" rx="2" fill="none" stroke="#B45309" stroke-width="2"/>290        </svg>291      </div>292      <div>Copy Link</div>293    </div>294 295    <div class="share-item">296      <div class="share-icon more">297        <svg width="64" height="64" viewBox="0 0 24 24">298          <circle cx="5" cy="12" r="2" fill="#fff"/>299          <circle cx="12" cy="12" r="2" fill="#fff"/>300          <circle cx="19" cy="12" r="2" fill="#fff"/>301        </svg>302      </div>303      <div>More</div>304    </div>305  </div>306 307  <!-- Home indicator -->308  <div class="home-indicator"></div>309</div>310</body>311</html>