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>Add activity - Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target{10    position: relative;11    overflow: hidden;12    width:1080px;13    height:2400px;14    background:#121212;15    color:#EDEDED;16  }17  .status-bar{18    height:90px;19    padding:0 28px;20    display:flex;21    align-items:center;22    justify-content:space-between;23    color:#E0E0E0;24    font-size:34px;25    letter-spacing:1px;26  }27  .app-bar{28    height:140px;29    padding:0 28px;30    display:flex;31    align-items:center;32    background:#1E1E1E;33    border-bottom:1px solid #2a2a2a;34  }35  .app-bar .title{36    font-size:48px;37    margin-left:18px;38  }39  .app-actions{40    margin-left:auto;41    display:flex;42    align-items:center;43    gap:36px;44  }45  .save{46    color:#8AB4F8;47    font-size:40px;48  }49  .kebab{50    width:42px; height:42px;51  }52 53  .section{54    border-top:10px solid #1C1C1C;55  }56  .row{57    display:flex;58    align-items:center;59    height:130px;60    padding:0 36px;61    border-bottom:1px solid #2a2a2a;62  }63  .label{64    color:#BDBDBD;65    font-size:38px;66  }67  .value{68    margin-left:auto;69    font-size:38px;70    color:#EDEDED;71  }72  .value.muted{ color:#9E9E9E; }73  .value.two span{ margin-left:34px; color:#BDBDBD; }74 75  /* Keyboard */76  .keyboard{77    position:absolute;78    left:0; right:0; bottom:70px;79    height:920px;80    background:#18181B;81    padding:36px 32px 28px;82    box-sizing:border-box;83  }84  .key-grid{85    display:grid;86    grid-template-columns: repeat(4, 1fr);87    grid-gap:28px 26px;88    margin-top:8px;89  }90  .key{91    height:150px;92    background:#2C2C30;93    color:#F3F3F3;94    border-radius:90px;95    display:flex;96    align-items:center;97    justify-content:center;98    font-size:56px;99  }100  .key.small{ font-size:48px; }101  .key.pale{102    background:#F7DADF; color:#262626;103  }104  .key.violet{105    background:#E8D9FF; color:#272727;106  }107  .caret-down{108    position:absolute;109    bottom:1000px;110    left:36px;111    color:#BDBDBD;112    font-size:42px;113  }114 115  /* Gesture bar */116  .gesture{117    position:absolute; left:50%; transform:translateX(-50%);118    bottom:18px; width:360px; height:12px;119    background:#E6E6E6; border-radius:12px; opacity:0.95;120  }121 122  /* Small helper icons */123  .icon{ width:56px; height:56px; }124  .spacer{ flex:0 0 6px; }125</style>126</head>127<body>128<div id="render-target">129 130  <!-- Status bar -->131  <div class="status-bar">132    <div>9:46</div>133    <div style="display:flex; align-items:center; gap:18px;">134      <svg class="icon" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M3 12l6 6 12-12" stroke="#CFCFCF" stroke-width="2" fill="none"/></svg>135      <svg class="icon" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M2 12h20" stroke="#CFCFCF" stroke-width="2"/></svg>136      <svg class="icon" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M6 2h12v20H6z" fill="#CFCFCF"/></svg>137      <svg class="icon" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M3 17h18l-9-12z" fill="#CFCFCF"/></svg>138      <svg class="icon" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M21 8v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8" fill="none" stroke="#CFCFCF" stroke-width="2"/></svg>139    </div>140  </div>141 142  <!-- App bar -->143  <div class="app-bar">144    <svg class="icon" viewBox="0 0 24 24">145      <path d="M5 5l14 14M19 5L5 19" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>146    </svg>147    <div class="title">Add activity</div>148    <div class="app-actions">149      <div class="save">Save</div>150      <svg class="kebab" viewBox="0 0 24 24">151        <circle cx="12" cy="5" r="2" fill="#CFCFCF"></circle>152        <circle cx="12" cy="12" r="2" fill="#CFCFCF"></circle>153        <circle cx="12" cy="19" r="2" fill="#CFCFCF"></circle>154      </svg>155    </div>156  </div>157 158  <!-- Content -->159  <div class="section">160    <div class="row">161      <div class="label">Title</div>162      <div class="value muted">Add</div>163    </div>164    <div class="row">165      <div class="label">Activity</div>166      <div class="value">Walking</div>167    </div>168  </div>169 170  <div class="section">171    <div class="row">172      <div class="label">Start</div>173      <div class="value two"><span>Today</span><span>9:15 AM</span></div>174    </div>175    <div class="row">176      <div class="label">Duration</div>177      <div class="value">30 min</div>178    </div>179  </div>180 181  <div class="section">182    <div class="row">183      <div class="label">Intensity</div>184      <div class="value muted">Add Heart Pts</div>185    </div>186    <div class="row">187      <div class="label">Distance</div>188      <div class="value muted">Add mi</div>189    </div>190    <div class="row">191      <div class="label">Energy expended</div>192      <div class="value muted">Add Cal</div>193    </div>194    <div class="row">195      <div class="label">Steps</div>196      <div class="value">1<span style="color:#9E9E9E; margin-left:8px;">steps</span></div>197    </div>198  </div>199 200  <!-- Keyboard hint caret -->201  <div class="caret-down">⌄</div>202 203  <!-- Numeric keyboard -->204  <div class="keyboard">205    <div class="key-grid">206      <div class="key">1</div>207      <div class="key">2</div>208      <div class="key">3</div>209      <div class="key small">−</div>210 211      <div class="key">4</div>212      <div class="key">5</div>213      <div class="key">6</div>214      <div class="key small">⌊</div>215 216      <div class="key">7</div>217      <div class="key">8</div>218      <div class="key">9</div>219      <div class="key pale">220        <svg viewBox="0 0 24 24" width="44" height="44">221          <path d="M18 7l-7 7M11 7h7v7" stroke="#1E1E1E" stroke-width="2" fill="none" stroke-linecap="round"/>222          <path d="M5 5h7v14H5z" fill="none" stroke="#1E1E1E" stroke-width="2"/>223        </svg>224      </div>225 226      <div class="key">,</div>227      <div class="key">0</div>228      <div class="key">.</div>229      <div class="key violet">→</div>230    </div>231  </div>232 233  <!-- Gesture bar -->234  <div class="gesture"></div>235 236</div>237</body>238</html>