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 - Apple Pie</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#1f2023; color:#eee;12  }13  .status-bar {14    height:90px; padding:0 40px; display:flex; align-items:center; justify-content:space-between; color:#eaeaea; font-weight:600;15    font-size:40px;16  }17  .status-left { display:flex; gap:22px; align-items:center; }18  .status-right { display:flex; gap:28px; align-items:center; }19  .header {20    padding:30px 48px 16px 48px; display:flex; align-items:center; justify-content:space-between;21  }22  .icon-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }23  .pink { color:#ff7f91; }24  .title-block { padding:0 48px; }25  h1 {26    margin:18px 0 16px 0;27    font-size:74px; line-height:86px; font-weight:800; color:#e8e8e8;28  }29  .desc {30    color:#bcbcbc; font-size:36px; line-height:52px; max-width:920px;31  }32  .chev-row { padding:16px 48px 0 48px; display:flex; justify-content:flex-end; }33  .meta {34    padding:28px 48px; border-top:1px solid rgba(255,255,255,0.04);35    font-size:36px; color:#cfcfcf;36  }37  .meta .link { color:#ff7f91; font-weight:800; }38  .thumb-row { display:flex; align-items:center; gap:18px; margin-top:22px; }39  .image-placeholder {40    margin-top:24px; width:100%; height:920px; background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;41    display:flex; align-items:center; justify-content:center; color:#757575; font-size:42px; font-weight:600;42  }43  .section-header {44    padding:28px 48px; background:#232429; display:flex; align-items:center; justify-content:space-between;45    border-top:1px solid rgba(255,255,255,0.06);46  }47  .section-header h2 { margin:0; font-size:54px; color:#e8e8e8; }48  .qty-control {49    display:flex; align-items:center; gap:28px; background:#1f2023; border:2px solid rgba(255,255,255,0.15);50    border-radius:20px; padding:18px 30px;51  }52  .qty-number { font-size:44px; color:#e8e8e8; font-weight:700; }53  .ad-banner {54    margin:28px 48px; background:#ffffff; border-radius:18px; box-shadow:0 6px 12px rgba(0,0,0,0.35);55    padding:26px; display:flex; align-items:center; justify-content:space-between;56  }57  .ad-left { display:flex; align-items:center; gap:26px; color:#2c2c2c; }58  .ad-logo {59    width:110px; height:110px; background:#0a4cff; border-radius:24px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;60  }61  .ad-title { font-size:42px; font-weight:700; }62  .ad-sub { font-size:34px; color:#777; }63  .ad-btn {64    background:#0dbb72; color:#fff; padding:22px 46px; border-radius:40px; font-size:38px; font-weight:800;65  }66  .bottom-nav {67    position:absolute; left:0; right:0; bottom:80px; height:160px; background:#1f2023; border-top:1px solid rgba(255,255,255,0.06);68    display:flex; align-items:center; justify-content:space-around;69  }70  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#a8a8a8; font-size:30px; }71  .nav-item.active { color:#ff7f91; }72  .profile-circle {73    width:80px; height:80px; background:#a9887a; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:40px;74  }75  .home-indicator {76    position:absolute; left:50%; transform:translateX(-50%); bottom:24px; width:300px; height:12px; background:#e6e6e6; border-radius:8px; opacity:0.9;77  }78  /* Simple icon styles */79  svg { display:block; }80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Status bar -->86  <div class="status-bar">87    <div class="status-left">88      <div>10:46</div>89      <div style="color:#cfcfcf;">60°</div>90      <!-- simple triangle icon -->91      <svg width="42" height="42">92        <polygon points="8,32 21,10 34,32" fill="#cfcfcf"></polygon>93      </svg>94      <!-- small phone icon -->95      <svg width="42" height="42">96        <rect x="10" y="6" width="22" height="30" rx="5" ry="5" fill="none" stroke="#cfcfcf" stroke-width="3"></rect>97        <rect x="16" y="30" width="10" height="3" fill="#cfcfcf"></rect>98      </svg>99    </div>100    <div class="status-right">101      <!-- wifi -->102      <svg width="52" height="42">103        <path d="M6 16 Q26 4 46 16" stroke="#cfcfcf" stroke-width="3" fill="none"></path>104        <path d="M12 22 Q26 12 40 22" stroke="#cfcfcf" stroke-width="3" fill="none"></path>105        <circle cx="26" cy="28" r="3" fill="#cfcfcf"></circle>106      </svg>107      <!-- battery -->108      <svg width="60" height="42">109        <rect x="6" y="10" width="40" height="22" rx="3" ry="3" stroke="#cfcfcf" stroke-width="3" fill="none"></rect>110        <rect x="48" y="16" width="6" height="10" rx="2" fill="#cfcfcf"></rect>111        <rect x="10" y="14" width="32" height="14" fill="#cfcfcf"></rect>112      </svg>113    </div>114  </div>115 116  <!-- Header bar with back/share/heart -->117  <div class="header">118    <div class="icon-btn">119      <!-- back arrow -->120      <svg width="60" height="60">121        <path d="M38 12 L18 30 L38 48" stroke="#ff7f91" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>122      </svg>123    </div>124    <div style="display:flex; gap:30px;">125      <!-- share icon -->126      <div class="icon-btn">127        <svg width="60" height="60">128          <circle cx="18" cy="16" r="6" fill="#ff7f91"></circle>129          <circle cx="42" cy="28" r="6" fill="#ff7f91"></circle>130          <circle cx="24" cy="46" r="6" fill="#ff7f91"></circle>131          <path d="M22 20 L36 26" stroke="#ff7f91" stroke-width="5" fill="none"></path>132          <path d="M20 40 L38 32" stroke="#ff7f91" stroke-width="5" fill="none"></path>133        </svg>134      </div>135      <!-- heart icon -->136      <div class="icon-btn">137        <svg width="60" height="60">138          <path d="M30 50s-12-8-17-15c-5-7 0-16 9-16 5 0 8 4 8 4s3-4 8-4c9 0 14 9 9 16-5 7-17 15-17 15z" fill="none" stroke="#ff7f91" stroke-width="5"></path>139        </svg>140      </div>141    </div>142  </div>143 144  <!-- Title and description -->145  <div class="title-block">146    <h1>Apple Pie From Scratch</h1>147    <div class="desc">148      Nothing beats a classic apple pie made from scratch. This recipe will guide you through every step, from making the flaky crust to the cinnamon-spiced filling, resulting in a dessert that's a favorite for a reason.149    </div>150  </div>151 152  <div class="chev-row">153    <!-- down chevron -->154    <svg width="50" height="50">155      <polyline points="10,18 25,32 40,18" fill="none" stroke="#ff7f91" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></polyline>156    </svg>157  </div>158 159  <!-- Meta information -->160  <div class="meta">161    <div>featured in <span class="link">18 Tasty Pie Recipes</span></div>162    <div class="thumb-row">163      <!-- thumbs-up icon -->164      <svg width="46" height="46">165        <path d="M12 40 V22 H20 V40 Z" fill="#cfcfcf"></path>166        <path d="M20 22 C22 16 24 12 28 12 H34 C36 12 38 14 38 18 V32 C38 36 36 38 32 38 H20 Z" fill="none" stroke="#cfcfcf" stroke-width="4"></path>167      </svg>168      <div><span style="font-weight:800; color:#e8e8e8;">97%</span> would make this again</div>169    </div>170  </div>171 172  <!-- Large image placeholder -->173  <div class="image-placeholder">[IMG: Mixing dough close-up]</div>174 175  <!-- Ingredients header with quantity -->176  <div class="section-header">177    <h2>Ingredients for</h2>178    <div class="qty-control">179      <!-- minus -->180      <svg width="46" height="46">181        <rect x="8" y="22" width="30" height="4" fill="#ff7f91"></rect>182      </svg>183      <div class="qty-number">8</div>184      <!-- plus -->185      <svg width="46" height="46">186        <rect x="8" y="22" width="30" height="4" fill="#ff7f91"></rect>187        <rect x="22" y="8" width="4" height="30" fill="#ff7f91"></rect>188      </svg>189    </div>190  </div>191 192  <!-- Ad banner -->193  <div class="ad-banner">194    <div class="ad-left">195      <div class="ad-logo">B</div>196      <div>197        <div class="ad-title">Booking.com</div>198        <div class="ad-sub">4.7 ★  FREE</div>199      </div>200    </div>201    <div class="ad-btn">Open</div>202  </div>203 204  <!-- Bottom navigation -->205  <div class="bottom-nav">206    <div class="nav-item active">207      <!-- search icon -->208      <svg width="56" height="56">209        <circle cx="26" cy="26" r="16" stroke="#ff7f91" stroke-width="5" fill="none"></circle>210        <line x1="38" y1="38" x2="52" y2="52" stroke="#ff7f91" stroke-width="5" />211      </svg>212      <div>Discover</div>213    </div>214    <div class="nav-item">215      <!-- community icon: dollar/people hybrid simple -->216      <svg width="56" height="56">217        <circle cx="18" cy="22" r="10" stroke="#a8a8a8" stroke-width="4" fill="none"></circle>218        <circle cx="38" cy="22" r="10" stroke="#a8a8a8" stroke-width="4" fill="none"></circle>219        <rect x="12" y="36" width="32" height="8" rx="4" fill="#a8a8a8"></rect>220      </svg>221      <div>Community</div>222    </div>223    <div class="nav-item">224      <!-- cart icon -->225      <svg width="56" height="56">226        <rect x="10" y="18" width="36" height="20" rx="4" ry="4" stroke="#a8a8a8" stroke-width="4" fill="none"></rect>227        <circle cx="20" cy="44" r="4" fill="#a8a8a8"></circle>228        <circle cx="36" cy="44" r="4" fill="#a8a8a8"></circle>229      </svg>230      <div>My Cart</div>231    </div>232    <div class="nav-item">233      <div class="profile-circle">I</div>234      <div>Profile</div>235    </div>236  </div>237 238  <div class="home-indicator"></div>239</div>240</body>241</html>