GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search Results - Grocery</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11    color:#222;12  }13 14  /* Status bar */15  .status-bar{16    position:absolute; left:0; top:0; width:100%; height:130px;17    background:#000; color:#fff; display:flex; align-items:center; justify-content:space-between;18    padding:0 40px; box-sizing:border-box; font-size:44px; letter-spacing:0.5px;19  }20  .status-icons{ display:flex; gap:28px; align-items:center; opacity:0.9; }21  .dot{ width:18px; height:18px; background:#fff; border-radius:50%; display:inline-block; }22 23  /* Main content spacing below status bar */24  .screen{ position:absolute; left:0; top:130px; right:0; bottom:0; overflow:hidden; }25 26  /* Header */27  .header{28    display:flex; align-items:center; gap:24px;29    padding:36px 56px 18px 56px;30  }31  .back{32    width:72px; height:72px; display:flex; align-items:center; justify-content:center;33    color:#e96518;34  }35  .title{36    font-size:64px; font-weight:800; color:#153b2f;37  }38 39  /* Search bar */40  .search-wrap{ padding:18px 56px 8px 56px; }41  .search{42    height:120px; border:2px solid #e1e1e1; border-radius:24px; display:flex; align-items:center;43    padding:0 28px; box-sizing:border-box; color:#666; font-size:42px;44  }45  .search svg{ width:56px; height:56px; margin-right:16px; fill:#bdbdbd; }46  .search .placeholder{ color:#7a7a7a; }47 48  /* First result */49  .first-result{ display:flex; align-items:center; padding:36px 56px 26px 56px; gap:28px; }50  .prod-img{51    width:180px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD;52    display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; text-align:center;53  }54  .prod-info{ flex:1; }55  .prod-title{ font-size:44px; font-weight:700; line-height:1.2; color:#222; }56  .prod-sub{ font-size:32px; color:#999; margin-top:8px; }57  .prod-aside{ display:flex; align-items:center; gap:28px; }58  .price{ font-size:44px; font-weight:800; color:#222; }59  .add{ font-size:40px; color:#e96518; font-weight:700; }60 61  /* Grey card list */62  .card{63    margin:16px 56px 0 56px; background:#f2f2f2; border-radius:12px; overflow:hidden;64    border:1px solid #e6e6e6;65  }66  .card-item{67    display:flex; align-items:center; padding:28px 36px; position:relative;68    border-bottom:1px solid #e0e0e0; gap:26px;69  }70  .card-item:last-child{ border-bottom:none; }71  .thumb-wrap{ position:relative; }72  .thumb{73    width:132px; height:132px; background:#E0E0E0; border:1px solid #BDBDBD;74    display:flex; align-items:center; justify-content:center; color:#9b9b9b; font-size:26px; text-align:center;75  }76  .sold{77    position:absolute; left:-8px; bottom:-10px; background:#cfcfcf; color:#ffffff;78    padding:10px 18px; font-size:30px; border-radius:4px;79  }80  .card-text{ flex:1; }81  .card-title{ font-size:40px; color:#777; font-weight:700; line-height:1.2; }82  .card-sub{ font-size:30px; color:#aaa; margin-top:8px; }83  .card-price{ font-size:44px; font-weight:800; color:#444; }84 85  /* Bottom nav */86  .tabbar{87    position:absolute; left:24px; right:24px; bottom:124px; height:210px;88    background:#fff; border-radius:40px; box-shadow:0 8px 24px rgba(0,0,0,0.08);89    display:flex; justify-content:space-around; align-items:center;90  }91  .tab{ display:flex; flex-direction:column; align-items:center; gap:14px; color:#b5b5b5; font-size:30px; }92  .tab svg{ width:64px; height:64px; fill:currentColor; }93  .tab.active{ color:#e96518; }94  .tab-label{ font-size:32px; }95 96  /* Bottom safe area */97  .safe-bottom{98    position:absolute; left:0; right:0; bottom:0; height:124px; background:#000;99  }100  .home-pill{101    position:absolute; left:50%; bottom:34px; transform:translateX(-50%);102    width:320px; height:12px; background:#e6e6e6; border-radius:8px; opacity:0.9;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Top status bar -->110  <div class="status-bar">111    <div>7:50</div>112    <div class="status-icons">113      <span class="dot"></span>114      <span class="dot"></span>115    </div>116  </div>117 118  <div class="screen">119    <!-- Header -->120    <div class="header">121      <div class="back" aria-label="Back">122        <svg viewBox="0 0 24 24">123          <path fill="currentColor" d="M15.5 3.5 7 12l8.5 8.5-2 2L3 12 13.5 1.5l2 2z"/>124        </svg>125      </div>126      <div class="title">Search for products</div>127    </div>128 129    <!-- Search box -->130    <div class="search-wrap">131      <div class="search">132        <svg viewBox="0 0 24 24">133          <path d="M15.5 14h-.7l-.2-.2a6.5 6.5 0 1 0-.6.6l.2.2v.7L20 21l1-1-5.5-6zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1-.5 9z"/>134        </svg>135        <span class="placeholder">Bread crumbs</span>136      </div>137    </div>138 139    <!-- First result -->140    <div class="first-result">141      <div class="prod-img">[IMG: Panko Bread Crumbs]</div>142      <div class="prod-info">143        <div class="prod-title">Panko Bread<br>Crumbs</div>144        <div class="prod-sub">1KG</div>145      </div>146      <div class="prod-aside">147        <div class="price">Rs 400</div>148        <div class="add">Add</div>149      </div>150    </div>151 152    <!-- Grey card with more items -->153    <div class="card">154      <div class="card-item">155        <div class="thumb-wrap">156          <div class="thumb">[IMG]</div>157          <div class="sold">Sold Out</div>158        </div>159        <div class="card-text">160          <div class="card-title">Solemio Panko Bread<br>Crumbs</div>161          <div class="card-sub">200GM</div>162        </div>163        <div class="card-price">Rs 128</div>164      </div>165 166      <div class="card-item">167        <div class="thumb-wrap">168          <div class="thumb">[IMG]</div>169          <div class="sold">Sold Out</div>170        </div>171        <div class="card-text">172          <div class="card-title">Mc Cain Tandoori Veggie<br>Nuggets</div>173          <div class="card-sub">325GM</div>174        </div>175        <div class="card-price">Rs 150</div>176      </div>177 178      <div class="card-item">179        <div class="thumb-wrap">180          <div class="thumb">[IMG]</div>181          <div class="sold">Sold Out</div>182        </div>183        <div class="card-text">184          <div class="card-title">Mc Cain Veggie Fingers</div>185          <div class="card-sub">400GM</div>186        </div>187        <div class="card-price">Rs 140</div>188      </div>189    </div>190  </div>191 192  <!-- Bottom navigation bar -->193  <div class="tabbar">194    <div class="tab">195      <svg viewBox="0 0 24 24"><path d="M12 3 2 11h2v9h6v-6h4v6h6v-9h2L12 3z"/></svg>196      <div class="tab-label">Home</div>197    </div>198    <div class="tab active">199      <svg viewBox="0 0 24 24"><path d="M15.5 14h-.7l-.2-.2a6.5 6.5 0 1 0-.6.6l.2.2v.7L20 21l1-1-5.5-6zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1-.5 9z"/></svg>200      <div class="tab-label">Search</div>201    </div>202    <div class="tab">203      <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4V4zm2 6h12v10H6V10zm2 2v6h8v-6H8z"/></svg>204      <div class="tab-label">Offers</div>205    </div>206    <div class="tab">207      <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM3 4h2l3.6 7.6-1.3 2.4C6.9 15 7.4 16 8.3 16H19v-2H8.7l.9-1.6h7.8c.7 0 1.3-.4 1.6-1l2.8-5.4H6.2L5.3 4H3z"/></svg>208      <div class="tab-label">Cart</div>209    </div>210    <div class="tab">211      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>212      <div class="tab-label">Account</div>213    </div>214  </div>215 216  <div class="safe-bottom">217    <div class="home-pill"></div>218  </div>219</div>220</body>221</html>