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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0; height: 88px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 40px; font-weight: 600; font-size: 36px; color: #333;19  }20  .status-icons { display: flex; align-items: center; gap: 22px; }21  .tiny-icon svg { width: 34px; height: 34px; fill: #555; }22 23  /* Header */24  .app-header {25    position: absolute; top: 88px; left: 0; right: 0; height: 124px;26    display: flex; align-items: center; justify-content: space-between;27    padding: 0 36px; background: #fff;28  }29  .avatar {30    width: 64px; height: 64px; border-radius: 50%;31    background: #F0F0F0; border: 1px solid #D0D0D0;32    display: flex; align-items: center; justify-content: center; color: #9E9E9E; font-size: 24px;33  }34  .header-actions { display: flex; align-items: center; gap: 18px; }35  .pill {36    display: flex; align-items: center; gap: 14px;37    border: 2px solid #111; border-radius: 32px; padding: 12px 22px;38    font-weight: 600; font-size: 28px; color: #111; background: #fff;39  }40  .pill.dark {41    background: #000; color: #fff; border-color: #000;42  }43  .pill svg { width: 34px; height: 34px; }44 45  /* Featured card */46  .card {47    position: absolute; left: 36px; right: 36px; top: 240px;48    background: #fff; border-radius: 36px; box-shadow: 0 10px 24px rgba(0,0,0,0.12);49    overflow: hidden;50  }51  .card-img {52    height: 520px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;53    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; font-weight: 600;54    position: relative;55  }56  .badge-time {57    position: absolute; bottom: 20px; left: 24px;58    background: rgba(0,0,0,0.7); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 28px; font-weight: 600;59  }60  .card-body { padding: 26px 32px 34px; }61  .rating { color: #FFC107; font-size: 32px; letter-spacing: 2px; }62  .recipe-title { margin: 18px 0 28px; font-size: 44px; line-height: 1.2; font-weight: 700; color: #111; }63  .outline-btn {64    display: flex; align-items: center; justify-content: center; gap: 16px;65    height: 96px; border: 3px solid #111; border-radius: 48px; font-size: 32px; font-weight: 700; color: #111;66  }67  .outline-btn svg { width: 36px; height: 36px; }68 69  /* Section title */70  .section-title {71    position: absolute; left: 36px; top: 990px; font-size: 52px; font-weight: 800;72  }73 74  /* Trending row */75  .trending-row {76    position: absolute; top: 1080px; left: 0; right: 0; height: 980px;77    display: flex; align-items: flex-start; gap: 36px;78    padding: 0 36px;79  }80  .trend-card {81    width: 900px; background: #fff; border-radius: 36px; box-shadow: 0 8px 22px rgba(0,0,0,0.12); overflow: hidden;82  }83  .trend-img {84    height: 540px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;85    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px; font-weight: 600;86    position: relative;87  }88  .trend-time {89    position: absolute; bottom: 22px; left: 24px; background: rgba(0,0,0,0.72);90    color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 28px; font-weight: 600;91  }92  .trend-body { padding: 26px 30px 34px; }93  .trend-title { margin: 18px 0 10px; font-size: 44px; font-weight: 800; line-height: 1.18; }94 95  /* Bottom nav */96  .bottom-nav {97    position: absolute; left: 0; right: 0; bottom: 90px; height: 140px;98    background: #fff; border-top: 1px solid #E5E5E5;99    display: flex; align-items: center; justify-content: space-around;100    padding: 0 24px;101  }102  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #777; font-size: 24px; font-weight: 700; }103  .nav-item svg { width: 48px; height: 48px; }104  .nav-item.active { color: #000; }105  .home-indicator {106    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);107    width: 360px; height: 12px; background: #D8D8D8; border-radius: 8px;108  }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status bar -->115  <div class="status-bar">116    <div>8:40</div>117    <div class="status-icons">118      <span class="tiny-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg></span>119      <span class="tiny-icon"><svg viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span>120      <span class="tiny-icon"><svg viewBox="0 0 24 24"><path d="M12 2l5 9H7l5-9zm0 20a2 2 0 100-4 2 2 0 000 4z"/></svg></span>121      <span class="tiny-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/></svg></span>122      <span class="tiny-icon"><svg viewBox="0 0 24 24"><circle cx="3" cy="12" r="2"/></svg></span>123      <span class="tiny-icon"><svg viewBox="0 0 24 24"><path d="M4 10h16v4H4z"/></svg></span>124    </div>125    <div class="status-icons">126      <span class="tiny-icon"><svg viewBox="0 0 24 24"><path d="M3 18h18l-9-12-9 12z"/></svg></span>127      <span class="tiny-icon"><svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg></span>128    </div>129  </div>130 131  <!-- Header -->132  <div class="app-header">133    <div class="avatar">👤</div>134    <div class="header-actions">135      <div class="pill">136        <svg viewBox="0 0 24 24"><path d="M6 3h12a1 1 0 011 1v16l-7-3-7 3V4a1 1 0 011-1z"/></svg>137        <span>0</span>138      </div>139      <div class="pill dark">140        <svg viewBox="0 0 24 24" fill="#fff"><path d="M3 6h2l2 10h10l3-8H8"/><circle cx="9" cy="20" r="1.6"/><circle cx="17" cy="20" r="1.6"/></svg>141        <span>0</span>142      </div>143    </div>144  </div>145 146  <!-- Featured Recipe Card -->147  <div class="card">148    <div class="card-img">149      [IMG: Spanish Eggs with Tomatoes and Asparagus (Skillet)]150      <div class="badge-time">25min</div>151    </div>152    <div class="card-body">153      <div class="rating">★★★★☆</div>154      <div class="recipe-title">Spanish Eggs with Tomatoes and Asparagus</div>155      <div class="outline-btn">156        <svg viewBox="0 0 24 24"><path d="M3 6h2l2 10h10l3-8H8"/><circle cx="9" cy="20" r="1.6"/><circle cx="17" cy="20" r="1.6"/></svg>157        <span>ADD 11 INGREDIENTS</span>158      </div>159    </div>160  </div>161 162  <!-- Trending Now -->163  <div class="section-title">Trending Now</div>164  <div class="trending-row">165    <!-- Trend card 1 -->166    <div class="trend-card">167      <div class="trend-img">168        [IMG: Cauliflower Bowl on Rice]169        <div class="trend-time">30min</div>170      </div>171      <div class="trend-body">172        <div class="rating">★★★★☆</div>173        <div class="trend-title">6-Ingredient BBQ Roasted Cauliflower Bowl</div>174      </div>175    </div>176    <!-- Trend card 2 (partial visible) -->177    <div class="trend-card">178      <div class="trend-img">179        [IMG: Spanish Eggs Skillet]180        <div class="trend-time">25min</div>181      </div>182      <div class="trend-body">183        <div class="rating">★★★★☆</div>184        <div class="trend-title">Spanish Eggs with Tomatoes and Asparagus</div>185      </div>186    </div>187  </div>188 189  <!-- Bottom navigation -->190  <div class="bottom-nav">191    <div class="nav-item active">192      <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9h-6v-6H9v6H3z"/></svg>193      <div>FOR YOU</div>194    </div>195    <div class="nav-item">196      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>197      <div></div>198    </div>199    <div class="nav-item">200      <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>201      <div></div>202    </div>203    <div class="nav-item">204      <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M4 9h16"/></svg>205      <div></div>206    </div>207    <div class="nav-item">208      <svg viewBox="0 0 24 24"><path d="M4 7h16l-2 10H6z"/><path d="M8 7V5h8v2"/><circle cx="9" cy="20" r="1.8"/><circle cx="17" cy="20" r="1.8"/></svg>209      <div></div>210    </div>211  </div>212  <div class="home-indicator"></div>213</div>214</body>215</html>