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>Recipe App Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #26282D; /* dark app canvas */20    color: #F3F3F3;21  }22 23  /* Top status bar */24  .statusbar {25    height: 96px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-weight: 600;32    font-size: 36px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-icons svg {40    width: 42px;41    height: 42px;42    fill: none;43    stroke: #EDEDED;44    stroke-width: 3;45  }46 47  /* Search */48  .search-wrap {49    padding: 20px 36px 6px 36px;50  }51  .search-bar {52    height: 112px;53    border: 2px solid #3A3C41;54    background: #2F3238;55    border-radius: 56px;56    padding: 0 36px;57    display: flex;58    align-items: center;59    gap: 26px;60    color: #9AA2A9;61    font-size: 38px;62  }63  .search-bar svg {64    width: 44px;65    height: 44px;66    stroke: #9AA2A9;67    stroke-width: 4;68    fill: none;69  }70 71  /* Sections */72  .section-title {73    padding: 22px 36px 18px 36px;74    font-size: 52px;75    font-weight: 800;76    color: #FFFFFF;77  }78 79  /* Featured card */80  .featured-card {81    margin: 0 36px;82    border-radius: 18px;83    overflow: hidden;84    background: #202226;85    position: relative;86  }87  .featured-img {88    height: 860px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    display: flex;92    align-items: center;93    justify-content: center;94    color: #757575;95    font-size: 40px;96    font-weight: 600;97  }98  .featured-footer {99    position: absolute;100    left: 0;101    right: 0;102    bottom: 0;103    padding: 34px 36px;104    background: #2D6E7A;105    color: #EAF4F6;106    font-size: 60px;107    font-weight: 800;108    border-bottom-left-radius: 18px;109    border-bottom-right-radius: 18px;110  }111 112  /* Community grid */113  .community-grid {114    display: flex;115    gap: 30px;116    padding: 16px 36px 0 36px;117  }118  .community-card {119    width: calc((100% - 30px) / 2);120    background: #2B2E33;121    border-radius: 16px;122    overflow: hidden;123  }124  .community-img {125    height: 360px;126    background: #E0E0E0;127    border: 1px solid #BDBDBD;128    display: flex;129    align-items: center;130    justify-content: center;131    color: #757575;132    font-size: 34px;133    font-weight: 600;134  }135  .community-meta {136    display: flex;137    align-items: center;138    gap: 18px;139    padding: 18px;140    color: #DADADA;141    font-size: 36px;142    border-top: 1px solid #3A3C41;143    background: #2B2E33;144  }145  .avatar {146    width: 60px;147    height: 60px;148    background: #E0E0E0;149    border: 1px solid #BDBDBD;150    border-radius: 50%;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #757575;155    font-size: 22px;156    flex-shrink: 0;157  }158 159  /* Bottom navigation */160  .bottom-nav {161    position: absolute;162    left: 0;163    right: 0;164    bottom: 56px;165    height: 160px;166    background: #2A2D32;167    border-top: 1px solid #3A3C41;168    display: flex;169    padding: 16px 24px 8px 24px;170    justify-content: space-around;171    align-items: center;172  }173  .nav-item {174    display: flex;175    flex-direction: column;176    align-items: center;177    gap: 12px;178    color: #AEB3B9;179    font-size: 34px;180    font-weight: 700;181  }182  .nav-item svg {183    width: 52px;184    height: 52px;185    stroke: #AEB3B9;186    fill: none;187    stroke-width: 3.5;188  }189  .nav-item.active {190    color: #FFFFFF;191  }192  .nav-item.active svg {193    stroke: #FF4D86; /* pink highlight for Discover */194  }195  .profile-dot {196    width: 56px;197    height: 56px;198    border-radius: 50%;199    background: #3B5B75;200    color: #DDEAF4;201    display: flex;202    align-items: center;203    justify-content: center;204    font-weight: 800;205    font-size: 30px;206  }207 208  /* Home indicator */209  .home-indicator {210    position: absolute;211    bottom: 18px;212    left: 50%;213    transform: translateX(-50%);214    width: 360px;215    height: 10px;216    background: #FFFFFF;217    opacity: 0.9;218    border-radius: 6px;219  }220</style>221</head>222<body>223<div id="render-target">224  <!-- Status bar -->225  <div class="statusbar">226    <div>3:10</div>227    <div class="status-icons">228      <!-- Wi-Fi icon -->229      <svg viewBox="0 0 24 24" aria-label="wifi">230        <path d="M2 8c5-4 15-4 20 0" />231        <path d="M5 11c4-3 10-3 14 0" />232        <path d="M8 14c3-2 5-2 8 0" />233        <circle cx="12" cy="17" r="1.5" fill="#EDEDED" />234      </svg>235      <!-- Battery icon -->236      <svg viewBox="0 0 30 24" aria-label="battery">237        <rect x="2" y="5" width="22" height="14" rx="2"></rect>238        <rect x="25" y="9" width="3" height="6" rx="1"></rect>239        <rect x="4" y="7" width="18" height="10" fill="#EDEDED" stroke="none"></rect>240      </svg>241    </div>242  </div>243 244  <!-- Search -->245  <div class="search-wrap">246    <div class="search-bar">247      <svg viewBox="0 0 24 24" aria-label="search">248        <circle cx="11" cy="11" r="7"></circle>249        <path d="M16 16l6 6"></path>250      </svg>251      <div>Search for recipes</div>252    </div>253  </div>254 255  <!-- Section: Loving Now -->256  <div class="section-title">What We're Loving Now</div>257  <div class="featured-card">258    <div class="featured-img">[IMG: Southwestern Taco Salad Bowl]</div>259    <div class="featured-footer">Southwestern Taco Salad</div>260  </div>261 262  <!-- Section: Community -->263  <div class="section-title" style="padding-top: 32px;">What Our Community is Cooking!</div>264  <div class="community-grid">265    <!-- Card 1 -->266    <div class="community-card">267      <div class="community-img">[IMG: Pancakes on Plate]</div>268      <div class="community-meta">269        <div class="avatar">[IMG]</div>270        <div>Beverlee Lynn cooked</div>271      </div>272    </div>273 274    <!-- Card 2 -->275    <div class="community-card">276      <div class="community-img">[IMG: Rice with Meat Sauce]</div>277      <div class="community-meta">278        <div class="avatar">[IMG]</div>279        <div>Yunioka Yuna cooked</div>280      </div>281    </div>282  </div>283 284  <!-- Bottom Navigation -->285  <div class="bottom-nav">286    <div class="nav-item active">287      <!-- Discover icon (magnifier) -->288      <svg viewBox="0 0 24 24" aria-label="discover">289        <circle cx="11" cy="11" r="7"></circle>290        <path d="M16 16l6 6"></path>291      </svg>292      <div>Discover</div>293    </div>294    <div class="nav-item">295      <!-- Community icon (group) -->296      <svg viewBox="0 0 24 24" aria-label="community">297        <circle cx="8" cy="9" r="3"></circle>298        <circle cx="16" cy="9" r="3"></circle>299        <path d="M3 20c1-4 6-4 7-4s6 0 7 4"></path>300      </svg>301      <div>Community</div>302    </div>303    <div class="nav-item">304      <!-- Bag icon -->305      <svg viewBox="0 0 24 24" aria-label="bag">306        <path d="M6 8h12l-1 12H7L6 8z"></path>307        <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>308      </svg>309      <div>My Bag</div>310    </div>311    <div class="nav-item">312      <!-- Profile icon: circle with initial -->313      <div class="profile-dot">C</div>314      <div>Profile</div>315    </div>316  </div>317 318  <!-- Home indicator -->319  <div class="home-indicator"></div>320</div>321</body>322</html>