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>Lazy lasagna - UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";16    color: #fff;17  }18 19  /* Top status overlay */20  .status-bar {21    position: absolute;22    top: 24px;23    left: 28px;24    right: 28px;25    height: 48px;26    display: flex;27    align-items: center;28    z-index: 5;29    color: #fff;30    opacity: 0.95;31  }32  .status-left {33    font-size: 38px;34    font-weight: 600;35    letter-spacing: 0.5px;36  }37  .status-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 22px;42  }43  .status-icon {44    width: 32px;45    height: 32px;46    opacity: 0.9;47  }48 49  /* Hero image */50  .hero {51    position: relative;52    width: 1080px;53    height: 1140px;54    overflow: hidden;55  }56  .hero-img {57    width: 100%;58    height: 100%;59    background: #E0E0E0;60    border: 1px solid #BDBDBD;61    display: flex;62    justify-content: center;63    align-items: center;64    color: #757575;65    font-size: 44px;66    font-weight: 600;67  }68 69  /* Back button */70  .back-btn {71    position: absolute;72    top: 300px;73    left: 36px;74    width: 132px;75    height: 132px;76    border-radius: 50%;77    background: #000;78    box-shadow: 0 6px 16px rgba(0,0,0,0.35);79    display: flex;80    justify-content: center;81    align-items: center;82    z-index: 6;83  }84  .back-btn svg {85    width: 62px; height: 62px;86    fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round;87  }88 89  /* Content section */90  .content {91    background: #000;92    padding-top: 46px;93    padding-bottom: 120px;94  }95 96  .title {97    font-family: Georgia, "Times New Roman", serif;98    font-size: 100px;99    line-height: 1.1;100    text-align: center;101    margin: 26px 48px 36px;102    font-weight: 600;103  }104 105  .rating {106    display: flex;107    justify-content: center;108    align-items: center;109    gap: 16px;110    margin-top: 6px;111    margin-bottom: 18px;112  }113  .rating svg { width: 52px; height: 52px; }114  .rating-note {115    text-align: center;116    color: #BDBDBD;117    font-size: 38px;118    margin-bottom: 56px;119  }120 121  /* Actions row */122  .actions {123    display: flex;124    justify-content: space-around;125    align-items: center;126    padding: 10px 80px 0;127    margin-bottom: 62px;128  }129  .action {130    display: flex;131    align-items: center;132    gap: 20px;133    color: #fff;134  }135  .action svg {136    width: 72px; height: 72px;137  }138  .action .label {139    font-size: 40px;140    font-weight: 500;141  }142  .action .count {143    font-size: 40px;144    font-weight: 500;145  }146 147  .divider {148    width: 100%;149    height: 1px;150    background: #2A2A2A;151    margin: 20px 0 44px;152  }153 154  /* Author block */155  .author {156    display: flex;157    align-items: center;158    padding: 0 48px;159    margin-bottom: 36px;160  }161  .avatar {162    width: 160px;163    height: 160px;164    border-radius: 50%;165    background: #E0E0E0;166    border: 1px solid #BDBDBD;167    display: flex;168    justify-content: center;169    align-items: center;170    color: #757575;171    font-size: 28px;172    font-weight: 600;173    margin-right: 32px;174  }175  .author-info .name {176    font-size: 48px;177    font-weight: 700;178    margin-bottom: 10px;179  }180  .author-info .role {181    font-size: 34px;182    color: #BDBDBD;183  }184 185  .description {186    padding: 0 48px;187    font-size: 42px;188    line-height: 1.5;189    color: #F1F1F1;190    margin-top: 28px;191  }192</style>193</head>194<body>195<div id="render-target">196 197  <!-- Status bar -->198  <div class="status-bar">199    <div class="status-left">9:26</div>200    <div class="status-right">201      <!-- minimal system-like icons -->202      <svg class="status-icon" viewBox="0 0 24 24">203        <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>204        <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>205      </svg>206      <svg class="status-icon" viewBox="0 0 24 24">207        <path d="M3 8a9 9 0 0 1 18 0v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8z" fill="none" stroke="#fff" stroke-width="2"/>208        <circle cx="12" cy="14" r="3" fill="#fff"/>209      </svg>210      <svg class="status-icon" viewBox="0 0 24 24">211        <path d="M2 18h20M4 14h16M6 10h12M8 6h8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>212      </svg>213    </div>214  </div>215 216  <!-- Hero image -->217  <div class="hero">218    <div class="hero-img">[IMG: Skillet of lasagna]</div>219 220    <!-- Back button -->221    <div class="back-btn">222      <svg viewBox="0 0 24 24">223        <path d="M15 19l-7-7 7-7" />224      </svg>225    </div>226  </div>227 228  <!-- Content -->229  <div class="content">230    <div class="title">Lazy lasagna</div>231 232    <div class="rating">233      <!-- Stars (4 full + 1 half) -->234      <svg viewBox="0 0 24 24">235        <path d="M12 17.3L5.8 21l1.6-7L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.4 4.8 1.6 7z" fill="#FF7A00"/>236      </svg>237      <svg viewBox="0 0 24 24">238        <path d="M12 17.3L5.8 21l1.6-7L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.4 4.8 1.6 7z" fill="#FF7A00"/>239      </svg>240      <svg viewBox="0 0 24 24">241        <path d="M12 17.3L5.8 21l1.6-7L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.4 4.8 1.6 7z" fill="#FF7A00"/>242      </svg>243      <svg viewBox="0 0 24 24">244        <path d="M12 17.3L5.8 21l1.6-7L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.4 4.8 1.6 7z" fill="#FF7A00"/>245      </svg>246      <svg viewBox="0 0 24 24">247        <defs>248          <linearGradient id="halfStar" x1="0%" y1="0%" x2="100%" y2="0%">249            <stop offset="50%" stop-color="#FF7A00"/>250            <stop offset="50%" stop-color="#2B2B2B"/>251          </linearGradient>252        </defs>253        <path d="M12 17.3L5.8 21l1.6-7L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.4 4.8 1.6 7z" fill="url(#halfStar)"/>254      </svg>255    </div>256 257    <div class="rating-note">Based on 19 ratings</div>258 259    <div class="actions">260      <div class="action">261        <svg viewBox="0 0 24 24">262          <path d="M12 21s-7-4.6-9.2-7.3C1 11.5 2 8.5 4.6 7.6 6.7 6.8 8.8 7.7 10 9.3c1.2-1.6 3.3-2.5 5.4-1.7 2.6.9 3.6 3.9 1.8 6.1C19 16.4 12 21 12 21z"263                fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>264        </svg>265        <div class="count">3654</div>266      </div>267 268      <div class="action">269        <svg viewBox="0 0 24 24">270          <path d="M6 3h12v18l-6-3-6 3V3z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>271        </svg>272        <div class="label">Save</div>273      </div>274 275      <div class="action">276        <svg viewBox="0 0 24 24">277          <circle cx="6" cy="12" r="3" fill="none" stroke="#fff" stroke-width="2"/>278          <circle cx="18" cy="6" r="3" fill="none" stroke="#fff" stroke-width="2"/>279          <circle cx="18" cy="18" r="3" fill="none" stroke="#fff" stroke-width="2"/>280          <path d="M8.8 10.8l6.4-3.2M8.8 13.2l6.4 3.2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>281        </svg>282        <div class="label">Share</div>283      </div>284    </div>285 286    <div class="divider"></div>287 288    <div class="author">289      <div class="avatar">[IMG: Author Avatar]</div>290      <div class="author-info">291        <div class="name">Carolin Roitzheim</div>292        <div class="role">Food Editor at Kitchen Stories</div>293      </div>294    </div>295 296    <div class="description">297      They say good things come to those who wait – but sometimes you don't have a lot of time and you're still craving a comforting, scrumptious lasagna.298    </div>299  </div>300 301</div>302</body>303</html>