GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Add activity - Mock UI</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; position:relative; overflow:hidden;10    background:#121212; color:#E8EAED;11  }12 13  /* Status bar */14  .status-bar {15    height:90px; padding:0 28px; color:#E8EAED; font-size:40px; line-height:90px;16    display:flex; align-items:center; justify-content:space-between;17  }18  .status-icons { display:flex; align-items:center; gap:26px; }19  .icon { width:40px; height:40px; display:inline-block; }20  .icon svg { width:100%; height:100%; fill:#E8EAED; }21 22  /* App bar */23  .app-bar {24    height:130px; border-bottom:1px solid #2A2A2A;25    display:flex; align-items:center; padding:0 32px; gap:22px;26  }27  .app-title { font-size:52px; font-weight:500; flex:1; }28  .app-actions { display:flex; align-items:center; gap:36px; }29  .link-save { color:#8AB4F8; font-size:44px; }30  .kebab svg { fill:#E8EAED; }31 32  .x-btn { width:56px; height:56px; border-radius:28px; display:flex; align-items:center; justify-content:center; }33  .x-btn svg { fill:#E8EAED; }34 35  /* Content list */36  .content { padding-top:6px; }37  .row {38    display:flex; align-items:center; justify-content:space-between;39    padding:40px 36px; border-top:1px solid #2A2A2A; font-size:44px;40  }41  .row .label { color:#E8EAED; }42  .row .value { color:#B0BEC5; }43  .row .value.strong { color:#E8EAED; }44 45  .row.multi { gap:26px; }46  .row.multi .mid { margin-left:auto; margin-right:24px; color:#E8EAED; }47  .row-divider { height:16px; background:#121212; border-top:1px solid #2A2A2A; border-bottom:1px solid #2A2A2A; }48 49  /* Steps input with caret */50  .steps-value { display:flex; align-items:center; gap:12px; }51  .steps-value .num { color:#E8EAED; }52  .steps-value .caret { width:3px; height:50px; background:#8AB4F8; display:inline-block; }53  .steps-value .unit { color:#9AA0A6; }54 55  /* Numeric keypad */56  .keypad {57    position:absolute; left:0; right:0; bottom:90px;58    height:980px; border-top:1px solid #2A2A2A; padding:30px 28px;59  }60  .keys {61    display:grid;62    grid-template-columns: repeat(5, 1fr);63    grid-template-rows: repeat(4, 1fr);64    gap:28px;65    height:100%;66  }67  .key {68    background:#2B2B2B; border-radius:60px; display:flex; align-items:center; justify-content:center;69    color:#FFFFFF; font-size:64px;70  }71  .key.light-pink { background:#F5DCE4; color:#1F1F1F; }72  .key.light-purple { background:#E9E1FF; color:#1F1F1F; }73  .key .small { font-size:52px; color:#DADCE0; }74  .key svg { width:60px; height:60px; fill:#DADCE0; }75 76  /* Bottom gesture pill */77  .home-pill {78    position:absolute; left:50%; transform:translateX(-50%);79    bottom:24px; width:240px; height:12px; background:#E0E0E0; border-radius:8px;80    opacity:0.8;81  }82  .chevron {83    position:absolute; left:60px; bottom:120px; width:38px; height:38px; color:#DADCE0;84    display:flex; align-items:center; justify-content:center;85  }86  .chevron svg { width:30px; height:30px; fill:#DADCE0; }87</style>88</head>89<body>90<div id="render-target">91  <!-- Status bar -->92  <div class="status-bar">93    <div>9:46</div>94    <div class="status-icons">95      <span class="icon">96        <!-- GPS icon -->97        <svg viewBox="0 0 24 24"><path d="M11 2h2v4h-2V2zm0 16h2v4h-2v-4zM2 11h4v2H2v-2zm16 0h4v2h-4v-2zM12 7a5 5 0 100 10 5 5 0 000-10z"/></svg>98      </span>99      <span class="icon">100        <!-- signal -->101        <svg viewBox="0 0 24 24"><path d="M3 17h2v2H3v-2zm4-4h2v6H7v-6zm4-3h2v9h-2V10zm4-3h2v12h-2V7zm4-3h2v15h-2V4z"/></svg>102      </span>103      <span class="icon">104        <!-- phone icon -->105        <svg viewBox="0 0 24 24"><path d="M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm0 2v16h10V4H7z"/></svg>106      </span>107      <span class="icon">108        <!-- cloud -->109        <svg viewBox="0 0 24 24"><path d="M6 18h10a4 4 0 000-8 5 5 0 00-9.8 1A3.5 3.5 0 006 18z"/></svg>110      </span>111      <span class="icon">112        <!-- wifi -->113        <svg viewBox="0 0 24 24"><path d="M12 18.5l-1.5 1.5L12 21.5l1.5-1.5L12 18.5zm-6-6l1.4 1.4A7 7 0 0112 13a7 7 0 014.6 1.9L18 12.5A9 9 0 0012 10a9 9 0 00-6 2.5zM3 8l1.4 1.4A12 12 0 0112 7a12 12 0 017.6 2.4L21 8a14 14 0 00-9-3 14 14 0 00-9 3z"/></svg>114      </span>115      <span class="icon">116        <!-- battery -->117        <svg viewBox="0 0 24 24"><path d="M16 6h2v2h2v8h-2v2h-2V6zM4 7h10v10H4V7z"/></svg>118      </span>119    </div>120  </div>121 122  <!-- App bar -->123  <div class="app-bar">124    <div class="x-btn">125      <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 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.3l6.3 6.3 6.3-6.3z"/></svg>126    </div>127    <div class="app-title">Add activity</div>128    <div class="app-actions">129      <div class="link-save">Save</div>130      <div class="kebab icon">131        <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>132      </div>133    </div>134  </div>135 136  <!-- Content -->137  <div class="content">138    <div class="row">139      <div class="label">Title</div>140      <div class="value">Add</div>141    </div>142    <div class="row">143      <div class="label">Activity</div>144      <div class="value strong">Walking</div>145    </div>146    <div class="row multi">147      <div class="label">Start</div>148      <div class="mid">Today</div>149      <div class="value strong">9:15 AM</div>150    </div>151    <div class="row">152      <div class="label">Duration</div>153      <div class="value strong">30 min</div>154    </div>155 156    <div class="row-divider"></div>157 158    <div class="row">159      <div class="label">Intensity</div>160      <div class="value">Add Heart Pts</div>161    </div>162    <div class="row">163      <div class="label">Distance</div>164      <div class="value">Add mi</div>165    </div>166    <div class="row">167      <div class="label">Energy expended</div>168      <div class="value">Add Cal</div>169    </div>170    <div class="row">171      <div class="label">Steps</div>172      <div class="value steps-value">173        <span class="num">100</span>174        <span class="caret"></span>175        <span class="unit">steps</span>176      </div>177    </div>178  </div>179 180  <!-- Numeric keypad -->181  <div class="keypad">182    <div class="keys">183      <!-- Row 1 -->184      <div class="key">1</div>185      <div class="key">2</div>186      <div class="key">3</div>187      <div class="key"><span class="small">−</span></div>188      <div class="key light-pink">189        <!-- backspace -->190        <svg viewBox="0 0 24 24"><path d="M10 6l-6 6 6 6h10a2 2 0 002-2V8a2 2 0 00-2-2H10zm8 8H9.7L6.4 12l3.3-2H18v4z"/></svg>191      </div>192      <!-- Row 2 -->193      <div class="key">4</div>194      <div class="key">5</div>195      <div class="key">6</div>196      <div class="key">197        <!-- bracket icon -->198        <svg viewBox="0 0 24 24"><path d="M7 5h3v2H9v10h1v2H7V5zm7 0h3v2h-1v10h1v2h-3V5z"/></svg>199      </div>200      <div class="key light-purple">201        <!-- enter/arrow -->202        <svg viewBox="0 0 24 24"><path d="M4 12h11l-3.5-3 1.4-1.4L19.8 12l-6.9 4.4-1.4-1.4L15 13H4v-1z"/></svg>203      </div>204      <!-- Row 3 -->205      <div class="key">7</div>206      <div class="key">8</div>207      <div class="key">9</div>208      <div class="key"></div>209      <div class="key light-pink">210        <!-- backspace icon again for consistency -->211        <svg viewBox="0 0 24 24"><path d="M10 6l-6 6 6 6h10a2 2 0 002-2V8a2 2 0 00-2-2H10zm8 8H9.7L6.4 12l3.3-2H18v4z"/></svg>212      </div>213      <!-- Row 4 -->214      <div class="key">,</div>215      <div class="key">0</div>216      <div class="key">.</div>217      <div class="key"></div>218      <div class="key light-purple">219        <!-- arrow enter -->220        <svg viewBox="0 0 24 24"><path d="M5 12h10l-3-3 1.4-1.4L19 12l-5.6 4.4L12 15l3-3H5v0z"/></svg>221      </div>222    </div>223  </div>224 225  <!-- Bottom gesture bar -->226  <div class="chevron">227    <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6H6z"/></svg>228  </div>229  <div class="home-pill"></div>230</div>231</body>232</html>