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 Search UI</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; font-family: Roboto, Arial, sans-serif; color:#333;12 }13 14 /* Top header */15 .header {16 position:absolute; top:0; left:0; width:100%; height:420px;17 background:#C63D3D; /* material-like red */18 }19 .status-bar {20 height:90px; color:#ffd9d9; font-size:34px; line-height:90px;21 padding:0 40px; opacity:0.7;22 }23 /* Search box */24 .search-wrap { padding:0 40px; }25 .search-box {26 height:120px; background:#fff; border-radius:12px;27 box-shadow:0 2px 6px rgba(0,0,0,0.18);28 display:flex; align-items:center; justify-content:space-between;29 padding:0 28px; margin-top:20px;30 }31 .search-left, .search-right { display:flex; align-items:center; }32 .search-left svg { margin-right:24px; }33 .search-input {34 font-size:46px; color:#333; outline:none; border:none; width:770px;35 }36 .search-input::placeholder { color:#9e9e9e; }37 .icon-btn svg { width:56px; height:56px; }38 39 /* Tabs */40 .tabs {41 display:flex; gap:80px; padding:26px 40px 0 40px; align-items:flex-end; color:#fff;42 }43 .tab { font-size:40px; letter-spacing:1px; opacity:0.95; }44 .tab.active { font-weight:600; }45 .tab-indicator {46 position:absolute; left:40px; top:390px; width:120px; height:8px; background:#fff; border-radius:4px;47 }48 49 /* Content area */50 .content {51 position:absolute; top:420px; left:0; right:0; bottom:0;52 background:#F3F3F3; padding:24px 24px 120px 24px; overflow-y:auto;53 }54 .grid {55 display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:28px;56 padding-top:18px;57 }58 .card {59 background:#fff; border-radius:10px; overflow:hidden;60 box-shadow:0 4px 10px rgba(0,0,0,0.15);61 }62 .card .img {63 height:520px; background:#E0E0E0; border:1px solid #BDBDBD;64 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;65 }66 .card .title { font-size:44px; font-weight:700; margin:22px 24px 8px 24px; color:#3d3d3d; }67 .stars { display:flex; margin:0 24px 18px 24px; }68 .star, .star-o { width:44px; height:44px; margin-right:10px; }69 .star polygon { fill:#D8B249; }70 .star-o polygon { fill:none; stroke:#D8B249; stroke-width:6; }71 72 .author {73 display:flex; align-items:center; border-top:1px solid #E8E8E8;74 padding:18px 24px 22px 24px; color:#555; font-size:36px;75 }76 .avatar {77 width:86px; height:86px; border-radius:50%; background:#BDBDBD; border:1px solid #AFAFAF; margin-right:20px;78 display:flex; align-items:center; justify-content:center; color:#666; font-size:24px;79 }80 81 /* Floating Action Button */82 .fab {83 position:absolute; right:60px; bottom:280px; width:140px; height:140px;84 background:#D64B4B; border-radius:50%; box-shadow:0 10px 20px rgba(0,0,0,0.35);85 display:flex; align-items:center; justify-content:center;86 }87 .fab svg { width:70px; height:70px; }88 .home-bar {89 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);90 width:420px; height:12px; background:#000; border-radius:6px; opacity:0.85;91 }92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Red header with search and tabs -->98 <div class="header">99 <div class="status-bar">1:12</div>100 101 <div class="search-wrap">102 <div class="search-box">103 <div class="search-left">104 <!-- Back arrow -->105 <svg viewBox="0 0 100 100" width="56" height="56">106 <polyline points="60,20 30,50 60,80" fill="none" stroke="#333" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"></polyline>107 </svg>108 <input class="search-input" value="Pizza" />109 </div>110 <div class="search-right icon-btn">111 <!-- Close (X) -->112 <svg viewBox="0 0 100 100">113 <line x1="25" y1="25" x2="75" y2="75" stroke="#333" stroke-width="12" stroke-linecap="round"></line>114 <line x1="75" y1="25" x2="25" y2="75" stroke="#333" stroke-width="12" stroke-linecap="round"></line>115 </svg>116 </div>117 </div>118 </div>119 120 <div class="tabs">121 <div class="tab active">ALL</div>122 <div class="tab">MY RECIPES</div>123 <div class="tab">COOKS</div>124 </div>125 <div class="tab-indicator"></div>126 </div>127 128 <!-- Main grid content -->129 <div class="content">130 <div class="grid">131 <!-- Card 1 -->132 <div class="card">133 <div class="img">[IMG: Recipe Photo]</div>134 <div class="title">Pizza</div>135 <div class="stars">136 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>137 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>138 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>139 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>140 <svg class="star-o" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>141 </div>142 <div class="author">143 <div class="avatar">[IMG]</div>144 <div>by ellie36</div>145 </div>146 </div>147 148 <!-- Card 2 -->149 <div class="card">150 <div class="img">[IMG: Recipe Photo]</div>151 <div class="title">Bruschetta Pizza</div>152 <div class="stars">153 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>154 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>155 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>156 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>157 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>158 </div>159 <div class="author">160 <div class="avatar">[IMG]</div>161 <div>by ThePioneerWomanRecipes</div>162 </div>163 </div>164 165 <!-- Card 3 -->166 <div class="card">167 <div class="img">[IMG: Recipe Photo]</div>168 <div class="title">Pizza</div>169 <div class="stars">170 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>171 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>172 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>173 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>174 <svg class="star-o" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>175 </div>176 <div class="author">177 <div class="avatar">[IMG]</div>178 <div>by AddisonKirk</div>179 </div>180 </div>181 182 <!-- Card 4 -->183 <div class="card">184 <div class="img">[IMG: Recipe Photo]</div>185 <div class="title">Pizza Hut Pizza Crust</div>186 <div class="stars">187 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>188 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>189 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>190 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>191 <svg class="star-o" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>192 </div>193 <div class="author">194 <div class="avatar">[IMG]</div>195 <div>by RecipeSource</div>196 </div>197 </div>198 199 <!-- Card 5 -->200 <div class="card">201 <div class="img">[IMG: Recipe Photo]</div>202 <div class="title">Pizza</div>203 <div class="stars">204 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>205 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>206 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>207 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>208 <svg class="star-o" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>209 </div>210 <div class="author">211 <div class="avatar">[IMG]</div>212 <div>by HomeChef</div>213 </div>214 </div>215 216 <!-- Card 6 -->217 <div class="card">218 <div class="img">[IMG: Recipe Photo]</div>219 <div class="title">Cheesy Pan Pizza</div>220 <div class="stars">221 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>222 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>223 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>224 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>225 <svg class="star" viewBox="0 0 100 100"><polygon points="50,10 61,36 89,36 66,54 74,82 50,66 26,82 34,54 11,36 39,36"></polygon></svg>226 </div>227 <div class="author">228 <div class="avatar">[IMG]</div>229 <div>by CookMaster</div>230 </div>231 </div>232 </div>233 </div>234 235 <!-- Floating Action Button -->236 <div class="fab">237 <svg viewBox="0 0 100 100">238 <!-- magnifying glass -->239 <circle cx="42" cy="42" r="24" fill="none" stroke="#fff" stroke-width="8"></circle>240 <line x1="62" y1="62" x2="86" y2="86" stroke="#fff" stroke-width="10" stroke-linecap="round"></line>241 <!-- plus inside lens -->242 <line x1="42" y1="32" x2="42" y2="52" stroke="#fff" stroke-width="8" stroke-linecap="round"></line>243 <line x1="32" y1="42" x2="52" y2="42" stroke="#fff" stroke-width="8" stroke-linecap="round"></line>244 </svg>245 </div>246 247 <div class="home-bar"></div>248</div>249</body>250</html>