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 Step UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2B2D31;15  }16 17  /* Top status bar */18  .status-bar {19    position: relative;20    height: 220px;21    background: #B0124E;22    color: #FFFFFF;23    padding: 36px 48px 0 48px;24    box-sizing: border-box;25  }26  .status-row {27    display: flex;28    align-items: center;29    justify-content: space-between;30  }31  .time {32    font-size: 46px;33    font-weight: 600;34    letter-spacing: 0.5px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 18px;40    font-size: 34px;41    font-weight: 600;42  }43  .status-icons svg {44    display: block;45  }46 47  /* Header card */48  .header-card {49    position: relative;50    margin-top: -30px;51    background: #1F2126;52    color: #fff;53    height: 220px;54    border-radius: 36px 36px 0 0;55    padding: 40px 48px;56    box-sizing: border-box;57  }58  .header-row {59    display: flex;60    align-items: center;61    justify-content: space-between;62  }63  .step-count {64    font-size: 48px;65    font-weight: 800;66    letter-spacing: 1px;67  }68  .section-title {69    font-size: 46px;70    font-weight: 800;71    color: #F08FA0;72  }73  .underline {74    position: absolute;75    left: 0;76    bottom: 0;77    height: 8px;78    width: 220px;79    background: #B0124E;80    border-radius: 0 6px 0 0;81  }82 83  /* Media/Image Area */84  .media-area {85    width: 100%;86    height: 900px;87    background: #E0E0E0;88    border-top: 1px solid #BDBDBD;89    border-bottom: 1px solid #BDBDBD;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #757575;94    font-size: 36px;95    position: relative;96    box-sizing: border-box;97  }98  .media-label {99    padding: 16px 24px;100    background: rgba(255,255,255,0.75);101    border-radius: 8px;102    border: 1px solid #BDBDBD;103  }104  .overlay-text {105    position: absolute;106    top: 24px;107    left: 24px;108    color: #2E3136;109    font-weight: 800;110    font-size: 40px;111    letter-spacing: 0.5px;112    display: flex;113    flex-direction: column;114    line-height: 1.1;115  }116  .overlay-text small {117    font-weight: 600;118    font-size: 32px;119    color: #565A61;120  }121 122  /* Description area */123  .description {124    background: #2B2D31;125    color: #FFFFFF;126    padding: 48px;127    font-size: 44px;128    line-height: 64px;129    box-sizing: border-box;130  }131 132  /* Bottom gesture bar */133  .gesture-bar {134    position: absolute;135    bottom: 36px;136    left: 50%;137    transform: translateX(-50%);138    width: 360px;139    height: 12px;140    background: #E6E6E6;141    border-radius: 12px;142    opacity: 0.9;143  }144</style>145</head>146<body>147<div id="render-target">148  <!-- Status Bar -->149  <div class="status-bar">150    <div class="status-row">151      <div class="time">7:51</div>152      <div class="status-icons">153        <!-- Wi-Fi Icon -->154        <svg width="44" height="44" viewBox="0 0 24 24">155          <g fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round">156            <path d="M3 9c4.5-4 13.5-4 18 0"/>157            <path d="M6 12c3-2.5 9-2.5 12 0"/>158            <path d="M9 15c1.5-1 4.5-1 6 0"/>159            <circle cx="12" cy="18" r="1.5" fill="#FFFFFF" stroke="none"/>160          </g>161        </svg>162        <!-- Battery Icon -->163        <svg width="48" height="48" viewBox="0 0 28 18">164          <rect x="1" y="2" width="22" height="14" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>165          <rect x="3" y="4" width="12" height="10" rx="1" ry="1" fill="#FFFFFF"/>166          <rect x="24" y="6" width="3" height="6" rx="1" ry="1" fill="#FFFFFF"/>167        </svg>168        <span>100%</span>169      </div>170    </div>171  </div>172 173  <!-- Section Header -->174  <div class="header-card">175    <div class="header-row">176      <div class="step-count">2 of 10</div>177      <div class="section-title">Ingredients</div>178    </div>179    <div class="underline"></div>180  </div>181 182  <!-- Media/Image Placeholder -->183  <div class="media-area">184    <div class="overlay-text">185      <span>SALT</span>186      <small>1 TSP</small>187    </div>188    <div class="media-label">[IMG: Mixing ingredients in glass bowl]</div>189  </div>190 191  <!-- Description Text -->192  <div class="description">193    Make the cinnamon topping: In a medium bowl, mix together the butter, brown sugar, salt, flour, McCormick® Ground Cinnamon, and pecans. Microwave for 30 seconds.194  </div>195 196  <!-- Bottom Gesture Bar -->197  <div class="gesture-bar"></div>198</div>199</body>200</html>