GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, height=2400, initial-scale=1.0">6<title>Community Thread UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 80px;26    padding: 20px 28px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #111;32    font-size: 30px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 20px;38    color: #444;39    font-size: 28px;40  }41  .icon {42    width: 34px;43    height: 34px;44  }45  .battery {46    display: inline-flex;47    align-items: center;48    gap: 10px;49    font-size: 26px;50    color: #111;51  }52 53  /* Header */54  .header {55    position: absolute;56    top: 80px;57    left: 0;58    width: 1080px;59    height: 160px;60    box-sizing: border-box;61    padding: 24px 28px;62    display: flex;63    align-items: center;64    gap: 20px;65  }66  .back-btn {67    width: 64px;68    height: 64px;69    border-radius: 32px;70    display: flex;71    align-items: center;72    justify-content: center;73  }74  .header-title {75    font-size: 40px;76    font-weight: 700;77    color: #222;78    white-space: nowrap;79    overflow: hidden;80    text-overflow: ellipsis;81    max-width: 800px;82  }83  .bell-wrap {84    margin-left: auto;85    position: relative;86    width: 56px;87    height: 56px;88  }89  .notif-dot {90    position: absolute;91    top: -6px;92    right: -6px;93    width: 36px;94    height: 36px;95    background: #ff4b5c;96    color: #fff;97    font-size: 24px;98    border-radius: 18px;99    display: flex;100    align-items: center;101    justify-content: center;102    box-shadow: 0 2px 4px rgba(0,0,0,0.15);103  }104 105  /* Tabs */106  .tabs {107    position: absolute;108    top: 200px;109    left: 0;110    width: 1080px;111    height: 120px;112    box-sizing: border-box;113    padding: 22px 28px;114    display: flex;115    align-items: center;116    gap: 22px;117  }118  .pill {119    padding: 18px 36px;120    border-radius: 28px;121    font-size: 32px;122    font-weight: 700;123    color: #777;124    background: #F1F1F1;125  }126  .pill.active {127    background: #ff6b8c;128    color: #fff;129    box-shadow: 0 4px 10px rgba(255, 107, 140, 0.35);130  }131 132  /* Feed area */133  .feed {134    position: absolute;135    top: 320px;136    left: 0;137    width: 1080px;138    height: 1880px;139    box-sizing: border-box;140    padding: 0 28px;141    overflow: hidden;142  }143 144  .item {145    position: relative;146    margin-bottom: 36px;147    display: flex;148    align-items: flex-start;149    gap: 22px;150  }151 152  .avatar {153    width: 72px;154    height: 72px;155    border-radius: 36px;156    display: flex;157    align-items: center;158    justify-content: center;159    font-size: 40px;160    color: #fff;161    flex: 0 0 72px;162  }163  .avatar.teal { background: #007b77; }164  .avatar.orange { background: #f39b2f; }165  .avatar.blue { background: #00a4ff; }166 167  .bubble {168    flex: 1;169    background: #F5F5F5;170    border-radius: 26px;171    padding: 26px;172    font-size: 36px;173    line-height: 1.35;174    color: #222;175    position: relative;176  }177  .meta {178    font-size: 28px;179    color: #999;180    margin-top: 8px;181  }182  .ellipsis {183    position: absolute;184    top: 16px;185    right: 16px;186    width: 48px;187    height: 48px;188    opacity: 0.6;189  }190 191  .like-badge {192    position: absolute;193    right: 16px;194    bottom: -26px;195    display: inline-flex;196    align-items: center;197    gap: 10px;198    padding: 8px 16px;199    background: #fff;200    border: 1px solid #E0E0E0;201    border-radius: 24px;202    color: #777;203    font-size: 28px;204  }205  .like-badge svg { width: 26px; height: 26px; }206 207  /* Reply pill */208  .reply-pill {209    margin: 22px 0 6px 94px;210    width: 780px;211    height: 72px;212    border-radius: 36px;213    border: 1px solid #E6E6E6;214    background: #ffffff;215    color: #aaa;216    font-size: 32px;217    display: flex;218    align-items: center;219    padding-left: 28px;220  }221 222  /* Ultrasound image placeholder */223  .image-placeholder {224    width: 930px;225    height: 420px;226    background: #E0E0E0;227    border: 1px solid #BDBDBD;228    border-radius: 16px;229    margin-top: 22px;230    display: flex;231    align-items: center;232    justify-content: center;233    color: #757575;234    font-size: 32px;235  }236 237  /* Bottom comment bar */238  .bottom-input {239    position: absolute;240    left: 0;241    bottom: 92px;242    width: 1080px;243    height: 96px;244    box-sizing: border-box;245    padding: 10px 24px;246    display: flex;247    align-items: center;248    gap: 16px;249    background: #fff;250    border-top: 1px solid #eee;251  }252  .cam-btn {253    width: 66px;254    height: 66px;255    border-radius: 33px;256    background: #F3F3F3;257    display: flex;258    align-items: center;259    justify-content: center;260  }261  .text-field {262    flex: 1;263    height: 66px;264    border-radius: 33px;265    border: 1px solid #E2E2E2;266    background: #fff;267    color: #aaa;268    font-size: 30px;269    display: flex;270    align-items: center;271    padding: 0 24px;272  }273  .send-btn {274    width: 70px;275    height: 70px;276    border-radius: 35px;277    background: #f1f1f1;278    display: flex;279    align-items: center;280    justify-content: center;281  }282 283  /* Home indicator */284  .home-indicator {285    position: absolute;286    bottom: 24px;287    left: 50%;288    transform: translateX(-50%);289    width: 340px;290    height: 10px;291    border-radius: 6px;292    background: #D0D0D0;293  }294</style>295</head>296<body>297<div id="render-target">298 299  <!-- Status bar -->300  <div class="status-bar">301    <div class="status-left">10:30</div>302    <div class="status-right">303      <!-- small icons -->304      <svg class="icon" viewBox="0 0 24 24">305        <path d="M2 12h20" stroke="#555" stroke-width="2" stroke-linecap="round"/>306        <path d="M6 8l12 8" stroke="#555" stroke-width="2" stroke-linecap="round"/>307      </svg>308      <svg class="icon" viewBox="0 0 24 24">309        <path d="M2 12a10 10 0 1 0 20 0A10 10 0 1 0 2 12z" stroke="#666" stroke-width="2" fill="none"/>310        <path d="M12 7v6l4 2" stroke="#666" stroke-width="2" stroke-linecap="round"/>311      </svg>312      <div class="battery">313        <svg class="icon" viewBox="0 0 28 16">314          <rect x="1" y="1" width="22" height="14" rx="3" ry="3" stroke="#333" stroke-width="2" fill="none"/>315          <rect x="3" y="3" width="18" height="10" rx="2" fill="#333"/>316          <rect x="24" y="5" width="3" height="6" rx="1" fill="#333"/>317        </svg>318        100%319      </div>320    </div>321  </div>322 323  <!-- Header with back and bell -->324  <div class="header">325    <div class="back-btn">326      <svg viewBox="0 0 24 24" width="40" height="40">327        <path d="M15 5l-7 7 7 7" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>328      </svg>329    </div>330    <div class="header-title">Baby's first photo: A place to shar...</div>331    <div class="bell-wrap">332      <svg viewBox="0 0 24 24" width="56" height="56">333        <path d="M12 3c-3 0-5 2-5 5v3c0 1-1 2-2 3v2h14v-2c-1-1-2-2-2-3V8c0-3-2-5-5-5z" fill="#111"/>334        <circle cx="12" cy="20" r="2" fill="#111"/>335      </svg>336      <div class="notif-dot">1</div>337    </div>338  </div>339 340  <!-- Tabs -->341  <div class="tabs">342    <div class="pill active">Top</div>343    <div class="pill">Newest</div>344    <div class="pill">My</div>345    <div class="pill">Expert</div>346  </div>347 348  <!-- Feed -->349  <div class="feed">350 351    <!-- (Previous message peek, clipped at top right with like badge) -->352    <div class="item" style="margin-top: 16px;">353      <div class="avatar teal">🐼</div>354      <div class="bubble">355        where to go its hard in life but your babies will be your motivation trust me356        <div class="meta">1w</div>357        <div class="like-badge">358          <svg viewBox="0 0 24 24">359            <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="#FF6B8C"/>360          </svg>361          14362        </div>363      </div>364    </div>365 366    <!-- Short reply -->367    <div class="item">368      <div class="avatar teal">🐼</div>369      <div class="bubble" style="max-width: 760px;">370        dont give up371        <svg class="ellipsis" viewBox="0 0 24 24">372          <circle cx="5" cy="12" r="2" fill="#888"/>373          <circle cx="12" cy="12" r="2" fill="#888"/>374          <circle cx="19" cy="12" r="2" fill="#888"/>375        </svg>376        <div class="meta">1w</div>377        <div class="like-badge">378          <svg viewBox="0 0 24 24">379            <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="#FF6B8C"/>380          </svg>4381        </div>382      </div>383    </div>384 385    <!-- Longer supportive comment -->386    <div class="item">387      <div class="avatar orange">🐼</div>388      <div class="bubble">389        You can do it girl you’re strong and if God gave u two it’s because he know you can handle it amd will be an amazing momma390        <svg class="ellipsis" viewBox="0 0 24 24">391          <circle cx="5" cy="12" r="2" fill="#888"/>392          <circle cx="12" cy="12" r="2" fill="#888"/>393          <circle cx="19" cy="12" r="2" fill="#888"/>394        </svg>395        <div class="meta">5d</div>396        <div class="like-badge">397          <svg viewBox="0 0 24 24">398            <path d="M12 21s-7-4.35-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.65-7 9-7 9z" fill="#FF6B8C"/>399          </svg>6400        </div>401      </div>402    </div>403 404    <!-- Inline reply field -->405    <div class="reply-pill">Write a reply …</div>406 407    <!-- Big comment with image -->408    <div class="item" style="margin-top: 16px;">409      <div class="avatar blue">🐱</div>410      <div class="bubble">411        In Portugal the first ultrasound is between 11 and 13 weeks. I was so nervous because I had a silence miscarriage months ago at 8 weeks.412 413        <br><br>414        My 🌈 baby is looking good. I’m so happy 🙌🏽🙌🏽🙌🏽415        <svg class="ellipsis" viewBox="0 0 24 24">416          <circle cx="5" cy="12" r="2" fill="#888"/>417          <circle cx="12" cy="12" r="2" fill="#888"/>418          <circle cx="19" cy="12" r="2" fill="#888"/>419        </svg>420 421        <div class="image-placeholder">[IMG: Ultrasound photo]</div>422      </div>423    </div>424 425  </div>426 427  <!-- Bottom comment composer -->428  <div class="bottom-input">429    <div class="cam-btn">430      <svg viewBox="0 0 24 24" width="36" height="36">431        <rect x="3" y="6" width="18" height="12" rx="2" fill="#777"/>432        <circle cx="12" cy="12" r="4" fill="#fff"/>433        <rect x="8" y="4" width="8" height="3" rx="1" fill="#777"/>434      </svg>435    </div>436    <div class="text-field">Write a comment...</div>437    <div class="send-btn">438      <svg viewBox="0 0 24 24" width="32" height="32">439        <path d="M3 12l18-8-8 18-2-7-8-3z" fill="#777"/>440      </svg>441    </div>442  </div>443 444  <!-- Home indicator -->445  <div class="home-indicator"></div>446</div>447</body>448</html>