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>Research Sleep Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #2f2f2f;15 border-radius: 28px;16 box-shadow: 0 8px 30px rgba(0,0,0,0.35);17 color: #eee;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 150px;27 background: #c88fa0; /* soft pink */28 color: #fff;29 display: flex;30 align-items: center;31 padding: 0 40px;32 box-sizing: border-box;33 font-weight: 600;34 }35 .status-left, .status-right {36 display: flex;37 align-items: center;38 }39 .status-left { gap: 30px; }40 .status-right { margin-left: auto; }41 .status-icon {42 width: 44px; height: 44px;43 display: inline-flex; justify-content: center; align-items: center;44 opacity: 0.95;45 }46 .status-battery {47 width: 36px; height: 36px; margin-left: 20px;48 }49 50 /* App bar */51 .app-bar {52 position: absolute;53 top: 150px;54 left: 0;55 width: 1080px;56 height: 220px;57 background: #5f5f60;58 display: flex;59 align-items: center;60 box-sizing: border-box;61 padding: 0 40px;62 }63 .home-icon {64 width: 90px; height: 90px; margin-right: 30px;65 }66 .avatar-wrap {67 width: 120px; height: 120px; background: #fff; border-radius: 60px;68 display: flex; justify-content: center; align-items: center;69 margin-right: 30px;70 box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35);71 }72 .title-block {73 display: flex; flex-direction: column;74 }75 .title-row {76 display: flex; align-items: center; gap: 12px;77 }78 .title {79 font-size: 64px; font-weight: 700; color: #fff;80 }81 .subtitle {82 font-size: 32px; color: #d7d7d7; margin-top: 6px;83 }84 .menu-icon {85 margin-left: auto;86 width: 90px; height: 90px;87 }88 89 /* Content area */90 .content {91 position: absolute;92 top: 370px; /* below app bar */93 left: 0;94 width: 100%;95 bottom: 0;96 box-sizing: border-box;97 padding: 40px;98 color: #eaeaea;99 }100 .header-row {101 display: flex; justify-content: space-between; align-items: baseline;102 font-size: 38px; font-weight: 700;103 color: #e7b5c2;104 margin-top: 10px;105 }106 107 .notes-row {108 display: flex; align-items: center;109 margin-top: 60px;110 }111 .notes-row .label {112 width: 200px; font-size: 36px; color: #eaeaea;113 }114 .note-line {115 flex: 1; height: 2px; background: #e7b5c2; margin-left: 30px; opacity: 0.8;116 }117 118 .field-row {119 display: flex; align-items: center;120 margin-top: 50px; gap: 20px;121 }122 .field-row .label {123 width: 200px; font-size: 36px; color: #eaeaea;124 }125 .value-pink { color: #e7b5c2; font-size: 40px; font-weight: 700; letter-spacing: 1px; }126 127 .duration-row {128 display: flex; align-items: center; margin-top: 40px;129 }130 .duration-row .label { width: 200px; font-size: 36px; }131 .duration-row .tap { font-size: 40px; color: #e7b5c2; font-weight: 700; }132 .duration-row .timer-side {133 margin-left: auto; display: flex; align-items: center; gap: 14px; color: #e7b5c2; font-size: 36px; font-weight: 700;134 }135 .timer-icon { width: 48px; height: 48px; opacity: 0.9; }136 137 .countdown {138 text-align: center;139 font-size: 200px;140 font-weight: 900;141 color: #ffffff;142 letter-spacing: 6px;143 margin-top: 80px;144 }145 146 .primary-btn {147 display: block;148 margin: 40px auto 20px auto;149 width: 540px; height: 120px;150 background: #f2b9c5;151 color: #111;152 border-radius: 16px;153 font-size: 44px; font-weight: 700;154 text-align: center; line-height: 120px;155 box-shadow: 0 6px 0 rgba(0,0,0,0.25), 0 14px 24px rgba(0,0,0,0.35);156 }157 158 .alarm-row {159 text-align: center;160 margin-top: 40px;161 font-size: 40px;162 }163 .alarm-row .off { color: #e7b5c2; font-weight: 800; margin-left: 16px; }164 165 /* Bottom button */166 .bottom-controls {167 position: absolute;168 left: 0; right: 0; bottom: 110px;169 display: flex; justify-content: center;170 }171 .stop-btn {172 width: 780px; height: 120px; border-radius: 12px;173 background: #14b86e;174 color: #fff; font-size: 44px; font-weight: 800;175 text-align: center; line-height: 120px;176 box-shadow: 0 6px 0 rgba(0,0,0,0.25), 0 14px 24px rgba(0,0,0,0.35);177 }178 .home-indicator {179 position: absolute;180 bottom: 30px; left: 50%; transform: translateX(-50%);181 width: 250px; height: 16px; border-radius: 8px; background: #eaeaea; opacity: 0.8;182 }183 184 /* Small dropdown arrow */185 .chev-down { width: 26px; height: 26px; }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Status Bar -->192 <div class="status-bar">193 <div class="status-left">194 <div style="font-size:42px;">8:48</div>195 <div class="status-icon">196 <!-- stroller icon (simple cart) -->197 <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff">198 <path d="M3 6h10l1 3H6l-3-3zm3 9a2 2 0 1 0 .001 3.999A2 2 0 0 0 6 15zm9 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 15 15zM5 10h10v2H5z"/>199 </svg>200 </div>201 <div class="status-icon">202 <!-- moon icon -->203 <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff">204 <path d="M12 2a8.5 8.5 0 1 0 8.1 11.1A7 7 0 1 1 12 2z"/>205 </svg>206 </div>207 <div class="status-icon">208 <!-- calendar icon -->209 <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff">210 <path d="M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 6H4v12h16V8z"/>211 </svg>212 </div>213 </div>214 <div class="status-right">215 <svg class="status-battery" viewBox="0 0 26 26">216 <rect x="2" y="8" width="18" height="10" rx="2" ry="2" fill="#fff"/>217 <rect x="21" y="10" width="3" height="6" rx="1" fill="#fff"/>218 </svg>219 </div>220 </div>221 222 <!-- App Bar -->223 <div class="app-bar">224 <svg class="home-icon" viewBox="0 0 24 24" fill="#fff">225 <path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/>226 </svg>227 228 <div class="avatar-wrap">229 <!-- camera icon inside circle -->230 <svg viewBox="0 0 24 24" width="70" height="70" fill="#888">231 <path d="M9 7l2-2h2l2 2h3v10H6V7h3zm3 3a4 4 0 1 0 .001 7.999A4 4 0 0 0 12 10z"/>232 </svg>233 </div>234 235 <div class="title-block">236 <div class="title-row">237 <div class="title">Research</div>238 <svg class="chev-down" viewBox="0 0 24 24" fill="#fff">239 <path d="M7 10l5 5 5-5z"/>240 </svg>241 </div>242 <div class="subtitle">Sleep</div>243 </div>244 245 <svg class="menu-icon" viewBox="0 0 24 24" fill="#fff">246 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>247 </svg>248 </div>249 250 <!-- Content -->251 <div class="content">252 <div class="header-row">253 <div>Today 08:48 AM</div>254 <div>Until: <span style="text-decoration: none; font-weight: 800;">End Time</span></div>255 </div>256 257 <div class="notes-row">258 <div class="label">Notes:</div>259 <div class="note-line"></div>260 </div>261 262 <div class="field-row">263 <div class="label">Sleep</div>264 <div class="value-pink">slept</div>265 </div>266 267 <div class="duration-row">268 <div class="label">Duration</div>269 <div class="tap">< tap to set ></div>270 <div class="timer-side">271 <svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="#e7b5c2" stroke-width="2">272 <circle cx="12" cy="13" r="7"></circle>273 <path d="M12 13l3-2"></path>274 <rect x="9" y="3" width="6" height="3" fill="#e7b5c2" stroke="none"></rect>275 </svg>276 <span>Timer</span>277 <svg class="chev-down" viewBox="0 0 24 24" fill="#e7b5c2">278 <path d="M7 10l5 5 5-5z"/>279 </svg>280 </div>281 </div>282 283 <div class="countdown">00:00</div>284 285 <div class="primary-btn">Start Sleeping</div>286 287 <div class="alarm-row">288 Sleep check alarm:289 <span class="off">OFF</span>290 </div>291 </div>292 293 <!-- Bottom controls -->294 <div class="bottom-controls">295 <div class="stop-btn">Stop and Save</div>296 </div>297 298 <div class="home-indicator"></div>299</div>300</body>301</html>