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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px; height: 2400px; overflow: hidden;12    background: linear-gradient(180deg, #0a2e3a 0%, #14667a 40%, #1d7fa1 100%);13  }14 15  /* Status bar */16  .statusbar {17    position: absolute; top: 0; left: 0; width: 100%; height: 110px;18    background: #0a2b36;19    color: #ffffff;20    display: flex; align-items: center;21    padding: 0 36px;22    box-sizing: border-box;23    letter-spacing: 0.5px;24    font-size: 34px;25  }26  .status-left { flex: 0 0 auto; }27  .status-center { flex: 1 1 auto; text-align: center; color: #b9d6df; font-size: 30px; }28  .status-right { flex: 0 0 auto; display: flex; align-items: center; gap: 26px; }29 30  /* Toolbar */31  .toolbar {32    position: absolute; top: 110px; left: 0; width: 100%; height: 150px;33    background: rgba(16, 84, 95, 0.95);34    color: #eaf7fb;35    box-sizing: border-box;36    padding: 0 28px;37    display: flex; align-items: center; justify-content: space-between;38  }39  .toolbar-title {40    position: absolute; left: 0; right: 0; text-align: center;41    font-size: 56px; font-weight: 600; letter-spacing: 1px;42  }43  .icon-btn { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; }44 45  /* Weather content placeholders */46  .content {47    position: absolute; top: 260px; left: 38px; right: 38px;48    color: #d7f0f6;49    font-size: 38px;50  }51  .bullet-row { display: flex; gap: 40px; align-items: center; margin: 26px 0; }52  .bullet { display: flex; align-items: center; gap: 18px; color: #e1f3f7; }53 54  /* Ad card placeholder */55  .ad-card {56    position: absolute; top: 730px; left: 90px; width: 900px; height: 520px;57    background: #E0E0E0; border: 1px solid #BDBDBD; box-sizing: border-box;58    display: flex; align-items: center; justify-content: center;59    color: #757575; font-size: 40px; border-radius: 10px;60  }61  .ad-label {62    position: absolute; right: 12px; top: -50px; color: #19343d; font-size: 38px;63  }64 65  /* Share sheet */66  .share-sheet {67    position: absolute; left: 0; bottom: 0; width: 100%; height: 1200px;68    background: #1f1f1f; color: #ffffff;69    border-top-left-radius: 40px; border-top-right-radius: 40px;70    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);71    box-sizing: border-box; padding: 120px 60px 40px;72  }73  .handle {74    position: absolute; top: 32px; left: 50%; transform: translateX(-50%);75    width: 140px; height: 16px; background: #3a3a3a; border-radius: 10px;76  }77  .share-title {78    font-size: 40px; line-height: 1.4; margin-bottom: 40px; color: #e9e9e9;79  }80  .actions { display: flex; gap: 36px; margin-bottom: 70px; }81  .action-btn {82    flex: 0 0 auto; width: 360px; height: 110px;83    border: 2px solid #52cfc1; border-radius: 20px;84    color: #ffffff; background: transparent;85    display: inline-flex; gap: 20px; align-items: center; justify-content: center;86    font-size: 40px;87  }88  .action-btn svg { width: 44px; height: 44px; fill: none; stroke: #52cfc1; stroke-width: 4px; }89 90  /* Contact chips */91  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }92  .contact { text-align: center; }93  .avatar {94    width: 160px; height: 160px; border-radius: 50%;95    display: inline-flex; align-items: center; justify-content: center;96    font-size: 80px; color: #1f1f1f; font-weight: 600; position: relative;97  }98  .avatar.blue { background: #3bc1da; }99  .avatar.orange { background: #f5a13d; }100  .avatar.pink { background: #ff4fa1; }101  .badge {102    position: absolute; right: -6px; bottom: -6px;103    width: 50px; height: 50px; border-radius: 50%; background: #2d9df5;104    border: 3px solid #1f1f1f; display: flex; align-items: center; justify-content: center;105  }106  .badge svg { width: 28px; height: 28px; fill: #ffffff; }107  .contact .name { margin-top: 16px; font-size: 34px; color: #cfcfcf; }108 109  /* Apps row */110  .apps { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }111  .app { text-align: center; }112  .app .icon {113    width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;114    border-radius: 28px; color: #757575;115    display: inline-flex; align-items: center; justify-content: center; font-size: 28px;116  }117  .app .label { margin-top: 16px; font-size: 34px; color: #e0e0e0; }118  .app .sub { font-size: 26px; color: #b7b7b7; margin-top: 8px; }119 120  /* Home indicator */121  .home-indicator {122    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);123    width: 420px; height: 12px; background: #e9e9e9; border-radius: 8px;124    opacity: 0.8;125  }126 127  /* Simple icons (hamburger & share) */128  .toolbar svg { stroke: #eaf7fb; fill: none; stroke-width: 6px; }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="statusbar">136    <div class="status-left">6:11</div>137    <div class="status-center">••••• •</div>138    <div class="status-right">139      <!-- Wi-Fi icon -->140      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M6 12c3-2 9-2 12 0M10 16c2-1 4-1 6 0M12 20l2-2-2-2-2 2 2 2"></path></svg>141      <!-- Battery icon -->142      <svg width="50" height="42" viewBox="0 0 28 18"><rect x="2" y="3" width="22" height="12" rx="2" stroke="#ffffff"/><rect x="24" y="6" width="2" height="6" fill="#ffffff"/></svg>143    </div>144  </div>145 146  <!-- Toolbar -->147  <div class="toolbar">148    <div class="icon-btn">149      <!-- Hamburger -->150      <svg width="60" height="60" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"></path></svg>151    </div>152    <div class="toolbar-title">Ivrea</div>153    <div class="icon-btn">154      <!-- Share icon -->155      <svg width="60" height="60" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8 12l8-6M8 12l8 6"></path></svg>156    </div>157  </div>158 159  <!-- Weather content -->160  <div class="content">161    <div class="bullet-row">162      <div class="bullet">163        <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#cfe9ef" fill="none" stroke-width="2"/></svg>164        <span>humidity: 45 %</span>165      </div>166      <div class="bullet">167        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 12h16l-4-3M20 12l-4 3" stroke="#cfe9ef" fill="none" stroke-width="2"/></svg>168        <span>light wind from S (5 kph)</span>169      </div>170    </div>171    <div class="bullet-row" style="opacity:0.8;">172      <div class="bullet">173        <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#cfe9ef" fill="none" stroke-width="2"/></svg>174        <span>dew point: 10°</span>175      </div>176    </div>177  </div>178 179  <!-- Ad card -->180  <div class="ad-card">181    [IMG: International Calling Ad]182    <div class="ad-label">Ad</div>183  </div>184 185  <!-- Share sheet overlay -->186  <div class="share-sheet">187    <div class="handle"></div>188 189    <div class="share-title">190      Weather&Radar - know your weather<br>191      https://app.weatherandradar.com/U13Q/enUSShare192    </div>193 194    <div class="actions">195      <div class="action-btn">196        <svg viewBox="0 0 24 24"><path d="M4 4h10v14H4z"></path><path d="M9 8h10v12H9z"></path></svg>197        <span>Copy</span>198      </div>199      <div class="action-btn">200        <svg viewBox="0 0 24 24"><path d="M6 12a6 6 0 0112 0M4 12a8 8 0 0116 0" stroke-linecap="round"></path></svg>201        <span>Nearby</span>202      </div>203    </div>204 205    <div class="grid">206      <div class="contact">207        <div class="avatar blue">M208          <div class="badge">209            <svg viewBox="0 0 24 24"><path d="M4 4h16v12l-4-3H4z"></path></svg>210          </div>211        </div>212        <div class="name">Mike Waggoner</div>213      </div>214      <div class="contact">215        <div class="avatar orange">J216          <div class="badge">217            <svg viewBox="0 0 24 24"><path d="M4 4h16v12l-4-3H4z"></path></svg>218          </div>219        </div>220        <div class="name">Josan Smith</div>221      </div>222      <div class="contact">223        <div class="avatar pink">J224          <div class="badge">225            <svg viewBox="0 0 24 24"><path d="M4 4h16v12l-4-3H4z"></path></svg>226          </div>227        </div>228        <div class="name">Janet</div>229      </div>230    </div>231 232    <div class="apps">233      <div class="app">234        <div class="icon">[IMG: Gmail Icon]</div>235        <div class="label">Gmail</div>236      </div>237      <div class="app">238        <div class="icon">[IMG: Drive Icon]</div>239        <div class="label">Drive</div>240      </div>241      <div class="app">242        <div class="icon">[IMG: TeraBox Icon]</div>243        <div class="label">TeraBox</div>244        <div class="sub">Save to Tera...</div>245      </div>246      <div class="app">247        <div class="icon">[IMG: Messages Icon]</div>248        <div class="label">Messages</div>249      </div>250    </div>251 252    <div class="home-indicator"></div>253  </div>254 255</div>256</body>257</html>