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  :root{9    --bg:#121212;10    --surface:#1e1f21;11    --divider:#2a2b2d;12    --text:#e6e6e6;13    --subtext:#b0b5bb;14    --accent:#8ab4f8;15    --key:#2b2d31;16    --key-light:#d9d2ff;17    --key-blue:#cde6ff;18  }19  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }20  #render-target{21    width:1080px; height:2400px; position:relative; overflow:hidden;22    background:var(--bg); color:var(--text);23  }24 25  /* Status bar */26  .status-bar{27    height:84px; padding:0 24px; display:flex; align-items:center; justify-content:space-between;28    color:#cfcfcf; font-size:30px; box-sizing:border-box;29  }30  .status-icons{ display:flex; gap:18px; align-items:center; }31  .dot{ width:10px; height:10px; background:#9e9e9e; border-radius:50%; display:inline-block; }32 33  /* Top app bar */34  .topbar{35    height:140px; background:var(--surface); display:flex; align-items:center; padding:0 24px;36    box-sizing:border-box; gap:20px; border-bottom:1px solid var(--divider);37  }38  .topbar h1{ font-size:46px; font-weight:600; margin:0; flex:1; }39  .topbar .action{ color:var(--accent); font-size:38px; }40  .icon-btn{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; color:#cfcfcf; }41  .icon-btn svg{ width:38px; height:38px; fill:currentColor; }42 43  /* Form */44  .form{ padding:18px 0 0; }45  .section{ border-top:1px solid var(--divider); }46  .row{47    display:flex; align-items:center; justify-content:space-between;48    padding:38px 32px; font-size:36px; box-sizing:border-box; border-bottom:1px solid var(--divider);49  }50  .label{ color:#dcdcdc; }51  .value{ color:var(--subtext); }52  .value.primary{ color:var(--text); }53  .row.two-values .mid{ margin-left:auto; margin-right:24px; color:var(--subtext); }54  .spacer{ height:36px; background:transparent; }55 56  /* Keyboard */57  .keyboard{58    position:absolute; left:0; right:0; bottom:96px;59    height:980px; padding:24px 28px 28px; box-sizing:border-box;60    background:rgba(18,18,18,0.3);61  }62  .kbd-top{63    height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;64  }65  .chevron{66    width:44px; height:44px; color:#cfcfcf;67  }68  .keys{69    display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap:26px;70  }71  .key{72    background:var(--key); border-radius:90px; display:flex; align-items:center; justify-content:center;73    color:#f3f3f3; font-size:52px; letter-spacing:1px;74  }75  .key.alt{ background:#35383c; color:#d9d9d9; }76  .key.light{ background:var(--key-light); color:#1f2227; }77  .key.blue{ background:var(--key-blue); color:#1f2227; }78 79  /* Bottom gesture bar */80  .gesture-bar{81    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);82    width:420px; height:10px; background:#d0d0d0; border-radius:8px; opacity:.85;83  }84</style>85</head>86<body>87<div id="render-target">88 89  <!-- Status bar -->90  <div class="status-bar">91    <div style="font-weight:600;">9:12</div>92    <div class="status-icons">93      <span class="dot"></span>94      <span class="dot"></span>95      <span class="dot"></span>96      <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 4C7 4 2.73 7.11 1 11.5L3 12c1.43-3.36 4.79-5.5 9-5.5 4.21 0 7.57 2.14 9 5.5l2-.5C21.27 7.11 17 4 12 4z"/></svg>97      <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfcfcf"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>98    </div>99  </div>100 101  <!-- Top bar -->102  <div class="topbar">103    <div class="icon-btn" aria-label="Close">104      <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.3L10.7 13.3 4.4 19.6 3.1 18.3 9.4 12 3.1 5.7 4.4 4.4l6.3 6.3 6.3-6.3z"/></svg>105    </div>106    <h1>Add activity</h1>107    <div class="action">Save</div>108    <div class="icon-btn" aria-label="More">109      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"></circle><circle cx="12" cy="12" r="2.2"></circle><circle cx="12" cy="19" r="2.2"></circle></svg>110    </div>111  </div>112 113  <!-- Form content -->114  <div class="form">115    <div class="section">116      <div class="row">117        <div class="label">Title</div>118        <div class="value">Add</div>119      </div>120      <div class="row">121        <div class="label">Activity</div>122        <div class="value primary">Running</div>123      </div>124    </div>125 126    <div class="section">127      <div class="row two-values">128        <div class="label">Start</div>129        <div class="mid">Today</div>130        <div class="value primary">8:40 AM</div>131      </div>132      <div class="row">133        <div class="label">Duration</div>134        <div class="value primary">30 min</div>135      </div>136    </div>137 138    <div class="section">139      <div class="row">140        <div class="label">Intensity</div>141        <div class="value">Add Heart Pts</div>142      </div>143      <div class="row">144        <div class="label">Distance</div>145        <div class="value">Add mi</div>146      </div>147      <div class="row">148        <div class="label">Energy expended</div>149        <div class="value">Add Cal</div>150      </div>151      <div class="row">152        <div class="label">Steps</div>153        <div class="value primary">100 steps</div>154      </div>155    </div>156  </div>157 158  <!-- Numeric keyboard -->159  <div class="keyboard">160    <div class="kbd-top">161      <svg class="chevron" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M7 10l5 5 5-5z"/></svg>162    </div>163    <div class="keys">164      <div class="key">1</div>165      <div class="key">2</div>166      <div class="key">3</div>167      <div class="key alt">–</div>168 169      <div class="key">4</div>170      <div class="key">5</div>171      <div class="key">6</div>172      <div class="key alt">⌟</div>173 174      <div class="key">7</div>175      <div class="key">8</div>176      <div class="key">9</div>177      <div class="key light">178        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M17 15.59L12.42 11 17 6.41 15.59 5l-6 6 6 6z"/></svg>179      </div>180 181      <div class="key">,</div>182      <div class="key">0</div>183      <div class="key">.</div>184      <div class="key blue">185        <svg width="48" height="48" viewBox="0 0 24 24"><path d="M10 17l5-5-5-5v10z"/></svg>186      </div>187    </div>188  </div>189 190  <div class="gesture-bar"></div>191</div>192</body>193</html>