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>Exercise Goal Modal with Keypad</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f7f7f7; border-radius: 28px;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 150px;17 background: #2f2f33; color: #fff; padding: 0 40px;18 display: flex; align-items: center; justify-content: space-between;19 box-sizing: border-box;20 }21 .status-left { font-size: 48px; font-weight: 600; }22 .status-right { display: flex; gap: 28px; align-items: center; }23 .status-icon svg { width: 44px; height: 44px; fill: #fff; }24 25 /* App content */26 .content {27 position: absolute; left: 0; top: 150px; width: 100%; height: 1560px;28 padding: 36px; box-sizing: border-box;29 }30 .top-row {31 display: flex; align-items: center; gap: 24px; margin-bottom: 24px;32 }33 .icon-btn {34 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;35 border-radius: 36px; background: #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,0.08);36 }37 .icon-btn svg { width: 40px; height: 40px; fill: #333; }38 .search {39 flex: 1; height: 90px; border-radius: 45px; background: #ffffff;40 border: 2px solid #e5e5e5; box-sizing: border-box; padding: 0 36px;41 display: flex; align-items: center; color: #9a9a9a; font-size: 40px;42 }43 44 .filter-chips { display: flex; gap: 24px; margin: 26px 0 20px; }45 .chip {46 padding: 26px 34px; border-radius: 20px; font-size: 38px; font-weight: 600;47 border: 2px solid #1e88e5; color: #ffffff; background: #1e88e5;48 }49 .chip.outlined {50 background: #fff; color: #1e88e5;51 }52 53 .view-from { font-size: 40px; font-weight: 700; color: #333; margin-top: 18px; margin-bottom: 18px; }54 .tag-row { display: flex; gap: 18px; margin-bottom: 28px; flex-wrap: wrap; }55 .tag {56 padding: 22px 28px; border-radius: 18px; font-size: 34px; font-weight: 600;57 background: #e9eef8; color: #5c6f86; border: 2px solid #d0d6e4;58 }59 .tag.active { background: #1e88e5; border-color: #1e88e5; color: #fff; }60 61 .clear-done {62 display: flex; justify-content: space-between; align-items: center; margin: 12px 0 24px;63 color: #63707f; font-weight: 700; font-size: 36px;64 }65 .clear-done .done { color: #1e88e5; }66 67 /* List item */68 .list {69 margin-top: 12px;70 }71 .list-item {72 display: flex; align-items: center; gap: 28px; padding: 24px 12px;73 border-bottom: 1px solid #e9e9e9;74 }75 .thumb {76 width: 120px; height: 120px; border-radius: 60px; background: #E0E0E0; border: 1px solid #BDBDBD;77 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;78 }79 .item-text { flex: 1; }80 .item-title { font-size: 44px; font-weight: 700; color: #222; }81 .item-sub { font-size: 32px; color: #7a8898; margin-top: 6px; }82 83 /* Overlay and modal */84 .overlay {85 position: absolute; left: 0; top: 0; width: 100%; height: 100%;86 background: rgba(0,0,0,0.28);87 }88 .modal {89 position: absolute; left: 90px; top: 980px; width: 900px;90 background: #fff; border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.25);91 padding: 48px; box-sizing: border-box;92 }93 .modal h2 { margin: 0 0 24px; font-size: 56px; color: #222; }94 .modal p { margin: 0 0 30px; font-size: 36px; color: #6a7480; line-height: 1.35; }95 .modal a { color: #2979ff; text-decoration: underline; }96 .input {97 height: 110px; border-radius: 24px; border: 2px solid #e7e7e7; background: #f9fafb;98 display: flex; align-items: center; padding: 0 28px; font-size: 48px; color: #222;99 }100 .actions {101 display: flex; justify-content: flex-end; gap: 50px; margin-top: 36px;102 font-size: 44px; font-weight: 700;103 }104 .btn-cancel { color: #8a8f97; }105 .btn-save { color: #2979ff; }106 107 /* Numeric keypad */108 .keypad {109 position: absolute; left: 0; bottom: 0; width: 100%; height: 900px;110 background: #1b1b1d; border-top-left-radius: 28px; border-top-right-radius: 28px;111 padding: 40px 46px 90px; box-sizing: border-box;112 }113 .keys {114 display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 28px;115 }116 .key {117 height: 160px; border-radius: 80px; background: #2a2a2c; color: #f0f0f0;118 display: flex; align-items: center; justify-content: center; flex-direction: column;119 font-size: 52px; font-weight: 700;120 }121 .sub { font-size: 28px; color: #c8c8c8; margin-top: 4px; font-weight: 500; }122 .key.special { background: #3a3a3c; }123 .key.backspace { background: #f3d7d6; color: #2b2b2b; }124 .key.enter { background: #e7d9ff; color: #2b2b2b; }125 .bottom-handle {126 position: absolute; left: 50%; transform: translateX(-50%);127 bottom: 24px; width: 280px; height: 12px; background: #ffffff; border-radius: 6px; opacity: 0.8;128 }129 .chevron-up {130 position: absolute; left: 50%; transform: translateX(-50%);131 top: 20px; width: 40px; height: 40px; color: #cfcfcf;132 display: flex; align-items: center; justify-content: center;133 }134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Status bar -->140 <div class="status-bar">141 <div class="status-left">3:53</div>142 <div class="status-right">143 <div class="status-icon">144 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 14 6 14s6-9 6-14c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>145 </div>146 <div class="status-icon">147 <svg viewBox="0 0 24 24"><path d="M2 18h20L12 6 2 18z"/></svg>148 </div>149 <div class="status-icon">150 <svg viewBox="0 0 24 24"><rect x="2" y="8" width="16" height="8" rx="1"/><rect x="19" y="10" width="3" height="4" rx="1"/></svg>151 </div>152 </div>153 </div>154 155 <!-- App content behind the modal -->156 <div class="content">157 <div class="top-row">158 <div class="icon-btn">159 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>160 </div>161 <div class="search">Search Exercises</div>162 <div class="icon-btn">163 <svg viewBox="0 0 24 24"><path d="M3 5h18l-6 7v7l-6-3V12z"/></svg>164 </div>165 </div>166 167 <div class="filter-chips">168 <div class="chip">Jefit ▾</div>169 <div class="chip">Muscle ▾</div>170 <div class="chip">Equipment ▾</div>171 </div>172 173 <div class="view-from">View From</div>174 <div class="tag-row">175 <div class="tag active">Jefit Exercises</div>176 <div class="tag">My Favorite</div>177 <div class="tag">Recently Performed</div>178 <div class="tag">My Custom Exercises</div>179 </div>180 181 <div class="clear-done">182 <div>CLEAR</div>183 <div class="done">DONE</div>184 </div>185 186 <div class="list">187 <div class="list-item">188 <div class="thumb">[IMG: Exercise Thumbnail]</div>189 <div class="item-text">190 <div class="item-title">Barbell Bench Press</div>191 <div class="item-sub">Bench, Bench Press, Chest Press</div>192 </div>193 </div>194 195 <div class="list-item">196 <div class="thumb">[IMG: Exercise Thumbnail]</div>197 <div class="item-text">198 <div class="item-title">Dumbbell Lateral Raise</div>199 <div class="item-sub">Shoulders, Isolation</div>200 </div>201 </div>202 </div>203 </div>204 205 <!-- Overlay and modal -->206 <div class="overlay"></div>207 <div class="modal">208 <h2>Barbell Squat Goal</h2>209 <p>Easily set a goal and try to refresh best records. <a href="#">Read More</a></p>210 <div class="input">12</div>211 <div class="actions">212 <div class="btn-cancel">CANCEL</div>213 <div class="btn-save">SAVE</div>214 </div>215 </div>216 217 <!-- Numeric keypad -->218 <div class="keypad">219 <div class="chevron-up">⌃</div>220 <div class="keys">221 <div class="key">1</div>222 <div class="key">2<div class="sub">ABC</div></div>223 <div class="key">3<div class="sub">DEF</div></div>224 <div class="key special">−</div>225 226 <div class="key">4<div class="sub">GHI</div></div>227 <div class="key">5<div class="sub">JKL</div></div>228 <div class="key">6<div class="sub">MNO</div></div>229 <div class="key special">⌊</div>230 231 <div class="key">7<div class="sub">PQRS</div></div>232 <div class="key">8<div class="sub">TUV</div></div>233 <div class="key">9<div class="sub">WXYZ</div></div>234 <div class="key backspace">⌫</div>235 236 <div class="key special">*</div>237 <div class="key">0<div class="sub">+</div></div>238 <div class="key special">.</div>239 <div class="key enter">✓</div>240 </div>241 <div class="bottom-handle"></div>242 </div>243 244</div>245</body>246</html>