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    color: #222;14  }15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    background: #121212;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    font-size: 38px;29    letter-spacing: 0.5px;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  /* Hero image */38  .hero {39    position: absolute;40    top: 110px;41    left: 0;42    width: 1080px;43    height: 980px;44    background: #E0E0E0;45    border-bottom: 1px solid #BDBDBD;46    display: flex;47    align-items: center;48    justify-content: center;49    color: #757575;50    font-size: 36px;51  }52  /* Overlay toolbar on image */53  .overlay-toolbar {54    position: absolute;55    top: 150px;56    left: 32px;57    right: 32px;58    display: flex;59    justify-content: space-between;60    align-items: center;61    pointer-events: none;62  }63  .icon-btn {64    width: 72px;65    height: 72px;66    border-radius: 36px;67    display: flex;68    align-items: center;69    justify-content: center;70    pointer-events: auto;71  }72  .icon-row-right {73    display: flex;74    gap: 40px;75  }76  .icon-white { fill: #ffffff; }77  /* Card overlapping image bottom */78  .recipe-card {79    position: absolute;80    left: 40px;81    top: 930px;82    width: 1000px;83    background: #ffffff;84    border-radius: 48px;85    box-shadow: 0 8px 24px rgba(0,0,0,0.12);86    padding: 46px 48px;87    box-sizing: border-box;88  }89  .chips {90    display: flex;91    gap: 26px;92    margin-bottom: 26px;93  }94  .chip {95    padding: 16px 28px;96    border-radius: 26px;97    background: #F3F3F3;98    color: #666;99    font-size: 28px;100  }101  .title {102    font-size: 56px;103    font-weight: 700;104    margin: 16px 0 22px 0;105  }106  .byline {107    font-size: 30px;108    color: #666;109  }110  .byline b { color: #222; }111  /* Rating section */112  .rating-section {113    position: absolute;114    top: 1240px;115    left: 40px;116    width: 1000px;117    display: flex;118    align-items: center;119    gap: 20px;120    color: #222;121    font-size: 46px;122  }123  .stars {124    display: flex;125    gap: 8px;126    margin-left: 14px;127  }128  .rating-count {129    margin-left: 22px;130    color: #777;131    font-size: 34px;132  }133  /* Stat tiles */134  .stats-row {135    position: absolute;136    top: 1400px;137    left: 40px;138    width: 1000px;139    display: flex;140    justify-content: space-between;141  }142  .tile {143    width: 310px;144    height: 220px;145    border: 2px solid #E5E5E5;146    border-radius: 36px;147    display: flex;148    flex-direction: column;149    align-items: center;150    justify-content: center;151    gap: 24px;152  }153  .tile-label {154    font-size: 34px;155    color: #888;156  }157  .tile-value {158    font-size: 40px;159    font-weight: 700;160    color: #222;161  }162  /* Description text */163  .description {164    position: absolute;165    top: 1700px;166    left: 40px;167    width: 1000px;168    color: #4a4a4a;169    font-size: 38px;170    line-height: 1.55;171  }172  .description b { font-weight: 700; color: #000; }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status bar -->179  <div class="status-bar">180    10:57181    <div class="status-right">182      <!-- Simple Wi-Fi and Battery indicators -->183      <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#fff" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/></svg>184      <svg width="46" height="46" viewBox="0 0 24 24"><path fill="#fff" d="M16 5h2l1 2h2v10H3V7h13V5zm-1 4H5v6h10V9z"/></svg>185    </div>186  </div>187 188  <!-- Hero image placeholder -->189  <div class="hero">[IMG: Caramel ice cream close-up]</div>190 191  <!-- Overlay toolbar -->192  <div class="overlay-toolbar">193    <div class="icon-btn">194      <svg width="56" height="56" viewBox="0 0 24 24">195        <path class="icon-white" d="M15 18l-6-6 6-6v12z"></path>196      </svg>197    </div>198    <div class="icon-row-right">199      <div class="icon-btn">200        <svg width="56" height="56" viewBox="0 0 24 24">201          <path class="icon-white" d="M18 16v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H6v10h10v-3h2zM12 5l4 4h-3v5h-2V9H9l3-4z"></path>202        </svg>203      </div>204      <div class="icon-btn">205        <svg width="56" height="56" viewBox="0 0 24 24">206          <path class="icon-white" d="M12 21s-6-4.35-8.49-7.05C1.4 11.48 2.24 8.6 4.6 7.39c1.68-.88 3.75-.47 5.1.83l.3.29.3-.29c1.35-1.3 3.42-1.71 5.1-.83 2.36 1.21 3.2 4.09 1.09 6.56C18 16.65 12 21 12 21z"></path>207        </svg>208      </div>209      <div class="icon-btn">210        <svg width="56" height="56" viewBox="0 0 24 24">211          <path class="icon-white" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>212        </svg>213      </div>214    </div>215  </div>216 217  <!-- White card -->218  <div class="recipe-card">219    <div class="chips">220      <div class="chip">Dessert</div>221      <div class="chip">All</div>222      <div class="chip">All</div>223    </div>224    <div class="title">Caramel ice cream</div>225    <div class="byline">BY : <b>oguzhan</b></div>226  </div>227 228  <!-- Rating -->229  <div class="rating-section">230    <div>5</div>231    <div class="stars">232      <svg width="46" height="46" viewBox="0 0 24 24"><path fill="#F5A623" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>233      <svg width="46" height="46" viewBox="0 0 24 24"><path fill="#F5A623" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>234      <svg width="46" height="46" viewBox="0 0 24 24"><path fill="#F5A623" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>235      <svg width="46" height="46" viewBox="0 0 24 24"><path fill="#F5A623" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>236      <svg width="46" height="46" viewBox="0 0 24 24"><path fill="#F5A623" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>237    </div>238    <div class="rating-count">(0 Ratings)</div>239  </div>240 241  <!-- Stats tiles -->242  <div class="stats-row">243    <div class="tile">244      <svg width="68" height="68" viewBox="0 0 24 24">245        <path fill="#999" d="M12 8V4h2v4h4v2h-4v4h-2v-4H8V8h4zm0 13a9 9 0 1 1 0-18 9 9 0 0 1 0 18zm0-2a7 7 0 1 0 0-14 7 7 0 0 0 0 14z"/>246      </svg>247      <div class="tile-value">45 MIN</div>248    </div>249    <div class="tile">250      <svg width="68" height="68" viewBox="0 0 24 24">251        <path fill="#999" d="M12 6c3 0 5 2 5 5v8H7v-8c0-3 2-5 5-5zm0-2C8.69 4 6 6.69 6 10v10h12V10C18 6.69 15.31 4 12 4zm-3 6h6v2H9v-2z"/>252      </svg>253      <div class="tile-value">6 PERS</div>254    </div>255    <div class="tile">256      <svg width="68" height="68" viewBox="0 0 24 24">257        <path fill="#999" d="M12 3c2 3 3 5 3 7 0 2-1.5 3.5-3 3.5S9 12 9 10c0-2 1-4 3-7zm0 13c3 0 5 2 5 5H7c0-3 2-5 5-5z"/>258      </svg>259      <div class="tile-value">481 CAL</div>260    </div>261  </div>262 263  <!-- Description -->264  <div class="description">265    You can never have too many dessert recipes, so give Caramel ice cream a try. One portion of this dish contains roughly <b>6g of protein</b>, <b>32g of fat</b>, and a total of <b>481 calories</b>. This recipe serves 6 and costs 72 cents per serving. It can be enjoyed any time, but it is especially good for <b>Summer</b>. This recipe from Foodista requires eggs, heavy cream, powdered sugar, and vanilla extract. It is a good option if you're following...266  </div>267 268</div>269</body>270</html>