GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Ochama App UI Mock</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 gradient header */16 .top-header {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 320px;22 background: linear-gradient(180deg, #2d0c2d 0%, #1a0d1e 40%, #0e0c12 100%);23 color: #fff;24 }25 26 /* Status bar */27 .status-bar {28 position: absolute;29 top: 24px;30 left: 32px;31 right: 32px;32 height: 44px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 opacity: 0.95;37 font-size: 34px;38 letter-spacing: 0.5px;39 }40 .status-icons {41 display: flex;42 align-items: center;43 gap: 24px;44 }45 .status-icons svg { fill: #fff; }46 47 /* Logo row */48 .logo-row {49 position: absolute;50 top: 92px;51 left: 32px;52 right: 32px;53 height: 60px;54 display: flex;55 align-items: center;56 justify-content: space-between;57 }58 .brand {59 display: flex;60 align-items: center;61 gap: 18px;62 color: #fff;63 font-weight: 700;64 font-size: 44px;65 }66 .badge-wrap {67 position: relative;68 display: flex;69 align-items: center;70 gap: 10px;71 color: #fff;72 font-size: 38px;73 font-weight: 700;74 }75 .pickup-text {76 display: flex;77 align-items: center;78 gap: 12px;79 background: rgba(255,255,255,0.08);80 padding: 12px 18px;81 border-radius: 16px;82 }83 .badge-count {84 position: absolute;85 top: -26px;86 left: 46px;87 background: #f3d58a;88 color: #4a3501;89 font-size: 28px;90 padding: 8px 18px;91 border-radius: 20px;92 box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;93 font-weight: 800;94 }95 96 /* Search bar */97 .search {98 position: absolute;99 top: 170px;100 left: 32px;101 width: 1016px;102 height: 100px;103 background: #ffffff;104 border-radius: 60px;105 display: flex;106 align-items: center;107 padding: 0 28px;108 box-shadow: 0 6px 18px rgba(0,0,0,0.25);109 color: #bdbdbd;110 font-size: 40px;111 }112 .search svg { fill: #a3a3a3; margin-right: 20px; }113 114 /* Loader in content area */115 .loader {116 position: absolute;117 top: 1120px;118 left: 50%;119 transform: translateX(-50%);120 width: 130px;121 height: 130px;122 border-radius: 50%;123 border: 12px solid rgba(0,0,0,0.06);124 border-top-color: #e84a3a;125 animation: spin 1s linear infinite;126 }127 @keyframes spin {128 to { transform: translateX(-50%) rotate(360deg); }129 }130 131 /* Voucher banner */132 .voucher-banner {133 position: absolute;134 left: 24px;135 right: 24px;136 bottom: 280px;137 height: 160px;138 background: #2c2c2c;139 border-radius: 22px;140 display: flex;141 align-items: center;142 padding: 0 28px;143 color: #fff;144 box-shadow: 0 10px 18px rgba(0,0,0,0.12);145 }146 .voucher-left {147 display: flex;148 align-items: center;149 gap: 22px;150 flex: 1;151 }152 .voucher-icon {153 width: 84px;154 height: 84px;155 border-radius: 18px;156 background: #ff7c39;157 display: flex;158 align-items: center;159 justify-content: center;160 color: #fff;161 font-weight: 900;162 font-size: 36px;163 box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;164 }165 .voucher-text {166 font-size: 34px;167 line-height: 46px;168 }169 .banner-actions {170 display: flex;171 align-items: center;172 gap: 22px;173 }174 .btn {175 height: 90px;176 padding: 0 40px;177 border-radius: 50px;178 font-size: 36px;179 font-weight: 800;180 border: none;181 color: #fff;182 cursor: pointer;183 }184 .btn-signup { background: #ff8c3a; }185 .btn-signin { background: #e3452f; }186 187 /* Bottom navigation bar */188 .bottom-nav {189 position: absolute;190 bottom: 0;191 left: 0;192 width: 1080px;193 height: 220px;194 background: #ffffff;195 border-top: 1px solid #e6e6e6;196 display: flex;197 justify-content: space-around;198 align-items: center;199 }200 .nav-item {201 width: 20%;202 text-align: center;203 color: #6c6c6c;204 font-size: 30px;205 }206 .nav-item.active { color: #000; }207 .nav-item svg { width: 72px; height: 72px; margin-bottom: 14px; }208 209 /* Home indicator bar */210 .home-indicator {211 position: absolute;212 bottom: 240px;213 left: 50%;214 transform: translateX(-50%);215 width: 230px;216 height: 12px;217 background: #d5d5d5;218 border-radius: 8px;219 }220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Top Header -->226 <div class="top-header">227 <div class="status-bar">228 <div>11:14</div>229 <div class="status-icons">230 <!-- Wi-Fi icon -->231 <svg width="38" height="38" viewBox="0 0 24 24">232 <path d="M12 18.5c.9 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5zm-7.1-6.4l1.6 1.6C8.6 11 15.4 11 17.5 13.7l1.6-1.6C16.6 9.1 7.4 9.1 4.9 12.1zm-3.2-3.4l1.6 1.6C7.5 7.7 16.5 7.7 20.7 10.3l1.6-1.6C17.3 5.5 6.7 5.5 1.7 8.7z"/>233 </svg>234 <!-- Battery icon -->235 <svg width="38" height="38" viewBox="0 0 24 24">236 <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>237 <rect x="20" y="10" width="2" height="4"></rect>238 <rect x="4" y="8" width="12" height="8" fill="#ffffff"></rect>239 </svg>240 </div>241 </div>242 243 <!-- Logo row -->244 <div class="logo-row">245 <div class="brand">246 <!-- simple swirl logo -->247 <svg width="64" height="64" viewBox="0 0 24 24">248 <circle cx="12" cy="12" r="10" fill="#e84a3a"></circle>249 <path d="M12 6a6 6 0 1 1-4.2 10.2" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>250 </svg>251 <span>ochama</span>252 </div>253 254 <div class="badge-wrap">255 <div class="pickup-text">256 <!-- store icon -->257 <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff">258 <path d="M3 8l2-4h14l2 4v2c0 1.7-1.3 3-3 3s-3-1.3-3-3c0 1.7-1.3 3-3 3s-3-1.3-3-3c0 1.7-1.3 3-3 3S3 11.7 3 10V8zm2 8v4h14v-4H5z"/>259 </svg>260 <span>Pickup Points</span>261 </div>262 <div class="badge-count">500+</div>263 </div>264 </div>265 266 <!-- Search bar -->267 <div class="search">268 <svg width="52" height="52" viewBox="0 0 24 24">269 <circle cx="10" cy="10" r="7"></circle>270 <path d="M15 15l6 6" stroke="#a3a3a3" stroke-width="3" stroke-linecap="round"></path>271 </svg>272 <span>What are you looking for?</span>273 </div>274 </div>275 276 <!-- Center loader to mimic empty content -->277 <div class="loader"></div>278 279 <!-- Voucher banner -->280 <div class="voucher-banner">281 <div class="voucher-left">282 <div class="voucher-icon">€10</div>283 <div class="voucher-text">284 Register now and receive a €10 voucher. Don't miss out!285 </div>286 </div>287 <div class="banner-actions">288 <button class="btn btn-signup">Sign up</button>289 <button class="btn btn-signin">Sign in</button>290 </div>291 </div>292 293 <!-- Home indicator -->294 <div class="home-indicator"></div>295 296 <!-- Bottom navigation -->297 <div class="bottom-nav">298 <div class="nav-item active">299 <svg viewBox="0 0 24 24">300 <path d="M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-6v-6H10v6H4a1 1 0 0 1-1-1V10z" fill="#1f1f1f"/>301 </svg>302 <div>Home</div>303 </div>304 <div class="nav-item">305 <svg viewBox="0 0 24 24" fill="#6c6c6c">306 <path d="M21 13l-8 8-8-8 8-8 8 8zm-8-5.5L5.5 15H9l4-4 4 4h3.5L13 7.5z"/>307 </svg>308 <div>Deals</div>309 </div>310 <div class="nav-item">311 <svg viewBox="0 0 24 24" fill="#6c6c6c">312 <rect x="3" y="3" width="8" height="8" rx="2"></rect>313 <rect x="13" y="3" width="8" height="8" rx="2"></rect>314 <rect x="3" y="13" width="8" height="8" rx="2"></rect>315 <rect x="13" y="13" width="8" height="8" rx="2"></rect>316 </svg>317 <div>Categories</div>318 </div>319 <div class="nav-item">320 <svg viewBox="0 0 24 24" fill="#6c6c6c">321 <path d="M7 6h14l-2 8H9L7 6zm0 0H3V4h4v2zm2 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 .001 4A2 2 0 0 0 17 18z"/>322 </svg>323 <div>Cart</div>324 </div>325 <div class="nav-item">326 <svg viewBox="0 0 24 24" fill="#6c6c6c">327 <circle cx="12" cy="7" r="4"></circle>328 <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"></path>329 </svg>330 <div>Profile</div>331 </div>332 </div>333 334</div>335</body>336</html>