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.0">6<title>Share Text UI</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:#000000;15    font-family: "Segoe UI", Roboto, Arial, sans-serif;16    color:#FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    height:96px;22    padding:0 36px;23    display:flex;24    align-items:center;25    justify-content:space-between;26    color:#fff;27    font-size:36px;28    letter-spacing:0.5px;29  }30  .status-right {31    display:flex;32    align-items:center;33    gap:20px;34  }35  .battery {36    width:48px; height:24px; border:3px solid #fff; border-radius:4px; position:relative;37  }38  .battery:after {39    content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#fff; border-radius:2px;40  }41  .battery .level { position:absolute; left:3px; top:3px; width:32px; height:16px; background:#fff; }42 43  /* Header & Tabs */44  .header {45    padding:16px 36px 0 36px;46  }47  .top-row {48    display:flex;49    align-items:center;50    gap:24px;51    height:96px;52  }53  .close-btn {54    width:64px; height:64px; cursor:pointer;55  }56  .close-btn svg { width:100%; height:100%; }57  .tabs {58    display:flex;59    align-items:flex-end;60    gap:36px;61    font-size:48px;62    font-weight:600;63    color:#BDBDBD;64  }65  .tab-active {66    color:#FFFFFF;67    position:relative;68    padding-bottom:10px;69  }70  .tab-active:after {71    content:""; position:absolute; left:0; right:0; bottom:0;72    height:6px; background:#3D7BFF; border-radius:3px;73  }74  .toggle-row {75    margin-top:12px;76    display:flex; align-items:center; gap:18px;77    color:#CFCFCF; font-size:42px; font-weight:500;78  }79  .radio {80    width:40px; height:40px; border:3px solid #6E6E6E; border-radius:50%;81  }82 83  /* Content card */84  .card {85    margin:36px;86    margin-top:48px;87    background:#2B2B2B;88    border-radius:28px;89    box-shadow:0 12px 24px rgba(0,0,0,0.35);90    padding:48px;91    max-width:1008px;92  }93  .card h1 {94    margin:0 0 20px 0;95    font-size:64px; font-weight:700; color:#FFFFFF;96  }97  .card .sub {98    font-size:42px; color:#D0D0D0; margin-bottom:36px;99  }100  .card .meta {101    font-size:38px; color:#9E9E9E; line-height:1.6;102  }103 104  /* Spacer pushes content up to match screenshot's empty area */105  .spacer {106    height:1380px;107  }108 109  /* Share tray */110  .share-tray {111    position:absolute;112    left:0; right:0; bottom:120px;113    height:280px;114    background:#1E1E1E;115    border-top-left-radius:18px;116    border-top-right-radius:18px;117    padding:36px 48px;118    display:flex; align-items:center; gap:64px;119  }120  .share-item {121    width:160px;122    text-align:center;123    color:#E0E0E0;124    font-size:36px;125  }126  .icon-circle {127    width:120px; height:120px; border-radius:60px;128    display:flex; align-items:center; justify-content:center;129    margin:0 auto 16px auto;130  }131  .label { font-size:32px; color:#DADADA; }132 133  /* Home indicator */134  .home-indicator {135    position:absolute;136    bottom:32px; left:50%;137    transform:translateX(-50%);138    width:320px; height:12px; background:#FFFFFF; border-radius:8px; opacity:0.75;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status Bar -->146  <div class="status-bar">147    <div>8:09</div>148    <div class="status-right">149      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#fff"/></svg>150      <svg width="28" height="28"><path d="M4 14h20" stroke="#fff" stroke-width="3" stroke-linecap="round"/></svg>151      <div class="battery"><div class="level"></div></div>152    </div>153  </div>154 155  <!-- Header & Tabs -->156  <div class="header">157    <div class="top-row">158      <div class="close-btn">159        <svg viewBox="0 0 24 24">160          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>161        </svg>162      </div>163      <div class="tabs">164        <div class="tab-active">Text</div>165        <div>Image</div>166      </div>167    </div>168    <div class="toggle-row">169      <div class="radio"></div>170      <div>Hide Markdown</div>171    </div>172  </div>173 174  <!-- Content Card -->175  <div class="card">176    <h1>Weeding plan</h1>177    <div class="sub">Due Date: Jul 19, 12:30pm</div>178    <div class="meta">179      From TickTick:<br/>180      www.ticktick.com181    </div>182  </div>183 184  <div class="spacer"></div>185 186  <!-- Share Tray -->187  <div class="share-tray">188    <!-- Twitter -->189    <div class="share-item">190      <div class="icon-circle" style="background:#1DA1F2;">191        <svg width="72" height="72" viewBox="0 0 24 24">192          <path d="M21 7.5c-1 .6-2 .9-3 .9 1-0.6 1.7-1.5 1.9-2.7-1 .6-2.1 1-3.2 1.2C15.9 5.9 14.6 5 13.1 5c-2.8 0-4.8 2.5-4.2 5.2-3.8-.2-7-2-9.2-4.8-.8 2 0 4.3 2 5.5-.9 0-1.7-.3-2.4-.7 0 2.3 1.6 4.2 3.8 4.6-.7.2-1.5.2-2.2.1.6 1.9 2.4 3.2 4.5 3.2-2.1 1.6-4.7 2.3-7.3 2 2.2 1.4 4.8 2.1 7.5 2.1 9 0 13.9-7.7 13.5-14.4z" fill="#FFFFFF"/>193        </svg>194      </div>195      <div class="label">Twitter</div>196    </div>197 198    <!-- Google+ -->199    <div class="share-item">200      <div class="icon-circle" style="background:#FFFFFF;">201        <svg width="72" height="72" viewBox="0 0 24 24">202          <circle cx="12" cy="12" r="10" fill="none" stroke="#EA4335" stroke-width="3"/>203          <path d="M13 7h-3a4 4 0 0 0 0 8h2.5" stroke="#4285F4" stroke-width="3" fill="none" stroke-linecap="round"/>204          <text x="16" y="14" font-size="8" fill="#34A853" font-family="Arial" font-weight="700">+</text>205        </svg>206      </div>207      <div class="label">Google+</div>208    </div>209 210    <!-- Email -->211    <div class="share-item">212      <div class="icon-circle" style="background:#304FFE;">213        <svg width="72" height="72" viewBox="0 0 24 24">214          <rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>215          <path d="M4 8l8 6 8-6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>216        </svg>217      </div>218      <div class="label">Email</div>219    </div>220 221    <!-- Copy Link -->222    <div class="share-item">223      <div class="icon-circle" style="background:#F7B500;">224        <svg width="72" height="72" viewBox="0 0 24 24">225          <path d="M9 15l-2 2a3 3 0 0 1-4-4l2-2" stroke="#1A1A1A" stroke-width="2" fill="none" stroke-linecap="round"/>226          <path d="M15 9l2-2a3 3 0 0 1 4 4l-2 2" stroke="#1A1A1A" stroke-width="2" fill="none" stroke-linecap="round"/>227          <path d="M8 12h8" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round"/>228        </svg>229      </div>230      <div class="label">Copy Link</div>231    </div>232 233    <!-- More -->234    <div class="share-item">235      <div class="icon-circle" style="background:#30D158;">236        <svg width="72" height="72" viewBox="0 0 24 24">237          <circle cx="6" cy="12" r="2" fill="#0B0B0B"/>238          <circle cx="12" cy="12" r="2" fill="#0B0B0B"/>239          <circle cx="18" cy="12" r="2" fill="#0B0B0B"/>240        </svg>241      </div>242      <div class="label">More</div>243    </div>244  </div>245 246  <!-- Home Indicator -->247  <div class="home-indicator"></div>248</div>249</body>250</html>