GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Recipe - Apple Pie</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 120px;18    padding: 0 36px;19    box-sizing: border-box;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #333;24    font-weight: 600;25    font-size: 40px;26  }27  .status-left { display: flex; align-items: center; gap: 28px; }28  .status-right { display: flex; align-items: center; gap: 28px; }29  .dot { width: 10px; height: 10px; background: #6d6d6d; border-radius: 50%; display: inline-block; }30 31  /* Hero image placeholder */32  .hero {33    position: relative;34    width: 100%;35    height: 980px;36    background: #E0E0E0;37    border-top: 1px solid #BDBDBD;38    border-bottom: 1px solid #BDBDBD;39    display: flex;40    align-items: center;41    justify-content: center;42    color: #757575;43    font-size: 44px;44    letter-spacing: 0.3px;45  }46 47  /* Floating circular icon buttons on hero */48  .circle-btn {49    position: absolute;50    width: 120px;51    height: 120px;52    border-radius: 60px;53    background: rgba(255,255,255,0.95);54    box-shadow: 0 2px 6px rgba(0,0,0,0.15);55    display: flex;56    align-items: center;57    justify-content: center;58  }59  .back-btn { left: 48px; top: 160px; }60  .open-btn { right: 48px; top: 160px; }61 62  /* Content area */63  .content {64    position: relative;65    background: #fff;66    padding: 48px;67    padding-bottom: 0;68  }69  .title {70    font-size: 84px;71    line-height: 1.05;72    font-weight: 700;73    margin: 12px 0 12px 0;74  }75  .subtitle {76    color: #4c4c4c;77    font-weight: 700;78    letter-spacing: 2px;79    font-size: 34px;80    margin-bottom: 36px;81  }82 83  /* Tabs */84  .tabs {85    display: flex;86    align-items: flex-end;87    gap: 56px;88    margin-top: 12px;89  }90  .tab {91    font-size: 48px;92    font-weight: 700;93    color: #222;94    padding-bottom: 18px;95    position: relative;96  }97  .tab.active {98    color: #1fb397;99  }100  .tab.active::after {101    content: "";102    position: absolute;103    left: 0;104    right: 0;105    bottom: 0;106    height: 10px;107    background: #1fb397;108    border-radius: 6px;109  }110  .time-small {111    color: #626262;112    font-size: 36px;113    margin-left: 18px;114  }115  .plus-fab {116    position: absolute;117    right: 48px;118    top: 460px;119    width: 132px;120    height: 132px;121    border-radius: 66px;122    background: #2dbca7;123    display: flex;124    align-items: center;125    justify-content: center;126    color: white;127    box-shadow: 0 6px 18px rgba(0,0,0,0.18);128  }129 130  /* Divider after tabs */131  .divider {132    height: 2px;133    background: #e9e9e9;134    margin-top: 24px;135    margin-bottom: 18px;136  }137 138  /* List rows */139  .list {140    padding: 12px 0 0 0;141  }142  .row {143    display: flex;144    align-items: center;145    justify-content: space-between;146    padding: 28px 0;147    border-bottom: 1px solid #f0f0f0;148  }149  .row:first-child { padding-top: 36px; }150  .left {151    display: flex;152    align-items: center;153    gap: 26px;154  }155  .icon {156    width: 56px;157    height: 56px;158    border-radius: 16px;159    background: #f3f3f3;160    display: flex;161    align-items: center;162    justify-content: center;163    color: #9E9E9E;164  }165  .label {166    font-size: 44px;167    color: #7c7c7c;168    font-weight: 600;169  }170  .value {171    font-size: 44px;172    color: #3b3b3b;173    font-weight: 600;174  }175  .muted { color: #bdbdbd; }176 177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status bar -->183  <div class="status-bar">184    <div class="status-left">185      <div>2:22</div>186      <div>57°</div>187      <span class="dot"></span>188    </div>189    <div class="status-right">190      <!-- simple icons as chars/short svgs -->191      <svg width="44" height="44" viewBox="0 0 24 24" fill="#5b5b5b"><path d="M12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>192      <svg width="44" height="44" viewBox="0 0 24 24" fill="#5b5b5b"><path d="M12 21c4.97 0 9-4.03 9-9h-2a7 7 0 10-7 7v2z"/></svg>193      <svg width="44" height="44" viewBox="0 0 24 24" fill="#5b5b5b"><path d="M7 18h10V5H7v13zm-2 2h14V3H5v17z"/></svg>194    </div>195  </div>196 197  <!-- Hero image -->198  <div class="hero">199    [IMG: Apple Pie in dish with ribbon]200    <!-- back button -->201    <div class="circle-btn back-btn">202      <svg width="56" height="56" viewBox="0 0 24 24" fill="#222">203        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>204      </svg>205    </div>206    <!-- external/open button -->207    <div class="circle-btn open-btn">208      <svg width="56" height="56" viewBox="0 0 24 24" fill="#222">209        <path d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z"/>210        <path d="M5 5h6V3H3v8h2V5z" opacity="0.6"/>211      </svg>212    </div>213  </div>214 215  <!-- Content -->216  <div class="content">217    <div class="title">Apple Pie</div>218    <div class="subtitle">ITSY BITSY FOODIES</div>219 220    <div class="tabs">221      <div class="tab active">Overview</div>222      <div class="tab">Ingredients223        <span class="time-small muted">12 items</span>224      </div>225      <div class="tab">Directions226        <span class="time-small">1h 30m</span>227      </div>228      <div class="plus-fab">229        <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">230          <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/>231        </svg>232      </div>233    </div>234    <div class="divider"></div>235 236    <div class="list">237      <div class="row">238        <div class="left">239          <div class="icon">240            <svg width="32" height="32" viewBox="0 0 24 24" fill="#9E9E9E">241              <path d="M10 4H4v16h16V8h-8zM6 18V6h4v4h8v8H6z"/>242              <path d="M14 4l6 6h-6z" opacity="0.6"/>243            </svg>244          </div>245          <div class="label">Add to Collection</div>246        </div>247      </div>248 249      <div class="row">250        <div class="left">251          <div class="icon">252            <svg width="32" height="32" viewBox="0 0 24 24" fill="#9E9E9E">253              <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>254            </svg>255          </div>256          <div class="label">Rating</div>257        </div>258        <div class="value muted">4.72</div>259      </div>260 261      <div class="row">262        <div class="left">263          <div class="icon">264            <svg width="30" height="30" viewBox="0 0 24 24" fill="#9E9E9E">265              <path d="M4 10h16v2H4zM4 14h16v2H4zM4 6h16v2H4z"/>266            </svg>267          </div>268          <div class="label">Servings</div>269        </div>270        <div class="value muted">8</div>271      </div>272 273      <div class="row">274        <div class="left">275          <div class="icon">276            <svg width="30" height="30" viewBox="0 0 24 24" fill="#9E9E9E">277              <path d="M11 7a4 4 0 100 8 4 4 0 000-8zm0-2a6 6 0 110 12A6 6 0 0111 5zM21 13h-2a8 8 0 01-8 8v2a10 10 0 0010-10z"/>278            </svg>279          </div>280          <div class="label">Calories per serving</div>281        </div>282        <div class="value muted">540</div>283      </div>284 285      <div class="row" style="border-bottom:none;">286        <div class="left">287          <div class="icon">288            <svg width="30" height="30" viewBox="0 0 24 24" fill="#9E9E9E">289              <path d="M12 8V4h-1v5h5V8h-4z"/>290              <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16z"/>291            </svg>292          </div>293          <div class="label">Total time</div>294        </div>295        <div class="value muted">1h 30m</div>296      </div>297    </div>298  </div>299 300</div>301</body>302</html>