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>Italian Recipes List</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F5F7;15  }16 17  /* Status bar (dark) */18  .status-bar {19    height: 120px;20    background: #3A3A3C;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 40px;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .status-spacer { flex: 1; }29 30  /* App bar */31  .app-bar {32    height: 150px;33    background: #ffffff;34    display: flex;35    align-items: center;36    padding: 0 36px;37    box-shadow: 0 1px 0 rgba(0,0,0,0.06);38  }39  .back-icon {40    width: 64px;41    height: 64px;42    margin-right: 24px;43  }44  .title {45    font-size: 56px;46    font-weight: 700;47    color: #1E1E1F;48  }49 50  /* List area */51  .list {52    padding: 32px 36px 0 36px;53  }54  .card {55    position: relative;56    height: 520px;57    border-radius: 28px;58    overflow: hidden;59    margin-bottom: 44px;60    background: #E0E0E0;61    border: 1px solid #BDBDBD;62  }63  .img-label {64    position: absolute;65    top: 18px;66    right: 18px;67    background: rgba(255,255,255,0.75);68    color: #616161;69    font-size: 24px;70    padding: 6px 12px;71    border-radius: 10px;72    border: 1px solid #BDBDBD;73  }74  .darken {75    position: absolute;76    inset: 0;77    background: linear-gradient( to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.05) 100% );78    pointer-events: none;79  }80  .card-content {81    position: absolute;82    left: 36px;83    bottom: 34px;84    right: 150px;85    color: #fff;86  }87  .rating {88    display: flex;89    gap: 8px;90    margin-bottom: 12px;91    align-items: center;92  }93  .star svg { width: 26px; height: 26px; display: block; }94  .title-lg {95    font-size: 54px;96    font-weight: 800;97    letter-spacing: 0.2px;98    margin: 6px 0 12px 0;99  }100  .subtitle {101    font-size: 32px;102    letter-spacing: 3px;103    color: rgba(255,255,255,0.85);104  }105  .fab {106    position: absolute;107    right: 34px;108    bottom: 34px;109    width: 96px;110    height: 96px;111    border-radius: 50%;112    background: #1EB4B4;113    box-shadow: 0 10px 20px rgba(0,0,0,0.25);114    display: flex;115    align-items: center;116    justify-content: center;117  }118  .fab svg { width: 46px; height: 46px; }119 120  /* Bottom gesture/nav area */121  .bottom-area {122    position: absolute;123    left: 0;124    right: 0;125    bottom: 0;126    height: 170px;127    background: #1F1F1F;128  }129  .handle {130    position: absolute;131    top: 18px;132    left: 50%;133    transform: translateX(-50%);134    width: 220px;135    height: 14px;136    background: #C7C7C7;137    border-radius: 7px;138    opacity: 0.9;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status bar -->146  <div class="status-bar">147    6:13148    <div class="status-spacer"></div>149    •150  </div>151 152  <!-- App bar -->153  <div class="app-bar">154    <div class="back-icon">155      <svg viewBox="0 0 24 24" fill="none">156        <path d="M15.5 4L7 12l8.5 8" stroke="#1E1E1F" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>157      </svg>158    </div>159    <div class="title">Italian</div>160  </div>161 162  <!-- List content -->163  <div class="list">164    <!-- Card 1 -->165    <div class="card">166      <div class="img-label">[IMG: Bruschetta tray]</div>167      <div class="darken"></div>168      <div class="card-content">169        <div class="rating">170          <span class="star">171            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>172          </span>173          <span class="star">174            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>175          </span>176          <span class="star">177            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>178          </span>179          <span class="star">180            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>181          </span>182          <span class="star">183            <svg viewBox="0 0 24 24"><path fill="#CFCFCF" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>184          </span>185        </div>186        <div class="title-lg">Bruschetta</div>187        <div class="subtitle">SUMPTUOUS LIVING</div>188      </div>189      <div class="fab" aria-label="Add">190        <svg viewBox="0 0 24 24" fill="none">191          <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3.2" stroke-linecap="round"/>192        </svg>193      </div>194    </div>195 196    <!-- Card 2 -->197    <div class="card">198      <div class="img-label">[IMG: Bowl of tomato bruschetta]</div>199      <div class="darken"></div>200      <div class="card-content">201        <div class="rating">202          <span class="star">203            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>204          </span>205          <span class="star">206            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>207          </span>208          <span class="star">209            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>210          </span>211          <span class="star">212            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>213          </span>214          <span class="star">215            <svg viewBox="0 0 24 24"><path fill="#CFCFCF" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>216          </span>217        </div>218        <div class="title-lg">Classic Bruschetta</div>219        <div class="subtitle">LA BELLA VITA CUCINA</div>220      </div>221      <div class="fab" aria-label="Add">222        <svg viewBox="0 0 24 24" fill="none">223          <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3.2" stroke-linecap="round"/>224        </svg>225      </div>226    </div>227 228    <!-- Card 3 -->229    <div class="card">230      <div class="img-label">[IMG: Baked ziti close-up]</div>231      <div class="darken"></div>232      <div class="card-content">233        <div class="rating">234          <span class="star">235            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>236          </span>237          <span class="star">238            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>239          </span>240          <span class="star">241            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>242          </span>243          <span class="star">244            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>245          </span>246          <span class="star">247            <svg viewBox="0 0 24 24"><path fill="#CFCFCF" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>248          </span>249        </div>250        <div class="title-lg">Baked Ziti</div>251        <div class="subtitle">AMUSING FOODIE</div>252      </div>253      <div class="fab" aria-label="Add">254        <svg viewBox="0 0 24 24" fill="none">255          <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3.2" stroke-linecap="round"/>256        </svg>257      </div>258    </div>259 260    <!-- Card 4 (partially visible near bottom like screenshot) -->261    <div class="card">262      <div class="img-label">[IMG: Tiramisu slice]</div>263      <div class="darken"></div>264      <div class="card-content">265        <div class="rating">266          <span class="star">267            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>268          </span>269          <span class="star">270            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>271          </span>272          <span class="star">273            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>274          </span>275          <span class="star">276            <svg viewBox="0 0 24 24"><path fill="#FF7A45" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>277          </span>278          <span class="star">279            <svg viewBox="0 0 24 24"><path fill="#CFCFCF" d="M12 2l2.9 5.9 6.1.9-4.4 4.3 1 6.1L12 16.9 6.4 19.2l1-6.1L3 8.8l6.1-.9z"/></svg>280          </span>281        </div>282        <div class="title-lg">Tiramisu</div>283        <div class="subtitle">CLASSIC DESSERT</div>284      </div>285      <div class="fab" aria-label="Add">286        <svg viewBox="0 0 24 24" fill="none">287          <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="3.2" stroke-linecap="round"/>288        </svg>289      </div>290    </div>291  </div>292 293  <!-- Bottom nav/gesture area -->294  <div class="bottom-area">295    <div class="handle"></div>296  </div>297 298</div>299</body>300</html>