GD-ML/AndroidCode
13.4k
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 Discover</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #1f2125; color: #ffffff;13 }14 .safe-top { height: 72px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #e8e8e8; font-size: 28px; opacity: 0.85; }15 .status-icons { display: flex; gap: 20px; align-items: center; }16 .status-icons svg { width: 32px; height: 32px; opacity: 0.85; }17 18 /* Search */19 .search-wrap { padding: 0 36px; }20 .search-bar {21 height: 110px; border-radius: 55px;22 background: #2a2b2f; border: 2px solid #3a3c40;23 display: flex; align-items: center; padding: 0 36px; gap: 24px;24 color: #9ea3a9; font-size: 38px;25 }26 .search-bar svg { width: 44px; height: 44px; stroke: #9ea3a9; }27 28 /* Hero */29 .hero { margin-top: 24px; position: relative; }30 .hero .img {31 width: 1080px; height: 520px;32 background: #E0E0E0; border: 1px solid #BDBDBD;33 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;34 }35 .hero-title {36 position: absolute; left: 36px; right: 36px; bottom: 24px;37 background: #2d7d8a; border-radius: 18px;38 padding: 32px 36px; font-size: 64px; font-weight: 800; line-height: 1.1; color: #ffffff;39 }40 41 /* Section headings */42 .section { padding: 36px; padding-top: 42px; }43 .section h2 { margin: 0; font-size: 50px; font-weight: 800; letter-spacing: 0.2px; }44 45 /* Community grid */46 .community-grid {47 display: grid; grid-template-columns: 1fr 1fr; gap: 36px;48 padding: 0 36px;49 }50 .card {51 background: #2a2b2f; border-radius: 24px; overflow: hidden; position: relative;52 }53 .card .img {54 width: 100%; height: 360px;55 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;56 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;57 }58 .card-content { padding: 24px; }59 .user-row { display: flex; gap: 18px; align-items: center; }60 .avatar {61 width: 56px; height: 56px; border-radius: 50%;62 background: #E0E0E0; border: 1px solid #BDBDBD;63 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;64 }65 .user-row .meta { color: #c9cbd0; font-size: 28px; }66 .title { margin-top: 8px; font-size: 34px; font-weight: 800; }67 .likes {68 position: absolute; right: 20px; bottom: 20px;69 display: flex; align-items: center; gap: 10px; color: #d7d9dd; font-size: 28px; opacity: 0.95;70 }71 .see-more {72 padding: 24px 36px; font-size: 38px; color: #ff6b81; display: inline-flex; align-items: center; gap: 16px; font-weight: 800;73 }74 .see-more svg { width: 26px; height: 26px; fill: #ff6b81; }75 76 /* Recommended grid */77 .rec-section { padding: 18px 36px 220px; }78 .rec-section h2 { margin: 0; font-size: 50px; font-weight: 800; }79 .rec-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }80 .rec-card .img {81 width: 100%; height: 330px; border-radius: 18px;82 background: #E0E0E0; border: 1px solid #BDBDBD;83 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;84 }85 .rec-card .label { margin-top: 18px; font-size: 36px; font-weight: 800; }86 87 /* Bottom nav */88 .bottom-nav {89 position: absolute; left: 0; right: 0; bottom: 0;90 height: 190px; background: #2a2b2f; border-top: 1px solid #3a3c40;91 display: flex; align-items: center; justify-content: space-around;92 }93 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #c9cbd0; }94 .nav-item svg { width: 50px; height: 50px; }95 .nav-item .label { font-size: 28px; font-weight: 700; }96 .nav-item.active { color: #ff4f7a; }97 .profile-dot {98 width: 52px; height: 52px; border-radius: 50%;99 background: #3c5564; color: #e6eef3; display: flex; align-items: center; justify-content: center; font-weight: 800;100 }101 .home-indicator {102 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);103 width: 240px; height: 10px; background: #e8e8e8; border-radius: 6px; opacity: 0.7;104 }105</style>106</head>107<body>108<div id="render-target">109 <div class="safe-top">110 <div>3:10</div>111 <div class="status-icons">112 <svg viewBox="0 0 24 24">113 <path d="M3 9l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z" fill="#e8e8e8"></path>114 </svg>115 <svg viewBox="0 0 24 24">116 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#e8e8e8" fill="none"></rect>117 <rect x="4" y="8" width="12" height="8" fill="#e8e8e8"></rect>118 </svg>119 </div>120 </div>121 122 <div class="search-wrap">123 <div class="search-bar">124 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">125 <circle cx="10" cy="10" r="7"></circle>126 <line x1="15" y1="15" x2="22" y2="22"></line>127 </svg>128 <span>Search for recipes</span>129 </div>130 </div>131 132 <div class="hero">133 <div class="img">[IMG: Taco Salad close-up]</div>134 <div class="hero-title">Southwestern Taco Salad</div>135 </div>136 137 <div class="section">138 <h2>What Our Community is Cooking!</h2>139 </div>140 141 <div class="community-grid">142 <div class="card">143 <div class="img">[IMG: Fluffy Pancakes]</div>144 <div class="card-content">145 <div class="user-row">146 <div class="avatar">[AV]</div>147 <div class="meta">Beverlee Lynn cooked</div>148 </div>149 <div class="title">Fluffy Pancakes</div>150 </div>151 <div class="likes">152 <span style="font-size:32px;">👍</span>153 <span>89</span>154 </div>155 </div>156 157 <div class="card">158 <div class="img">[IMG: Nigerian Beef Stew]</div>159 <div class="card-content">160 <div class="user-row">161 <div class="avatar">[AV]</div>162 <div class="meta">Yunioka Yuna cooked</div>163 </div>164 <div class="title">Nigerian Beef Stew</div>165 </div>166 <div class="likes">167 <span style="font-size:32px;">👍</span>168 <span>89</span>169 </div>170 </div>171 </div>172 173 <div class="see-more">174 See more community175 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" /></svg>176 </div>177 178 <div class="rec-section">179 <h2>Recommended For You ✨</h2>180 181 <div class="rec-grid">182 <div class="rec-card">183 <div class="img">[IMG: Vegan Pancakes stack]</div>184 <div class="label">The Fluffiest Vegan Pancakes</div>185 </div>186 <div class="rec-card">187 <div class="img">[IMG: Mango Sago dessert]</div>188 <div class="label">Mango Sago</div>189 </div>190 <div class="rec-card">191 <div class="img">[IMG: Banana Cue on skewer]</div>192 <div class="label">Banana Cue</div>193 </div>194 </div>195 </div>196 197 <div class="bottom-nav">198 <div class="nav-item active">199 <svg viewBox="0 0 24 24" fill="none" stroke="#ff4f7a" stroke-width="2">200 <circle cx="10" cy="10" r="7"></circle>201 <line x1="15" y1="15" x2="22" y2="22"></line>202 </svg>203 <div class="label">Discover</div>204 </div>205 <div class="nav-item">206 <svg viewBox="0 0 24 24" fill="none" stroke="#c9cbd0" stroke-width="2">207 <path d="M4 18c0-4 4-6 8-6s8 2 8 6" fill="none"></path>208 <path d="M10 7c0 2-2 3-2 3s2 1 2 3" fill="none"></path>209 </svg>210 <div class="label">Community</div>211 </div>212 <div class="nav-item">213 <svg viewBox="0 0 24 24" fill="none" stroke="#c9cbd0" stroke-width="2">214 <rect x="5" y="8" width="14" height="12" rx="2"></rect>215 <path d="M8 8c0-3 8-3 8 0" />216 </svg>217 <div class="label">My Bag</div>218 </div>219 <div class="nav-item">220 <div class="profile-dot">C</div>221 <div class="label">Profile</div>222 </div>223 <div class="home-indicator"></div>224 </div>225</div>226</body>227</html>