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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 34px;26    color: #1b1b1b;27  }28  .sb-left { display: flex; align-items: center; gap: 18px; }29  .sb-right { display: flex; align-items: center; gap: 22px; }30 31  /* Top app bar */32  .app-bar {33    height: 112px;34    padding: 0 28px;35    display: flex;36    align-items: center;37    justify-content: space-between;38  }39  .menu-wrap {40    position: relative;41    width: 64px; height: 64px;42    display: flex; align-items: center; justify-content: center;43  }44  .menu-wrap .dot {45    position: absolute; top: -6px; left: 4px;46    width: 16px; height: 16px; background: #FF3B30; border-radius: 50%;47  }48  .vip-pill {49    padding: 14px 26px;50    background: linear-gradient(180deg, #FFA938 0%, #FF8C19 100%);51    color: #fff;52    border-radius: 28px;53    font-weight: 700;54    display: inline-flex; align-items: center; gap: 10px;55    box-shadow: 0 4px 10px rgba(255,140,25,0.35);56    font-size: 30px;57  }58  .actions { display: flex; align-items: center; gap: 26px; }59 60  /* Chips */61  .chips-row {62    padding: 8px 20px 20px 20px;63    display: flex; align-items: center; gap: 18px;64  }65  .chip {66    padding: 18px 28px;67    border-radius: 28px;68    background: #ECEFF3;69    color: #666;70    font-weight: 600;71    font-size: 30px;72    display: inline-flex; align-items: center; gap: 12px;73  }74  .chip.active {75    background: #2F80ED;76    color: #fff;77  }78  .chip svg { width: 28px; height: 28px; }79  .right-icon {80    margin-left: auto;81    width: 72px; height: 72px; border-radius: 26px;82    background: #E7F2FF;83    display: flex; align-items: center; justify-content: center;84  }85 86  /* Ad banner placeholder */87  .ad-banner {88    height: 160px;89    margin: 0 0 16px 0;90    display: flex; align-items: center; justify-content: center;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    color: #757575;94    font-size: 30px;95  }96 97  /* Content card */98  .content {99    padding: 0 24px;100  }101  .card {102    width: 660px;103    background: #FFE9A6;104    border-radius: 26px;105    padding: 34px;106    box-shadow: 0 4px 10px rgba(0,0,0,0.05);107  }108  .card h3 {109    margin: 0 0 14px 0; font-size: 44px; line-height: 1.1; color: #1a1a1a;110  }111  .card p { margin: 0 0 36px 0; font-size: 32px; color: #6B6B6B; }112  .card .meta { font-size: 30px; color: #999; }113 114  /* Floating action button */115  .fab {116    position: absolute;117    right: 48px;118    bottom: 180px;119    width: 132px; height: 132px;120    border-radius: 50%;121    background: radial-gradient(60% 60% at 50% 50%, #37B8FF 0%, #1E86FF 100%);122    display: flex; align-items: center; justify-content: center;123    box-shadow: 0 14px 32px rgba(30,134,255,0.35);124  }125  .fab::after {126    content: "";127    position: absolute;128    inset: -14px;129    border-radius: 50%;130    background: rgba(30,134,255,0.15);131    z-index: -1;132  }133 134  /* Bottom gesture area */135  .gesture-area {136    position: absolute; left: 0; right: 0; bottom: 0;137    height: 120px; background: #000000;138    display: flex; align-items: center; justify-content: center;139  }140  .gesture-bar {141    width: 300px; height: 12px; background: #D0D0D0; border-radius: 12px;142  }143 144  /* Small helpers */145  .row { display: flex; align-items: center; }146  .spacer { flex: 1; }147  .muted { color: #8a8a8a; }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status Bar -->154  <div class="status-bar">155    <div class="sb-left">156      <div>1:18</div>157    </div>158    <div class="sb-right">159      <!-- simple tiny icons to hint status -->160      <svg width="28" height="28" viewBox="0 0 24 24" fill="#666"><path d="M12 2l1 2 2 .3-1.5 1.5.4 2.2L12 7l-1.9 1 .4-2.2L9 4.3 11 4l1-2z"/></svg>161      <svg width="28" height="28" viewBox="0 0 24 24" fill="#666"><path d="M17 7H7a5 5 0 00-5 5v5h2v-5a3 3 0 013-3h10a3 3 0 013 3v5h2v-5a5 5 0 00-5-5z"/></svg>162      <svg width="28" height="28" viewBox="0 0 24 24" fill="#666"><path d="M16 4h2v16h-2zM6 4h2v16H6z"/></svg>163    </div>164  </div>165 166  <!-- App Bar -->167  <div class="app-bar">168    <div class="menu-wrap">169      <div class="dot"></div>170      <!-- Hamburger icon -->171      <svg width="44" height="44" viewBox="0 0 24 24" fill="#111">172        <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>173      </svg>174    </div>175 176    <div class="spacer"></div>177 178    <div class="vip-pill">179      <!-- Crown -->180      <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">181        <path d="M3 7l4 3 5-6 5 6 4-3v10H3z"></path>182      </svg>183      VIP184    </div>185 186    <div class="actions">187      <!-- Search -->188      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round">189        <circle cx="11" cy="11" r="7"></circle>190        <path d="M21 21l-4.3-4.3"></path>191      </svg>192      <!-- Kebab -->193      <svg width="44" height="44" viewBox="0 0 24 24" fill="#111">194        <circle cx="12" cy="5" r="2"></circle>195        <circle cx="12" cy="12" r="2"></circle>196        <circle cx="12" cy="19" r="2"></circle>197      </svg>198    </div>199  </div>200 201  <!-- Chips Row -->202  <div class="chips-row">203    <div class="chip active">All</div>204    <div class="chip">Home</div>205    <div class="chip">Work</div>206    <div class="chip">207      <!-- bookmark/star icon -->208      <svg viewBox="0 0 24 24" fill="#888"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 8.9l7.2-.6L12 1.8l2.8 6.5 7.2.6-5.5 4.9 1.7 7.1z"/></svg>209      Saved210    </div>211    <div class="right-icon">212      <!-- simple calendar/bag icon -->213      <svg width="34" height="34" viewBox="0 0 24 24" fill="#2F80ED">214        <path d="M7 6V4h2v2h6V4h2v2h3v14H4V6h3zm0 4v8h10v-8H7z"></path>215      </svg>216    </div>217  </div>218 219  <!-- Ad banner -->220  <div class="ad-banner">221    [IMG: Ad Banner]222  </div>223 224  <!-- Content -->225  <div class="content">226    <div class="card">227      <h3>Meets</h3>228      <p>Friends meet</p>229      <div class="meta">2023-08-09</div>230    </div>231  </div>232 233  <!-- Floating Action Button -->234  <div class="fab" aria-label="Add">235    <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round">236      <path d="M12 5v14M5 12h14"></path>237    </svg>238  </div>239 240  <!-- Gesture area -->241  <div class="gesture-area">242    <div class="gesture-bar"></div>243  </div>244 245</div>246</body>247</html>