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>Emergency Details</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #EFEFEF;20    border-radius: 0;21  }22 23  /* Header */24  .appbar {25    background: #E30000;26    color: #FFFFFF;27    width: 100%;28  }29  .statusbar {30    height: 120px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    padding: 0 40px;35    box-sizing: border-box;36    font-size: 42px;37    font-weight: 600;38  }39  .nav {40    height: 180px;41    display: flex;42    align-items: center;43    padding: 0 40px;44    gap: 28px;45    box-sizing: border-box;46  }47  .title {48    font-size: 70px;49    font-weight: 700;50    letter-spacing: 0.5px;51  }52  .icon-row {53    display: flex;54    align-items: center;55    gap: 28px;56  }57  .icon {58    width: 48px;59    height: 48px;60    fill: #FFFFFF;61  }62 63  /* Content */64  .content {65    padding: 40px 60px 0 60px;66    box-sizing: border-box;67  }68  .hero {69    width: 760px;70    height: 760px;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    display: flex;74    justify-content: center;75    align-items: center;76    color: #757575;77    font-size: 44px;78    margin: 30px auto 40px;79  }80 81  .steps {82    margin-top: 20px;83  }84  .step {85    display: flex;86    align-items: flex-start;87    gap: 36px;88    margin: 36px 0 90px;89  }90  .bullet {91    min-width: 130px;92    height: 130px;93    border-radius: 50%;94    background: #E30000;95    color: #FFFFFF;96    display: flex;97    align-items: center;98    justify-content: center;99    font-size: 64px;100    font-weight: 700;101  }102  .step-text {103    color: #D8D8D8;104    font-size: 46px;105    line-height: 1.35;106    max-width: 820px;107    padding-top: 6px;108  }109 110  .learn-more {111    color: #D8D8D8;112    font-size: 48px;113    font-weight: 700;114    margin-top: 70px;115  }116 117  /* Bottom gesture bar area */118  .bottom-safe {119    position: absolute;120    left: 0;121    bottom: 0;122    width: 100%;123    height: 170px;124    background: #000000;125  }126  .home-indicator {127    position: absolute;128    left: 50%;129    bottom: 46px;130    transform: translateX(-50%);131    width: 320px;132    height: 16px;133    background: #CFCFCF;134    border-radius: 12px;135    opacity: 0.9;136  }137</style>138</head>139<body>140<div id="render-target">141  <div class="appbar">142    <div class="statusbar">143      <div>8:13</div>144      <div class="icon-row">145        <!-- simple wifi icon -->146        <svg class="icon" viewBox="0 0 24 24">147          <path d="M12 20a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 20zM2 9l2 2a12 12 0 0 1 16 0l2-2C18 4 6 4 2 9zm4 4 2 2a8 8 0 0 1 8 0l2-2c-4-3-10-3-12 0z" />148        </svg>149        <!-- simple battery icon -->150        <svg class="icon" viewBox="0 0 24 24">151          <path d="M2 8h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2V8zm20 3v2h-2v-2h2z" />152        </svg>153      </div>154    </div>155    <div class="nav">156      <!-- Back arrow -->157      <svg class="icon" viewBox="0 0 24 24">158        <path d="M15 18 9 12l6-6" stroke="#FFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159      </svg>160      <div class="title">Emergengy Details</div>161    </div>162  </div>163 164  <div class="content">165    <div class="hero">[IMG: Red Cross Symbol]</div>166 167    <div class="steps">168      <div class="step">169        <div class="bullet">1</div>170        <div class="step-text">171          Minimize contact with the person's blood. If have gloves available, user gloves to protect you.172        </div>173      </div>174 175      <div class="step">176        <div class="bullet">2</div>177        <div class="step-text">178          Put this bag in another container with ice. However the ice should never come in direct contact with the amputated part.179        </div>180      </div>181 182      <div class="step">183        <div class="bullet">3</div>184        <div class="step-text">185          Mark the package with the name of the casualty and the time of packing. Always wash your hands after giving care.186        </div>187      </div>188    </div>189 190    <div class="learn-more">Learn more</div>191  </div>192 193  <div class="bottom-safe">194    <div class="home-indicator"></div>195  </div>196</div>197</body>198</html>