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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13  }14  /* Top green app bar */15  .app-header {16    position: absolute; left: 0; top: 0;17    width: 1080px; height: 260px; background: #10C46E; /* vibrant green */18    box-shadow: 0 2px 0 rgba(0,0,0,0.1);19  }20  .status-bar {21    height: 90px; color: #fff; font-size: 36px;22    display: flex; align-items: center; justify-content: space-between;23    padding: 0 40px;24  }25  .status-icons { display: flex; align-items: center; gap: 22px; }26  .icon-dot { width: 14px; height: 14px; background: #fff; opacity: 0.85; border-radius: 50%; }27  .title-row {28    height: 170px; display: flex; align-items: center; justify-content: space-between;29    padding: 0 40px;30  }31  .title-row .title {32    color: #263238; font-size: 56px; font-weight: 500; letter-spacing: 0.5px;33  }34  .divider { position: absolute; left: 0; top: 260px; width: 1080px; height: 2px; background: #E0E0E0; }35  /* Content */36  .content { position: absolute; left: 0; top: 262px; width: 100%; padding: 52px 48px; color: #37474F; }37  .section-label {38    color: #0DBD64; font-size: 32px; font-weight: 700; letter-spacing: 1.6px;39  }40  .input-field {41    margin-top: 30px; width: 984px;42  }43  .input-field .value {44    font-size: 44px; color: #37474F;45  }46  .input-field .underline {47    margin-top: 18px; width: 100%; height: 2px; background: #BDBDBD;48  }49  /* Toggle row */50  .toggle-row {51    position: relative; margin-top: 80px; width: 984px; height: 84px;52    display: flex; align-items: center; justify-content: space-between;53  }54  .toggle-row .label {55    font-size: 36px; color: #263238;56  }57  .switch {58    position: relative; width: 160px; height: 80px;59    background: #B0BEC5; border-radius: 40px;60  }61  .switch::after {62    content: ""; position: absolute; top: 8px; left: 8px;63    width: 64px; height: 64px; background: #fff; border-radius: 50%;64    box-shadow: 0 1px 3px rgba(0,0,0,0.25);65  }66  /* Popover menu */67  .popover {68    position: absolute; left: 56px; top: 620px; width: 900px;69    background: #FFFFFF; border-radius: 10px;70    box-shadow: 0 10px 20px rgba(0,0,0,0.15);71    border: 1px solid #EEEEEE;72    z-index: 5;73  }74  .popover .item {75    padding: 34px 36px; font-size: 40px; border-bottom: 1px solid #F0F0F0; color: #37474F;76  }77  .popover .item:first-child { color: #0D6EBA; }78  .popover .item:last-child { border-bottom: none; }79  .popover .handle {80    position: absolute; left: -26px; top: 30px; width: 12px; display: flex; flex-direction: column; gap: 10px;81  }82  .popover .handle .dot {83    width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; border: 1px solid #D0D0D0;84    box-shadow: 0 0 0 1px rgba(0,0,0,0.03);85  }86  /* Bottom navigation area */87  .bottom-bar {88    position: absolute; left: 0; bottom: 0; width: 1080px; height: 120px; background: #000;89  }90  .home-indicator {91    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);92    width: 320px; height: 12px; background: #C7C7C7; border-radius: 6px;93  }94  /* Simple icons */95  .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }96  .icon { width: 48px; height: 48px; }97</style>98</head>99<body>100<div id="render-target">101  <!-- Header -->102  <div class="app-header">103    <div class="status-bar">104      <div>3:07</div>105      <div class="status-icons">106        <div class="icon-dot"></div>107        <div class="icon-dot"></div>108        <div class="icon-dot"></div>109        <div class="icon-dot"></div>110      </div>111    </div>112    <div class="title-row">113      <div class="icon-btn">114        <svg class="icon" viewBox="0 0 24 24">115          <path d="M4 4 L20 20 M20 4 L4 20" stroke="#E5E7EB" stroke-width="3" fill="none" stroke-linecap="round"/>116        </svg>117      </div>118      <div class="title">Survey Title</div>119      <div class="icon-btn">120        <svg class="icon" viewBox="0 0 24 24">121          <path d="M4 13 L9 18 L20 6" stroke="#E5E7EB" stroke-width="3" fill="none" stroke-linecap="round"/>122        </svg>123      </div>124    </div>125  </div>126  <div class="divider"></div>127 128  <!-- Content -->129  <div class="content">130    <div class="section-label">SURVEY NAME</div>131 132    <div class="input-field">133      <div class="value">Employment Fair Survey</div>134      <div class="underline"></div>135    </div>136 137    <div class="toggle-row">138      <div class="label">Use a nickname for this survey</div>139      <div class="switch"></div>140    </div>141  </div>142 143  <!-- Popover menu -->144  <div class="popover">145    <div class="handle">146      <div class="dot"></div>147      <div class="dot"></div>148      <div class="dot"></div>149      <div class="dot"></div>150    </div>151    <div class="item">Left Aligned</div>152    <div class="item">Center Aligned</div>153  </div>154 155  <!-- Bottom navigation -->156  <div class="bottom-bar">157    <div class="home-indicator"></div>158  </div>159</div>160</body>161</html>