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>Japanese Recipes UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", "Arial", sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 150px;29    background: #424242;30    color: #fff;31    display: flex;32    align-items: center;33    padding: 0 40px;34    box-sizing: border-box;35    justify-content: space-between;36    letter-spacing: 0.5px;37  }38  .sb-left, .sb-right {39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .time {44    font-size: 42px;45    font-weight: 600;46  }47  .sb-icon svg {48    display: block;49  }50 51  /* Header */52  .header {53    position: absolute;54    top: 150px;55    left: 0;56    width: 100%;57    padding: 36px 56px 24px 56px;58    box-sizing: border-box;59    background: #ffffff;60    color: #222;61  }62  .back {63    width: 64px;64    height: 64px;65    margin-bottom: 20px;66  }67  .title {68    font-size: 72px;69    font-weight: 700;70    letter-spacing: 0.5px;71    color: #2a2a2a;72  }73 74  /* Cards */75  .card {76    position: absolute;77    left: 60px;78    width: 960px;79    height: 540px;80    border-radius: 32px;81    overflow: hidden;82    background: #f0f0f0;83    box-shadow: 0 6px 16px rgba(0,0,0,0.08);84  }85  .card .image {86    position: absolute;87    inset: 0;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #757575;94    font-size: 34px;95    font-weight: 600;96  }97  .card .overlay {98    position: absolute;99    left: 0;100    right: 0;101    bottom: 0;102    height: 70%;103    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 60%, rgba(0,0,0,0));104    pointer-events: none;105  }106  .card .content {107    position: absolute;108    left: 36px;109    right: 36px;110    bottom: 34px;111    color: #ffffff;112  }113  .stars {114    color: #ff7a2a;115    font-size: 28px;116    letter-spacing: 3px;117    margin-bottom: 10px;118  }119  .recipe-title {120    font-size: 52px;121    font-weight: 700;122    margin: 8px 0 6px 0;123  }124  .source {125    font-size: 26px;126    letter-spacing: 1px;127    color: #d0d0d0;128  }129  .plus-btn {130    position: absolute;131    right: 36px;132    bottom: 36px;133    width: 90px;134    height: 90px;135    border-radius: 50%;136    background: #2aa89f;137    color: #ffffff;138    font-size: 58px;139    font-weight: 700;140    display: flex;141    align-items: center;142    justify-content: center;143    box-shadow: 0 6px 12px rgba(0,0,0,0.25);144  }145 146  /* Original pill */147  .pill {148    position: absolute;149    top: 28px;150    left: 28px;151    display: inline-flex;152    align-items: center;153    gap: 14px;154    padding: 14px 22px;155    background: rgba(255,255,255,0.95);156    color: #333;157    border: 1px solid #ddd;158    border-radius: 999px;159    font-weight: 700;160    letter-spacing: 1px;161    font-size: 26px;162  }163 164  /* Positions for cards */165  .card.card-1 { top: 460px; }166  .card.card-2 { top: 1080px; }167  .card.card-3 { top: 1700px; }168 169  /* Bottom gesture area */170  .gesture {171    position: absolute;172    left: 0;173    bottom: 0;174    width: 1080px;175    height: 160px;176    background: #3f3f3f;177  }178  .gesture .pill-bar {179    position: absolute;180    left: 50%;181    top: 40%;182    width: 220px;183    height: 16px;184    transform: translateX(-50%);185    background: #cfcfcf;186    border-radius: 8px;187    opacity: 0.9;188  }189</style>190</head>191<body>192<div id="render-target">193  <!-- Status Bar -->194  <div class="status-bar">195    <div class="sb-left">196      <div class="time">8:44</div>197      <div class="sb-icon">198        <!-- Mail icon -->199        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">200          <rect x="2" y="4" width="20" height="16" rx="3" stroke="#ffffff" stroke-width="2"/>201          <path d="M3 6l9 6 9-6" stroke="#ffffff" stroke-width="2"/>202        </svg>203      </div>204      <div class="sb-icon">205        <!-- Gear icon -->206        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">207          <circle cx="12" cy="12" r="3" stroke="#ffffff" stroke-width="2"/>208          <path d="M12 2v3M12 19v3M3 12h3M18 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>209        </svg>210      </div>211    </div>212    <div class="sb-right">213      <div class="sb-icon">214        <!-- Wi-Fi icon -->215        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">216          <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>217          <path d="M5 12c3-3 11-3 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>218          <path d="M9 16c2-2 4-2 6 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>219          <circle cx="12" cy="19" r="1.5" fill="#ffffff"/>220        </svg>221      </div>222      <div class="sb-icon">223        <!-- Battery icon -->224        <svg width="44" height="44" viewBox="0 0 28 24" fill="none">225          <rect x="2" y="6" width="20" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>226          <rect x="4" y="8" width="14" height="8" fill="#ffffff"/>227          <rect x="22" y="9" width="4" height="6" rx="1" fill="#ffffff"/>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Header -->234  <div class="header">235    <div class="back">236      <!-- Back arrow -->237      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">238        <path d="M15 5l-7 7 7 7" stroke="#7a7a7a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>239      </svg>240    </div>241    <div class="title">Japanese</div>242  </div>243 244  <!-- Card 1 -->245  <div class="card card-1">246    <div class="image">[IMG: Chicken Teriyaki]</div>247    <div class="overlay"></div>248    <div class="content">249      <div class="stars">★★★★★</div>250      <div class="recipe-title">Chicken Teriyaki</div>251      <div class="source">TECHNICOLOR KITCHEN</div>252    </div>253    <div class="plus-btn">+</div>254  </div>255 256  <!-- Card 2 -->257  <div class="card card-2">258    <div class="image">[IMG: Teriyaki Chicken with Broccoli]</div>259    <div class="overlay"></div>260    <div class="pill">261      <!-- Lock icon -->262      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">263        <rect x="5" y="11" width="14" height="10" rx="2" stroke="#444" stroke-width="2"/>264        <path d="M8 11V8a4 4 0 118 0v3" stroke="#444" stroke-width="2"/>265      </svg>266      ORIGINAL267    </div>268    <div class="content">269      <div class="stars">★★★★★</div>270      <div class="recipe-title">Sheet Pan Teriyaki Sesame Chicken and Broccoli</div>271      <div class="source">YUMMLY</div>272    </div>273    <div class="plus-btn">+</div>274  </div>275 276  <!-- Card 3 -->277  <div class="card card-3">278    <div class="image">[IMG: Teriyaki Sauce Bowl]</div>279    <div class="overlay"></div>280    <div class="content">281      <div class="stars">★★★★★</div>282      <div class="recipe-title">Teriyaki Sauce</div>283      <div class="source">JAMIE COOKS IT UP</div>284    </div>285    <div class="plus-btn">+</div>286  </div>287 288  <!-- Bottom gesture area -->289  <div class="gesture">290    <div class="pill-bar"></div>291  </div>292</div>293</body>294</html>