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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; border-radius: 24px;12  }13 14  .content { padding: 60px 60px 0 60px; }15  .top-actions {16    position: relative; height: 90px; margin-bottom: 20px;17  }18  .back-btn { position: absolute; left: 0; top: 20px; width: 60px; height: 60px; }19  .right-actions { position: absolute; right: 0; top: 20px; display: flex; gap: 40px; align-items: center; }20  .icon-pink svg { width: 48px; height: 48px; fill: none; stroke: #E91E63; stroke-width: 5; }21  .icon-grey svg { width: 40px; height: 40px; fill: none; stroke: #757575; stroke-width: 4; }22 23  .title { font-size: 72px; font-weight: 800; line-height: 84px; color: #222; margin-top: 10px; }24  .subtitle { font-size: 34px; line-height: 46px; color: #8d8d8d; margin-top: 20px; }25  .down-caret {26    position: absolute; right: 60px; top: 540px;27    width: 44px; height: 44px;28  }29  .stat-row {30    margin-top: 40px; padding: 30px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;31    display: flex; align-items: center; gap: 24px; font-size: 40px; color: #222; font-weight: 600;32  }33  .stat-row .percent { font-weight: 800; margin-right: 10px; }34 35  .hero {36    position: relative; margin-top: 20px; width: 960px; height: 680px;37    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;38    color: #757575; font-size: 36px; text-align: center; overflow: hidden; border-radius: 12px;39  }40  .ribbon { position: absolute; left: 0; top: 30px; height: 140px; width: 420px; background: #111; color: #fff;41            display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 800; }42  .ribbon:after { content: ""; position: absolute; right: -70px; top: 0; width: 0; height: 0;43                  border-top: 70px solid transparent; border-bottom: 70px solid transparent;44                  border-left: 70px solid #111; }45  .play-btn {46    position: absolute; width: 140px; height: 140px; background: #ff2d76; border-radius: 50%;47    left: 50%; top: 50%; transform: translate(-50%, -50%);48    display: flex; align-items: center; justify-content: center;49    box-shadow: 0 8px 16px rgba(0,0,0,0.25);50  }51  .play-btn:before {52    content: ""; width: 0; height: 0; border-left: 48px solid #fff; border-top: 28px solid transparent; border-bottom: 28px solid transparent;53    margin-left: 8px;54  }55  .tag-new {56    position: absolute; right: 40px; bottom: 120px; background: #F4D43D; color: #222;57    padding: 22px 28px; border-radius: 16px; font-weight: 800; font-size: 36px;58  }59  .tag-new:after {60    content: ""; position: absolute; left: 40px; bottom: -22px; width: 0; height: 0;61    border-top: 22px solid #F4D43D; border-left: 22px solid transparent; border-right: 22px solid transparent;62  }63 64  .section { margin-top: 30px; }65  .section-title { font-size: 56px; font-weight: 800; color: #222; }66  .servings-row { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }67  .servings-row .servings { font-size: 40px; color: #555; }68  .stepper {69    display: flex; align-items: center; gap: 24px; padding: 20px 30px; border: 2px solid #e6e6e6; border-radius: 18px;70    font-size: 40px; color: #222; background: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.05);71  }72  .stepper .minus, .stepper .plus { color: #E91E63; font-weight: 800; font-size: 48px; }73 74  .ingredients { margin-top: 30px; }75  .row {76    display: flex; justify-content: space-between; align-items: center;77    padding: 28px 0; border-top: 1px solid #ececec;78    font-size: 40px; color: #333;79  }80  .row .qty { color: #222; font-weight: 700; }81 82  /* Bottom navigation */83  .bottom-nav {84    position: absolute; left: 0; bottom: 0; width: 100%; height: 180px;85    background: #fafafa; border-top: 1px solid #e5e5e5;86    display: flex; justify-content: space-around; align-items: center;87  }88  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #9e9e9e; font-size: 30px; }89  .nav-item.active { color: #E91E63; font-weight: 700; }90  .nav-icon svg { width: 56px; height: 56px; stroke: #9e9e9e; stroke-width: 5; fill: none; }91  .nav-item.active .nav-icon svg { stroke: #E91E63; }92  .profile-dot {93    width: 72px; height: 72px; border-radius: 50%; background: #c7a999; color: #fff;94    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 36px;95  }96</style>97</head>98<body>99<div id="render-target">100  <div class="content">101    <div class="top-actions">102      <div class="back-btn icon-pink">103        <svg viewBox="0 0 24 24">104          <path d="M14 5 L7 12 L14 19" />105        </svg>106      </div>107      <div class="right-actions">108        <div class="icon-pink">109          <svg viewBox="0 0 24 24">110            <circle cx="6" cy="8" r="3"></circle>111            <circle cx="18" cy="4" r="3"></circle>112            <circle cx="18" cy="16" r="3"></circle>113            <path d="M8.8 9.7 L15.2 6.3 M8.8 10.3 L15.2 13.7" stroke-linecap="round"></path>114          </svg>115        </div>116        <div class="icon-pink">117          <svg viewBox="0 0 24 24">118            <path d="M12 20 C10 18 5 14 5 9 A4 4 0 0 1 12 8 A4 4 0 0 1 19 9 C19 14 14 18 12 20 Z" />119          </svg>120        </div>121      </div>122    </div>123 124    <div class="title">How To Make The Best Homemade Pizza</div>125    <div class="subtitle">126      Making homemade pizza dough can sound like a lot of work, but it’s so worth the bragging rights.127      The dough itself requires few ingredients and just a little bit of rising and rest time.128    </div>129 130    <div class="down-caret icon-pink">131      <svg viewBox="0 0 24 24"><path d="M5 9 L12 16 L19 9" /></svg>132    </div>133 134    <div class="stat-row">135      <div class="icon-grey">136        <svg viewBox="0 0 24 24">137          <path d="M3 13 H8 V20 H3 Z" />138          <path d="M8 13 V8 C8 7 9 6 10 6 H12 V11 H15 C16 11 17 12 17 13 V20 H8 Z" />139        </svg>140      </div>141      <span class="percent">96%</span>142      <span>would make this again</span>143    </div>144 145    <div class="hero">146      [IMG: Pizza close-up]147      <div class="ribbon">101</div>148      <div class="play-btn"></div>149      <div class="tag-new">New!</div>150    </div>151 152    <div class="section">153      <div class="section-title">Ingredients for</div>154      <div class="servings-row">155        <div class="servings">16 servings</div>156        <div class="stepper">157          <span class="minus">−</span>158          <span>16</span>159          <span class="plus">+</span>160        </div>161      </div>162 163      <div class="ingredients">164        <div class="row">165          <div>warm water</div>166          <div class="qty">2 ½ cup</div>167        </div>168        <div class="row">169          <div>sugar</div>170          <div class="qty">1 teaspoon</div>171        </div>172        <div class="row">173          <div>active dry yeast</div>174          <div class="qty">2 teaspoons</div>175        </div>176        <div class="row">177          <div>all-purpose flour, plus more for dusting</div>178          <div class="qty">7 cups</div>179        </div>180        <div class="row">181          <div>extra virgin olive oil, plus more for greasing</div>182          <div class="qty">6 tablespoons</div>183        </div>184      </div>185    </div>186  </div>187 188  <div class="bottom-nav">189    <div class="nav-item active">190      <div class="nav-icon">191        <svg viewBox="0 0 24 24">192          <circle cx="10" cy="10" r="6"></circle>193          <path d="M14.5 14.5 L20 20" stroke-linecap="round"></path>194        </svg>195      </div>196      <div>Discover</div>197    </div>198    <div class="nav-item">199      <div class="nav-icon">200        <svg viewBox="0 0 24 24">201          <path d="M5 20 V9 H19 V20" />202          <path d="M9 9 V6 H15 V9" />203        </svg>204      </div>205      <div>Community</div>206    </div>207    <div class="nav-item">208      <div class="nav-icon">209        <svg viewBox="0 0 24 24">210          <path d="M6 7 H18 L17 20 H7 Z" />211          <path d="M9 7 V5 H15 V7" />212        </svg>213      </div>214      <div>My Bag</div>215    </div>216    <div class="nav-item">217      <div class="profile-dot">C</div>218      <div>Profile</div>219    </div>220  </div>221</div>222</body>223</html>