GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Workout Search - Running</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13    border-radius: 26px;14    box-shadow: 0 8px 24px rgba(0,0,0,0.2);15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #9FA4A6;25    color: #ffffff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-time { font-size: 42px; }33  .status-icons {34    margin-left: auto;35    display: flex;36    gap: 28px;37    align-items: center;38  }39  .status-dot {40    width: 24px; height: 24px; background:#ffffff; border-radius:50%;41    opacity: 0.85;42  }43  .status-notch {44    width: 40px; height: 40px; border: 3px solid #fff; border-radius: 8px;45  }46 47  /* Header with search */48  .header {49    position: absolute;50    top: 120px;51    left: 0;52    width: 1080px;53    height: 200px;54    background: #f7f7f7;55    display: flex;56    align-items: center;57    padding: 0 30px;58    box-sizing: border-box;59    gap: 24px;60  }61  .icon-btn {62    width: 84px; height: 84px; border-radius: 42px;63    background: #ffffff; border: 1px solid #d6d6d6;64    display: flex; align-items: center; justify-content: center;65  }66  .search-pill {67    flex: 1;68    height: 96px;69    background: #ffffff;70    border-radius: 48px;71    border: 2px solid #e2e2e2;72    display: flex; align-items: center;73    padding: 0 34px;74    box-sizing: border-box;75    gap: 18px;76  }77  .search-text { font-size: 44px; color: #444; flex: 1; }78  .circle-x {79    width: 60px; height: 60px; border-radius: 30px; background: #f0f0f0; border:1px solid #d6d6d6;80    display:flex; align-items:center; justify-content:center;81    color:#777; font-size:34px; font-weight:700;82  }83 84  /* Filter pills row */85  .filters {86    position: absolute;87    top: 320px;88    left: 0;89    width: 1080px;90    height: 110px;91    display: flex;92    gap: 26px;93    padding: 0 30px;94    box-sizing: border-box;95    align-items: center;96    background: #ffffff;97  }98  .filter-pill {99    height: 92px;100    padding: 0 34px;101    border-radius: 18px;102    background: #eaf3ff;103    border: 1px solid #cfe0ff;104    display: flex; align-items: center; gap: 16px;105    color: #1a73e8;106    font-size: 42px;107    font-weight: 600;108  }109  .small-caret {110    width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;111    border-top: 16px solid #1a73e8; margin-top: 6px;112  }113 114  /* Sort text */115  .sort-text {116    position: absolute;117    top: 430px;118    width: 100%;119    text-align: center;120    color: #7a7a7a;121    font-size: 40px;122    letter-spacing: 1px;123  }124 125  /* Blue banner */126  .banner {127    position: absolute;128    top: 490px;129    left: 0;130    width: 1080px;131    height: 110px;132    background: #2f93ff;133    color: #ffffff;134    display: flex; align-items: center;135    padding: 0 30px;136    box-sizing: border-box;137    font-size: 40px;138    font-weight: 700;139    gap: 20px;140  }141  .banner-end {142    margin-left: auto;143    background: #ffffff;144    color: #2f93ff;145    height: 80px; width: 140px; border-radius: 22px;146    display: flex; align-items: center; justify-content: center;147    font-weight: 800; border: 1px solid rgba(255,255,255,0.6);148  }149 150  /* List items */151  .list-area {152    position: absolute;153    top: 610px;154    left: 0;155    width: 1080px;156    padding: 0 30px;157    box-sizing: border-box;158  }159  .list-item {160    display: flex;161    padding: 32px 24px;162    border-radius: 16px;163    background: #ffffff;164    border: 1px solid #e6e6e6;165    margin-bottom: 26px;166    align-items: center;167    position: relative;168  }169  .avatar {170    width: 120px; height: 120px; border-radius: 60px;171    overflow: hidden; border: 1px solid #BDBDBD;172    display:flex; align-items:center; justify-content:center;173    background:#E0E0E0; color:#666; font-size:26px;174    margin-right: 24px;175  }176  .sound-dot {177    position: absolute;178    left: 110px; top: 8px;179    width: 36px; height: 36px; border-radius: 18px;180    background: #6ee673; border: 2px solid #ffffff;181  }182  .title {183    font-size: 50px; color: #222; font-weight: 800;184  }185  .subtitle {186    font-size: 38px; color: #8a8a8a; margin-top: 6px;187  }188 189  /* Floating action pill */190  .floating-controls {191    position: absolute;192    right: 30px;193    top: 1160px;194    width: 520px;195    height: 120px;196    background: #f1f1f1;197    border: 1px solid #d9d9d9;198    border-radius: 60px;199    display: flex; align-items: center; justify-content: space-around;200    padding: 0 22px; box-sizing: border-box;201  }202  .control-icon {203    width: 88px; height: 88px; border-radius: 44px;204    background: #ffffff; border: 1px solid #d6d6d6;205    display:flex; align-items:center; justify-content:center;206  }207 208  /* Ad banner */209  .ad-banner {210    position: absolute;211    top: 1320px;212    left: 30px;213    width: 1020px;214    height: 140px;215    background: #ffffff;216    border: 1px solid #e1e1e1;217    border-radius: 16px;218    display: flex; align-items: center;219    padding: 16px;220    box-sizing: border-box;221    gap: 20px;222  }223  .ad-img {224    width: 120px; height: 120px;225    background:#E0E0E0; border:1px solid #BDBDBD;226    display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;227  }228  .ad-title {229    font-size: 40px; color:#222; font-weight:700;230    flex: 1; line-height: 1.2;231  }232  .ad-price {233    font-size: 42px; color:#d34343; font-weight:800;234  }235 236  /* Keyboard */237  .keyboard {238    position: absolute;239    bottom: 0;240    left: 0;241    width: 1080px;242    height: 980px;243    background: #eef0ea;244    border-top: 1px solid #d6d6d6;245    box-sizing: border-box;246    padding: 24px 30px;247  }248  .kb-topbar {249    display:flex; align-items:center; gap:20px; margin-bottom: 10px;250  }251  .kb-field {252    flex:1; height: 110px; background:#ffffff; border-radius: 18px; border:1px solid #d6d6d6;253  }254  .kb-keys {255    margin-top: 22px;256  }257  .kb-row {258    display:flex; justify-content: space-between; margin-bottom: 18px;259  }260  .key {261    width: 92px; height: 110px;262    background:#ffffff; border:1px solid #dcdcdc; border-radius: 16px;263    display:flex; align-items:center; justify-content:center;264    font-size: 42px; color:#222; font-weight:600;265  }266  .key.wide { width: 160px; }267  .key.space { flex:1; margin: 0 18px; }268  .key.circle { border-radius: 50px; }269</style>270</head>271<body>272<div id="render-target">273 274  <!-- Status bar -->275  <div class="status-bar">276    <div class="status-time">1:39</div>277    <div class="status-icons">278      <div class="status-dot"></div>279      <div class="status-dot"></div>280      <div class="status-dot"></div>281      <div class="status-notch"></div>282    </div>283  </div>284 285  <!-- Header with search -->286  <div class="header">287    <div class="icon-btn">288      <!-- Back Arrow -->289      <svg width="40" height="40" viewBox="0 0 24 24">290        <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>291      </svg>292    </div>293 294    <div class="search-pill">295      <div class="search-text">Running</div>296      <div class="circle-x">×</div>297    </div>298 299    <div class="icon-btn">300      <!-- Filter Funnel -->301      <svg width="40" height="40" viewBox="0 0 24 24">302        <path d="M3 5h18l-7 8v6l-4-2v-4z" fill="#333"/>303      </svg>304    </div>305  </div>306 307  <!-- Filters -->308  <div class="filters">309    <div class="filter-pill">310      Jefit311      <div class="small-caret"></div>312    </div>313    <div class="filter-pill">314      Muscle315      <div class="small-caret"></div>316    </div>317    <div class="filter-pill">318      Equipment319      <div class="small-caret"></div>320    </div>321  </div>322 323  <!-- Sort text -->324  <div class="sort-text">SORT BY POPULARITY</div>325 326  <!-- Banner -->327  <div class="banner">328    ⚡ Quick Workout Mode: Pick And Do It!329    <div class="banner-end">END</div>330  </div>331 332  <!-- List Items -->333  <div class="list-area">334    <div class="list-item">335      <div class="avatar">[IMG: Treadmill]</div>336      <div class="sound-dot"></div>337      <div>338        <div class="title">Treadmill Running</div>339        <div class="subtitle">Indoor Running, Jog, Run, Running</div>340      </div>341    </div>342 343    <div class="list-item">344      <div class="avatar">[IMG: Runner]</div>345      <div class="sound-dot"></div>346      <div>347        <div class="title">Running</div>348        <div class="subtitle">Jogging, Outdoor Running</div>349      </div>350    </div>351  </div>352 353  <!-- Floating controls -->354  <div class="floating-controls">355    <div class="control-icon">356      <!-- Camera -->357      <svg width="40" height="40" viewBox="0 0 24 24">358        <path d="M9 3l2 2h6a2 2 0 012 2v10a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h2z" fill="#333"/>359        <circle cx="12" cy="12" r="4" fill="#888"/>360      </svg>361    </div>362    <div class="control-icon">363      <!-- List -->364      <svg width="40" height="40" viewBox="0 0 24 24">365        <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" fill="#333"/>366      </svg>367    </div>368    <div class="control-icon">369      <!-- Lightning -->370      <svg width="40" height="40" viewBox="0 0 24 24">371        <path d="M13 2L3 14h8l-2 8 12-14h-8l2-6z" fill="#ffb100"/>372      </svg>373    </div>374  </div>375 376  <!-- Ad banner -->377  <div class="ad-banner">378    <div class="ad-img">[IMG: Home Gym]</div>379    <div class="ad-title">Lifeline Fitness HG-002 Home Gym...</div>380    <div class="ad-price">₹22,499.00</div>381  </div>382 383  <!-- Keyboard -->384  <div class="keyboard">385    <div class="kb-topbar">386      <div class="key circle" style="width:90px;height:90px;background:#cdd5c5;">⌨</div>387      <div class="kb-field"></div>388      <div class="key circle" style="width:90px;height:90px;background:#cdd5c5;">🎤</div>389    </div>390 391    <div class="kb-keys">392      <div class="kb-row">393        <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>394      </div>395      <div class="kb-row">396        <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>397      </div>398      <div class="kb-row">399        <div class="key wide">⇧</div><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>400        <div class="key wide">⌫</div>401      </div>402      <div class="kb-row">403        <div class="key wide">?123</div>404        <div class="key wide">,</div>405        <div class="key space"></div>406        <div class="key wide">.</div>407        <div class="key wide">✔</div>408      </div>409    </div>410  </div>411 412</div>413</body>414</html>