GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>5-ingredient Healthy Brownies</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #1f2023; color: #f5f5f5;13    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;14  }15  .status-bar {16    position: absolute; top: 24px; left: 32px; right: 32px;17    height: 48px; display: flex; align-items: center; justify-content: space-between;18    color: #f0f0f0; font-weight: 600; font-size: 32px;19  }20  .status-icons { display: flex; align-items: center; gap: 24px; }21  .icon { width: 40px; height: 40px; fill: #d6d6d6; }22  .icon.accent { fill: #f3a3ac; }23  .content {24    position: absolute; top: 120px; left: 40px; right: 40px;25  }26  .top-actions {27    display: flex; align-items: center; justify-content: space-between;28    padding: 24px 0;29  }30  .title {31    font-size: 72px; font-weight: 800; line-height: 1.05; margin: 16px 0 16px 0;32    letter-spacing: 0.3px;33  }34  .subtext { color: #c9c9ca; font-size: 34px; line-height: 1.5; margin-bottom: 26px; }35  .featured {36    font-size: 34px; color: #d7d7d8; margin-bottom: 30px;37  }38  .featured .link { color: #f3a3ac; font-weight: 800; }39  .fact { display: flex; align-items: center; gap: 22px; font-size: 36px; color: #eaeaea; margin: 18px 0; }40  .muted { color: #c9c9ca; }41  .strong { font-weight: 800; }42  .media-block {43    margin-top: 36px;44  }45  .image-placeholder {46    width: 100%; height: 980px;47    background: #E0E0E0; border: 1px solid #BDBDBD;48    display: flex; justify-content: center; align-items: center;49    color: #757575; font-size: 40px; font-weight: 700;50    position: relative;51  }52  .image-label {53    position: absolute; top: 24px; left: 24px; color: #111; font-size: 64px; font-weight: 800; letter-spacing: 2px;54  }55  .ad {56    width: 100%; height: 140px; margin: 32px 0 0 0;57    background: #d84b4b; border-radius: 12px;58    display: flex; align-items: center; justify-content: center;59    color: #fff; font-weight: 800; letter-spacing: 0.5px; font-size: 40px;60  }61  .bottom-nav {62    position: absolute; bottom: 0; left: 0; right: 0;63    height: 210px; background: #232427; border-top: 1px solid #2f3136;64    display: flex; flex-direction: column; align-items: center; justify-content: space-between;65    padding-top: 20px; padding-bottom: 18px;66  }67  .tabs {68    width: 100%; display: flex; justify-content: space-around; align-items: flex-end;69  }70  .tab {71    width: 250px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #cfcfd1; font-size: 30px;72  }73  .tab.active { color: #f3a3ac; }74  .profile-avatar {75    width: 64px; height: 64px; border-radius: 50%; background: #d46a3c; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800;76  }77  .home-indicator {78    width: 360px; height: 10px; background: #d9d9db; border-radius: 8px; opacity: 0.6;79  }80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Status bar -->86  <div class="status-bar">87    <div>7:46</div>88    <div class="status-icons">89      <!-- YouTube icon -->90      <svg class="icon" viewBox="0 0 24 24">91        <rect x="3" y="7" width="18" height="10" rx="3"></rect>92        <polygon points="10,9 16,12 10,15" fill="#1f2023"></polygon>93      </svg>94      <!-- Text icons T and M (as simple letters) -->95      <div style="font-size:28px; font-weight:700; color:#eaeaea;">T</div>96      <div style="font-size:28px; font-weight:700; color:#eaeaea;">M</div>97      <!-- WiFi -->98      <svg class="icon" viewBox="0 0 24 24">99        <path d="M2 8c5-4 15-4 20 0" stroke="#d6d6d6" stroke-width="2" fill="none"/>100        <path d="M5 12c4-3 10-3 14 0" stroke="#d6d6d6" stroke-width="2" fill="none"/>101        <circle cx="12" cy="16" r="2" />102      </svg>103      <!-- Battery -->104      <svg class="icon" viewBox="0 0 28 24">105        <rect x="2" y="6" width="20" height="12" rx="2" fill="#d6d6d6"></rect>106        <rect x="23" y="9" width="3" height="6" rx="1" fill="#d6d6d6"></rect>107        <rect x="4" y="8" width="12" height="8" fill="#1f2023"></rect>108      </svg>109    </div>110  </div>111 112  <!-- Main content -->113  <div class="content">114 115    <div class="top-actions">116      <!-- Back arrow -->117      <svg class="icon accent" viewBox="0 0 24 24">118        <path d="M15 19L8 12l7-7" stroke="#f3a3ac" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>119      </svg>120      <div style="display:flex; align-items:center; gap:28px;">121        <!-- Share -->122        <svg class="icon accent" viewBox="0 0 24 24">123          <circle cx="6" cy="12" r="3"/>124          <circle cx="18" cy="6" r="3"/>125          <circle cx="18" cy="18" r="3"/>126          <path d="M8.8 10.8 L15.3 7.2 M8.8 13.2 L15.3 16.8" stroke="#f3a3ac" stroke-width="2" fill="none"/>127        </svg>128        <!-- Heart -->129        <svg class="icon accent" viewBox="0 0 24 24">130          <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 6 6 6c2 0 3.5 1.1 4 2.4C10.5 7.1 12 6 14 6c2.5 0 5 2 3 6.5-2 4-9 8.5-9 8.5z"></path>131        </svg>132      </div>133    </div>134 135    <div class="title">5-ingredient Healthy<br>Brownies</div>136 137    <div class="subtext">138      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.139    </div>140 141    <div class="featured">142      featured in <span class="link">7 Desserts That Are 5 Ingredients Or Less</span>143    </div>144 145    <div class="fact">146      <!-- Thumbs up -->147      <svg class="icon" viewBox="0 0 24 24">148        <path d="M2 11h5v9H2zM8 11l3-6h3c1 0 2 1 2 2v2h3v9H8z" />149      </svg>150      <span><span class="strong">90%</span> would make this again</span>151    </div>152 153    <div class="fact">154      <!-- Clock -->155      <svg class="icon" viewBox="0 0 24 24">156        <circle cx="12" cy="12" r="9" stroke="#d6d6d6" stroke-width="2" fill="none"></circle>157        <path d="M12 7v6l4 2" stroke="#d6d6d6" stroke-width="2" fill="none" stroke-linecap="round"/>158      </svg>159      <span>Ready in <span class="strong">under 30 minutes</span></span>160    </div>161 162    <div class="media-block">163      <div class="image-placeholder">164        <div class="image-label">HONEY</div>165        [IMG: Mixing bowl with yellow batter and spatula]166      </div>167 168      <div class="ad">JUST Dosa IT! • Free delivery • up to 60% OFF</div>169    </div>170 171  </div>172 173  <!-- Bottom navigation -->174  <div class="bottom-nav">175    <div class="tabs">176      <div class="tab active">177        <!-- Discover / search icon -->178        <svg class="icon accent" viewBox="0 0 24 24">179          <circle cx="10" cy="10" r="6" stroke="#f3a3ac" stroke-width="2" fill="none"></circle>180          <path d="M14.5 14.5 L20 20" stroke="#f3a3ac" stroke-width="2" />181        </svg>182        <div>Discover</div>183      </div>184      <div class="tab">185        <!-- Community icon -->186        <svg class="icon" viewBox="0 0 24 24">187          <path d="M12 2l6 4v4c0 4-2 6-6 8-4-2-6-4-6-8V6l6-4z" stroke="#d6d6d6" stroke-width="2" fill="none"/>188          <circle cx="12" cy="10" r="2" fill="#d6d6d6"></circle>189        </svg>190        <div>Community</div>191      </div>192      <div class="tab">193        <!-- Bag icon -->194        <svg class="icon" viewBox="0 0 24 24">195          <path d="M6 8h12l-1 12H7L6 8z" fill="#d6d6d6"></path>196          <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#1f2023" stroke-width="2"/>197        </svg>198        <div>My Bag</div>199      </div>200      <div class="tab">201        <div class="profile-avatar">C</div>202        <div>Profile</div>203      </div>204    </div>205    <div class="home-indicator"></div>206  </div>207 208</div>209</body>210</html>