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>Nursing Screen Mock</title>7<style>8 :root{9 --bg-dark:#3f3f3f;10 --header-dark:#5a5a5a;11 --pink:#e7a6b8;12 --pinkLite:#f3becd;13 --text:#ffffff;14 --muted:#bdbdbd;15 --greyLight:#d0d0d0;16 --accent:#23c26f;17 }18 body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }19 #render-target{20 width:1080px; height:2400px;21 position:relative; overflow:hidden;22 background:var(--bg-dark);23 }24 25 /* Status bar */26 .status-bar{27 position:absolute; top:0; left:0; right:0; height:160px;28 background:#d09bb1;29 color:#fff; font-weight:600;30 display:flex; align-items:center; padding:0 40px; box-sizing:border-box;31 }32 .status-left{display:flex; align-items:center; gap:26px; font-size:44px;}33 .status-icons{display:flex; align-items:center; gap:26px;}34 .status-right{margin-left:auto; display:flex; align-items:center; gap:26px;}35 .icon{36 width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;37 }38 .icon svg{width:48px; height:48px; fill:#fff; stroke:#fff; stroke-width:2;}39 .battery svg{width:70px; height:40px;}40 41 /* Header */42 .header{43 position:absolute; top:160px; left:0; right:0; height:220px;44 background:var(--header-dark); color:#fff;45 display:flex; align-items:center; box-sizing:border-box; padding:0 40px;46 }47 .home-icon{margin-right:30px;}48 .title-wrap{display:flex; align-items:center; gap:30px;}49 .avatar{50 width:120px; height:120px; border-radius:50%;51 background:#E0E0E0; border:1px solid #BDBDBD;52 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;53 }54 .title-text{display:flex; flex-direction:column; color:#fff;}55 .title-text .main{font-size:64px; font-weight:700; line-height:1;}56 .title-text .sub{font-size:30px; color:#ddd; margin-top:8px;}57 .dropdown{58 width:26px; height:26px; margin-left:6px;59 }60 .menu{margin-left:auto;}61 .menu svg{width:72px; height:72px;}62 63 /* Tabs */64 .tabs{65 position:absolute; top:380px; left:0; right:0; height:110px;66 background:var(--pink); display:flex; align-items:flex-end; justify-content:space-between;67 padding:0 60px; box-sizing:border-box;68 }69 .tab{ font-size:42px; color:#6b6b6b; letter-spacing:2px; padding-bottom:26px; }70 .tab.active{ color:#000; font-weight:700; position:relative; }71 .tab.active::after{72 content:""; position:absolute; left:0; right:0; bottom:0;73 height:6px; background:#fff; border-radius:3px;74 }75 76 /* Content area */77 .content{78 position:absolute; top:490px; left:0; right:0; bottom:220px;79 padding:40px 60px; box-sizing:border-box; color:#fff;80 }81 .row{display:flex; align-items:center; justify-content:space-between;}82 .label{font-size:40px;}83 .soft{color:var(--pinkLite);}84 .muted{color:#c9c9c9;}85 .notes{86 margin-top:40px; display:flex; align-items:center; gap:24px;87 }88 .notes-line{89 flex:1; height:2px; background:var(--pinkLite);90 }91 .duration{92 margin-top:40px; display:flex; align-items:center; justify-content:space-between;93 }94 .duration .tap{color:var(--pinkLite); font-size:36px; letter-spacing:3px;}95 .clock{display:flex; align-items:center; gap:12px; color:#fff;}96 .clock svg{width:44px; height:44px; fill:none; stroke:#fff; stroke-width:4;}97 .timers{98 margin-top:40px; display:flex; gap:80px; justify-content:center;99 }100 .timer-card{ width:420px; }101 .side-label{color:#cfcfcf; font-size:40px; margin-bottom:12px; text-align:left;}102 .big-time{ font-size:160px; color:#9e9e9e; font-weight:700; text-align:left; line-height:1; }103 .btn{104 margin-top:26px; display:inline-block; background:var(--pinkLite); color:#000;105 padding:26px 40px; font-size:42px; font-weight:700; border-radius:12px; box-shadow:0 6px 0 rgba(0,0,0,0.3);106 }107 .alarm{margin-top:60px; text-align:center; font-size:42px;}108 .alarm .state{color:var(--pinkLite); font-weight:800; margin-left:20px;}109 110 /* Save button */111 .save-bar{112 position:absolute; left:0; right:0; bottom:0; height:220px;113 background:var(--bg-dark); display:flex; align-items:center; justify-content:center;114 }115 .save-btn{116 background:var(--accent); color:#fff; font-size:54px; font-weight:800;117 padding:28px 100px; border-radius:12px; box-shadow:0 8px 0 rgba(0,0,0,0.35);118 }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status Bar -->125 <div class="status-bar">126 <div class="status-left">127 <div>8:37</div>128 <div class="status-icons">129 <!-- stroller icon (simple) -->130 <div class="icon">131 <svg viewBox="0 0 24 24">132 <circle cx="6" cy="18" r="3"></circle>133 <circle cx="18" cy="18" r="3"></circle>134 <path d="M3 10h10c4 0 6-2 7-4" stroke="#fff" fill="none"></path>135 <path d="M4 10l3-6" stroke="#fff" fill="none"></path>136 </svg>137 </div>138 <!-- calendar icon -->139 <div class="icon">140 <svg viewBox="0 0 24 24">141 <rect x="3" y="4" width="18" height="17" fill="none" stroke="#fff"></rect>142 <line x1="3" y1="9" x2="21" y2="9"></line>143 <line x1="8" y1="4" x2="8" y2="2"></line>144 <line x1="16" y1="4" x2="16" y2="2"></line>145 </svg>146 </div>147 </div>148 </div>149 <div class="status-right">150 <!-- battery icon -->151 <div class="battery icon">152 <svg viewBox="0 0 40 20">153 <rect x="1" y="3" width="34" height="14" rx="2" fill="none" stroke="#fff"></rect>154 <rect x="4" y="6" width="26" height="8" fill="#fff"></rect>155 <rect x="35" y="7" width="4" height="6" fill="#fff"></rect>156 </svg>157 </div>158 </div>159 </div>160 161 <!-- Header -->162 <div class="header">163 <div class="home-icon icon">164 <svg viewBox="0 0 24 24">165 <path d="M3 10l9-7 9 7v10H15V13H9v7H3z" fill="#fff"></path>166 </svg>167 </div>168 169 <div class="title-wrap">170 <div class="avatar">[IMG: Avatar]</div>171 <div class="title-text">172 <div class="main">Research173 <svg class="dropdown" viewBox="0 0 24 24">174 <path d="M6 8l6 8 6-8" fill="#fff"></path>175 </svg>176 </div>177 <div class="sub">Nursing</div>178 </div>179 </div>180 181 <div class="menu icon" style="margin-left:auto;">182 <svg viewBox="0 0 24 24">183 <rect x="3" y="5" width="18" height="2" fill="#fff"></rect>184 <rect x="3" y="11" width="18" height="2" fill="#fff"></rect>185 <rect x="3" y="17" width="18" height="2" fill="#fff"></rect>186 </svg>187 </div>188 </div>189 190 <!-- Tabs -->191 <div class="tabs">192 <div class="tab">BOTTLE</div>193 <div class="tab active">NURSING</div>194 <div class="tab">SOLID</div>195 </div>196 197 <!-- Content -->198 <div class="content">199 <div class="row">200 <div class="label">Today 08:37 AM</div>201 <div class="label">Until: <span class="soft">End Time</span></div>202 </div>203 204 <div class="notes">205 <div class="label">Notes:</div>206 <div class="notes-line"></div>207 </div>208 209 <div class="duration">210 <div class="label">Duration</div>211 <div class="tap">< tap to set ></div>212 <div class="clock">213 <svg viewBox="0 0 24 24">214 <circle cx="12" cy="12" r="9"></circle>215 <path d="M12 12l5 2" stroke="#fff"></path>216 <path d="M12 12V7" stroke="#fff"></path>217 </svg>218 <div class="label">Timer ▾</div>219 </div>220 </div>221 222 <div class="timers">223 <div class="timer-card">224 <div class="side-label">Left</div>225 <div class="big-time">00:00</div>226 <div class="btn">Start (Left)</div>227 </div>228 <div class="timer-card">229 <div class="side-label" style="text-align:right;">Right</div>230 <div class="big-time" style="text-align:right;">00:00</div>231 <div class="btn">Start (Right)</div>232 </div>233 </div>234 235 <div class="alarm">Sound alarm: <span class="state">OFF</span></div>236 </div>237 238 <!-- Save Button -->239 <div class="save-bar">240 <div class="save-btn">Save</div>241 </div>242 243</div>244</body>245</html>