GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Reception Screen Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #dfe3ea; /* light app background */13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 100px;22 background: #2f3a46;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 34px;29 }30 .status-icons {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 26px;35 opacity: 0.9;36 }37 .status-dot { width: 10px; height: 10px; background:#fff; border-radius:50%; display:inline-block; }38 .battery {39 width: 36px; height: 18px; border:2px solid #fff; border-radius:4px; position: relative;40 }41 .battery:after { content:""; position:absolute; right:-8px; top:4px; width:6px; height:10px; background:#fff; border-radius:2px; }42 .battery-fill { position:absolute; left:2px; top:2px; width:24px; height:12px; background:#fff; }43 44 /* App bar */45 .app-bar {46 position: absolute;47 top: 100px;48 left: 0;49 width: 1080px;50 height: 160px;51 background: #3e4b5d;52 color: #fff;53 display: flex;54 align-items: center;55 box-sizing: border-box;56 padding: 0 24px;57 }58 .app-title {59 font-size: 54px;60 margin-left: 22px;61 }62 .icon-btn {63 width: 90px; height: 90px; display:flex; align-items:center; justify-content:center;64 }65 .app-actions { margin-left: auto; }66 67 /* Banner image placeholder */68 .banner {69 position: absolute;70 top: 260px;71 left: 60px;72 width: 960px;73 height: 160px;74 background: #E0E0E0;75 border: 1px solid #BDBDBD;76 color: #757575;77 display:flex;78 align-items:center;79 justify-content:center;80 font-size: 36px;81 letter-spacing: 1px;82 }83 84 /* Content card */85 .card {86 position: absolute;87 top: 440px;88 left: 0;89 width: 1080px;90 background: #eef0f6;91 padding: 36px 60px 32px 60px;92 box-sizing: border-box;93 color: #222;94 }95 .event-title {96 font-size: 58px;97 font-weight: 600;98 margin-bottom: 16px;99 }100 .event-row {101 display:flex;102 align-items:center;103 font-size: 36px;104 color: #6a707b;105 }106 .event-row .right {107 margin-left:auto;108 display:flex;109 align-items:center;110 gap: 18px;111 }112 .star {113 color: #d24b4b;114 font-size: 42px;115 }116 .subtle {117 font-size: 38px;118 color: #6a707b;119 margin-top: 18px;120 }121 122 /* Floating action button */123 .fab {124 position: absolute;125 right: 80px;126 top: 1480px;127 width: 160px;128 height: 160px;129 background: #344b6b;130 border-radius: 50%;131 box-shadow: 0 8px 16px rgba(0,0,0,0.25);132 display:flex;133 align-items:center;134 justify-content:center;135 }136 137 /* Tabs */138 .tabs {139 position: absolute;140 top: 1700px;141 left: 0;142 width: 1080px;143 display:flex;144 justify-content: space-around;145 padding: 30px 0;146 color: #394150;147 background: transparent;148 font-size: 42px;149 font-weight: 600;150 }151 .tab-active {152 border-bottom: 6px solid #394150;153 padding-bottom: 6px;154 }155 .tab-inactive {156 color: #8590a3;157 }158 159 /* Keyboard mock */160 .keyboard {161 position: absolute;162 bottom: 0;163 left: 0;164 width: 1080px;165 height: 800px;166 background: #1f1f24;167 color: #fff;168 box-sizing: border-box;169 }170 .kb-suggestions {171 height: 120px;172 background: #2b2b30;173 display:flex;174 align-items:center;175 padding: 0 20px;176 box-sizing: border-box;177 gap: 18px;178 font-size: 40px;179 }180 .chip {181 background: #3b3b42;182 border-radius: 26px;183 padding: 16px 26px;184 }185 .kb-row {186 display:flex;187 justify-content:center;188 gap: 16px;189 padding: 18px 24px;190 }191 .key {192 width: 88px;193 height: 110px;194 background: #2e2e34;195 border-radius: 16px;196 display:flex;197 align-items:center;198 justify-content:center;199 font-size: 42px;200 }201 .key-wide { width: 200px; }202 .space { width: 480px; }203 .key-round { width: 90px; height: 90px; border-radius: 45px; }204 .kb-footer { padding: 10px 24px; }205</style>206</head>207<body>208<div id="render-target">209 210 <!-- Status bar -->211 <div class="status-bar">212 <div>8:17</div>213 <div class="status-icons">214 <div class="status-dot"></div>215 <div class="status-dot"></div>216 <div class="status-dot"></div>217 <div class="battery"><div class="battery-fill"></div></div>218 </div>219 </div>220 221 <!-- App bar -->222 <div class="app-bar">223 <div class="icon-btn">224 <!-- Back arrow -->225 <svg width="58" height="58" viewBox="0 0 24 24" fill="#fff">226 <path d="M15.5 19l-7-7 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>227 </svg>228 </div>229 <div class="app-title">Reception</div>230 <div class="app-actions icon-btn">231 <!-- Close icon -->232 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">233 <path d="M6 6l12 12M18 6l-12 12"></path>234 </svg>235 </div>236 </div>237 238 <!-- Banner placeholder -->239 <div class="banner">[IMG: Blue Banner Ad – “Hello India / GROUP 108”]</div>240 241 <!-- Card content -->242 <div class="card">243 <div class="event-title">Reception</div>244 <div class="event-row">245 <div>06/21/2023 11:01 AM</div>246 <div class="right">247 <div>in 8 days</div>248 <div class="star">★</div>249 </div>250 </div>251 <div class="subtle">One Time</div>252 </div>253 254 <!-- Floating action button -->255 <div class="fab">256 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">257 <path d="M12 5v14M5 12h14"></path>258 </svg>259 </div>260 261 <!-- Tabs -->262 <div class="tabs">263 <div class="tab-active">ACTIVE</div>264 <div class="tab-inactive">COMPLETED</div>265 </div>266 267 <!-- Keyboard mock -->268 <div class="keyboard">269 <div class="kb-suggestions">270 <div class="key-round" style="background:#3b3b42; display:flex; align-items:center; justify-content:center;">271 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">272 <path d="M9 18l6-6-6-6"></path>273 </svg>274 </div>275 <div class="chip">Reception</div>276 <div class="chip">Receptionist</div>277 <div class="chip">Receptions</div>278 <div style="margin-left:auto;" class="key-round">279 <!-- Mic icon -->280 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">281 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm0 0v4m-4 0h8"></path>282 </svg>283 </div>284 </div>285 286 <div class="kb-row">287 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>288 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>289 </div>290 <div class="kb-row">291 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>292 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>293 </div>294 <div class="kb-row">295 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>296 <div class="key">n</div><div class="key">m</div>297 <div class="key-wide" style="display:flex; align-items:center; justify-content:center;">298 <!-- backspace -->299 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">300 <path d="M22 5v14H8L2 12l6-7h14zM10 9l6 6M16 9l-6 6"></path>301 </svg>302 </div>303 </div>304 <div class="kb-row kb-footer">305 <div class="key-wide">?123</div>306 <div class="key">,</div>307 <div class="key">🙂</div>308 <div class="space"></div>309 <div class="key">.</div>310 <div class="key-round" style="background:#3b3b42; display:flex; align-items:center; justify-content:center;">311 <!-- search icon -->312 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">313 <circle cx="11" cy="11" r="7"></circle>314 <path d="M16.5 16.5L21 21"></path>315 </svg>316 </div>317 </div>318 </div>319 320</div>321</body>322</html>