GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Employment Fair Survey</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f7f7f7;14  }15 16  /* Top app bar */17  .appbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 170px;23    background: #1f5a36;24  }25  .exit {26    position: absolute;27    top: 58px;28    right: 48px;29    color: #d7eadc;30    letter-spacing: 2px;31    font-weight: 600;32    font-size: 38px;33  }34 35  /* Title */36  .title {37    position: absolute;38    top: 230px;39    left: 80px;40    right: 80px;41    color: #154e2f;42    font-weight: 800;43    font-size: 86px;44    line-height: 1.1;45  }46 47  /* Question */48  .question {49    position: absolute;50    top: 470px;51    left: 80px;52    right: 80px;53    font-size: 56px;54    color: #333;55  }56 57  /* Select dropdown visual */58  .select-box {59    position: absolute;60    top: 640px;61    left: 80px;62    width: 210px;63    height: 110px;64    border: 2px solid #c9c9c9;65    border-radius: 8px;66    background: #ffffff;67  }68  .select-box .chevron {69    position: absolute;70    right: 22px;71    top: 40px;72    width: 24px;73    height: 24px;74    border-right: 5px solid #6f6f6f;75    border-bottom: 5px solid #6f6f6f;76    transform: rotate(45deg);77  }78 79  /* Stepper dots on left */80  .dots {81    position: absolute;82    top: 650px;83    left: 20px;84    width: 40px;85  }86  .dot {87    width: 20px;88    height: 20px;89    border-radius: 50%;90    background: #eaeaea;91    border: 2px solid #d5d5d5;92    margin: 24px 0;93  }94 95  /* Done button */96  .btn-done {97    position: absolute;98    top: 910px;99    left: 80px;100    width: 920px;101    height: 120px;102    background: #134d2f;103    border-radius: 10px;104    box-shadow: 0 6px 0 rgba(0,0,0,0.15);105    display: flex;106    align-items: center;107    justify-content: center;108  }109  .btn-done span {110    color: #d7eadc;111    font-size: 58px;112    font-weight: 700;113    letter-spacing: 1px;114  }115 116  .privacy {117    position: absolute;118    bottom: 330px;119    width: 100%;120    text-align: center;121    color: #3d4b3f;122    font-size: 38px;123  }124 125  /* Overlay and modal list */126  .overlay {127    position: absolute;128    left: 0; top: 0;129    width: 1080px;130    height: 2400px;131    background: rgba(0,0,0,0.55);132  }133  .modal {134    position: absolute;135    left: 130px;136    top: 980px;137    width: 820px;138    background: #fff;139    border-radius: 14px;140    box-shadow: 0 24px 60px rgba(0,0,0,0.35);141    overflow: hidden;142  }143  .option {144    position: relative;145    padding: 48px 120px 48px 60px;146    font-size: 56px;147    color: #222;148  }149  .divider {150    height: 2px;151    background: #ececec;152  }153  .radio {154    position: absolute;155    right: 40px;156    top: 50%;157    transform: translateY(-50%);158    width: 58px;159    height: 58px;160    border-radius: 50%;161    border: 6px solid #7a7a7a;162    background: transparent;163  }164  .radio.selected {165    border-color: #0f8f72;166    box-shadow: inset 0 0 0 10px #ffffff;167  }168  .radio.selected::after {169    content: "";170    position: absolute;171    left: 50%;172    top: 50%;173    width: 24px;174    height: 24px;175    background: #0f8f72;176    border-radius: 50%;177    transform: translate(-50%,-50%);178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Top bar -->185  <div class="appbar"></div>186  <div class="exit">EXIT</div>187 188  <!-- Main content -->189  <div class="title">Employment Fair Survey</div>190  <div class="question">1. Did you like the event?</div>191 192  <div class="select-box">193    <div class="chevron"></div>194  </div>195 196  <div class="dots">197    <div class="dot"></div>198    <div class="dot"></div>199    <div class="dot"></div>200    <div class="dot"></div>201  </div>202 203  <div class="btn-done"><span>Done</span></div>204 205  <div class="privacy">Privacy & Cookie Notice</div>206 207  <!-- Dim overlay and modal list -->208  <div class="overlay"></div>209 210  <div class="modal">211    <div class="option">Yes212      <div class="radio selected"></div>213    </div>214    <div class="divider"></div>215    <div class="option">No216      <div class="radio"></div>217    </div>218  </div>219 220</div>221</body>222</html>