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>Tiramisu Recipe UI</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, sans-serif;16    color: #fff;17  }18 19  /* Top status bar (mock) */20  .statusbar {21    position: absolute;22    top: 24px;23    left: 32px;24    right: 32px;25    height: 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    opacity: 0.95;30    z-index: 5;31  }32  .status-left {33    display: flex; align-items: center; gap: 18px;34    font-weight: 600; font-size: 34px;35  }36  .story-dots { display: flex; gap: 16px; align-items: center; }37  .story-dots span {38    display: inline-block; width: 22px; height: 22px; border-radius: 50%;39    background: rgba(255,255,255,0.85);40  }41  .status-right { display: flex; gap: 22px; align-items: center; }42  .status-right span {43    display: inline-block; width: 18px; height: 18px; border-radius: 3px; background: rgba(255,255,255,0.9);44  }45 46  /* Hero */47  .hero {48    position: relative;49    width: 1080px;50    height: 930px;51  }52  .hero-img {53    position: absolute; inset: 0;54    background: #E0E0E0;55    border-bottom: 1px solid #BDBDBD;56    display: flex; align-items: center; justify-content: center;57    color: #757575; font-size: 40px; letter-spacing: 0.2px;58  }59  .back-btn {60    position: absolute; left: 48px; top: 320px;61    width: 120px; height: 120px; border-radius: 60px;62    background: rgba(0,0,0,0.85);63    display: flex; align-items: center; justify-content: center;64    z-index: 3;65  }66  .back-btn svg { width: 48px; height: 48px; }67  .play-btn {68    position: absolute; left: 50%; top: 50%;69    transform: translate(-50%,-50%);70    width: 280px; height: 280px; border-radius: 50%;71    border: 10px solid #fff;72    display: flex; align-items: center; justify-content: center;73    background: rgba(0,0,0,0.12);74  }75  .play-btn svg { width: 120px; height: 120px; }76 77  /* Content */78  .content {79    position: absolute;80    left: 0; right: 0; top: 930px; bottom: 0;81    background: #000;82    padding: 48px 56px 120px 56px;83    overflow: hidden;84  }85  .title {86    font-family: Georgia, "Times New Roman", serif;87    font-weight: 600;88    font-size: 88px;89    line-height: 1.12;90    text-align: center;91    margin: 32px 40px 36px 40px;92  }93  .rating {94    display: flex; align-items: center; justify-content: center; gap: 14px;95    margin-top: 4px;96  }97  .rating svg { width: 52px; height: 52px; }98  .subtext {99    text-align: center;100    margin-top: 16px;101    color: #bdbdbd;102    font-size: 34px;103  }104 105  .actions {106    margin-top: 48px;107    display: flex; align-items: center; justify-content: space-between;108    padding: 0 24px;109  }110  .action {111    display: flex; align-items: center; gap: 18px; color: #fff;112    font-size: 38px;113  }114  .action svg { width: 56px; height: 56px; }115  .divider {116    height: 1px; background: #2a2a2a; margin: 40px 0;117  }118 119  .author {120    display: flex; gap: 28px; align-items: center;121    padding: 12px 0 8px 0;122  }123  .avatar {124    width: 160px; height: 160px; border-radius: 80px; overflow: hidden;125    background: #E0E0E0; border: 1px solid #BDBDBD;126    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;127    flex-shrink: 0;128  }129  .author-info .name {130    font-weight: 700; font-size: 46px; margin-bottom: 8px;131  }132  .author-info .role {133    color: #bdbdbd; font-size: 32px; margin-bottom: 8px;134  }135  .author-info .link {136    color: #ff8a3d; font-size: 32px;137  }138 139  .desc {140    margin-top: 28px; color: #f2f2f2; font-size: 38px; line-height: 1.55;141  }142  .readmore { color: #ff8a3d; }143 144  /* Home indicator */145  .home-indicator {146    position: absolute; bottom: 28px; left: 50%;147    transform: translateX(-50%);148    width: 360px; height: 10px; border-radius: 6px; background: #fff; opacity: 0.9;149  }150 151  /* SVG defs for stars */152  svg defs linearGradient stop { }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Mock status bar -->159  <div class="statusbar">160    <div class="status-left">161      <div>6:24</div>162      <div class="story-dots">163        <span></span><span></span><span></span><span></span><span style="opacity:.6;"></span>164      </div>165    </div>166    <div class="status-right">167      <span style="width:26px; height:26px; border-radius:50%;"></span>168      <span style="width:18px; height:26px;"></span>169    </div>170  </div>171 172  <!-- HERO -->173  <div class="hero">174    <div class="hero-img">[IMG: Tiramisu dessert on plate]</div>175 176    <div class="back-btn">177      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">178        <path d="M15 18l-6-6 6-6"/>179      </svg>180    </div>181 182    <div class="play-btn" aria-hidden="true">183      <svg viewBox="0 0 24 24" fill="#fff">184        <polygon points="8,5 20,12 8,19"></polygon>185      </svg>186    </div>187  </div>188 189  <!-- CONTENT -->190  <div class="content">191    <div class="title">Make classic tiramisu with Lisa</div>192 193    <div class="rating">194      <!-- full stars -->195      <svg viewBox="0 0 24 24" fill="#ff8a3d"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1z"/></svg>196      <svg viewBox="0 0 24 24" fill="#ff8a3d"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1z"/></svg>197      <svg viewBox="0 0 24 24" fill="#ff8a3d"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1z"/></svg>198      <svg viewBox="0 0 24 24" fill="#ff8a3d"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1z"/></svg>199      <!-- half star -->200      <svg viewBox="0 0 24 24">201        <defs>202          <linearGradient id="halfGrad" x1="0" y1="0" x2="1" y2="0">203            <stop offset="50%" stop-color="#ff8a3d"></stop>204            <stop offset="50%" stop-color="#444"></stop>205          </linearGradient>206        </defs>207        <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1z" fill="url(#halfGrad)"></path>208      </svg>209    </div>210    <div class="subtext">Based on 380 ratings</div>211 212    <div class="actions">213      <div class="action">214        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">215          <path d="M12 21s-6.5-4.3-9.3-7.1C-0.4 11.1 2 5.8 6.6 6.3 8.8 6.6 10 8.1 12 10c2-1.9 3.2-3.4 5.4-3.7 4.6-.5 7 4.8 3.3 7.6C18.5 16.7 12 21 12 21z"/>216        </svg>217        <span>141676</span>218      </div>219      <div class="action">220        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">221          <path d="M6 2h12v20l-6-4-6 4z"/>222        </svg>223        <span>Save</span>224      </div>225      <div class="action">226        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">227          <circle cx="18" cy="5" r="3"></circle>228          <circle cx="6" cy="12" r="3"></circle>229          <circle cx="18" cy="19" r="3"></circle>230          <path d="M8.7 13.4l6.6 3.2M15.3 7.4L8.7 10.6"/>231        </svg>232        <span>Share</span>233      </div>234    </div>235 236    <div class="divider"></div>237 238    <div class="author">239      <div class="avatar">[IMG: Profile Photo]</div>240      <div class="author-info">241        <div class="name">Lisa Schölzel</div>242        <div class="role">Food Editor at Kitchen Stories</div>243        <div class="link">instagram.com/whatscookinglisa/</div>244      </div>245    </div>246 247    <div class="desc">248      For this tiramisu recipe I used strong and freshly brewed espresso, not the instant powder. It makes a difference, trust me. Make sure the coffee has cooled slightly and that you don't soak the ladyfingers, but just quickly dunk them in the Amaretto-... <span class="readmore">Read more</span>249    </div>250  </div>251 252  <div class="home-indicator"></div>253</div>254</body>255</html>