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 Detail UI</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#ffffff; color:#222;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14  }15 16  .status-bar {17    height:96px; padding:0 36px;18    display:flex; align-items:center; justify-content:space-between;19    color:#222; font-size:34px; letter-spacing:0.5px;20  }21  .status-icons { display:flex; align-items:center; gap:28px; }22  .status-dot { width:16px; height:16px; background:#222; border-radius:50%; display:inline-block; opacity:0.85; }23 24  .appbar {25    height:120px; padding:0 28px 0 16px;26    display:flex; align-items:center; justify-content:space-between;27  }28  .left-actions { display:flex; align-items:center; gap:24px; }29  .right-actions { display:flex; align-items:center; gap:36px; }30  .icon-btn svg { width:56px; height:56px; stroke:#222; fill:none; stroke-width:3.5; }31 32  .divider { height:1px; background:#e6e6e6; width:100%; }33 34  .section { padding:36px 60px; }35  .reviews { position:relative; padding:40px 60px; }36  .reviews h2 { margin:0 0 12px 0; font-size:56px; font-weight:700; }37  .muted { color:#666; font-size:32px; }38  .read-link { position:absolute; right:60px; top:48px; color:#ff5a2c; font-weight:600; font-size:36px; }39 40  .difficulty { padding:40px 60px; }41  .difficulty strong { font-size:40px; letter-spacing:0.5px; }42  .difficulty span { font-size:38px; color:#333; margin-left:8px; }43 44  .timers { display:flex; justify-content:space-around; padding:20px 40px 40px; }45  .timer { display:flex; flex-direction:column; align-items:center; gap:22px; }46  .circle {47    width:220px; height:220px; border-radius:50%;48    border:6px solid #f2642b;49    display:flex; align-items:center; justify-content:center;50    color:#222; text-align:center;51    font-size:40px; line-height:1.2;52    background:53      conic-gradient(#000 0deg 310deg, transparent 310deg 360deg);54    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));55  }56  .circle.orange-only {57    background:none; mask:none;58  }59  .timer label { font-size:34px; color:#333; }60 61  .ingredients { padding:36px 60px 0; }62  .ingredients h3 { margin:8px 0 24px; font-size:52px; font-weight:800; }63  .servings-row {64    display:flex; align-items:center; justify-content:space-between;65    margin:8px 0 24px;66  }67  .servings-title { font-size:38px; font-weight:700; }68  .stepper { display:flex; align-items:center; gap:28px; }69  .stepper .btn {70    width:110px; height:110px; border-radius:22px;71    background:#fff1e6; color:#222; font-size:64px; line-height:110px; text-align:center;72    border:1px solid #ffe4cf;73  }74  .stepper .val { font-size:46px; font-weight:600; width:60px; text-align:center; }75 76  .list {77    display:grid; grid-template-columns:220px 1fr; row-gap:20px; column-gap:36px;78    font-size:36px; padding-right:40px;79  }80  .amt { text-align:right; color:#222; }81  .item { color:#333; }82 83  .cta {84    position:absolute; left:60px; right:60px;85    bottom:170px;86  }87  .primary-btn {88    width:100%; height:120px; border-radius:60px;89    background:#145c4b; color:#fff; font-size:42px; font-weight:700; border:none;90    box-shadow:0 8px 20px rgba(20,92,75,0.25);91  }92 93  .sticky-banner {94    position:absolute; left:48px; right:48px; bottom:60px;95    height:110px; border-radius:60px;96    background:#6a35ff;97    display:flex; align-items:center; justify-content:center;98    gap:20px; color:#fff; font-size:36px; font-weight:600;99    box-shadow:0 10px 24px rgba(106,53,255,0.3);100  }101  .brand {102    background:#ffcd00; color:#6a35ff; font-weight:900;103    padding:10px 24px; border-radius:30px; text-transform:lowercase;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status bar -->111  <div class="status-bar">112    <div>12:41</div>113    <div class="status-icons">114      <span class="status-dot" title="signal"></span>115      <span class="status-dot" title="wifi"></span>116      <span class="status-dot" title="battery"></span>117    </div>118  </div>119 120  <!-- App bar -->121  <div class="appbar">122    <div class="left-actions">123      <button class="icon-btn" aria-label="Back" style="background:none;border:none;padding:16px;">124        <svg viewBox="0 0 24 24">125          <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"></path>126        </svg>127      </button>128    </div>129    <div class="right-actions">130      <button class="icon-btn" aria-label="Favorite" style="background:none;border:none;">131        <svg viewBox="0 0 24 24">132          <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke-linejoin="round"></path>133        </svg>134      </button>135      <button class="icon-btn" aria-label="Bookmark" style="background:none;border:none;">136        <svg viewBox="0 0 24 24">137          <path d="M6 3h12v18l-6-4-6 4z" stroke-linejoin="round"></path>138        </svg>139      </button>140      <button class="icon-btn" aria-label="Share" style="background:none;border:none;">141        <svg viewBox="0 0 24 24">142          <circle cx="6" cy="12" r="2.2"></circle>143          <circle cx="18" cy="6" r="2.2"></circle>144          <circle cx="18" cy="18" r="2.2"></circle>145          <path d="M8.2 11 L15.8 7.2 M8.2 13 L15.8 16.8"></path>146        </svg>147      </button>148    </div>149  </div>150  <div class="divider"></div>151 152  <!-- Reviews -->153  <div class="reviews">154    <h2>Reviews</h2>155    <div class="muted">690 comments - 442 images</div>156    <div class="read-link">Read</div>157  </div>158  <div class="divider"></div>159 160  <!-- Difficulty -->161  <div class="difficulty">162    <strong>DIFFICULTY:</strong><span> Easy 👌</span>163  </div>164  <div class="divider"></div>165 166  <!-- Timers -->167  <div class="timers">168    <div class="timer">169      <div class="circle">30 min</div>170      <label>Preparation</label>171    </div>172    <div class="timer">173      <div class="circle orange-only">1 h<br>10 min</div>174      <label>Baking</label>175    </div>176    <div class="timer">177      <div class="circle orange-only">1 h</div>178      <label>Resting</label>179    </div>180  </div>181 182  <div class="divider"></div>183 184  <!-- Ingredients -->185  <div class="ingredients">186    <h3>Ingredients</h3>187 188    <div class="servings-row">189      <div class="servings-title">12 Servings</div>190      <div class="stepper">191        <div class="btn">−</div>192        <div class="val">12</div>193        <div class="btn">+</div>194      </div>195    </div>196 197    <div class="list">198      <div class="amt">1 1/2</div><div class="item">lemons (divided)</div>199      <div class="amt">5</div><div class="item">eggs</div>200      <div class="amt">1 1/2 tsp</div><div class="item">vanilla sugar</div>201      <div class="amt">300 g</div><div class="item">sugar</div>202      <div class="amt">240 g</div><div class="item">butter</div>203      <div class="amt">300 g</div><div class="item">flour</div>204      <div class="amt">2 tbsp</div><div class="item">baking powder</div>205      <div class="amt">300 g</div><div class="item">blueberries (divided)</div>206      <div class="amt">125 g</div><div class="item">confectioner’s sugar</div>207    </div>208  </div>209 210  <!-- CTA buttons -->211  <div class="cta">212    <button class="primary-btn">Start cooking!</button>213  </div>214 215  <div class="sticky-banner">216    <span class="brand">getir</span>217    <span>Order ingredients</span>218  </div>219 220</div>221</body>222</html>