GD-ML/AndroidCode

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>Prepare Details</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    color: #FFFFFF;16  }17  /* Header */18  .appbar {19    position: relative;20    width: 100%;21    height: 300px;22    background: #E30613; /* vivid red */23    color: #fff;24  }25  .status-bar {26    position: absolute;27    top: 24px;28    left: 40px;29    right: 40px;30    height: 60px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    font-size: 36px;35    opacity: 0.95;36  }37  .title-row {38    position: absolute;39    left: 40px;40    right: 40px;41    bottom: 40px;42    display: flex;43    align-items: center;44    gap: 24px;45  }46  .back-btn {47    width: 64px;48    height: 64px;49  }50  .title {51    font-size: 68px;52    font-weight: 700;53    letter-spacing: 0.2px;54  }55 56  /* Content */57  .content {58    position: absolute;59    top: 300px;60    left: 0;61    right: 0;62    bottom: 0;63    background: #EEEEEE;64    padding: 40px 48px 120px 48px;65    overflow: hidden;66  }67  .checklist {68    margin-top: 20px;69  }70  .check-item {71    display: flex;72    align-items: flex-start;73    gap: 28px;74    padding: 42px 0;75  }76  .checkbox {77    width: 66px;78    height: 66px;79    border: 6px solid #9E9E9E;80    border-radius: 8px;81    background: transparent;82    flex: 0 0 auto;83    margin-left: 12px;84  }85  .check-text {86    color: #FFFFFF;87    opacity: 0.55;88    font-weight: 700;89    font-size: 44px;90    line-height: 1.35;91  }92  .section-label {93    margin-top: 40px;94    margin-left: 12px;95    font-size: 40px;96    font-weight: 700;97    color: #FFFFFF;98    opacity: 0.8;99  }100 101  .steps {102    margin-top: 30px;103  }104  .step {105    display: flex;106    align-items: center;107    gap: 32px;108    padding: 44px 0;109  }110  .badge {111    width: 132px;112    height: 132px;113    border-radius: 50%;114    background: #E30613;115    display: flex;116    align-items: center;117    justify-content: center;118    font-size: 60px;119    font-weight: 700;120    color: #FFFFFF;121    flex: 0 0 auto;122    margin-left: 12px;123  }124  .step-text {125    font-size: 42px;126    line-height: 1.35;127    color: #FFFFFF;128    opacity: 0.55;129    font-weight: 700;130  }131 132  .related {133    margin-top: 40px;134    margin-left: 12px;135    font-size: 40px;136    font-weight: 700;137    color: #FFFFFF;138    opacity: 0.8;139  }140 141  /* Gesture bar (bottom) */142  .gesture {143    position: absolute;144    bottom: 26px;145    left: 50%;146    transform: translateX(-50%);147    width: 360px;148    height: 14px;149    border-radius: 10px;150    background: rgba(0,0,0,0.18);151  }152 153  /* Simple right-side status icons */154  .icons {155    display: flex;156    align-items: center;157    gap: 22px;158  }159  .icon {160    width: 36px; height: 36px;161  }162</style>163</head>164<body>165<div id="render-target">166  <div class="appbar">167    <div class="status-bar">168      <div>8:11</div>169      <div class="icons">170        <!-- WiFi icon -->171        <svg class="icon" viewBox="0 0 24 24" fill="#fff">172          <path d="M12 20l3-3H9l3 3zM2 9l2 2c4.4-4.4 11.6-4.4 16 0l2-2C15.5 3.5 8.5 3.5 2 9zm4 4l2 2c2.9-2.9 6.1-2.9 9 0l2-2c-4-4-9-4-13 0z"/>173        </svg>174        <!-- Battery icon -->175        <svg class="icon" viewBox="0 0 24 24" fill="#fff">176          <path d="M16 5h-1V3h-6v2H8c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"/>177        </svg>178      </div>179    </div>180    <div class="title-row">181      <!-- Back Arrow -->182      <svg class="back-btn" viewBox="0 0 24 24" fill="#fff">183        <path d="M15.5 19l-7-7 7-7 1.5 1.5L10.5 12l6.5 6.5z"/>184      </svg>185      <div class="title">Prepare Details</div>186    </div>187  </div>188 189  <div class="content">190    <div class="checklist">191      <div class="check-item">192        <div class="checkbox"></div>193        <div class="check-text">Verify if the victim is breathing by listening, looking and feeling.</div>194      </div>195      <div class="check-item">196        <div class="checkbox"></div>197        <div class="check-text">If the victim is not breathing: do a chin lift and clear the airways if needed.</div>198      </div>199      <div class="check-item">200        <div class="checkbox"></div>201        <div class="check-text">First place the heel of your hand in center of the person's chest.</div>202      </div>203      <div class="check-item">204        <div class="checkbox"></div>205        <div class="check-text">Press firmly about 6 cm downwards (adult) and release the pressure.</div>206      </div>207    </div>208 209    <div class="section-label">During</div>210 211    <div class="steps">212      <div class="step">213        <div class="badge">1</div>214        <div class="step-text">Minimize contact with the person's blood. If have gloves available, use gloves to protect you.</div>215      </div>216      <div class="step">217        <div class="badge">2</div>218        <div class="step-text">Put this bag in another container with ice. However the ice should never come in direct contact with the amputated part.</div>219      </div>220      <div class="step">221        <div class="badge">3</div>222        <div class="step-text">Mark the package with the name of the casualty and the time of packing. Always wash your hands after giving care.</div>223      </div>224    </div>225 226    <div class="related">Related first aid</div>227  </div>228 229  <div class="gesture"></div>230</div>231</body>232</html>