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>Yoga - UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Top bars */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 100px;26    background: #56A8E6;27    display: flex;28    align-items: center;29    padding: 0 32px;30    box-sizing: border-box;31    color: #fff;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-bar .time { flex: 1; font-weight: 600; }36  .status-bar .icons { display: flex; gap: 32px; align-items: center; }37 38  .app-bar {39    position: absolute;40    top: 100px;41    left: 0;42    width: 1080px;43    height: 180px;44    background: #56A8E6;45    display: flex;46    align-items: center;47    padding: 0 24px;48    box-sizing: border-box;49    color: #fff;50  }51  .nav-btn, .kebab-btn {52    width: 96px; height: 96px;53    display: flex; align-items: center; justify-content: center;54    background: transparent; border: none; padding: 0; margin: 0;55  }56  .title {57    font-size: 60px; font-weight: 600; margin-left: 8px;58  }59  .app-bar .spacer { flex: 1; }60 61  .subheader {62    position: absolute;63    top: 280px;64    left: 0;65    width: 1080px;66    height: 130px;67    background: #fff;68    display: flex;69    align-items: center;70    padding: 0 32px;71    box-sizing: border-box;72    border-bottom: 1px solid #E0E0E0;73    color: #616161;74  }75  .item-count {76    font-size: 34px; color: #212121; font-weight: 600; letter-spacing: 1px;77  }78  .sort {79    margin-left: auto;80    display: flex; align-items: center; gap: 16px;81    font-size: 32px; text-transform: uppercase; letter-spacing: 1px;82  }83 84  /* List item */85  .list-item {86    position: absolute;87    top: 440px;88    left: 24px;89    right: 24px;90    height: 280px;91    display: flex;92    align-items: center;93    border-bottom: 1px solid #EEEEEE;94    padding-bottom: 24px;95  }96  .thumb {97    width: 420px; height: 236px;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    border-radius: 20px;101    display: flex; align-items: center; justify-content: center;102    color: #757575; font-size: 28px;103    position: relative;104    overflow: hidden;105    margin-right: 32px;106  }107  .duration {108    position: absolute;109    right: 12px; bottom: 12px;110    background: rgba(0,0,0,0.75);111    color: #fff;112    font-size: 28px;113    padding: 8px 14px;114    border-radius: 8px;115  }116  .item-text {117    flex: 1;118    display: flex;119    flex-direction: column;120    gap: 12px;121  }122  .item-title {123    font-size: 44px; font-weight: 600; color: #212121;124  }125  .item-meta {126    font-size: 30px; color: #757575;127  }128  .item-menu {129    width: 64px; height: 64px;130    display: flex; align-items: center; justify-content: center;131    margin-left: 12px;132  }133 134  /* Floating Action Button */135  .fab {136    position: absolute;137    right: 48px;138    bottom: 220px;139    width: 132px; height: 132px;140    background: #fff;141    border-radius: 50%;142    box-shadow: 0 10px 24px rgba(0,0,0,0.25);143    display: flex; align-items: center; justify-content: center;144    border: 1px solid #E0E0E0;145  }146 147  /* Gesture bar */148  .gesture {149    position: absolute;150    bottom: 0; left: 0;151    width: 1080px; height: 140px;152    background: #000;153    display: flex; align-items: center; justify-content: center;154  }155  .gesture .pill {156    width: 210px; height: 14px;157    background: #E8E8E8;158    border-radius: 7px;159    opacity: 0.9;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status bar -->167  <div class="status-bar">168    <div class="time">10:48</div>169    <div class="icons">170      <!-- Wi-Fi icon -->171      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">172        <path d="M12 18.5l1.6-1.6a2.3 2.3 0 00-3.2 0L12 18.5zM5 11.5a10 10 0 0114 0l-1.5 1.5a8 8 0 00-11 0L5 11.5zM2.5 8a13 13 0 0119 0l-1.6 1.6a11 11 0 00-15.8 0L2.5 8z"/>173      </svg>174      <!-- Battery icon -->175      <svg width="54" height="44" viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg">176        <rect x="2" y="5" width="24" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>177        <rect x="5" y="8" width="18" height="8" fill="#fff"/>178        <rect x="26" y="9" width="4" height="6" rx="1" fill="#fff"/>179      </svg>180    </div>181  </div>182 183  <!-- App bar -->184  <div class="app-bar">185    <button class="nav-btn" aria-label="Close">186      <svg width="44" height="44" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">187        <path d="M5 5 L19 19"/>188        <path d="M19 5 L5 19"/>189      </svg>190    </button>191    <div class="title">Yoga</div>192    <div class="spacer"></div>193    <button class="kebab-btn" aria-label="Menu">194      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">195        <circle cx="12" cy="5" r="2"/>196        <circle cx="12" cy="12" r="2"/>197        <circle cx="12" cy="19" r="2"/>198      </svg>199    </button>200  </div>201 202  <!-- Subheader -->203  <div class="subheader">204    <div class="item-count">1 ITEM</div>205    <div class="sort">206      <svg width="34" height="34" viewBox="0 0 24 24" fill="#757575">207        <path d="M7 10l5 5 5-5H7z"/>208      </svg>209      <span>DATE ADDED</span>210    </div>211  </div>212 213  <!-- List item -->214  <div class="list-item">215    <div class="thumb">216      <span>[IMG: Yoga pose video thumbnail]</span>217      <div class="duration">00:29</div>218    </div>219    <div class="item-text">220      <div class="item-title">Untitled</div>221      <div class="item-meta">0 views • 15 minutes ago</div>222    </div>223    <div class="item-menu">224      <svg width="40" height="40" viewBox="0 0 24 24" fill="#9E9E9E">225        <circle cx="12" cy="6" r="2"/>226        <circle cx="12" cy="12" r="2"/>227        <circle cx="12" cy="18" r="2"/>228      </svg>229    </div>230  </div>231 232  <!-- Floating Action Button -->233  <div class="fab" aria-label="New folder">234    <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#263238" stroke-width="1.8">235      <!-- folder -->236      <path d="M3 7h6l2 2h10v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" fill="none"/>237      <!-- plus -->238      <path d="M12 11v6M9 14h6" stroke="#263238" stroke-linecap="round"/>239    </svg>240  </div>241 242  <!-- Gesture bar -->243  <div class="gesture">244    <div class="pill"></div>245  </div>246 247</div>248</body>249</html>