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>Collections UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Status bar (mock) */18 .status-bar {19 height: 130px;20 background: #101010;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 box-sizing: border-box;26 font-size: 42px;27 justify-content: space-between;28 }29 .status-left { display: flex; align-items: center; gap: 22px; }30 .sb-dot {31 width: 14px; height: 14px; background: #fff; border-radius: 50%;32 opacity: 0.9;33 }34 .status-right { display: flex; align-items: center; gap: 24px; }35 .wifi {36 width: 44px; height: 44px;37 border: 4px solid #fff; border-radius: 50%;38 position: relative; opacity: 0.9;39 }40 .battery {41 width: 56px; height: 30px; border: 4px solid #fff; border-radius: 6px; position: relative; opacity: 0.9;42 }43 .battery::after {44 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 14px; background: #fff; border-radius: 2px;45 }46 47 /* Header */48 .header {49 position: relative;50 padding: 40px 40px 10px 56px;51 }52 .title {53 font-size: 86px;54 font-weight: 700;55 color: #2B2B2B;56 line-height: 1.1;57 margin: 22px 0 18px 0;58 }59 .close-btn {60 position: absolute;61 right: 36px;62 top: 46px;63 width: 72px; height: 72px;64 display: flex; align-items: center; justify-content: center;65 cursor: default;66 }67 68 /* New collection row */69 .new-collection {70 display: flex;71 align-items: center;72 gap: 24px;73 padding: 28px 56px;74 font-size: 48px;75 color: #3B3B3B;76 }77 .divider {78 height: 2px; background: #EAEAEA; margin: 0 56px;79 }80 81 /* List */82 .list {83 padding: 10px 56px;84 }85 .row {86 display: flex; align-items: center; gap: 28px;87 padding: 32px 0;88 }89 .row .label {90 font-size: 50px; color: #4A4A4A;91 }92 .row.checked .label { color: #2c6965; font-weight: 600; }93 .spacer-large { height: 40px; }94 95 /* Icons */96 .icon {97 width: 58px; height: 58px;98 display: inline-flex;99 align-items: center; justify-content: center;100 }101 102 /* Bottom button */103 .bottom-area {104 position: absolute;105 left: 0; right: 0; bottom: 120px;106 display: flex; justify-content: center;107 }108 .btn-primary {109 width: 780px; height: 128px; border-radius: 64px;110 background: #2E7D78;111 color: #fff; font-size: 52px; font-weight: 700;112 display: flex; align-items: center; justify-content: center;113 box-shadow: 0 6px 12px rgba(0,0,0,0.08);114 }115 116 /* Gesture bar */117 .nav-bar {118 position: absolute; left: 0; right: 0; bottom: 0;119 height: 110px; background: #0A0A0A;120 display: flex; justify-content: center; align-items: center;121 }122 .home-indicator {123 width: 250px; height: 10px; background: #D6D6D6; border-radius: 6px;124 opacity: 0.9;125 }126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Mock status bar -->132 <div class="status-bar">133 <div class="status-left">134 <div>6:16</div>135 <div class="sb-dot"></div>136 <div class="sb-dot"></div>137 <div class="sb-dot"></div>138 </div>139 <div class="status-right">140 <div class="wifi"></div>141 <div class="battery"></div>142 </div>143 </div>144 145 <!-- Header with title and close -->146 <div class="header">147 <div class="title">Collections</div>148 <div class="close-btn">149 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">150 <path d="M6 6l12 12M18 6L6 18" stroke="#5C5C5C" stroke-width="2.4" stroke-linecap="round"/>151 </svg>152 </div>153 </div>154 155 <!-- New Collection -->156 <div class="new-collection">157 <div class="icon">158 <svg width="58" height="58" viewBox="0 0 24 24" fill="none">159 <circle cx="12" cy="12" r="9.5" stroke="#2E7D78" stroke-width="2"/>160 <path d="M12 7v10M7 12h10" stroke="#2E7D78" stroke-width="2" stroke-linecap="round"/>161 </svg>162 </div>163 <div class="label">New Collection</div>164 </div>165 <div class="divider"></div>166 167 <!-- List of collections -->168 <div class="list">169 <div class="row checked">170 <div class="icon">171 <svg width="58" height="58" viewBox="0 0 24 24" fill="none">172 <path d="M5 12.5l4.2 4.2L19 7" stroke="#2E7D78" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>173 </svg>174 </div>175 <div class="label">Saved</div>176 </div>177 178 <div class="row">179 <div class="icon">180 <svg width="58" height="58" viewBox="0 0 24 24" fill="none">181 <circle cx="12" cy="12" r="9.5" stroke="#BDBDBD" stroke-width="2.2"/>182 </svg>183 </div>184 <div class="label">Breakfasts</div>185 </div>186 187 <div class="row">188 <div class="icon">189 <svg width="58" height="58" viewBox="0 0 24 24" fill="none">190 <circle cx="12" cy="12" r="9.5" stroke="#BDBDBD" stroke-width="2.2"/>191 </svg>192 </div>193 <div class="label">Desserts</div>194 </div>195 196 <div class="row">197 <div class="icon">198 <svg width="58" height="58" viewBox="0 0 24 24" fill="none">199 <circle cx="12" cy="12" r="9.5" stroke="#BDBDBD" stroke-width="2.2"/>200 </svg>201 </div>202 <div class="label">Dinners</div>203 </div>204 205 <div class="row">206 <div class="icon">207 <svg width="58" height="58" viewBox="0 0 24 24" fill="none">208 <circle cx="12" cy="12" r="9.5" stroke="#BDBDBD" stroke-width="2.2"/>209 </svg>210 </div>211 <div class="label">Drinks</div>212 </div>213 214 <div class="row">215 <div class="icon">216 <svg width="58" height="58" viewBox="0 0 24 24" fill="none">217 <circle cx="12" cy="12" r="9.5" stroke="#BDBDBD" stroke-width="2.2"/>218 </svg>219 </div>220 <div class="label">Sides</div>221 </div>222 </div>223 224 <!-- Bottom primary button -->225 <div class="bottom-area">226 <div class="btn-primary">Done</div>227 </div>228 229 <!-- Gesture navigation bar -->230 <div class="nav-bar">231 <div class="home-indicator"></div>232 </div>233 234</div>235</body>236</html>