GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>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: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0; left: 0;20 width: 100%;21 height: 120px;22 background: #0a0a0a;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 }29 .status-left { font-size: 42px; font-weight: 600; }30 .status-right {31 margin-left: auto;32 display: flex; align-items: center; gap: 26px;33 }34 .status-icon { width: 42px; height: 42px; }35 .battery {36 display: flex; align-items: center; gap: 10px; color: #fff; font-size: 34px;37 }38 39 /* Hero section */40 .hero {41 position: absolute;42 top: 120px; left: 0;43 width: 100%;44 height: 820px;45 }46 .hero-img {47 position: absolute;48 left: 0; top: 0;49 width: 100%; height: 100%;50 background: #E0E0E0;51 border: 1px solid #BDBDBD;52 display: flex; justify-content: center; align-items: center;53 color: #757575; font-size: 34px;54 }55 .hero-overlay {56 position: absolute;57 inset: 0;58 background: rgba(0,0,0,0.45);59 }60 .close-btn {61 position: absolute; left: 36px; top: 40px;62 width: 60px; height: 60px; border-radius: 30px;63 display: flex; justify-content: center; align-items: center;64 }65 .hero-content {66 position: absolute; left: 48px; bottom: 140px; right: 48px;67 color: #fff;68 }69 .hero-title {70 font-size: 84px; font-weight: 800; line-height: 1.1; margin-bottom: 24px;71 }72 .hero-sub {73 font-size: 36px; opacity: 0.9;74 }75 76 /* Underlying form content */77 .content {78 position: absolute;79 top: 980px; left: 0;80 width: 100%;81 padding: 0 48px;82 box-sizing: border-box;83 color: #222;84 }85 .row {86 display: flex; align-items: center; justify-content: space-between;87 border-bottom: 1px solid #e1e1e1;88 padding: 36px 0;89 font-size: 40px;90 }91 .chip {92 display: inline-flex; align-items: center; gap: 14px;93 background: #1976d2; color: #fff; border-radius: 30px;94 padding: 18px 26px; font-size: 34px; margin-left: 18px;95 }96 .chip svg { width: 34px; height: 34px; }97 .toggle {98 width: 110px; height: 60px; border-radius: 30px; background: #e0e0e0; position: relative;99 }100 .toggle::before {101 content: ""; position: absolute; top: 6px; left: 6px; width: 48px; height: 48px; border-radius: 24px; background: #fff;102 box-shadow: 0 1px 3px rgba(0,0,0,0.25);103 }104 .btn-bar {105 position: absolute; bottom: 140px; left: 0; width: 100%;106 height: 160px; background: #123d7a; display: flex; align-items: center; justify-content: center;107 color: #fff; font-size: 48px; font-weight: 700;108 }109 110 /* Gesture pill */111 .gesture {112 position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);113 width: 220px; height: 16px; background: #D0D0D0; border-radius: 8px;114 }115 116 /* Modal overlay */117 .overlay {118 position: absolute; inset: 0;119 background: rgba(0,0,0,0.45);120 }121 .modal {122 position: absolute; left: 120px; top: 820px;123 width: 840px; height: 980px; background: #fff; border-radius: 16px;124 box-shadow: 0 30px 60px rgba(0,0,0,0.5);125 overflow: hidden;126 }127 .modal-header {128 background: #1976d2; color: #fff; height: 260px; padding: 24px 40px; box-sizing: border-box;129 display: flex; align-items: flex-end; gap: 24px;130 }131 .time-big { font-size: 160px; font-weight: 700; letter-spacing: 4px; line-height: 1; }132 .ampm {133 margin-left: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 24px;134 }135 .ampm span { font-size: 48px; font-weight: 700; opacity: 0.9; }136 .ampm .pm { opacity: 0.6; }137 138 .modal-body {139 padding: 30px 40px; box-sizing: border-box;140 }141 .clock {142 position: relative; width: 640px; height: 640px; margin: 0 auto; background: #efefef; border-radius: 50%;143 border: 1px solid #ddd;144 }145 .clock .center-dot {146 position: absolute; left: 50%; top: 50%;147 width: 16px; height: 16px; background: #1976d2; border-radius: 50%;148 transform: translate(-50%,-50%);149 }150 .clock .hand {151 position: absolute; left: 50%; top: calc(50% - 240px);152 width: 4px; height: 240px; background: #1976d2; transform: translateX(-50%);153 }154 .clock .tip {155 position: absolute; left: 50%; top: -20px; transform: translate(-50%, 0);156 width: 100px; height: 100px; background: #1976d2; color: #fff; border-radius: 50%;157 display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700;158 box-shadow: 0 4px 10px rgba(0,0,0,0.25);159 }160 .label { position: absolute; font-size: 40px; color: #2d2d2d; }161 /* place minute labels roughly */162 .m00 { left: 50%; top: 12px; transform: translateX(-50%); }163 .m05 { right: 70px; top: 120px; }164 .m10 { right: 46px; top: 240px; }165 .m15 { right: 86px; top: 360px; }166 .m20 { right: 160px; top: 452px; }167 .m25 { right: 260px; top: 516px; }168 .m30 { left: 50%; bottom: 18px; transform: translateX(-50%); }169 .m35 { left: 260px; top: 516px; }170 .m40 { left: 160px; top: 452px; }171 .m45 { left: 86px; top: 360px; }172 .m50 { left: 46px; top: 240px; }173 .m55 { left: 70px; top: 120px; }174 175 .modal-footer {176 padding: 26px 40px; display: flex; align-items: center; justify-content: space-between;177 font-size: 44px; color: #1976d2;178 }179 .keyboard-icon { width: 64px; height: 44px; }180</style>181</head>182<body>183<div id="render-target">184 185 <!-- Status bar -->186 <div class="status-bar">187 <div class="status-left">5:45</div>188 <div class="status-right">189 <!-- small circle icon -->190 <svg class="status-icon" viewBox="0 0 24 24">191 <circle cx="12" cy="12" r="5" fill="#fff"></circle>192 </svg>193 <!-- wifi icon -->194 <svg class="status-icon" viewBox="0 0 24 24">195 <path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" />196 <path d="M5 12c4-4 10-4 14 0" stroke="#fff" stroke-width="2" fill="none" />197 <circle cx="12" cy="16" r="2" fill="#fff"></circle>198 </svg>199 <!-- battery -->200 <div class="battery">201 <svg class="status-icon" viewBox="0 0 26 24">202 <rect x="2" y="6" width="18" height="12" stroke="#fff" fill="none" stroke-width="2"/>203 <rect x="4" y="8" width="14" height="8" fill="#fff"/>204 <rect x="20" y="9" width="4" height="6" fill="#fff"/>205 </svg>206 95%207 </div>208 </div>209 </div>210 211 <!-- Hero -->212 <div class="hero">213 <div class="hero-img">[IMG: Blurred subway background]</div>214 <div class="hero-overlay"></div>215 <div class="close-btn">216 <svg width="52" height="52" viewBox="0 0 24 24">217 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#fff" stroke-width="2" />218 </svg>219 </div>220 <div class="hero-content">221 <div class="hero-title">When would you like to learn?</div>222 <div class="hero-sub">Research shows that studying at the same time each day helps form habits.</div>223 </div>224 </div>225 226 <!-- Underlying Form Content -->227 <div class="content">228 <div class="row">229 <div>Days</div>230 <div>231 <span class="chip">232 <svg viewBox="0 0 24 24">233 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>234 <path d="M7 12 l3 3 l6-6" stroke="#fff" stroke-width="2" fill="none"></path>235 </svg>236 Mon237 </span>238 <span class="chip">239 <svg viewBox="0 0 24 24">240 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>241 <path d="M7 12 l3 3 l6-6" stroke="#fff" stroke-width="2" fill="none"></path>242 </svg>243 Sun244 </span>245 </div>246 </div>247 <div class="row">248 <div>Time</div>249 <div style="font-weight:700;">11:00 AM</div>250 </div>251 <div class="row">252 <div>Minutes</div>253 <div style="opacity:0.7;">5</div>254 </div>255 <div class="row">256 <div>Notifications</div>257 <div class="toggle"></div>258 </div>259 <div class="row" style="border-bottom:none;">260 <div>Add study reminders to my calendar</div>261 <div class="toggle" style="background:#dcdcdc;"></div>262 </div>263 </div>264 265 <!-- Continue button bar -->266 <div class="btn-bar">Continue</div>267 268 <!-- Gesture bar -->269 <div class="gesture"></div>270 271 <!-- Overlay with modal time picker -->272 <div class="overlay"></div>273 <div class="modal">274 <div class="modal-header">275 <div class="time-big">11:00</div>276 <div class="ampm">277 <span>AM</span>278 <span class="pm">PM</span>279 </div>280 </div>281 <div class="modal-body">282 <div class="clock">283 <div class="tip">00</div>284 <div class="hand"></div>285 <div class="center-dot"></div>286 287 <div class="label m55">55</div>288 <div class="label m50">50</div>289 <div class="label m45">45</div>290 <div class="label m40">40</div>291 <div class="label m35">35</div>292 <div class="label m30">30</div>293 <div class="label m25">25</div>294 <div class="label m20">20</div>295 <div class="label m15">15</div>296 <div class="label m10">10</div>297 <div class="label m05">05</div>298 <div class="label m00">00</div>299 </div>300 </div>301 <div class="modal-footer">302 <svg class="keyboard-icon" viewBox="0 0 24 24">303 <rect x="2" y="4" width="20" height="16" stroke="#1976d2" fill="none" stroke-width="2"></rect>304 <rect x="5" y="8" width="2" height="2" fill="#1976d2"></rect>305 <rect x="9" y="8" width="2" height="2" fill="#1976d2"></rect>306 <rect x="13" y="8" width="2" height="2" fill="#1976d2"></rect>307 <rect x="17" y="8" width="2" height="2" fill="#1976d2"></rect>308 <rect x="5" y="12" width="14" height="2" fill="#1976d2"></rect>309 </svg>310 <div style="margin-left: 160px;">CANCEL</div>311 <div style="margin-left: auto; font-weight:700;">OK</div>312 </div>313 </div>314 315</div>316</body>317</html>