GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Swimming Class Share Sheet</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #2b2b2b;13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    background: #1e1e1e;24    display: flex;25    align-items: center;26    padding: 0 28px;27    box-sizing: border-box;28    font-size: 34px;29    letter-spacing: 0.5px;30  }31  .status-time { color: #ffffff; }32  .status-icons {33    margin-left: auto;34    display: flex;35    gap: 22px;36    align-items: center;37  }38  .status-dot {39    width: 18px; height: 18px; background: #bdbdbd; border-radius: 50%;40  }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 90px;46    left: 0;47    width: 1080px;48    height: 160px;49    background: #2f2f2f;50    display: flex;51    align-items: center;52    box-sizing: border-box;53    padding: 0 28px;54  }55  .icon-btn {56    width: 72px;57    height: 72px;58    display: inline-flex;59    align-items: center;60    justify-content: center;61    border-radius: 36px;62  }63  .title-area {64    margin-left: 18px;65    flex: 1;66  }67  .note-title {68    font-size: 56px;69    font-weight: 700;70    margin: 0;71    line-height: 1;72    color: #ffffff;73  }74  .note-date {75    margin-top: 14px;76    font-size: 34px;77    color: #cfcfcf;78  }79  .app-actions {80    display: flex;81    gap: 28px;82    align-items: center;83    margin-left: 10px;84  }85 86  /* Note body */87  .note-body {88    position: absolute;89    top: 250px;90    left: 0;91    right: 0;92    bottom: 0;93    padding: 48px 48px 440px 48px;94    box-sizing: border-box;95    color: #f7f7f7;96  }97  .note-text {98    font-size: 42px;99    line-height: 1.6;100    color: #e9e9e9;101  }102 103  /* Bottom sheet (share) */104  .bottom-sheet {105    position: absolute;106    left: 0;107    bottom: 0;108    width: 1080px;109    height: 1180px;110    background: #F5F7F3;111    border-top-left-radius: 42px;112    border-top-right-radius: 42px;113    box-shadow: 0 -6px 24px rgba(0,0,0,0.35);114    color: #212121;115    padding: 24px 40px 40px 40px;116    box-sizing: border-box;117  }118  .drag-handle {119    width: 110px;120    height: 12px;121    background: #d8dccd;122    border-radius: 6px;123    margin: 10px auto 36px auto;124  }125  .share-text {126    font-size: 38px;127    line-height: 1.5;128    color: #2d2d2d;129  }130  .action-row {131    display: flex;132    gap: 32px;133    margin-top: 40px;134  }135  .pill-btn {136    display: inline-flex;137    align-items: center;138    gap: 18px;139    font-size: 36px;140    padding: 22px 36px;141    border-radius: 22px;142    border: 2px solid #96A688;143    background: #ffffff;144    color: #2d2d2d;145  }146  .tag-pill {147    margin-top: 36px;148    border: 2px solid #c9c9c9;149    background: #ffffff;150    border-radius: 46px;151    padding: 28px 34px;152    font-size: 40px;153    width: 920px;154    box-sizing: border-box;155  }156 157  /* Contact block */158  .contact-row {159    display: flex;160    align-items: center;161    gap: 28px;162    margin-top: 48px;163  }164  .avatar {165    position: relative;166    width: 130px; height: 130px;167    border-radius: 65px;168    background: #de6c5f;169    display: flex; align-items: center; justify-content: center;170    color: #ffffff;171    font-weight: 700;172    font-size: 72px;173  }174  .avatar .bubble {175    position: absolute;176    right: 8px; bottom: 8px;177    width: 44px; height: 44px;178    background: #2F7AF6;179    border-radius: 22px;180    border: 4px solid #ffffff;181  }182  .contact-name { font-size: 40px; color: #2d2d2d; }183 184  /* App share targets */185  .targets {186    display: flex;187    justify-content: space-between;188    margin-top: 70px;189    padding: 0 40px 0 20px;190  }191  .target {192    width: 200px;193    text-align: center;194    color: #2d2d2d;195  }196  .target-icon {197    width: 160px; height: 160px;198    border-radius: 80px;199    margin: 0 auto 18px auto;200    background: #ffffff;201    border: 2px solid #d0d0d0;202    display: flex; align-items: center; justify-content: center;203  }204  .target-label { font-size: 34px; }205 206  /* Simple helper SVG styles */207  svg { display: block; }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status Bar -->214  <div class="status-bar">215    <div class="status-time">8:33</div>216    <div class="status-icons">217      <div class="status-dot"></div>218      <div class="status-dot"></div>219      <div class="status-dot"></div>220      <div class="status-dot"></div>221    </div>222  </div>223 224  <!-- App Bar -->225  <div class="app-bar">226    <div class="icon-btn">227      <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffffff">228        <path d="M14.5 5l-7 7 7 7 1.5-1.5L10 12l6-6z"/>229      </svg>230    </div>231    <div class="title-area">232      <h1 class="note-title">Swimming Class</h1>233      <div class="note-date">Tue 8 Aug 2023</div>234    </div>235    <div class="app-actions">236      <div class="icon-btn">237        <!-- pin -->238        <svg width="38" height="38" viewBox="0 0 24 24" fill="#e0e0e0">239          <path d="M14 3l-1 5 4 4-4 1-6 6 3-7-4-4 5-1 3-4z"/>240        </svg>241      </div>242      <div class="icon-btn">243        <!-- share -->244        <svg width="38" height="38" viewBox="0 0 24 24" fill="#e0e0e0">245          <path d="M18 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 20a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>246          <path d="M8.5 7.5l7 3.5-7 3.5" stroke="#e0e0e0" stroke-width="2" fill="none"/>247        </svg>248      </div>249      <div class="icon-btn">250        <!-- more -->251        <svg width="36" height="36" viewBox="0 0 24 24" fill="#e0e0e0">252          <circle cx="12" cy="5" r="2.2"></circle>253          <circle cx="12" cy="12" r="2.2"></circle>254          <circle cx="12" cy="19" r="2.2"></circle>255        </svg>256      </div>257    </div>258  </div>259 260  <!-- Note body -->261  <div class="note-body">262    <div class="note-text">263      the swimming class is scheduled on 10 august at 11 am. Se264    </div>265  </div>266 267  <!-- Bottom Sheet Share -->268  <div class="bottom-sheet">269    <div class="drag-handle"></div>270 271    <div class="share-text">272      the swimming class is scheduled on 10 august at 11 am. Se273    </div>274 275    <div class="action-row">276      <div class="pill-btn">277        <svg width="34" height="34" viewBox="0 0 24 24" fill="#556b2f">278          <path d="M16 1H5a2 2 0 0 0-2 2v15h2V3h11V1z"></path>279          <path d="M19 6H9a2 2 0 0 0-2 2v15l6-3 6 3V8a2 2 0 0 0-2-2z"></path>280        </svg>281        <span>Copy</span>282      </div>283      <div class="pill-btn">284        <svg width="34" height="34" viewBox="0 0 24 24" fill="#556b2f">285          <path d="M12 3l4 4-4 4-4-4 4-4zm-6 10l3 3-3 3-3-3 3-3zm12 0l3 3-3 3-3-3 3-3z"/>286        </svg>287        <span>Nearby</span>288      </div>289    </div>290 291    <div class="tag-pill">Swimming Class</div>292 293    <div class="contact-row">294      <div class="avatar">A295        <div class="bubble"></div>296      </div>297      <div class="contact-name">Anuj</div>298    </div>299 300    <div class="targets">301      <div class="target">302        <div class="target-icon">303          <!-- Gmail envelope -->304          <svg width="110" height="110" viewBox="0 0 24 24">305            <rect x="3" y="6" width="18" height="12" fill="#ffffff" stroke="#d32f2f" stroke-width="2"/>306            <path d="M3 6l9 6 9-6" stroke="#d32f2f" stroke-width="2" fill="none"/>307          </svg>308        </div>309        <div class="target-label">Gmail</div>310      </div>311 312      <div class="target">313        <div class="target-icon">314          <!-- Messages bubble -->315          <svg width="110" height="110" viewBox="0 0 24 24">316            <path d="M4 5h16v11H9l-5 3V5z" fill="#1e88e5" stroke="#1e88e5"/>317          </svg>318        </div>319        <div class="target-label">Messages</div>320      </div>321 322      <div class="target">323        <div class="target-icon">324          <!-- Drive triangle -->325          <svg width="110" height="110" viewBox="0 0 24 24">326            <path d="M9 3l6 0 5 9-6 9-6-9 5-9z" fill="#4caf50" opacity="0.85"/>327          </svg>328        </div>329        <div class="target-label">Drive</div>330      </div>331 332      <div class="target">333        <div class="target-icon">334          <!-- Chat two bubbles -->335          <svg width="110" height="110" viewBox="0 0 24 24">336            <path d="M3 5h12v8H7l-4 3V5z" fill="#388e3c"/>337            <rect x="12" y="9" width="9" height="8" fill="#66bb6a"/>338          </svg>339        </div>340        <div class="target-label">Chat</div>341      </div>342    </div>343  </div>344 345</div>346</body>347</html>