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</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000; /* overall page uses dark section at bottom */14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 22px;20    left: 40px;21    right: 40px;22    height: 60px;23    color: #fff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    pointer-events: none;28  }29  .status-left {30    display: flex;31    align-items: center;32    gap: 22px;33    font-weight: 600;34    font-size: 40px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 20px;40  }41  .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 2.5; }42 43  /* Toast */44  .toast {45    position: absolute;46    top: 120px;47    left: 60px;48    width: 960px;49    background: #1f1f1f;50    color: #fff;51    border-radius: 18px;52    padding: 34px 40px;53    font-size: 36px;54    box-shadow: 0 10px 24px rgba(0,0,0,0.35);55  }56 57  /* Hero image placeholder */58  .hero {59    position: absolute;60    top: 0;61    left: 0;62    width: 1080px;63    height: 1250px;64    background: #E0E0E0;65    border-bottom: 1px solid #BDBDBD;66    display: flex;67    align-items: center;68    justify-content: center;69    color: #757575;70    text-align: center;71    font-size: 34px;72    line-height: 1.4;73  }74 75  /* Play button overlay */76  .play-overlay {77    position: absolute;78    top: 485px;79    left: 50%;80    transform: translateX(-50%);81    width: 300px;82    height: 300px;83    border-radius: 50%;84    border: 12px solid rgba(255,255,255,0.92);85    display: flex;86    align-items: center;87    justify-content: center;88    box-shadow: 0 12px 28px rgba(0,0,0,0.35);89    background: rgba(255,255,255,0.06);90  }91  .play-overlay svg { width: 150px; height: 150px; fill: #fff; }92 93  /* Content section (dark) */94  .content {95    position: absolute;96    top: 1250px;97    left: 0;98    width: 1080px;99    height: 1150px;100    background: #0a0a0a;101    color: #fff;102  }103  .title {104    font-family: Georgia, "Times New Roman", serif;105    font-size: 96px;106    line-height: 1.05;107    text-align: center;108    margin-top: 80px;109    margin-bottom: 30px;110  }111 112  /* Rating stars */113  .rating {114    display: flex;115    justify-content: center;116    align-items: center;117    gap: 14px;118    margin-top: 26px;119  }120  .star { width: 56px; height: 56px; position: relative; }121  .star svg { width: 56px; height: 56px; }122  .star .base path { fill: #2c2c2c; }123  .star.full .fill path { fill: #FF7A39; }124  .star.half .fill { position: absolute; left: 0; top: 0; width: 28px; height: 56px; overflow: hidden; }125  .star.half .fill svg path { fill: #FF7A39; }126 127  .ratings-text {128    text-align: center;129    color: #bdbdbd;130    font-size: 36px;131    margin-top: 22px;132  }133 134  /* Actions row */135  .actions {136    margin-top: 70px;137    display: flex;138    justify-content: space-around;139    align-items: center;140    padding: 0 60px;141  }142  .action {143    display: flex;144    align-items: center;145    gap: 20px;146    color: #fff;147    font-size: 40px;148  }149  .action svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 3.5; }150  .action .count { font-weight: 600; }151 152  /* Contributor section */153  .contributor {154    margin-top: 80px;155    border-top: 1px solid #1f1f1f;156    padding: 40px 60px;157    display: flex;158    align-items: center;159    gap: 30px;160  }161  .avatar {162    width: 140px;163    height: 140px;164    border-radius: 50%;165    background: #E0E0E0;166    border: 1px solid #BDBDBD;167    display: flex;168    align-items: center;169    justify-content: center;170    color: #757575;171    font-size: 28px;172  }173  .contributor-text .name {174    font-size: 46px;175    font-weight: 700;176    margin-bottom: 8px;177  }178  .contributor-text .role {179    font-size: 36px;180    color: #bdbdbd;181  }182 183  /* Home indicator */184  .home-indicator {185    position: absolute;186    bottom: 28px;187    left: 50%;188    transform: translateX(-50%);189    width: 420px;190    height: 12px;191    background: #cfcfcf;192    border-radius: 10px;193    opacity: 0.8;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status bar -->201  <div class="status-bar">202    <div class="status-left">203      <div>8:16</div>204      <div class="status-icons">205        <!-- Cloud icon -->206        <svg viewBox="0 0 24 24">207          <path d="M7 16h9.5a3.5 3.5 0 0 0 0-7c-.5 0-.9.1-1.3.2A5.5 5.5 0 0 0 5.5 10c-2.2 0-3.5 1.6-3.5 3.2A2.8 2.8 0 0 0 4.8 16H7z" />208        </svg>209        <!-- Wifi icon -->210        <svg viewBox="0 0 24 24">211          <path d="M2.5 9.5c5-4.5 14-4.5 19 0M5 12.5c3.6-3.2 10.4-3.2 14 0M8 15.5c2.2-2 6-2 8.1.1M12 19.5l2.3-2.3-2.3 2.3-2.3-2.3L12 19.5z"/>212        </svg>213      </div>214    </div>215    <div class="status-icons">216      <!-- Signal icon -->217      <svg viewBox="0 0 24 24">218        <path d="M4 20h2V8H4v12zm5 0h2V5H9v15zm5 0h2V2h-2v18zm5 0h2V12h-2v8z"/>219      </svg>220      <!-- Battery icon -->221      <svg viewBox="0 0 28 24">222        <rect x="1" y="5" width="22" height="14" rx="2" />223        <rect x="24" y="9" width="3" height="6" rx="1" />224        <rect x="4" y="8" width="16" height="8" fill="#fff" stroke="none"/>225      </svg>226    </div>227  </div>228 229  <!-- Toast -->230  <div class="toast">Hooray! You've successfully saved your recipe!</div>231 232  <!-- Hero image -->233  <div class="hero">[IMG: Kitchen scene with bowl of ratatouille]</div>234 235  <!-- Play overlay -->236  <div class="play-overlay">237    <svg viewBox="0 0 24 24">238      <polygon points="8,5 20,12 8,19" />239    </svg>240  </div>241 242  <!-- Dark content section -->243  <div class="content">244    <div class="title">Classic Ratatouille</div>245 246    <!-- Rating stars -->247    <div class="rating">248      <!-- Star template: base (gray) + fill (orange) -->249      <div class="star full">250        <svg class="base" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>251        <svg class="fill" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>252      </div>253      <div class="star full">254        <svg class="base" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>255        <svg class="fill" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>256      </div>257      <div class="star full">258        <svg class="base" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>259        <svg class="fill" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>260      </div>261      <div class="star full">262        <svg class="base" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>263        <svg class="fill" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>264      </div>265      <div class="star half">266        <svg class="base" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>267        <div class="fill">268          <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 2z"/></svg>269        </div>270      </div>271    </div>272 273    <div class="ratings-text">Based on 62 ratings</div>274 275    <!-- Actions row -->276    <div class="actions">277      <div class="action">278        <!-- Heart icon -->279        <svg viewBox="0 0 24 24">280          <path d="M12 20s-7-4.5-9-8.2C1.5 9 3 6 6 6c2 0 3.3 1.1 4 2.2C10.7 7.1 12 6 14 6c3 0 4.5 3 3 5.8C19 15.5 12 20 12 20z"/>281        </svg>282        <span class="count">11181</span>283      </div>284      <div class="action">285        <!-- Bookmark icon -->286        <svg viewBox="0 0 24 24">287          <path d="M6 3h12v18l-6-3-6 3V3z"/>288        </svg>289        <span>Save</span>290      </div>291      <div class="action">292        <!-- Share icon -->293        <svg viewBox="0 0 24 24">294          <circle cx="5" cy="12" r="3"></circle>295          <circle cx="19" cy="5" r="3"></circle>296          <circle cx="19" cy="19" r="3"></circle>297          <path d="M7.5 11l8-4M7.5 13l8 4" />298        </svg>299        <span>Share</span>300      </div>301    </div>302 303    <!-- Contributor -->304    <div class="contributor">305      <div class="avatar">[IMG: User Avatar]</div>306      <div class="contributor-text">307        <div class="name">Nina</div>308        <div class="role">Contributor</div>309      </div>310    </div>311  </div>312 313  <!-- Home indicator -->314  <div class="home-indicator"></div>315 316</div>317</body>318</html>