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 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:#fff;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute;top:0;left:0;width:100%;height:90px;16    padding:26px 32px;box-sizing:border-box;color:#e0e0e0;font-size:32px;17  }18  .status-bar .right{position:absolute;right:32px;top:26px;display:flex;align-items:center;gap:26px;}19  .icon-wifi, .icon-battery, .icon-dnd{20    width:44px;height:44px;display:inline-block;21  }22  .icon-wifi svg, .icon-battery svg, .icon-dnd svg{width:100%;height:100%;}23  .icon-battery span{font-size:28px;margin-left:8px;color:#e0e0e0;vertical-align:middle;}24 25  /* Top app actions */26  .top-actions{27    position:absolute;top:96px;left:0;width:100%;height:80px;28    padding:0 22px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;29    color:#8ab4f8;30  }31  .action-left, .action-right{display:flex;align-items:center;gap:22px;}32  .close-btn{width:56px;height:56px;border-radius:28px;display:flex;align-items:center;justify-content:center;color:#e0e0e0;}33  .close-btn svg{width:40px;height:40px;}34  .menu-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;}35  .menu-btn svg{width:28px;height:28px;fill:#8ab4f8;}36 37  /* Title */38  .page-title{39    position:absolute;top:180px;left:32px;font-size:78px;letter-spacing:.5px;font-weight:500;color:#fff;40  }41 42  /* Form list */43  .form-list{44    position:absolute;top:320px;left:0;width:100%;45  }46  .row{47    padding:34px 32px;border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a;48    display:flex;align-items:center;justify-content:space-between;49    font-size:40px;color:#e0e0e0;50    background:#1a1a1a;51  }52  .row .label{color:#cfcfcf;}53  .row-title{flex-direction:column;align-items:flex-start;gap:24px;}54  .input-field{55    width:100%;background:#121212;border:1px solid #2a2a2a;border-radius:8px;56    height:90px;display:flex;align-items:center;justify-content:flex-start;padding:0 18px;box-sizing:border-box;57    font-size:40px;color:#9e9e9e;58  }59  .caret{60    position:absolute;right:40px;color:#8ab4f8;font-size:48px;61  }62  .value-right{color:#fff;}63  .value-right.secondary{color:#8ab4f8;}64  .row-start{display:flex;align-items:center;justify-content:space-between;}65  .row-start .middle{position:absolute;left:260px;color:#cfcfcf;}66  .row-start .right{margin-left:auto;color:#fff;}67 68  /* Keyboard placeholder */69  .keyboard{70    position:absolute;left:0;bottom:120px;width:100%;height:980px;background:#1b1b1b;border-top:1px solid #2a2a2a;71  }72  .kb-toolbar{73    height:120px;display:flex;align-items:center;padding:0 22px;gap:26px;color:#cfcfcf;font-size:36px;border-bottom:1px solid #2a2a2a;74  }75  .kb-tool{background:#2a2a2a;border-radius:18px;padding:18px 24px;}76  .kb-keys{padding:30px 24px;box-sizing:border-box;}77  .row-keys{display:flex;justify-content:space-between;margin-bottom:26px;}78  .key{79    width:92px;height:110px;background:#2a2a2a;border-radius:22px;display:flex;align-items:center;justify-content:center;80    color:#e0e0e0;font-size:44px;81  }82  .key.wide{width:150px}83  .space-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;}84  .space{flex:1;height:110px;background:#2a2a2a;border-radius:22px;margin:0 18px;}85  .enter{width:150px;height:110px;background:#8ab4f8;border-radius:22px;display:flex;align-items:center;justify-content:center;color:#111;font-size:44px;}86 87  /* Home indicator */88  .home-indicator{89    position:absolute;left:50%;transform:translateX(-50%);90    bottom:36px;width:360px;height:12px;background:#e0e0e0;border-radius:8px;opacity:.6;91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status bar -->98  <div class="status-bar">99    <span>8:42</span>100    <div class="right">101      <div class="icon-dnd">102        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#b0b0b0"/><rect x="6" y="11" width="12" height="2" fill="#121212"/></svg>103      </div>104      <div class="icon-wifi">105        <svg viewBox="0 0 24 24">106          <path d="M2 8c5-4 15-4 20 0" stroke="#b0b0b0" stroke-width="2" fill="none"/>107          <path d="M5 12c3-3 11-3 14 0" stroke="#b0b0b0" stroke-width="2" fill="none"/>108          <path d="M9 16c2-2 4-2 6 0" stroke="#b0b0b0" stroke-width="2" fill="none"/>109          <circle cx="12" cy="19" r="2" fill="#b0b0b0"/>110        </svg>111      </div>112      <div class="icon-battery">113        <svg viewBox="0 0 24 24">114          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#b0b0b0" fill="none" stroke-width="2"/>115          <rect x="21" y="10" width="2" height="4" fill="#b0b0b0"/>116          <rect x="4" y="8" width="12" height="8" fill="#b0b0b0"/>117        </svg>118      </div>119      <span style="font-size:30px;">68%</span>120    </div>121  </div>122 123  <!-- Top actions -->124  <div class="top-actions">125    <div class="action-left">126      <div class="close-btn">127        <svg viewBox="0 0 24 24">128          <path d="M4 4L20 20M20 4L4 20" stroke="#e0e0e0" stroke-width="2" />129        </svg>130      </div>131    </div>132    <div class="action-right">133      <span style="font-size:40px;color:#8ab4f8;">Save</span>134      <div class="menu-btn">135        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>136      </div>137    </div>138  </div>139 140  <!-- Page title -->141  <div class="page-title">Add activity</div>142 143  <!-- Form rows -->144  <div class="form-list">145    <div class="row row-title">146      <div class="label">Title</div>147      <div class="input-field">148        <!-- empty field placeholder -->149        <span style="opacity:.0;">.</span>150      </div>151      <div class="caret">|</div>152    </div>153 154    <div class="row">155      <div class="label">Activity</div>156      <div class="value-right">Walking</div>157    </div>158 159    <div class="row row-start" style="position:relative;">160      <div class="label">Start</div>161      <div class="middle">Today</div>162      <div class="right">8:11 AM</div>163    </div>164 165    <div class="row">166      <div class="label">Duration</div>167      <div class="value-right">30 min</div>168    </div>169 170    <div class="row">171      <div class="label">Intensity</div>172      <div class="value-right secondary">Add Heart Pts</div>173    </div>174 175    <div class="row" style="border-bottom:1px solid #2a2a2a;">176      <div class="label">Distance</div>177      <div class="value-right secondary">Add mi</div>178    </div>179  </div>180 181  <!-- Keyboard placeholder -->182  <div class="keyboard">183    <div class="kb-toolbar">184      <div class="kb-tool">🧩</div>185      <div class="kb-tool">GIF</div>186      <div class="kb-tool">⚙️</div>187      <div class="kb-tool">G↔</div>188      <div class="kb-tool">🎨</div>189      <div class="kb-tool">🎤</div>190    </div>191    <div class="kb-keys">192      <div class="row-keys">193        <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>194      </div>195      <div class="row-keys" style="padding:0 46px;">196        <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>197      </div>198      <div class="row-keys" style="padding:0 92px;">199        <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>200      </div>201      <div class="space-row">202        <div class="key wide">?123</div>203        <div class="key wide">,</div>204        <div class="space"></div>205        <div class="key wide">.</div>206        <div class="enter">↩</div>207      </div>208    </div>209  </div>210 211  <!-- Home indicator -->212  <div class="home-indicator"></div>213 214</div>215</body>216</html>