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 Detail UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative; overflow: hidden;11    width: 1080px; height: 2400px;12    background: #262628; color: #ffffff;13  }14 15  .status-bar {16    height: 90px;17    padding: 36px 40px 0 40px;18    display: flex; justify-content: space-between; align-items: center;19    color: #eee; font-size: 34px;20  }21  .status-left span { margin-right: 18px; }22  .status-right span { margin-left: 20px; }23  .status-bar svg { width: 32px; height: 32px; fill: #eee; }24 25  .header {26    padding: 30px 48px;27    display: flex; justify-content: space-between; align-items: center;28  }29  .icon-btn {30    width: 60px; height: 60px;31    display: flex; justify-content: center; align-items: center;32    border-radius: 50%; color: #f48ca5;33  }34  .icon-btn svg { width: 38px; height: 38px; fill: #f48ca5; }35 36  .content { padding: 0 48px; }37  h1 { font-size: 64px; line-height: 74px; margin: 10px 0 14px; color: #eaeaea; font-weight: 800; }38  p { font-size: 34px; line-height: 50px; margin: 18px 0; }39  .text-muted { color: #cfcfcf; }40  .link, .accent { color: #f48ca5; font-weight: 700; }41 42  .info-row {43    display: flex; align-items: center;44    margin: 26px 0; font-size: 36px; color: #eaeaea;45  }46  .info-row .mini-icon {47    width: 56px; height: 56px; border-radius: 50%;48    background: #333; display: flex; justify-content: center; align-items: center;49    margin-right: 22px;50  }51  .mini-icon svg { width: 34px; height: 34px; fill: #fff; stroke: #fff; }52 53  .image-banner {54    width: 100%; height: 860px;55    background: #E0E0E0; border: 1px solid #BDBDBD;56    display: flex; justify-content: center; align-items: center;57    color: #757575; font-size: 40px; position: relative; margin-top: 24px;58  }59  .play-btn {60    position: absolute; width: 120px; height: 120px; border-radius: 60px;61    background: #de5571; display: flex; justify-content: center; align-items: center;62    box-shadow: 0 4px 10px rgba(0,0,0,0.3);63  }64  .play-btn svg { width: 60px; height: 60px; fill: #fff; }65 66  .bottom-area {67    position: absolute; left: 0; right: 0; bottom: 0;68    background: #1f1f21; border-top: 1px solid #2a2a2a;69  }70  .ad-slot { height: 150px; display: flex; justify-content: center; align-items: center; }71  .ad-card {72    width: 880px; height: 120px; background: #d95355;73    border-radius: 8px; display: flex; align-items: center; justify-content: center;74    color: #fff; font-weight: 700; letter-spacing: 1px;75  }76  .navbar {77    height: 240px; display: flex; justify-content: space-around; align-items: flex-end;78    padding-bottom: 36px; color: #cfcfcf;79  }80  .nav-item { display: flex; flex-direction: column; align-items: center; font-size: 28px; }81  .nav-item .nav-icon {82    width: 70px; height: 70px; border-radius: 35px;83    display: flex; justify-content: center; align-items: center; margin-bottom: 16px; color: #cfcfcf;84  }85  .nav-item .nav-icon svg { width: 40px; height: 40px; fill: #cfcfcf; }86  .nav-item.active .nav-icon { border: 2px solid #f48ca5; color: #f48ca5; }87  .nav-item.active .nav-icon svg { fill: #f48ca5; }88  .nav-item.active .label { color: #f48ca5; font-weight: 700; }89  .avatar {90    width: 64px; height: 64px; border-radius: 50%;91    background: #d9712c; color: #fff; display: flex; justify-content: center; align-items: center;92    font-weight: 700; margin-bottom: 16px;93  }94  .gesture { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 240px; height: 10px; border-radius: 10px; background: #555; }95</style>96</head>97<body>98<div id="render-target">99 100  <div class="status-bar">101    <div class="status-left">102      <span>7:43</span>103      <span>104        <svg viewBox="0 0 24 24"><path d="M3 5h13v14H3zM18 8l5-3v14l-5-3z"/></svg>105      </span>106      <span>107        <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4zm0 6h10v2H4zm0 6h12v2H4z"/></svg>108      </span>109      <span>110        <svg viewBox="0 0 24 24"><path d="M2 5h20v14H2z"/><path d="M2 5l10 7 10-7"/></svg>111      </span>112    </div>113    <div class="status-right">114      <span>115        <svg viewBox="0 0 24 24"><path d="M2 8c6-6 14-6 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c4-4 10-4 14 0l-2 2c-3-3-7-3-10 0l-2-2zm5 5l1 1 1-1-1-1-1 1z"/></svg>116      </span>117      <span>118        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2" ry="2" fill="#fff"/><rect x="24" y="9" width="3" height="6" fill="#fff"/></svg>119      </span>120    </div>121  </div>122 123  <div class="header">124    <div class="icon-btn">125      <svg viewBox="0 0 24 24"><path d="M15 5l-9 7 9 7V5z"/></svg>126    </div>127    <div style="display:flex; gap:24px;">128      <div class="icon-btn">129        <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="18" cy="7" r="2"/><circle cx="18" cy="17" r="2"/><path d="M8 12l8-5M8 12l8 5" stroke="#f48ca5" stroke-width="2" fill="none"/></svg>130      </div>131      <div class="icon-btn">132        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.3C1 10 3 6.5 6.7 7.2 8.8 7.6 10 9.2 12 11c2-1.8 3.2-3.4 5.3-3.8C21 6.5 23 10 21 12.7 19 16.4 12 21 12 21z"/></svg>133      </div>134    </div>135  </div>136 137  <div class="content">138    <h1>5-ingredient Healthy Brownies</h1>139    <p class="text-muted">These brownies prove that sometimes less is more. With just five simple ingredients, you can create a rich and fudgy dessert that will satisfy any chocolate craving.</p>140    <p class="text-muted">featured in <span class="link">7 Desserts That Are 5 Ingredients Or Less</span></p>141 142    <div class="info-row">143      <div class="mini-icon">144        <svg viewBox="0 0 24 24"><path d="M2 10h5v10H2zM8 10l5-6 1 1v5h6v10H8z"/></svg>145      </div>146      <div><span class="accent">90%</span> would make this again</div>147    </div>148 149    <div class="info-row">150      <div class="mini-icon">151        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/><path d="M12 6v7l5 2" stroke="#fff" stroke-width="2" fill="none"/></svg>152      </div>153      <div>Ready in <span class="accent">under 30 minutes</span></div>154    </div>155 156    <div class="image-banner">157      [IMG: Close-up Brownies on Plate]158      <div class="play-btn">159        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>160      </div>161    </div>162  </div>163 164  <div class="bottom-area">165    <div class="ad-slot">166      <div class="ad-card">JUST Dosa IT!  •  zomato</div>167    </div>168 169    <div class="navbar">170      <div class="nav-item active">171        <div class="nav-icon">172          <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M15 15l6 6" stroke="currentColor" stroke-width="2" fill="none"/></svg>173        </div>174        <div class="label">Discover</div>175      </div>176      <div class="nav-item">177        <div class="nav-icon">178          <svg viewBox="0 0 24 24"><path d="M4 13h16a8 8 0 01-16 0z"/><path d="M6 17h12" stroke="currentColor" stroke-width="2" fill="none"/></svg>179        </div>180        <div class="label">Community</div>181      </div>182      <div class="nav-item">183        <div class="nav-icon">184          <svg viewBox="0 0 24 24"><path d="M5 8h14v13H5z"/><path d="M9 8a3 3 0 016 0" stroke="currentColor" stroke-width="2" fill="none"/></svg>185        </div>186        <div class="label">My Bag</div>187      </div>188      <div class="nav-item">189        <div class="avatar">C</div>190        <div class="label">Profile</div>191      </div>192    </div>193    <div class="gesture"></div>194  </div>195 196</div>197</body>198</html>