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 - Google Fit</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #3f454b;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px; color: #ffffff; font-size: 38px;18    display: flex; align-items: center; padding: 0 40px; opacity: 0.9;19  }20  .status-left { display: flex; align-items: center; gap: 18px; }21  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }22  .status-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.3); }23 24  /* App bar */25  .app-bar {26    position: absolute; top: 120px; left: 0; right: 0; height: 140px;27    display: flex; align-items: center; padding: 0 36px; color: #e6eef8;28  }29  .back-btn, .menu-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }30  .menu-btn { margin-left: auto; }31  .fit-title { display: flex; align-items: center; gap: 24px; margin-left: 12px; }32  .fit-title .text { color: #dfe6f2; }33  .fit-title .text .main { font-size: 44px; font-weight: 700; letter-spacing: 0.2px; }34  .fit-title .text .sub { font-size: 34px; opacity: 0.8; margin-top: 6px; }35  .runner-icon { position: absolute; right: 40px; top: 210px; opacity: 0.7; }36 37  /* Center metric */38  .metric {39    position: absolute; top: 860px; left: 0; right: 0; text-align: center; color: #152742;40  }41  .metric .value { font-size: 180px; font-weight: 800; margin-bottom: 20px; }42  .metric .label { font-size: 48px; opacity: 0.85; }43 44  /* Bottom sheet */45  .sheet {46    position: absolute; left: 0; right: 0; bottom: 0;47    height: 1260px; background: #e9e6e6; border-top-left-radius: 48px; border-top-right-radius: 48px;48    box-shadow: 0 -10px 30px rgba(0,0,0,0.25);49  }50  .sheet-handle {51    width: 140px; height: 16px; background: #c7c7c7; border-radius: 10px;52    position: absolute; top: 22px; left: 50%; transform: translateX(-50%);53  }54  .preview-card {55    position: absolute; top: 120px; left: 50%; transform: translateX(-50%);56    width: 520px; height: 360px; border-radius: 60px;57    background: #e8f0ff; border: 2px solid #cfd8ea;58    display: flex; flex-direction: column; justify-content: center; align-items: center; color: #3b5ba5;59    text-align: center;60  }61  .preview-card .big { font-size: 96px; font-weight: 700; }62  .preview-card .small { font-size: 34px; opacity: 0.8; }63 64  .action-row {65    position: absolute; top: 520px; left: 0; right: 0;66    display: flex; justify-content: center; gap: 36px;67  }68  .action-btn {69    width: 420px; height: 120px; background: #f3f3f3; border: 3px solid #63666a; border-radius: 28px;70    display: flex; align-items: center; justify-content: center; gap: 20px; color: #2d3035; font-size: 44px; font-weight: 600;71  }72  .action-btn svg { width: 56px; height: 56px; }73 74  /* Contact suggestion */75  .suggestion {76    position: absolute; top: 700px; left: 80px; right: 80px; display: flex; align-items: center; gap: 28px;77  }78  .avatar {79    position: relative; width: 132px; height: 132px; border-radius: 50%; background: #2fa087; color: #ffffff;80    display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 700;81    box-shadow: 0 2px 6px rgba(0,0,0,0.2);82  }83  .gmail-chip {84    position: absolute; right: -6px; bottom: -6px;85    width: 52px; height: 52px; border-radius: 50%; border: 3px solid #ffffff; background: #E0E0E0;86    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px;87    box-shadow: 0 2px 6px rgba(0,0,0,0.15);88  }89  .suggestion .details { color: #2d3035; }90  .details .line1 { font-size: 44px; font-weight: 600; }91  .details .line2 { font-size: 36px; opacity: 0.7; margin-top: 6px; }92 93  /* App list */94  .apps {95    position: absolute; top: 900px; left: 40px; right: 40px;96    display: flex; justify-content: space-around; align-items: flex-start; text-align: center;97  }98  .app {99    width: 200px;100  }101  .app .icon-circle {102    width: 140px; height: 140px; border-radius: 50%; background: #ffffff; border: 1px solid #d0d0d0;103    display: flex; align-items: center; justify-content: center; margin: 0 auto 22px;104  }105  .app .icon-circle .img-ph {106    width: 110px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;107    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center;108    border-radius: 12px;109  }110  .app .label { font-size: 38px; color: #2d3035; }111  .app .sublabel { font-size: 30px; color: #6a6d70; margin-top: 6px; }112 113  /* Gesture handle at very bottom */114  .gesture {115    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);116    width: 220px; height: 12px; background: #bababa; border-radius: 10px;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status bar -->124  <div class="status-bar">125    <div class="status-left">126      <div>1:14</div>127      <div class="status-icon"></div>128    </div>129    <div class="status-right">130      <div class="status-icon"></div>131      <div class="status-icon"></div>132    </div>133  </div>134 135  <!-- App Bar -->136  <div class="app-bar">137    <div class="back-btn">138      <svg viewBox="0 0 24 24" width="56" height="56" fill="#ffffff">139        <path d="M15 5l-7 7 7 7" />140      </svg>141    </div>142 143    <div class="fit-title">144      <svg viewBox="0 0 24 24" width="72" height="72" fill="#12335a">145        <path d="M12 21s-6-3.8-8.5-6.3C1.5 12.6 2 9.7 4 8c2-1.8 4.7-1.4 6 0 1.3-1.4 4-1.8 6-.1 2.1 1.7 2.6 4.6.4 6.8C18 16 12 21 12 21z"/>146      </svg>147      <div class="text">148        <div class="main">Google Fit</div>149        <div class="sub">Dancing</div>150      </div>151    </div>152 153    <div class="menu-btn">154      <svg viewBox="0 0 24 24" width="48" height="48" fill="#ffffff">155        <circle cx="12" cy="5" r="2.3"></circle>156        <circle cx="12" cy="12" r="2.3"></circle>157        <circle cx="12" cy="19" r="2.3"></circle>158      </svg>159    </div>160 161    <div class="runner-icon">162      <svg viewBox="0 0 24 24" width="54" height="54" fill="#122a4d">163        <path d="M13 4a2 2 0 110 4 2 2 0 010-4zm-4 7l3 1 2 3 3 1-1 2-4-1-2-3-3 3-2-2 4-4z"/>164      </svg>165    </div>166  </div>167 168  <!-- Metric -->169  <div class="metric">170    <div class="value">1h</div>171    <div class="label">Active time</div>172  </div>173 174  <!-- Bottom sheet -->175  <div class="sheet">176    <div class="sheet-handle"></div>177 178    <div class="preview-card">179      <div class="big">1h</div>180      <div class="small">Active time</div>181    </div>182 183    <div class="action-row">184      <div class="action-btn">185        <svg viewBox="0 0 24 24">186          <path d="M5 12l4 0m6 0l4 0" stroke="#2d3035" stroke-width="2" fill="none" />187          <path d="M9 9l-3 3 3 3" fill="#2d3035"/>188        </svg>189        <div>Nearby</div>190      </div>191      <div class="action-btn">192        <svg viewBox="0 0 24 24">193          <path d="M3 21l5-2 9-9-3-3-9 9-2 5z" fill="#2d3035"/>194        </svg>195        <div>Edit</div>196      </div>197    </div>198 199    <div class="suggestion">200      <div class="avatar">C201        <div class="gmail-chip">M</div>202      </div>203      <div class="details">204        <div class="line1">dbwscratch</div>205        <div class="line2">test.id8@g...</div>206      </div>207    </div>208 209    <div class="apps">210      <div class="app">211        <div class="icon-circle">212          <div class="img-ph">[IMG: Gmail]</div>213        </div>214        <div class="label">Gmail</div>215      </div>216      <div class="app">217        <div class="icon-circle">218          <div class="img-ph">[IMG: Drive]</div>219        </div>220        <div class="label">Drive</div>221      </div>222      <div class="app">223        <div class="icon-circle">224          <div class="img-ph">[IMG: Messages]</div>225        </div>226        <div class="label">Messages</div>227      </div>228      <div class="app">229        <div class="icon-circle">230          <div class="img-ph">[IMG: Photos]</div>231        </div>232        <div class="label">Photos</div>233        <div class="sublabel">Upload to P...</div>234      </div>235    </div>236 237    <div class="gesture"></div>238  </div>239 240</div>241</body>242</html>