GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Recipe App UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #1b1b1b; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #FFFFFF;11  }12 13  /* General helpers */14  .row { display: flex; align-items: center; }15  .space-between { justify-content: space-between; }16  .muted { color: #6b6b6b; }17  .headline { font-size: 52px; font-weight: 700; }18  .title { font-size: 44px; font-weight: 700; }19  .caption { font-size: 34px; color: #7a7a7a; }20 21  /* Status bar */22  .status-bar {23    height: 96px; padding: 0 36px;24    display: flex; align-items: center; justify-content: space-between;25    color: #222;26  }27  .status-icons svg { width: 34px; height: 34px; margin-left: 26px; }28 29  /* Search area */30  .top-search {31    padding: 10px 36px 0 36px;32  }33  .search-wrapper {34    background: #ffffff; border-radius: 52px; height: 110px; padding: 0 36px;35    box-shadow: 0 6px 16px rgba(0,0,0,0.08);36    display: flex; align-items: center; justify-content: space-between;37  }38  .search-left { display: flex; align-items: center; flex: 1; }39  .search-icon { width: 44px; height: 44px; margin-right: 22px; opacity: .7; }40  .search-placeholder { font-size: 40px; color: #8b8b8b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }41  .avatar {42    width: 96px; height: 96px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;43    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;44  }45 46  /* Banner */47  .banner {48    margin: 28px 36px 0 36px; border-radius: 28px; overflow: hidden;49    box-shadow: 0 10px 24px rgba(0,0,0,0.12);50  }51  .banner-img {52    height: 560px; background: #E0E0E0; border: 1px solid #BDBDBD;53    display: flex; align-items: center; justify-content: center; color: #555; font-size: 40px;54  }55  .banner-footer {56    background: #0b0b0b; color: #fff; padding: 34px; display: flex; align-items: center; justify-content: space-between;57  }58  .banner-text .headline { color: #fff; margin: 0 0 12px 0; font-size: 56px; }59  .banner-text .caption { color: #cfcfcf; font-size: 34px; line-height: 1.35; max-width: 680px; }60  .banner-btn {61    background: transparent; border: 2px solid #3f3f3f; color: #fff; border-radius: 20px; padding: 22px 28px;62    display: flex; align-items: center; font-size: 40px;63  }64  .banner-btn svg { width: 36px; height: 36px; margin-left: 14px; }65 66  /* Sections */67  .section-header {68    margin: 48px 36px 20px 36px; display: flex; align-items: center; justify-content: space-between;69  }70  .explore-more { color: #e46e3b; font-size: 40px; display: flex; align-items: center; }71  .explore-more svg { width: 34px; height: 34px; margin-left: 10px; }72 73  /* Horizontal cards */74  .cards-row {75    display: flex; overflow-x: auto; padding-left: 36px; padding-right: 36px; gap: 36px;76  }77  .recipe-card {78    width: 320px;79  }80  .recipe-img {81    width: 320px; height: 260px; border-radius: 18px; background: #E0E0E0; border: 1px solid #BDBDBD;82    display: flex; align-items: center; justify-content: center; color: #606060; font-size: 26px;83    box-shadow: 0 6px 12px rgba(0,0,0,0.08);84  }85  .recipe-name {86    margin-top: 18px; font-size: 40px; font-weight: 700; line-height: 1.15;87  }88  .recipe-time { margin-top: 8px; font-size: 34px; color: #7a7a7a; }89 90  /* Bottom big preview (blurred like video frame placeholder) */91  .big-preview {92    margin: 36px; height: 340px; border-radius: 20px; overflow: hidden;93    background: #E0E0E0; border: 1px solid #BDBDBD;94    display: flex; align-items: center; justify-content: center; color: #6a6a6a; font-size: 40px;95  }96 97  /* Bottom navigation */98  .tabbar {99    position: absolute; left: 0; right: 0; bottom: 0;100    height: 176px; border-top: 1px solid #e6e6e6; background: #fff;101    display: flex; justify-content: space-around; align-items: center;102  }103  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #8a8a8a; }104  .tab.active { color: #e1792f; }105  .tab svg { width: 56px; height: 56px; }106  .tab span { font-size: 34px; }107  .new-pill {108    position: absolute; bottom: 146px; right: 184px;109    background: #ff8b2b; color: #fff; font-weight: 700; font-size: 24px; padding: 6px 12px; border-radius: 10px;110    box-shadow: 0 2px 8px rgba(0,0,0,0.15);111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status bar -->118  <div class="status-bar">119    <div style="font-size:38px;">8:51</div>120    <div class="status-icons row">121      <!-- Simple placeholders for system icons -->122      <svg viewBox="0 0 24 24" fill="#444"><path d="M7 3h10v18H7z"/></svg>123      <svg viewBox="0 0 24 24" fill="#444"><path d="M3 10h18v4H3z"/></svg>124      <svg viewBox="0 0 24 24" fill="#444"><path d="M12 2a7 7 0 0 0 0 14 7 7 0 0 0 0-14zm0 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>125    </div>126  </div>127 128  <!-- Search -->129  <div class="top-search">130    <div class="search-wrapper">131      <div class="search-left">132        <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">133          <circle cx="11" cy="11" r="7"></circle>134          <path d="M20 20l-3.5-3.5"></path>135        </svg>136        <div class="search-placeholder">Search Recipes, Cuisines, Diet</div>137      </div>138      <div class="avatar">Avatar</div>139    </div>140  </div>141 142  <!-- Banner -->143  <div class="banner">144    <div class="banner-img">[IMG: Snack Time fried snack in basket]</div>145    <div class="banner-footer">146      <div class="banner-text">147        <div class="headline">Snack Time</div>148        <div class="caption">A collection of simple and delicious snack recipes that you will love!</div>149      </div>150      <div class="banner-btn">151        23 Recipes152        <svg viewBox="0 0 24 24" fill="#fff"><path d="M8 4l8 8-8 8z"/></svg>153      </div>154    </div>155  </div>156 157  <!-- New Recipes section -->158  <div class="section-header">159    <div class="title">New Recipes</div>160    <div class="explore-more">Explore more161      <svg viewBox="0 0 24 24" fill="#e46e3b"><path d="M8 4l8 8-8 8z"/></svg>162    </div>163  </div>164 165  <div class="cards-row">166    <div class="recipe-card">167      <div class="recipe-img">[IMG: Coconut Milk Fried Rice]</div>168      <div class="recipe-name">Coconut Milk Fried Rice</div>169      <div class="recipe-time">Total Time: 50 mins</div>170    </div>171    <div class="recipe-card">172      <div class="recipe-img">[IMG: Malvani Chicken Curry with pav]</div>173      <div class="recipe-name">Malvani Chicken Curry</div>174      <div class="recipe-time">Total Time: 50 mins</div>175    </div>176    <div class="recipe-card">177      <div class="recipe-img">[IMG: Maasi Samayal with string hoppers]</div>178      <div class="recipe-name">Maasi Samayal</div>179      <div class="recipe-time">Total Time: 50 mins</div>180    </div>181    <div class="recipe-card">182      <div class="recipe-img">[IMG: Additional Recipe]</div>183      <div class="recipe-name">Tasty Pasta Bowl</div>184      <div class="recipe-time">Total Time: 40 mins</div>185    </div>186  </div>187 188  <!-- Large preview below cards -->189  <div class="big-preview">[IMG: Food video preview banner]</div>190 191  <!-- Bottom tab bar -->192  <div class="tabbar">193    <div class="tab active">194      <svg viewBox="0 0 24 24" fill="none" stroke="#e1792f" stroke-width="2">195        <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/>196      </svg>197      <span>Home</span>198    </div>199    <div class="tab">200      <svg viewBox="0 0 24 24" fill="none" stroke="#8a8a8a" stroke-width="2">201        <path d="M4 6h16M4 12h16M4 18h10"/>202      </svg>203      <span>Shopping List</span>204    </div>205    <div class="tab">206      <svg viewBox="0 0 24 24" fill="none" stroke="#8a8a8a" stroke-width="2">207        <path d="M6 4h12v18l-6-3-6 3z"/>208      </svg>209      <span>Saved</span>210    </div>211    <div class="tab">212      <svg viewBox="0 0 24 24" fill="none" stroke="#8a8a8a" stroke-width="2">213        <circle cx="9" cy="21" r="1.5"/><circle cx="18" cy="21" r="1.5"/>214        <path d="M3 4h3l2 12h10l2-8H8"/>215      </svg>216      <span>Shop</span>217    </div>218    <div class="new-pill">NEW</div>219  </div>220 221</div>222</body>223</html>