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 Sheet Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    border-radius: 0;16    box-shadow: none;17    color: #ffffff;18  }19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 0 36px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #fff;32    font-size: 42px;33    letter-spacing: 0.5px;34  }35  .status-icons { display: flex; gap: 26px; align-items: center; }36  .status-icons svg { width: 44px; height: 44px; }37  /* Header with tabs */38  .top-area {39    position: absolute;40    top: 140px;41    left: 36px;42    right: 36px;43    color: #bdbdbd;44  }45  .top-row {46    display: flex;47    align-items: center;48    gap: 26px;49    margin-bottom: 18px;50  }51  .close-btn {52    width: 64px; height: 64px; border-radius: 32px;53    display: flex; align-items: center; justify-content: center;54    color: #cfcfcf; font-size: 46px;55  }56  .tabs { display: flex; gap: 40px; font-size: 44px; font-weight: 600; }57  .tab { color: #bfbfbf; }58  .tab.active { color: #ffffff; position: relative; }59  .tab.active::after {60    content: ""; position: absolute; left: 0; right: 0; bottom: -8px;61    height: 6px; background: #2f6fff; border-radius: 3px;62  }63  .hide-markdown {64    margin-top: 28px; display: flex; align-items: center; gap: 18px;65    color: #9e9e9e; font-size: 38px;66  }67  .radio {68    width: 38px; height: 38px; border-radius: 50%;69    border: 3px solid #747474;70  }71  /* Card */72  .note-card {73    position: absolute;74    top: 340px; left: 36px; right: 36px;75    background: #1d1d1d;76    border-radius: 24px;77    padding: 40px;78    box-sizing: border-box;79  }80  .note-card h1 {81    margin: 0;82    font-size: 54px;83    color: #ffffff;84    font-weight: 700;85    letter-spacing: 0.3px;86  }87  .note-card .meta {88    margin-top: 16px;89    font-size: 36px;90    color: #b0b0b0;91  }92  .note-card .source {93    margin-top: 40px;94    font-size: 34px;95    color: #8c8c8c;96    line-height: 1.5;97  }98  /* Share sheet */99  .share-sheet {100    position: absolute;101    left: 0;102    right: 0;103    bottom: 0;104    height: 860px;105    background: #141414;106    border-top-left-radius: 28px;107    border-top-right-radius: 28px;108    box-shadow: 0 -8px 24px rgba(0,0,0,0.6);109    padding: 28px 36px 120px 36px;110    box-sizing: border-box;111  }112  .share-title {113    color: #dcdcdc;114    font-size: 40px;115    margin-bottom: 24px;116  }117  .share-list { display: flex; flex-direction: column; gap: 22px; }118  .share-item {119    display: flex; align-items: center;120    height: 124px; border-radius: 18px;121  }122  .app-icon {123    width: 84px; height: 84px; border-radius: 42px;124    background: #2a2a2a; display: flex; align-items: center; justify-content: center;125    margin-right: 28px;126  }127  .share-label {128    font-size: 44px; color: #ffffff;129  }130  /* Bottom navigation pill */131  .pill {132    position: absolute;133    bottom: 22px;134    left: 50%;135    transform: translateX(-50%);136    width: 300px; height: 10px;137    background: #e6e6e6; border-radius: 6px;138    opacity: 0.9;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status Bar -->146  <div class="status-bar">147    <div>10:04</div>148    <div class="status-icons">149      <!-- Notifications bell -->150      <svg viewBox="0 0 24 24" fill="#ffffff"><path d="M12 2c-3 0-5 2-5 5v4.5l-2 2V15h14v-1.5l-2-2V7c0-3-2-5-5-5zM9.5 18c.5 1 1.5 2 2.5 2s2-.9 2.5-2h-5z"/></svg>151      <!-- Cloud -->152      <svg viewBox="0 0 24 24" fill="#ffffff"><path d="M6 15c-2 0-4-1.7-4-3.8C2 8.9 3.8 7 6 7c.6-2.2 2.4-3.7 4.6-3.7 2.8 0 5.1 2.2 5.3 4.9h.5c2 0 3.6 1.6 3.6 3.6S18.4 16 16.4 16H6z"/></svg>153      <!-- WiFi -->154      <svg viewBox="0 0 24 24" fill="#ffffff"><path d="M2 9c5-4.5 15-4.5 20 0l-2 2c-4-3.6-12-3.6-16 0L2 9zm4 4c3-2.7 9-2.7 12 0l-2 2c-2-1.8-6-1.8-8 0l-2-2zm4 4 2 2 2-2-2-2-2 2z"/></svg>155      <!-- Battery -->156      <svg viewBox="0 0 28 24" fill="#ffffff"><path d="M2 7c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7zm22 3h2v4h-2V10z"/></svg>157    </div>158  </div>159 160  <!-- Header and Tabs -->161  <div class="top-area">162    <div class="top-row">163      <div class="close-btn">✕</div>164      <div class="tabs">165        <div class="tab active">Text</div>166        <div class="tab">Image</div>167      </div>168    </div>169    <div class="hide-markdown">170      <div class="radio"></div>171      <div>Hide Markdown</div>172    </div>173  </div>174 175  <!-- Card Content -->176  <div class="note-card">177    <h1>Shimla tour</h1>178    <div class="meta">Due Date: Aug 20, 09:00AM</div>179    <div class="source">180      From TickTick:<br>181      www.ticktick.com182    </div>183  </div>184 185  <!-- Share Sheet -->186  <div class="share-sheet">187    <div class="share-title">Share</div>188    <div class="share-list">189      <!-- Add to TickTick -->190      <div class="share-item">191        <div class="app-icon" style="background:#ffffff;">192          <svg viewBox="0 0 24 24" width="42" height="42">193            <circle cx="12" cy="12" r="11" fill="#ffcc00"></circle>194            <path d="M8 12l3 3 5-6" stroke="#3d6ef7" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>195          </svg>196        </div>197        <div class="share-label">Add to TickTick</div>198      </div>199      <!-- Bluetooth -->200      <div class="share-item">201        <div class="app-icon" style="background:#ffffff;">202          <svg viewBox="0 0 24 24" width="42" height="42">203            <path d="M10 4v16l6-6-6-6 6-6-6 6" stroke="#7a4a1b" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204          </svg>205        </div>206        <div class="share-label">Bluetooth</div>207      </div>208      <!-- Chat -->209      <div class="share-item">210        <div class="app-icon" style="background:#e8f5e9;">211          <svg viewBox="0 0 24 24" width="42" height="42">212            <path d="M4 5h16v10H9l-5 4V5z" fill="#39ae6b"></path>213          </svg>214        </div>215        <div class="share-label">Chat</div>216      </div>217      <!-- Chrome -->218      <div class="share-item">219        <div class="app-icon" style="background:#ffffff; position:relative;">220          <svg viewBox="0 0 24 24" width="42" height="42">221            <circle cx="12" cy="12" r="10" fill="#fbbc05"></circle>222            <path d="M12 2a10 10 0 0 1 8.7 5.2H12" fill="#ea4335"></path>223            <path d="M20.7 7.2A10 10 0 0 1 12 22l5.2-9" fill="#34a853"></path>224            <circle cx="12" cy="12" r="4" fill="#4285f4"></circle>225          </svg>226        </div>227        <div class="share-label">Chrome</div>228      </div>229      <!-- Create Reminder -->230      <div class="share-item">231        <div class="app-icon" style="background:#59d4d2;">232          <svg viewBox="0 0 24 24" width="42" height="42">233            <circle cx="12" cy="8" r="4" fill="#006b68"></circle>234            <path d="M5 20c1.5-4 12.5-4 14 0" stroke="#006b68" stroke-width="2.2" fill="none" stroke-linecap="round"/>235          </svg>236        </div>237        <div class="share-label">Create Reminder</div>238      </div>239    </div>240  </div>241 242  <!-- Bottom navigation pill -->243  <div class="pill"></div>244</div>245</body>246</html>