GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>UI Rendering</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    padding: 0 32px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #ffffff;31    font-weight: 600;32    font-size: 40px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-icon { width: 40px; height: 40px; display: inline-block; }40 41  /* Header with tabs */42  .header {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    padding: 0 36px;48    box-sizing: border-box;49    display: flex;50    align-items: center;51    gap: 24px;52    color: #BDBDBD;53  }54  .icon-btn {55    width: 72px;56    height: 72px;57    border-radius: 36px;58    display: flex;59    align-items: center;60    justify-content: center;61    background: transparent;62    border: none;63    padding: 0;64  }65  .tabs {66    display: flex;67    align-items: baseline;68    gap: 40px;69    font-size: 48px;70    font-weight: 700;71  }72  .tab { color: #BDBDBD; }73  .tab.active { color: #FFFFFF; position: relative; }74  .tab.active::after {75    content: "";76    position: absolute;77    left: 0;78    bottom: -12px;79    width: 88px;80    height: 8px;81    background: #2F80ED;82    border-radius: 4px;83  }84 85  /* Toggle */86  .toggle {87    position: absolute;88    top: 230px;89    left: 36px;90    display: flex;91    align-items: center;92    gap: 18px;93    color: #9E9E9E;94    font-size: 40px;95    font-weight: 600;96  }97  .toggle .circle {98    width: 40px;99    height: 40px;100    border-radius: 20px;101    border: 4px solid #9E9E9E;102    box-sizing: border-box;103  }104 105  /* Main card */106  .card {107    position: absolute;108    top: 340px;109    left: 36px;110    width: 1008px;111    background: #2A2A2A;112    border-radius: 28px;113    box-sizing: border-box;114    padding: 44px;115    color: #F5F5F5;116    box-shadow: 0 6px 24px rgba(0,0,0,0.4);117  }118  .card h1 {119    margin: 0 0 16px 0;120    font-size: 64px;121    font-weight: 800;122    letter-spacing: 0.2px;123    color: #FFFFFF;124  }125  .card .meta {126    font-size: 40px;127    color: #D8D8D8;128    margin-bottom: 44px;129  }130  .card .source {131    font-size: 36px;132    color: #9E9E9E;133    line-height: 1.5;134  }135 136  /* Bottom actions bar (background items) */137  .bottom-bar {138    position: absolute;139    bottom: 100px;140    left: 0;141    width: 1080px;142    padding: 0 40px;143    box-sizing: border-box;144    display: flex;145    align-items: center;146    justify-content: flex-end;147    gap: 60px;148  }149  .action {150    display: flex;151    align-items: center;152    gap: 18px;153    color: #EDEDED;154    font-size: 40px;155    font-weight: 600;156  }157  .circle-icon {158    width: 96px;159    height: 96px;160    border-radius: 48px;161    background: #303030;162    display: flex;163    align-items: center;164    justify-content: center;165  }166 167  /* Floating copy toast */168  .toast {169    position: absolute;170    bottom: 260px;171    left: 520px;172    transform: translateX(-50%);173    background: #2F2A2A;174    color: #FFFFFF;175    padding: 22px 28px;176    border-radius: 44px;177    display: flex;178    align-items: center;179    gap: 16px;180    font-size: 40px;181    box-shadow: 0 6px 24px rgba(0,0,0,0.5);182  }183 184  /* Floating share/preview cluster */185  .cluster {186    position: absolute;187    bottom: 240px;188    left: 24px;189    display: flex;190    align-items: flex-end;191    gap: 22px;192  }193  .cluster .preview {194    width: 310px;195    min-height: 250px;196    background: #F6D4CF;197    color: #3A2E2E;198    border-radius: 38px;199    padding: 28px;200    box-sizing: border-box;201    box-shadow: 0 10px 30px rgba(0,0,0,0.45);202    font-size: 36px;203    line-height: 1.3;204  }205  .cluster .bubble {206    width: 140px;207    height: 140px;208    background: #F6D4CF;209    border-radius: 32px;210    display: flex;211    align-items: center;212    justify-content: center;213    box-shadow: 0 10px 30px rgba(0,0,0,0.45);214  }215 216  /* Navigation pill */217  .nav-pill {218    position: absolute;219    bottom: 32px;220    left: 50%;221    transform: translateX(-50%);222    width: 300px;223    height: 16px;224    border-radius: 8px;225    background: #FFFFFF;226    opacity: 0.9;227  }228 229  /* Icon styles */230  svg { display: block; }231</style>232</head>233<body>234<div id="render-target">235 236  <!-- Status bar -->237  <div class="status-bar">238    <div class="status-left">8:06</div>239    <div class="status-right">240      <!-- simple icons -->241      <svg class="status-icon" viewBox="0 0 24 24" fill="#FFFFFF" aria-hidden="true">242        <circle cx="12" cy="12" r="10" opacity="0.2"></circle>243        <path d="M4 12h16" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>244      </svg>245      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">246        <path d="M3 18h18M6 12h12M9 6h6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>247      </svg>248      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">249        <path d="M4 13v6h16v-6" fill="#FFFFFF"></path>250        <path d="M6 7l6-4 6 4v6H6V7z" fill="#FFFFFF" opacity="0.7"></path>251      </svg>252      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">253        <rect x="1" y="6" width="18" height="12" rx="3" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>254        <rect x="20" y="10" width="3" height="4" fill="#FFFFFF"></rect>255      </svg>256    </div>257  </div>258 259  <!-- Header and tabs -->260  <div class="header">261    <button class="icon-btn" aria-label="close">262      <svg width="44" height="44" viewBox="0 0 24 24">263        <path d="M5 5l14 14M19 5L5 19" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>264      </svg>265    </button>266    <div class="tabs">267      <span class="tab active">Text</span>268      <span class="tab">Image</span>269    </div>270  </div>271 272  <!-- Toggle -->273  <div class="toggle">274    <div class="circle"></div>275    <div>Hide Markdown</div>276  </div>277 278  <!-- Main content card -->279  <div class="card">280    <h1>Weeding plan</h1>281    <div class="meta">Due Date: Jul 19, 12:30pm</div>282    <div class="source">283      From TickTick:<br>284      www.ticktick.com285    </div>286  </div>287 288  <!-- Floating share/preview cluster -->289  <div class="cluster">290    <div class="preview">291      <div style="font-weight:800;">Weeding plan</div>292      <div>Due Date: Jul 19, 12:30pm</div>293      <div style="margin-top:16px; color:#6D5C5C;">From TickTick...</div>294    </div>295    <div class="bubble" title="Share">296      <svg width="52" height="52" viewBox="0 0 24 24">297        <path d="M18 8a3 3 0 1 0-2.9-3.9L8.5 8.6a3 3 0 1 0 0 6.8l6.6 4.4A3 3 0 1 0 17 18" fill="none" stroke="#3A2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>298      </svg>299    </div>300    <div class="bubble" title="Copy">301      <svg width="52" height="52" viewBox="0 0 24 24">302        <rect x="7" y="7" width="10" height="12" rx="2" fill="none" stroke="#3A2E2E" stroke-width="2"></rect>303        <rect x="3" y="3" width="10" height="12" rx="2" fill="none" stroke="#3A2E2E" stroke-width="2" opacity="0.7"></rect>304      </svg>305    </div>306  </div>307 308  <!-- Copy toast -->309  <div class="toast">310    <div class="circle-icon" style="width:64px;height:64px;background:#3A3A3A;">311      <svg width="36" height="36" viewBox="0 0 24 24">312        <path d="M5 13l4 4L19 7" stroke="#FFD54F" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>313      </svg>314    </div>315    Copied316  </div>317 318  <!-- Bottom actions (background) -->319  <div class="bottom-bar">320    <div class="action">321      <div class="circle-icon" style="background:#3A3A3A;">322        <svg width="42" height="42" viewBox="0 0 24 24">323          <path d="M4 4h16v12H4z" fill="none" stroke="#FFC107" stroke-width="2"></path>324          <path d="M9 18h6v2H9z" fill="#FFC107"></path>325        </svg>326      </div>327      <div style="color:#E0E0E0;">Copy Link</div>328    </div>329    <div class="action">330      <div class="circle-icon" style="background:#00C986;">331        <svg width="40" height="40" viewBox="0 0 24 24">332          <circle cx="12" cy="12" r="3" fill="#0A0A0A"></circle>333          <circle cx="5" cy="12" r="3" fill="#0A0A0A"></circle>334          <circle cx="19" cy="12" r="3" fill="#0A0A0A"></circle>335        </svg>336      </div>337      <div>More</div>338    </div>339  </div>340 341  <!-- Navigation pill -->342  <div class="nav-pill"></div>343 344</div>345</body>346</html>