GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Add activity - Mock</title>6<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">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:#eaeaea;12  }13  /* Status bar */14  .status-bar{15    position:absolute; top:0; left:0; right:0; height:110px;16    padding:0 34px; box-sizing:border-box; color:#e0e0e0;17    display:flex; align-items:center; justify-content:space-between;18    font-weight:500;19  }20  .icons-right{ display:flex; align-items:center; gap:32px; }21  .sb-icon{ width:34px; height:34px; border-radius:50%; border:2px solid #9e9e9e; opacity:.9; }22  .battery{23    width:60px; height:30px; border:2px solid #9e9e9e; border-radius:6px; position:relative;24  }25  .battery::after{26    content:""; position:absolute; right:-10px; top:8px; width:6px; height:14px; background:#9e9e9e; border-radius:2px;27  }28  .battery .lvl{ position:absolute; left:3px; top:3px; bottom:3px; width:38px; background:#9e9e9e; }29  /* Top actions */30  .top-actions{31    position:absolute; top:110px; left:0; right:0; height:110px;32    display:flex; align-items:center; justify-content:space-between;33    padding:0 34px; box-sizing:border-box;34  }35  .x-btn{36    width:60px; height:60px; position:relative;37  }38  .x-btn::before, .x-btn::after{39    content:""; position:absolute; left:15px; right:15px; top:28px; height:4px; background:#e0e0e0; border-radius:2px;40  }41  .x-btn::before{ transform:rotate(45deg); }42  .x-btn::after{ transform:rotate(-45deg); }43  .save{44    color:#8ab4f8; font-weight:700; font-size:46px;45  }46  .more-vert{47    width:50px; height:50px; position:relative; margin-left:10px;48  }49  .more-vert span{50    position:absolute; left:50%; transform:translateX(-50%); width:8px; height:8px; background:#cfcfcf; border-radius:50%;51  }52  .more-vert span:nth-child(1){ top:6px; }53  .more-vert span:nth-child(2){ top:20px; }54  .more-vert span:nth-child(3){ top:34px; }55  /* Title */56  .page-title{57    position:absolute; top:210px; left:34px; right:34px;58    font-size:100px; font-weight:700; color:#fafafa;59  }60  /* Form list */61  .list{62    position:absolute; top:380px; left:0; right:0; bottom:900px; overflow:hidden;63    padding-top:10px;64  }65  .row{66    display:flex; align-items:center; justify-content:space-between;67    padding:36px 34px; box-sizing:border-box; height:150px;68    border-top:1px solid #262626;69  }70  .row:first-child{ border-top:0; }71  .label{ color:#bdbdbd; font-size:46px; }72  .value{ color:#eaeaea; font-size:50px; }73  .value.secondary{ color:#a8a8a8; }74  .compound{ display:flex; align-items:center; gap:26px; }75  .hint{ color:#8a8a8a; }76  /* Divider spacing mimic */77  .spacer{ height:26px; }78 79  /* Keyboard mock */80  .keyboard{81    position:absolute; left:0; right:0; bottom:40px; height:840px;82    background:#1b1b1b; border-top:1px solid #2a2a2a;83    box-sizing:border-box;84  }85  .kb-suggest{86    height:110px; padding:12px 24px; box-sizing:border-box;87    display:flex; align-items:center; gap:24px; color:#eaeaea;88    background:#222;89  }90  .chip{91    padding:18px 30px; border-radius:50px; background:#333; font-size:42px; color:#eaeaea;92  }93  .kb-mic{94    margin-left:auto; width:80px; height:80px; border-radius:40px; background:#3a3a3a;95    display:flex; align-items:center; justify-content:center; color:#d0d0d0; font-size:40px;96  }97  .kb-rows{ padding:14px 20px; box-sizing:border-box; }98  .kb-row{ display:flex; gap:14px; justify-content:center; margin:16px 0; }99  .key{100    width:90px; height:120px; border-radius:18px; background:#2a2a2a; color:#fff;101    display:flex; align-items:center; justify-content:center; font-size:46px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);102  }103  .key.wide{ width:140px; }104  .key.extra-wide{ width:250px; }105  .key.circle{ width:120px; height:120px; border-radius:60px; }106  .bottom-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:0 20px; }107  .space{ flex:1; }108  /* Gesture bar */109  .gesture{110    position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:380px; height:10px; border-radius:6px; background:#cfcfcf; opacity:.65;111  }112</style>113</head>114<body>115<div id="render-target">116  <!-- Status bar -->117  <div class="status-bar">118    <div style="font-size:48px;">8:42</div>119    <div class="icons-right">120      <div class="sb-icon"></div>121      <div class="sb-icon"></div>122      <div class="sb-icon"></div>123      <div class="battery"><div class="lvl"></div></div>124      <div style="font-size:40px;">68%</div>125    </div>126  </div>127 128  <!-- Action row -->129  <div class="top-actions">130    <div class="x-btn" aria-label="Close"></div>131    <div style="display:flex; align-items:center; gap:26px;">132      <div class="save">Save</div>133      <div class="more-vert" aria-label="More">134        <span></span><span></span><span></span>135      </div>136    </div>137  </div>138 139  <!-- Title -->140  <div class="page-title">Add activity</div>141 142  <!-- List of fields -->143  <div class="list">144    <div class="row">145      <div class="label">Title</div>146      <div class="value">Burning Fat</div>147    </div>148    <div class="row">149      <div class="label">Activity</div>150      <div class="value">Walking</div>151    </div>152    <div class="row">153      <div class="label">Start</div>154      <div class="compound value">155        <span>Today</span>156        <span>8:11 AM</span>157      </div>158    </div>159    <div class="row">160      <div class="label">Duration</div>161      <div class="value">30 min</div>162    </div>163    <div class="row">164      <div class="label">Intensity</div>165      <div class="value secondary">Add Heart Pts</div>166    </div>167    <div class="row">168      <div class="label">Distance</div>169      <div class="value secondary">Add mi</div>170    </div>171  </div>172 173  <!-- Keyboard mock -->174  <div class="keyboard">175    <div class="kb-suggest">176      <div class="chip">Fat</div>177      <div class="chip">Father</div>178      <div class="chip">Fast</div>179      <div class="kb-mic">🎤</div>180    </div>181    <div class="kb-rows">182      <div class="kb-row">183        <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>184      </div>185      <div class="kb-row">186        <div class="key">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">l</div>187      </div>188      <div class="kb-row">189        <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>190        <div class="key wide">⌫</div>191      </div>192      <div class="bottom-row">193        <div class="key wide">?123</div>194        <div class="key">,</div>195        <div class="key circle">😊</div>196        <div class="key extra-wide space"></div>197        <div class="key">.</div>198        <div class="key circle">➜</div>199      </div>200    </div>201  </div>202 203  <!-- Gesture bar -->204  <div class="gesture"></div>205</div>206</body>207</html>