GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Results - Mozzarella</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #f5f6f7;12 border-radius: 24px;13 box-shadow: 0 2px 12px rgba(0,0,0,0.08);14 }15 /* Status bar */16 .status-bar {17 height: 120px;18 padding: 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 color: #111;21 }22 .status-time { font-weight: 600; font-size: 42px; letter-spacing: 0.5px; }23 .status-icons { display: flex; align-items: center; gap: 28px; }24 .icon { width: 40px; height: 40px; }25 /* App header */26 .app-header {27 padding: 20px 36px 24px 36px;28 display: flex; align-items: flex-start; gap: 24px;29 background: #fff;30 border-bottom-left-radius: 28px; border-bottom-right-radius: 28px;31 box-shadow: 0 6px 12px rgba(0,0,0,0.06);32 }33 .back-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; }34 .header-text { flex: 1; }35 .header-title { font-size: 52px; font-weight: 700; margin: 6px 0 8px 0; color: #111; }36 .header-sub { font-size: 28px; color: #777; }37 /* Content grid */38 .content {39 padding: 24px 24px 260px 24px;40 }41 .grid {42 display: grid;43 grid-template-columns: 1fr 1fr;44 gap: 28px;45 }46 .card {47 background: #fff;48 border-radius: 28px;49 box-shadow: 0 8px 16px rgba(0,0,0,0.06);50 overflow: hidden;51 position: relative;52 }53 .card .img {54 height: 360px;55 background: #E0E0E0;56 border-bottom: 1px solid #BDBDBD;57 display: flex; align-items: center; justify-content: center;58 color: #757575; font-size: 30px; text-align: center; padding: 0 20px;59 }60 .card-body { padding: 28px; }61 .price { font-size: 56px; font-weight: 800; margin-bottom: 8px; }62 .name { font-size: 36px; font-weight: 600; margin-bottom: 6px; }63 .meta { font-size: 28px; color: #8a8a8a; }64 .clip-add {65 position: absolute; top: 18px; right: 18px;66 width: 66px; height: 66px;67 border-radius: 18px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.08);68 display: flex; align-items: center; justify-content: center;69 }70 /* Bottom nav */71 .bottom-nav {72 position: absolute; left: 0; right: 0; bottom: 0;73 height: 210px; background: #fff;74 border-top-left-radius: 24px; border-top-right-radius: 24px;75 box-shadow: 0 -6px 14px rgba(0,0,0,0.08);76 padding: 16px 24px 24px;77 }78 .nav-items {79 height: 100%;80 display: flex; align-items: center; justify-content: space-between;81 }82 .nav-item { width: 20%; text-align: center; color: #777; }83 .nav-item .nav-icon {84 width: 72px; height: 72px; margin: 10px auto 8px auto;85 display: flex; align-items: center; justify-content: center;86 border-radius: 18px; color: #ff6f00;87 }88 .nav-item.active { color: #ff6f00; }89 .nav-label { font-size: 28px; margin-top: 6px; }90 /* Gesture bar */91 .gesture {92 position: absolute; bottom: 12px; left: 50%;93 transform: translateX(-50%);94 width: 240px; height: 10px; border-radius: 6px; background: #d1d1d1;95 }96</style>97</head>98<body>99<div id="render-target">100 <!-- Status bar -->101 <div class="status-bar">102 <div class="status-time">9:08</div>103 <div class="status-icons">104 <!-- simple signal icon -->105 <svg class="icon" viewBox="0 0 24 24">106 <rect x="2" y="14" width="3" height="8" fill="#555"></rect>107 <rect x="7" y="10" width="3" height="12" fill="#555"></rect>108 <rect x="12" y="6" width="3" height="16" fill="#555"></rect>109 <rect x="17" y="2" width="3" height="20" fill="#555"></rect>110 </svg>111 <!-- battery icon -->112 <svg class="icon" viewBox="0 0 24 24">113 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"></rect>114 <rect x="4" y="8" width="12" height="8" fill="#555"></rect>115 <rect x="21" y="9" width="2" height="6" fill="#555"></rect>116 </svg>117 </div>118 </div>119 120 <!-- App header -->121 <div class="app-header">122 <div class="back-btn">123 <svg width="48" height="48" viewBox="0 0 24 24">124 <path d="M15 5l-7 7 7 7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>125 </svg>126 </div>127 <div class="header-text">128 <div class="header-title">Search for "Mozzarella cheese 1..."</div>129 <div class="header-sub">Results in the stores</div>130 </div>131 </div>132 133 <!-- Results grid -->134 <div class="content">135 <div class="grid">136 <!-- Card 1 -->137 <div class="card">138 <div class="clip-add">139 <svg width="36" height="36" viewBox="0 0 24 24">140 <path d="M7 6h8v2H7z" fill="#888"></path>141 <rect x="6" y="4" width="12" height="16" rx="2" ry="2" fill="none" stroke="#888" stroke-width="2"></rect>142 <path d="M12 11v6M9 14h6" stroke="#0a8f08" stroke-width="2" stroke-linecap="round"></path>143 </svg>144 </div>145 <div class="img">[IMG: Mozzarella bag with mountains]</div>146 <div class="card-body">147 <div class="price">2.15</div>148 <div class="name">Mozzarella</div>149 <div class="meta">150g</div>150 </div>151 </div>152 <!-- Card 2 -->153 <div class="card">154 <div class="clip-add">155 <svg width="36" height="36" viewBox="0 0 24 24">156 <path d="M7 6h8v2H7z" fill="#888"></path>157 <rect x="6" y="4" width="12" height="16" rx="2" ry="2" fill="none" stroke="#888" stroke-width="2"></rect>158 <path d="M12 11v6M9 14h6" stroke="#0a8f08" stroke-width="2" stroke-linecap="round"></path>159 </svg>160 </div>161 <div class="img">[IMG: Mozzarella bag with cows]</div>162 <div class="card-body">163 <div class="price">2.20</div>164 <div class="name">Mozzarella</div>165 <div class="meta">125g</div>166 </div>167 </div>168 <!-- Card 3 -->169 <div class="card">170 <div class="clip-add">171 <svg width="36" height="36" viewBox="0 0 24 24">172 <path d="M7 6h8v2H7z" fill="#888"></path>173 <rect x="6" y="4" width="12" height="16" rx="2" ry="2" fill="none" stroke="#888" stroke-width="2"></rect>174 <path d="M12 11v6M9 14h6" stroke="#0a8f08" stroke-width="2" stroke-linecap="round"></path>175 </svg>176 </div>177 <div class="img">[IMG: Galbani Mozzarella packs]</div>178 <div class="card-body">179 <div class="price">3.85</div>180 <div class="name">Galbani Mozzarella</div>181 <div class="meta">3 x 125g</div>182 </div>183 </div>184 <!-- Card 4 -->185 <div class="card">186 <div class="clip-add">187 <svg width="36" height="36" viewBox="0 0 24 24">188 <path d="M7 6h8v2H7z" fill="#888"></path>189 <rect x="6" y="4" width="12" height="16" rx="2" ry="2" fill="none" stroke="#888" stroke-width="2"></rect>190 <path d="M12 11v6M9 14h6" stroke="#0a8f08" stroke-width="2" stroke-linecap="round"></path>191 </svg>192 </div>193 <div class="img">[IMG: Mozzarella Bufflonne cup]</div>194 <div class="card-body">195 <div class="price">4.75</div>196 <div class="name">Mozzarella Bufflonne</div>197 <div class="meta">150g</div>198 </div>199 </div>200 <!-- Card 5 -->201 <div class="card">202 <div class="clip-add">203 <svg width="36" height="36" viewBox="0 0 24 24">204 <path d="M7 6h8v2H7z" fill="#888"></path>205 <rect x="6" y="4" width="12" height="16" rx="2" ry="2" fill="none" stroke="#888" stroke-width="2"></rect>206 <path d="M12 11v6M9 14h6" stroke="#0a8f08" stroke-width="2" stroke-linecap="round"></path>207 </svg>208 </div>209 <div class="img">[IMG: Mozzarella slices bag]</div>210 <div class="card-body">211 <div class="price">—</div>212 <div class="name">Mozzarella</div>213 <div class="meta">2 pieces</div>214 </div>215 </div>216 <!-- Card 6 -->217 <div class="card">218 <div class="clip-add">219 <svg width="36" height="36" viewBox="0 0 24 24">220 <path d="M7 6h8v2H7z" fill="#888"></path>221 <rect x="6" y="4" width="12" height="16" rx="2" ry="2" fill="none" stroke="#888" stroke-width="2"></rect>222 <path d="M12 11v6M9 14h6" stroke="#0a8f08" stroke-width="2" stroke-linecap="round"></path>223 </svg>224 </div>225 <div class="img">[IMG: Buffalo Mozzarella tub]</div>226 <div class="card-body">227 <div class="price">—</div>228 <div class="name">Büfel Mozzarella</div>229 <div class="meta">Swiss buffalo milk</div>230 </div>231 </div>232 </div>233 </div>234 235 <!-- Bottom navigation -->236 <div class="bottom-nav">237 <div class="nav-items">238 <div class="nav-item active">239 <div class="nav-icon">240 <svg width="48" height="48" viewBox="0 0 24 24">241 <rect x="3" y="3" width="18" height="18" rx="3" fill="none" stroke="#ff6f00" stroke-width="2"></rect>242 <text x="12" y="16" font-size="10" text-anchor="middle" fill="#ff6f00" font-weight="700">M</text>243 </svg>244 </div>245 <div class="nav-label">Migros</div>246 </div>247 <div class="nav-item">248 <div class="nav-icon">249 <svg width="48" height="48" viewBox="0 0 24 24">250 <rect x="5" y="4" width="14" height="16" rx="2" fill="none" stroke="#777" stroke-width="2"></rect>251 <path d="M7 8h10M7 12h10M7 16h10" stroke="#777" stroke-width="2"></path>252 </svg>253 </div>254 <div class="nav-label">List</div>255 </div>256 <div class="nav-item">257 <div class="nav-icon">258 <svg width="48" height="48" viewBox="0 0 24 24">259 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#777" stroke-width="2"></rect>260 <path d="M3 9h18" stroke="#777" stroke-width="2"></path>261 </svg>262 </div>263 <div class="nav-label">Wallet</div>264 </div>265 <div class="nav-item">266 <div class="nav-icon" style="color:#222">267 <svg width="48" height="48" viewBox="0 0 24 24">268 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>269 <text x="12" y="15" font-size="10" text-anchor="middle" fill="#777" font-weight="800">Go</text>270 </svg>271 </div>272 <div class="nav-label">subitoGo</div>273 </div>274 <div class="nav-item">275 <div class="nav-icon">276 <svg width="48" height="48" viewBox="0 0 24 24">277 <path d="M6 7h12l-1 12H7L6 7z" fill="none" stroke="#777" stroke-width="2"></path>278 <circle cx="9" cy="20" r="1.5" fill="#777"></circle>279 <circle cx="15" cy="20" r="1.5" fill="#777"></circle>280 </svg>281 </div>282 <div class="nav-label">Order</div>283 </div>284 </div>285 </div>286 287 <div class="gesture"></div>288</div>289</body>290</html>