GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe Detail UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14    color: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    background: #000;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    box-sizing: border-box;30    font-weight: 600;31    letter-spacing: 0.5px;32  }33  .status-left { display: flex; align-items: center; gap: 18px; font-size: 34px; }34  .status-right { display: flex; align-items: center; gap: 22px; font-size: 30px; }35  .status-icon svg { width: 34px; height: 34px; fill: #fff; opacity: 0.9; }36 37  /* Toast */38  .toast {39    position: absolute;40    top: 130px;41    left: 66px;42    width: 948px;43    background: #2b2b2b;44    color: #fff;45    border-radius: 24px;46    padding: 24px 28px;47    box-sizing: border-box;48    font-size: 34px;49    line-height: 42px;50    z-index: 5;51    box-shadow: 0 8px 18px rgba(0,0,0,0.35);52  }53 54  /* Hero image */55  .hero {56    position: absolute;57    top: 90px;58    left: 0;59    width: 1080px;60    height: 980px;61    background: #E0E0E0;62    border: 1px solid #BDBDBD;63    display: flex;64    justify-content: center;65    align-items: center;66    color: #757575;67    font-size: 36px;68  }69 70  /* Content area */71  .content {72    position: absolute;73    top: 1070px;74    left: 0;75    width: 1080px;76    box-sizing: border-box;77    padding: 0 48px;78  }79 80  .section {81    margin-bottom: 60px;82  }83 84  .reviews-header {85    display: flex;86    align-items: baseline;87    justify-content: space-between;88    margin-top: 24px;89  }90  .reviews-title { font-size: 56px; font-weight: 700; }91  .write-link { font-size: 36px; color: #ff7a40; font-weight: 600; }92  .meta { font-size: 32px; color: #b0b0b0; margin-top: 12px; }93  .empty-text { font-size: 34px; color: #cfcfcf; margin-top: 36px; line-height: 48px; }94  .divider { height: 1px; background: #2a2a2a; margin: 52px 0 28px; }95 96  /* Suggestions */97  .suggest-title { font-size: 52px; font-weight: 800; margin-bottom: 28px; }98  .cards {99    display: flex;100    gap: 34px;101  }102  .card {103    position: relative;104    width: 480px;105    height: 650px;106    border-radius: 28px;107    overflow: hidden;108    background: #111;109  }110  .card-img {111    position: absolute;112    inset: 0;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #757575;119    font-size: 30px;120  }121  .duration-pill {122    position: absolute;123    top: 18px;124    left: 18px;125    background: #F3E0A6;126    color: #2b2b2b;127    border-radius: 20px;128    padding: 10px 18px;129    font-size: 30px;130    font-weight: 700;131  }132  .like-pill {133    position: absolute;134    bottom: 18px;135    right: 18px;136    background: #ffffff;137    color: #222;138    border-radius: 24px;139    padding: 10px 16px;140    display: flex;141    align-items: center;142    gap: 12px;143    box-shadow: 0 4px 12px rgba(0,0,0,0.25);144    font-size: 28px;145  }146  .like-pill svg { width: 30px; height: 30px; fill: none; stroke: #222; stroke-width: 2.4; }147 148  /* Page indicator bar */149  .indicator {150    position: absolute;151    bottom: 62px;152    left: 50%;153    transform: translateX(-50%);154    width: 420px;155    height: 14px;156    background: #d0d0d0;157    border-radius: 18px;158    opacity: 0.6;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status Bar -->166  <div class="status-bar">167    <div class="status-left">168      <div>10:33</div>169      <div class="status-icon">170        <!-- Simple triangle warning icon -->171        <svg viewBox="0 0 24 24">172          <path d="M12 3l10 18H2L12 3zm0 5.5l-1 6h2l-1-6zm0 9.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" fill="#fff"></path>173        </svg>174      </div>175      <div class="status-icon">176        <!-- Gear (simplified) -->177        <svg viewBox="0 0 24 24">178          <path d="M12 8a4 4 0 110 8 4 4 0 010-8zm9 4l-2.2.6.8 2.1-1.6 1.6-2.1-.8L15 18l-3 .9-3-.9-1.9-2.5-2.1.8-1.6-1.6.8-2.1L3 12l.6-2.2-2.1-.8 1.6-1.6 2.1.8L9 6l3-.9 3 .9 1.9 2.5 2.1-.8 1.6 1.6-2.1.8.6 2.2z"></path>179        </svg>180      </div>181      <div class="status-icon">182        <!-- Cloud -->183        <svg viewBox="0 0 24 24">184          <path d="M19 10.5a4.5 4.5 0 00-8.6-1.5A4 4 0 006 13a4 4 0 004 4h8a4 4 0 001-6.5z"></path>185        </svg>186      </div>187    </div>188    <div class="status-right">189      <div class="status-icon">190        <!-- WiFi -->191        <svg viewBox="0 0 24 24">192          <path d="M2 7c5.5-5 14.5-5 20 0M5 10.5c4-3.5 10-3.5 14 0M8 14c2.5-2 6.5-2 9 0M12 18.5a1.5 1.5 0 11-0.01 0"></path>193        </svg>194      </div>195      <div class="status-icon">196        <!-- Battery -->197        <svg viewBox="0 0 28 24">198          <rect x="1" y="6" width="22" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>199          <rect x="3" y="8" width="18" height="8" rx="1" fill="#fff"></rect>200          <rect x="23.5" y="9" width="3.5" height="6" rx="1" fill="#fff"></rect>201        </svg>202      </div>203      <div>100%</div>204    </div>205  </div>206 207  <!-- Toast notification -->208  <div class="toast">Hooray! You've successfully saved your recipe!</div>209 210  <!-- Hero image -->211  <div class="hero">[IMG: Dessert bowl on wooden table]</div>212 213  <!-- Content -->214  <div class="content">215    <div class="section">216      <div class="reviews-header">217        <div class="reviews-title">Reviews</div>218        <div class="write-link">Write</div>219      </div>220      <div class="meta">0 comments - 0 images</div>221      <div class="empty-text">There are no reactions yet. Be the first to share your cooking experience!</div>222      <div class="divider"></div>223    </div>224 225    <div class="section">226      <div class="suggest-title">More delicious ideas for you</div>227      <div class="cards">228        <!-- Card 1 -->229        <div class="card">230          <div class="card-img">[IMG: Apple pie on table]</div>231          <div class="duration-pill">100 min.</div>232          <div class="like-pill">233            <svg viewBox="0 0 24 24">234              <path d="M12 21s-6.5-4.3-8.3-6.9C2 11.8 3.5 8.7 6.6 8.7c2 0 3 1.3 3.4 2 0.4-0.7 1.4-2 3.4-2 3.1 0 4.6 3.1 2.9 5.4C18.5 16.7 12 21 12 21z"></path>235            </svg>236            <span>0</span>237          </div>238        </div>239 240        <!-- Card 2 -->241        <div class="card">242          <div class="card-img">[IMG: Simple biscuits on plate with vase]</div>243          <div class="duration-pill">30 min.</div>244          <div class="like-pill">245            <svg viewBox="0 0 24 24">246              <path d="M12 21s-6.5-4.3-8.3-6.9C2 11.8 3.5 8.7 6.6 8.7c2 0 3 1.3 3.4 2 0.4-0.7 1.4-2 3.4-2 3.1 0 4.6 3.1 2.9 5.4C18.5 16.7 12 21 12 21z"></path>247            </svg>248            <span>0</span>249          </div>250        </div>251      </div>252    </div>253  </div>254 255  <!-- Bottom indicator -->256  <div class="indicator"></div>257 258</div>259</body>260</html>