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>Minimal Screen with Bottom Tabs</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14 15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Status bar */24  .statusbar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 100px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 40px;34    color: #666666;35    font-size: 36px;36    box-sizing: border-box;37  }38  .status-icons {39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .dot {44    width: 16px;45    height: 16px;46    background: #666;47    border-radius: 50%;48    display: inline-block;49  }50  .signal {51    width: 28px;52    height: 22px;53    border-right: 6px solid #777;54    border-top: 6px solid transparent;55    border-bottom: 6px solid transparent;56    transform: skewX(-20deg);57  }58  .battery {59    width: 44px;60    height: 24px;61    border: 3px solid #777;62    border-radius: 4px;63    position: relative;64  }65  .battery:after {66    content: "";67    position: absolute;68    right: -6px;69    top: 6px;70    width: 6px;71    height: 12px;72    background: #777;73    border-radius: 1px;74  }75  .battery:before {76    content: "";77    position: absolute;78    left: 4px;79    top: 4px;80    width: 28px;81    height: 16px;82    background: #777;83  }84 85  /* Back arrow */86  .back-arrow {87    position: absolute;88    top: 160px;89    left: 48px;90    width: 72px;91    height: 72px;92  }93 94  /* Progress bar just above bottom tabs */95  .progress-track {96    position: absolute;97    left: 0;98    right: 0;99    bottom: 290px; /* just above the tab bar */100    height: 12px;101    background: #E6E6E6;102  }103  .progress-fill {104    width: 78%;105    height: 100%;106    background: #0A5FB4; /* blue indicator */107  }108 109  /* Bottom navigation */110  .tabbar {111    position: absolute;112    bottom: 120px; /* leave room for gesture bar */113    left: 0;114    width: 100%;115    height: 160px;116    border-top: 1px solid #E0E0E0;117    background: #FFFFFF;118    display: flex;119    align-items: center;120    justify-content: space-around;121    box-sizing: border-box;122  }123  .tab {124    width: 140px;125    height: 120px;126    display: flex;127    align-items: center;128    justify-content: center;129  }130  .icon {131    width: 72px;132    height: 72px;133  }134  .icon-stroke {135    stroke: #BDBDBD;136    fill: none;137    stroke-width: 2.5;138    stroke-linecap: round;139    stroke-linejoin: round;140  }141  .icon-fill {142    fill: #BDBDBD;143  }144  .icon-active-stroke {145    stroke: #000000;146    fill: none;147    stroke-width: 3;148    stroke-linecap: round;149    stroke-linejoin: round;150  }151  .icon-active-fill {152    fill: #000000;153  }154 155  /* Gesture bar */156  .gesture {157    position: absolute;158    bottom: 48px;159    left: 340px;160    width: 400px;161    height: 14px;162    background: #7A7A7A;163    border-radius: 8px;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="statusbar">172    <div>10:27</div>173    <div class="status-icons">174      <div class="dot"></div>175      <div class="dot" style="width: 20px; height: 20px; background:#000;"></div>176      <div class="dot"></div>177      <div class="dot" style="background:#999;"></div>178      <div class="dot" style="width: 10px; height: 10px; background:#666;"></div>179      <div class="signal"></div>180      <div class="battery"></div>181    </div>182  </div>183 184  <!-- Back arrow -->185  <svg class="back-arrow" viewBox="0 0 24 24">186    <path d="M15 4 L7 12 L15 20" stroke="#000" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>187  </svg>188 189  <!-- Progress bar above tabs -->190  <div class="progress-track">191    <div class="progress-fill"></div>192  </div>193 194  <!-- Bottom tab bar -->195  <div class="tabbar">196    <!-- Home (inactive) -->197    <div class="tab">198      <svg class="icon" viewBox="0 0 24 24">199        <path class="icon-stroke" d="M3 11 L12 4 L21 11"></path>200        <path class="icon-stroke" d="M5 10 V20 H10 V14 H14 V20 H19 V10"></path>201      </svg>202    </div>203 204    <!-- Search (active) -->205    <div class="tab">206      <svg class="icon" viewBox="0 0 24 24">207        <circle class="icon-active-stroke" cx="11" cy="11" r="6"></circle>208        <line class="icon-active-stroke" x1="16.5" y1="16.5" x2="21" y2="21"></line>209        <line class="icon-active-stroke" x1="6" y1="6" x2="8" y2="6"></line>210        <line class="icon-active-stroke" x1="6" y1="8.5" x2="9.5" y2="8.5"></line>211      </svg>212    </div>213 214    <!-- Chart (inactive) -->215    <div class="tab">216      <svg class="icon" viewBox="0 0 24 24">217        <rect class="icon-stroke" x="3" y="3" width="18" height="18" rx="2"></rect>218        <rect class="icon-stroke" x="7" y="12" width="2.8" height="6"></rect>219        <rect class="icon-stroke" x="11" y="9" width="2.8" height="9"></rect>220        <rect class="icon-stroke" x="15" y="6" width="2.8" height="12"></rect>221      </svg>222    </div>223 224    <!-- Heart (inactive) -->225    <div class="tab">226      <svg class="icon" viewBox="0 0 24 24">227        <path class="icon-stroke" d="M12 20s-6-4-8-7.5C2 9 3.5 6.5 6.5 6.5c1.9 0 3.1 1.1 3.5 2 0.4-0.9 1.6-2 3.5-2 3 0 4.5 2.5 2.5 6  -2 3.5-8 7.5-8 7.5z"></path>228      </svg>229    </div>230 231    <!-- Bag (inactive) -->232    <div class="tab">233      <svg class="icon" viewBox="0 0 24 24">234        <path class="icon-stroke" d="M6 8 H18 L19.5 20 H4.5 Z"></path>235        <path class="icon-stroke" d="M9 8 V6a3 3 0 0 1 6 0v2"></path>236      </svg>237    </div>238  </div>239 240  <!-- Gesture bar -->241  <div class="gesture"></div>242 243</div>244</body>245</html>