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>Exercise Search with Goal Modal</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0; height:120px; background:#30323a; color:#fff;17    display:flex; align-items:center; justify-content:space-between; padding:0 36px; box-sizing:border-box;18  }19  .status-time { font-weight:600; font-size:40px; letter-spacing:1px; }20  .status-icons { display:flex; align-items:center; gap:26px; }21  .status-icons svg { width:44px; height:44px; fill:#fff; opacity:0.9; }22 23  /* App content (dimmed behind modal) */24  .content {25    position:absolute; top:120px; left:0; right:0; bottom:0; background:#f7f8fa;26    overflow:hidden;27  }28  .topbar {29    padding:26px 28px; display:flex; align-items:center; gap:24px;30  }31  .back-btn {32    width:60px; height:60px; border-radius:30px; display:flex; align-items:center; justify-content:center;33  }34  .search {35    flex:1; position:relative;36  }37  .search input {38    width:100%; height:92px; border-radius:46px; border:1px solid #d9dde3; outline:none;39    padding:0 120px 0 36px; font-size:36px; color:#333; background:#ffffff;40  }41  .filter-icon {42    position:absolute; right:16px; top:50%; transform:translateY(-50%);43    width:82px; height:82px; border-radius:41px; display:flex; align-items:center; justify-content:center;44    color:#6b7785;45  }46  .chips-row { display:flex; gap:22px; padding:6px 28px 0 28px; }47  .chip {48    border:1px solid #3b78ff; color:#3b78ff; padding:18px 32px; border-radius:18px; font-size:36px; background:#eaf1ff;49  }50  .chip.gray {51    border:1px solid #cfd6dd; color:#5f6b78; background:#eef1f4;52  }53  .section-title { padding:26px 28px 10px 28px; font-weight:700; color:#1e2732; font-size:38px; }54  .actions-row { padding:6px 28px 24px 28px; display:flex; justify-content:space-between; color:#6b7785; font-weight:700; font-size:34px; }55  .actions-row .done { color:#2b6be6; }56 57  .list { padding:10px 0 0 0; height:980px; overflow:hidden; }58  .item {59    display:flex; align-items:center; padding:22px 28px; gap:26px; background:#fff;60    border-top:1px solid #eef1f4;61  }62  .avatar {63    width:120px; height:120px; border-radius:60px; background:#E0E0E0; border:1px solid #BDBDBD;64    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;65    overflow:hidden;66  }67  .item .title { font-weight:700; font-size:40px; color:#222; }68  .item .sub { font-size:30px; color:#6c7885; margin-top:6px; }69 70  /* Dimming overlay (below keyboard, above content) */71  .overlay {72    position:absolute; inset:0; background:rgba(0,0,0,0.45); z-index:3;73  }74 75  /* Center modal above keyboard */76  .modal {77    position:absolute; left:90px; right:90px; top:860px; background:#fff; border-radius:28px;78    box-shadow:0 30px 80px rgba(0,0,0,0.35); padding:44px; z-index:5;79  }80  .modal h2 { margin:0 0 18px 0; font-size:52px; color:#121212; }81  .modal p { margin:0 0 24px 0; font-size:34px; color:#596471; line-height:1.35; }82  .modal a { color:#3b78ff; text-decoration:underline; }83  .input {84    height:120px; border-radius:22px; background:#f3f5f7; display:flex; align-items:center;85    padding:0 26px; color:#99a2ad; font-size:36px; border:1px solid #e6e9ed; margin-top:6px;86  }87  .modal .btns {88    display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-weight:800; font-size:40px;89  }90  .btn-cancel { color:#8b949e; }91  .btn-save { color:#2b6be6; }92 93  /* Keyboard */94  .keyboard {95    position:absolute; left:0; right:0; bottom:0; height:900px; background:#1f2024; z-index:4;96    padding:22px 22px 44px 22px; box-sizing:border-box;97  }98  .kbd-handle {99    width:44px; height:34px; border-radius:20px; color:#cfd2d6; font-size:46px; margin:0 auto 8px auto;100    text-align:center; line-height:34px;101  }102  .grid {103    display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:170px; gap:22px;104  }105  .key {106    background:#2b2d31; border-radius:44px; display:flex; align-items:center; justify-content:center;107    color:#f2f2f2; font-size:56px; font-weight:700; position:relative;108  }109  .key .sub {110    position:absolute; bottom:18px; right:28px; font-size:26px; font-weight:600; color:#a8acb3; letter-spacing:1px;111  }112  .key.alt { background:#383a40; }113  .key.pink { background:#ffdee2; color:#1a1a1a; }114  .key.purple { background:#e9d8ff; color:#1a1a1a; }115  .nav-indicator {116    position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:220px; height:8px; background:#f1f1f1;117    border-radius:6px; opacity:0.9;118  }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status bar -->125  <div class="status-bar">126    <div class="status-time">3:52</div>127    <div class="status-icons">128      <!-- location -->129      <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 4.3 6 14 6 14s6-9.7 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>130      <!-- wifi -->131      <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-6.3-5.2 1.4 1.4A8 8 0 0 1 18.9 14l1.4-1.4A10.5 10.5 0 0 0 5.7 12.8zM2.3 9.3l1.4 1.4a14 14 0 0 1 16.6 0l1.4-1.4a16 16 0 0 0-19.4 0z"/></svg>132      <!-- battery -->133      <svg viewBox="0 0 24 24"><path d="M17 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2H5a2 2 0 0 1-2-2V6h14zM5 8v8h12V8H5z"/></svg>134    </div>135  </div>136 137  <!-- App content -->138  <div class="content">139    <div class="topbar">140      <div class="back-btn">141        <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#2b2f36" d="M15.4 5.4 14 4 6 12l8 8 1.4-1.4L8.8 12z"/></svg>142      </div>143      <div class="search">144        <input type="text" placeholder="Search Exercises">145        <div class="filter-icon">146          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#5b6675" d="M3 5h18l-7 8v6l-4-2v-4z"/></svg>147        </div>148      </div>149    </div>150 151    <div class="chips-row">152      <div class="chip">Jefit ▾</div>153      <div class="chip">Muscle ▾</div>154      <div class="chip">Equipment ▾</div>155    </div>156 157    <div class="section-title">View From</div>158    <div class="chips-row" style="flex-wrap:wrap;">159      <div class="chip">Jefit Exercises</div>160      <div class="chip gray">My Favorite</div>161      <div class="chip gray">Recently Performed</div>162      <div class="chip gray">My Custom Exercises</div>163    </div>164 165    <div class="actions-row">166      <div>CLEAR</div>167      <div class="done">DONE</div>168    </div>169 170    <div class="list">171      <div class="item">172        <div class="avatar">[IMG: Exercise]</div>173        <div>174          <div class="title">Barbell Bench Press</div>175          <div class="sub">Bench, Bench Press, Chest Press</div>176        </div>177      </div>178      <div class="item">179        <div class="avatar">[IMG: Exercise]</div>180        <div>181          <div class="title">Dumbbell Row</div>182          <div class="sub">Back, Dumbbell, Row</div>183        </div>184      </div>185      <div class="item">186        <div class="avatar">[IMG: Exercise]</div>187        <div>188          <div class="title">Incline Curl</div>189          <div class="sub">Biceps, Isolation</div>190        </div>191      </div>192    </div>193  </div>194 195  <!-- Dark overlay (kept below keyboard) -->196  <div class="overlay"></div>197 198  <!-- Modal dialog -->199  <div class="modal">200    <h2>Barbell Squat Goal</h2>201    <p>Easily set a goal and try to refresh best records. <a href="#">Read More</a></p>202    <div class="input">1 Rep Max</div>203    <div class="btns">204      <div class="btn-cancel">CANCEL</div>205      <div class="btn-save">SAVE</div>206    </div>207  </div>208 209  <!-- Numeric keyboard -->210  <div class="keyboard">211    <div class="kbd-handle">˄</div>212    <div class="grid">213      <div class="key">1</div>214      <div class="key">2<span class="sub">ABC</span></div>215      <div class="key">3<span class="sub">DEF</span></div>216      <div class="key alt">−</div>217 218      <div class="key">4<span class="sub">GHI</span></div>219      <div class="key">5<span class="sub">JKL</span></div>220      <div class="key">6<span class="sub">MNO</span></div>221      <div class="key alt">⌊</div>222 223      <div class="key">7<span class="sub">PQRS</span></div>224      <div class="key">8<span class="sub">TUV</span></div>225      <div class="key">9<span class="sub">WXYZ</span></div>226      <div class="key pink">⌫</div>227 228      <div class="key alt">*</div>229      <div class="key">0<span class="sub">+</span></div>230      <div class="key alt">.</div>231      <div class="key purple">✓</div>232    </div>233  </div>234 235  <div class="nav-indicator"></div>236</div>237</body>238</html>