GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Reception Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #E3E7F0;14 }15 16 /* Top app bar */17 .app-bar {18 position: relative;19 width: 1080px;20 height: 220px;21 background: #3F506C;22 color: #fff;23 box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;24 }25 .status-row {26 position: absolute;27 top: 18px;28 left: 32px;29 right: 32px;30 height: 50px;31 font-size: 34px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 opacity: 0.95;36 }37 .status-icons {38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .title-row {43 position: absolute;44 bottom: 28px;45 left: 24px;46 right: 24px;47 height: 120px;48 display: flex;49 align-items: center;50 justify-content: space-between;51 }52 .title-left {53 display: flex;54 align-items: center;55 gap: 22px;56 }57 .title {58 font-size: 54px;59 font-weight: 600;60 letter-spacing: 0.5px;61 }62 .icon-btn {63 width: 84px;64 height: 84px;65 display: inline-flex;66 align-items: center;67 justify-content: center;68 }69 .icon-btn svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 6; }70 71 /* Ad banner */72 .ad-wrap {73 padding: 24px 32px 0 32px;74 }75 .ad-banner {76 width: 1016px;77 height: 150px;78 background: #E0E0E0;79 border: 1px solid #BDBDBD;80 border-radius: 10px;81 display: flex;82 align-items: center;83 justify-content: center;84 color: #616161;85 font-size: 34px;86 text-align: center;87 }88 89 /* List section */90 .card {91 margin-top: 18px;92 background: #DCE2EC;93 border-top: 1px solid #C7CEDB;94 border-bottom: 1px solid #C7CEDB;95 padding: 36px 40px;96 }97 .row {98 display: flex;99 align-items: center;100 justify-content: space-between;101 gap: 16px;102 }103 .left-block .title-item {104 font-size: 48px;105 color: #222;106 margin-bottom: 12px;107 }108 .meta {109 font-size: 34px;110 color: #3D4352;111 opacity: 0.9;112 }113 .right-block {114 text-align: right;115 }116 .right-top {117 font-size: 34px;118 color: #3D4352;119 margin-bottom: 12px;120 }121 .star {122 width: 56px; height: 56px;123 display: inline-flex; align-items: center; justify-content: center;124 }125 .star svg { width: 56px; height: 56px; fill: #D9534F; stroke: #B64440; stroke-width: 2; }126 127 /* Floating action button */128 .fab {129 position: absolute;130 right: 64px;131 bottom: 380px;132 width: 160px;133 height: 160px;134 border-radius: 50%;135 background: #3F506C;136 box-shadow: 0 14px 24px rgba(0,0,0,0.28);137 display: flex;138 align-items: center;139 justify-content: center;140 }141 .fab svg { width: 72px; height: 72px; stroke: #fff; stroke-width: 8; }142 143 /* Bottom tabs */144 .bottom-tabs {145 position: absolute;146 bottom: 210px;147 left: 0;148 width: 100%;149 display: flex;150 justify-content: space-between;151 padding: 0 140px;152 color: #1f2230;153 font-size: 40px;154 letter-spacing: 1px;155 }156 .tab {157 opacity: 0.7;158 }159 .tab.active {160 font-weight: 700;161 opacity: 1;162 position: relative;163 }164 .tab.active::after {165 content: "";166 position: absolute;167 left: 0;168 right: 0;169 bottom: -12px;170 height: 6px;171 background: #1f2230;172 border-radius: 3px;173 }174 175 /* iOS/Android home handle */176 .home-handle {177 position: absolute;178 bottom: 90px;179 left: 50%;180 transform: translateX(-50%);181 width: 420px;182 height: 14px;183 border-radius: 8px;184 background: #9EA4AF;185 opacity: 0.9;186 }187</style>188</head>189<body>190<div id="render-target">191 <div class="app-bar">192 <div class="status-row">193 <div>8:10</div>194 <div class="status-icons">195 <span style="width:18px;height:18px;background:#fff;border-radius:50%;display:inline-block;opacity:0.95"></span>196 <span style="width:18px;height:18px;border:2px solid #fff;border-radius:3px;display:inline-block;opacity:0.95"></span>197 <span style="width:18px;height:18px;border:2px solid #fff;border-radius:3px;display:inline-block;opacity:0.95"></span>198 <span style="width:10px;height:10px;background:#fff;border-radius:50%;display:inline-block;opacity:0.95"></span>199 </div>200 </div>201 <div class="title-row">202 <div class="title-left">203 <div class="icon-btn">204 <svg viewBox="0 0 24 24">205 <path d="M15 4 L7 12 L15 20" />206 </svg>207 </div>208 <div class="title">Reception</div>209 </div>210 <div class="icon-btn">211 <svg viewBox="0 0 24 24">212 <path d="M5 5 L19 19 M19 5 L5 19"/>213 </svg>214 </div>215 </div>216 </div>217 218 <div class="ad-wrap">219 <div class="ad-banner">[IMG: Ad Banner - The White Teak Company - Premium Lighting]</div>220 </div>221 222 <div class="card">223 <div class="row">224 <div class="left-block">225 <div class="title-item">Reception</div>226 <div class="meta">06/21/2023 11:01 AM</div>227 <div class="meta" style="margin-top: 14px;">One Time</div>228 </div>229 <div class="right-block">230 <div class="right-top">in 8 days</div>231 <div class="star">232 <svg viewBox="0 0 24 24">233 <path d="M12 2 L14.8 8.5 L22 9.2 L16.8 13.8 L18.4 21 L12 17.3 L5.6 21 L7.2 13.8 L2 9.2 L9.2 8.5 Z"/>234 </svg>235 </div>236 </div>237 </div>238 </div>239 240 <div class="fab">241 <svg viewBox="0 0 24 24">242 <path d="M12 5 V19 M5 12 H19" />243 </svg>244 </div>245 246 <div class="bottom-tabs">247 <div class="tab active">ACTIVE</div>248 <div class="tab">COMPLETED</div>249 </div>250 251 <div class="home-handle"></div>252</div>253</body>254</html>