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 Detail - Classic Bruschetta</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16 color: #212121;17 }18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #3f3f3f;22 color: #fff;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-weight: 600;28 letter-spacing: 0.5px;29 }30 .status-left { font-size: 42px; }31 .status-right {32 display: flex; align-items: center; gap: 26px;33 }34 .icon-dot {35 width: 14px; height: 14px; background: #fff; border-radius: 50%;36 opacity: 0.9;37 }38 .icon-wrap svg { display: block; }39 /* Hero image */40 .hero {41 position: relative;42 width: 100%;43 height: 900px;44 overflow: hidden;45 }46 .hero .img {47 position: absolute; inset: 0;48 background: #E0E0E0;49 border: 1px solid #BDBDBD;50 display: flex; align-items: center; justify-content: center;51 color: #757575; font-size: 42px; font-weight: 600;52 }53 .round-btn {54 position: absolute;55 width: 120px; height: 120px;56 background: #ffffff;57 border-radius: 60px;58 display: flex; align-items: center; justify-content: center;59 box-shadow: 0 6px 18px rgba(0,0,0,0.15);60 }61 .round-btn.left { left: 40px; top: 360px; }62 .round-btn.right { right: 40px; top: 360px; }63 /* Content card */64 .content {65 position: relative;66 background: #ffffff;67 margin-top: -40px;68 padding: 56px 56px 0 56px;69 }70 .title-row {71 display: flex; align-items: center; justify-content: space-between;72 gap: 20px;73 }74 .title {75 font-size: 72px; font-weight: 700; margin: 0 0 18px 0; color: #2b2b2b;76 }77 .subtitle {78 font-size: 36px; letter-spacing: 2px; color: #8b8b8b; margin-top: 8px;79 }80 .fab {81 width: 120px; height: 120px; border-radius: 60px; background: #28b7a6;82 display: flex; align-items: center; justify-content: center;83 box-shadow: 0 8px 20px rgba(0,0,0,0.18);84 flex-shrink: 0;85 }86 /* Tabs */87 .tabs {88 margin-top: 56px;89 border-bottom: 2px solid #e6e6e6;90 padding-bottom: 16px;91 }92 .tab-row {93 display: flex; align-items: flex-end; gap: 80px;94 }95 .tab {96 position: relative;97 }98 .tab .label {99 font-size: 48px; font-weight: 700; color: #2d2d2d;100 }101 .tab.active .label { color: #2bb3a6; }102 .tab .meta {103 margin-top: 14px; font-size: 34px; color: #7b7b7b;104 }105 .tab.active::after {106 content: "";107 position: absolute;108 left: 0; right: 0; bottom: -18px;109 height: 8px; background: #2bb3a6; border-radius: 4px;110 }111 /* Bottom gesture bar */112 .nav-bottom {113 position: absolute; left: 0; right: 0; bottom: 0;114 height: 140px; background: #3f3f3f;115 display: flex; align-items: center; justify-content: center;116 }117 .home-pill {118 width: 220px; height: 12px; background: #e9e9e9; border-radius: 8px;119 opacity: 0.95;120 }121</style>122</head>123<body>124<div id="render-target">125 <!-- Status Bar -->126 <div class="status-bar">127 <div class="status-left">6:14</div>128 <div class="status-right">129 <div class="icon-dot"></div>130 <div class="icon-dot"></div>131 <div class="icon-dot"></div>132 <!-- WiFi icon -->133 <div class="icon-wrap">134 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">135 <path d="M2 9a14 14 0 0 1 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>136 <path d="M5 12a10 10 0 0 1 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>137 <path d="M8 15a6 6 0 0 1 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>138 <circle cx="12" cy="19" r="1.5" fill="#fff"/>139 </svg>140 </div>141 <!-- Battery icon -->142 <div class="icon-wrap">143 <svg width="46" height="46" viewBox="0 0 26 26" fill="none">144 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>145 <rect x="21" y="10" width="3" height="4" rx="1" fill="#fff"/>146 <rect x="4" y="8" width="14" height="8" fill="#fff"/>147 </svg>148 </div>149 </div>150 </div>151 152 <!-- Hero section with image -->153 <div class="hero">154 <div class="img">[IMG: Bruschetta photo]</div>155 156 <!-- Back button -->157 <div class="round-btn left">158 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">159 <path d="M15 6L9 12l6 6" stroke="#333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>160 </svg>161 </div>162 163 <!-- External/fullscreen icon -->164 <div class="round-btn right">165 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">166 <path d="M14 5h5v5" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>167 <path d="M10 19H5v-5" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>168 <path d="M14 5l-3 3M10 19l3-3" stroke="#333" stroke-width="2.2" stroke-linecap="round"/>169 </svg>170 </div>171 </div>172 173 <!-- Content card -->174 <div class="content">175 <div class="title-row">176 <div>177 <h1 class="title">Classic Bruschetta</h1>178 <div class="subtitle">LA BELLA VITA CUCINA</div>179 </div>180 <div class="fab">181 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">182 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>183 </svg>184 </div>185 </div>186 187 <!-- Tabs -->188 <div class="tabs">189 <div class="tab-row">190 <div class="tab active">191 <div class="label">Overview</div>192 </div>193 <div class="tab">194 <div class="label">Ingredients</div>195 <div class="meta">9 items</div>196 </div>197 <div class="tab">198 <div class="label">Directions</div>199 <div class="meta">30m</div>200 </div>201 </div>202 </div>203 </div>204 205 <!-- Spacer content area (blank like screenshot) -->206 <div style="height: 1150px; background: #ffffff;"></div>207 208 <!-- Bottom gesture bar -->209 <div class="nav-bottom">210 <div class="home-pill"></div>211 </div>212</div>213</body>214</html>