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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #202124;15    color: #E8EAED;16    font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;17  }18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    box-sizing: border-box;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #E8EAED;27    font-size: 40px;28    letter-spacing: 1px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 22px;34    opacity: 0.85;35  }36  .icon-signal, .icon-wifi, .icon-battery {37    width: 46px; height: 46px;38  }39  .topbar {40    height: 140px;41    display: flex;42    align-items: center;43    padding: 0 36px;44    box-sizing: border-box;45    position: relative;46  }47  .topbar .close-btn {48    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;49  }50  .top-actions {51    position: absolute;52    right: 36px;53    top: 34px;54    display: flex;55    align-items: center;56    gap: 30px;57    font-size: 46px;58  }59  .save-link { color: #8ab4f8; }60  .more-vert { width: 46px; height: 46px; opacity: 0.9; }61  .screen-title {62    font-size: 110px;63    font-weight: 300;64    line-height: 1.1;65    padding: 12px 36px 30px 36px;66  }67 68  .list {69    margin-top: 8px;70    border-top: 1px solid #2E2F31;71  }72  .row {73    display: flex;74    align-items: center;75    justify-content: space-between;76    padding: 46px 36px;77    box-sizing: border-box;78    border-bottom: 1px solid #2E2F31;79    min-height: 150px;80  }81  .label {82    font-size: 48px;83    color: #E8EAED;84  }85  .value {86    font-size: 48px;87    color: #9AA0A6;88  }89  .value-strong {90    color: #E8EAED;91  }92  .row.split .middle {93    margin-left: auto;94    margin-right: 40px;95    color: #9AA0A6;96  }97  .notes {98    color: #9AA0A6;99  }100  /* gesture bar */101  .gesture {102    position: absolute;103    bottom: 26px;104    left: 50%;105    transform: translateX(-50%);106    width: 320px;107    height: 14px;108    background: #E8EAED;109    opacity: 0.9;110    border-radius: 10px;111  }112</style>113</head>114<body>115<div id="render-target">116  <!-- Status bar -->117  <div class="status-bar">118    <div class="status-left">9:45</div>119    <div class="status-right">120      <!-- Simple glyph-like status icons -->121      <svg class="icon-signal" viewBox="0 0 24 24" fill="#E8EAED"><path d="M2 22h3V11H2v11zm5 0h3V7H7v15zm5 0h3V4h-3v18zm5 0h3V2h-3v20z"/></svg>122      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#E8EAED"><path d="M12 18.5l2.5 2.5L12 24l-2.5-3 2.5-2.5zM2 8c5.5-5.3 14.5-5.3 20 0l-2 2C16 6 8 6 4 10L2 8zm4 4c3.8-3.6 10.2-3.6 14 0l-2 2c-2.7-2.5-7.3-2.5-10 0l-2-2zm4 4c2-1.9 4.9-1.9 6.9 0l-1.9 2c-1.1-1-3-1-4.1 0L10 16z"/></svg>123      <svg class="icon-battery" viewBox="0 0 24 24" fill="#E8EAED"><path d="M16 4h-1V2h-6v2H8C6.9 4 6 4.9 6 6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H8V6h8v12z"/></svg>124    </div>125  </div>126 127  <!-- Top bar with close and actions -->128  <div class="topbar">129    <div class="close-btn" aria-label="Close">130      <svg width="46" height="46" viewBox="0 0 24 24" fill="#E8EAED">131        <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.3l6.3 6.3 6.3-6.3z"/>132      </svg>133    </div>134    <div class="top-actions">135      <div class="save-link">Save</div>136      <svg class="more-vert" viewBox="0 0 24 24" fill="#E8EAED">137        <circle cx="12" cy="5" r="2.2"></circle>138        <circle cx="12" cy="12" r="2.2"></circle>139        <circle cx="12" cy="19" r="2.2"></circle>140      </svg>141    </div>142  </div>143 144  <!-- Screen title -->145  <div class="screen-title">Add activity</div>146 147  <!-- List rows -->148  <div class="list">149    <div class="row">150      <div class="label">Title</div>151      <div class="value">Add</div>152    </div>153 154    <div class="row">155      <div class="label">Activity</div>156      <div class="value value-strong">Walking</div>157    </div>158 159    <div class="row split">160      <div class="label">Start</div>161      <div class="value middle">Today</div>162      <div class="value">9:15 AM</div>163    </div>164 165    <div class="row">166      <div class="label">Duration</div>167      <div class="value">30 min</div>168    </div>169 170    <div class="row">171      <div class="label">Intensity</div>172      <div class="value">Add Heart Pts</div>173    </div>174 175    <div class="row">176      <div class="label">Distance</div>177      <div class="value">Add mi</div>178    </div>179 180    <div class="row">181      <div class="label">Energy expended</div>182      <div class="value">Add Cal</div>183    </div>184 185    <div class="row">186      <div class="label">Steps</div>187      <div class="value">Add steps</div>188    </div>189 190    <div class="row">191      <div class="label notes">Add notes</div>192      <div class="value"></div>193    </div>194  </div>195 196  <!-- Gesture navigation bar -->197  <div class="gesture"></div>198</div>199</body>200</html>