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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ECECEF;15    border-radius: 18px;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #7E7E81;22    color: #ffffff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-size: 42px;27    letter-spacing: 0.5px;28  }29  .status-icons {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 24px;34  }35  .status-dot {36    width: 14px; height: 14px; background: #fff; border-radius: 50%;37    opacity: 0.9;38  }39 40  /* App bar */41  .app-bar {42    height: 150px;43    background: #ffffff;44    display: flex;45    align-items: center;46    padding: 0 32px;47    border-bottom: 1px solid #E6E6E8;48  }49  .icon-btn {50    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;51    cursor: default;52  }53  .logo {54    width: 90px; height: 90px; border-radius: 16px;55    background: #E0E0E0; border: 1px solid #BDBDBD;56    color: #757575; display: flex; align-items: center; justify-content: center;57    margin: 0 20px 0 8px;58    font-weight: bold;59  }60 61  .search-wrap {62    flex: 1;63    max-width: 640px;64    height: 100px;65    border: 2px solid #DADDE2;66    border-radius: 50px;67    background: #F7F8FA;68    display: flex;69    align-items: center;70    padding: 0 26px;71    box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;72  }73  .search-text {74    color: #7C8491;75    font-size: 36px;76    flex: 1;77    margin: 0 18px;78    white-space: nowrap;79    overflow: hidden;80    text-overflow: ellipsis;81  }82  .app-actions {83    margin-left: auto;84    display: flex;85    align-items: center;86    gap: 26px;87    padding-left: 20px;88  }89 90  /* Content area with placeholders */91  .content {92    padding: 28px 28px 140px 28px;93  }94  .placeholder {95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    color: #757575;98    display: flex;99    align-items: center;100    justify-content: center;101    border-radius: 28px;102    font-size: 32px;103  }104  .mb-22 { margin-bottom: 22px; }105  .mb-30 { margin-bottom: 30px; }106  .row {107    display: flex;108    gap: 28px;109  }110 111  /* Bottom home indicator */112  .home-area {113    position: absolute;114    bottom: 0;115    left: 0;116    width: 1080px;117    height: 140px;118    background: #0B0B0B;119    display: flex;120    align-items: center;121    justify-content: center;122  }123  .home-pill {124    width: 240px; height: 14px; background: #D6D6D6; border-radius: 7px;125    opacity: 0.9;126  }127 128  /* SVG icon colors */129  svg { width: 48px; height: 48px; }130  .stroke-dark { stroke: #333; }131  .fill-dark { fill: #333; }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status bar -->138  <div class="status-bar">139    9:37140    <div class="status-icons">141      <div class="status-dot"></div>142      <div class="status-dot"></div>143      <div class="status-dot"></div>144      <div class="status-dot"></div>145      <svg viewBox="0 0 24 24" class="fill-dark" aria-hidden="true">146        <path d="M6 3h12c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2zm2 16h8V5H8v14z"/>147      </svg>148    </div>149  </div>150 151  <!-- App bar -->152  <div class="app-bar">153    <div class="icon-btn">154      <svg viewBox="0 0 24 24" class="stroke-dark" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">155        <path d="M15 5l-7 7 7 7"/>156      </svg>157    </div>158 159    <div class="logo">[IMG: App Logo]</div>160 161    <div class="search-wrap">162      <svg viewBox="0 0 24 24" class="stroke-dark" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">163        <circle cx="11" cy="11" r="7"></circle>164        <path d="M20 20l-4-4"></path>165      </svg>166      <div class="search-text">Search for products, b...</div>167      <svg viewBox="0 0 24 24" class="stroke-dark" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">168        <rect x="9" y="4" width="6" height="10" rx="3"></rect>169        <path d="M12 14v3"></path>170        <path d="M8 17h8"></path>171      </svg>172    </div>173 174    <div class="app-actions">175      <div class="icon-btn">176        <svg viewBox="0 0 24 24" class="stroke-dark" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">177          <path d="M6 6h15l-2 9H8L6 6z"></path>178          <circle cx="9" cy="20" r="1.5"></circle>179          <circle cx="18" cy="20" r="1.5"></circle>180        </svg>181      </div>182      <div class="icon-btn">183        <svg viewBox="0 0 24 24" class="stroke-dark" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">184          <path d="M4 6h16M4 12h16M4 18h16"/>185        </svg>186      </div>187    </div>188  </div>189 190  <!-- Content placeholders -->191  <div class="content">192    <div class="placeholder mb-30" style="height: 240px;">[IMG: Promo Banner]</div>193 194    <div class="placeholder mb-22" style="width: 520px; height: 96px;">[IMG: Small Promo]</div>195 196    <div class="placeholder mb-30" style="width: 720px; height: 96px;">[IMG: Horizontal Card]</div>197 198    <div class="placeholder mb-30" style="height: 210px;">[IMG: Featured Row]</div>199 200    <div class="placeholder mb-30" style="height: 260px;">[IMG: Large Feature]</div>201 202    <div class="row mb-30">203      <div class="placeholder" style="flex: 1; height: 160px;">[IMG: Tile]</div>204      <div class="placeholder" style="flex: 1; height: 160px;">[IMG: Tile]</div>205    </div>206 207    <div class="placeholder mb-30" style="height: 220px;">[IMG: Product Carousel]</div>208 209    <div class="placeholder mb-30" style="height: 260px;">[IMG: Recommendations]</div>210  </div>211 212  <!-- Bottom home indicator -->213  <div class="home-area">214    <div class="home-pill"></div>215  </div>216</div>217</body>218</html>