GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Sheet UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "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  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 32px;28    box-sizing: border-box;29    color: #ffffff;30    font-size: 36px;31    letter-spacing: 0.5px;32  }33  .status-icons { display: flex; gap: 28px; align-items: center; }34  .status-icons svg { width: 40px; height: 40px; fill: #ffffff; opacity: 0.95; }35 36  /* Top editor area */37  .editor {38    position: absolute;39    top: 120px;40    left: 0;41    width: 1080px;42    padding: 0 36px 24px;43    box-sizing: border-box;44  }45  .editor-top {46    display: flex;47    align-items: center;48    gap: 28px;49  }50  .close-btn {51    width: 56px; height: 56px; border-radius: 28px;52    display: flex; align-items: center; justify-content: center;53    color: #cccccc;54  }55  .close-btn svg { width: 36px; height: 36px; stroke: #cccccc; }56  .tabs { display: flex; gap: 40px; font-size: 44px; font-weight: 600; }57  .tab { color: #cccccc; padding-bottom: 10px; }58  .tab.active { color: #ffffff; border-bottom: 6px solid #3b82f6; }59  .tab.inactive { color: #9aa0a6; }60  .toggle {61    margin-top: 28px;62    display: flex; align-items: center; gap: 18px;63    color: #bfbfbf; font-size: 36px;64  }65  .toggle .circle {66    width: 34px; height: 34px; border-radius: 50%;67    border: 3px solid #9aa0a6;68  }69  .preview-card {70    margin-top: 28px;71    width: 1008px;72    background: #1a1a1a;73    border-radius: 32px;74    padding: 40px;75    box-sizing: border-box;76    box-shadow: 0 8px 20px rgba(0,0,0,0.35);77  }78  .preview-title { font-size: 48px; font-weight: 700; margin-bottom: 16px; color: #ffffff; }79  .preview-sub { font-size: 36px; color: #c2c2c2; margin-bottom: 34px; }80  .preview-footer { font-size: 32px; color: #9aa0a6; line-height: 1.6; }81 82  /* Share list */83  .share-section {84    position: absolute;85    top: 980px;86    left: 0;87    width: 1080px;88    padding: 24px 0 160px;89    box-sizing: border-box;90    background: #111111;91    border-top-left-radius: 28px;92    border-top-right-radius: 28px;93  }94  .share-title { font-size: 44px; font-weight: 600; color: #ffffff; padding: 0 36px 18px; }95  .share-list { display: flex; flex-direction: column; }96  .share-item {97    display: flex; align-items: center;98    padding: 26px 36px;99    gap: 28px;100    box-sizing: border-box;101  }102  .app-icon {103    width: 88px; height: 88px; border-radius: 44px;104    display: flex; align-items: center; justify-content: center;105    background: #2a2a2a;106    border: 2px solid #3a3a3a;107    flex: 0 0 88px;108  }109  .app-label { font-size: 40px; color: #eaeaea; }110 111  /* Icon color helpers */112  .ticktick { background: #ffffff; border-color: #e5e5e5; }113  .bluetooth { background: #1f6fe5; }114  .chat { background: #1bb24a; }115  .chrome { background: #ffffff; }116  .reminder { background: #0aa0c6; }117  .drive { background: #ffffff; }118  .gmail { background: #ffffff; }119  .keep { background: #ffd54f; }120  .messages { background: #3d7bfd; }121  .nearby { background: #ffffff; }122  .saved { background: #ffffff; }123 124  .gesture-pill {125    position: absolute;126    bottom: 24px;127    left: 50%;128    transform: translateX(-50%);129    width: 320px; height: 18px;130    border-radius: 12px;131    background: #e6e6e6;132    opacity: 0.85;133  }134</style>135</head>136<body>137<div id="render-target">138  <!-- Status bar -->139  <div class="status-bar">140    <div>10:04</div>141    <div class="status-icons">142      <!-- alarm icon -->143      <svg viewBox="0 0 24 24"><path d="M12 8a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm1 7H7v2h6v-2zm7-9-3-3-2 2 3 3 2-2zM7 5 4 2 2 4l3 3 2-2z"/></svg>144      <!-- cloud -->145      <svg viewBox="0 0 24 24"><path d="M6 18h11a4 4 0 0 0 0-8 5 5 0 0 0-9-2 4 4 0 0 0-2 10z"/></svg>146      <!-- wifi -->147      <svg viewBox="0 0 24 24"><path d="M12 20l2-2-2-2-2 2 2 2zm-6-8 2-2a8 8 0 0 1 12 0l2 2-2 2a8 8 0 0 0-12 0l-2-2zM2 8l2-2a14 14 0 0 1 16 0l2 2-2 2a14 14 0 0 0-16 0L2 8z"/></svg>148      <!-- battery -->149      <svg viewBox="0 0 24 24"><path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/></svg>150    </div>151  </div>152 153  <!-- Editor top area -->154  <div class="editor">155    <div class="editor-top">156      <div class="close-btn">157        <svg viewBox="0 0 24 24" fill="none" stroke-width="2">158          <path d="M4 4l16 16M20 4L4 20" stroke="currentColor"/>159        </svg>160      </div>161      <div class="tabs">162        <div class="tab active">Text</div>163        <div class="tab inactive">Image</div>164      </div>165    </div>166    <div class="toggle">167      <div class="circle"></div>168      <div>Hide Markdown</div>169    </div>170    <div class="preview-card">171      <div class="preview-title">Shimla tour</div>172      <div class="preview-sub">Due Date: Aug 20, 09:00AM</div>173      <div class="preview-footer">174        From TickTick:<br/>www.ticktick.com175      </div>176    </div>177  </div>178 179  <!-- Share list section -->180  <div class="share-section">181    <div class="share-title">Share</div>182    <div class="share-list">183      <div class="share-item">184        <div class="app-icon ticktick">185          <!-- TickTick check in circle -->186          <svg viewBox="0 0 24 24">187            <circle cx="12" cy="12" r="10" fill="#fff"/>188            <path d="M7 12l3 3 7-7" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>189            <circle cx="12" cy="12" r="11" fill="none" stroke="#f6c10a" stroke-width="3"/>190          </svg>191        </div>192        <div class="app-label">Add to TickTick</div>193      </div>194 195      <div class="share-item">196        <div class="app-icon bluetooth">197          <!-- Bluetooth symbol -->198          <svg viewBox="0 0 24 24">199            <path d="M8 4v16l8-6-6-4 6-4-8-2z" fill="#ffffff"/>200          </svg>201        </div>202        <div class="app-label">Bluetooth</div>203      </div>204 205      <div class="share-item">206        <div class="app-icon chat">207          <!-- Chat bubble -->208          <svg viewBox="0 0 24 24">209            <path d="M4 5h16v11H9l-5 4V5z" fill="#ffffff"/>210          </svg>211        </div>212        <div class="app-label">Chat</div>213      </div>214 215      <div class="share-item">216        <div class="app-icon chrome">217          <!-- Simplified Chrome logo -->218          <svg viewBox="0 0 24 24">219            <circle cx="12" cy="12" r="10" fill="#ea4335"/>220            <path d="M12 12L4 12a10 10 0 0 0 4 8l4-8z" fill="#34a853"/>221            <path d="M12 12l4-8A10 10 0 0 1 20 12h-8z" fill="#fbbc05"/>222            <circle cx="12" cy="12" r="4" fill="#4285f4"/>223          </svg>224        </div>225        <div class="app-label">Chrome</div>226      </div>227 228      <div class="share-item">229        <div class="app-icon reminder">230          <!-- Person/reminder -->231          <svg viewBox="0 0 24 24">232            <circle cx="12" cy="8" r="4" fill="#ffffff"/>233            <path d="M4 20a8 6 0 0 1 16 0H4z" fill="#ffffff"/>234          </svg>235        </div>236        <div class="app-label">Create Reminder</div>237      </div>238 239      <div class="share-item">240        <div class="app-icon drive">241          <!-- Google Drive triangle -->242          <svg viewBox="0 0 24 24">243            <path d="M8 3l4 7-4 7L4 10 8 3z" fill="#34a853"/>244            <path d="M20 17l-8-1-4 4 8 1 4-4z" fill="#4285f4"/>245            <path d="M16 3l-4 7 8 7 4-7-8-7z" fill="#fbbc05"/>246          </svg>247        </div>248        <div class="app-label">Drive</div>249      </div>250 251      <div class="share-item">252        <div class="app-icon gmail">253          <!-- Gmail envelope -->254          <svg viewBox="0 0 24 24">255            <rect x="3" y="5" width="18" height="14" rx="2" fill="#ffffff" stroke="#e0e0e0"/>256            <path d="M3 7l9 6 9-6" fill="none" stroke="#ea4335" stroke-width="3"/>257            <path d="M3 19V8l9 7 9-7v11" fill="none" stroke="#34a853" stroke-width="2"/>258          </svg>259        </div>260        <div class="app-label">Gmail</div>261      </div>262 263      <div class="share-item">264        <div class="app-icon keep">265          <!-- Keep note bulb -->266          <svg viewBox="0 0 24 24">267            <path d="M12 4a6 6 0 0 0-3 11v3h6v-3a6 6 0 0 0-3-11z" fill="#fff"/>268          </svg>269        </div>270        <div class="app-label">Keep Notes</div>271      </div>272 273      <div class="share-item">274        <div class="app-icon messages">275          <!-- Messages bubble -->276          <svg viewBox="0 0 24 24">277            <path d="M4 5h16v10H9l-5 4V5z" fill="#ffffff"/>278          </svg>279        </div>280        <div class="app-label">Messages</div>281      </div>282 283      <div class="share-item">284        <div class="app-icon nearby">285          <!-- Nearby Share waves -->286          <svg viewBox="0 0 24 24">287            <path d="M6 10c4-4 8-4 12 0M6 14c4 4 8 4 12 0" fill="none" stroke="#4285f4" stroke-width="2" stroke-linecap="round"/>288          </svg>289        </div>290        <div class="app-label">Nearby Share</div>291      </div>292 293      <div class="share-item">294        <div class="app-icon saved">295          <!-- Google G -->296          <svg viewBox="0 0 24 24">297            <path d="M12 4a8 8 0 1 0 0 16c4 0 7-3 7-7h-7v3h4a5 5 0 1 1-4-12z" fill="#4285f4"/>298          </svg>299        </div>300        <div class="app-label">Saved</div>301      </div>302    </div>303  </div>304 305  <!-- Gesture navigation pill -->306  <div class="gesture-pill"></div>307</div>308</body>309</html>