GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Japanese Recipes UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #3D3D3D;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29    font-size: 36px;30  }31  .status-left { flex: 1; }32  .status-right { display: flex; gap: 28px; align-items: center; }33  .icon-wifi svg, .icon-battery svg {34    width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 6;35  }36 37  /* Header */38  .header {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 160px;44    background: #FFFFFF;45    display: flex;46    align-items: center;47    padding: 0 40px;48    box-sizing: border-box;49    box-shadow: 0 2px 0 rgba(0,0,0,0.05);50    z-index: 5;51  }52  .back-icon {53    width: 56px; height: 56px; margin-right: 20px;54  }55  .header-title {56    font-size: 64px;57    font-weight: 700;58    color: #333;59  }60 61  /* Scroll area (static mimic) */62  .content {63    position: absolute;64    top: 280px; /* below header */65    left: 0;66    width: 1080px;67    height: 2120px;68    padding: 20px 0 40px;69    box-sizing: border-box;70  }71 72  .card {73    position: relative;74    width: 1000px;75    height: 520px;76    margin: 28px auto;77    border-radius: 28px;78    overflow: hidden;79    box-shadow: 0 8px 16px rgba(0,0,0,0.15);80  }81  .card .img {82    position: absolute;83    inset: 0;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    display: flex;87    justify-content: center;88    align-items: center;89    color: #757575;90    font-size: 34px;91    text-transform: uppercase;92    letter-spacing: 1px;93  }94  .card .gradient {95    position: absolute;96    inset: 0;97    background: linear-gradient(to bottom, rgba(0,0,0,0.10) 10%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.60) 100%);98    pointer-events: none;99  }100 101  .pill {102    position: absolute;103    top: 24px;104    left: 36px;105    background: rgba(255,255,255,0.92);106    color: #333;107    border-radius: 28px;108    padding: 10px 20px;109    font-weight: 700;110    display: inline-flex;111    align-items: center;112    gap: 14px;113    font-size: 28px;114    z-index: 2;115  }116  .pill .lock {117    width: 36px; height: 36px;118  }119 120  .plus-btn {121    position: absolute;122    right: 32px;123    bottom: 32px;124    width: 88px;125    height: 88px;126    border-radius: 44px;127    background: #2A9D8F;128    display: flex;129    align-items: center;130    justify-content: center;131    z-index: 3;132    box-shadow: 0 4px 10px rgba(0,0,0,0.25);133  }134  .plus-btn svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 8; }135 136  .text-wrap {137    position: absolute;138    left: 36px;139    bottom: 36px;140    right: 140px;141    color: #fff;142    z-index: 2;143  }144  .rating {145    font-size: 28px;146    letter-spacing: 6px;147    color: #fff;148    margin-bottom: 8px;149  }150  .title {151    font-size: 54px;152    font-weight: 700;153    margin-bottom: 10px;154    line-height: 1.15;155  }156  .source {157    font-size: 28px;158    letter-spacing: 1px;159    color: #D0D0D0;160  }161 162  /* Upper caption for the top partial card */163  .upper-caption {164    position: absolute;165    left: 60px;166    top: 24px;167    color: rgba(255,255,255,0.9);168    font-weight: 700;169    letter-spacing: 3px;170    font-size: 28px;171    z-index: 2;172  }173 174  /* Rounded corners match screenshot feel */175  .card.rounded { border-radius: 28px; }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Status bar -->182  <div class="status-bar">183    <div class="status-left">8:44</div>184    <div class="status-right">185      <div class="icon-wifi">186        <svg viewBox="0 0 48 48">187          <path d="M6 18c9-9 27-9 36 0"></path>188          <path d="M12 24c6-6 18-6 24 0"></path>189          <path d="M18 30c3-3 9-3 12 0"></path>190          <circle cx="24" cy="36" r="3" fill="#fff"></circle>191        </svg>192      </div>193      <div class="icon-battery">194        <svg viewBox="0 0 60 48">195          <rect x="6" y="12" width="40" height="24" rx="4" ry="4"></rect>196          <rect x="48" y="18" width="6" height="12" rx="2"></rect>197          <rect x="10" y="16" width="30" height="16" fill="#fff" stroke="none"></rect>198        </svg>199      </div>200    </div>201  </div>202 203  <!-- Header -->204  <div class="header">205    <svg class="back-icon" viewBox="0 0 48 48">206      <path d="M30 6 L12 24 L30 42" stroke="#333" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>207    </svg>208    <div class="header-title">Japanese</div>209  </div>210 211  <!-- Content / Cards -->212  <div class="content">213 214    <!-- Card 1 - Chicken Fried Rice -->215    <div class="card">216      <div class="img">[IMG: Chicken Fried Rice]</div>217      <div class="gradient"></div>218 219      <div class="pill">220        <svg class="lock" viewBox="0 0 48 48">221          <rect x="10" y="20" width="28" height="20" rx="4" fill="none" stroke="#333" stroke-width="4"></rect>222          <path d="M16 20 v-6 a8 8 0 0 1 16 0 v6" fill="none" stroke="#333" stroke-width="4"></path>223        </svg>224        ORIGINAL225      </div>226 227      <div class="upper-caption">AUTHENTIC SUBURBAN GOURMET</div>228 229      <div class="plus-btn">230        <svg viewBox="0 0 48 48">231          <path d="M24 8 v32 M8 24 h32"></path>232        </svg>233      </div>234 235      <div class="text-wrap">236        <div class="rating">★★★★★</div>237        <div class="title">Chicken Fried Rice</div>238        <div class="source">YUMMLY</div>239      </div>240    </div>241 242    <!-- Card 2 - Gyoza -->243    <div class="card">244      <div class="img">[IMG: Gyoza (Japanese Dumplings)]</div>245      <div class="gradient"></div>246 247      <div class="plus-btn">248        <svg viewBox="0 0 48 48">249          <path d="M24 8 v32 M8 24 h32"></path>250        </svg>251      </div>252 253      <div class="text-wrap">254        <div class="rating" style="color:#FF7B4A;">★★★★★</div>255        <div class="title">Gyoza (Japanese Dumplings)</div>256        <div class="source">PORK</div>257      </div>258    </div>259 260    <!-- Card 3 - Sushi Burrito -->261    <div class="card">262      <div class="img">[IMG: Sushi Burrito]</div>263      <div class="gradient"></div>264 265      <div class="plus-btn">266        <svg viewBox="0 0 48 48">267          <path d="M24 8 v32 M8 24 h32"></path>268        </svg>269      </div>270 271      <div class="text-wrap">272        <div class="rating">★★★★★</div>273        <div class="title">Sushi Burrito</div>274        <div class="source">KITCHENAID</div>275      </div>276    </div>277 278    <!-- Card 4 - partially visible at bottom (optional) -->279    <div class="card">280      <div class="img">[IMG: Japanese Dish Placeholder]</div>281      <div class="gradient"></div>282 283      <div class="plus-btn">284        <svg viewBox="0 0 48 48">285          <path d="M24 8 v32 M8 24 h32"></path>286        </svg>287      </div>288 289      <div class="text-wrap">290        <div class="rating">★★★★★</div>291        <div class="title">Teriyaki Chicken Bowl</div>292        <div class="source">SOURCE</div>293      </div>294    </div>295 296  </div>297 298</div>299</body>300</html>