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 Steps UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* App bar */18  .appbar {19    position: relative;20    height: 190px;21    background: #0f2030;22    color: #fff;23    box-shadow: 0 2px 8px rgba(0,0,0,0.25);24  }25  .appbar-inner {26    height: 100%;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31  }32  .appbar-left, .appbar-right {33    display: flex;34    align-items: center;35    gap: 36px;36  }37  .icon-btn {38    width: 56px;39    height: 56px;40    display: inline-flex;41    align-items: center;42    justify-content: center;43  }44 45  /* Content */46  .content {47    position: absolute;48    top: 190px;49    left: 0;50    right: 0;51    bottom: 0;52    overflow: hidden;53  }54  .steps {55    padding-bottom: 24px;56  }57  .step {58    display: flex;59    gap: 24px;60    padding: 36px 40px;61    border-bottom: 1px solid #ededed;62  }63  .num {64    font-weight: 800;65    font-size: 42px;66    color: #222;67    min-width: 72px;68  }69  .text {70    font-size: 32px;71    line-height: 1.6;72    color: #444;73  }74 75  /* Actions */76  .actions {77    display: flex;78    gap: 36px;79    padding: 44px 40px 28px 40px;80  }81  .outline-btn {82    flex: 1;83    height: 120px;84    border: 2px solid #c8672e;85    border-radius: 26px;86    background: #fff;87    color: #c8672e;88    font-weight: 700;89    font-size: 30px;90    display: flex;91    align-items: center;92    justify-content: center;93    gap: 18px;94  }95  .outline-btn svg {96    display: block;97  }98 99  /* Comment input */100  .comment-row {101    display: flex;102    align-items: center;103    gap: 26px;104    padding: 26px 40px;105  }106  .avatar {107    width: 84px;108    height: 84px;109    border-radius: 50%;110    background: #e9e9e9;111    border: 1px solid #cfcfcf;112    display: flex;113    align-items: center;114    justify-content: center;115  }116  .comment-input {117    flex: 1;118    height: 96px;119    border-radius: 22px;120    background: #f5f5f5;121    border: 1px solid #e5e5e5;122    color: #9c9c9c;123    font-size: 30px;124    display: flex;125    align-items: center;126    padding: 0 28px;127  }128 129  .related-title {130    padding: 18px 40px 0 40px;131    font-size: 36px;132    font-weight: 800;133    color: #222;134  }135 136  /* Gesture bar simulation */137  .gesture {138    position: absolute;139    left: 0;140    bottom: 0;141    width: 100%;142    height: 110px;143    background: #000;144    display: flex;145    align-items: center;146    justify-content: center;147  }148  .gesture .pill {149    width: 240px;150    height: 12px;151    border-radius: 8px;152    background: #e6e6e6;153    opacity: 0.9;154  }155</style>156</head>157<body>158<div id="render-target">159  <!-- Top App Bar -->160  <div class="appbar">161    <div class="appbar-inner">162      <div class="appbar-left">163        <!-- Back icon -->164        <div class="icon-btn">165          <svg width="56" height="56" viewBox="0 0 48 48">166            <path d="M28 12 L16 24 L28 36" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167          </svg>168        </div>169      </div>170      <div class="appbar-right">171        <!-- Share icon -->172        <div class="icon-btn">173          <svg width="56" height="56" viewBox="0 0 48 48">174            <circle cx="12" cy="24" r="4" fill="none" stroke="#ffffff" stroke-width="4"/>175            <circle cx="34" cy="12" r="4" fill="none" stroke="#ffffff" stroke-width="4"/>176            <circle cx="34" cy="36" r="4" fill="none" stroke="#ffffff" stroke-width="4"/>177            <path d="M16 24 L30 16 M16 24 L30 32" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round"/>178          </svg>179        </div>180        <!-- Comment icon and count -->181        <div class="icon-btn">182          <svg width="56" height="56" viewBox="0 0 48 48">183            <rect x="6" y="8" width="34" height="26" rx="6" ry="6" fill="none" stroke="#ffffff" stroke-width="4"/>184            <path d="M18 34 L22 28 L26 34" fill="#ffffff"/>185          </svg>186        </div>187        <div style="font-size:28px;color:#fff;">0</div>188      </div>189    </div>190  </div>191 192  <!-- Content Area -->193  <div class="content">194    <div class="steps">195      <div class="step">196        <div class="num">4.</div>197        <div class="text">Transfer the dough into a bowl with flour dusted on the base and sides and cover it with a cloth.</div>198      </div>199      <div class="step">200        <div class="num">5.</div>201        <div class="text">Let the dough ferment for 1 hour.</div>202      </div>203      <div class="step">204        <div class="num">6.</div>205        <div class="text">Give the dough a knockback and let it ferment for another 30 minutes</div>206      </div>207      <div class="step">208        <div class="num">7.</div>209        <div class="text">In a sheet pan, brush olive oil evenly on the base and sides, transfer the dough to the sheet pan and spread the dough evenly from end to end.</div>210      </div>211      <div class="step">212        <div class="num">8.</div>213        <div class="text">Make little crevices with your fingers on the dough.</div>214      </div>215      <div class="step">216        <div class="num">9.</div>217        <div class="text">Add the olives and rosemary on the dough and press it in.</div>218      </div>219      <div class="step">220        <div class="num">10.</div>221        <div class="text">Brush olive oil on top.</div>222      </div>223      <div class="step">224        <div class="num">11.</div>225        <div class="text">Bake it at 180 degrees celsius for the first 20 minutes and at 200 degrees for 15 minutes.</div>226      </div>227    </div>228 229    <!-- Action Buttons -->230    <div class="actions">231      <div class="outline-btn">232        <svg width="40" height="40" viewBox="0 0 40 40">233          <circle cx="20" cy="20" r="18" fill="none" stroke="#c8672e" stroke-width="3"/>234          <path d="M16 13 L28 20 L16 27 Z" fill="#c8672e"/>235        </svg>236        <span>START COOKING</span>237      </div>238      <div class="outline-btn">239        <span>ADD TO MY MEAL PLAN</span>240      </div>241    </div>242 243    <!-- Comment input -->244    <div class="comment-row">245      <div class="avatar">246        <svg width="48" height="48" viewBox="0 0 48 48">247          <circle cx="24" cy="18" r="10" fill="#cfcfcf"/>248          <path d="M8 42 C10 32 20 28 24 28 C28 28 38 32 40 42 Z" fill="#cfcfcf"/>249        </svg>250      </div>251      <div class="comment-input">Post Comments</div>252    </div>253 254    <div class="related-title">Related Recipes</div>255  </div>256 257  <!-- Bottom gesture bar -->258  <div class="gesture">259    <div class="pill"></div>260  </div>261</div>262</body>263</html>