GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render - Add Activity</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #EDEDED;12  }13 14  /* Status bar */15  .statusbar {16    height: 94px;17    padding: 0 28px;18    display: flex; align-items: center; justify-content: space-between;19    font-size: 36px; color: #FFFFFF;20  }21  .status-right { display: flex; align-items: center; gap: 20px; }22  .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #FFFFFF; stroke-width: 3; }23 24  /* App bar */25  .appbar {26    height: 128px; background: #2B2B2B;27    display: flex; align-items: center;28    padding: 0 24px;29    box-sizing: border-box;30  }31  .appbar .title { font-size: 44px; margin-left: 24px; flex: 1; }32  .appbar .save { font-size: 40px; color: #8AB4F8; margin-right: 24px; }33  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }34  .icon-btn svg { width: 44px; height: 44px; stroke: #EDEDED; stroke-width: 4; }35 36  /* Content list */37  .content { padding: 14px 0 0 0; }38  .row {39    display: flex; align-items: center; justify-content: space-between;40    padding: 40px 36px;41    font-size: 40px;42  }43  .label { color: #CFCFCF; }44  .value { color: #DADADA; }45  .value.muted { color: #9AA0A6; }46  .divider { height: 2px; background: #3B3B3B; margin: 0 0 0 0; }47 48  .row.start { position: relative; }49  .row.start .right-wrap { display: flex; gap: 50px; align-items: center; }50  .row.small { padding-top: 34px; padding-bottom: 34px; }51 52  /* input area */53  .input-area {54    margin: 18px 0 0 0;55    padding: 20px 36px 24px 36px;56    border-top: 2px solid #3B3B3B;57  }58  .text-box {59    height: 220px; background: #1E1E1E; border: 1px solid #3B3B3B;60    border-radius: 8px; position: relative;61  }62  .caret { position: absolute; left: 22px; top: 24px; width: 3px; height: 40px; background: #8AB4F8; }63 64  /* Keyboard */65  .keyboard {66    position: absolute; left: 0; bottom: 74px;67    width: 100%; height: 950px; background: #1F1F1F;68    border-top: 2px solid #3B3B3B;69  }70  .kb-toolbar {71    height: 110px; padding: 0 24px;72    display: flex; align-items: center; gap: 30px;73  }74  .tool {75    width: 90px; height: 90px; background: #2A2A2A; border-radius: 18px;76    border: 1px solid #3B3B3B;77    display: flex; align-items: center; justify-content: center;78    color: #D0D0D0; font-size: 30px;79  }80  .kb-rows { padding: 10px 20px; display: flex; flex-direction: column; gap: 26px; }81  .kb-row { display: flex; justify-content: center; gap: 18px; }82  .key {83    min-width: 86px; height: 120px; background: #2A2A2A; border-radius: 26px;84    border: 1px solid #3B3B3B; color: #FFFFFF;85    display: flex; align-items: center; justify-content: center;86    font-size: 40px;87  }88  .key.wide { min-width: 210px; }89  .key.space { min-width: 520px; }90  .key.back { min-width: 170px; }91  .key.enter { min-width: 170px; background: #BFD6FF; color: #1A1A1A; }92  .key.light { background: #3A3A3A; }93 94  /* gesture pill */95  .gesture {96    position: absolute; bottom: 18px; left: 50%;97    transform: translateX(-50%);98    width: 340px; height: 14px; background: #E0E0E0; border-radius: 12px;99    opacity: 0.95;100  }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status bar -->107  <div class="statusbar">108    <div class="status-left">9:13</div>109    <div class="status-right">110      <div class="status-icon">111        <!-- simple notifications dot -->112        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#FFFFFF"/></svg>113      </div>114      <div class="status-icon">115        <!-- Wi-Fi -->116        <svg viewBox="0 0 24 24">117          <path d="M2 8c5-4 15-4 20 0" />118          <path d="M5 12c4-3 10-3 14 0" />119          <path d="M8 16c3-2 5-2 8 0" />120          <circle cx="12" cy="19" r="2" fill="#FFFFFF" stroke="none"/>121        </svg>122      </div>123      <div class="status-icon">124        <!-- Battery -->125        <svg viewBox="0 0 24 24">126          <rect x="3" y="6" width="16" height="12" rx="2" />127          <rect x="19.5" y="10" width="2" height="4" rx="1" />128          <rect x="5" y="8" width="12" height="8" fill="#FFFFFF" stroke="none"/>129        </svg>130      </div>131    </div>132  </div>133 134  <!-- App bar -->135  <div class="appbar">136    <div class="icon-btn">137      <!-- Close (X) icon -->138      <svg viewBox="0 0 24 24">139        <path d="M5 5 L19 19 M19 5 L5 19" />140      </svg>141    </div>142    <div class="title">Add activity</div>143    <div class="save">Save</div>144    <div class="icon-btn">145      <!-- more-vert -->146      <svg viewBox="0 0 24 24">147        <circle cx="12" cy="5" r="2" fill="#EDEDED" stroke="none"/>148        <circle cx="12" cy="12" r="2" fill="#EDEDED" stroke="none"/>149        <circle cx="12" cy="19" r="2" fill="#EDEDED" stroke="none"/>150      </svg>151    </div>152  </div>153 154  <!-- Content -->155  <div class="content">156    <div class="row">157      <div class="label">Activity</div>158      <div class="value">Running</div>159    </div>160    <div class="divider"></div>161 162    <div class="row start">163      <div class="label">Start</div>164      <div class="right-wrap">165        <div class="value">Today</div>166        <div class="value">8:40 AM</div>167      </div>168    </div>169 170    <div class="row small">171      <div class="label">Duration</div>172      <div class="value">30 min</div>173    </div>174    <div class="divider"></div>175 176    <div class="row small">177      <div class="label">Intensity</div>178      <div class="value muted">Add Heart Pts</div>179    </div>180    <div class="row small">181      <div class="label">Distance</div>182      <div class="value muted">Add mi</div>183    </div>184    <div class="row small">185      <div class="label">Energy expended</div>186      <div class="value muted">Add Cal</div>187    </div>188 189    <div class="row small">190      <div class="label">Steps</div>191      <div class="value">10000 steps</div>192    </div>193 194    <div class="input-area">195      <div class="text-box">196        <div class="caret"></div>197      </div>198    </div>199  </div>200 201  <!-- Keyboard -->202  <div class="keyboard">203    <div class="kb-toolbar">204      <div class="tool">▦</div>205      <div class="tool">🙂</div>206      <div class="tool">GIF</div>207      <div class="tool">⚙️</div>208      <div class="tool">G↔︎</div>209      <div class="tool">🎨</div>210      <div class="tool">🎤</div>211    </div>212 213    <div class="kb-rows">214      <div class="kb-row">215        <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><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>216      </div>217      <div class="kb-row">218        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>219      </div>220      <div class="kb-row">221        <div class="key wide">⇧</div>222        <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><div class="key">n</div><div class="key">m</div>223        <div class="key back">⌫</div>224      </div>225      <div class="kb-row">226        <div class="key wide light">?123</div>227        <div class="key">,</div>228        <div class="key">🙂</div>229        <div class="key space"></div>230        <div class="key">.</div>231        <div class="key enter">↵</div>232      </div>233    </div>234  </div>235 236  <div class="gesture"></div>237</div>238</body>239</html>