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:Arial, Helvetica, 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    height:96px; padding:0 28px; box-sizing:border-box;16    display:flex; align-items:center; justify-content:space-between;17    color:#E0E0E0; font-size:36px; letter-spacing:0.5px;18  }19  .status-right{display:flex;align-items:center;gap:22px;}20  .status-icon{width:44px;height:44px;opacity:.9}21  /* App bar */22  .app-bar{23    height:128px;background:#1E1F20;border-bottom:1px solid #2A2A2A;24    display:flex;align-items:center;padding:0 28px;box-sizing:border-box;25  }26  .app-title{flex:1;color:#EDEDED;font-size:46px;font-weight:600;letter-spacing:.2px;}27  .icon-btn{width:90px;height:90px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:default;}28  .app-actions{display:flex;align-items:center;gap:8px;}29  .save{color:#70B8FF;font-size:40px;margin-right:8px;}30  /* Content list */31  .content{padding-top:6px;}32  .divider{height:1px;background:#2A2A2A;}33  .row{34    height:150px; display:flex; align-items:center; justify-content:space-between;35    padding:0 32px; box-sizing:border-box; border-bottom:1px solid #2A2A2A;36  }37  .label{color:#D5D5D5;font-size:40px;}38  .value{color:#F0F0F0;font-size:40px;}39  .muted{color:#9FA5AC;}40  .unit{margin-left:14px;color:#9FA5AC;font-size:36px;}41  .right-area{display:flex;align-items:center;gap:70px;color:#EDEDED;font-size:40px;}42  /* Keyboard */43  .keyboard{44    position:absolute;left:0;right:0;bottom:0;background:#171819;border-top:1px solid #262626;45    padding-top:16px;box-sizing:border-box;height:1040px;46  }47  .keyboard .pull-chip{48    position:absolute;top:8px;left:40px;width:48px;height:36px;border-radius:18px;49    display:flex;align-items:center;justify-content:center;color:#D0D0D0;border:1px solid #2E2E2E;background:#1F2021;50    font-size:28px;51  }52  .keys{53    padding:70px 36px 120px; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;54  }55  .key{56    height:168px; border-radius:84px; background:#2A2C2E; color:#F6F6F6; 57    display:flex; align-items:center; justify-content:center; font-size:60px;58    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);59  }60  .key.dim{color:#DADADA}61  .key.alt{background:#E9DDFE;color:#1B1C1E;}62  .key.enter{background:#CFE7FF;color:#0E1720;}63  /* Home indicator */64  .home-indicator{65    position:absolute;left:50%;transform:translateX(-50%);bottom:18px;width:360px;height:12px;border-radius:8px;background:#CFCFCF;opacity:.8;66  }67</style>68</head>69<body>70<div id="render-target">71  <!-- Status bar -->72  <div class="status-bar">73    <div class="time">9:12</div>74    <div class="status-right">75      <!-- simple icons -->76      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M12 21l9-9a13 13 0 0 0-18 0l9 9z"/></svg>77      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M2 12h20v2H2z"/></svg>78      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M3 7h18v10H3z"/></svg>79      <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2" fill="none" stroke="#E0E0E0" stroke-width="2"/><rect x="19" y="9" width="2" height="6" rx="1" fill="#E0E0E0"/></svg>80    </div>81  </div>82 83  <!-- App bar -->84  <div class="app-bar">85    <button class="icon-btn" aria-label="Back">86      <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#EDEDED" d="M6 6l12 12M18 6L6 18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/></svg>87    </button>88    <div class="app-title">Add activity</div>89    <div class="app-actions">90      <div class="save">Save</div>91      <button class="icon-btn" aria-label="More">92        <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#EDEDED"/><circle cx="12" cy="12" r="2" fill="#EDEDED"/><circle cx="12" cy="19" r="2" fill="#EDEDED"/></svg>93      </button>94    </div>95  </div>96 97  <!-- Content -->98  <div class="content">99    <div class="divider"></div>100    <div class="row">101      <div class="label">Title</div>102      <div class="value muted">Add</div>103    </div>104    <div class="row">105      <div class="label">Activity</div>106      <div class="value">Running</div>107    </div>108 109    <div class="divider"></div>110    <div class="row">111      <div class="label">Start</div>112      <div class="right-area">113        <span>Today</span>114        <span>8:40 AM</span>115      </div>116    </div>117    <div class="row">118      <div class="label">Duration</div>119      <div class="value">30 min</div>120    </div>121 122    <div class="divider"></div>123    <div class="row">124      <div class="label">Intensity</div>125      <div class="value muted">Add Heart Pts</div>126    </div>127    <div class="row">128      <div class="label">Distance</div>129      <div class="value muted">Add mi</div>130    </div>131    <div class="row">132      <div class="label">Energy expended</div>133      <div class="value muted">Add Cal</div>134    </div>135    <div class="row">136      <div class="label">Steps</div>137      <div class="value">10000<span class="unit">steps</span></div>138    </div>139  </div>140 141  <!-- Keyboard -->142  <div class="keyboard">143    <div class="pull-chip">˅</div>144    <div class="keys">145      <div class="key">1</div>146      <div class="key">2</div>147      <div class="key">3</div>148      <div class="key dim">−</div>149 150      <div class="key">4</div>151      <div class="key">5</div>152      <div class="key">6</div>153      <div class="key dim">154        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 6v12h12" stroke="#DADADA" stroke-width="2" fill="none" stroke-linecap="round"/></svg>155      </div>156 157      <div class="key">7</div>158      <div class="key">8</div>159      <div class="key">9</div>160      <div class="key alt">161        <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 12l5 5h9a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H8l-5 5z" fill="#1B1C1E"/><path d="M11 9l4 3-4 3" stroke="#1B1C1E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>162      </div>163 164      <div class="key">,</div>165      <div class="key">0</div>166      <div class="key">.</div>167      <div class="key enter">168        <svg width="60" height="60" viewBox="0 0 24 24"><path d="M5 12h10" stroke="#0E1720" stroke-width="2" stroke-linecap="round"/><path d="M12 7l5 5-5 5" fill="none" stroke="#0E1720" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>169      </div>170    </div>171    <div class="home-indicator"></div>172  </div>173</div>174</body>175</html>