GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Classic Ratatouille - UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b0b0b;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 32px;27    color: #ffffff;28    z-index: 5;29    pointer-events: none;30  }31  .status-left, .status-right { display: flex; align-items: center; gap: 16px; }32  .status-time { font-weight: 600; font-size: 28px; opacity: 0.95; }33 34  /* Hero image area */35  .hero {36    position: absolute;37    top: 0;38    left: 0;39    width: 1080px;40    height: 1420px;41    overflow: hidden;42  }43  .hero .photo {44    position: absolute;45    top: 0;46    left: 0;47    width: 1080px;48    height: 1420px;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    color: #757575;52    display: flex;53    align-items: center;54    justify-content: center;55    text-align: center;56    padding: 24px;57    line-height: 1.35;58    font-size: 30px;59  }60 61  /* Back button */62  .back-btn {63    position: absolute;64    top: 120px;65    left: 36px;66    width: 120px;67    height: 120px;68    border-radius: 60px;69    background: rgba(0,0,0,0.75);70    display: flex;71    align-items: center;72    justify-content: center;73    z-index: 4;74  }75 76  /* Play button */77  .play {78    position: absolute;79    top: 560px;80    left: 50%;81    transform: translateX(-50%);82    width: 320px;83    height: 320px;84    border-radius: 160px;85    border: 10px solid rgba(255,255,255,0.95);86    background: rgba(255,255,255,0.85);87    display: flex;88    align-items: center;89    justify-content: center;90    z-index: 3;91  }92 93  /* Details panel */94  .panel {95    position: absolute;96    left: 0;97    top: 1300px;98    width: 1080px;99    height: 1100px;100    background: #0b0b0b;101    color: #fff;102    padding: 72px 72px 0 72px;103    box-sizing: border-box;104  }105  .title {106    font-family: Georgia, "Times New Roman", serif;107    font-size: 96px;108    line-height: 1.05;109    font-weight: 700;110    color: #ffffff;111    margin: 0 0 32px 0;112    letter-spacing: 0.5px;113  }114  .rating-row {115    display: flex;116    align-items: center;117    gap: 12px;118    margin-top: 8px;119  }120  .rating-text {121    color: #bdbdbd;122    font-size: 36px;123    margin-top: 12px;124  }125  .actions {126    display: flex;127    align-items: center;128    gap: 68px;129    margin-top: 48px;130  }131  .action {132    display: flex;133    align-items: center;134    gap: 18px;135    color: #ffffff;136    font-size: 42px;137    opacity: 0.95;138  }139  .action .count { font-weight: 600; letter-spacing: 0.5px; }140 141  .contributor {142    margin-top: 56px;143    padding-top: 40px;144    border-top: 1px solid rgba(255,255,255,0.08);145    display: flex;146    align-items: center;147    gap: 32px;148  }149  .avatar {150    width: 150px; height: 150px; border-radius: 75px;151    background: #E0E0E0; border: 1px solid #BDBDBD;152    color: #757575; display: flex; align-items: center; justify-content: center;153    font-size: 28px;154  }155  .contrib-meta .name {156    font-size: 54px; font-weight: 700; color: #fff; margin: 0;157  }158  .contrib-meta .role {159    font-size: 40px; color: #bdbdbd; margin-top: 8px;160  }161 162  /* Home indicator */163  .home-indicator {164    position: absolute;165    bottom: 26px;166    left: 50%;167    transform: translateX(-50%);168    width: 400px;169    height: 10px;170    border-radius: 6px;171    background: #ffffff;172    opacity: 0.9;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status Bar -->180  <div class="status-bar">181    <div class="status-left">182      <div class="status-time">8:16</div>183    </div>184    <div class="status-right">185      <!-- Simple status icons -->186      <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="2"/></svg>187      <svg width="32" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">188        <path d="M3 18c4-4 14-4 18 0"/>189        <path d="M6 15c3-3 9-3 12 0"/>190        <path d="M9 12c2-2 4-2 6 0"/>191      </svg>192      <svg width="38" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">193        <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>194        <path d="M20 10v4"></path>195      </svg>196    </div>197  </div>198 199  <!-- Hero Image -->200  <div class="hero">201    <div class="photo">[IMG: Overhead food scene with pot, plate of ratatouille on a grey table, napkin and bread]</div>202 203    <!-- Back button -->204    <div class="back-btn">205      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">206        <polyline points="15 18 9 12 15 6"></polyline>207      </svg>208    </div>209 210    <!-- Play button -->211    <div class="play">212      <svg width="150" height="150" viewBox="0 0 24 24" fill="#0b0b0b">213        <polygon points="8,5 19,12 8,19"></polygon>214      </svg>215    </div>216  </div>217 218  <!-- Details Panel -->219  <div class="panel">220    <div class="title">Classic Ratatouille</div>221 222    <div class="rating-row">223      <!-- Stars -->224      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ff7a00"><path d="M12 2l2.9 6 6.4.6-4.8 4.2 1.4 6.2L12 16l-5.9 3 1.4-6.2L2 8.6l6.4-.6z"/></svg>225      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ff7a00"><path d="M12 2l2.9 6 6.4.6-4.8 4.2 1.4 6.2L12 16l-5.9 3 1.4-6.2L2 8.6l6.4-.6z"/></svg>226      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ff7a00"><path d="M12 2l2.9 6 6.4.6-4.8 4.2 1.4 6.2L12 16l-5.9 3 1.4-6.2L2 8.6l6.4-.6z"/></svg>227      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ff7a00"><path d="M12 2l2.9 6 6.4.6-4.8 4.2 1.4 6.2L12 16l-5.9 3 1.4-6.2L2 8.6l6.4-.6z"/></svg>228      <!-- Half/Grey star -->229      <svg width="48" height="48" viewBox="0 0 24 24">230        <defs>231          <linearGradient id="half">232            <stop offset="50%" stop-color="#ff7a00"></stop>233            <stop offset="50%" stop-color="#555555"></stop>234          </linearGradient>235        </defs>236        <path d="M12 2l2.9 6 6.4.6-4.8 4.2 1.4 6.2L12 16l-5.9 3 1.4-6.2L2 8.6l6.4-.6z" fill="url(#half)"></path>237      </svg>238    </div>239 240    <div class="rating-text">Based on 62 ratings</div>241 242    <div class="actions">243      <div class="action">244        <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">245          <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 22l7.8-8.6 1-1a5.5 5.5 0 0 0 0-7.8z"></path>246        </svg>247        <span class="count">11181</span>248      </div>249      <div class="action">250        <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">251          <path d="M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>252        </svg>253        <span>Save</span>254      </div>255      <div class="action">256        <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">257          <circle cx="6" cy="12" r="2"></circle>258          <circle cx="18" cy="6" r="2"></circle>259          <circle cx="18" cy="18" r="2"></circle>260          <path d="M8 12l8-6"></path>261          <path d="M8 12l8 6"></path>262        </svg>263        <span>Share</span>264      </div>265    </div>266 267    <div class="contributor">268      <div class="avatar">[Avatar]</div>269      <div class="contrib-meta">270        <div class="name">Nina</div>271        <div class="role">Contributor</div>272      </div>273    </div>274  </div>275 276  <div class="home-indicator"></div>277</div>278</body>279</html>