GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Caramel Ice Cream UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    border-radius: 0;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #0f0f0f;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29  }30  .status-time {31    font-size: 36px;32    font-weight: 600;33    letter-spacing: 1px;34  }35  .status-icons {36    margin-left: auto;37    display: flex;38    gap: 24px;39    align-items: center;40  }41  .status-icons svg { width: 34px; height: 34px; fill: #fff; }42 43  /* Hero image area */44  .hero {45    position: absolute;46    top: 110px;47    left: 0;48    width: 1080px;49    height: 980px;50    background: #E0E0E0;51    border-bottom: 1px solid #BDBDBD;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #757575;56    font-size: 32px;57  }58 59  /* Top action icons over hero */60  .top-actions {61    position: absolute;62    top: 160px;63    left: 40px;64    right: 40px;65    display: flex;66    align-items: center;67    justify-content: space-between;68    pointer-events: none;69  }70  .top-left, .top-right { display: flex; gap: 36px; align-items: center; }71  .top-actions svg {72    width: 54px; height: 54px; fill: none; stroke: #ffffff; stroke-width: 3.5;73    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));74    pointer-events: auto;75  }76 77  /* Overlay card */78  .info-card {79    position: absolute;80    left: 30px;81    right: 30px;82    top: 880px;83    background: #ffffff;84    border-radius: 46px;85    box-shadow: 0 10px 24px rgba(0,0,0,0.12);86    padding: 40px;87    box-sizing: border-box;88  }89  .chips {90    display: flex;91    justify-content: space-between;92    margin-bottom: 24px;93    padding: 0 10px;94  }95  .chip {96    background: #F4F4F6;97    color: #5f5f65;98    font-size: 30px;99    padding: 16px 28px;100    border-radius: 26px;101    border: 1px solid #e6e6ea;102  }103  .title {104    text-align: center;105    font-size: 56px;106    font-weight: 700;107    color: #222;108    margin: 8px 0 24px;109  }110  .byline {111    font-size: 32px;112    color: #76777a;113    padding-left: 10px;114  }115  .byline strong { color: #222; font-weight: 600; }116 117  /* Ratings section */118  .ratings-wrap {119    position: absolute;120    top: 1210px;121    left: 40px;122    right: 40px;123    display: flex;124    align-items: center;125    gap: 22px;126    color: #222;127  }128  .rating-number { font-size: 48px; font-weight: 700; }129  .stars { display: flex; gap: 8px; align-items: center; }130  .stars svg { width: 44px; height: 44px; fill: #F59D3D; }131  .ratings-count { font-size: 32px; color: #6a6a70; margin-left: auto; }132 133  /* Stat boxes */134  .stats {135    position: absolute;136    top: 1340px;137    left: 28px;138    right: 28px;139    display: flex;140    gap: 32px;141  }142  .stat-box {143    flex: 1;144    border: 2px solid #e8e8ec;145    border-radius: 32px;146    padding: 46px 24px;147    box-sizing: border-box;148    text-align: center;149    color: #222;150    background: #fff;151  }152  .stat-icon {153    width: 84px; height: 84px; margin: 0 auto 22px;154  }155  .stat-title { font-size: 30px; color: #7a7a80; margin-bottom: 8px; }156  .stat-value { font-size: 38px; font-weight: 700; }157 158  /* Description */159  .description {160    position: absolute;161    top: 1640px;162    left: 28px;163    right: 28px;164    color: #3a3a40;165    font-size: 36px;166    line-height: 1.55;167  }168  .highlight { font-weight: 700; }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Status bar -->175  <div class="status-bar">176    <div class="status-time">10:56</div>177    <div class="status-icons">178      <!-- WiFi icon -->179      <svg viewBox="0 0 24 24">180        <path d="M2 8c5-4 15-4 20 0M6 12c3-2 9-2 12 0M10 16c1-.8 3-.8 4 0M12 20a1 1 0 0 0 0-2 1 1 0 0 0 0 2Z" stroke-linecap="round" stroke-linejoin="round"/>181      </svg>182      <!-- Battery icon -->183      <svg viewBox="0 0 26 24">184        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2.5"/>185        <rect x="4" y="8" width="12" height="8" fill="#fff"/>186        <rect x="21" y="9" width="3" height="6" fill="#fff"/>187      </svg>188    </div>189  </div>190 191  <!-- Hero image -->192  <div class="hero">[IMG: Caramel ice cream scoop]</div>193 194  <!-- On-hero action icons -->195  <div class="top-actions">196    <div class="top-left">197      <!-- Back arrow -->198      <svg viewBox="0 0 24 24">199        <path d="M15 5L7 12l8 7" stroke-linecap="round" stroke-linejoin="round"/>200      </svg>201    </div>202    <div class="top-right">203      <!-- Share icon -->204      <svg viewBox="0 0 24 24">205        <circle cx="18" cy="6" r="3"/>206        <circle cx="6" cy="12" r="3"/>207        <circle cx="18" cy="18" r="3"/>208        <path d="M8.8 11.1L15.2 7.9M8.8 12.9L15.2 16.1" />209      </svg>210      <!-- Heart icon -->211      <svg viewBox="0 0 24 24">212        <path d="M12 21s-7-5.1-9-8.7C1.1 9.1 3.2 6 6.5 6c2.1 0 3.4 1.1 5.5 3.3C14.1 7.1 15.4 6 17.5 6c3.3 0 5.4 3.1 3.5 6.3C19 15.9 12 21 12 21z"/>213      </svg>214      <!-- Sparkle/star icon -->215      <svg viewBox="0 0 24 24">216        <path d="M12 3l2.2 5.5L20 9l-5 3.9L16.3 19 12 15.9 7.7 19 9 12.9 4 9l5.8-.5L12 3z"/>217      </svg>218    </div>219  </div>220 221  <!-- Info card -->222  <div class="info-card">223    <div class="chips">224      <div class="chip">Dessert</div>225      <div class="chip">All</div>226      <div class="chip">All</div>227    </div>228    <div class="title">Caramel ice cream</div>229    <div class="byline">BY : <strong>oguzhan</strong></div>230  </div>231 232  <!-- Ratings -->233  <div class="ratings-wrap">234    <div class="rating-number">5</div>235    <div class="stars">236      <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.1 4.8 1.3 7.1L12 18l-6.3 3.3 1.3-7.1L2 9.4l7-1z"/></svg>237      <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.1 4.8 1.3 7.1L12 18l-6.3 3.3 1.3-7.1L2 9.4l7-1z"/></svg>238      <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.1 4.8 1.3 7.1L12 18l-6.3 3.3 1.3-7.1L2 9.4l7-1z"/></svg>239      <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.1 4.8 1.3 7.1L12 18l-6.3 3.3 1.3-7.1L2 9.4l7-1z"/></svg>240      <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.4 7 1-5.1 4.8 1.3 7.1L12 18l-6.3 3.3 1.3-7.1L2 9.4l7-1z"/></svg>241    </div>242    <div class="ratings-count">(0 Ratings)</div>243  </div>244 245  <!-- Stats boxes -->246  <div class="stats">247    <div class="stat-box">248      <svg class="stat-icon" viewBox="0 0 24 24">249        <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"/>250        <path d="M12 6v6l4 3" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>251      </svg>252      <div class="stat-title">TIME</div>253      <div class="stat-value">45 MIN</div>254    </div>255    <div class="stat-box">256      <svg class="stat-icon" viewBox="0 0 24 24">257        <path d="M7 20h10M9 20c0-4 6-4 6 0M9 10h6M10 6h4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>258        <circle cx="12" cy="8" r="2" fill="#777"/>259      </svg>260      <div class="stat-title">SERVES</div>261      <div class="stat-value">6 PERS</div>262    </div>263    <div class="stat-box">264      <svg class="stat-icon" viewBox="0 0 24 24">265        <path d="M12 3c3 3 3 6 0 9-3-3-3-6 0-9zm-6 8c2 2 2 4 0 6-2-2-2-4 0-6zm12 0c2 2 2 4 0 6-2-2-2-4 0-6z" fill="#777"/>266      </svg>267      <div class="stat-title">ENERGY</div>268      <div class="stat-value">481 CAL</div>269    </div>270  </div>271 272  <!-- Description -->273  <div class="description">274    You can never have too many dessert recipes, so give Caramel ice cream a try. One portion of this dish contains roughly275    <span class="highlight">6g of protein</span>, <span class="highlight">32g of fat</span>, and a total of276    <span class="highlight">481 calories</span>. This recipe serves 6 and costs 72 cents per serving. It can be enjoyed any time,277    but it is especially good for <span class="highlight">Summer</span>. This recipe from Foodista requires eggs, heavy cream,278    powdered sugar, and vanilla extract. It is a good option if you're following...279  </div>280 281</div>282</body>283</html>