GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Employment Fair Survey</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top green status/header bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 170px;23    background: #11a84a; /* bright Survey-like green */24  }25 26  /* EXIT text */27  .exit-link {28    position: absolute;29    top: 185px;30    right: 48px;31    font-size: 44px;32    letter-spacing: 2px;33    color: #1a9362;34    font-weight: 600;35  }36 37  /* Main content area */38  .content {39    position: absolute;40    top: 250px;41    left: 80px;42    right: 80px;43  }44 45  .title {46    font-size: 86px;47    line-height: 1.1;48    color: #0f8c3c;49    font-weight: 800;50    margin: 0 0 80px 0;51  }52 53  .question-label {54    font-size: 54px;55    color: #3a3a3a;56    margin: 0 0 28px 0;57  }58 59  /* Dropdown */60  .select-wrapper {61    position: relative;62    width: 220px;63    height: 110px;64    margin-top: 10px;65  }66  select.custom-select {67    width: 100%;68    height: 100%;69    font-size: 42px;70    padding: 0 70px 0 28px;71    border: 2px solid #cfcfcf;72    border-radius: 10px;73    color: #333;74    appearance: none;75    background: #fff;76  }77  .select-wrapper .arrow {78    position: absolute;79    right: 18px;80    top: 50%;81    transform: translateY(-50%);82    width: 28px;83    height: 28px;84    pointer-events: none;85  }86 87  /* Progress dots on the left */88  .progress-dots {89    position: absolute;90    left: 16px;91    top: 780px;92    display: flex;93    flex-direction: column;94    gap: 44px;95  }96  .progress-dots .dot {97    width: 22px;98    height: 22px;99    border-radius: 50%;100    border: 4px solid #d9d9d9;101    background: #ffffff;102  }103  .progress-dots .dot.active {104    background: #11a84a;105    border-color: #11a84a;106  }107 108  /* Done button */109  .done-btn {110    margin-top: 120px;111    width: 100%;112    height: 150px;113    background: #0e7d34;114    color: #fff;115    border: none;116    border-radius: 12px;117    font-size: 56px;118    font-weight: 700;119    letter-spacing: 1px;120    cursor: pointer;121  }122 123  /* Powered by section */124  .powered-by {125    position: absolute;126    top: 1230px;127    left: 0;128    width: 100%;129    text-align: center;130    color: #4a4a4a;131    font-size: 36px;132  }133  .sm-line {134    margin-top: 24px;135    display: flex;136    align-items: center;137    justify-content: center;138    gap: 20px;139  }140  .monkey-icon {141    width: 64px;142    height: 64px;143  }144  .surveymonkey-text {145    font-size: 54px;146    color: #0f8c3c;147    font-weight: 800;148  }149  .cta {150    margin-top: 26px;151    font-size: 36px;152    color: #4a4a4a;153  }154  .cta a {155    color: #0f8c3c;156    text-decoration: underline;157  }158 159  .footer-link {160    position: absolute;161    bottom: 260px;162    left: 0;163    width: 100%;164    text-align: center;165    color: #3c3c3c;166    font-size: 38px;167  }168</style>169</head>170<body>171<div id="render-target">172  <div class="status-bar"></div>173 174  <div class="exit-link">EXIT</div>175 176  <!-- Progress dots -->177  <div class="progress-dots">178    <div class="dot active"></div>179    <div class="dot"></div>180    <div class="dot"></div>181    <div class="dot"></div>182  </div>183 184  <div class="content">185    <h1 class="title">Employment Fair Survey</h1>186 187    <div class="question">188      <div class="question-label">1. Did you like the event?</div>189      <div class="select-wrapper">190        <select class="custom-select" aria-label="Did you like the event">191          <option value="" selected disabled>Select</option>192          <option>Yes</option>193          <option>No</option>194          <option>Not sure</option>195        </select>196        <!-- Downward arrow icon -->197        <svg class="arrow" viewBox="0 0 24 24" fill="#6f6f6f">198          <path d="M7 10l5 5 5-5H7z"></path>199        </svg>200      </div>201 202      <button class="done-btn">Done</button>203    </div>204  </div>205 206  <div class="powered-by">207    <div>Powered by</div>208    <div class="sm-line">209      <!-- Simple monkey-like logo (abstract) -->210      <svg class="monkey-icon" viewBox="0 0 64 64">211        <circle cx="32" cy="32" r="28" fill="#0f8c3c"></circle>212        <circle cx="24" cy="28" r="6" fill="#ffffff"></circle>213        <circle cx="40" cy="28" r="6" fill="#ffffff"></circle>214      </svg>215      <div class="surveymonkey-text">SurveyMonkey</div>216    </div>217    <div class="cta">218      See how easy it is to <a href="#">create a survey</a>.219    </div>220  </div>221 222  <div class="footer-link">Privacy &amp; Cookie Notice</div>223</div>224</body>225</html>