GD-ML/AndroidCode
13.4k
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 :root{9 --bg:#121212;10 --card:#1d1f20;11 --text:#e8e8e8;12 --muted:#9aa0a6;13 --divider:#2a2a2a;14 --accent:#8ab4f8;15 --key:#2c2d31;16 }17 body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }18 #render-target{19 width:1080px; height:2400px; position:relative; overflow:hidden;20 background:var(--bg); color:var(--text);21 }22 /* Status bar */23 .status-bar{24 height:80px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;25 color:#e5e5e5; font-size:34px; letter-spacing:0.5px;26 }27 .status-left{ display:flex; align-items:center; gap:18px; }28 .status-right{ display:flex; align-items:center; gap:22px; }29 .status-icon{30 width:28px; height:28px; opacity:.8;31 }32 33 /* App bar */34 .appbar{35 height:120px; display:flex; align-items:center; padding:0 24px; border-bottom:1px solid var(--divider);36 background:#1b1d1f;37 }38 .appbar-title{ font-size:44px; font-weight:600; margin-left:16px; }39 .appbar .spacer{ flex:1; }40 .appbar .action{ color:var(--accent); font-size:36px; font-weight:600; margin-right:16px; }41 .icon-btn{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }42 .appbar svg{ fill:#e6e6e6; }43 44 /* Sections */45 .section-divider{ height:18px; background:#161718; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); }46 .row{47 display:flex; align-items:center; justify-content:space-between;48 padding:0 32px; height:132px; border-bottom:1px solid var(--divider);49 font-size:36px;50 }51 .row .label{ color:#d7d7d7; }52 .row .value{ color:#aeb4bb; }53 .row .value.strong{ color:#e9e9e9; }54 .subtle{ color:var(--muted); }55 56 /* Editable steps field with caret */57 .steps-value{58 display:flex; align-items:center; gap:8px; color:#eaeaea;59 }60 .caret{61 width:2px; height:40px; background:#8ab4f8; display:inline-block;62 margin-left:6px;63 }64 65 /* Keyboard */66 .keyboard{67 position:absolute; left:0; right:0; bottom:120px;68 padding:26px 26px 20px;69 background:#161719;70 border-top:1px solid var(--divider);71 }72 .keys{73 display:grid; grid-template-columns: repeat(4, 1fr); gap:26px;74 }75 .key{76 height:170px; background:var(--key);77 border-radius:90px; display:flex; align-items:center; justify-content:center;78 font-size:64px; color:#ececec;79 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);80 }81 .key.alt1{ background:#f5dfe2; color:#2a2a2a; }82 .key.alt2{ background:#e9ddff; color:#2a2a2a; }83 .key.small{ font-size:54px; }84 .key .svg-icon{ width:64px; height:64px; }85 /* Bottom gesture bar */86 .gesture{87 position:absolute; left:50%; transform:translateX(-50%);88 bottom:40px; width:360px; height:10px; background:#e6e6e6; border-radius:6px; opacity:.9;89 }90</style>91</head>92<body>93<div id="render-target">94 <!-- Status bar -->95 <div class="status-bar">96 <div class="status-left">97 <div>9:47</div>98 <div class="status-icon">⌁</div>99 <div class="status-icon">alt</div>100 <div class="status-icon">📶</div>101 <div class="status-icon">☁</div>102 </div>103 <div class="status-right">104 <div class="status-icon">📶</div>105 <div class="status-icon">🔋</div>106 </div>107 </div>108 109 <!-- App bar -->110 <div class="appbar">111 <div class="icon-btn" aria-label="Close">112 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4z"/></svg>113 </div>114 <div class="appbar-title">Add activity</div>115 <div class="spacer"></div>116 <div class="action">Save</div>117 <div class="icon-btn" aria-label="More">118 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 7a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>119 </div>120 </div>121 122 <div class="section-divider"></div>123 124 <!-- Form rows -->125 <div class="row">126 <div class="label">Title</div>127 <div class="value">Add</div>128 </div>129 <div class="row">130 <div class="label">Activity</div>131 <div class="value strong">Walking</div>132 </div>133 134 <div class="section-divider"></div>135 136 <div class="row">137 <div class="label">Start</div>138 <div class="value"><span class="subtle">Today</span> 9:15 AM</div>139 </div>140 <div class="row">141 <div class="label">Duration</div>142 <div class="value strong">30 min</div>143 </div>144 145 <div class="section-divider"></div>146 147 <div class="row">148 <div class="label">Intensity</div>149 <div class="value">Add Heart Pts</div>150 </div>151 <div class="row">152 <div class="label">Distance</div>153 <div class="value">Add mi</div>154 </div>155 <div class="row">156 <div class="label">Energy expended</div>157 <div class="value">Add Cal</div>158 </div>159 <div class="row">160 <div class="label">Steps</div>161 <div class="steps-value">162 <span>1000</span><span class="caret"></span><span class="subtle"> steps</span>163 </div>164 </div>165 166 <!-- Keyboard -->167 <div class="keyboard">168 <div class="keys">169 <div class="key">1</div>170 <div class="key">2</div>171 <div class="key">3</div>172 <div class="key small">−</div>173 174 <div class="key">4</div>175 <div class="key">5</div>176 <div class="key">6</div>177 <div class="key small">⌟</div>178 179 <div class="key">7</div>180 <div class="key">8</div>181 <div class="key">9</div>182 <div class="key alt1">⌫</div>183 184 <div class="key small">,</div>185 <div class="key">0</div>186 <div class="key small">.</div>187 <div class="key alt2">→</div>188 </div>189 </div>190 191 <!-- Gesture bar -->192 <div class="gesture"></div>193</div>194</body>195</html>