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>Product List UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #F4F6F5;12    border-radius: 0;13    box-shadow: none;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 140px; background: #1E1E1E; color: #FFF;20    display: flex; align-items: center; padding: 0 36px; font-weight: 600;21    letter-spacing: 0.5px; font-size: 34px;22  }23  .status-icons { margin-left: 24px; display: flex; gap: 24px; align-items: center; }24  .status-icons svg { width: 38px; height: 38px; fill: #FFF; opacity: 0.9; }25 26  /* Top strip with line and floating actions */27  .top-strip {28    position: absolute; top: 140px; left: 0; right: 0; height: 140px; background: #FFFFFF;29    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;30  }31  .green-line {32    position: absolute; left: 72px; right: 72px; top: 16px; height: 10px; background: #2F8D3B; border-radius: 8px;33  }34  .fab {35    position: absolute; width: 110px; height: 110px; border-radius: 55px; background: rgba(0,0,0,0.06);36    display: flex; align-items: center; justify-content: center;37  }38  .fab svg { width: 52px; height: 52px; stroke: #666; fill: none; stroke-width: 4; }39  .fab.back { left: 36px; top: 84px; }40  .fab.like { right: 190px; top: 60px; }41  .fab.whatsapp { right: 56px; top: 60px; }42  .fab.whatsapp svg { stroke-width: 3; }43 44  /* Content list */45  .content {46    position: absolute; top: 280px; left: 0; right: 0; bottom: 120px;47    padding: 24px 32px 140px 32px; overflow: hidden;48  }49  .card {50    background: #FFF; border-radius: 32px; padding: 32px; margin: 24px 0;51    box-shadow: 0 10px 28px rgba(0,0,0,0.06);52  }53  .card-inner {54    display: grid; grid-template-columns: 1fr 360px; grid-column-gap: 28px; align-items: start;55  }56  .title {57    font-size: 44px; font-weight: 700; color: #333; line-height: 1.15; margin: 0 0 12px 0;58  }59  .title .info {60    display: inline-block; width: 34px; height: 34px; border-radius: 17px; border: 2px solid #B0B0B0;61    color: #777; font-size: 24px; line-height: 30px; text-align: center; margin-left: 10px;62  }63  .price {64    color: #2F8D3B; font-size: 48px; font-weight: 800; margin: 8px 0;65  }66  .subline { color: #777; font-size: 32px; margin-bottom: 18px; }67 68  .row {69    display: flex; align-items: center; gap: 16px; color: #6D6D6D; font-size: 30px; margin: 10px 0 24px 0;70  }71  .row svg { width: 42px; height: 42px; stroke: #6D6D6D; fill: none; stroke-width: 3.5; }72 73  .chips { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }74  .chip {75    font-size: 28px; color: #666; padding: 16px 22px; border-radius: 24px; border: 2px dashed #D1D1D1; background: #FAFAFA;76  }77 78  .image {79    width: 360px; height: 240px; background: #E0E0E0; border: 1px solid #BDBDBD;80    border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center;81  }82  .actions { display: flex; justify-content: flex-end; margin-top: 22px; }83  .add-btn {84    background: #2F8D3B; color: #FFF; border: none; border-radius: 16px; padding: 22px 60px; font-size: 34px; font-weight: 700; letter-spacing: 0.5px;85    box-shadow: 0 4px 8px rgba(47,141,59,0.25);86  }87 88  /* Bottom home indicator */89  .home-indicator {90    position: absolute; left: 350px; right: 350px; bottom: 32px; height: 20px; background: #111; border-radius: 12px; opacity: 0.9;91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status bar -->98  <div class="status-bar">99    <div>10:08</div>100    <div class="status-icons">101      <!-- Simple status icons -->102      <svg viewBox="0 0 24 24"><circle cx="3" cy="12" r="2"></circle><circle cx="10" cy="12" r="2"></circle><circle cx="17" cy="12" r="2"></circle></svg>103      <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="14" rx="2" fill="#FFF"></rect><rect x="5" y="7" width="14" height="8" fill="#1E1E1E"></rect></svg>104      <svg viewBox="0 0 24 24"><path d="M3 17h18M3 12h18M3 7h18" stroke="#FFF" stroke-width="2" fill="none"></path></svg>105      <svg viewBox="0 0 24 24"><path d="M19 7v10M5 7v10M8 5h8M8 19h8" stroke="#FFF" stroke-width="2"></path></svg>106      <svg viewBox="0 0 24 24"><path d="M20 8c0 5.5-4 9-8 9S4 13.5 4 8" stroke="#FFF" stroke-width="2" fill="none"></path></svg>107      <svg viewBox="0 0 24 24"><rect x="17" y="4" width="2" height="16" fill="#FFF"></rect><path d="M18 6h3M18 18h3" stroke="#FFF" stroke-width="2"></path></svg>108    </div>109  </div>110 111  <!-- Top strip -->112  <div class="top-strip">113    <div class="green-line"></div>114 115    <div class="fab back">116      <svg viewBox="0 0 24 24">117        <path d="M15 6l-6 6 6 6" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>118      </svg>119    </div>120    <div class="fab like">121      <svg viewBox="0 0 24 24">122        <path d="M12 21s-6-4.35-8.5-7A5 5 0 0112 6a5 5 0 018.5 8c-2.5 2.65-8.5 7-8.5 7z" />123      </svg>124    </div>125    <div class="fab whatsapp">126      <svg viewBox="0 0 24 24">127        <path d="M12 3a8 8 0 00-7.4 10.9L4 21l6.2-1.7A8 8 0 1012 3z" />128        <path d="M8.8 9.6c.4 2 2.2 3.6 4.2 4.2M9 8c-.2.5-.2 1 .2 1.6M15.2 13.2c.6.3 1 .2 1.6-.1" stroke="#666" />129      </svg>130    </div>131  </div>132 133  <!-- Content -->134  <div class="content">135 136    <!-- Card 1 -->137    <div class="card">138      <div class="card-inner">139        <div>140          <h2 class="title">Whole Uncut (Skinless) <span class="info">i</span></h2>141          <div class="price">₹366.30</div>142          <div class="subline">1.1kg</div>143          <div class="row">144            <svg viewBox="0 0 24 24">145              <circle cx="6" cy="18" r="3"></circle>146              <circle cx="18" cy="18" r="3"></circle>147              <path d="M6 15h6l2-4h4" stroke-linecap="round"></path>148            </svg>149            <span>Today 150 Minutes</span>150          </div>151        </div>152        <div>153          <div class="image">[IMG: Whole chicken on tray]</div>154          <div class="actions"><button class="add-btn">ADD</button></div>155        </div>156      </div>157    </div>158 159    <!-- Card 2 -->160    <div class="card">161      <div class="card-inner">162        <div>163          <h2 class="title">Curry Cut (Skinless) (450g Pack) <span class="info">i</span></h2>164          <div class="price">₹149</div>165          <div class="subline">1 pack</div>166          <div class="row">167            <svg viewBox="0 0 24 24">168              <circle cx="6" cy="18" r="3"></circle>169              <circle cx="18" cy="18" r="3"></circle>170              <path d="M6 15h6l2-4h4" stroke-linecap="round"></path>171            </svg>172            <span>Today 150 Minutes</span>173          </div>174          <div class="chips">175            <div class="chip">Medium Size Cut</div>176            <div class="chip">Net Weight: 440–450g</div>177            <div class="chip">No. of Pieces: 9–12 per Pack</div>178            <div class="chip">Skinless</div>179          </div>180        </div>181        <div>182          <div class="image">[IMG: Curry cut chicken pieces]</div>183          <div class="actions"><button class="add-btn">ADD</button></div>184        </div>185      </div>186    </div>187 188    <!-- Card 3 -->189    <div class="card">190      <div class="card-inner">191        <div>192          <h2 class="title">Curry Cut Small Pieces (450g Pack) <span class="info">i</span></h2>193          <div class="price">₹149</div>194          <div class="subline">1 pack</div>195          <div class="row">196            <svg viewBox="0 0 24 24">197              <circle cx="6" cy="18" r="3"></circle>198              <circle cx="18" cy="18" r="3"></circle>199              <path d="M6 15h6l2-4h4" stroke-linecap="round"></path>200            </svg>201            <span>Today 150 Minutes</span>202          </div>203          <div class="chips">204            <div class="chip">Net Weight: 440–450g</div>205            <div class="chip">No. of Pieces: 12–14</div>206            <div class="chip">Skinless</div>207            <div class="chip">Cut: Small Pcs</div>208          </div>209        </div>210        <div>211          <div class="image">[IMG: Small curry cut chicken pieces]</div>212          <div class="actions"><button class="add-btn">ADD</button></div>213        </div>214      </div>215    </div>216 217    <!-- Card 4 -->218    <div class="card">219      <div class="card-inner">220        <div>221          <h2 class="title">Biryani Cut (450g Pack) <span class="info">i</span></h2>222          <div class="price">₹149</div>223          <div class="subline">1 pack</div>224          <div class="row">225            <svg viewBox="0 0 24 24">226              <circle cx="6" cy="18" r="3"></circle>227              <circle cx="18" cy="18" r="3"></circle>228              <path d="M6 15h6l2-4h4" stroke-linecap="round"></path>229            </svg>230            <span>Today 150 Minutes</span>231          </div>232        </div>233        <div>234          <div class="image">[IMG: Biryani cut chicken in bowl]</div>235          <div class="actions"><button class="add-btn">ADD</button></div>236        </div>237      </div>238    </div>239 240  </div>241 242  <div class="home-indicator"></div>243</div>244</body>245</html>