GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Research Sleep UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #2f2f2f; /* overall dark background */14 font-family: "Helvetica Neue", Arial, sans-serif;15 color: #fff;16 }17 18 /* Status bar */19 .statusbar {20 position: relative;21 height: 120px;22 background: #cf96a6;23 color: #ffffff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 box-sizing: border-box;29 font-weight: 600;30 }31 .status-left {32 display: flex;33 align-items: center;34 gap: 28px;35 font-size: 36px;36 }37 .status-icons {38 display: flex;39 align-items: center;40 gap: 24px;41 }42 .status-icon {43 width: 40px;44 height: 40px;45 border-radius: 6px;46 background: rgba(255,255,255,0.25);47 }48 .battery {49 display: flex;50 align-items: center;51 gap: 12px;52 }53 .battery svg { width: 52px; height: 28px; }54 55 /* Header / app bar */56 .appbar {57 height: 220px;58 background: #5b5b5b;59 display: flex;60 align-items: center;61 box-sizing: border-box;62 padding: 0 36px;63 }64 .appbar-left,65 .appbar-right {66 width: 120px;67 display: flex;68 justify-content: center;69 align-items: center;70 }71 .appbar-center {72 flex: 1;73 display: flex;74 align-items: center;75 gap: 28px;76 }77 .avatar {78 width: 120px;79 height: 120px;80 background: #E0E0E0;81 border: 1px solid #BDBDBD;82 color: #757575;83 border-radius: 60px;84 display: flex;85 justify-content: center;86 align-items: center;87 font-size: 24px;88 font-weight: 600;89 }90 .title-wrap {91 display: flex;92 flex-direction: column;93 gap: 10px;94 }95 .title-row {96 display: flex;97 align-items: center;98 gap: 16px;99 }100 .title {101 font-size: 58px;102 font-weight: 800;103 letter-spacing: 0.5px;104 }105 .subtitle {106 font-size: 32px;107 color: #d9d9d9;108 }109 .icon-btn svg { width: 64px; height: 64px; }110 111 /* Content */112 .content {113 padding: 36px;114 box-sizing: border-box;115 }116 .row-between {117 display: flex;118 justify-content: space-between;119 align-items: baseline;120 margin-top: 12px;121 margin-bottom: 36px;122 }123 .label-pink {124 color: #e8b4c3;125 font-weight: 700;126 font-size: 40px;127 letter-spacing: 0.5px;128 }129 .form-row {130 display: flex;131 align-items: center;132 margin: 28px 0;133 font-size: 40px;134 }135 .form-row .label {136 width: 220px;137 color: #e6e6e6;138 }139 .notes-line {140 height: 2px;141 background: #cfa1ad;142 margin: 18px 0 4px 220px;143 }144 .value-pink {145 color: #e8b4c3;146 font-weight: 700;147 letter-spacing: 1px;148 }149 .duration-row {150 display: grid;151 grid-template-columns: 220px 1fr 260px;152 align-items: center;153 margin-top: 16px;154 margin-bottom: 24px;155 font-size: 40px;156 }157 .tap-to-set {158 justify-self: center;159 color: #e8b4c3;160 font-weight: 700;161 }162 .timer-right {163 justify-self: end;164 display: flex;165 align-items: center;166 gap: 16px;167 color: #e8b4c3;168 }169 .timer-right svg { width: 44px; height: 44px; }170 171 .big-timer {172 text-align: center;173 font-size: 168px;174 font-weight: 900;175 letter-spacing: 6px;176 margin: 24px 0 40px;177 color: #ffffff;178 }179 180 .btn-row {181 display: grid;182 grid-template-columns: 1fr 1fr;183 gap: 36px;184 margin: 20px 0 40px;185 }186 .btn {187 height: 120px;188 border-radius: 12px;189 display: flex;190 align-items: center;191 justify-content: center;192 font-size: 44px;193 font-weight: 800;194 box-shadow: 0 6px 0 rgba(0,0,0,0.35);195 cursor: default;196 }197 .btn.stop { background: #f35e3c; color: #1c1c1c; }198 .btn.pause { background: #9fa4a7; color: #1c1c1c; }199 200 .alarm-row {201 text-align: center;202 font-size: 40px;203 margin: 24px 0;204 color: #e6e6e6;205 }206 .alarm-row .status {207 margin-left: 18px;208 color: #e8b4c3;209 font-weight: 800;210 }211 212 .save-text {213 text-align: center;214 color: #ffffff;215 font-size: 40px;216 letter-spacing: 2px;217 margin: 40px 0 480px;218 font-weight: 700;219 }220 221 .bottom-action {222 position: absolute;223 left: 50%;224 bottom: 160px;225 transform: translateX(-50%);226 width: 720px;227 height: 120px;228 background: #2bb66a;229 color: #ffffff;230 border-radius: 12px;231 display: flex;232 align-items: center;233 justify-content: center;234 font-size: 44px;235 font-weight: 800;236 box-shadow: 0 6px 0 rgba(0,0,0,0.35);237 }238 239 /* Simple SVG icon styles */240 .icon { fill: none; stroke: #ffffff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }241 .icon-pink { fill: none; stroke: #e8b4c3; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }242</style>243</head>244<body>245<div id="render-target">246 247 <!-- Status Bar -->248 <div class="statusbar">249 <div class="status-left">250 <div>8:49</div>251 <div class="status-icons">252 <div class="status-icon"></div>253 <div class="status-icon"></div>254 </div>255 </div>256 <div class="battery">257 <svg viewBox="0 0 60 30">258 <rect x="1" y="4" width="48" height="22" rx="4" ry="4" stroke="#fff" fill="none" stroke-width="3"></rect>259 <rect x="52" y="10" width="6" height="10" rx="2" fill="#fff"></rect>260 <rect x="5" y="8" width="30" height="14" fill="#ffffff"></rect>261 </svg>262 </div>263 </div>264 265 <!-- App Bar -->266 <div class="appbar">267 <div class="appbar-left icon-btn">268 <!-- Home icon -->269 <svg viewBox="0 0 64 64">270 <path class="icon" d="M8 28 L32 10 L56 28"></path>271 <path class="icon" d="M16 28 V52 H48 V28"></path>272 </svg>273 </div>274 <div class="appbar-center">275 <div class="avatar">[IMG: Project Avatar]</div>276 <div class="title-wrap">277 <div class="title-row">278 <div class="title">Research</div>279 <!-- Dropdown arrow -->280 <svg viewBox="0 0 24 24" width="36" height="36">281 <path class="icon" d="M4 8 L12 16 L20 8"></path>282 </svg>283 </div>284 <div class="subtitle">Sleep</div>285 </div>286 </div>287 <div class="appbar-right icon-btn">288 <!-- Menu icon -->289 <svg viewBox="0 0 64 64">290 <path class="icon" d="M10 18 H54"></path>291 <path class="icon" d="M10 32 H54"></path>292 <path class="icon" d="M10 46 H54"></path>293 </svg>294 </div>295 </div>296 297 <!-- Content Area -->298 <div class="content">299 <div class="row-between">300 <div class="label-pink">Today 08:49 AM</div>301 <div class="label-pink">Until: <span style="text-decoration: none; font-weight: 800;">End Time</span></div>302 </div>303 304 <div class="form-row">305 <div class="label">Notes:</div>306 </div>307 <div class="notes-line"></div>308 309 <div class="form-row">310 <div class="label">Sleep</div>311 <div class="value-pink">slept</div>312 </div>313 314 <div class="duration-row">315 <div class="label">Duration</div>316 <div class="tap-to-set">< tap to set ></div>317 <div class="timer-right">318 <!-- Timer icon -->319 <svg viewBox="0 0 48 48">320 <circle class="icon-pink" cx="24" cy="26" r="16"></circle>321 <path class="icon-pink" d="M24 26 L30 20"></path>322 <path class="icon-pink" d="M18 8 H30"></path>323 </svg>324 <div>Timer</div>325 <svg viewBox="0 0 24 24" width="28" height="28">326 <path class="icon-pink" d="M4 8 L12 16 L20 8"></path>327 </svg>328 </div>329 </div>330 331 <div class="big-timer">00:02</div>332 333 <div class="btn-row">334 <div class="btn stop">Stop</div>335 <div class="btn pause">Pause</div>336 </div>337 338 <div class="alarm-row">339 Sleep check alarm: <span class="status">OFF</span>340 </div>341 342 <div class="save-text">Save Sleep Check</div>343 </div>344 345 <div class="bottom-action">Stop and Save</div>346 347</div>348</body>349</html>