GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Employment Fair Survey - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #f2f4f5;13  }14 15  /* App bar */16  .appbar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 220px;22    background: #4CAF50;23    box-shadow: 0 2px 6px rgba(0,0,0,0.2);24    color: white;25  }26  .status {27    height: 84px;28    display: flex;29    align-items: center;30    padding: 0 28px;31    font-size: 28px;32    opacity: 0.95;33  }34  .toolbar {35    height: 136px;36    display: flex;37    align-items: center;38    padding: 0 28px;39    justify-content: space-between;40  }41  .left-group {42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .title {47    font-size: 54px;48    font-weight: 600;49    letter-spacing: 0.3px;50  }51  .icon {52    width: 56px;53    height: 56px;54    display: inline-flex;55    align-items: center;56    justify-content: center;57  }58 59  /* Content area */60  .content {61    position: absolute;62    top: 220px;63    left: 0;64    right: 0;65    bottom: 160px;66    padding: 24px;67    overflow: hidden;68  }69  .card {70    background: #fff;71    border-radius: 8px;72    box-shadow: 0 2px 6px rgba(0,0,0,0.1);73    padding: 28px 28px 36px;74    width: calc(100% - 48px);75    margin: 0 auto;76    min-height: 640px;77  }78  .logo-btn {79    display: inline-flex;80    align-items: center;81    gap: 18px;82    background: #f1c232;83    color: #1f1f1f;84    font-weight: 700;85    border-radius: 8px;86    padding: 22px 28px;87    font-size: 36px;88  }89  .survey-title {90    text-align: center;91    margin: 36px 0 14px;92    font-size: 62px;93    font-weight: 800;94    color: #2e7d32;95  }96  .page-title {97    color: #4CAF50;98    font-size: 44px;99    margin: 10px 6px 22px;100  }101  .question {102    font-size: 50px;103    font-weight: 800;104    color: #333;105    margin: 18px 6px;106  }107  .select {108    margin: 16px 6px 0;109    height: 120px;110    border: 2px solid #cfd8dc;111    border-radius: 6px;112    display: flex;113    align-items: center;114    padding: 0 24px;115    font-size: 40px;116    color: #555;117    position: relative;118  }119  .select .chev {120    position: absolute;121    right: 24px;122    width: 42px;123    height: 42px;124    opacity: 0.7;125  }126 127  /* Floating action button */128  .fab {129    position: absolute;130    right: 44px;131    bottom: 220px;132    width: 150px;133    height: 150px;134    background: #4CAF50;135    border-radius: 50%;136    box-shadow: 0 8px 18px rgba(0,0,0,0.25);137    display: flex;138    align-items: center;139    justify-content: center;140  }141  .fab span {142    color: #fff;143    font-size: 90px;144    line-height: 0;145  }146 147  /* Bottom page indicator bar */148  .bottom-bar {149    position: absolute;150    left: 0;151    right: 0;152    bottom: 0;153    height: 160px;154    background: #ffffff;155    border-top: 1px solid #e0e0e0;156    display: flex;157    align-items: center;158    padding: 0 36px;159    justify-content: flex-start;160    gap: 18px;161    color: #333;162    font-size: 40px;163  }164 165  /* Simple helpers for mock status icons */166  .status .dot {167    width: 16px; height: 16px; background: white; border-radius: 50%; margin-right: 14px; opacity: 0.9;168  }169  .wifi {170    width: 34px; height: 24px; border: 3px solid white; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); margin-left: auto; margin-right: 16px;171  }172  .battery {173    width: 44px; height: 22px; border: 3px solid white; border-radius: 3px; position: relative;174  }175  .battery::after {176    content: "";177    position: absolute;178    right: -8px; top: 6px;179    width: 6px; height: 10px; background: white; border-radius: 1px;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- App Bar -->187  <div class="appbar">188    <div class="status">189      <div style="font-weight:700;">3:52</div>190      <div class="dot"></div><div class="dot"></div><div class="dot"></div>191      <div class="wifi"></div>192      <div class="battery"></div>193    </div>194    <div class="toolbar">195      <div class="left-group">196        <div class="icon">197          <svg viewBox="0 0 24 24" width="56" height="56" fill="#ffffff">198            <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>199          </svg>200        </div>201        <div class="title">Edit</div>202      </div>203      <div class="left-group" style="gap:26px;">204        <div class="icon">205          <!-- Paper plane -->206          <svg viewBox="0 0 24 24" width="56" height="56" fill="#ffffff">207            <path d="M2 21l20-9L2 3v7l14 2-14 2z"/>208          </svg>209        </div>210        <div class="icon">211          <!-- Kebab menu -->212          <svg viewBox="0 0 24 24" width="56" height="56" fill="#ffffff">213            <circle cx="12" cy="5" r="2.2"></circle>214            <circle cx="12" cy="12" r="2.2"></circle>215            <circle cx="12" cy="19" r="2.2"></circle>216          </svg>217        </div>218      </div>219    </div>220  </div>221 222  <!-- Content -->223  <div class="content">224    <div class="card">225      <div class="logo-btn">226        <span>227          <svg viewBox="0 0 24 24" width="42" height="42" fill="#1f1f1f">228            <path d="M19 11H13V5h-2v6H5v2h6v6h2v-6h6z"/>229          </svg>230        </span>231        <span>ADD LOGO</span>232      </div>233 234      <div class="survey-title">Employment Fair Survey</div>235 236      <div class="page-title">Page Title</div>237 238      <div class="question">1. Did you like the event?</div>239 240      <div class="select">241        <span style="color:#9e9e9e;">Select an option</span>242        <svg class="chev" viewBox="0 0 24 24" fill="#424242">243          <path d="M7 10l5 5 5-5z"></path>244        </svg>245      </div>246    </div>247  </div>248 249  <!-- Floating Add Button -->250  <div class="fab">251    <span>+</span>252  </div>253 254  <!-- Bottom Page Indicator -->255  <div class="bottom-bar">256    <svg viewBox="0 0 24 24" width="44" height="44" fill="#2f2f2f">257      <path d="M7 14l5-5 5 5H7z"></path>258    </svg>259    <div>PAGE 1 OF 1</div>260  </div>261 262</div>263</body>264</html>