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 - Birthday Song</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #E0E0E0;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0; height: 110px;17    padding: 32px 40px 0 40px; box-sizing: border-box; color: #EDEDED;18    font-size: 44px; line-height: 44px;19  }20  .status-right { position: absolute; right: 40px; top: 32px; display: flex; align-items: center; gap: 26px; }21  .status-icon svg { width: 48px; height: 48px; fill: none; stroke: #EDEDED; stroke-width: 4; }22 23  /* Top app bar */24  .app-bar {25    position: absolute; top: 110px; left: 0; right: 0; height: 120px; padding: 0 36px;26    display: flex; align-items: center; gap: 36px; color: #BDBDBD;27  }28  .app-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }29  .app-icon svg { width: 60px; height: 60px; fill: none; stroke: #BDBDBD; stroke-width: 5; }30  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }31 32  /* Content card preview behind sheet */33  .preview-card {34    position: absolute; top: 260px; left: 24px; right: 24px; height: 900px;35    background: #1A1A1A; border-radius: 40px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);36  }37  .preview-text {38    position: absolute; top: 320px; left: 64px; color: #9E9E9E;39  }40  .preview-text .title { font-size: 72px; font-weight: 500; margin-bottom: 20px; }41  .preview-text .sub { font-size: 40px; color: #7D7D7D; }42 43  /* Bottom sheet */44  .sheet {45    position: absolute; left: 0; right: 0; bottom: 0; height: 1150px;46    background: #1E1E1E; border-top-left-radius: 48px; border-top-right-radius: 48px;47    box-shadow: 0 -20px 40px rgba(0,0,0,0.5);48  }49  .drag-handle {50    position: absolute; top: 32px; left: 50%; transform: translateX(-50%);51    width: 140px; height: 12px; background: #3A3A3A; border-radius: 999px;52  }53 54  .file-row {55    position: absolute; top: 120px; left: 40px; right: 40px; display: flex; align-items: center; gap: 32px;56  }57  .file-icon {58    width: 96px; height: 96px; background: #7E7E7E; border-radius: 12px; position: relative;59  }60  .file-icon::after {61    content: ""; position: absolute; right: 0; top: 0; width: 34px; height: 34px;62    background: #9A9A9A; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);63    border-top-right-radius: 12px;64  }65  .file-name {66    font-size: 48px; color: #C8C8C8;67  }68 69  .nearby {70    position: absolute; top: 260px; left: 50%; transform: translateX(-50%);71    display: inline-flex; align-items: center; gap: 18px;72    padding: 22px 34px; border-radius: 22px; border: 2px solid #4A89FF; color: #CFE0FF; background: #202020;73    font-size: 44px;74  }75  .nearby svg { width: 54px; height: 54px; stroke: #88B1FF; stroke-width: 6; fill: none; }76 77  .no-reco {78    position: absolute; top: 420px; left: 0; right: 0; text-align: center; font-size: 44px; color: #9D9D9D;79  }80 81  .apps {82    position: absolute; bottom: 160px; left: 0; right: 0; display: flex; justify-content: space-around; padding: 0 40px;83  }84  .app {85    width: 200px; text-align: center; color: #CFCFCF;86  }87  .app .icon {88    width: 150px; height: 150px; border-radius: 75px; background: #E0E0E0; border: 1px solid #BDBDBD;89    display: flex; align-items: center; justify-content: center; color: #757575; margin: 0 auto 20px;90    font-size: 32px;91  }92  .app .label { font-size: 36px; }93 94  /* Bottom gesture pill */95  .gesture-pill {96    position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);97    width: 320px; height: 16px; border-radius: 999px; background: #9A9A9A;98    opacity: 0.55;99  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status Bar -->106  <div class="status-bar">107    <div>8:48</div>108    <div class="status-right">109      <div class="status-icon">110        <!-- Wi-Fi -->111        <svg viewBox="0 0 24 24">112          <path d="M2 9c5-4 15-4 20 0" />113          <path d="M5 13c3-3 11-3 14 0" />114          <path d="M8 17c2-2 6-2 8 0" />115          <circle cx="12" cy="20" r="1.8" fill="#EDEDED"></circle>116        </svg>117      </div>118      <div class="status-icon">119        <!-- Battery -->120        <svg viewBox="0 0 26 24">121          <rect x="2" y="4" width="18" height="14" rx="2" stroke="#EDEDED" />122          <rect x="21" y="8" width="3" height="6" rx="1" stroke="#EDEDED" />123          <path d="M10 7l-3 6h4l-2 5 6-9h-5z" fill="#EDEDED" stroke="none"></path>124        </svg>125      </div>126    </div>127  </div>128 129  <!-- App Bar -->130  <div class="app-bar">131    <div class="app-icon">132      <!-- Back -->133      <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" /></svg>134    </div>135    <div style="margin-left: 0; display: flex; gap: 18px; align-items: center;"></div>136    <div class="app-actions">137      <div class="app-icon">138        <!-- Star -->139        <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4.3 1.1 6.5-5.6-3-5.6 3 1.1-6.5L3 9.9 9 9l3-6z"/></svg>140      </div>141      <div class="app-icon">142        <!-- Share -->143        <svg viewBox="0 0 24 24">144          <circle cx="5" cy="12" r="2.4" />145          <circle cx="18.5" cy="6.5" r="2.4" />146          <circle cx="18.5" cy="17.5" r="2.4" />147          <path d="M7.5 11.5l8-4.5M7.5 12.5l8 4.5" />148        </svg>149      </div>150      <div class="app-icon">151        <!-- Scissors (trim) -->152        <svg viewBox="0 0 24 24">153          <circle cx="6" cy="7" r="3" />154          <circle cx="6" cy="17" r="3" />155          <path d="M9 9l6 4M9 15l6-4" />156        </svg>157      </div>158      <div class="app-icon">159        <!-- Search -->160        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.3-4.3"/></svg>161      </div>162      <div class="app-icon">163        <!-- More (vertical) -->164        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>165      </div>166    </div>167  </div>168 169  <!-- Preview card (behind sheet) -->170  <div class="preview-card"></div>171  <div class="preview-text">172    <div class="title">Birthday Song</div>173    <div class="sub">Thu, Dec 14 • 7:56 AM</div>174  </div>175 176  <!-- Bottom Sheet -->177  <div class="sheet">178    <div class="drag-handle"></div>179 180    <div class="file-row">181      <div class="file-icon"></div>182      <div class="file-name">Birthday Song .m4a</div>183    </div>184 185    <div class="nearby">186      <!-- Nearby icon -->187      <svg viewBox="0 0 24 24">188        <path d="M4 12c2-4 6-4 8 0M12 12c2-4 6-4 8 0" />189      </svg>190      <span>Nearby</span>191    </div>192 193    <div class="no-reco">No recommended people to share with</div>194 195    <div class="apps">196      <div class="app">197        <div class="icon">[IMG: Gmail Icon]</div>198        <div class="label">Gmail</div>199      </div>200      <div class="app">201        <div class="icon">[IMG: Messages Icon]</div>202        <div class="label">Messages</div>203      </div>204      <div class="app">205        <div class="icon">[IMG: Drive Icon]</div>206        <div class="label">Drive</div>207      </div>208      <div class="app">209        <div class="icon">[IMG: Files Icon]</div>210        <div class="label">Files by Goo…</div>211        <div style="color:#9E9E9E; font-size:30px; margin-top:6px;">Download</div>212      </div>213    </div>214  </div>215 216  <!-- System gesture pill -->217  <div class="gesture-pill"></div>218</div>219</body>220</html>