GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Render</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    box-sizing:border-box;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color:#222;14  }15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:110px;18    padding:0 32px;19    display:flex; align-items:center; justify-content:space-between;20    font-weight:600; font-size:42px; color:#2c2c2c;21  }22  .status-left { display:flex; align-items:center; gap:18px; }23  .notif-dot { width:22px; height:22px; background:#3a3a3a; border-radius:50%; }24  .status-right { display:flex; align-items:center; gap:22px; }25  .icon-mini svg { width:42px; height:42px; }26  .title {27    position:absolute; top:150px; width:100%;28    text-align:center; font-size:64px; font-weight:800; color:#5b5b5b;29  }30  .content {31    position:absolute; left:32px; right:32px; top:250px; bottom:200px;32    overflow:hidden;33  }34  .feed-scroll {35    position:absolute; left:0; right:0; top:0; bottom:0;36    overflow-y:auto; padding-bottom:220px;37  }38  .card {39    background:#fff; border-radius:36px;40    box-shadow:0 8px 24px rgba(0,0,0,0.06);41    border:1px solid #eee;42    margin-bottom:36px;43  }44  .card .inner { padding:34px; }45  .banner {46    height:460px; border-top-left-radius:36px; border-top-right-radius:36px;47    background:#E0E0E0; border-bottom:1px solid #BDBDBD;48    display:flex; align-items:center; justify-content:center;49    color:#757575; font-size:40px; font-weight:600;50  }51  .pill-row { display:flex; align-items:center; gap:22px; margin-top:20px; }52  .pill {53    background:#FFE49A; color:#7a5b00; font-weight:800; letter-spacing:1px;54    padding:14px 28px; border-radius:18px; font-size:34px;55  }56  .muted { color:#9c9c9c; font-size:34px; }57  .headline {58    font-size:52px; line-height:1.3; margin-top:18px;59  }60  .headline .link { color:#2196F3; font-weight:800; text-decoration:none; }61  /* Profile card */62  .profile-row { display:flex; align-items:center; gap:24px; }63  .avatar {64    width:110px; height:110px; border-radius:60px; background:#ddd; border:1px solid #cfcfcf;65    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:54px; color:#666;66  }67  .name { font-size:46px; font-weight:800; }68  .xp-text { font-size:52px; margin-top:22px; }69  .action-row { display:flex; align-items:center; justify-content:space-between; margin-top:30px; }70  .share-btn {71    display:flex; align-items:center; gap:18px;72    border:2px solid #E6E6E6; border-radius:28px; padding:22px 34px; color:#3c3c3c;73    font-size:40px; font-weight:700;74    background:#fafafa;75  }76  .share-btn svg { width:42px; height:42px; }77  .reaction { display:flex; align-items:center; gap:18px; }78  .reaction .bubble {79    width:90px; height:90px; border-radius:50%; background:#f7f7f7; border:1px solid #e0e0e0;80    display:flex; align-items:center; justify-content:center; font-size:46px;81  }82  .big-card {83    height:640px; background:#FFA531; border-radius:36px; position:relative; overflow:hidden;84    display:flex; align-items:center; padding-left:60px;85    color:#fff;86  }87  .big-number { font-size:220px; font-weight:900; }88  .calendar-placeholder {89    position:absolute; right:80px; bottom:80px;90    width:320px; height:380px; background:#E0E0E0; border:1px solid #BDBDBD;91    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; font-weight:700;92    border-radius:28px;93  }94  .small-muted { margin-top:20px; color:#9c9c9c; font-size:34px; padding:0 10px 26px 10px; }95  /* Bottom navigation bar */96  .bottom-nav {97    position:absolute; left:0; right:0; bottom:0; height:190px;98    background:#fff; border-top:1px solid #eaeaea;99    display:flex; align-items:center; justify-content:space-around;100    padding:20px 40px;101  }102  .nav-item { width:140px; height:120px; display:flex; align-items:center; justify-content:center; border-radius:28px; }103  .nav-item svg { width:84px; height:84px; }104  .nav-active { background:#E8F3FF; border:2px solid #9fd3ff; }105  .nav-blue { color:#2a9df4; }106  .nav-label { font-size:46px; font-weight:800; color:#2a9df4; }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status Bar -->113  <div class="status-bar">114    <div class="status-left">115      <div class="time">8:01</div>116      <div class="notif-dot"></div>117      <div class="notif-dot"></div>118      <div class="notif-dot"></div>119      <div class="notif-dot"></div>120      <div class="notif-dot" style="opacity:.6"></div>121    </div>122    <div class="status-right">123      <div class="icon-mini">124        <!-- Wi-Fi -->125        <svg viewBox="0 0 24 24">126          <path d="M2 9c9-7 11-7 20 0M5 12c6-5 8-5 14 0M8 15c4-3 6-3 10 0M12 19l2 2-2 2-2-2 2-2z" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>127        </svg>128      </div>129      <div class="icon-mini">130        <!-- Battery -->131        <svg viewBox="0 0 28 24">132          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>133          <rect x="4" y="8" width="12" height="8" fill="#333"/>134          <rect x="22" y="9" width="4" height="8" rx="1" fill="#333"/>135        </svg>136      </div>137    </div>138  </div>139 140  <!-- Title -->141  <div class="title">Feed</div>142 143  <!-- Content Area -->144  <div class="content">145    <div class="feed-scroll">146 147      <!-- Card 1: Culture -->148      <div class="card">149        <div class="banner">[IMG: Skeleton owl banner]</div>150        <div class="inner">151          <div class="pill-row">152            <div class="pill">CULTURE</div>153            <div class="muted">1 day</div>154          </div>155          <div class="headline">👻 We rounded up the spookiest words in other languages. <a class="link" href="#">Read if you dare!</a></div>156        </div>157      </div>158 159      <!-- Card 2: Profile XP -->160      <div class="card">161        <div class="inner">162          <div class="profile-row">163            <div class="avatar">C</div>164            <div>165              <div class="name">Michael Nguyen</div>166              <div class="muted" style="margin-top:6px;">1 day</div>167            </div>168            <div style="margin-left:auto;">169              <!-- playful sticker -->170              <div style="width:190px; height:230px; background:#FFF7D1; border:2px dashed #FFD26E; border-radius:30px; display:flex; align-items:center; justify-content:center; color:#d39d00; font-size:40px; font-weight:800;">Sticker</div>171            </div>172          </div>173          <div class="xp-text">Earned a total of 100 XP!</div>174          <div class="action-row">175            <div class="share-btn">176              <svg viewBox="0 0 24 24">177                <path d="M12 3v10M12 3l-5 5M12 3l5 5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178                <rect x="4" y="13" width="16" height="8" rx="2" stroke="#333" stroke-width="2" fill="none"/>179              </svg>180              <span>SHARE</span>181            </div>182            <div class="reaction">183              <div class="bubble">🎉</div>184              <div style="font-size:40px; color:#9c9c9c;">0</div>185            </div>186          </div>187        </div>188      </div>189 190      <!-- Card 3: 365 -->191      <div class="card">192        <div class="big-card">193          <div class="big-number">365</div>194          <div class="calendar-placeholder">[IMG: Calendar graphic]</div>195        </div>196        <div class="small-muted">1 day</div>197      </div>198 199    </div>200  </div>201 202  <!-- Bottom Navigation -->203  <div class="bottom-nav">204    <div class="nav-item">205      <!-- Home icon -->206      <svg viewBox="0 0 24 24">207        <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" fill="#ff6f61"/>208        <rect x="9" y="14" width="6" height="6" fill="#d24c3f"/>209      </svg>210    </div>211    <div class="nav-item">212      <div class="nav-label">क</div>213    </div>214    <div class="nav-item">215      <!-- Shield -->216      <svg viewBox="0 0 24 24">217        <path d="M12 2l9 4v6c0 6-5 9-9 10-4-1-9-4-9-10V6l9-4z" fill="#c79e6b"/>218      </svg>219    </div>220    <div class="nav-item">221      <!-- Face -->222      <svg viewBox="0 0 24 24">223        <circle cx="12" cy="12" r="10" fill="#9b7bd1"/>224        <circle cx="9" cy="11" r="1.6" fill="#fff"/>225        <circle cx="15" cy="11" r="1.6" fill="#fff"/>226        <path d="M8 15c2 2 6 2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>227      </svg>228    </div>229    <div class="nav-item">230      <!-- Chest -->231      <svg viewBox="0 0 24 24">232        <rect x="3" y="7" width="18" height="12" rx="2" fill="#d7982c"/>233        <rect x="3" y="7" width="18" height="4" fill="#c0801b"/>234        <rect x="10" y="11" width="4" height="4" fill="#6d4c17"/>235      </svg>236    </div>237    <div class="nav-item nav-active">238      <!-- Bell -->239      <svg viewBox="0 0 24 24">240        <path d="M12 3c-3 0-4 2-4 4v3c0 2-1 3-2 4h16c-1-1-2-2-2-4V7c0-2-1-4-4-4z" fill="#f7b500"/>241        <circle cx="12" cy="20" r="2.4" fill="#f7b500"/>242      </svg>243    </div>244  </div>245 246</div>247</body>248</html>