GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Catalog UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Top bar */16  .topbar {17    width: 100%;18    height: 190px;19    background: #2E334C; /* deep navy */20    color: #ffffff;21    position: relative;22    box-sizing: border-box;23  }24  .status-row {25    height: 70px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    font-size: 40px;31    letter-spacing: 1px;32    opacity: 0.95;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .actions-row {40    height: 120px;41    display: flex;42    align-items: center;43    justify-content: space-between;44    padding: 0 28px;45  }46  .icon-btn {47    width: 90px;48    height: 90px;49    display: flex;50    align-items: center;51    justify-content: center;52  }53  .icon-btn svg { width: 54px; height: 54px; }54  .cart-wrap { position: relative; }55  .badge {56    position: absolute;57    top: -4px;58    right: 10px;59    background: #ffffff;60    color: #2E334C;61    border-radius: 16px;62    width: 32px;63    height: 32px;64    font-size: 22px;65    display: flex;66    align-items: center;67    justify-content: center;68    border: 2px solid #2E334C;69  }70 71  /* Content grid */72  .content {73    width: 100%;74    box-sizing: border-box;75    padding: 24px;76  }77  .grid {78    display: grid;79    grid-template-columns: repeat(2, 1fr);80    grid-auto-rows: auto;81    gap: 26px;82  }83  .img-ph, .text-ph {84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    color: #757575;87    display: flex;88    align-items: center;89    justify-content: center;90    text-align: center;91    box-sizing: border-box;92  }93  .img-ph { height: 520px; font-size: 30px; }94  .text-ph { height: 110px; font-size: 28px; }95 96  /* Bottom gesture area */97  .gesture {98    position: absolute;99    bottom: 0;100    left: 0;101    width: 100%;102    height: 120px;103    background: #000000;104    display: flex;105    align-items: center;106    justify-content: center;107  }108  .gesture .pill {109    width: 300px;110    height: 12px;111    background: #D7D7D7;112    border-radius: 10px;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <div class="topbar">120    <div class="status-row">121      <div>10:22</div>122      <div class="status-icons">123        <!-- simple status dots -->124        <div style="width:18px;height:18px;background:#ffffff;border-radius:50%;opacity:0.9;"></div>125        <div style="width:18px;height:18px;background:#ffffff;border-radius:50%;opacity:0.9;"></div>126        <div style="width:18px;height:18px;background:#ffffff;border-radius:50%;opacity:0.9;"></div>127        <!-- WiFi icon -->128        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">129          <path d="M2 8c5-4 15-4 20 0"/>130          <path d="M6 12c3-3 9-3 12 0"/>131          <path d="M10 16c2-2 4-2 6 0"/>132          <circle cx="12" cy="19" r="1.6" fill="#fff"></circle>133        </svg>134        <!-- Battery icon -->135        <svg viewBox="0 0 32 16" fill="none" stroke="#fff" stroke-width="2">136          <rect x="1" y="3" width="26" height="10" rx="2"></rect>137          <rect x="28" y="6" width="3" height="4"></rect>138          <rect x="4" y="5" width="20" height="6" fill="#fff" stroke="none"></rect>139        </svg>140      </div>141    </div>142    <div class="actions-row">143      <!-- Back arrow -->144      <div class="icon-btn">145        <svg viewBox="0 0 100 100" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">146          <path d="M65 20 L35 50 L65 80"></path>147        </svg>148      </div>149      <div style="display:flex; align-items:center; gap:36px;">150        <!-- Search icon -->151        <div class="icon-btn">152          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round">153            <circle cx="11" cy="11" r="6"></circle>154            <path d="M20 20 L16 16"></path>155          </svg>156        </div>157        <!-- Cart icon with badge -->158        <div class="icon-btn cart-wrap">159          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">160            <path d="M3 6h2l2 10h10l2-8H6"></path>161            <circle cx="9" cy="20" r="1.8" fill="#fff" stroke="none"></circle>162            <circle cx="17" cy="20" r="1.8" fill="#fff" stroke="none"></circle>163          </svg>164          <div class="badge">1</div>165        </div>166      </div>167    </div>168  </div>169 170  <div class="content">171    <div class="grid">172      <div class="img-ph">[IMG: Product Photo]</div>173      <div class="img-ph">[IMG: Product Photo]</div>174 175      <div class="text-ph">[TXT: Product details]</div>176      <div class="text-ph">[TXT: Product details]</div>177 178      <div class="img-ph">[IMG: Product Photo]</div>179      <div class="img-ph">[IMG: Product Photo]</div>180 181      <div class="text-ph">[TXT: Product details]</div>182      <div class="text-ph">[TXT: Product details]</div>183 184      <div class="img-ph">[IMG: Product Photo]</div>185      <div class="img-ph">[IMG: Product Photo]</div>186 187      <div class="text-ph">[TXT: Product details]</div>188      <div class="text-ph">[TXT: Product details]</div>189 190      <div class="img-ph">[IMG: Product Photo]</div>191      <div class="img-ph">[IMG: Product Photo]</div>192    </div>193  </div>194 195  <div class="gesture">196    <div class="pill"></div>197  </div>198 199</div>200</body>201</html>