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:Roboto, Arial, sans-serif;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#121212;color:#E6E6E6;12  }13  /* Status bar */14  .status-bar{15    position:absolute;left:0;top:0;width:100%;height:92px;16    color:#E6E6E6;background:#121212;display:flex;align-items:center;17    padding:0 32px;box-sizing:border-box;font-size:34px;letter-spacing:0.5px;18  }19  .status-right{margin-left:auto;display:flex;align-items:center;gap:18px;color:#E6E6E6;opacity:0.9;}20  .status-icon{21    width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;22  }23  /* App bar */24  .app-bar{25    position:absolute;left:0;top:92px;width:100%;height:128px;background:#1E1F22;26    display:flex;align-items:center;padding:0 24px;box-sizing:border-box;border-bottom:1px solid #2C2D31;27  }28  .app-title{font-size:46px;margin-left:16px;}29  .app-actions{margin-left:auto;display:flex;align-items:center;gap:28px;}30  .save{color:#8AB4F8;font-size:40px;}31  .icon-btn{width:64px;height:64px;display:flex;align-items:center;justify-content:center;}32  /* Content rows */33  .content{position:absolute;left:0;top:220px;width:100%;}34  .divider{height:1px;background:#2C2D31;width:100%;}35  .row{36    height:140px;display:flex;align-items:center;justify-content:space-between;37    padding:0 32px;box-sizing:border-box;border-bottom:1px solid #2C2D31;38  }39  .label{font-size:38px;color:#E6E6E6;}40  .value{font-size:38px;color:#B0B4BA;}41  .value.emph{color:#E6E6E6;}42  .value-group{display:flex;gap:28px;align-items:center;}43  /* Keyboard */44  .keyboard{45    position:absolute;left:0;right:0;bottom:128px;padding:18px 28px 22px 28px;box-sizing:border-box;46  }47  .keys{48    display:grid;grid-template-columns:repeat(4,1fr);gap:26px;49  }50  .key{51    height:168px;background:#2A2B2F;border-radius:48px;color:#ECECEC;52    font-size:64px;display:flex;align-items:center;justify-content:center;53    user-select:none;54  }55  .key.light{background:#FFDDE7;color:#2B2B2F;}56  .key.accent{background:#E9DBFF;color:#2B2B2F;}57  .small{font-size:52px;opacity:0.9;}58  /* Bottom affordances */59  .collapse{60    position:absolute;left:50%;transform:translateX(-50%);bottom:370px;opacity:0.7;61  }62  .gesture{63    position:absolute;left:50%;transform:translateX(-50%);bottom:28px;width:420px;height:12px;64    background:#E0E0E0;border-radius:10px;opacity:0.75;65  }66</style>67</head>68<body>69<div id="render-target">70  <!-- Status bar -->71  <div class="status-bar">72    <div>9:47</div>73    <div class="status-right">74      <div class="status-icon">75        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M12 2L2 7h2v10h6V11h4v6h6V7h2L12 2z"/></svg>76      </div>77      <div class="status-icon">78        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M2 8h20v8H2z"/></svg>79      </div>80      <div class="status-icon">81        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M3 18h18v2H3zM6 14h12v2H6zM9 10h6v2H9z"/></svg>82      </div>83      <div class="status-icon">84        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M19.35 10.04A7.49 7.49 0 0 0 5.3 11.1 4.5 4.5 0 1 0 6 20h12a5 5 0 0 0 1.35-9.96z"/></svg>85      </div>86      <div class="status-icon">87        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M16 4h2v16h-2zM11 8h2v12h-2zM6 12h2v8H6z"/></svg>88      </div>89      <div class="status-icon">90        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6E6E6"><path d="M12 2a7 7 0 0 0-7 7v6l-2 2v1h18v-1l-2-2V9a7 7 0 0 0-7-7z"/></svg>91      </div>92    </div>93  </div>94 95  <!-- App bar -->96  <div class="app-bar">97    <div class="icon-btn">98      <svg width="40" height="40" viewBox="0 0 24 24" fill="#E6E6E6">99        <path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.41L10.59 13.4 4.3 19.7 2.89 18.29 9.17 12 2.89 5.71 4.3 4.29l6.29 6.29 6.29-6.29z"/>100      </svg>101    </div>102    <div class="app-title">Add activity</div>103    <div class="app-actions">104      <div class="save">Save</div>105      <div class="icon-btn">106        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E6E6E6">107          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>108        </svg>109      </div>110    </div>111  </div>112 113  <!-- Content -->114  <div class="content">115    <div class="divider"></div>116 117    <div class="row">118      <div class="label">Title</div>119      <div class="value">Add</div>120    </div>121 122    <div class="row">123      <div class="label">Activity</div>124      <div class="value emph">Walking</div>125    </div>126 127    <div class="divider"></div>128 129    <div class="row">130      <div class="label">Start</div>131      <div class="value-group">132        <div class="value emph">Today</div>133        <div class="value emph">9:15 AM</div>134      </div>135    </div>136 137    <div class="row">138      <div class="label">Duration</div>139      <div class="value emph">30 min</div>140    </div>141 142    <div class="divider"></div>143 144    <div class="row">145      <div class="label">Intensity</div>146      <div class="value">Add Heart Pts</div>147    </div>148 149    <div class="row">150      <div class="label">Distance</div>151      <div class="value">Add mi</div>152    </div>153 154    <div class="row">155      <div class="label">Energy expended</div>156      <div class="value">Add Cal</div>157    </div>158 159    <div class="row">160      <div class="label">Steps</div>161      <div class="value emph">10000 steps</div>162    </div>163  </div>164 165  <!-- Keyboard collapse chevron -->166  <div class="collapse">167    <svg width="52" height="34" viewBox="0 0 24 24" fill="#E0E0E0" opacity="0.8">168      <path d="M7 9l5 5 5-5H7z"/>169    </svg>170  </div>171 172  <!-- Custom numeric keyboard -->173  <div class="keyboard">174    <div class="keys">175      <div class="key">1</div>176      <div class="key">2</div>177      <div class="key">3</div>178      <div class="key small">−</div>179 180      <div class="key">4</div>181      <div class="key">5</div>182      <div class="key">6</div>183      <div class="key small">⌊</div>184 185      <div class="key">7</div>186      <div class="key">8</div>187      <div class="key">9</div>188      <div class="key light">189        <svg width="48" height="48" viewBox="0 0 24 24" fill="#2B2B2F">190          <path d="M20 7H9l-2-2H4v14h3l2-2h11V7zm-3.5 6.5l-1.4 1.4L12 11.8l-3.1 3.1-1.4-1.4L10.2 10 7.5 7.3 8.9 5.9 12 9l3.1-3.1 1.4 1.4L13.8 10l2.7 2.5z"/>191        </svg>192      </div>193 194      <div class="key small">,</div>195      <div class="key">0</div>196      <div class="key small">.</div>197      <div class="key accent">198        <svg width="48" height="48" viewBox="0 0 24 24" fill="#2B2B2F">199          <path d="M4 12h12l-4-4 1.4-1.4L20.8 12l-7.4 5.4L12 16l4-4H4z"/>200        </svg>201      </div>202    </div>203  </div>204 205  <!-- Gesture bar -->206  <div class="gesture"></div>207</div>208</body>209</html>