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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Header */18  .header {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 260px;24    background: #1CC067; /* green bar */25    color: #ffffff;26  }27  .status-bar {28    height: 90px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 40px;33    font-size: 40px;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  /* Simple status icons */42  .dot { width: 12px; height: 12px; background: #ffffff; border-radius: 50%; opacity: 0.85; }43  .wifi svg, .battery svg { display: block; }44  .title-row {45    height: 170px;46    display: flex;47    align-items: center;48    padding: 0 36px;49    border-bottom: 2px solid #e1e1e1;50    gap: 24px;51  }52  .title-text {53    color: #F3F6F4;54    font-size: 64px;55    font-weight: 500;56    letter-spacing: 0.2px;57  }58  .spacer { flex: 1; }59 60  /* Content */61  .content {62    position: absolute;63    top: 260px;64    left: 0;65    width: 100%;66    padding: 48px 54px 0 54px;67    color: #2f3a3f;68  }69  .section-label {70    color: #1CC067;71    font-size: 34px;72    font-weight: 700;73    letter-spacing: 2px;74    text-transform: uppercase;75    margin-bottom: 26px;76  }77  .field {78    font-size: 54px;79    color: #37474F;80    margin-bottom: 18px;81  }82  .underline {83    height: 2px;84    background: #cfcfcf;85    width: 100%;86    margin-bottom: 60px;87  }88  .align-title {89    font-size: 52px;90    color: #37474F;91    margin-bottom: 10px;92  }93  .align-sub {94    font-size: 36px;95    color: #8a9196;96    margin-bottom: 18px;97  }98  .radio-stack {99    margin-top: 10px;100    display: flex;101    flex-direction: column;102    gap: 18px;103  }104  .radio {105    width: 32px;106    height: 32px;107    border-radius: 50%;108    border: 3px solid #c7c7c7;109    background: #fff;110  }111 112  .toggle-row {113    margin-top: 36px;114    display: flex;115    align-items: center;116    justify-content: space-between;117    gap: 20px;118  }119  .toggle-label {120    font-size: 46px;121    color: #37474F;122  }123  .toggle {124    width: 160px;125    height: 64px;126    background: #bcbcbc;127    border-radius: 32px;128    position: relative;129  }130  .toggle .knob {131    width: 64px;132    height: 64px;133    background: #ffffff;134    border-radius: 50%;135    position: absolute;136    left: 0;137    top: 0;138    box-shadow: 0 2px 6px rgba(0,0,0,0.15);139  }140 141  /* Bottom navigation indicator */142  .bottom-bar {143    position: absolute;144    bottom: 0;145    left: 0;146    width: 100%;147    height: 120px;148    background: #000000;149    display: flex;150    align-items: center;151    justify-content: center;152  }153  .home-pill {154    width: 300px;155    height: 16px;156    border-radius: 8px;157    background: #e8e8e8;158    opacity: 0.85;159  }160 161  /* Icon buttons */162  .icon-btn { width: 64px; height: 64px; }163  .icon-btn svg { width: 100%; height: 100%; }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Green header -->170  <div class="header">171    <div class="status-bar">172      <div>3:07</div>173      <div class="status-right">174        <div class="dot"></div>175        <div class="dot"></div>176        <div class="wifi">177          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">178            <path d="M12 18.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z" fill="#fff"/>179            <path d="M3 10.5c5.9-5.2 12.1-5.2 18 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>180            <path d="M6 13.5c4.2-3.7 7.8-3.7 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>181            <path d="M9 16.5c2.2-2 3.8-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>182          </svg>183        </div>184        <div class="battery">185          <svg width="48" height="48" viewBox="0 0 24 24" fill="none">186            <rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>187            <rect x="21" y="9" width="2" height="6" fill="#fff"/>188            <rect x="4" y="8" width="12" height="8" fill="#fff"/>189          </svg>190        </div>191      </div>192    </div>193    <div class="title-row">194      <div class="icon-btn">195        <svg viewBox="0 0 24 24">196          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>197        </svg>198      </div>199      <div class="title-text">Survey Title</div>200      <div class="spacer"></div>201      <div class="icon-btn">202        <svg viewBox="0 0 24 24">203          <path d="M5 12l5 5 9-11" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" fill="none"/>204        </svg>205      </div>206    </div>207  </div>208 209  <!-- Content -->210  <div class="content">211    <div class="section-label">Survey Name</div>212 213    <div class="field">Employment Fair Survey</div>214    <div class="underline"></div>215 216    <div class="align-title">Alignment</div>217    <div class="align-sub">Center Aligned</div>218 219    <div class="radio-stack">220      <div class="radio"></div>221      <div class="radio"></div>222      <div class="radio"></div>223    </div>224 225    <div class="toggle-row">226      <div class="toggle-label">Use a nickname for this survey</div>227      <div class="toggle">228        <div class="knob"></div>229      </div>230    </div>231  </div>232 233  <!-- Bottom system navigation bar -->234  <div class="bottom-bar">235    <div class="home-pill"></div>236  </div>237 238</div>239</body>240</html>