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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; color: #fff; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000000;13  }14 15  /* Status bar */16  .status-bar {17    height: 100px;18    padding: 0 28px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    font-weight: 600;23    font-size: 34px;24    background: #000;25  }26  .status-right { display: flex; gap: 22px; align-items: center; }27  .icon { width: 36px; height: 36px; }28 29  /* Header with tabs */30  .header {31    height: 120px;32    display: flex;33    align-items: flex-end;34    padding: 0 36px;35    gap: 18px;36    background: #000;37  }38  .close-btn {39    width: 56px; height: 56px; border-radius: 28px;40    display: flex; align-items: center; justify-content: center;41  }42  .tabs { display: flex; gap: 40px; align-items: flex-end; flex: 1; }43  .tab {44    font-size: 44px; font-weight: 800; color: #bdbdbd;45    padding-bottom: 16px; position: relative;46  }47  .tab.active { color: #ffffff; }48  .tab.active::after {49    content: ""; position: absolute; left: 0; bottom: 0;50    width: 100px; height: 6px; background: #2f78ff; border-radius: 3px;51  }52 53  .radio { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; color: #bdbdbd; font-size: 36px; }54  .radio .circle { width: 30px; height: 30px; border: 4px solid #6f6f6f; border-radius: 50%; }55 56  /* Content area */57  .content-wrap { position: absolute; top: 220px; left: 0; right: 0; bottom: 280px; overflow: hidden; }58  .card {59    background: #2a2a2a; border-radius: 26px;60    margin: 50px 36px; padding: 44px;61    box-shadow: 0 6px 20px rgba(0,0,0,0.5);62  }63  .card h1 { margin: 0 0 18px 0; font-size: 54px; font-weight: 700; }64  .card .date { font-size: 36px; color: #cfcfcf; }65  .card .source { margin-top: 48px; color: #9e9e9e; font-size: 34px; line-height: 1.4; }66 67  /* Bottom sheet */68  .bottom-sheet {69    position: absolute; left: 0; right: 0; bottom: 0;70    height: 260px; background: #1c1c1c;71    border-top-left-radius: 16px; border-top-right-radius: 16px;72    padding: 38px 40px 24px;73  }74  .actions { display: flex; justify-content: space-between; }75  .action { width: 160px; display: flex; flex-direction: column; align-items: center; gap: 18px; color: #cfcfcf; font-size: 32px; }76  .action .circle {77    width: 100px; height: 100px; border-radius: 50%;78    display: flex; align-items: center; justify-content: center;79    color: #fff; font-weight: 700; font-size: 42px;80  }81  .tw { background: #1da1f2; }82  .gp { background: #ffffff; color: #4285F4; border: 4px solid #d0d0d0; }83  .mail { background: #3f51b5; }84  .copy { background: #ffb300; }85  .more { background: #1dd0a5; }86 87  /* Home indicator */88  .home-pill { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 300px; height: 12px; background: #e6e6e6; border-radius: 6px; opacity: 0.9; }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="status-bar">96    <div>8:03</div>97    <div class="status-right">98      <!-- Simple placeholder status icons -->99      <svg class="icon" viewBox="0 0 24 24">100        <circle cx="12" cy="8" r="4" fill="#fff"/>101        <path d="M4 22c2-4 6-6 8-6s6 2 8 6" stroke="#fff" stroke-width="2" fill="none"/>102      </svg>103      <svg class="icon" viewBox="0 0 24 24">104        <path d="M2 12l6-6v12z" fill="#fff"/>105        <rect x="10" y="6" width="12" height="12" fill="none" stroke="#fff" stroke-width="2"/>106      </svg>107      <svg class="icon" viewBox="0 0 24 24">108        <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>109        <path d="M2 12h20" stroke="#fff" stroke-width="2"/>110      </svg>111      <svg class="icon" viewBox="0 0 24 24">112        <path d="M6 18V7h12v11M10 7V5h4v2" stroke="#fff" stroke-width="2" fill="none"/>113        <path d="M3 18h18" stroke="#fff" stroke-width="2"/>114      </svg>115      <svg class="icon" viewBox="0 0 24 24">116        <path d="M3 8h3l3 4v6H3z" fill="#fff"/>117        <rect x="14" y="6" width="7" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>118      </svg>119    </div>120  </div>121 122  <!-- Header with tabs and "Hide Markdown" -->123  <div class="header">124    <div class="close-btn">125      <svg width="40" height="40" viewBox="0 0 24 24">126        <path d="M4 4l16 16M20 4L4 20" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>127      </svg>128    </div>129 130    <div class="tabs">131      <div class="tab active">Text</div>132      <div class="tab">Image</div>133    </div>134 135    <div class="radio">136      <div class="circle"></div>137      <div>Hide Markdown</div>138    </div>139  </div>140 141  <!-- Content -->142  <div class="content-wrap">143    <div class="card">144      <h1>Weeding plan</h1>145      <div class="date">Due Date: Jul 19, 12:30pm</div>146 147      <div class="source">148        From TickTick:<br>149        www.ticktick.com150      </div>151    </div>152  </div>153 154  <!-- Bottom share sheet -->155  <div class="bottom-sheet">156    <div class="actions">157      <div class="action">158        <div class="circle tw">159          <svg width="52" height="52" viewBox="0 0 24 24">160            <path d="M22 6c-1 .6-2 .9-3 1 1-1 1-2 1-3-1 1-2 1-3 1-2-2-5 0-5 3 0 .3 0 .6.1.8-4 0-7-2-9-5 0 2 1 3 2 4-1 0-2-.3-2-1v0c0 2 1 3 3 3-1 .5-2 .5-3 .4 1 2 2 3 5 3-2 1-4 1-6 1 2 1 4 2 7 2 8 0 12-7 12-12v-.5z" fill="#fff"/>161          </svg>162        </div>163        <div>Twitter</div>164      </div>165 166      <div class="action">167        <div class="circle gp">G</div>168        <div>Google+</div>169      </div>170 171      <div class="action">172        <div class="circle mail">173          <svg width="54" height="54" viewBox="0 0 24 24">174            <path d="M3 6h18v12H3z" fill="none" stroke="#fff" stroke-width="2"/>175            <path d="M3 7l9 6 9-6" stroke="#fff" stroke-width="2" fill="none"/>176          </svg>177        </div>178        <div>Email</div>179      </div>180 181      <div class="action">182        <div class="circle copy">183          <svg width="50" height="50" viewBox="0 0 24 24">184            <rect x="9" y="9" width="10" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>185            <rect x="5" y="3" width="10" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>186          </svg>187        </div>188        <div>Copy Link</div>189      </div>190 191      <div class="action">192        <div class="circle more">193          <svg width="46" height="46" viewBox="0 0 24 24">194            <circle cx="5" cy="12" r="2" fill="#fff"/>195            <circle cx="12" cy="12" r="2" fill="#fff"/>196            <circle cx="19" cy="12" r="2" fill="#fff"/>197          </svg>198        </div>199        <div>More</div>200      </div>201    </div>202  </div>203 204  <div class="home-pill"></div>205</div>206</body>207</html>