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 App UI</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: #1f2125; color: #ececec;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;14  }15  .safe-area { padding: 0 48px; }16  /* Status bar */17  .status-bar {18    height: 90px; display: flex; align-items: center; justify-content: space-between;19    padding: 0 32px; color: #e6e6e6; font-size: 34px; letter-spacing: 0.5px;20  }21  .status-icons { display: flex; align-items: center; gap: 22px; }22  /* Search */23  .search-wrap { padding: 0 32px; }24  .search-bar {25    margin: 6px 0 30px;26    height: 96px; border-radius: 48px;27    background: #2a2c31; border: 1px solid #383a40;28    display: flex; align-items: center; padding: 0 32px; gap: 22px;29    color: #9ea3ab; font-size: 34px;30  }31  .search-bar svg { width: 44px; height: 44px; }32  /* Link */33  .link {34    padding: 0 48px; color: #ff6b84; font-weight: 700; font-size: 40px;35    display: flex; align-items: center; gap: 16px; margin: 16px 0 24px;36  }37  .section-title {38    padding: 0 48px; font-size: 54px; font-weight: 800; margin: 22px 0 24px;39  }40  /* Horizontal cards */41  .card-row {42    padding: 0 48px; display: flex; gap: 32px; margin-bottom: 48px;43  }44  .recipe-card { width: 320px; }45  .recipe-img {46    width: 320px; height: 240px; border-radius: 22px; overflow: hidden;47    background: #E0E0E0; border: 1px solid #BDBDBD;48    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600;49  }50  .recipe-title {51    margin-top: 18px; font-size: 36px; font-weight: 800; line-height: 1.15; color: #e9e9e9;52  }53  /* Feature section */54  .feature-title { padding: 0 48px; font-size: 52px; font-weight: 800; margin: 32px 0 22px; }55  .feature-card {56    margin: 0 48px 40px; background: #282a2f; border: 1px solid #353943;57    border-radius: 24px; padding: 28px; display: flex; gap: 28px; align-items: flex-start;58    box-shadow: 0 6px 10px rgba(0,0,0,0.25);59  }60  .feature-img {61    width: 180px; height: 180px; border-radius: 18px; background: #E0E0E0; border: 1px solid #BDBDBD;62    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600;63    flex-shrink: 0;64  }65  .feature-content { flex: 1; }66  .feature-heading { font-size: 44px; font-weight: 800; margin: 4px 0 12px; }67  .feature-sub { font-size: 34px; color: #bfc4cd; }68  .feature-button {69    margin-top: 30px; height: 100px; border-radius: 18px;70    background: #b0174e; color: #ffffff; font-size: 40px; font-weight: 800;71    display: flex; align-items: center; justify-content: center;72  }73  /* Trending */74  .trending-title { padding: 0 48px; font-size: 50px; font-weight: 800; margin: 18px 0 20px; }75  .trending-row { padding: 0 48px; display: flex; gap: 28px; }76  .trend-img {77    width: 300px; height: 180px; border-radius: 18px; background: #E0E0E0; border: 1px solid #BDBDBD;78    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600;79  }80  /* Bottom nav */81  .bottom-nav {82    position: absolute; left: 0; bottom: 0; width: 100%; height: 180px;83    background: #26282d; border-top: 1px solid #35383f;84    display: flex; align-items: center; justify-content: space-around;85    box-shadow: 0 -8px 12px rgba(0,0,0,0.35);86  }87  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #bfc4cd; }88  .nav-item.active { color: #ff4f73; font-weight: 800; }89  .nav-icon { width: 48px; height: 48px; }90  .profile-avatar {91    width: 56px; height: 56px; border-radius: 50%; background: #6ca4b6; color: #0f1b21;92    display: flex; align-items: center; justify-content: center; font-weight: 800;93  }94  .home-indicator {95    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);96    width: 220px; height: 12px; background: #e9e9e9; border-radius: 6px; opacity: 0.85;97  }98</style>99</head>100<body>101<div id="render-target">102  <!-- Status bar -->103  <div class="status-bar">104    <div>3:11</div>105    <div class="status-icons">106      <!-- Wi-Fi icon -->107      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">108        <path d="M2 8c5-4 15-4 20 0" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>109        <path d="M5 12c3-3 11-3 14 0" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>110        <path d="M9 15c2-2 4-2 6 0" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round"/>111        <circle cx="12" cy="18" r="1.6" fill="#e6e6e6"/>112      </svg>113      <!-- Battery icon -->114      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">115        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#e6e6e6" stroke-width="2"/>116        <rect x="4" y="8" width="14" height="8" rx="1.5" fill="#e6e6e6"/>117        <rect x="21" y="9" width="2" height="6" rx="1" fill="#e6e6e6"/>118      </svg>119    </div>120  </div>121 122  <!-- Search -->123  <div class="search-wrap">124    <div class="search-bar">125      <svg viewBox="0 0 24 24">126        <circle cx="10" cy="10" r="6.5" stroke="#9ea3ab" stroke-width="2" fill="none"/>127        <path d="M15.5 15.5 L21 21" stroke="#9ea3ab" stroke-width="2" stroke-linecap="round"/>128      </svg>129      <div>Search for recipes</div>130    </div>131  </div>132 133  <!-- See more community -->134  <div class="link">135    <span>See more community</span>136    <svg width="32" height="32" viewBox="0 0 24 24">137      <path d="M8 5l7 7-7 7" stroke="#ff6b84" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>138    </svg>139  </div>140 141  <!-- Recommended -->142  <div class="section-title">Recommended For You ✨</div>143  <div class="card-row">144    <div class="recipe-card">145      <div class="recipe-img">[IMG: Pancakes Stack]</div>146      <div class="recipe-title">The Fluffiest Vegan Pancakes</div>147    </div>148    <div class="recipe-card">149      <div class="recipe-img">[IMG: Mango Sago Dessert]</div>150      <div class="recipe-title">Mango Sago</div>151    </div>152    <div class="recipe-card">153      <div class="recipe-img">[IMG: Caramelized Banana Cue]</div>154      <div class="recipe-title">Banana Cue</div>155    </div>156  </div>157 158  <!-- Weekly Meal Planning -->159  <div class="feature-title">Weekly Meal Planning Made Easy</div>160  <div class="feature-card">161    <div class="feature-img">[IMG: Plate of Air-Fried Dish]</div>162    <div class="feature-content">163      <div class="feature-heading">Air Fry Your Way Out of Turning The Oven On</div>164      <div class="feature-sub">5 recipes</div>165      <div class="feature-button">Shop ingredients</div>166    </div>167  </div>168 169  <!-- Trending -->170  <div class="trending-title">Trending</div>171  <div class="trending-row" style="margin-bottom: 230px;">172    <div class="trend-img">[IMG: Mason Jar Closeup]</div>173    <div class="trend-img">[IMG: Mixing Bowl]</div>174    <div class="trend-img">[IMG: Fruit & Yogurt]</div>175  </div>176 177  <!-- Bottom Navigation -->178  <div class="bottom-nav">179    <div class="nav-item active">180      <svg class="nav-icon" viewBox="0 0 24 24">181        <circle cx="10" cy="10" r="6.5" stroke="#ff4f73" stroke-width="2" fill="none"/>182        <path d="M15.5 15.5 L21 21" stroke="#ff4f73" stroke-width="2" stroke-linecap="round"/>183      </svg>184      <div>Discover</div>185    </div>186    <div class="nav-item">187      <svg class="nav-icon" viewBox="0 0 24 24">188        <path d="M4 16c5-4 11-4 16 0" stroke="#bfc4cd" stroke-width="2" fill="none" stroke-linecap="round"/>189        <rect x="6" y="7" width="12" height="8" rx="3" stroke="#bfc4cd" stroke-width="2" fill="none"/>190      </svg>191      <div>Community</div>192    </div>193    <div class="nav-item">194      <svg class="nav-icon" viewBox="0 0 24 24">195        <path d="M6 7h12l-1 12H7L6 7z" stroke="#bfc4cd" stroke-width="2" fill="none"/>196        <path d="M9 7c0-2 6-2 6 0" stroke="#bfc4cd" stroke-width="2" fill="none" stroke-linecap="round"/>197      </svg>198      <div>My Bag</div>199    </div>200    <div class="nav-item">201      <div class="profile-avatar">C</div>202      <div>Profile</div>203    </div>204  </div>205  <div class="home-indicator"></div>206</div>207</body>208</html>