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 UI</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: #121212;15    color: #E0E0E0;16    font-family: Roboto, Arial, sans-serif;17    box-sizing: border-box;18  }19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #E0E0E0;30    font-size: 42px;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .status-dot {39    width: 22px; height: 22px; background: #E0E0E0; border-radius: 50%;40    opacity: 0.7;41  }42  .top-appbar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 120px;48    padding: 0 28px;49    display: flex;50    align-items: center;51    justify-content: space-between;52  }53  .icon-btn {54    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;55  }56  .save-area {57    display: flex; align-items: center; gap: 20px;58    font-size: 44px;59    color: #8AB4F8;60  }61  .title {62    position: absolute;63    top: 270px;64    left: 40px;65    font-size: 110px;66    font-weight: 500;67    color: #E0E0E0;68  }69  .divider {70    position: absolute;71    left: 0;72    width: 1080px;73    height: 2px;74    background: #2A2A2A;75  }76  .list {77    position: absolute;78    top: 420px;79    left: 0;80    width: 100%;81  }82  .row {83    width: 100%;84    height: 150px;85    padding: 0 40px;86    display: flex;87    align-items: center;88    justify-content: space-between;89    border-top: 2px solid #2A2A2A;90  }91  .row:last-child { border-bottom: 2px solid #2A2A2A; }92  .label {93    font-size: 46px;94    color: #E0E0E0;95  }96  .value {97    font-size: 46px;98    color: #9AA0A6;99  }100  .value-strong { color: #CFCFCF; }101  .multi-value {102    display: flex; align-items: center; gap: 28px;103  }104  .notes-row {105    height: 200px;106  }107  .gesture-pill {108    position: absolute;109    bottom: 40px;110    left: 50%;111    transform: translateX(-50%);112    width: 300px;113    height: 16px;114    background: #E0E0E0;115    opacity: 0.85;116    border-radius: 16px;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status bar -->124  <div class="status-bar">125    <div>9:10</div>126    <div class="status-right">127      <div class="status-dot"></div>128      <div class="status-dot"></div>129      <div class="status-dot"></div>130      <svg width="48" height="48" viewBox="0 0 24 24" fill="#E0E0E0" opacity="0.9">131        <path d="M21 8l-9-6-9 6v10h18V8zm-9 3l-8-5 8-5 8 5-8 5z"/>132      </svg>133      <svg width="48" height="48" viewBox="0 0 24 24" fill="#E0E0E0" opacity="0.9">134        <path d="M11 21h2v-2h-2v2zm-7-7h2v-2H4v2zm14 0h2v-2h-2v2zM6 17h2v-2H6v2zm10 0h2v-2h-2v2zM8 21h2v-2H8v2zm8 0h2v-2h-2v2z"/>135      </svg>136    </div>137  </div>138 139  <!-- Top app bar -->140  <div class="top-appbar">141    <div class="icon-btn">142      <svg width="54" height="54" viewBox="0 0 24 24" stroke="#E0E0E0" stroke-width="2.2" fill="none" stroke-linecap="round">143        <path d="M6 6l12 12M18 6L6 18"/>144      </svg>145    </div>146    <div class="save-area">147      <div>Save</div>148      <svg width="54" height="54" viewBox="0 0 24 24" fill="#E0E0E0">149        <circle cx="12" cy="5" r="2.2"></circle>150        <circle cx="12" cy="12" r="2.2"></circle>151        <circle cx="12" cy="19" r="2.2"></circle>152      </svg>153    </div>154  </div>155 156  <!-- Title -->157  <div class="title">Add activity</div>158 159  <!-- List rows -->160  <div class="list">161    <div class="row">162      <div class="label">Title</div>163      <div class="value">Add</div>164    </div>165 166    <div class="row">167      <div class="label">Activity</div>168      <div class="value value-strong">Running</div>169    </div>170 171    <div class="row">172      <div class="label">Start</div>173      <div class="multi-value">174        <div class="value value-strong">Today</div>175        <div class="value value-strong">8:40 AM</div>176      </div>177    </div>178 179    <div class="row">180      <div class="label">Duration</div>181      <div class="value value-strong">30 min</div>182    </div>183 184    <div class="row">185      <div class="label">Intensity</div>186      <div class="value">Add Heart Pts</div>187    </div>188 189    <div class="row">190      <div class="label">Distance</div>191      <div class="value">Add mi</div>192    </div>193 194    <div class="row">195      <div class="label">Energy expended</div>196      <div class="value">Add Cal</div>197    </div>198 199    <div class="row">200      <div class="label">Steps</div>201      <div class="value">Add steps</div>202    </div>203 204    <div class="row notes-row">205      <div class="label">Add notes</div>206      <div></div>207    </div>208  </div>209 210  <!-- Bottom gesture pill -->211  <div class="gesture-pill"></div>212</div>213</body>214</html>