GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>New List - Mobile UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    border-radius: 0;14  }15 16  /* Top app bar */17  .appbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 220px;23    background: #163A8A; /* deep navy */24    color: #FFFFFF;25  }26  .status {27    height: 72px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 36px;32    font-size: 30px;33    opacity: 0.95;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex; align-items: center; gap: 22px;38    font-size: 28px;39  }40  .title-row {41    height: 148px;42    display: flex; align-items: center;43    padding: 0 32px;44    gap: 24px;45  }46  .back-icon {47    width: 64px; height: 64px;48  }49  .title-text {50    font-size: 56px; font-weight: 600;51  }52 53  /* Content */54  .content {55    position: absolute;56    top: 220px;57    left: 0;58    width: 1080px;59    height: 1240px; /* space above keyboard */60    background: #FFFFFF;61  }62  .label-row {63    display: flex;64    align-items: center;65    justify-content: space-between;66    padding: 48px 48px 24px 48px;67  }68  .label-row .label {69    font-size: 38px; color: #2E2E2E; font-weight: 600;70  }71  .label-row .counter {72    font-size: 34px; color: #777777;73  }74  .text-area {75    margin: 0 48px;76    height: 210px;77    border: 3px solid #2E6AD9;78    border-radius: 8px;79    background: #FFFFFF;80  }81 82  /* Disabled button */83  .save-btn {84    position: absolute;85    left: 30px;86    bottom: 20px; /* sits above keyboard area */87    width: 1020px;88    height: 110px;89    border-radius: 12px;90    background: #E6E6E6;91    color: #9E9E9E;92    display: flex; align-items: center; justify-content: center;93    font-size: 44px; font-weight: 600;94  }95 96  /* Keyboard */97  .keyboard {98    position: absolute;99    left: 0;100    bottom: 0;101    width: 1080px;102    height: 940px;103    background: #111418;104    color: #E9E9E9;105    box-shadow: 0 -2px 0 rgba(0,0,0,0.12) inset;106  }107  .kbd-top {108    height: 140px;109    display: flex;110    align-items: center;111    gap: 36px;112    padding: 0 36px;113  }114  .kbd-icon {115    width: 92px; height: 92px; border-radius: 20px;116    background: #1F2328; display: flex; align-items: center; justify-content: center;117    border: 1px solid #2B3036;118    font-size: 32px; color: #CFCFCF;119  }120  .keys {121    padding: 12px 24px 24px;122    display: flex; flex-direction: column; gap: 22px;123  }124  .row {125    display: flex; gap: 18px; justify-content: space-between;126  }127  .key {128    flex: 1;129    height: 120px;130    background: #23282D;131    border: 1px solid #3A3F45;132    border-radius: 18px;133    display: flex; align-items: center; justify-content: center;134    font-size: 52px; color: #D8DDE2;135  }136  .key.small { flex: 0 0 92px; }137  .key.medium { flex: 0 0 130px; }138  .spacebar { flex: 1 1 520px; }139  .enter { flex: 0 0 160px; }140  .backspace { flex: 0 0 160px; }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- App Bar -->147  <div class="appbar">148    <div class="status">149      <div>2:47</div>150      <div class="status-right">151        <!-- simple inline svgs for icons -->152        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M12 2C8 2 4.6 3.6 2 6l10 16L22 6c-2.6-2.4-6-4-10-4zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>153        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M12 3C7.4 3 3.2 5.2 0 8.9l2.2 2.2C4.9 8.6 8.3 7 12 7s7.1 1.6 9.8 4.1L24 8.9C20.8 5.2 16.6 3 12 3zm0 6c-3 0-5.7 1.2-7.7 3.1l2.2 2.2C7.8 13 9.8 12.2 12 12.2c2.2 0 4.2.8 5.5 2.1l2.2-2.2C17.7 10.2 15 9 12 9zm0 6c-1.6 0-3 .6-4.1 1.6L10 18.7c.6-.4 1.3-.7 2-.7s1.4.3 2 .7l2.1-2.1C15 15.6 13.6 15 12 15z"/></svg>154        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M16 4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H8V6h8v12z"/></svg>155        <span>100%</span>156      </div>157    </div>158    <div class="title-row">159      <svg class="back-icon" viewBox="0 0 24 24" fill="none">160        <path d="M15 6l-6 6 6 6" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>161      </svg>162      <div class="title-text">New list</div>163    </div>164  </div>165 166  <!-- Content Area -->167  <div class="content">168    <div class="label-row">169      <div class="label">List name</div>170      <div class="counter">0/40</div>171    </div>172    <div class="text-area"></div>173 174    <div class="save-btn">Save to new list</div>175  </div>176 177  <!-- Keyboard -->178  <div class="keyboard">179    <div class="kbd-top">180      <div class="kbd-icon">••</div>181      <div class="kbd-icon">🙂</div>182      <div class="kbd-icon">GIF</div>183      <div class="kbd-icon">⚙</div>184      <div class="kbd-icon">G</div>185      <div class="kbd-icon">🎨</div>186      <div class="kbd-icon">🎤</div>187    </div>188 189    <div class="keys">190      <div class="row">191        <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>192        <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>193      </div>194      <div class="row">195        <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>196        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>197      </div>198      <div class="row">199        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>200        <div class="key">n</div><div class="key">m</div>201        <div class="key backspace">⌫</div>202      </div>203      <div class="row">204        <div class="key medium">?123</div>205        <div class="key medium">,</div>206        <div class="key medium">🙂</div>207        <div class="key spacebar"></div>208        <div class="key medium">.</div>209        <div class="key enter">✓</div>210      </div>211    </div>212  </div>213 214</div>215</body>216</html>