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.0" />6<title>Share Sheet Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: radial-gradient(1200px 1200px at 50% 20%, #31204b 0%, #1b1426 45%, #0e0a12 100%);15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0; height: 120px;20    padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #fff;21  }22  .status-left { display: flex; align-items: center; gap: 24px; }23  .status-time { font-size: 36px; letter-spacing: 1px; }24  .tiny-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.9; }25 26  .status-right { display: flex; align-items: center; gap: 28px; }27  .icon-wifi, .icon-battery {28    width: 44px; height: 44px; display: inline-block;29  }30 31  /* Track overlay */32  .track-overlay {33    position: absolute; top: 180px; left: 36px; right: 36px; color: #eaeaea;34  }35  .pill-black {36    display: inline-block;37    background: rgba(0,0,0,0.85);38    padding: 22px 26px;39    border-radius: 6px;40    font-weight: 700;41    font-size: 42px;42    line-height: 1.2;43  }44  .pill-artist {45    margin-top: 10px;46    display: inline-block;47    background: rgba(0,0,0,0.85);48    padding: 16px 26px;49    border-radius: 6px;50    font-weight: 700;51    font-size: 40px;52  }53  .pill-behind {54    margin-top: 20px;55    display: inline-flex;56    align-items: center;57    gap: 16px;58    background: rgba(0,0,0,0.8);59    padding: 18px 22px;60    border-radius: 6px;61    font-size: 32px;62    color: #a6a6a6;63    width: fit-content;64  }65  .eq-bars {66    width: 30px; height: 30px;67  }68 69  /* Floating round actions */70  .floating-actions { position: absolute; right: 36px; top: 200px; display: flex; flex-direction: column; gap: 28px; }71  .float-btn {72    width: 120px; height: 120px; border-radius: 60px;73    background: rgba(255,255,255,0.1);74    backdrop-filter: blur(2px);75    display: flex; align-items: center; justify-content: center;76    border: 1px solid rgba(255,255,255,0.15);77  }78  .float-btn svg { width: 56px; height: 56px; fill: #e6e6e6; }79 80  /* Bottom sheet */81  .sheet {82    position: absolute; left: 0; right: 0; bottom: 0;83    height: 1260px;84    background: #1c1a17;85    border-top-left-radius: 44px; border-top-right-radius: 44px;86    box-shadow: 0 -20px 40px rgba(0,0,0,0.6);87    color: #fff;88  }89  .sheet .handle {90    width: 140px; height: 16px; background: #5a554e; border-radius: 10px;91    margin: 22px auto 20px auto;92    opacity: 0.6;93  }94  .sheet-content { padding: 12px 44px 0 44px; }95  .share-text {96    font-size: 42px; line-height: 1.35; color: #f0f0f0; margin-top: 10px;97  }98  .actions-row {99    margin-top: 56px; display: flex; gap: 36px;100  }101  .outline-btn {102    display: inline-flex; align-items: center; gap: 18px;103    padding: 24px 42px;104    border: 3px solid #c7a967;105    color: #e9d59a;106    border-radius: 22px;107    font-size: 40px; font-weight: 600; background: transparent;108  }109  .outline-btn .square-icon {110    width: 40px; height: 40px; border: 2px solid #c7a967; border-radius: 8px;111  }112 113  .no-reco {114    margin-top: 120px; text-align: center; color: #9b948a; font-size: 36px;115  }116 117  /* Share apps row */118  .apps {119    margin-top: 140px;120    display: flex; justify-content: space-around; padding: 0 44px;121  }122  .app {123    width: 160px; text-align: center; color: #dcdcdc;124  }125  .app .icon {126    width: 140px; height: 140px; border-radius: 70px; background: #ffffff;127    border: 2px solid #d0d0d0; display: flex; align-items: center; justify-content: center;128    color: #666; font-weight: 700;129  }130  .app label {131    display: block; margin-top: 18px; font-size: 34px; color: #cfcfcf;132  }133 134  /* Gesture bar */135  .gesture-bar {136    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);137    width: 280px; height: 12px; background: #e7e1d7; 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 class="status-left">147      <div class="status-time">11:16</div>148      <div class="tiny-dot"></div>149      <div class="tiny-dot"></div>150      <div class="tiny-dot"></div>151      <div class="tiny-dot" style="opacity:0.5;"></div>152    </div>153    <div class="status-right">154      <!-- WiFi -->155      <svg class="icon-wifi" viewBox="0 0 24 24">156        <path fill="#ffffff" d="M12 20.5c.8 0 1.5-.7 1.5-1.5S12.8 17.5 12 17.5 10.5 18.2 10.5 19 11.2 20.5 12 20.5zM4.9 12.7l1.4 1.4A9 9 0 0112 12c2.4 0 4.7.9 6.6 2.1l1.5-1.4A11.8 11.8 0 0012 9.5c-3 0-6 .9-8.1 3.2zM1.7 9.5l1.4 1.4A15 15 0 0112 7.5c3.8 0 7.2 1.2 8.9 3.4l1.4-1.4C20 6.8 16.2 5.5 12 5.5S4 6.8 1.7 9.5z"/>157      </svg>158      <!-- Battery -->159      <svg class="icon-battery" viewBox="0 0 24 24">160        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>161        <rect x="4" y="9" width="10" height="6" fill="#fff"/>162        <rect x="20" y="10" width="2" height="4" rx="1" fill="#fff"/>163      </svg>164    </div>165  </div>166 167  <!-- Track info overlay -->168  <div class="track-overlay">169    <div class="pill-black">Lord Huron - The Night We Met (Slowed down)</div>170    <div class="pill-artist">Tina</div>171    <div class="pill-behind">172      <svg class="eq-bars" viewBox="0 0 24 24">173        <rect x="3" y="12" width="3" height="8" fill="#777"/>174        <rect x="9" y="9" width="3" height="11" fill="#777"/>175        <rect x="15" y="6" width="3" height="14" fill="#777"/>176      </svg>177      <span>Behind this track</span>178    </div>179  </div>180 181  <!-- Floating action buttons -->182  <div class="floating-actions">183    <div class="float-btn" title="Collapse">184      <svg viewBox="0 0 24 24">185        <path d="M7 10l5 5 5-5" />186      </svg>187    </div>188    <div class="float-btn" title="Profile add">189      <svg viewBox="0 0 24 24">190        <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-6 7c0-3.3 3.6-5 6-5s6 1.7 6 5v1H6v-1z" />191        <rect x="16.5" y="4.5" width="7" height="3" rx="1.5" fill="#e6e6e6"/>192      </svg>193    </div>194  </div>195 196  <!-- Bottom Share Sheet -->197  <div class="sheet">198    <div class="handle"></div>199    <div class="sheet-content">200      <div class="share-text">201        Listen to Lord Huron - The Night We Met (Slowed down) by Tina on #SoundCloud...202      </div>203 204      <div class="actions-row">205        <div class="outline-btn">206          <div class="square-icon"></div>207          <span>Copy</span>208        </div>209        <div class="outline-btn">210          <svg width="40" height="40" viewBox="0 0 24 24" style="fill:#c7a967">211            <path d="M3 12h6l-2.5-2.5L8 8l5 4-5 4-1.5-1.5L9 13H3v-1zm18 0h-6l2.5 2.5L16 16l-5-4 5-4 1.5 1.5L15 11h6v1z"/>212          </svg>213          <span>Nearby</span>214        </div>215      </div>216 217      <div class="no-reco">No recommended people to share with</div>218 219      <div class="apps">220        <div class="app">221          <div class="icon">M</div>222          <label>Gmail</label>223        </div>224        <div class="app">225          <div class="icon">💬</div>226          <label>Messages</label>227        </div>228        <div class="app">229          <div class="icon">T</div>230          <label>Telegram</label>231        </div>232        <div class="app">233          <div class="icon">△</div>234          <label>Drive</label>235        </div>236      </div>237    </div>238  </div>239 240  <div class="gesture-bar"></div>241</div>242</body>243</html>