GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Recipe - Ingredients & Instructions</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#f5f6f7;13    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;14    color:#111;15  }16 17  /* Top app bar */18  .top-bar {19    position:absolute; left:0; top:0; width:1080px; height:220px;20    background:#0b1325; color:#fff;21  }22  .status-row {23    height:72px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;24    opacity:0.95; font-size:36px; letter-spacing:0.5px;25  }26  .status-left { display:flex; align-items:center; gap:20px; }27  .status-right { display:flex; align-items:center; gap:26px; }28  .status-dot {29    width:18px; height:18px; background:#ffffff88; border-radius:50%;30  }31 32  .toolbar {33    height:148px; padding:0 30px; display:flex; align-items:center; justify-content:space-between;34    border-bottom:1px solid #18213a;35  }36  .toolbar-left, .toolbar-right { display:flex; align-items:center; gap:26px; }37  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }38  .icon-btn svg { width:48px; height:48px; }39 40  /* Content area */41  .content {42    position:absolute; left:0; top:220px; right:0; bottom:0;43    overflow-y:auto;44    padding:36px;45  }46 47  .card {48    background:#fff; border:1px solid #e3e3e3; border-radius:26px;49    box-shadow:0 1px 0 rgba(0,0,0,0.02);50    padding:18px 24px;51  }52  .ingredient-list { margin-top:6px; }53  .ing-item {54    display:flex; align-items:center; gap:30px;55    padding:30px 12px;56    border-bottom:1px solid #efefef;57  }58  .ing-item:last-child { border-bottom:none; }59  .ing-img {60    width:90px; height:90px; background:#E0E0E0; border:1px solid #BDBDBD;61    display:flex; align-items:center; justify-content:center;62    color:#757575; font-size:24px; border-radius:8px;63  }64  .ing-text { flex:1; }65  .ing-name { font-weight:700; font-size:40px; margin-bottom:8px; color:#111; }66  .ing-qty { font-size:32px; color:#9b9b9b; }67 68  .cta {69    margin:30px 12px 24px;70    height:120px; border-radius:22px;71    background:#bf6a33; color:#fff;72    display:flex; align-items:center; justify-content:center; gap:24px;73    font-size:34px; font-weight:700; letter-spacing:1px;74    border:3px solid #d07c45;75  }76  .cta svg { width:50px; height:50px; }77 78  .instruction-card {79    margin-top:40px;80    background:#fff; border:1px solid #e5e5e5; border-radius:26px;81    padding:36px 24px;82  }83  .inst-title { font-size:48px; font-weight:800; margin:6px 12px 20px; color:#222; }84  .inst-item {85    display:flex; gap:30px; align-items:flex-start;86    padding:36px 12px;87    border-top:1px solid #f0f0f0;88  }89  .inst-item:first-of-type { border-top:none; }90  .inst-num {91    width:80px; flex-shrink:0;92    font-weight:800; font-size:44px; color:#222;93  }94  .inst-text { font-size:36px; color:#333; line-height:1.4; }95 96  /* Bottom gesture bar mimic */97  .bottom-area {98    position:absolute; left:0; bottom:0; width:1080px; height:120px;99    background:#000;100    display:flex; align-items:center; justify-content:center;101  }102  .gesture-pill {103    width:240px; height:10px; background:#cfcfcf; border-radius:16px;104    opacity:0.95;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <div class="top-bar">112    <div class="status-row">113      <div class="status-left">114        <div>3:19</div>115        <div class="status-dot"></div>116        <div class="status-dot"></div>117      </div>118      <div class="status-right">119        <div class="status-dot"></div>120        <div class="status-dot"></div>121        <div class="status-dot"></div>122      </div>123    </div>124    <div class="toolbar">125      <div class="toolbar-left">126        <div class="icon-btn" aria-label="Back">127          <svg viewBox="0 0 24 24">128            <path d="M15 5L8 12l7 7" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>129          </svg>130        </div>131      </div>132      <div class="toolbar-right">133        <div class="icon-btn" aria-label="Share">134          <svg viewBox="0 0 24 24">135            <circle cx="6" cy="12" r="3" fill="none" stroke="#fff" stroke-width="2"/>136            <circle cx="18" cy="6" r="3" fill="none" stroke="#fff" stroke-width="2"/>137            <circle cx="18" cy="18" r="3" fill="none" stroke="#fff" stroke-width="2"/>138            <path d="M8.8 10.6l6.4-3.2M8.8 13.4l6.4 3.2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>139          </svg>140        </div>141        <div class="icon-btn" aria-label="Comments">142          <svg viewBox="0 0 24 24">143            <path d="M4 4h16v12H8l-4 4z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>144          </svg>145        </div>146        <div style="color:#fff; font-size:36px; margin-right:14px;">0</div>147      </div>148    </div>149  </div>150 151  <div class="content">152 153    <div class="card">154      <div class="ingredient-list">155        <div class="ing-item">156          <div class="ing-img">[IMG: Olive Oil]</div>157          <div class="ing-text">158            <div class="ing-name">Olive Oil</div>159            <div class="ing-qty">4 tbsp</div>160          </div>161        </div>162 163        <div class="ing-item">164          <div class="ing-img">[IMG: Olives]</div>165          <div class="ing-text">166            <div class="ing-name">Olives</div>167            <div class="ing-qty">½ cup</div>168          </div>169        </div>170 171        <div class="ing-item">172          <div class="ing-img">[IMG: Dried Rosemary]</div>173          <div class="ing-text">174            <div class="ing-name">