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>Photo Picker UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #000000;15 font-family: Arial, Helvetica, sans-serif;16 color: #e8e3d6;17 }18 19 /* Status bar */20 .status-bar {21 height: 96px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #ffffff;27 font-weight: 600;28 font-size: 38px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 28px;34 }35 .icon-signal, .icon-wifi, .icon-battery {36 display: inline-flex;37 align-items: center;38 justify-content: center;39 }40 .icon-signal svg { width: 42px; height: 42px; }41 .icon-wifi svg { width: 48px; height: 36px; }42 .icon-battery svg { width: 60px; height: 32px; }43 44 /* Picker sheet */45 .picker {46 position: absolute;47 top: 96px;48 left: 0;49 right: 0;50 bottom: 0;51 background: #3b3629;52 border-top-left-radius: 48px;53 border-top-right-radius: 48px;54 }55 .notch {56 width: 160px;57 height: 10px;58 background: #6e695a;59 border-radius: 6px;60 margin: 18px auto 26px auto;61 }62 .info-text {63 text-align: center;64 font-size: 36px;65 color: #e8dfce;66 margin-bottom: 38px;67 }68 69 .top-actions {70 display: flex;71 align-items: center;72 padding: 0 36px;73 margin-bottom: 26px;74 }75 .close-btn {76 width: 72px;77 height: 72px;78 border-radius: 36px;79 display: flex;80 align-items: center;81 justify-content: center;82 margin-right: 18px;83 }84 .close-btn svg { width: 40px; height: 40px; }85 .segmented {86 display: flex;87 gap: 24px;88 }89 .pill {90 padding: 22px 40px;91 font-size: 34px;92 border-radius: 42px;93 border: 1px solid #2c281e;94 color: #e8dfce;95 background: #252217;96 }97 .pill.active {98 background: #f3ded2;99 color: #342f25;100 border-color: #f3ded2;101 box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;102 }103 104 /* Grid */105 .grid {106 display: grid;107 grid-template-columns: repeat(3, 1fr);108 gap: 0;109 padding-bottom: 24px;110 }111 .tile {112 height: 312px;113 border: 6px solid #484131; /* creates separators */114 display: flex;115 align-items: center;116 justify-content: center;117 background: #222225;118 color: #bfb9aa;119 font-size: 30px;120 text-align: center;121 }122 .tile.photo {123 background: #E0E0E0;124 border-color: #484131;125 color: #757575;126 }127 .tile.white {128 background: #ffffff;129 color: #606060;130 }131 132 /* Section headers */133 .section {134 padding: 18px 36px;135 color: #e8dfce;136 font-size: 42px;137 font-weight: 600;138 }139 140 .wide-photo {141 margin: 0 36px 24px 36px;142 height: 420px;143 background: #E0E0E0;144 border: 1px solid #BDBDBD;145 display: flex;146 align-items: center;147 justify-content: center;148 color: #757575;149 font-size: 32px;150 }151 152 .two-up {153 display: grid;154 grid-template-columns: 1fr 1fr;155 gap: 24px;156 margin: 0 36px;157 }158 .two-up .img {159 height: 260px;160 background: #E0E0E0;161 border: 1px solid #BDBDBD;162 display: flex;163 align-items: center;164 justify-content: center;165 color: #757575;166 font-size: 28px;167 }168 169 /* Gesture bar */170 .gesture {171 position: absolute;172 bottom: 24px;173 left: 50%;174 transform: translateX(-50%);175 width: 360px;176 height: 18px;177 background: #d9d9d9;178 border-radius: 12px;179 opacity: 0.9;180 }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status bar -->187 <div class="status-bar">188 <div class="time">2:26</div>189 <div class="status-right">190 <div class="icon-signal">191 <svg viewBox="0 0 24 24">192 <rect x="2" y="10" width="3" height="10" fill="#fff"></rect>193 <rect x="7" y="7" width="3" height="13" fill="#fff"></rect>194 <rect x="12" y="4" width="3" height="16" fill="#fff"></rect>195 <rect x="17" y="2" width="3" height="18" fill="#fff"></rect>196 </svg>197 </div>198 <div class="icon-wifi">199 <svg viewBox="0 0 24 24">200 <path d="M2 8c6-6 14-6 20 0" stroke="#fff" stroke-width="2" fill="none" />201 <path d="M6 12c4-4 8-4 12 0" stroke="#fff" stroke-width="2" fill="none" />202 <circle cx="12" cy="16" r="2" fill="#fff"></circle>203 </svg>204 </div>205 <div class="icon-battery">206 <svg viewBox="0 0 36 20">207 <rect x="1" y="3" width="30" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"></rect>208 <rect x="3" y="5" width="22" height="10" rx="2" fill="#fff"></rect>209 <rect x="32" y="7" width="3" height="6" rx="1" fill="#fff"></rect>210 </svg>211 </div>212 </div>213 </div>214 215 <!-- Picker sheet -->216 <div class="picker">217 <div class="notch"></div>218 <div class="info-text">This app can only access the photos you select</div>219 220 <div class="top-actions">221 <div class="close-btn">222 <svg viewBox="0 0 24 24">223 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#e8dfce" stroke-width="3" stroke-linecap="round"></path>224 </svg>225 </div>226 <div class="segmented">227 <div class="pill active">Photos</div>228 <div class="pill">Albums</div>229 </div>230 </div>231 232 <!-- Grid of thumbnails -->233 <div class="grid">234 <div class="tile photo">[IMG: Plant Photo]</div>235 <div class="tile photo">[IMG: Plant Photo]</div>236 <div class="tile">Empty Tile</div>237 238 <div class="tile">Empty Tile</div>239 <div class="tile white">[IMG: Sketch/Diagram Page]</div>240 <div class="tile white">[IMG: White Document]</div>241 242 <div class="tile">Empty Tile</div>243 <div class="tile white">[IMG: Document Text]</div>244 <div class="tile">Empty Tile</div>245 </div>246 247 <div class="section">Friday</div>248 <div class="wide-photo">[IMG: Library Meetup Photo]</div>249 250 <div class="section">Wed, Nov 22</div>251 <div class="two-up">252 <div class="img">[IMG: Account Setup Screen]</div>253 <div class="img">[IMG: Password Form Screenshot]</div>254 </div>255 256 <div class="gesture"></div>257 </div>258</div>259</body>260</html>