GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0E2C2C; /* deep teal/dark */20    color: #FFFFFF;21  }22 23  /* Header */24  .header {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 180px;30    padding: 40px 36px 20px 36px; /* status spacing and side paddings */31    box-sizing: border-box;32  }33  .header-row {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .icon-btn {39    width: 68px;40    height: 68px;41    display: flex;42    align-items: center;43    justify-content: center;44    border-radius: 34px;45    color: #D5E3E6;46  }47  .title {48    font-size: 56px;49    line-height: 64px;50    font-weight: 600;51    color: #E8F1F2;52    flex: 1;53  }54  .divider {55    position: absolute;56    left: 0;57    right: 0;58    top: 180px;59    height: 1px;60    background: #264142;61  }62 63  /* List area */64  .results {65    position: absolute;66    top: 190px;67    left: 0;68    right: 0;69    padding-top: 20px;70  }71  .result-item {72    display: flex;73    align-items: center;74    padding: 40px 36px;75    gap: 32px;76  }77  .avatar {78    width: 120px;79    height: 120px;80    border-radius: 60px;81    background: #8E63F7; /* purple circle */82    display: flex;83    align-items: center;84    justify-content: center;85    color: #0E2C2C;86    font-size: 64px;87    font-weight: 700;88  }89  .result-texts {90    display: flex;91    flex-direction: column;92    gap: 14px;93  }94  .name {95    font-size: 50px;96    font-weight: 700;97    color: #74E6B9; /* mint green title */98  }99  .sub {100    font-size: 40px;101    color: #CFE7E5;102  }103 104  /* Gesture bar at bottom */105  .gesture-bar {106    position: absolute;107    bottom: 60px;108    left: 50%;109    transform: translateX(-50%);110    width: 320px;111    height: 12px;112    border-radius: 8px;113    background: #EAEAEA;114    opacity: 0.9;115  }116 117  /* SVG tweaks */118  svg {119    width: 44px;120    height: 44px;121  }122  .icon-muted {123    color: #C7D4D6;124  }125</style>126</head>127<body>128<div id="render-target">129  <!-- Header -->130  <div class="header">131    <div class="header-row">132      <div class="icon-btn" aria-label="Back">133        <!-- Back Arrow -->134        <svg viewBox="0 0 24 24">135          <path fill="currentColor" d="M14.7 5.3L9 11l5.7 5.7-1.4 1.4L6.2 12l7.1-7.1 1.4 1.4z"/>136        </svg>137      </div>138      <div class="title">Clara Wagner</div>139      <div class="icon-btn icon-muted" aria-label="Clear">140        <!-- X / Clear -->141        <svg viewBox="0 0 24 24">142          <path fill="currentColor" d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>143        </svg>144      </div>145      <div class="icon-btn icon-muted" aria-label="Voice Search">146        <!-- Microphone -->147        <svg viewBox="0 0 24 24">148          <path fill="currentColor" d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm-6-3a6 6 0 0 0 12 0h-2a4 4 0 0 1-8 0H6zm5 6v3h2v-3h-2z"/>149        </svg>150      </div>151    </div>152  </div>153  <div class="divider"></div>154 155  <!-- Results list -->156  <div class="results">157    <div class="result-item">158      <div class="avatar">C</div>159      <div class="result-texts">160        <div class="name">Clara Wagner</div>161        <div class="sub">Clara Wagner</div>162      </div>163    </div>164  </div>165 166  <!-- Gesture bar -->167  <div class="gesture-bar"></div>168</div>169</body>170</html>