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>Tell us who you are - Mock</title>7<style>8  /* Environment resets */9  html, body { margin: 0; padding: 0; background: transparent; }10  *, *::before, *::after { box-sizing: border-box; }11 12  /* Render target requirements */13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;20    color: #222;21  }22 23  /* Status bar */24  .status-bar {25    height: 150px;26    background: #B12C0D;27    position: relative;28    color: #fff;29    padding: 0 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33  }34  .status-time {35    font-size: 44px;36    font-weight: 600;37    letter-spacing: 1px;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .icon-wifi, .icon-battery {45    display: inline-block;46  }47  .icon-wifi {48    width: 46px; height: 34px; position: relative;49  }50  .icon-wifi::before, .icon-wifi::after {51    content: ""; position: absolute; left: 0; right: 0; margin: auto; border: 3px solid #fff; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-radius: 50%;52  }53  .icon-wifi::before { width: 46px; height: 46px; top: -6px; }54  .icon-wifi::after  { width: 28px; height: 28px; top: 4px; }55  .icon-battery {56    width: 64px; height: 32px; border: 3px solid #fff; border-radius: 6px; position: relative;57  }58  .icon-battery::after {59    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 16px; background: #fff; border-radius: 2px;60  }61 62  /* Content area */63  .content {64    padding: 40px 64px 0 64px;65  }66  h1.title {67    font-size: 96px;68    line-height: 1.05;69    margin: 22px 0 36px 0;70    font-weight: 800;71    letter-spacing: -1px;72  }73 74  /* Form fields */75  .field {76    position: relative;77    width: 100%;78    height: 140px;79    border: 2px solid #CFCFCF;80    border-radius: 18px;81    margin: 34px 0;82    background: #fff;83  }84  .field.thick {85    border: 3px solid #303030;86  }87  .floating-label {88    position: absolute;89    top: -18px;90    left: 24px;91    padding: 0 12px;92    background: #fff;93    font-size: 30px;94    color: #6B6B6B;95  }96  .input {97    position: absolute;98    left: 24px;99    right: 24px;100    top: 42px;101    bottom: 24px;102    border: none;103    outline: none;104    font-size: 44px;105    color: #222;106    background: transparent;107  }108  .placeholder {109    color: #9B9B9B;110  }111  .with-icon .help-icon {112    position: absolute;113    right: 24px;114    top: 50%;115    transform: translateY(-50%);116    width: 70px;117    height: 70px;118    border: 2px solid #BDBDBD;119    border-radius: 50%;120    display: flex;121    align-items: center;122    justify-content: center;123    color: #7D7D7D;124    font-weight: 700;125    font-size: 40px;126    background: #fff;127  }128 129  .info-text {130    margin-top: 22px;131    font-size: 38px;132    line-height: 1.45;133    color: #5a5a5a;134  }135 136  /* Keyboard placeholder */137  .suggestions-bar {138    position: absolute;139    left: 36px;140    right: 36px;141    bottom: 864px;142    height: 110px;143    background: #E7E5E4;144    border-radius: 16px;145    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);146  }147  .keyboard {148    position: absolute;149    left: 0; right: 0; bottom: 0;150    height: 860px;151    background: #1D1B20;152    padding: 30px 26px 26px 26px;153  }154  .key-row {155    display: grid;156    grid-gap: 16px;157    margin-bottom: 22px;158  }159  .row10 { grid-template-columns: repeat(10, 1fr); }160  .row9  { grid-template-columns: 0.7fr repeat(8, 1fr) 0.7fr; }161  .row7  { grid-template-columns: 1fr repeat(7, 1fr) 1fr; }162  .special-row {163    display: grid;164    grid-template-columns: 1.2fr 0.9fr 6fr 0.9fr 1.2fr;165    grid-gap: 16px;166  }167  .key {168    background: #3A3A3C;169    color: #EDEDED;170    border-radius: 18px;171    height: 110px;172    display: flex;173    align-items: center;174    justify-content: center;175    font-size: 44px;176    font-weight: 600;177    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);178  }179  .key.hint {180    background: #6E5A76;181    color: #fff;182  }183  .key.space { justify-content: flex-start; padding-left: 24px; color: #CFCFCF; font-weight: 500; }184  .key.return { background: #BFA7CF; color: #2b2b2b; }185  .key.light { background: #4A4A4D; }186 187  /* Safe area handle */188  .home-indicator {189    position: absolute;190    bottom: 12px;191    left: 50%;192    transform: translateX(-50%);193    width: 320px;194    height: 8px;195    border-radius: 8px;196    background: rgba(255,255,255,0.7);197  }198</style>199</head>200<body>201<div id="render-target">202  <!-- Top status bar -->203  <div class="status-bar">204    <div class="status-time">8:1