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 - Instant pizza sauce</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; background: #ffffff;19    display: flex; align-items: center; padding: 0 36px; color: #333;20    font-size: 40px; letter-spacing: 0.5px;21  }22  .status-left { display: flex; align-items: center; gap: 28px; }23  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; color: #444; }24  .status-icon svg { width: 40px; height: 40px; stroke: #5f6368; stroke-width: 2; fill: none; }25 26  /* Hero image */27  .hero {28    position: absolute; top: 110px; left: 0; width: 100%; height: 900px;29    overflow: hidden;30  }31  .hero .img-placeholder {32    width: 100%; height: 100%;33    background: #E0E0E0; border: 1px solid #BDBDBD;34    display: flex; justify-content: center; align-items: center; color: #757575;35    font-size: 40px;36  }37  .overlay-actions {38    position: absolute; top: 150px; left: 36px; right: 36px;39    display: flex; justify-content: space-between; align-items: center;40    color: #fff;41  }42  .overlay-left, .overlay-right { display: flex; align-items: center; gap: 26px; }43  .overlay-actions svg { width: 60px; height: 60px; stroke: #ffffff; stroke-width: 2.4; fill: none; opacity: 0.95; }44 45  /* Content */46  .content {47    position: absolute; top: 1010px; left: 0; right: 0;48    padding: 0 48px;49  }50  .title {51    font-size: 72px; font-weight: 700; color: #3b3b3b; line-height: 1.2; margin-bottom: 26px;52  }53 54  .author {55    display: grid; grid-template-columns: 96px 1fr; gap: 28px;56    align-items: center; margin-bottom: 28px;57  }58  .avatar {59    width: 96px; height: 96px; border-radius: 50%;60    background: #E0E0E0; border: 1px solid #BDBDBD;61    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 26px;62  }63  .author-lines { display: flex; flex-direction: column; gap: 8px; }64  .author-name { font-size: 42px; color: #4a4a4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }65  .author-handle { font-size: 36px; color: #7a7a7a; }66  .author-location { display: flex; align-items: center; gap: 12px; color: #7a7a7a; font-size: 36px; }67 68  .tags {69    font-size: 40px; color: #2b78ff; margin-top: 22px; margin-bottom: 18px; line-height: 1.45;70  }71  .desc {72    font-size: 40px; color: #6f6f6f; line-height: 1.5;73  }74  .more {75    text-align: right; font-size: 34px; color: #8a8a8a; letter-spacing: 1px; margin-top: 8px;76  }77 78  /* Save button */79  .save-area { margin-top: 38px; }80  .save-btn {81    width: 984px; height: 120px; margin: 0 auto;82    background: #F4A148; color: #fff; border-radius: 18px;83    display: flex; align-items: center; justify-content: center; gap: 22px;84    font-size: 44px; font-weight: 600; box-shadow: 0 6px 12px rgba(244,161,72,0.25);85  }86  .save-btn svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 2.5; fill: none; }87 88  .divider {89    margin: 32px 48px; height: 2px; background: #E6E6E6;90  }91  .meta {92    display: flex; justify-content: center; align-items: center; gap: 16px;93    font-size: 36px; color: #7a7a7a;94  }95  .meta svg { width: 40px; height: 40px; stroke: #7a7a7a; stroke-width: 2.4; fill: none; }96 97  /* Bottom navigation */98  .bottom-nav {99    position: absolute; bottom: 54px; left: 0; right: 0;100    height: 160px; background: #ffffff; border-top: 1px solid #E6E6E6;101    display: flex; align-items: center; justify-content: space-around;102    padding: 0 30px;103  }104  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #666; font-size: 28px; }105  .nav-item svg { width: 58px; height: 58px; stroke: #6b6b6b; stroke-width: 2.4; fill: none; }106  .nav-badge {107    position: absolute; top: 24px; right: 254px; /* near the bookmark nav item */108    width: 22px; height: 22px; background: #ff5347; border-radius: 50%;109    border: 2px solid #fff;110  }111 112  /* Home indicator */113  .home-indicator {114    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);115    width: 190px; height: 8px; background: #000; opacity: 0.7; border-radius: 8px;116  }117 118  /* Small helpers */119  .icon-dot {120    width: 10px; height: 10px; background: #5f6368; border-radius: 50%;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status Bar -->128  <div class="status-bar">129    <div class="status-left">130      <div>11:15</div>131      <div class="status-icon">132        <!-- chat bubble -->133        <svg viewBox="0 0 24 24"><path d="M4 5h16v12H8l-4 4V5z"/></svg>134      </div>135      <div class="status-icon">136        <!-- trophy -->137        <svg viewBox="0 0 24 24"><path d="M6 4h12v3h3v3a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V7h3V4zM9 19h6v2H9z"/></svg>138      </div>139      <div class="status-icon">140        <!-- pencil -->141        <svg viewBox="0 0 24 24"><path d="M3 17l2 4 4-2L18 10l-4-4L5 15l-2 2zM14 6l4 4"/></svg>142      </div>143      <div class="status-icon">144        <!-- document -->145        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6z"/><path d="M15 3v5h5"/></svg>146      </div>147      <div class="icon-dot"></div>148    </div>149    <div class="status-right">150      <!-- wifi -->151      <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0 1 20 0M5 12a11 11 0 0 1 14 0M8 16a6 6 0 0 1 8 0M12 20h0"/></svg>152      <!-- battery -->153      <svg viewBox="0 0 24 24"><path d="M2 8h18v8H2z"/><path d="M22 10v4"/></svg>154    </div>155  </div>156 157  <!-- Hero Image -->158  <div class="hero">159    <div class="img-placeholder">[IMG: Close-up of instant pizza sauce and grated cheese]</div>160 161    <!-- Overlay actions -->162    <div class="overlay-actions">163      <div class="overlay-left">164        <!-- back arrow -->165        <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>166      </div>167      <div class="overlay-right">168        <!-- bookmark add -->169        <svg viewBox="0 0 24 24"><path d="M6 4h9v12l-4.5-3-4.5 3V4z"/><path d="M18 7h4M20 5v4"/></svg>170        <!-- heart/bookmark-like -->171        <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4V4z"/></svg>172        <!-- more (vertical dots) -->173        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>174      </div>175    </div>176  </div>177 178  <!-- Content -->179  <div class="content">180    <div class="title">Instant pizza sauce</div>181 182    <div class="author">183      <div class="avatar">[IMG: User Avatar]</div>184      <div class="author-lines">185        <div class="author-name">Priyangi Pujara (Favourite Feast - the veggi...</div>186        <div class="author-handle">@FavouriteFeast</div>187        <div class="author-location">188          <!-- pin icon -->189          <svg viewBox="0 0 24 24"><path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z"/><circle cx="12" cy="10" r="3"/></svg>190          <span>Malawi, Africa</span>191        </div>192      </div>193    </div>194 195    <div class="tags">#mybestrecipe #Pari 's favourite #breakfast #quick</div>196    <div class="desc">197      I use this recipe for a quick-serve purpose. So I usually use it on leftover naan or bhakhri base.. just...198    </div>199    <div class="more">MORE</div>200 201    <div class="save-area">202      <div class="save-btn">203        <!-- bookmark icon -->204        <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4V4z"/></svg>205        <span>Save recipe</span>206      </div>207    </div>208 209    <div class="divider"></div>210 211    <div class="meta">212      <!-- clock -->213      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg>214      <span>20 min</span>215    </div>216  </div>217 218  <!-- Bottom Navigation -->219  <div class="bottom-nav">220    <div class="nav-item">221      <!-- home -->222      <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></svg>223    </div>224    <div class="nav-item">225      <!-- search -->226      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>227    </div>228    <div class="nav-item">229      <!-- plus -->230      <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>231    </div>232    <div class="nav-item">233      <!-- bookmark -->234      <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4V4z"/></svg>235    </div>236    <div class="nav-item" style="width:72px;height:72px;border-radius:36px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;font-size:36px;color:#555;">237      C238    </div>239    <div class="nav-badge"></div>240  </div>241 242  <!-- Home Indicator -->243  <div class="home-indicator"></div>244 245</div>246</body>247</html>