GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>BigOven UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f5f5f5;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Top system/status bar */19  .status-bar {20    height: 110px;21    background: #b43e3e;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 30px;26    font-size: 36px;27  }28  .status-icons {29    margin-left: auto;30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .status-dot, .status-circle {35    width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.9);36  }37  .status-circle { width: 28px; height: 28px; }38 39  /* App bar */40  .app-bar {41    height: 140px;42    background: #c64545;43    display: flex;44    align-items: center;45    padding: 0 40px;46    color: #fff;47  }48  .brand {49    display: flex;50    align-items: center;51    gap: 20px;52    font-size: 46px;53    font-weight: 700;54    letter-spacing: 0.5px;55  }56  .brand-logo {57    width: 70px; height: 70px;58    border-radius: 8px;59    border: 2px solid #fff;60    display: flex;61    justify-content: center;62    align-items: center;63    font-size: 24px;64    opacity: 0.9;65  }66  .app-actions {67    margin-left: auto;68    display: flex;69    align-items: center;70    gap: 30px;71  }72  .icon-btn { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; }73 74  /* Tabs */75  .tabs {76    height: 120px;77    background: #c64545;78    display: flex;79    align-items: center;80    padding: 0 30px;81    gap: 46px;82    color: #fff;83    box-shadow: 0 2px 0 rgba(0,0,0,0.1);84  }85  .tab {86    font-weight: 700;87    font-size: 34px;88    letter-spacing: 2px;89    text-transform: uppercase;90    padding-bottom: 16px;91    color: #fff;92    opacity: 0.95;93  }94  .tab.active {95    border-bottom: 4px solid #fff;96  }97 98  /* Content area */99  .content {100    position: absolute;101    top: 370px; /* status + appbar + tabs */102    left: 0;103    right: 0;104    bottom: 0;105    overflow: hidden;106  }107  .scroll {108    height: 100%;109    overflow-y: auto;110    padding-bottom: 140px;111  }112 113  /* Cards / sections */114  .card {115    background: #fff;116    margin: 24px 20px;117    border-radius: 6px;118    box-shadow: 0 2px 8px rgba(0,0,0,0.15);119    overflow: hidden;120  }121  .card.pad { padding: 32px; }122 123  .title-lg {124    font-size: 54px;125    font-weight: 800;126    margin-bottom: 16px;127    color: #111;128  }129  .subtitle-red {130    font-size: 34px;131    color: #d32f2f;132    line-height: 1.3;133  }134 135  /* Media title bar */136  .media-title {137    background: #000;138    color: #fff;139    font-size: 44px;140    font-weight: 700;141    padding: 26px 30px;142    white-space: nowrap;143    overflow: hidden;144    text-overflow: ellipsis;145  }146 147  /* Image placeholders */148  .img-ph {149    background: #E0E0E0;150    border: 1px solid #BDBDBD;151    display: flex;152    justify-content: center;153    align-items: center;154    color: #757575;155    text-align: center;156  }157 158  /* Text blocks */159  .item-title {160    font-size: 44px;161    font-weight: 800;162    padding: 28px 30px 0 30px;163    color: #222;164  }165  .rating-row {166    display: flex;167    align-items: center;168    gap: 14px;169    padding: 10px 30px 30px 30px;170    color: #777;171    font-size: 34px;172  }173 174  /* Floating search button */175  .fab {176    position: absolute;177    right: 40px;178    bottom: 180px;179    width: 130px;180    height: 130px;181    border-radius: 50%;182    background: #d24f4f;183    box-shadow: 0 8px 22px rgba(0,0,0,0.3);184    display: flex;185    align-items: center;186    justify-content: center;187  }188 189  /* Bottom gesture bar */190  .gesture {191    position: absolute;192    bottom: 22px;193    left: 50%;194    transform: translateX(-50%);195    width: 300px;196    height: 14px;197    border-radius: 7px;198    background: #000;199    opacity: 0.8;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status Bar -->207  <div class="status-bar">208    8:25209    <div class="status-icons">210      <div class="status-circle"></div>211      <div class="status-dot"></div>212      <div class="status-dot"></div>213      <div class="status-circle"></div>214    </div>215  </div>216 217  <!-- App Bar -->218  <div class="app-bar">219    <div class="brand">220      <div class="brand-logo">BO</div>221      BigOven222    </div>223    <div class="app-actions">224      <div class="icon-btn">225        <svg width="42" height="42" viewBox="0 0 24 24">226          <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>227          <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>228        </svg>229      </div>230      <div class="icon-btn">231        <svg width="42" height="42" viewBox="0 0 24 24">232          <circle cx="12" cy="5" r="2" fill="#fff"></circle>233          <circle cx="12" cy="12" r="2" fill="#fff"></circle>234          <circle cx="12" cy="19" r="2" fill="#fff"></circle>235        </svg>236      </div>237    </div>238  </div>239 240  <!-- Tabs -->241  <div class="tabs">242    <div class="tab active">GET IDEAS</div>243    <div class="tab">MY RECIPES</div>244    <div class="tab">VIDEOS</div>245    <div class="tab">EDITORIALS</div>246    <div class="tab">ACT</div>247  </div>248 249  <!-- Content -->250  <div class="content">251    <div class="scroll">252 253      <!-- What to Make This week card -->254      <div class="card pad">255        <div class="title-lg">What to Make This week</div>256        <div class="subtitle-red">Keep an eye out for new videos from the BigOven Kitchen every week.</div>257      </div>258 259      <!-- Video teaser -->260      <div class="card">261        <div class="media-title">Oven-Baked Blackberry-Bourbon Glaze...</div>262        <div class="img-ph" style="height: 620px;">263          [IMG: Ribs plated with corn and slaw]264        </div>265      </div>266 267      <!-- Recipe title + rating -->268      <div class="card">269        <div class="item-title">Oven-Baked Blackberry-Bourbon Glazed Ribs</div>270        <div class="rating-row">271          <div style="display:flex; gap:10px;">272            <!-- 5 stars -->273            <svg width="40" height="40" viewBox="0 0 24 24">274              <path d="M12 2l2.9 6.3 6.8.5-5.1 4.3 1.7 6.7L12 16.8 5.7 19.8l1.7-6.7-5.1-4.3 6.8-.5L12 2z" fill="#FBC02D" stroke="#E0A800" stroke-width="1"/>275            </svg>276            <svg width="40" height="40" viewBox="0 0 24 24">277              <path d="M12 2l2.9 6.3 6.8.5-5.1 4.3 1.7 6.7L12 16.8 5.7 19.8l1.7-6.7-5.1-4.3 6.8-.5L12 2z" fill="#FBC02D" stroke="#E0A800" stroke-width="1"/>278            </svg>279            <svg width="40" height="40" viewBox="0 0 24 24">280              <path d="M12 2l2.9 6.3 6.8.5-5.1 4.3 1.7 6.7L12 16.8 5.7 19.8l1.7-6.7-5.1-4.3 6.8-.5L12 2z" fill="#FBC02D" stroke="#E0A800" stroke-width="1"/>281            </svg>282            <svg width="40" height="40" viewBox="0 0 24 24">283              <path d="M12 2l2.9 6.3 6.8.5-5.1 4.3 1.7 6.7L12 16.8 5.7 19.8l1.7-6.7-5.1-4.3 6.8-.5L12 2z" fill="#FBC02D" stroke="#E0A800" stroke-width="1"/>284            </svg>285            <svg width="40" height="40" viewBox="0 0 24 24">286              <path d="M12 2l2.9 6.3 6.8.5-5.1 4.3 1.7 6.7L12 16.8 5.7 19.8l1.7-6.7-5.1-4.3 6.8-.5L12 2z" fill="#FBC02D" stroke="#E0A800" stroke-width="1"/>287            </svg>288          </div>289          <span>(0)</span>290        </div>291      </div>292 293      <!-- Editorial card with large image -->294      <div class="card">295        <div class="img-ph" style="height: 620px;">296          [IMG: Editorial banner image]297        </div>298        <div class="item-title" style="padding-bottom:30px;">A Simple Guide to Cooking Ribs</div>299      </div>300 301    </div>302  </div>303 304  <!-- Floating Action Button -->305  <div class="fab">306    <svg width="70" height="70" viewBox="0 0 24 24">307      <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2.2" fill="none"></circle>308      <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#fff" stroke-width="2.2" stroke-linecap="round"></line>309    </svg>310  </div>311 312  <!-- Gesture bar -->313  <div class="gesture"></div>314 315</div>316</body>317</html>