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>Recipe - Fennel Pizza</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19    font-family: "Helvetica Neue", Arial, sans-serif;20    color: #222;21  }22 23  /* Status bar */24  .status-bar {25    height: 110px;26    background: #ffffff;27    display: flex;28    align-items: center;29    padding: 0 40px;30    box-sizing: border-box;31    color: #555;32    font-size: 36px;33  }34  .status-left {35    flex: 1;36    font-weight: 600;37  }38  .status-right {39    display: flex;40    gap: 26px;41    align-items: center;42  }43  .status-icon {44    width: 36px;45    height: 36px;46  }47  .dot {48    font-size: 42px;49    color: #888;50  }51 52  /* Hero image */53  .hero {54    position: relative;55    width: 100%;56    height: 1080px;57    overflow: hidden;58  }59  .image-placeholder {60    width: 100%;61    height: 100%;62    background: #E0E0E0;63    border: 1px solid #BDBDBD;64    display: flex;65    justify-content: center;66    align-items: center;67    color: #757575;68    font-size: 38px;69    letter-spacing: 0.5px;70  }71 72  /* Back button */73  .back-btn {74    position: absolute;75    top: 160px;76    left: 40px;77    width: 96px;78    height: 96px;79    border-radius: 48px;80    background: rgba(0,0,0,0.65);81    display: flex;82    align-items: center;83    justify-content: center;84  }85  .back-btn svg {86    width: 52px;87    height: 52px;88  }89 90  /* Card overlay */91  .recipe-card {92    position: absolute;93    left: 40px;94    right: 40px;95    bottom: -40px;96    background: #ffffff;97    border-radius: 40px;98    box-shadow: 0 10px 30px rgba(0,0,0,0.18);99    padding: 56px;100  }101  .label {102    text-align: center;103    font-size: 30px;104    letter-spacing: 3px;105    color: #777;106    margin-bottom: 24px;107  }108  .title {109    text-align: center;110    font-size: 68px;111    font-weight: 800;112    margin: 6px 0 24px;113  }114  .byline {115    text-align: center;116    font-size: 38px;117    color: #777;118  }119  .byline b {120    color: #000;121    margin-right: 8px;122    font-weight: 700;123  }124 125  /* Content placeholders */126  .content {127    margin-top: 140px;128    padding: 0 40px;129  }130  .pill {131    height: 180px;132    border-radius: 90px;133    background: linear-gradient(to right, #f5f5f5, #dedede);134    border: 1px solid #e2e2e2;135    box-shadow: 0 8px 16px rgba(0,0,0,0.06);136    margin-bottom: 120px;137    padding: 0 32px;138    display: flex;139    align-items: center;140    color: #9e9e9e;141    font-size: 40px;142  }143 144  /* Bottom nav area */145  .bottom-area {146    position: absolute;147    bottom: 0;148    left: 0;149    right: 0;150    height: 160px;151    background: #000000;152    display: flex;153    align-items: center;154    justify-content: center;155  }156  .home-indicator {157    width: 320px;158    height: 16px;159    border-radius: 8px;160    background: #eaeaea;161    opacity: 0.9;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Top status bar -->169  <div class="status-bar">170    <div class="status-left">8:47</div>171    <div class="status-right">172      <!-- Simple inline SVG icons -->173      <svg class="status-icon" viewBox="0 0 24 24" fill="#777" xmlns="http://www.w3.org/2000/svg">174        <path d="M4 4h16v12H7l-3 3V4z"/>175      </svg>176      <svg class="status-icon" viewBox="0 0 24 24" fill="#777" xmlns="http://www.w3.org/2000/svg">177        <path d="M12 3a6 6 0 016 6v5l2 2v1H4v-1l2-2V9a6 6 0 016-6zm0 18a2 2 0 002-2H10a2 2 0 002 2z"/>178      </svg>179      <svg class="status-icon" viewBox="0 0 24 24" fill="#777" xmlns="http://www.w3.org/2000/svg">180        <path d="M6 2h12v20l-6-3-6 3V2z"/>181      </svg>182      <span class="dot">•</span>183      <svg class="status-icon" viewBox="0 0 24 24" fill="#777" xmlns="http://www.w3.org/2000/svg">184        <path d="M12 20a2 2 0 100-4 2 2 0 000 4zm-4-5a3 3 0 116 0H8zm-4-4a5 5 0 0110 0H4zm-2-4a7 7 0 0114 0H2z"/>185      </svg>186      <svg class="status-icon" viewBox="0 0 24 24" fill="#777" xmlns="http://www.w3.org/2000/svg">187        <path d="M5 3h14v2H5V3zm3 4h8l-1 11H9L8 7zm2 13h4v2h-4v-2z"/>188      </svg>189    </div>190  </div>191 192  <!-- Hero image with back button and overlay card -->193  <div class="hero">194    <div class="image-placeholder">[IMG: Fennel pizza in skillet]</div>195 196    <div class="back-btn">197      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">198        <path d="M15 6L9 12l6 6" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>199      </svg>200    </div>201 202    <div class="recipe-card">203      <div class="label">RECIPE</div>204      <div class="title">Fennel Pizza</div>205      <div class="byline"><b>by</b> De Ma Cuisine</div>206    </div>207  </div>208 209  <!-- Content placeholders below card -->210  <div class="content">211    <div class="pill">[Section Placeholder]</div>212    <div class="pill">[Section Placeholder]</div>213  </div>214 215  <!-- Bottom area -->216  <div class="bottom-area">217    <div class="home-indicator"></div>218  </div>219 220</div>221</body>222</html>