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>UI Render</title>7<style>8  body { margin:0; padding:0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #ffffff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 90px;26    padding: 0 28px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #ffffff;32    font-weight: 600;33    font-size: 34px;34  }35  .status-right {36    display: flex; align-items: center; gap: 24px;37  }38  .icon {39    width: 40px; height: 40px;40  }41 42  /* Header with tabs */43  .header {44    position: absolute;45    top: 110px;46    left: 0;47    width: 1080px;48    padding: 0 32px;49    box-sizing: border-box;50  }51  .header-row {52    display: flex; align-items: center; gap: 22px;53  }54  .close-btn {55    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;56  }57  .tabs {58    display: flex; gap: 40px; align-items: flex-end;59    font-size: 42px; font-weight: 700;60  }61  .tab {62    color: #bdbdbd;63    position: relative;64    padding-bottom: 16px;65  }66  .tab.active {67    color: #ffffff;68  }69  .tab.active::after {70    content: "";71    position: absolute; left: 0; bottom: 0;72    width: 84px; height: 6px; background: #2E7CF8; border-radius: 3px;73  }74  .hide-md {75    margin-top: 24px;76    display: flex; align-items: center; gap: 16px;77    font-size: 34px; color: #bdbdbd;78  }79  .radio {80    width: 36px; height: 36px; border: 3px solid #7d7d7d; border-radius: 50%;81  }82 83  /* Card */84  .card {85    position: absolute;86    top: 360px;87    left: 32px;88    width: 1016px;89    background: #242424;90    border-radius: 28px;91    padding: 40px 36px;92    box-sizing: border-box;93    box-shadow: 0 2px 0 rgba(0,0,0,0.2);94  }95  .card h1 {96    margin: 0 0 18px 0;97    font-size: 56px; font-weight: 800; color: #ffffff;98  }99  .card .sub {100    font-size: 36px; color: #eaeaea; margin-bottom: 46px;101  }102  .card .from {103    font-size: 34px; color: #9e9e9e; line-height: 1.6;104  }105 106  /* Share sheet */107  .share-sheet {108    position: absolute;109    bottom: 120px;110    left: 0;111    width: 1080px;112    background: #1a1a1a;113    padding: 26px 32px 28px;114    box-sizing: border-box;115  }116  .share-list {117    display: flex; justify-content: space-between; align-items: center;118  }119  .share-item {120    width: 200px;121    display: flex; flex-direction: column; align-items: center; gap: 18px; color: #ffffff;122  }123  .circle {124    width: 108px; height: 108px; border-radius: 54px; display: flex; align-items: center; justify-content: center;125  }126  .tw { background: #1DA1F2; }127  .gp { background: #ffffff; }128  .em { background: #3B5BEA; }129  .ln { background: #FFB300; }130  .mr { background: #13D6A3; }131  .label { font-size: 30px; color: #e0e0e0; }132 133  /* Gesture pill */134  .gesture {135    position: absolute; bottom: 40px; left: 50%;136    transform: translateX(-50%);137    width: 220px; height: 16px; background: #f5f5f5; border-radius: 8px; opacity: 0.85;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status Bar -->145  <div class="status-bar">146    <div>10:06</div>147    <div class="status-right">148      <!-- Alarm icon -->149      <svg class="icon" viewBox="0 0 24 24">150        <path fill="#ffffff" d="M12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm1 4h-2v6l5 3 1-1-4-2z"></path>151      </svg>152      <!-- Bell icon -->153      <svg class="icon" viewBox="0 0 24 24">154        <path fill="#ffffff" d="M12 2c-3 0-5 2-5 5v4l-2 3v1h14v-1l-2-3V7c0-3-2-5-5-5zm0 18a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"></path>155      </svg>156      <!-- Cloud icon -->157      <svg class="icon" viewBox="0 0 24 24">158        <path fill="#ffffff" d="M6 14a4 4 0 1 0 0 8h10a5 5 0 0 0 0-10 6 6 0 0 0-11-2A4 4 0 0 0 6 14z"></path>159      </svg>160      <!-- WiFi icon -->161      <svg class="icon" viewBox="0 0 24 24">162        <path fill="#ffffff" d="M12 18l-2 2 2 2 2-2-2-2zm-6-6l2 2a8 8 0 0 1 12 0l2-2a10 10 0 0 0-16 0zm3-3l2 2a6 6 0 0 1 8 0l2-2a8 8 0 0 0-12 0z"></path>163      </svg>164      <!-- Battery icon -->165      <svg class="icon" viewBox="0 0 24 24">166        <rect x="2" y="6" width="18" height="12" rx="2" fill="#ffffff"></rect>167        <rect x="20" y="10" width="2" height="4" fill="#ffffff"></rect>168      </svg>169    </div>170  </div>171 172  <!-- Header and Tabs -->173  <div class="header">174    <div class="header-row">175      <div class="close-btn">176        <svg width="36" height="36" viewBox="0 0 24 24">177          <path d="M5 5l14 14M19 5L5 19" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>178        </svg>179      </div>180      <div class="tabs">181        <div class="tab active">Text</div>182        <div class="tab">Image</div>183      </div>184    </div>185 186    <div class="hide-md">187      <div class="radio"></div>188      <div>Hide Markdown</div>189    </div>190  </div>191 192  <!-- Content Card -->193  <div class="card">194    <h1>Shimla tour</h1>195    <div class="sub">Due Date: Aug 20, 09:00AM</div>196    <div class="from">197      From TickTick:<br>198      www.ticktick.com199    </div>200  </div>201 202  <!-- Share Sheet -->203  <div class="share-sheet">204    <div class="share-list">205      <div class="share-item">206        <div class="circle tw">207          <svg width="60" height="60" viewBox="0 0 24 24">208            <path fill="#ffffff" d="M22 6c-1 1-2 1-3 1 1-1 2-2 2-3-1 1-3 2-4 2a4 4 0 0 0-7 3c0 .3 0 .6.1.9-3 0-6-2-7-4a4 4 0 0 0 1 5c-1 0-2-.3-3-1v1c0 2 2 4 4 4a4 4 0 0 1-2 0 4 4 0 0 0 4 3 8 8 0 0 1-5 2h-1a11 11 0 0 0 17-9c1-1 2-2 2-3z"></path>209          </svg>210        </div>211        <div class="label">Twitter</div>212      </div>213      <div class="share-item">214        <div class="circle gp">215          <svg width="60" height="60" viewBox="0 0 24 24">216            <circle cx="12" cy="12" r="10" fill="#DB4437"></circle>217            <text x="12" y="16" font-size="12" font-family="Arial" fill="#ffffff" text-anchor="middle">G+</text>218          </svg>219        </div>220        <div class="label">Google+</div>221      </div>222      <div class="share-item">223        <div class="circle em">224          <svg width="60" height="60" viewBox="0 0 24 24">225            <rect x="3" y="6" width="18" height="12" rx="2" fill="#ffffff"></rect>226            <path d="M3 8l9 6 9-6" stroke="#3B5BEA" stroke-width="2" fill="none"></path>227          </svg>228        </div>229        <div class="label">Email</div>230      </div>231      <div class="share-item">232        <div class="circle ln">233          <svg width="60" height="60" viewBox="0 0 24 24">234            <circle cx="9" cy="12" r="4" fill="#ffffff"></circle>235            <circle cx="15" cy="12" r="4" fill="#ffffff"></circle>236            <rect x="9" y="11" width="6" height="2" fill="#FFB300"></rect>237          </svg>238        </div>239        <div class="label">Copy Link</div>240      </div>241      <div class="share-item">242        <div class="circle mr">243          <svg width="60" height="60" viewBox="0 0 24 24">244            <circle cx="6" cy="12" r="2.5" fill="#ffffff"></circle>245            <circle cx="12" cy="12" r="2.5" fill="#ffffff"></circle>246            <circle cx="18" cy="12" r="2.5" fill="#ffffff"></circle>247          </svg>248        </div>249        <div class="label">More</div>250      </div>251    </div>252  </div>253 254  <!-- Gesture pill -->255  <div class="gesture"></div>256 257</div>258</body>259</html>