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 - Mock</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: #ffffff;14  }15 16  /* Top system/status bar + app header */17  .top-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 180px;23    background: #4CAF50;24  }25  .status {26    position: absolute;27    top: 18px;28    left: 24px;29    color: #fff;30    font-size: 38px;31    letter-spacing: 1px;32  }33  .status-icons {34    position: absolute;35    top: 18px;36    right: 26px;37    color: #fff;38    font-size: 36px;39    display: flex;40    align-items: center;41    gap: 18px;42  }43  .battery {44    width: 64px;45    height: 30px;46    border: 3px solid #fff;47    border-radius: 4px;48    position: relative;49  }50  .battery::after {51    content: "";52    position: absolute;53    right: -8px;54    top: 8px;55    width: 8px;56    height: 14px;57    background: #fff;58    border-radius: 2px;59  }60  .battery .level {61    position: absolute;62    left: 3px;63    top: 3px;64    height: 22px;65    width: 44px;66    background: #fff;67  }68  .exit-link {69    position: absolute;70    right: 36px;71    top: 110px;72    color: #e9f6ea;73    font-size: 36px;74    letter-spacing: 2px;75  }76 77  /* Title */78  .title {79    position: absolute;80    top: 250px;81    left: 70px;82    width: 940px;83    color: #2f7d32;84    font-size: 74px;85    font-weight: 800;86    line-height: 1.15;87  }88 89  /* Question */90  .question {91    position: absolute;92    top: 420px;93    left: 75px;94    width: 930px;95    color: #333;96    font-size: 46px;97  }98 99  /* Dropdown */100  .dropdown {101    position: absolute;102    top: 560px;103    left: 75px;104    width: 195px;105    height: 92px;106    border: 4px solid #2f7d32;107    border-radius: 14px;108    display: flex;109    align-items: center;110    justify-content: space-between;111    padding: 0 22px;112    color: #2f7d32;113    background: #fff;114    box-sizing: border-box;115    font-size: 42px;116    font-weight: 700;117  }118  .dropdown svg { width: 28px; height: 28px; fill: #2f7d32; }119 120  /* Progress dots on left */121  .progress-dots {122    position: absolute;123    left: 20px;124    top: 620px;125    display: flex;126    flex-direction: column;127    gap: 30px;128  }129  .dot {130    width: 34px;131    height: 34px;132    border-radius: 50%;133    border: 4px solid #d9d9d9;134    background: #fff;135    box-sizing: border-box;136  }137  .dot.active {138    background: #eaeaea;139    border-color: #cfcfcf;140  }141 142  /* Done button */143  .btn-done {144    position: absolute;145    top: 820px;146    left: 75px;147    width: 930px;148    height: 120px;149    background: #2f7d32;150    color: #fff;151    border-radius: 10px;152    font-size: 48px;153    font-weight: 700;154    display: flex;155    align-items: center;156    justify-content: center;157  }158 159  /* Powered by + logo */160  .powered-by {161    position: absolute;162    top: 1060px;163    width: 100%;164    text-align: center;165    color: #555;166    font-size: 34px;167  }168  .logo-box {169    margin: 22px auto 0;170    width: 640px;171    height: 110px;172    background: #E0E0E0;173    border: 1px solid #BDBDBD;174    display: flex;175    align-items: center;176    justify-content: center;177    color: #757575;178    font-size: 40px;179    border-radius: 8px;180  }181 182  .link-area {183    position: absolute;184    top: 1230px;185    width: 100%;186    text-align: center;187    color: #444;188    font-size: 36px;189  }190  .link-area a {191    color: #2f7d32;192    text-decoration: underline;193  }194 195  .privacy {196    position: absolute;197    top: 1500px;198    width: 100%;199    text-align: center;200    font-size: 36px;201    color: #4a4a4a;202  }203 204  /* Bottom navigation bar indicator */205  .bottom-bar {206    position: absolute;207    bottom: 28px;208    left: 50%;209    transform: translateX(-50%);210    width: 520px;211    height: 16px;212    background: #000;213    border-radius: 10px;214    opacity: 0.85;215  }216</style>217</head>218<body>219<div id="render-target">220  <div class="top-bar">221    <div class="status">3:52</div>222    <div class="status-icons">223      <span style="font-size:34px;">📶</span>224      <div class="battery"><div class="level"></div></div>225    </div>226    <div class="exit-link">EXIT</div>227  </div>228 229  <div class="title">Employment Fair Survey</div>230 231  <div class="question">1. Did you like the event?</div>232 233  <div class="dropdown">234    <span>Yes</span>235    <svg viewBox="0 0 24 24">236      <path d="M6 9l6 6 6-6H6z"></path>237    </svg>238  </div>239 240  <div class="progress-dots">241    <div class="dot"></div>242    <div class="dot active"></div>243    <div class="dot"></div>244    <div class="dot"></div>245    <div class="dot"></div>246  </div>247 248  <div class="btn-done">Done</div>249 250  <div class="powered-by">Powered by</div>251  <div class="logo-box">[IMG: SurveyMonkey Logo]</div>252 253  <div class="link-area">See how easy it is to <a href="#">create a survey</a>.</div>254 255  <div class="privacy">Privacy &amp; Cookie Notice</div>256 257  <div class="bottom-bar"></div>258</div>259</body>260</html>