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>Mobile UI - Discover Skeleton</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 160px;24    background: #8f8e93;25    color: #fff;26  }27  .status-inner {28    position: absolute;29    top: 56px;30    left: 40px;31    right: 40px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    font-size: 44px;36    letter-spacing: 1px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .icon {44    display: inline-flex;45    width: 48px;46    height: 48px;47  }48 49  /* Content area */50  .content {51    position: absolute;52    top: 160px;53    left: 0;54    right: 0;55    bottom: 370px; /* leave space for bottom nav + gesture */56    overflow: hidden;57    padding: 40px 28px 40px 28px;58  }59  .title-bar {60    width: 520px;61    height: 52px;62    background: #e9e9e9;63    border-radius: 6px;64    margin: 16px 0 20px 0;65  }66  .img-placeholder {67    width: 100%;68    background: #E0E0E0;69    border: 1px solid #BDBDBD;70    color: #757575;71    height: 720px;72    border-radius: 8px;73    display: flex;74    align-items: center;75    justify-content: center;76    font-size: 40px;77  }78  .img-medium { height: 480px; }79  .section { margin-bottom: 70px; }80 81  /* Bottom navigation */82  .bottom-nav {83    position: absolute;84    left: 0;85    width: 100%;86    height: 250px;87    bottom: 120px; /* above gesture area */88    background: #fafafa;89    border-top: 1px solid #e4e4e4;90    display: flex;91    align-items: center;92    justify-content: space-around;93  }94  .tab {95    width: 20%;96    text-align: center;97    color: #b5b5b5;98  }99  .tab-label {100    margin-top: 16px;101    font-size: 34px;102  }103  .tab .tab-icon {104    width: 96px; height: 96px; margin: 0 auto;105    display: flex; align-items: center; justify-content: center;106  }107  .active {108    color: #38aaf4;109  }110  .active .pill {111    width: 96px; height: 96px; background: #8fd3ff;112    border-radius: 50%;113    display: flex; align-items: center; justify-content: center;114  }115 116  /* Profile notification dot */117  .notif {118    position: absolute;119    right: 82px;120    top: 38px;121    width: 20px; height: 20px;122    background: #ff3b30; border-radius: 50%;123  }124 125  /* Gesture area */126  .gesture-area {127    position: absolute;128    left: 0;129    bottom: 0;130    width: 100%;131    height: 120px;132    background: #000;133  }134  .gesture-pill {135    width: 280px;136    height: 18px;137    background: #d9d9d9;138    border-radius: 12px;139    position: absolute;140    left: 50%;141    top: 50%;142    transform: translate(-50%, -50%);143    opacity: 0.9;144  }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status Bar -->151  <div class="status-bar">152    <div class="status-inner">153      <div style="display:flex;align-items:center;gap:18px;">154        <span>3:49</span>155        <!-- Simple Play icon -->156        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">157          <path d="M8 5l10 7-10 7z"></path>158        </svg>159      </div>160      <div class="status-right">161        <!-- Location pin -->162        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">163          <path d="M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z"></path>164        </svg>165        <!-- WiFi -->166        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">167          <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0"></path>168          <path d="M12 18a2 2 0 011.4.6L12 20l-1.4-1.4A2 2 0 0112 18z"></path>169          <path d="M4.5 12.5a11 11 0 0115 0l-1.4 1.4a9 9 0 00-12.2 0L4.5 12.5z"></path>170          <path d="M8.5 16.5a6 6 0 018 0l-1.4 1.4a4 4 0 00-5.2 0l-1.4-1.4z"></path>171        </svg>172        <!-- Battery -->173        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">174          <rect x="2" y="6" width="18" height="12" rx="2"></rect>175          <rect x="20" y="10" width="2" height="4"></rect>176          <rect x="4" y="8" width="10" height="8" fill="#ffffff"></rect>177        </svg>178      </div>179    </div>180  </div>181 182  <!-- Content -->183  <div class="content">184    <div class="section" style="margin-top:40px;">185      <div class="title-bar"></div>186      <div class="img-placeholder">[IMG: Featured Workout Banner]</div>187    </div>188 189    <div class="section">190      <div class="title-bar"></div>191      <div class="img-placeholder img-medium">[IMG: Recommended Program]</div>192    </div>193 194    <div class="section">195      <div class="title-bar"></div>196      <div class="img-placeholder img-medium">[IMG: Popular Challenge]</div>197    </div>198  </div>199 200  <!-- Bottom Navigation -->201  <div class="bottom-nav">202    <div class="tab active">203      <div class="tab-icon">204        <div class="pill">205          <svg viewBox="0 0 24 24" width="44" height="44" fill="#ffffff">206            <circle cx="12" cy="12" r="9" fill="none" stroke="#ffffff" stroke-width="2"></circle>207            <path d="M12 6l3 4-4 3z" fill="#ffffff"></path>208          </svg>209        </div>210      </div>211      <div class="tab-label">Discover</div>212    </div>213 214    <div class="tab">215      <div class="tab-icon">216        <svg viewBox="0 0 24 24" width="64" height="64" fill="#b5b5b5">217          <rect x="3" y="3" width="18" height="18" rx="3" fill="none" stroke="#b5b5b5" stroke-width="2"></rect>218          <path d="M7 12l3 3 7-7" stroke="#b5b5b5" stroke-width="2" fill="none"></path>219        </svg>220      </div>221      <div class="tab-label">Workout</div>222    </div>223 224    <div class="tab">225      <div class="tab-icon">226        <svg viewBox="0 0 24 24" width="64" height="64">227          <rect x="2" y="9" width="4" height="6" fill="#b5b5b5"></rect>228          <rect x="18" y="9" width="4" height="6" fill="#b5b5b5"></rect>229          <rect x="6" y="11" width="12" height="2" fill="#b5b5b5"></rect>230        </svg>231      </div>232      <div class="tab-label">Exercises</div>233    </div>234 235    <div class="tab">236      <div class="tab-icon">237        <svg viewBox="0 0 24 24" width="64" height="64" fill="#b5b5b5">238          <rect x="3" y="4" width="18" height="17" rx="2" fill="none" stroke="#b5b5b5" stroke-width="2"></rect>239          <rect x="7" y="2" width="2" height="4" fill="#b5b5b5"></rect>240          <rect x="15" y="2" width="2" height="4" fill="#b5b5b5"></rect>241          <rect x="7" y="9" width="3" height="3" fill="#b5b5b5"></rect>242          <rect x="12" y="9" width="3" height="3" fill="#b5b5b5"></rect>243          <rect x="7" y="14" width="3" height="3" fill="#b5b5b5"></rect>244        </svg>245      </div>246      <div class="tab-label">Progress</div>247    </div>248 249    <div class="tab" style="position:relative;">250      <div class="tab-icon">251        <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#b5b5b5" stroke-width="2">252          <circle cx="12" cy="8" r="4"></circle>253          <path d="M4 20c2-4 14-4 16 0" stroke-linecap="round"></path>254        </svg>255      </div>256      <div class="tab-label">Profile</div>257      <span class="notif"></span>258    </div>259  </div>260 261  <!-- Gesture area -->262  <div class="gesture-area">263    <div class="gesture-pill"></div>264  </div>265 266</div>267</body>268</html>