GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>BigOven Mockup</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: #ffffff;14  }15 16  /* Top App Bar */17  .appbar {18    background: #c84444;19    color: #fff;20    width: 100%;21    height: 240px;22    box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;23  }24  .status-pad { height: 24px; } /* subtle top spacing */25  .brand-row {26    height: 116px;27    display: flex;28    align-items: center;29    padding: 0 36px;30    justify-content: space-between;31  }32  .brand-left {33    display: flex;34    align-items: center;35    gap: 18px;36  }37  .logo-box {38    width: 64px; height: 64px;39    border-radius: 12px;40    border: 2px solid #fff;41    position: relative;42  }43  .logo-box::before, .logo-box::after {44    content: '';45    position: absolute;46    width: 10px; height: 10px; border-radius: 50%; background: #fff;47  }48  .logo-box::before { top: 14px; left: 14px; box-shadow: 26px 0 0 #fff, 0 26px 0 #fff, 26px 26px 0 #fff; }49  .brand-name { font-size: 44px; font-weight: 600; letter-spacing: 0.5px; }50  .brand-actions {51    display: flex; align-items: center; gap: 30px;52  }53  .icon-btn svg { width: 48px; height: 48px; }54 55  .tabs {56    display: flex;57    align-items: center;58    gap: 48px;59    padding: 0 36px;60    height: 100px;61    border-top: 1px solid rgba(255,255,255,0.15);62  }63  .tab {64    color: #fff;65    font-size: 32px;66    font-weight: 700;67    letter-spacing: 1px;68    opacity: 0.95;69    position: relative;70    text-transform: uppercase;71  }72  .tab.active::after {73    content: '';74    position: absolute;75    left: 0; bottom: -6px;76    width: 160px; height: 6px;77    background: #ffffff;78    opacity: 0.8;79  }80 81  /* Content area */82  .content {83    padding: 24px 0 160px 0;84    background: #f3f3f3;85    min-height: calc(2400px - 240px);86  }87  .card {88    background: #fff;89    margin: 18px 18px;90    border-radius: 6px;91    box-shadow: 0 2px 6px rgba(0,0,0,0.15);92  }93  .card.pad { padding: 28px; }94 95  .section-title {96    font-size: 56px;97    font-weight: 800;98    color: #111;99    margin-bottom: 16px;100  }101  .section-sub {102    font-size: 34px;103    color: #d32f2f;104    line-height: 1.4;105  }106 107  .video-block {108    margin: 18px 18px;109    border-radius: 6px;110    overflow: hidden;111    box-shadow: 0 2px 6px rgba(0,0,0,0.15);112    background: #000;113  }114  .video-top, .video-bottom {115    height: 48px; background: #000;116  }117  .video-image {118    height: 620px;119    background: #E0E0E0;120    border: 1px solid #BDBDBD;121    display: flex; align-items: center; justify-content: center;122    color: #757575; position: relative;123  }124  .video-watermark {125    position: absolute; left: 18px; top: 18px;126    background: rgba(255,255,255,0.9);127    color: #c84444; font-weight: 700; padding: 8px 12px; border-radius: 4px;128    font-size: 28px;129  }130  .video-overlay {131    position: absolute; left: 40px; right: 40px; bottom: 40px;132    color: rgba(255,255,255,0.95);133    font-weight: 800;134    font-size: 60px;135    line-height: 1.15;136    text-transform: uppercase;137    text-align: left;138    text-shadow: 0 2px 4px rgba(0,0,0,0.4);139  }140 141  .recipe-card {142    padding: 28px;143  }144  .recipe-title {145    font-size: 44px; font-weight: 800; color: #222; margin-bottom: 22px;146  }147  .rating-row {148    display: flex; align-items: center; gap: 8px;149  }150  .rating-row .count {151    color: #777; font-size: 34px; margin-left: 10px;152  }153  .star svg { width: 44px; height: 44px; }154  .star path { stroke: #FFC107; stroke-width: 4; fill: none; }155 156  .image-placeholder {157    width: calc(100% - 36px);158    height: 720px;159    margin: 18px;160    background: #E0E0E0;161    border: 1px solid #BDBDBD;162    display: flex; align-items: center; justify-content: center;163    color: #757575;164    border-radius: 6px;165    box-shadow: 0 2px 6px rgba(0,0,0,0.15);166  }167  .article-title {168    font-size: 44px; font-weight: 800; color: #222;169    padding: 28px; margin: 0 18px 18px 18px;170    background: #fff; border-radius: 6px;171    box-shadow: 0 2px 6px rgba(0,0,0,0.15);172  }173 174  /* Floating Action Button */175  .fab {176    position: absolute;177    bottom: 170px;178    right: 40px;179    width: 136px; height: 136px;180    border-radius: 50%;181    background: #e84d4d;182    box-shadow: 0 8px 16px rgba(0,0,0,0.25);183    display: flex; align-items: center; justify-content: center;184  }185  .fab svg { width: 58px; height: 58px; }186 187  /* Bottom gesture bar */188  .gesture {189    position: absolute;190    bottom: 18px; left: 50%;191    transform: translateX(-50%);192    width: 300px; height: 8px;193    background: #ddd; border-radius: 8px;194  }195</style>196</head>197<body>198<div id="render-target">199  <div class="appbar">200    <div class="status-pad"></div>201    <div class="brand-row">202      <div class="brand-left">203        <div class="logo-box"></div>204        <div class="brand-name">BigOven</div>205      </div>206      <div class="brand-actions">207        <div class="icon-btn">208          <svg viewBox="0 0 24 24">209            <circle cx="11" cy="11" r="6.5" stroke="#fff" stroke-width="2.2" fill="none"></circle>210            <line x1="16.2" y1="16.2" x2="21.5" y2="21.5" stroke="#fff" stroke-width="2.6" stroke-linecap="round"></line>211          </svg>212        </div>213        <div class="icon-btn">214          <svg viewBox="0 0 24 24">215            <circle cx="12" cy="5" r="2.2" fill="#fff"></circle>216            <circle cx="12" cy="12" r="2.2" fill="#fff"></circle>217            <circle cx="12" cy="19" r="2.2" fill="#fff"></circle>218          </svg>219        </div>220      </div>221    </div>222    <div class="tabs">223      <div class="tab active">Get Ideas</div>224      <div class="tab">My Recipes</div>225      <div class="tab">Videos</div>226      <div class="tab">Editorials</div>227      <div class="tab">Activity</div>228    </div>229  </div>230 231  <div class="content">232    <div class="card pad">233      <div class="section-title">What to Make This week</div>234      <div class="section-sub">Keep an eye out for new videos from the BigOven Kitchen every week.</div>235    </div>236 237    <div class="video-block">238      <div class="video-top"></div>239      <div class="video-image">240        <div class="video-watermark">BigOven</div>241        [IMG: Ribs dish close-up]242        <div class="video-overlay">243          Oven-Baked Blackberry<br/>Bourbon Glazed Ribs244        </div>245      </div>246      <div class="video-bottom"></div>247    </div>248 249    <div class="card recipe-card">250      <div class="recipe-title">Oven-Baked Blackberry-Bourbon Glazed Ribs</div>251      <div class="rating-row">252        <div class="star">253          <svg viewBox="0 0 24 24"><path d="M12 2.5l3.1 6.3 7 .9-5.1 4.8 1.3 6.9L12 18.6 5.7 21.4l1.3-6.9L2 9.7l7-.9z"/></svg>254        </div>255        <div class="star">256          <svg viewBox="0 0 24 24"><path d="M12 2.5l3.1 6.3 7 .9-5.1 4.8 1.3 6.9L12 18.6 5.7 21.4l1.3-6.9L2 9.7l7-.9z"/></svg>257        </div>258        <div class="star">259          <svg viewBox="0 0 24 24"><path d="M12 2.5l3.1 6.3 7 .9-5.1 4.8 1.3 6.9L12 18.6 5.7 21.4l1.3-6.9L2 9.7l7-.9z"/></svg>260        </div>261        <div class="star">262          <svg viewBox="0 0 24 24"><path d="M12 2.5l3.1 6.3 7 .9-5.1 4.8 1.3 6.9L12 18.6 5.7 21.4l1.3-6.9L2 9.7l7-.9z"/></svg>263        </div>264        <div class="star">265          <svg viewBox="0 0 24 24"><path d="M12 2.5l3.1 6.3 7 .9-5.1 4.8 1.3 6.9L12 18.6 5.7 21.4l1.3-6.9L2 9.7l7-.9z"/></svg>266        </div>267        <div class="count">(0)</div>268      </div>269    </div>270 271    <div class="image-placeholder">[IMG: Cooking ribs article image]</div>272    <div class="article-title">A Simple Guide to Cooking Ribs</div>273  </div>274 275  <div class="fab">276    <svg viewBox="0 0 24 24">277      <circle cx="10" cy="10" r="7.2" stroke="#fff" stroke-width="2.8" fill="none"></circle>278      <line x1="15.4" y1="15.4" x2="21" y2="21" stroke="#fff" stroke-width="3.2" stroke-linecap="round"></line>279    </svg>280  </div>281 282  <div class="gesture"></div>283</div>284</body>285</html>