GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3 <meta charset="UTF-8">4 <title>LeafSnap Permission Prompt UI</title>5 <meta name="viewport" content="width=1080, initial-scale=1.0">6 <style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: radial-gradient(circle at 540px -200px, #2a6a4a 0%, #234f3a 40%, #1b3a2b 100%);14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 height: 120px;23 width: 100%;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 color: #e9f2ec;29 font-weight: 700;30 font-size: 44px;31 }32 .status-left,33 .status-right {34 display: flex;35 align-items: center;36 gap: 26px;37 }38 .status-left { flex: 1; }39 .status-right { justify-content: flex-end; }40 41 .icon-circle {42 width: 38px; height: 38px; border-radius: 19px; background: rgba(255,255,255,0.12);43 border: 1px solid rgba(255,255,255,0.2);44 }45 .wifi-icon, .battery-icon {46 width: 52px; height: 36px;47 }48 .wifi-icon svg path, .battery-icon svg rect, .battery-icon svg path { fill: none; stroke: #ffffff; stroke-width: 6; }49 50 /* App header */51 .app-header {52 position: absolute;53 top: 170px;54 left: 48px;55 display: flex;56 align-items: center;57 gap: 20px;58 color: #d4ead7;59 font-size: 60px;60 font-weight: 700;61 }62 .leaf-icon {63 width: 56px; height: 56px; background: rgba(255,255,255,0.15);64 border-radius: 28px; display: flex; align-items: center; justify-content: center;65 }66 .dropdown {67 width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent;68 border-top: 22px solid #d4ead7; margin-left: 8px;69 }70 71 /* Quick action tiles */72 .tiles {73 position: absolute;74 top: 410px;75 left: 48px;76 right: 48px;77 display: flex;78 gap: 44px;79 }80 .tile {81 flex: 1;82 height: 220px;83 border-radius: 36px;84 display: flex;85 align-items: center;86 justify-content: center;87 box-shadow: 0 14px 24px rgba(0,0,0,0.25);88 }89 .tile.orange { background: linear-gradient(#d37d2d, #b5631c); }90 .tile.pink { background: linear-gradient(#a85163, #8e3c50); }91 .tile.blue { background: linear-gradient(#335ea3, #274e8b); }92 .tile.purple { background: linear-gradient(#7a4a88, #5a346a); }93 94 .tile svg { width: 96px; height: 96px; stroke: #f3f6ff; fill: none; stroke-width: 8; }95 96 /* Premium banner */97 .premium-banner {98 position: absolute;99 bottom: 320px;100 left: 48px;101 right: 48px;102 height: 220px;103 background: #2f9b5f;104 border-radius: 44px;105 display: flex;106 align-items: center;107 padding: 0 40px;108 box-shadow: 0 16px 28px rgba(0,0,0,0.25);109 }110 .premium-badge {111 width: 180px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;112 border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700;113 }114 .premium-text {115 margin-left: 32px; color: #eaffef;116 }117 .premium-text .title { font-size: 64px; font-weight: 800; margin-bottom: 10px; }118 .premium-text .subtitle { font-size: 34px; opacity: 0.9; }119 .premium-arrow {120 margin-left: auto;121 width: 120px; height: 120px; border-radius: 60px; background: rgba(255,255,255,0.22);122 display: flex; align-items: center; justify-content: center;123 }124 .premium-arrow svg { width: 54px; height: 54px; fill: none; stroke: #ffffff; stroke-width: 12; }125 126 /* Bottom navigation */127 .bottom-nav {128 position: absolute;129 bottom: 40px;130 left: 0;131 width: 100%;132 height: 140px;133 display: flex;134 align-items: center;135 justify-content: space-around;136 color: #f2fff7;137 background: rgba(0,0,0,0.0);138 }139 .nav-item {140 width: 200px; text-align: center; font-size: 36px;141 color: #eaf5ef;142 }143 .nav-item .icon {144 width: 84px; height: 84px; margin: 0 auto 12px auto;145 }146 .nav-item svg { width: 84px; height: 84px; stroke: #f2fff7; fill: none; stroke-width: 8; }147 148 /* Permission modal overlay */149 .modal-overlay {150 position: absolute;151 top: 0; left: 0; right: 0; bottom: 0;152 background: rgba(0,0,0,0.6);153 display: flex; align-items: center; justify-content: center;154 }155 .modal {156 width: 920px;157 background: #2f3135;158 border-radius: 48px;159 box-shadow: 0 28px 48px rgba(0,0,0,0.5);160 padding: 60px 40px 50px 40px;161 text-align: center;162 }163 .modal .camera {164 width: 90px; height: 90px; margin: 10px auto 20px auto;165 display: flex; align-items: center; justify-content: center;166 }167 .modal-title {168 font-size: 48px; line-height: 64px; font-weight: 800; color: #ffffff;169 margin: 20px 36px 40px 36px;170 }171 .modal-title .app-name { font-weight: 900; }172 .modal .btn {173 width: 840px;174 height: 140px;175 margin: 22px auto;176 background: #cfe6ff;177 color: #0f1f2d;178 border: none;179 border-radius: 34px;180 font-size: 44px;181 font-weight: 800;182 letter-spacing: 0.2px;183 cursor: default;184 display: flex; align-items: center; justify-content: center;185 }186 .modal .btn:last-child { margin-bottom: 10px; }187 </style>188</head>189<body>190 <div id="render-target">191 192 <!-- Status bar -->193 <div class="status-bar">194 <div class="status-left">195 <div>11:09</div>196 <div class="icon-circle"></div>197 <div class="icon-circle"></div>198 <div class="icon-circle"></div>199 <div class="icon-circle"></div>200 </div>201 <div class="status-right">202 <div class="wifi-icon">203 <svg viewBox="0 0 60 40">204 <path d="M6 20c10-9 28-9 38 0"></path>205 <path d="M12 26c7-6 19-6 26 0"></path>206 <path d="M20 32c4-3 10-3 14 0"></path>207 <circle cx="27" cy="36" r="2" fill="#fff"></circle>208 </svg>209 </div>210 <div class="battery-icon">211 <svg viewBox="0 0 60 40">212 <rect x="6" y="8" width="44" height="24" rx="4"></rect>213 <rect x="50" y="14" width="6" height="12" rx="2"></rect>214 <path d="M10 12h34v16H10z" fill="#ffffff"></path>215 </svg>216 </div>217 </div>218 </div>219 220 <!-- App header -->221 <div class="app-header">222 <div class="leaf-icon">223 <svg viewBox="0 0 24 24" width="36" height="36">224 <path d="M3 14c8-7 13-5 18-10-1 5-4 9-9 12-4 3-7 2-9-2z" fill="#cfe7cf"></path>225 </svg>226 </div>227 <div>World</div>228 <div class="dropdown"></div>229 </div>230 231 <!-- Quick action tiles -->232 <div class="tiles">233 <div class="tile orange">234 <svg viewBox="0 0 100 100">235 <rect x="20" y="22" width="60" height="56" rx="12"></rect>236 <line x1="20" y1="42" x2="80" y2="42"></line>237 </svg>238 </div>239 <div class="tile pink">240 <svg viewBox="0 0 100 100">241 <path d="M50 20c-16 0-28 20-18 34 6 9 13 16 18 22 5-6 12-13 18-22 10-14-2-34-18-34z"></path>242 </svg>243 </div>244 <div class="tile blue">245 <svg viewBox="0 0 100 100">246 <path d="M20 74L50 22l30 52H20z"></path>247 <line x1="50" y1="22" x2="50" y2="74"></line>248 </svg>249 </div>250 <div class="tile purple">251 <svg viewBox="0 0 100 100">252 <circle cx="50" cy="44" r="18"></circle>253 <path d="M20 78c0-16 60-16 60 0"></path>254 </svg>255 </div>256 </div>257 258 <!-- Premium banner -->259 <div class="premium-banner">260 <div class="premium-badge">[IMG: Premium Badge]</div>261 <div class="premium-text">262 <div class="title">Go Premium</div>263 <div class="subtitle">Tap to upgrade your account</div>264 </div>265 <div class="premium-arrow">266 <svg viewBox="0 0 60 60">267 <path d="M20 18l20 12-20 12" stroke-linecap="round" stroke-linejoin="round"></path>268 </svg>269 </div>270 </div>271 272 <!-- Bottom navigation -->273 <div class="bottom-nav">274 <div class="nav-item">275 <div class="icon">276 <svg viewBox="0 0 64 64">277 <path d="M8 36l24-20 24 20"></path>278 <rect x="16" y="34" width="32" height="20" rx="4"></rect>279 </svg>280 </div>281 <div>Home</div>282 </div>283 <div class="nav-item">284 <div class="icon">285 <svg viewBox="0 0 64 64">286 <path d="M32 14c-10 0-18 13-12 22 4 6 8 10 12 14 4-4 8-8 12-14 6-9-2-22-12-22z"></path>287 </svg>288 </div>289 <div>My Plant</div>290 </div>291 <div class="nav-item">292 <div class="icon">293 <svg viewBox="0 0 64 64">294 <path d="M20 18h24v10H20z"></path>295 <path d="M26 28l-2 14c-1 6 8 6 8 0l-2-14"></path>296 </svg>297 </div>298 <div>Tasks</div>299 </div>300 <div class="nav-item">301 <div class="icon">302 <svg viewBox="0 0 64 64">303 <rect x="10" y="10" width="16" height="16" rx="3"></rect>304 <rect x="38" y="10" width="16" height="16" rx="3"></rect>305 <rect x="10" y="38" width="16" height="16" rx="3"></rect>306 <rect x="38" y="38" width="16" height="16" rx="3"></rect>307 </svg>308 </div>309 <div>More</div>310 </div>311 </div>312 313 <!-- Permission modal -->314 <div class="modal-overlay">315 <div class="modal">316 <div class="camera">317 <svg viewBox="0 0 60 60">318 <rect x="8" y="16" width="36" height="26" rx="6" fill="#91b8ff" stroke="#91b8ff"></rect>319 <circle cx="26" cy="29" r="7" fill="#2f3135" stroke="#cfe6ff" stroke-width="4"></circle>320 <polygon points="44,22 56,28 56,30 44,36" fill="#91b8ff"></polygon>321 </svg>322 </div>323 <div class="modal-title">324 Allow <span class="app-name">LeafSnap</span> to take pictures and record video?325 </div>326 <div class="btn">While using the app</div>327 <div class="btn">Only this time</div>328 <div class="btn">Don't allow</div>329 </div>330 </div>331 332 </div>333</body>334</html>