GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Cauliflower Pizza Crust - UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #707070;24    font-weight: 600;25    font-size: 36px;26  }27  .status-icons { display: flex; gap: 26px; align-items: center; }28  .icon { width: 38px; height: 38px; }29  .icon path, .icon circle, .icon rect { fill: #8a8a8a; }30 31  /* Header content */32  .header {33    padding: 0 48px 24px 48px;34  }35  .top-actions {36    display: flex;37    align-items: center;38    justify-content: space-between;39    margin-top: 12px;40  }41  .left-action { display: flex; align-items: center; gap: 18px; }42  .pink { fill: #e91e63; color: #e91e63; }43  .action-icons { display: flex; align-items: center; gap: 36px; }44  .title {45    font-weight: 900;46    font-size: 80px;47    color: #222;48    line-height: 1.05;49    margin: 36px 0 16px 0;50  }51  .subtitle {52    font-size: 34px;53    line-height: 1.5;54    color: #6f6f6f;55    max-width: 900px;56  }57  .chevron-down {58    position: absolute;59    right: 48px;60    top: 560px;61  }62 63  /* Featured and rating */64  .meta {65    padding: 24px 48px 20px 48px;66    color: #444;67    font-size: 36px;68  }69  .meta .featured { margin-bottom: 18px; }70  .pink-text { color: #e91e63; font-weight: 800; }71  .rating { display: flex; align-items: center; gap: 18px; }72  .rating strong { font-weight: 800; }73 74  /* Hero image placeholder */75  .hero {76    width: 1080px;77    height: 950px;78    background: #E0E0E0;79    border-top: 1px solid #BDBDBD;80    border-bottom: 1px solid #BDBDBD;81    display: flex;82    align-items: center;83    justify-content: center;84    color: #757575;85    position: relative;86    text-align: center;87    font-size: 36px;88  }89  .play-button {90    position: absolute;91    width: 140px;92    height: 140px;93    border-radius: 50%;94    background: #e91e63;95    display: flex;96    align-items: center;97    justify-content: center;98    box-shadow: 0 6px 16px rgba(233,30,99,0.35);99  }100  .play-button svg { width: 60px; height: 60px; }101 102  /* Ingredients section */103  .ingredients {104    padding: 28px 48px;105    background: #fff;106    border-top: 1px solid #eee;107  }108  .ingredients h2 {109    margin: 0;110    font-size: 64px;111    font-weight: 800;112    color: #222;113  }114  .qty-row {115    margin-top: 24px;116    display: flex;117    align-items: center;118    justify-content: space-between;119  }120  .qty-control {121    display: flex;122    align-items: center;123    gap: 24px;124    background: #fff;125    border: 1px solid #eee;126    border-radius: 24px;127    padding: 18px 28px;128    font-size: 40px;129    color: #333;130    box-shadow: 0 2px 0 rgba(0,0,0,0.03);131  }132  .qty-btn {133    width: 48px;134    height: 48px;135    border-radius: 12px;136    display: flex;137    align-items: center;138    justify-content: center;139    color: #e91e63;140    font-weight: 900;141    font-size: 54px;142    line-height: 0;143  }144  .ad-banner {145    margin: 22px auto 0 auto;146    width: 980px;147    height: 160px;148    background: #E0E0E0;149    border: 1px solid #BDBDBD;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #757575;154    font-size: 34px;155  }156 157  /* Bottom navigation */158  .bottom-nav {159    position: absolute;160    left: 0; right: 0; bottom: 0;161    height: 190px;162    background: #fff;163    border-top: 1px solid #e9e9e9;164    display: flex;165    padding-top: 22px;166  }167  .nav-item {168    flex: 1;169    display: flex;170    flex-direction: column;171    align-items: center;172    gap: 14px;173    color: #757575;174    font-size: 32px;175    font-weight: 700;176  }177  .nav-item svg { width: 56px; height: 56px; }178  .nav-item.active { color: #e91e63; }179  .home-indicator {180    position: absolute;181    bottom: 200px;182    left: 50%;183    transform: translateX(-50%);184    width: 350px;185    height: 12px;186    background: #000000;187    opacity: 0.09;188    border-radius: 12px;189  }190  /* Helper */191  .muted { color: #9b9b9b; }192 193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    <div>1:09</div>201    <div class="status-icons">202      <!-- simple glyphs -->203      <svg class="icon" viewBox="0 0 24 24"><path d="M4 10h14v4H4zM6 7h10v3H6zM8 14h6v3H8z"/></svg>204      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l2 3h-4l2-3zm0 19c-4.4 0-8-3.6-8-8h2c0 3.3 2.7 6 6 6s6-2.7 6-6h2c0 4.4-3.6 8-8 8z"/></svg>205      <svg class="icon" viewBox="0 0 24 24"><path d="M4 4h16v2H4zm2 4h12v2H6zm4 4h4v2h-4z"/></svg>206      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>207      <svg class="icon" viewBox="0 0 24 24"><path d="M18 8l2-3h-8l-4 7h6l-2 4h4l2-5h-4l2-3z"/></svg>208      <svg class="icon" viewBox="0 0 24 24"><path d="M18 2H6v20l6-3 6 3V2z"/></svg>209    </div>210  </div>211 212  <!-- Header area -->213  <div class="header">214    <div class="top-actions">215      <div class="left-action">216        <!-- Back arrow -->217        <svg class="icon" viewBox="0 0 24 24">218          <path class="pink" d="M15 5l-7 7 7 7 1.5-1.5L11 12l5.5-5.5L15 5z"/>219        </svg>220      </div>221      <div class="action-icons">222        <!-- Share icon -->223        <svg class="icon" viewBox="0 0 24 24">224          <circle class="pink" cx="6" cy="12" r="2.2"/>225          <circle class="pink" cx="16" cy="7" r="2.2"/>226          <circle class="pink" cx="18" cy="16" r="2.2"/>227          <path class="pink" d="M7.9 11l6.1-3.4M7.9 13l8.5 2.6" stroke="#e91e63" stroke-width="2" fill="none"/>228        </svg>229        <!-- Heart icon -->230        <svg class="icon" viewBox="0 0 24 24">231          <path class="pink" d="M12 20s-6.5-4.4-8.4-7.3C1.4 10.4 3 7 6.3 7c2 0 3.1 1.2 3.7 2 0.6-0.8 1.7-2 3.7-2 3.3 0 4.9 3.4 2.7 5.7C18.5 15.6 12 20 12 20z"/>232        </svg>233      </div>234    </div>235 236    <div class="title">Cauliflower Pizza Crust</div>237    <div class="subtitle">238      Experience the magic of cauliflower with this scrumptious Cauliflower Pizza Crust recipe! It's a guilt-free, low-carb alternative to traditional pizza crust that'll have you coming back for seconds239    </div>240 241    <!-- Chevron down (collapse) -->242    <div class="chevron-down">243      <svg class="icon" viewBox="0 0 24 24">244        <path class="pink" d="M6 9l6 6 6-6-1.5-1.5L12 12 7.5 7.5 6 9z"/>245      </svg>246    </div>247  </div>248 249  <!-- Meta info -->250  <div class="meta">251    <div class="featured">featured in <span class="pink-text">Pizza Lovers Only</span></div>252    <div class="rating">253      <!-- Thumbs up -->254      <svg class="icon" viewBox="0 0 24 24">255        <path d="M2 13h4v7H2zM6 20h9.5c1.1 0 2-0.9 2-2l1.5-6c0-1.1-0.9-2-2-2H12l1-4-3-1-2 5H6v10z" fill="#000000"/>256      </svg>257      <strong>88%</strong>258      <span>would make this again</span>259    </div>260  </div>261 262  <!-- Hero image -->263  <div class="hero">264    [IMG: Cauliflower Pizza on wooden board - video thumbnail]265    <div class="play-button">266      <svg viewBox="0 0 24 24">267        <path d="M8 5v14l11-7-11-7z" fill="#ffffff"/>268      </svg>269    </div>270  </div>271 272  <!-- Ingredients and quantity -->273  <div class="ingredients">274    <h2>Ingredients for</h2>275    <div class="qty-row">276      <div class="muted">2 servings</div>277      <div class="qty-control">278        <div class="qty-btn">−</div>279        <div>2</div>280        <div class="qty-btn">+</div>281      </div>282    </div>283 284    <div class="ad-banner">[IMG: Advertisement Banner]</div>285  </div>286 287  <!-- Bottom navigation -->288  <div class="home-indicator"></div>289  <div class="bottom-nav">290    <div class="nav-item active">291      <svg viewBox="0 0 24 24">292        <circle cx="11" cy="11" r="7" stroke="#e91e63" stroke-width="2" fill="none"/>293        <path d="M20 20l-4-4" stroke="#e91e63" stroke-width="2" fill="none" stroke-linecap="round"/>294      </svg>295      <div>Discover</div>296    </div>297    <div class="nav-item">298      <svg viewBox="0 0 24 24">299        <path d="M4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8-8-3.6-8-8z" fill="none" stroke="#9b9b9b" stroke-width="2"/>300        <path d="M8 12h8M12 8v8" stroke="#9b9b9b" stroke-width="2"/>301      </svg>302      <div>Community</div>303    </div>304    <div class="nav-item">305      <svg viewBox="0 0 24 24">306        <path d="M6 9h12v10H6z" fill="none" stroke="#9b9b9b" stroke-width="2"/>307        <path d="M9 9V7c0-1.1.9-2 2-2h2c1.1 0 2 .9 2 2v2" fill="none" stroke="#9b9b9b" stroke-width="2"/>308      </svg>309      <div>My Bag</div>310    </div>311    <div class="nav-item">312      <svg viewBox="0 0 24 24">313        <circle cx="12" cy="8" r="4" fill="#9b9b9b"/>314        <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="none" stroke="#9b9b9b" stroke-width="2"/>315      </svg>316      <div>Profile</div>317    </div>318  </div>319 320</div>321</body>322</html>