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>Survey Title Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16    color: #2b2f34;17  }18 19  /* Top status + app bar */20  .status-bar {21    height: 90px;22    background: #1ec77a;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 36px;27    font-size: 36px;28    box-sizing: border-box;29  }30  .status-left { flex: 1; opacity: 0.95; }31  .status-right {32    display: flex;33    align-items: center;34    gap: 20px;35    opacity: 0.95;36  }37  .app-bar {38    height: 150px;39    background: #1ec77a;40    display: flex;41    align-items: center;42    padding: 0 36px;43    box-sizing: border-box;44    color: #eafaf1;45  }46  .app-title {47    font-size: 54px;48    font-weight: 500;49    color: #eafaf1;50    margin-left: 24px;51  }52  .app-actions {53    margin-left: auto;54    display: flex;55    align-items: center;56  }57  .divider {58    height: 2px;59    background: #e0e0e0;60    width: 100%;61  }62 63  /* Content area */64  .content {65    padding: 36px 60px 0 60px;66    box-sizing: border-box;67  }68  .section-label {69    font-size: 30px;70    letter-spacing: 1px;71    color: #1ec77a;72    font-weight: 700;73    margin-top: 36px;74    margin-bottom: 20px;75  }76  .text-input-display {77    font-size: 48px;78    color: #2e3439;79    padding: 12px 0 18px 0;80    border-bottom: 3px solid #cfcfcf;81    margin-bottom: 46px;82  }83  .field {84    margin-top: 24px;85    margin-bottom: 28px;86  }87  .field-title {88    font-size: 44px;89    color: #2e3439;90    margin-bottom: 6px;91    font-weight: 600;92  }93  .field-sub {94    font-size: 34px;95    color: #60707c;96  }97 98  /* Alignment option dots (visual only) */99  .dot-column {100    position: absolute;101    left: 60px;102    top: 760px;103    display: flex;104    flex-direction: column;105    gap: 26px;106  }107  .dot {108    width: 28px;109    height: 28px;110    border-radius: 50%;111    border: 4px solid #cfcfcf;112    background: #fff;113  }114 115  /* Toggle row */116  .toggle-row {117    display: flex;118    align-items: center;119    justify-content: space-between;120    padding-right: 40px;121    margin-top: 40px;122  }123  .toggle-row .label {124    font-size: 40px;125    color: #2e3439;126  }127  .toggle {128    width: 150px;129    height: 64px;130    background: #bdbdbd;131    border-radius: 32px;132    position: relative;133  }134  .toggle::after {135    content: "";136    position: absolute;137    width: 64px;138    height: 64px;139    background: #ffffff;140    top: 0;141    left: 0;142    border-radius: 50%;143    box-shadow: 0 2px 6px rgba(0,0,0,0.2);144  }145 146  /* Bottom gesture area */147  .gesture-area {148    position: absolute;149    bottom: 0;150    left: 0;151    width: 1080px;152    height: 120px;153    background: #000000;154    display: flex;155    justify-content: center;156    align-items: center;157  }158  .gesture-bar {159    width: 300px;160    height: 12px;161    border-radius: 8px;162    background: #d9d9d9;163    opacity: 0.9;164  }165 166  /* Simple icon styles */167  .icon {168    width: 56px;169    height: 56px;170    display: inline-block;171  }172  .icon.small { width: 40px; height: 40px; }173  .icon.white path, .icon.white line, .icon.white polyline, .icon.white rect, .icon.white circle {174    stroke: #ffffff;175    fill: none;176    stroke-width: 6;177    stroke-linecap: round;178    stroke-linejoin: round;179  }180  .status-icon {181    width: 38px;182    height: 38px;183  }184</style>185</head>186<body>187<div id="render-target">188  <!-- Status bar -->189  <div class="status-bar">190    <div class="status-left">3:06</div>191    <div class="status-right">192      <!-- Fake status icons -->193      <svg class="status-icon" viewBox="0 0 24 24">194        <circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="2" fill="none"></circle>195      </svg>196      <svg class="status-icon" viewBox="0 0 24 24">197        <rect x="3" y="7" width="18" height="10" rx="2" ry="2" stroke="#ffffff" stroke-width="2" fill="none"></rect>198        <rect x="6" y="10" width="12" height="4" fill="#ffffff"></rect>199      </svg>200      <svg class="status-icon" viewBox="0 0 24 24">201        <path d="M2 22h20" stroke="#ffffff" stroke-width="2"></path>202        <path d="M3 17h6l3-7 3 5h6" stroke="#ffffff" stroke-width="2" fill="none"></path>203      </svg>204      <svg class="status-icon" viewBox="0 0 24 24">205        <path d="M3 7h18v10H3z" stroke="#ffffff" stroke-width="2" fill="none"></path>206        <rect x="5" y="9" width="14" height="6" fill="#ffffff"></rect>207      </svg>208    </div>209  </div>210 211  <!-- App bar -->212  <div class="app-bar">213    <!-- Back/close (X) -->214    <svg class="icon white" viewBox="0 0 24 24">215      <line x1="5" y1="5" x2="19" y2="19"></line>216      <line x1="19" y1="5" x2="5" y2="19"></line>217    </svg>218    <div class="app-title">Survey Title</div>219    <div class="app-actions">220      <svg class="icon white" viewBox="0 0 24 24">221        <polyline points="4,13 9,18 20,6"></polyline>222      </svg>223    </div>224  </div>225  <div class="divider"></div>226 227  <!-- Content -->228  <div class="content">229    <div class="section-label">SURVEY NAME</div>230    <div class="text-input-display">Employment Fair Survey</div>231 232    <div class="field">233      <div class="field-title">Alignment</div>234      <div class="field-sub">Left Aligned</div>235    </div>236 237    <!-- Decorative option dots -->238    <div class="dot-column">239      <div class="dot"></div>240      <div class="dot"></div>241      <div class="dot"></div>242    </div>243 244    <div class="toggle-row">245      <div class="label">Use a nickname for this survey</div>246      <div class="toggle" aria-hidden="true"></div>247    </div>248  </div>249 250  <!-- Bottom gesture area -->251  <div class="gesture-area">252    <div class="gesture-bar"></div>253  </div>254</div>255</body>256</html>