GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Almonds Listing</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 }11 12 /* Status bar */13 .status-bar {14 height:110px; background:#000; color:#fff; padding:0 28px;15 display:flex; align-items:center; justify-content:space-between;16 font-weight:600; font-size:36px;17 }18 .status-icons { display:flex; align-items:center; gap:22px; }19 .sb-icon { width:34px; height:34px; border-radius:5px; background:#fff; opacity:.9; }20 21 /* App bar */22 .app-bar {23 height:140px; background:#fff; display:flex; align-items:center;24 padding:0 24px; gap:26px; border-bottom:1px solid #eee;25 }26 .app-title {27 font-size:56px; font-weight:700; color:#2b2b2b; flex:1;28 }29 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }30 .divider-line { height:4px; background:#e7e7e7; }31 32 /* Filter / Sort */33 .filter-sort {34 height:140px; display:flex; align-items:center; background:#fff;35 border-bottom:1px solid #eaeaea;36 }37 .fs-item {38 flex:1; display:flex; align-items:center; justify-content:center; gap:22px; color:#5b4f2f;39 font-size:44px; font-weight:700;40 }41 .fs-divider { width:1px; height:80px; background:#e2e2e2; }42 43 /* Product list */44 .list { position:relative; }45 .product {46 position:relative; display:flex; gap:28px; padding:28px 28px; background:#fff;47 border-bottom:1px solid #eee;48 }49 .p-img {50 width:180px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD;51 display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size:24px; padding:8px;52 }53 .p-info { flex:1; }54 .p-name { font-size:48px; line-height:1.2; color:#2f2a16; font-weight:700; margin-top:6px; }55 .p-qty { font-size:42px; color:#5c564a; margin:18px 0; }56 .p-price { font-size:48px; color:#c2185b; font-weight:700; }57 .fav {58 position:absolute; right:34px; top:36px; width:64px; height:64px; display:flex; align-items:center; justify-content:center;59 }60 .add-btn {61 position:absolute; right:34px; bottom:32px; background:#7CB342; color:#fff;62 padding:26px 44px; border-radius:18px; font-size:48px; font-weight:800; letter-spacing:1px;63 }64 65 /* Keyboard */66 .keyboard {67 position:absolute; bottom:0; left:0; width:1080px; height:900px; background:#1b1918; color:#fff;68 box-shadow:0 -6px 12px rgba(0,0,0,0.35);69 }70 .kb-suggestion {71 height:110px; display:flex; align-items:center; justify-content:center; position:relative;72 color:#e9e1d6; font-size:46px; font-weight:700;73 border-top:1px solid rgba(255,255,255,0.06);74 border-bottom:1px solid rgba(255,255,255,0.07);75 }76 .kb-mic {77 position:absolute; right:30px; width:56px; height:56px; border-radius:50%;78 border:2px solid #eee; display:flex; align-items:center; justify-content:center; opacity:.85;79 }80 .kb-rows { padding:18px 22px; }81 .kb-row { display:flex; gap:16px; margin:16px 0; justify-content:center; }82 .key {83 background:#2b2725; color:#f4f0ea; border-radius:16px; height:120px; min-width:92px;84 display:flex; align-items:center; justify-content:center; font-size:52px; box-shadow:inset 0 -3px 0 rgba(0,0,0,0.35);85 }86 .key.wide { min-width:160px; }87 .key.space { flex:1; min-width:auto; }88 .key.done { background:#ffd9b0; color:#2b2725; font-weight:800; }89 90 /* Simple SVG styling */91 svg { display:block; }92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Status Bar -->98 <div class="status-bar">99 <div>11:14</div>100 <div class="status-icons">101 <div class="sb-icon" style="width:30px;height:30px;border-radius:50%;"></div>102 <div class="sb-icon" style="width:30px;height:30px;border-radius:6px;"></div>103 </div>104 </div>105 106 <!-- App Bar -->107 <div class="app-bar">108 <div class="icon-btn">109 <svg width="48" height="48" viewBox="0 0 48 48">110 <polyline points="28,8 12,24 28,40" fill="none" stroke="#3c3420" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></polyline>111 </svg>112 </div>113 114 <div class="icon-btn">115 <svg width="48" height="48" viewBox="0 0 48 48">116 <circle cx="20" cy="20" r="12" stroke="#3c3420" stroke-width="5" fill="none"></circle>117 <line x1="30" y1="30" x2="43" y2="43" stroke="#3c3420" stroke-width="5" stroke-linecap="round"></line>118 </svg>119 </div>120 121 <div class="app-title">Almonds</div>122 123 <div class="icon-btn">124 <svg width="48" height="48" viewBox="0 0 48 48">125 <line x1="12" y1="12" x2="36" y2="36" stroke="#3c3420" stroke-width="6" stroke-linecap="round"></line>126 <line x1="36" y1="12" x2="12" y2="36" stroke="#3c3420" stroke-width="6" stroke-linecap="round"></line>127 </svg>128 </div>129 130 <div class="icon-btn">131 <svg width="60" height="60" viewBox="0 0 48 48">132 <path d="M12 18 h24 l-2 24 H14 Z" fill="none" stroke="#3c3420" stroke-width="4"></path>133 <path d="M16 18 c0-6 4-10 8-10 s8 4 8 10" fill="none" stroke="#3c3420" stroke-width="4" stroke-linecap="round"></path>134 </svg>135 </div>136 </div>137 <div class="divider-line"></div>138 139 <!-- Filter / Sort -->140 <div class="filter-sort">141 <div class="fs-item">142 <svg width="60" height="60" viewBox="0 0 48 48">143 <path d="M6 12 h36 l-14 14 v10 l-8 4 v-14 Z" fill="none" stroke="#5b4f2f" stroke-width="4" stroke-linejoin="round"></path>144 </svg>145 <div>FILTER</div>146 </div>147 <div class="fs-divider"></div>148 <div class="fs-item">149 <svg width="60" height="60" viewBox="0 0 48 48">150 <path d="M16 8 v28" stroke="#5b4f2f" stroke-width="4" stroke-linecap="round"></path>151 <polyline points="16,8 10,14 22,14" fill="none" stroke="#5b4f2f" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></polyline>152 <path d="M32 40 v-28" stroke="#5b4f2f" stroke-width="4" stroke-linecap="round"></path>153 <polyline points="32,40 26,34 38,34" fill="none" stroke="#5b4f2f" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></polyline>154 </svg>155 <div>SORT</div>156 </div>157 </div>158 159 <!-- Product List -->160 <div class="list">161 162 <!-- Product 1 -->163 <div class="product">164 <div class="p-img">[IMG: Conscious Food Organic Almonds]</div>165 <div class="p-info">166 <div class="p-name">Conscious Food Organic Almonds, 500Gm</div>167 <div class="p-qty">1 Pc</div>168 <div class="p-price">MRP ₹900</div>169 </div>170 <div class="fav">171 <svg width="56" height="56" viewBox="0 0 48 48">172 <path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2 Z"173 fill="none" stroke="#bdbdbd" stroke-width="3" stroke-linejoin="round"></path>174 </svg>175 </div>176 <div class="add-btn">ADD</div>177 </div>178 179 <!-- Product 2 -->180 <div class="product">181 <div class="p-img">[IMG: Jomara Almonds Dates]</div>182 <div class="p-info">183 <div class="p-name">Jomara Almonds Dates, 250g Box</div>184 <div class="p-qty">1 Pc</div>185 <div class="p-price">MRP ₹1100</div>186 </div>187 <div class="fav">188 <svg width="56" height="56" viewBox="0 0 48 48">189 <path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2 Z"190 fill="none" stroke="#bdbdbd" stroke-width="3" stroke-linejoin="round"></path>191 </svg>192 </div>193 <div class="add-btn">ADD</div>194 </div>195 196 <!-- Product 3 -->197 <div class="product">198 <div class="p-img">[IMG: Natures Almonds Pouch]</div>199 <div class="p-info">200 <div class="p-name">Natures Almonds, 200g Pouch</div>201 <div class="p-qty">1 Pc</div>202 <div class="p-price">MRP ₹340</div>203 </div>204 <div class="fav">205 <svg width="56" height="56" viewBox="0 0 48 48">206 <path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2 Z"207 fill="none" stroke="#bdbdbd" stroke-width="3" stroke-linejoin="round"></path>208 </svg>209 </div>210 <div class="add-btn">ADD</div>211 </div>212 213 </div>214 215 <!-- On-screen Keyboard -->216 <div class="keyboard">217 <div class="kb-suggestion">Almonds218 <div class="kb-mic">219 <svg width="28" height="28" viewBox="0 0 24 24">220 <rect x="9" y="4" width="6" height="10" rx="3" fill="#fff"></rect>221 <path d="M6 11 a6 6 0 0 0 12 0" stroke="#fff" stroke-width="2" fill="none"></path>222 <line x1="12" y1="17" x2="12" y2="22" stroke="#fff" stroke-width="2"></line>223 </svg>224 </div>225 </div>226 227 <div class="kb-rows">228 <div class="kb-row">229 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>230 </div>231 <div class="kb-row">232 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>233 </div>234 <div class="kb-row">235 <div class="key wide">⇧</div>236 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>237 <div class="key wide">⌫</div>238 </div>239 <div class="kb-row">240 <div class="key wide">?123</div>241 <div class="key wide">☺</div>242 <div class="key space"></div>243 <div class="key">.</div>244 <div class="key done">✓</div>245 </div>246 </div>247 </div>248 249</div>250</body>251</html>