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    --bar:#2b2b2b;11    --surface:#1e1e1e;12    --text:#eaeaea;13    --muted:#9e9e9e;14    --divider:#3a3a3a;15    --accent:#8ab4f8;16    --key:#2a2a2a;17    --key-dark:#262626;18  }19  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }20  #render-target{21    width:1080px; height:2400px;22    position:relative; overflow:hidden;23    background:var(--bg);24    color:var(--text);25  }26  /* Status bar */27  .status-bar{28    height:90px; background:var(--surface); color:#fff;29    display:flex; align-items:center; justify-content:space-between;30    padding:0 28px; box-sizing:border-box; font-size:36px;31  }32  .status-right{ display:flex; align-items:center; gap:22px; }33  .sb-dot{ width:10px; height:10px; background:#cfcfcf; border-radius:50%; opacity:0.9; }34  .icon-wifi, .icon-battery{ width:48px; height:32px; }35  /* Top app bar */36  .app-bar{37    height:120px; background:var(--bar);38    display:flex; align-items:center; padding:0 24px; box-sizing:border-box;39    border-bottom:1px solid var(--divider);40  }41  .app-title{ font-size:48px; font-weight:500; margin-left:18px; }42  .spacer{ flex:1; }43  .save{ color:var(--accent); font-size:40px; margin-right:28px; }44  .icon-btn{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }45  /* Content */46  .content{ position:absolute; top:210px; left:0; right:0; bottom:0; overflow:hidden; }47  .form{ padding:0 32px 0 32px; box-sizing:border-box; }48  .row{49    height:120px; display:flex; align-items:center;50    border-bottom:1px solid var(--divider);51  }52  .row.thick{ border-bottom:2px solid var(--divider); }53  .label{ font-size:38px; color:var(--text); }54  .value{ margin-left:auto; font-size:38px; color:var(--text); }55  .value.muted{ color:var(--muted); }56  .subpair{ display:flex; align-items:center; gap:30px; }57  /* Notes area */58  .notes{59    height:150px; display:flex; align-items:center;60    color:var(--muted); font-size:38px; padding-left:16px;61    border-top:1px solid var(--divider);62    border-bottom:1px solid var(--divider);63    margin-top:8px;64    background:#181818;65  }66  /* Keyboard mock */67  .keyboard{68    position:absolute; left:0; right:0; bottom:36px;69    height:940px; background:#1b1b1b; border-top:1px solid var(--divider);70    display:flex; flex-direction:column; padding:18px 22px; box-sizing:border-box;71    gap:18px;72  }73  .kb-top{74    display:flex; align-items:center; gap:22px; height:100px;75  }76  .kb-top .pill{77    width:120px; height:88px; border-radius:18px; background:var(--key);78    border:1px solid #333; display:flex; align-items:center; justify-content:center; color:#cfcfcf; font-size:34px;79  }80  .keys{ display:flex; flex-direction:column; gap:18px; }81  .row-keys{ display:flex; justify-content:space-between; gap:14px; }82  .key{83    flex:1; height:120px; background:var(--key); border:1px solid #333;84    border-radius:18px; display:flex; align-items:center; justify-content:center;85    color:#e6e6e6; font-size:48px;86  }87  .key.small{ flex:0.9; }88  .key.wide{ flex:1.5; }89  .key.icon{ background:var(--key-dark); }90  .space-row .key{ height:140px; }91  .nav-handle{92    position:absolute; bottom:8px; left:50%; transform:translateX(-50%);93    width:260px; height:10px; background:#d0d0d0; border-radius:8px; opacity:0.85;94  }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Status bar -->101  <div class="status-bar">102    <div class="time">9:13</div>103    <div class="status-right">104      <div class="sb-dot"></div>105      <div class="sb-dot"></div>106      <div class="sb-dot"></div>107      <!-- WiFi -->108      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#eaeaea">109        <path d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20 11.2 18.5 12 18.5z"/>110        <path d="M4.9 13.5c4.4-4.4 9.8-4.4 14.2 0l-1.6 1.6c-3-3-8-3-11 0l-1.6-1.6z"/>111        <path d="M2 10c6-6 14-6 20 0l-1.7 1.7C16.3 7.7 7.7 7.7 3.7 11.7L2 10z"/>112      </svg>113      <!-- Battery -->114      <svg class="icon-battery" viewBox="0 0 28 16" fill="none" stroke="#eaeaea" stroke-width="2">115        <rect x="1" y="2" width="22" height="12" rx="2" />116        <rect x="3" y="4" width="14" height="8" fill="#eaeaea" stroke="none"/>117        <rect x="23" y="6" width="3" height="4" fill="#eaeaea" stroke="none"/>118      </svg>119    </div>120  </div>121 122  <!-- App bar -->123  <div class="app-bar">124    <div class="icon-btn">125      <svg width="36" height="36" viewBox="0 0 24 24" fill="#eaeaea">126        <path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z"/>127      </svg>128    </div>129    <div class="app-title">Add activity</div>130    <div class="spacer"></div>131    <div class="save">Save</div>132    <div class="icon-btn">133      <svg width="40" height="40" viewBox="0 0 24 24" fill="#eaeaea">134        <circle cx="12" cy="5" r="2"></circle>135        <circle cx="12" cy="12" r="2"></circle>136        <circle cx="12" cy="19" r="2"></circle>137      </svg>138    </div>139  </div>140 141  <!-- Content area -->142  <div class="content">143    <div class="form">144 145      <div class="row">146        <div class="label">Activity</div>147        <div class="value">Running</div>148      </div>149 150      <div class="row">151        <div class="label">Start</div>152        <div class="value subpair">153          <span class="muted">Today</span>154          <span>8:40 AM</span>155        </div>156      </div>157 158      <div class="row thick">159        <div class="label">Duration</div>160        <div class="value">30 min</div>161      </div>162 163      <div class="row">164        <div class="label">Intensity</div>165        <div class="value muted">Add Heart Pts</div>166      </div>167 168      <div class="row">169        <div class="label">Distance</div>170        <div class="value muted">Add mi</div>171      </div>172 173      <div class="row">174        <div class="label">Energy expended</div>175        <div class="value muted">Add Cal</div>176      </div>177 178      <div class="row">179        <div class="label">Steps</div>180        <div class="value">10000 steps</div>181      </div>182 183      <div class="notes">Add notes</div>184    </div>185  </div>186 187  <!-- Keyboard mock -->188  <div class="keyboard">189    <div class="kb-top">190      <div class="pill">⌨️</div>191      <div class="pill">😊</div>192      <div class="pill">GIF</div>193      <div class="pill">⚙</div>194      <div class="pill">G⋮</div>195      <div class="pill">🎨</div>196      <div class="pill">🎤</div>197    </div>198 199    <div class="keys">200      <div class="row-keys">201        <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>202      </div>203      <div class="row-keys">204        <div class="key small">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 small">l</div>205      </div>206      <div class="row-keys">207        <div class="key wide icon">⇧</div>208        <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>209        <div class="key wide icon">⌫</div>210      </div>211      <div class="row-keys space-row">212        <div class="key icon">?123</div>213        <div class="key icon">,</div>214        <div class="key wide icon">🙂</div>215        <div class="key wide">space</div>216        <div class="key icon">.</div>217        <div class="key wide icon" style="background:#bcd6ff; color:#0b2447;">↵</div>218      </div>219    </div>220  </div>221 222  <div class="nav-handle"></div>223</div>224</body>225</html>