GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Blue Hawaiian Recipe UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar (simplified) */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 112px;23 padding: 0 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #111;29 z-index: 3;30 }31 .status-left { font-weight: 600; font-size: 36px; }32 .status-right {33 display: flex;34 gap: 26px;35 align-items: center;36 }37 .status-dot {38 width: 14px; height: 14px; background:#111; border-radius: 50%;39 }40 41 /* Hero image area */42 .hero {43 position: absolute;44 top: 112px;45 left: 0;46 width: 1080px;47 height: 820px;48 background: #E0E0E0;49 border-bottom: 1px solid #BDBDBD;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #5f5f5f;54 font-size: 34px;55 letter-spacing: .2px;56 }57 .circle-btn {58 position: absolute;59 width: 108px;60 height: 108px;61 border-radius: 54px;62 background: rgba(255,255,255,0.95);63 display: flex;64 align-items: center;65 justify-content: center;66 box-shadow: 0 2px 10px rgba(0,0,0,0.15);67 }68 .circle-btn.left { left: 40px; top: 60px; }69 .circle-btn.right { right: 40px; top: 60px; }70 71 /* Content Area */72 .content {73 position: absolute;74 top: 932px;75 left: 0;76 right: 0;77 bottom: 0;78 overflow-y: auto;79 -webkit-overflow-scrolling: touch;80 padding-bottom: 140px;81 }82 .title-wrap {83 padding: 36px 48px 14px 48px;84 }85 .title-row {86 display: flex;87 align-items: center;88 justify-content: space-between;89 }90 .title {91 font-size: 72px;92 font-weight: 800;93 letter-spacing: -0.5px;94 line-height: 1.15;95 }96 .collapse-btn {97 width: 120px;98 height: 120px;99 background: #4d4d4d;100 color: #fff;101 border-radius: 60px;102 display: flex;103 align-items: center;104 justify-content: center;105 }106 .subtitle {107 margin-top: 10px;108 font-size: 36px;109 color: #7a7a7a;110 letter-spacing: 2px;111 }112 113 /* Tabs */114 .tabs {115 display: flex;116 padding: 24px 24px 0 24px;117 border-bottom: 1px solid #eee;118 }119 .tab {120 flex: 1;121 padding: 18px 20px;122 text-align: left;123 }124 .tab .label {125 font-size: 48px;126 font-weight: 700;127 color: #333;128 }129 .tab .meta {130 margin-top: 6px;131 font-size: 34px;132 color: #7c7c7c;133 }134 .tab.active .label {135 color: #2aa08c;136 }137 .tab.active {138 border-bottom: 6px solid #2aa08c;139 }140 141 /* Card - Update Collection */142 .card {143 margin: 28px 24px 12px 24px;144 border-top: 1px solid #eee;145 }146 .update-row {147 margin: 24px 0 18px 0;148 padding: 28px 24px;149 border: 1px solid #e6e6e6;150 border-radius: 16px;151 display: flex;152 align-items: center;153 gap: 22px;154 }155 .folder-ico {156 width: 64px; height: 64px; border-radius: 12px;157 background: #e8f5f2; color: #2aa08c;158 display: flex; align-items: center; justify-content: center;159 }160 .update-text {161 font-size: 46px;162 font-weight: 700;163 }164 165 /* List rows */166 .list {167 margin: 10px 24px;168 border-top: 1px solid #eee;169 }170 .row {171 display: flex;172 align-items: center;173 justify-content: space-between;174 padding: 34px 8px;175 border-bottom: 1px solid #eee;176 }177 .row-left {178 display: flex; align-items: center; gap: 26px;179 font-size: 44px; color: #333;180 }181 .row-right {182 font-size: 44px; color: #222; font-weight: 600;183 }184 .ico {185 width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;186 }187 188 /* Bottom gesture bar */189 .gesture {190 position: absolute;191 left: 0; right: 0; bottom: 24px;192 height: 10px;193 display: flex; justify-content: center;194 }195 .gesture .pill {196 width: 360px; height: 12px; background: #cccccc; border-radius: 6px;197 }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Simplified status bar -->204 <div class="status-bar">205 <div class="status-left">1:10</div>206 <div class="status-right">207 <div class="status-dot"></div>208 <div class="status-dot"></div>209 <div class="status-dot"></div>210 </div>211 </div>212 213 <!-- Hero image placeholder -->214 <div class="hero">215 [IMG: Blue cocktail drink close-up]216 <!-- Back button -->217 <div class="circle-btn left">218 <svg width="48" height="48" viewBox="0 0 24 24" fill="#1f1f1f" xmlns="http://www.w3.org/2000/svg">219 <path d="M15.5 19.5L8 12l7.5-7.5-1.5-1.5L5 12l9 9 1.5-1.5z"/>220 </svg>221 </div>222 <!-- External/open button -->223 <div class="circle-btn right">224 <svg width="48" height="48" viewBox="0 0 24 24" fill="#1f1f1f" xmlns="http://www.w3.org/2000/svg">225 <path d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z"/>226 <path d="M5 5h6v2H7v10h10v-4h2v6H5V5z"/>227 </svg>228 </div>229 </div>230 231 <!-- Content -->232 <div class="content">233 <div class="title-wrap">234 <div class="title-row">235 <div class="title">Blue Hawaiian</div>236 <div class="collapse-btn">237 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">238 <rect x="4" y="11" width="16" height="2" rx="1" fill="#ffffff"/>239 </svg>240 </div>241 </div>242 <div class="subtitle">BAKING BEAUTY</div>243 </div>244 245 <!-- Tabs -->246 <div class="tabs">247 <div class="tab active">248 <div class="label">Overview</div>249 </div>250 <div class="tab">251 <div class="label">Ingredients</div>252 <div class="meta">6 items</div>253 </div>254 <div class="tab">255 <div class="label">Directions</div>256 <div class="meta">5m</div>257 </div>258 </div>259 260 <!-- Card / Update collection -->261 <div class="card">262 <div class="update-row">263 <div class="folder-ico">264 <svg width="36" height="36" viewBox="0 0 24 24" fill="#2aa08c" xmlns="http://www.w3.org/2000/svg">265 <path d="M10 4l2 2h8a2 2 0 012 2v9a3 3 0 01-3 3H5a3 3 0 01-3-3V6a2 2 0 012-2h6z" opacity=".25"/>266 <path d="M4 8h16v10a2 2 0 01-2 2H6a2 2 0 01-2-2V8z"/>267 </svg>268 </div>269 <div class="update-text">Update Collection</div>270 </div>271 </div>272 273 <!-- List of overview items -->274 <div class="list">275 <div class="row">276 <div class="row-left">277 <span class="ico">278 <svg width="44" height="44" viewBox="0 0 24 24" fill="#e67e22" xmlns="http://www.w3.org/2000/svg">279 <path d="M12 17.3l-5.5 3.3 1.5-6.1L3 9.7l6.2-.5L12 3l2.8 6.2 6.2.5-5 4.8 1.5 6.1L12 17.3z"/>280 </svg>281 </span>282 <span>Rating</span>283 </div>284 <div class="row-right">4.83</div>285 </div>286 287 <div class="row">288 <div class="row-left">289 <span class="ico">290 <svg width="44" height="44" viewBox="0 0 24 24" fill="#b36b2c" xmlns="http://www.w3.org/2000/svg">291 <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/>292 </svg>293 </span>294 <span>Servings</span>295 </div>296 <div class="row-right">1</div>297 </div>298 299 <div class="row">300 <div class="row-left">301 <span class="ico">302 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ff6f3d" xmlns="http://www.w3.org/2000/svg">303 <path d="M12 2C8 2 5 5.1 5 9.1c0 3.1 1.9 5.7 4.6 7-1 1.1-2.6 2-4.6 2.4.7.3 2.8.5 6 .5s5.3-.2 6-.5c-2-.4-3.6-1.3-4.6-2.4 2.7-1.3 4.6-4 4.6-7C19 5.1 16 2 12 2z"/>304 </svg>305 </span>306 <span>Calories per serving</span>307 </div>308 <div class="row-right">290</div>309 </div>310 311 <div class="row">312 <div class="row-left">313 <span class="ico">314 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ff8c40" xmlns="http://www.w3.org/2000/svg">315 <path d="M12 20a8 8 0 100-16 8 8 0 000 16zm.8-13h-1.6v6l5.2 3.1.8-1.3-4.4-2.6V7z"/>316 </svg>317 </span>318 <span>Total time</span>319 </div>320 <div class="row-right">5m</div>321 </div>322 </div>323 </div>324 325 <!-- Bottom gesture bar -->326 <div class="gesture"><div class="pill"></div></div>327</div>328</body>329</html>