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>Emergency UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #EEEEEE;15 border-radius: 0;16 }17 18 /* Top red area */19 .top-wrap {20 position: relative;21 width: 100%;22 background: #E3000F; /* vivid red */23 height: 480px;24 color: #fff;25 }26 .status-bar {27 height: 96px;28 padding: 0 40px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-size: 36px;33 opacity: 0.95;34 }35 .status-right {36 display: flex;37 align-items: center;38 gap: 28px;39 }40 .app-title {41 font-size: 72px;42 font-weight: 700;43 padding: 24px 60px;44 }45 .call-btn {46 position: absolute;47 left: 60px;48 right: 60px;49 bottom: -42px;50 height: 132px;51 background: #E53935;52 border-radius: 28px;53 display: flex;54 align-items: center;55 justify-content: center;56 color: #fff;57 font-weight: 700;58 font-size: 50px;59 box-shadow: 0 10px 18px rgba(0,0,0,0.18);60 }61 62 /* Content list */63 .content {64 position: absolute;65 top: 480px;66 left: 0;67 right: 0;68 bottom: 270px; /* leave space for tab bar + indicator */69 background: #EDEDED;70 overflow: hidden;71 }72 .list {73 position: absolute;74 top: 90px; /* to visually sit below the call button radius */75 left: 0;76 right: 0;77 }78 .row {79 display: flex;80 align-items: center;81 height: 170px;82 padding: 0 40px;83 border-bottom: 2px solid #CFCFCF;84 background: #EDEDED;85 }86 .icon-box {87 width: 120px;88 height: 120px;89 background: #FFFFFF;90 border: 1px solid #D0D0D0;91 display: flex;92 align-items: center;93 justify-content: center;94 margin-right: 28px;95 }96 .row-title {97 font-size: 48px;98 font-weight: 700;99 color: #F0F0F0; /* pale like in screenshot */100 }101 102 /* Bottom tab bar */103 .tabbar {104 position: absolute;105 left: 0;106 right: 0;107 bottom: 96px;108 height: 180px;109 background: #FFFFFF;110 border-top: 2px solid #DADADA;111 display: flex;112 }113 .tab {114 flex: 1;115 display: flex;116 flex-direction: column;117 align-items: center;118 justify-content: center;119 gap: 14px;120 color: #9E9E9E;121 font-size: 34px;122 }123 .tab.active {124 color: #E53935;125 font-weight: 700;126 }127 128 /* Home indicator area */129 .home-area {130 position: absolute;131 left: 0;132 right: 0;133 bottom: 0;134 height: 96px;135 background: #000;136 display: flex;137 align-items: center;138 justify-content: center;139 }140 .home-pill {141 width: 220px;142 height: 12px;143 background: #FFFFFF;144 border-radius: 8px;145 opacity: 0.9;146 }147 148 /* Utility for simple SVG icons */149 svg { display: block; }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Red header with status bar -->156 <div class="top-wrap">157 <div class="status-bar">158 <div>8:12</div>159 <div class="status-right">160 <!-- wifi icon -->161 <svg width="40" height="30" viewBox="0 0 24 14">162 <path d="M2 5c6-6 14-6 20 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>163 <path d="M6 9c4-4 8-4 12 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>164 <circle cx="12" cy="12" r="1.5" fill="#fff"/>165 </svg>166 <!-- battery icon -->167 <svg width="46" height="28" viewBox="0 0 28 14">168 <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>169 <rect x="3" y="4" width="16" height="6" fill="#fff"/>170 <rect x="23" y="5" width="3" height="4" fill="#fff"/>171 </svg>172 </div>173 </div>174 <div class="app-title">Emergency</div>175 <div class="call-btn">Call 192</div>176 </div>177 178 <!-- Main content list -->179 <div class="content">180 <div class="list">181 <div class="row">182 <div class="icon-box">183 <!-- red cross icon -->184 <svg width="90" height="90" viewBox="0 0 100 100">185 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>186 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>187 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>188 </svg>189 </div>190 <div class="row-title">Diabetic emergency</div>191 </div>192 193 <div class="row">194 <div class="icon-box">195 <svg width="90" height="90" viewBox="0 0 100 100">196 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>197 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>198 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>199 </svg>200 </div>201 <div class="row-title">Distress</div>202 </div>203 204 <div class="row">205 <div class="icon-box">206 <svg width="90" height="90" viewBox="0 0 100 100">207 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>208 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>209 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>210 </svg>211 </div>212 <div class="row-title">Ebola</div>213 </div>214 215 <div class="row">216 <div class="icon-box">217 <svg width="90" height="90" viewBox="0 0 100 100">218 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>219 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>220 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>221 </svg>222 </div>223 <div class="row-title">Head Injury</div>224 </div>225 226 <div class="row">227 <div class="icon-box">228 <svg width="90" height="90" viewBox="0 0 100 100">229 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>230 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>231 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>232 </svg>233 </div>234 <div class="row-title">Heart Attack</div>235 </div>236 237 <div class="row">238 <div class="icon-box">239 <svg width="90" height="90" viewBox="0 0 100 100">240 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>241 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>242 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>243 </svg>244 </div>245 <div class="row-title">Hypotermia</div>246 </div>247 248 <div class="row">249 <div class="icon-box">250 <svg width="90" height="90" viewBox="0 0 100 100">251 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>252 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>253 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>254 </svg>255 </div>256 <div class="row-title">Meningitus</div>257 </div>258 259 <div class="row">260 <div class="icon-box">261 <svg width="90" height="90" viewBox="0 0 100 100">262 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>263 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>264 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>265 </svg>266 </div>267 <div class="row-title">Poisoning / Harmfull substances</div>268 </div>269 270 <div class="row">271 <div class="icon-box">272 <svg width="90" height="90" viewBox="0 0 100 100">273 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>274 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>275 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>276 </svg>277 </div>278 <div class="row-title">Psychological First Aid</div>279 </div>280 281 <div class="row">282 <div class="icon-box">283 <svg width="90" height="90" viewBox="0 0 100 100">284 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>285 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>286 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>287 </svg>288 </div>289 <div class="row-title">Seizure / Epilepsy</div>290 </div>291 292 <div class="row">293 <div class="icon-box">294 <svg width="90" height="90" viewBox="0 0 100 100">295 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>296 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>297 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>298 </svg>299 </div>300 <div class="row-title">Shock</div>301 </div>302 303 <div class="row">304 <div class="icon-box">305 <svg width="90" height="90" viewBox="0 0 100 100">306 <circle cx="50" cy="50" r="42" fill="none" stroke="#E3000F" stroke-width="10"/>307 <rect x="45" y="20" width="10" height="60" fill="#E3000F"/>308 <rect x="20" y="45" width="60" height="10" fill="#E3000F"/>309 </svg>310 </div>311 <div class="row-title">Sting / Bites</div>312 </div>313 </div>314 </div>315 316 <!-- Bottom navigation bar -->317 <div class="tabbar">318 <div class="tab">319 <!-- plus in square -->320 <svg width="54" height="54" viewBox="0 0 24 24">321 <rect x="2" y="2" width="20" height="20" rx="3" ry="3" fill="none" stroke="#9E9E9E" stroke-width="2"/>322 <path d="M12 6v12M6 12h12" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"/>323 </svg>324 <div>Learn</div>325 </div>326 <div class="tab">327 <!-- check -->328 <svg width="56" height="56" viewBox="0 0 24 24">329 <path d="M4 13l5 5 11-11" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>330 </svg>331 <div>Prepare</div>332 </div>333 <div class="tab active">334 <!-- warning triangle -->335 <svg width="56" height="56" viewBox="0 0 24 24">336 <path d="M12 3l10 18H2L12 3z" fill="#E53935"/>337 <rect x="11" y="8" width="2" height="7" fill="#fff"/>338 <circle cx="12" cy="18" r="1.3" fill="#fff"/>339 </svg>340 <div>Emergency</div>341 </div>342 <div class="tab">343 <!-- question circle -->344 <svg width="56" height="56" viewBox="0 0 24 24">345 <circle cx="12" cy="12" r="10" fill="none" stroke="#9E9E9E" stroke-width="2"/>346 <path d="M9.5 9a2.6 2.6 0 1 1 3.7 2.3c-.9.5-1.7 1.2-1.7 2.2" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"/>347 <circle cx="12" cy="18" r="1" fill="#9E9E9E"/>348 </svg>349 <div>About Us</div>350 </div>351 <div class="tab">352 <!-- ellipsis -->353 <svg width="56" height="56" viewBox="0 0 24 24">354 <circle cx="6" cy="12" r="2" fill="#9E9E9E"/>355 <circle cx="12" cy="12" r="2" fill="#9E9E9E"/>356 <circle cx="18" cy="12" r="2" fill="#9E9E9E"/>357 </svg>358 <div>More</div>359 </div>360 </div>361 362 <!-- Home indicator -->363 <div class="home-area">364 <div class="home-pill"></div>365 </div>366 367</div>368</body>369</html>