GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Cycling Activity UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #1b1a1a;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 68px;23    background: #121212;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-size: 36px;29    letter-spacing: 0.5px;30    color: #cfcfcf;31  }32  .status-icons {33    margin-left: auto;34    display: flex;35    gap: 22px;36    align-items: center;37  }38  .dot, .signal, .battery {39    width: 28px; height: 28px; background: #cfcfcf; border-radius: 6px;40  }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 68px;46    left: 0;47    width: 1080px;48    height: 112px;49    background: #1a1a1a;50    display: flex;51    align-items: center;52    padding: 0 28px;53    box-sizing: border-box;54    border-bottom: 1px solid #2a2a2a;55  }56  .app-bar .title {57    font-size: 46px;58    font-weight: 600;59    margin-left: 16px;60  }61  .app-actions {62    margin-left: auto;63    display: flex;64    gap: 34px;65    align-items: center;66  }67  .icon-btn {68    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;69  }70  .icon-btn svg { width: 42px; height: 42px; fill: #eaeaea; }71 72  /* Timeline header */73  .timeline {74    position: absolute;75    top: 180px;76    left: 0;77    width: 1080px;78    height: 90px;79    background: #242322;80    display: flex;81    align-items: center;82    padding: 0 32px;83    box-sizing: border-box;84    color: #dcdcdc;85    font-size: 42px;86  }87 88  /* Main content scroll area */89  .content {90    position: absolute;91    top: 270px;92    left: 0;93    right: 0;94    bottom: 0;95    overflow-y: auto;96    padding: 32px;97    box-sizing: border-box;98  }99 100  /* Hero icon circle */101  .hero {102    width: 1016px;103    height: 640px;104    background: #262524;105    border-radius: 24px;106    margin: 0 auto 24px;107    position: relative;108  }109  .hero .circle {110    width: 420px; height: 420px;111    background: #273368;112    border-radius: 50%;113    position: absolute;114    left: 50%; top: 60px; transform: translateX(-50%);115    display: flex; align-items: center; justify-content: center;116  }117  .hero .circle svg { width: 240px; height: 240px; fill: #d9defd; }118 119  .activity-card {120    position: absolute;121    left: 32px; right: 32px; bottom: 32px;122    height: 160px;123    background: linear-gradient(180deg, #121212, #1a1a1a);124    border-radius: 28px;125    display: flex; align-items: center;126    padding: 0 40px; box-sizing: border-box;127    font-size: 54px; font-weight: 600;128  }129 130  /* Stats row */131  .stats {132    width: 1016px;133    margin: 22px auto 36px;134    display: grid;135    grid-template-columns: repeat(4, 1fr);136    gap: 10px;137    background: #262524;138    border-radius: 18px;139    padding: 26px 40px;140    box-sizing: border-box;141  }142  .stat {143    text-align: left;144  }145  .stat .value {146    font-size: 54px;147    font-weight: 700;148  }149  .stat .label {150    font-size: 32px;151    color: #bdbdbd;152    margin-top: 6px;153  }154 155  /* Section headers */156  .section-title {157    font-size: 48px;158    font-weight: 700;159    margin: 34px 32px 18px;160  }161 162  /* Photos card */163  .photos-card, .notif-card {164    width: 1016px;165    margin: 0 auto 28px;166    background: #222220;167    border-radius: 26px;168    padding: 36px;169    box-sizing: border-box;170    color: #d7d7d7;171    font-size: 40px;172    line-height: 1.35;173  }174  .add-photo {175    width: 220px; height: 220px;176    border: 3px dashed #bfbfbf; border-radius: 18px;177    display: flex; align-items: center; justify-content: center;178    margin-top: 26px;179    color: #ffffff; font-size: 120px; font-weight: 300;180  }181 182  /* Notification item */183  .notif-item {184    margin-top: 8px;185    background: #292927;186    border-radius: 24px;187    padding: 28px;188    display: flex; align-items: center;189  }190  .star-badge {191    width: 92px; height: 92px; border-radius: 50%;192    background: #6f73ff;193    display: flex; align-items: center; justify-content: center;194    color: #fff; font-size: 54px;195    margin-right: 24px;196  }197  .notif-text {198    font-size: 40px;199    color: #e6e6e6;200  }201  .chevron {202    margin-left: auto;203  }204  .chevron svg { width: 42px; height: 42px; fill: #cfcfcf; }205 206  /* Gesture handle */207  .handle {208    position: absolute;209    bottom: 24px;210    left: 50%;211    transform: translateX(-50%);212    width: 360px; height: 12px;213    background: #dcdcdc;214    border-radius: 6px;215    opacity: 0.8;216  }217</style>218</head>219<body>220<div id="render-target">221 222  <!-- Status bar -->223  <div class="status-bar">224    <div>2:54</div>225    <div class="status-icons">226      <div class="signal"></div>227      <div class="dot"></div>228      <div class="battery"></div>229    </div>230  </div>231 232  <!-- App bar -->233  <div class="app-bar">234    <div class="icon-btn" aria-label="Back">235      <svg viewBox="0 0 24 24">236        <path d="M15.5 19.5L8 12l7.5-7.5-1.4-1.4L5.2 12l8.9 9.9z"/>237      </svg>238    </div>239    <div class="title">Cycling</div>240    <div class="app-actions">241      <div class="icon-btn" aria-label="Share">242        <svg viewBox="0 0 24 24">243          <path d="M18 16.1a2.9 2.9 0 0 0-2.3 1.1L8.9 13a2.8 2.8 0 0 0 0-2l6.8-4.2A3 3 0 1 0 15 5a2.9 2.9 0 0 0 .1.7L8.3 9.9a3 3 0 1 0 0 4.2l6.8 4.2A2.9 2.9 0 0 0 18 19a3 3 0 1 0 0-2.9z"/>244        </svg>245      </div>246      <div class="icon-btn" aria-label="More">247        <svg viewBox="0 0 24 24">248          <circle cx="5" cy="12" r="2"></circle>249          <circle cx="12" cy="12" r="2"></circle>250          <circle cx="19" cy="12" r="2"></circle>251        </svg>252      </div>253    </div>254  </div>255 256  <!-- Timeline -->257  <div class="timeline">Today, 12:48 PM</div>258 259  <!-- Content -->260  <div class="content">261    <div class="hero">262      <div class="circle">263        <!-- Simplified cyclist icon -->264        <svg viewBox="0 0 64 64">265          <circle cx="22" cy="46" r="9" fill="#dfe5ff"></circle>266          <circle cx="46" cy="46" r="9" fill="#dfe5ff"></circle>267          <path d="M30 23a8 8 0 0 1 8 8h6a3 3 0 0 0 0-6h-4.2a9.6 9.6 0 0 0-13.8-5.7l-4 2.3a3 3 0 1 0 3 5.2l3.8-2.2A4 4 0 0 1 30 23z" fill="#dfe5ff"></path>268          <circle cx="41" cy="16" r="4" fill="#dfe5ff"></circle>269        </svg>270      </div>271      <div class="activity-card">Cycling</div>272    </div>273 274    <div class="stats">275      <div class="stat">276        <div class="value">56:28</div>277        <div class="label">Duration</div>278      </div>279      <div class="stat">280        <div class="value">-</div>281        <div class="label">miles</div>282      </div>283      <div class="stat">284        <div class="value">-</div>285        <div class="label">mph</div>286      </div>287      <div class="stat">288        <div class="value">371</div>289        <div class="label">kcal</div>290      </div>291    </div>292 293    <div class="section-title">Photos</div>294    <div class="photos-card">295      To select a cover, press and hold a photo. Press and hold a cover to remove it.296      <div class="add-photo">+</div>297    </div>298 299    <div class="section-title">Notifications</div>300    <div class="notif-card">301      <div class="notif-item">302        <div class="star-badge">★</div>303        <div class="notif-text">No goal set for this activity</div>304        <div class="chevron">305          <svg viewBox="0 0 24 24">306            <path d="M9 4l8 8-8 8-1.4-1.4L14.2 12 7.6 5.4z"/>307          </svg>308        </div>309      </div>310    </div>311  </div>312 313  <div class="handle"></div>314</div>315</body>316</html>