GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe Detail - Focaccia</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0B1730; /* deep navy app background */14    color: #E9F0F9;15    border-radius: 0;16    box-shadow: none;17  }18 19  /* Top status/header area */20  .status-bar {21    height: 120px;22    padding: 0 40px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #FFFFFF;28    opacity: 0.9;29    font-size: 34px;30  }31 32  .header {33    height: 120px;34    padding: 0 30px;35    display: flex;36    align-items: center;37    justify-content: space-between;38    color: #FFFFFF;39  }40  .header-left, .header-right { display: flex; align-items: center; gap: 30px; }41  .icon-btn {42    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;43    border-radius: 32px;44    color: #FFFFFF;45  }46  .icon-btn svg { width: 44px; height: 44px; fill: none; stroke: #FFFFFF; stroke-width: 3; }47 48  /* Media */49  .hero-media {50    width: 100%;51    height: 950px;52    position: relative;53    background: #E0E0E0;54    border-top: 1px solid #1E2B49;55    border-bottom: 1px solid #1E2B49;56    display: flex; align-items: center; justify-content: center;57    color: #757575;58    font-size: 40px;59    letter-spacing: 0.2px;60  }61  .play-overlay {62    position: absolute; width: 180px; height: 180px; border-radius: 90px;63    background: rgba(0,0,0,0.45);64    display: flex; align-items: center; justify-content: center;65  }66  .play-overlay svg { width: 80px; height: 80px; fill: #FFFFFF; }67 68  /* Content section */69  .content {70    padding: 40px;71  }72  .title-row {73    display: flex; align-items: center; justify-content: space-between;74  }75  .title-left { display: flex; align-items: center; gap: 20px; }76  .status-dot {77    width: 24px; height: 24px; border-radius: 50%; background: #5CF282; border: 2px solid #CCEFD8;78  }79  .recipe-title {80    font-size: 52px; font-weight: 600; letter-spacing: 0.3px;81  }82  .bookmark svg { width: 48px; height: 48px; stroke: #FFFFFF; fill: none; stroke-width: 3; }83 84  .meta-line {85    margin-top: 18px; font-size: 34px; color: #C6D1E1;86  }87  .sub-meta { margin-top: 14px; font-size: 30px; color: #8A95A6; }88 89  .divider {90    height: 1px; background: #27344F; margin: 32px 0;91  }92 93  .time-row { display: flex; align-items: center; gap: 16px; color: #C6D1E1; font-size: 34px; }94  .time-row svg { width: 40px; height: 40px; stroke: #C6D1E1; fill: none; stroke-width: 3; }95 96  /* Buttons */97  .primary-btn {98    margin-top: 40px;99    background: #C9662E;100    color: #FFFFFF;101    height: 120px;102    border-radius: 20px;103    border: 2px solid #B85A24;104    font-size: 40px;105    font-weight: 600;106    display: flex; align-items: center; justify-content: center; gap: 20px;107    box-shadow: inset 0 0 0 0 rgba(0,0,0,0.2);108  }109  .primary-btn .play-icon { width: 44px; height: 44px; fill: none; stroke: #FFFFFF; stroke-width: 3; }110 111  .helper-text {112    margin-top: 22px; font-size: 32px; color: #8A95A6; text-align: center;113  }114 115  .outline-btn {116    margin-top: 40px;117    height: 120px;118    border-radius: 20px;119    border: 4px solid #C9662E;120    color: #FFA876;121    display: flex; align-items: center; justify-content: center;122    font-size: 38px; font-weight: 700; letter-spacing: 0.3px;123    background: transparent;124  }125 126  /* Bottom white card snippet */127  .white-snippet {128    position: absolute; left: 0; right: 0; bottom: 80px;129    height: 260px;130    background: #FFFFFF;131    border-top-left-radius: 34px; border-top-right-radius: 34px;132    color: #0B1730;133    padding: 30px 40px;134    box-sizing: border-box;135    font-size: 36px;136    font-weight: 600;137  }138 139  /* Bottom gesture bar (simulated) */140  .gesture {141    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);142    width: 320px; height: 12px; background: #D9D9D9; border-radius: 8px; opacity: 0.7;143  }144</style>145</head>146<body>147<div id="render-target">148 149  <!-- Status bar (simple mock) -->150  <div class="status-bar">151    <div>3:15</div>152    <div>• • •</div>153  </div>154 155  <!-- Header controls -->156  <div class="header">157    <div class="header-left">158      <div class="icon-btn" title="Back">159        <svg viewBox="0 0 24 24">160          <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"/>161        </svg>162      </div>163    </div>164    <div class="header-right">165      <div class="icon-btn" title="Share">166        <svg viewBox="0 0 24 24">167          <circle cx="6" cy="12" r="3"/>168          <circle cx="18" cy="6" r="3"/>169          <circle cx="18" cy="18" r="3"/>170          <path d="M8.8 10.8 L15.2 7.2 M8.8 13.2 L15.2 16.8" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"/>171        </svg>172      </div>173      <div class="icon-btn" title="Comments">174        <svg viewBox="0 0 24 24">175          <rect x="3" y="4" width="18" height="14" rx="3" ry="3"/>176          <path d="M8 22 L10 18 L21 18" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"/>177        </svg>178      </div>179      <div style="font-size:32px;color:#C6D1E1;">0</div>180    </div>181  </div>182 183  <!-- Media banner -->184  <div class="hero-media">185    [IMG: Focaccia bread close-up]186    <div class="play-overlay">187      <svg viewBox="0 0 100 100">188        <polygon points="35,25 75,50 35,75" />189      </svg>190    </div>191  </div>192 193  <!-- Content details -->194  <div class="content">195    <div class="title-row">196      <div class="title-left">197        <div class="status-dot"></div>198        <div class="recipe-title">Focaccia</div>199      </div>200      <div class="bookmark" title="Bookmark">201        <svg viewBox="0 0 24 24">202          <path d="M6 4 H18 V21 L12 17 L6 21 Z" stroke-linejoin="round"/>203        </svg>204      </div>205    </div>206 207    <div class="meta-line">Italian • Main Course • Bread • General/Balanced</div>208    <div class="sub-meta">Breakfast, Dinner • Baked</div>209 210    <div class="divider"></div>211 212    <div class="time-row">213      <svg viewBox="0 0 24 24">214        <circle cx="12" cy="12" r="9"/>215        <path d="M12 7 L12 12 L16 14" stroke-linecap="round"/>216      </svg>217      <div>45 Min</div>218    </div>219 220    <div class="primary-btn">221      <svg class="play-icon" viewBox="0 0 24 24">222        <polygon points="8,6 18,12 8,18" />223      </svg>224      <span>START COOKING</span>225    </div>226 227    <div class="helper-text">By step-by-step video instruction in cooking mode</div>228 229    <div class="outline-btn">ADD TO MY MEAL PLAN</div>230  </div>231 232  <div class="white-snippet">233    Nutrient Info (Per Serving)234  </div>235 236  <div class="gesture"></div>237</div>238</body>239</html>