GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Form UI - Tell us who you are</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 1080px; height: 120px;16    background: #B32A12; color: #fff;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px;19    box-sizing: border-box;20  }21  .status-left { font-size: 40px; font-weight: 600; }22  .status-right { display: flex; align-items: center; gap: 26px; }23  .status-icon { width: 44px; height: 44px; }24 25  /* Content */26  .content {27    position: absolute; left: 54px; right: 54px; top: 160px; /* below status bar */28  }29  .title {30    font-size: 72px; line-height: 86px; color: #2D2D2D; font-weight: 700;31    margin: 0 0 50px 0;32  }33 34  .field { margin-bottom: 42px; position: relative; }35  .label {36    font-size: 28px; color: #7A7A7A; margin-bottom: 12px;37  }38  .input-box {39    height: 140px; border: 2px solid #CFCFCF; border-radius: 18px;40    display: flex; align-items: center; padding: 0 32px; box-sizing: border-box;41    font-size: 46px; color: #222;42    background: #fff;43  }44  .input-box.placeholder { color: #9E9E9E; }45  .input-box.active {46    border: 4px solid #171717;47    box-shadow: 0 0 0 3px rgba(23,23,23,0.05) inset;48  }49 50  .help-icon {51    position: absolute; right: 30px; top: 78px; width: 70px; height: 70px;52    border-radius: 36px; border: 2px solid #BDBDBD; display: flex;53    align-items: center; justify-content: center;54    background: #fff;55  }56  .help-icon svg { width: 34px; height: 34px; fill: #777; }57 58  .note {59    font-size: 34px; color: #4F4F4F; margin-top: 18px; line-height: 46px;60  }61 62  /* Keyboard overlay (simplified) */63  .keyboard {64    position: absolute; left: 0; bottom: 0; width: 1080px; height: 900px;65    background: #1E1E1E; color: #EDEDED; box-sizing: border-box;66    border-top-left-radius: 14px; border-top-right-radius: 14px;67    padding: 28px 24px;68  }69  .kb-suggestions {70    height: 86px; background: #2A2A2A; border-radius: 12px;71    display: flex; align-items: center; justify-content: space-around;72    font-size: 36px;73    margin-bottom: 28px;74  }75  .kb-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 22px; }76  .key {77    height: 118px; min-width: 86px; padding: 0 20px;78    background: #2C2C2C; border-radius: 18px; display: flex;79    align-items: center; justify-content: center; font-size: 42px;80    border: 1px solid #3A3A3A;81  }82  .key.wide { min-width: 200px; }83  .space { min-width: 540px; }84  .accent { background: #BDA2C6; color: #1A1A1A; }85 86  /* Simple utility divider dots */87  .kb-suggestions span.divider { opacity: 0.35; }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status Bar -->94  <div class="status-bar">95    <div class="status-left">8:18</div>96    <div class="status-right">97      <!-- WiFi icon -->98      <svg class="status-icon" viewBox="0 0 24 24">99        <path fill="#fff" d="M12 18l-2 2 2 2 2-2-2-2zm0-4c-2.5 0-4.7.9-6.5 2.4l1.4 1.4C8.3 16.4 10.1 15.8 12 15.8s3.7.6 5.1 1.6l1.4-1.4C16.7 14.9 14.5 14 12 14zm0-5.2c-4 0-7.6 1.5-10.3 4.2l1.4 1.4C5.4 11.8 8.5 10.6 12 10.6s6.6 1.2 8.9 3.8l1.4-1.4C19.6 10.3 16 8.8 12 8.8z"/>100      </svg>101      <!-- Battery icon -->102      <svg class="status-icon" viewBox="0 0 24 24">103        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>104        <rect x="4" y="8" width="12" height="8" fill="#fff"/>105        <rect x="20" y="10" width="2" height="4" fill="#fff"/>106      </svg>107    </div>108  </div>109 110  <!-- Main Content -->111  <div class="content">112    <h1 class="title">Tell us who you are</h1>113 114    <!-- First Name -->115    <div class="field">116      <div class="label">First Name</div>117      <div class="input-box">ABC</div>118    </div>119 120    <!-- Last Name (active) -->121    <div class="field">122      <div class="label">Last Name</div>123      <div class="input-box active">Resea</div>124    </div>125 126    <!-- Birthdate -->127    <div class="field">128      <div class="label">Birthdate</div>129      <div class="input-box placeholder">Birthdate</div>130      <div class="help-icon">131        <svg viewBox="0 0 24 24">132          <circle cx="12" cy="12" r="10" fill="none" stroke="#777" stroke-width="1.5"/>133          <path d="M12 7.5c-1.6 0-2.7 1.1-2.7 2.3h1.8c0-.5.4-.8.9-.8.6 0 .9.3.9.7 0 .4-.2.6-.8 1l-.5.3c-.9.6-1.3 1.1-1.3 2.2v.3h1.8v-.3c0-.6.2-.9.8-1.3l.5-.3c.9-.6 1.3-1.2 1.3-2.3 0-1.3-1.1-2.3-2.7-2.3zM12 17.8a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2z" fill="#777"/>134        </svg>135      </div>136    </div>137 138    <!-- Gender -->139    <div class="field">140      <div class="label">Gender</div>141      <div class="input-box placeholder">Gender</div>142      <div class="help-icon">143        <svg viewBox="0 0 24 24">144          <circle cx="12" cy="12" r="10" fill="none" stroke="#777" stroke-width="1.5"/>145          <path d="M12 7.5c-1.6 0-2.7 1.1-2.7 2.3h1.8c0-.5.4-.8.9-.8.6 0 .9.3.9.7 0 .4-.2.6-.8 1l-.5.3c-.9.6-1.3 1.1-1.3 2.2v.3h1.8v-.3c0-.6.2-.9.8-1.3l.5-.3c.9-.6 1.3-1.2 1.3-2.3 0-1.3-1.1-2.3-2.7-2.3zM12 17.8a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2z" fill="#777"/>146        </svg>147      </div>148    </div>149 150    <div class="note">151      Your profile is public by default. Change your visibility any time in Privacy Controls.152    </div>153  </div>154 155  <!-- Keyboard (simplified visual) -->156  <div class="keyboard">157    <div class="kb-suggestions">158      <span>Resea</span>159      <span class="divider">|</span>160      <span>Researcher</span>161      <span class="divider">|</span>162      <span>Researching</span>163    </div>164 165    <div class="kb-row">166      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>167      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>168    </div>169    <div class="kb-row">170      <div class="key wide">⇧</div>171      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>172      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>173      <div class="key wide">174        <svg viewBox="0 0 24 24" width="40" height="40">175          <path fill="#EDEDED" d="M6 5l8 7-8 7v-4H2v-6h4V5zM18 7h4v10h-4z"/>176        </svg>177      </div>178    </div>179    <div class="kb-row">180      <div class="key accent">?123</div>181      <div class="key">,</div>182      <div class="key">☺</div>183      <div class="key space">space</div>184      <div class="key">.</div>185      <div class="key accent">✓</div>186    </div>187  </div>188 189</div>190</body>191</html>