GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe Step UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #B0183E; /* deep raspberry header */14  }15 16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 210px;23    padding: 40px 44px;24    box-sizing: border-box;25    color: #FFFFFF;26  }27  .status-left {28    position: absolute;29    left: 44px;30    top: 40px;31    font-size: 48px;32    font-weight: 600;33    letter-spacing: 0.5px;34  }35  .status-right {36    position: absolute;37    right: 44px;38    top: 40px;39    display: flex;40    align-items: center;41    gap: 22px;42  }43  .status-right span {44    font-size: 40px;45    font-weight: 600;46  }47  .icon { display: inline-block; }48 49  /* Main dark panel */50  .panel {51    position: absolute;52    top: 150px;53    left: 0;54    width: 1080px;55    height: 2100px;56    background: #2C2D31;57    border-top-left-radius: 64px;58    border-top-right-radius: 64px;59    box-sizing: border-box;60  }61 62  /* Tabs/header inside panel */63  .tabs {64    display: flex;65    justify-content: space-between;66    align-items: center;67    padding: 70px 56px 22px 56px;68    color: #ECEFF1;69  }70  .tabs .left {71    font-size: 44px;72    font-weight: 700;73    letter-spacing: 0.4px;74  }75  .tabs .right {76    font-size: 44px;77    font-weight: 800;78    color: #E58A96;79  }80 81  .progress {82    height: 10px;83    margin: 0 0 30px 0;84    background: #1E1F23;85  }86  .progress .bar {87    width: 120px; /* small progress */88    height: 10px;89    background: #E58A96;90  }91 92  /* Content text */93  .content {94    padding: 60px 64px 0 64px;95    color: #E6E7EA;96    line-height: 88px;97    font-size: 64px;98    font-weight: 500;99  }100 101  /* Bottom gesture area */102  .gesture-area {103    position: absolute;104    bottom: 0;105    left: 0;106    width: 1080px;107    height: 160px;108    background: #000000;109  }110  .gesture-pill {111    position: absolute;112    bottom: 36px;113    left: 50%;114    transform: translateX(-50%);115    width: 220px;116    height: 18px;117    background: #E8E8E8;118    border-radius: 12px;119  }120</style>121</head>122<body>123<div id="render-target">124  <!-- Status bar -->125  <div class="statusbar">126    <div class="status-left">7:48</div>127    <div class="status-right">128      <!-- WiFi Icon -->129      <svg class="icon" width="56" height="48" viewBox="0 0 56 48" fill="none" xmlns="http://www.w3.org/2000/svg">130        <path d="M6 16 C 18 6 38 6 50 16" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>131        <path d="M12 24 C 22 16 34 16 44 24" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>132        <path d="M18 32 C 24 28 32 28 38 32" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>133        <circle cx="28" cy="38" r="3.5" fill="#FFFFFF"/>134      </svg>135      <!-- Battery Icon -->136      <svg class="icon" width="64" height="40" viewBox="0 0 64 40" xmlns="http://www.w3.org/2000/svg">137        <rect x="2" y="8" width="52" height="24" rx="4" stroke="#FFFFFF" stroke-width="4" fill="none"/>138        <rect x="56" y="14" width="6" height="12" rx="2" fill="#FFFFFF"/>139        <rect x="6" y="12" width="44" height="16" rx="2" fill="#FFFFFF"/>140      </svg>141      <span>100%</span>142    </div>143  </div>144 145  <!-- Main panel -->146  <div class="panel">147    <div class="tabs">148      <div class="left">1 of 10</div>149      <div class="right">Ingredients</div>150    </div>151    <div class="progress">152      <div class="bar"></div>153    </div>154 155    <div class="content">156      Preheat the oven to 350ºF (180ºC). Grease a 9 x 13-inch<br>157      baking dish with nonstick spray.158    </div>159  </div>160 161  <!-- Bottom gesture bar -->162  <div class="gesture-area">163    <div class="gesture-pill"></div>164  </div>165</div>166</body>167</html>