GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Forward Message UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #FFFFFF; color: #1a1a1a;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  /* Status bar */15  .status-bar {16    height: 110px;17    padding: 0 40px;18    display: flex; align-items: center; justify-content: space-between;19    color: #2b2b2b;20  }21  .status-left { font-size: 40px; font-weight: 600; }22  .status-right { display: flex; gap: 26px; align-items: center; }23  .icon { width: 42px; height: 42px; }24  /* App bar */25  .appbar {26    height: 130px;27    padding: 0 30px;28    display: flex; align-items: center; gap: 22px;29    border-bottom: 1px solid #EAEAEA;30  }31  .back-btn svg { width: 64px; height: 64px; }32  .title { font-size: 52px; font-weight: 700; }33  /* Message forward box */34  .forward-box {35    margin: 26px 30px 18px;36    background: #EAF1F8;37    border-radius: 28px;38    padding: 28px;39  }40  .message-card {41    background: #fff;42    border-radius: 22px;43    padding: 34px 34px;44    border-left: 10px solid #1976D2;45    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;46    position: relative;47  }48  .message-card .reply-icon {49    position: absolute; left: 40px; top: 20px;50    width: 40px; height: 40px;51  }52  .message-text { font-size: 42px; margin-top: 22px; color: #222; }53  .optional-input {54    margin-top: 26px; font-size: 36px; color: #8a8a8a;55  }56  /* Search */57  .search-field {58    margin: 26px 30px;59    height: 96px; border-radius: 24px;60    background: #F1F1F1;61    display: flex; align-items: center;62    padding: 0 26px; color: #7a7a7a; font-size: 38px;63  }64  .search-field svg { width: 44px; height: 44px; margin-right: 16px; }65  /* Section headers */66  .section-title {67    margin: 8px 30px 12px;68    color: #808080; font-size: 36px; font-weight: 600;69  }70  /* List */71  .list { margin: 0 30px; }72  .list-item {73    display: flex; align-items: center;74    height: 150px;75  }76  .avatar {77    width: 100px; height: 100px;78    background: #E0E0E0; border: 1px solid #BDBDBD;79    display: flex; justify-content: center; align-items: center;80    color: #757575; font-size: 28px;81    border-radius: 20px; /* default rounded-square */82  }83  .circle { border-radius: 50%; }84  .item-info { flex: 1; margin-left: 26px; }85  .name {86    font-size: 42px; font-weight: 700; display: flex; align-items: center; gap: 14px;87  }88  .sub { font-size: 32px; color: #8a8a8a; }89  .verified {90    width: 40px; height: 40px;91    display: inline-flex; align-items: center; justify-content: center;92  }93  .presence {94    position: absolute;95    width: 18px; height: 18px; border-radius: 50%;96    border: 3px solid #fff; background: #37d159;97    right: -6px; bottom: -6px;98  }99  .send-btn {100    width: 210px; height: 82px; border-radius: 42px;101    background: linear-gradient(135deg, #32B6F2, #0E5EC5);102    color: #fff; font-weight: 700; font-size: 36px;103    display: flex; align-items: center; justify-content: center;104    box-shadow: 0 6px 12px rgba(14,94,197,0.25);105  }106  .divider {107    height: 1px; background: #E5E5E5;108    margin-left: 150px;109  }110  /* Bottom */111  .bottom-area {112    position: absolute; left: 0; right: 0;113    bottom: 0; padding-bottom: 120px;114  }115  .done-wrap { display: flex; justify-content: center; }116  .done-btn {117    width: 280px; height: 94px; border-radius: 48px;118    background: linear-gradient(135deg, #BFE2FF, #9CC4E8);119    color: #4f6e8d; font-size: 40px; font-weight: 800;120    display: flex; align-items: center; justify-content: center;121  }122  .home-indicator {123    position: absolute; left: 50%; transform: translateX(-50%);124    bottom: 38px; width: 360px; height: 14px; background: #9A9A9A; border-radius: 7px;125    opacity: .6;126  }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Top status bar -->133  <div class="status-bar">134    <div class="status-left">3:13</div>135    <div class="status-right">136      <!-- simple person/steps icon -->137      <svg class="icon" viewBox="0 0 48 48">138        <circle cx="24" cy="14" r="8" fill="#707070"/>139        <path d="M8 44c3-8 10-12 16-12s13 4 16 12" fill="none" stroke="#707070" stroke-width="4" stroke-linecap="round"/>140      </svg>141      <!-- wifi -->142      <svg class="icon" viewBox="0 0 48 48">143        <path d="M6 18c10-10 26-10 36 0" fill="none" stroke="#707070" stroke-width="4" stroke-linecap="round"/>144        <path d="M12 24c7-7 17-7 24 0" fill="none" stroke="#707070" stroke-width="4" stroke-linecap="round"/>145        <path d="M18 30c4-4 8-4 12 0" fill="none" stroke="#707070" stroke-width="4" stroke-linecap="round"/>146        <circle cx="24" cy="36" r="3.5" fill="#707070"/>147      </svg>148      <!-- battery -->149      <svg class="icon" viewBox="0 0 48 48">150        <rect x="6" y="12" width="32" height="24" rx="5" ry="5" fill="none" stroke="#707070" stroke-width="4"/>151        <rect x="10" y="16" width="24" height="16" rx="4" ry="4" fill="#707070"/>152        <rect x="40" y="18" width="4" height="16" rx="2" fill="#707070"/>153      </svg>154    </div>155  </div>156 157  <!-- App bar -->158  <div class="appbar">159    <div class="back-btn">160      <svg viewBox="0 0 48 48">161        <path d="M30 10 L16 24 L30 38" fill="none" stroke="#202020" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>162      </svg>163    </div>164    <div class="title">Forward Message</div>165  </div>166 167  <!-- Forward area -->168  <div class="forward-box">169    <div class="message-card">170      <svg class="reply-icon" viewBox="0 0 48 48">171        <path d="M28 14 L16 24 L28 34" fill="none" stroke="#1B73D1" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>172      </svg>173      <div class="message-text">How are you doing?</div>174    </div>175    <div class="optional-input">Type a message here (optional)</div>176  </div>177 178  <!-- Search -->179  <div class="search-field">180    <svg viewBox="0 0 48 48">181      <circle cx="22" cy="22" r="12" fill="none" stroke="#8a8a8a" stroke-width="4"/>182      <path d="M34 34 L44 44" stroke="#8a8a8a" stroke-width="4" stroke-linecap="round"/>183    </svg>184    <span>Search people and groups</span>185  </div>186 187  <!-- Suggested -->188  <div class="section-title">Suggested</div>189  <div class="list">190 191    <!-- Item 1 -->192    <div class="list-item">193      <div class="avatar" style="border-radius: 16px;">194        [IMG: User Avatar]195      </div>196      <div class="item-info">197        <div class="name">198          Natalie Larson (You)199          <span class="verified">200            <svg viewBox="0 0 48 48">201              <circle cx="24" cy="24" r="20" fill="#1DA1F2"/>202              <path d="M16 24l6 6 10-12" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>203            </svg>204          </span>205        </div>206      </div>207      <div class="send-btn">Send</div>208    </div>209    <div class="divider"></div>210 211    <!-- Item 2 -->212    <div class="list-item">213      <div style="position: relative;">214        <div class="avatar circle">[IMG: Avatar]</div>215        <div class="presence"></div>216      </div>217      <div class="item-info">218        <div class="name">Richard Wagner</div>219      </div>220      <div class="send-btn">Send</div>221    </div>222    <div class="divider"></div>223 224    <!-- Item 3 -->225    <div class="list-item">226      <div class="avatar circle">[IMG: Avatar]</div>227      <div class="item-info">228        <div class="name">Amelia miller</div>229      </div>230      <div class="send-btn">Send</div>231    </div>232    <div class="divider"></div>233 234    <!-- Item 4 -->235    <div class="list-item">236      <div class="avatar circle">[IMG: Group Avatar]</div>237      <div class="item-info">238        <div class="name">Friends</div>239      </div>240      <div class="send-btn">Send</div>241    </div>242    <div class="divider"></div>243 244    <!-- Item 5 -->245    <div class="list-item">246      <div class="avatar" style="border-radius: 22px;">[IMG: Bing Logo]</div>247      <div class="item-info">248        <div class="name">249          Bing250          <span class="verified">251            <svg viewBox="0 0 48 48">252              <circle cx="24" cy="24" r="20" fill="#1DA1F2"/>253              <path d="M16 24l6 6 10-12" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>254            </svg>255          </span>256        </div>257      </div>258      <div class="send-btn">Send</div>259    </div>260    <div class="divider"></div>261 262    <!-- Item 6 -->263    <div class="list-item">264      <div class="avatar" style="border-radius: 22px;">[IMG: Skype Logo]</div>265      <div class="item-info">266        <div class="name">267          Skype268          <span class="verified">269            <svg viewBox="0 0 48 48">270              <circle cx="24" cy="24" r="20" fill="#1DA1F2"/>271              <path d="M16 24l6 6 10-12" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>272            </svg>273          </span>274        </div>275      </div>276      <div class="send-btn">Send</div>277    </div>278 279  </div>280 281  <!-- People section title -->282  <div class="section-title" style="margin-top: 18px;">People</div>283 284  <!-- Bottom Done button and home indicator -->285  <div class="bottom-area">286    <div class="done-wrap">287      <div class="done-btn">Done</div>288    </div>289  </div>290  <div class="home-indicator"></div>291 292</div>293</body>294</html>