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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0;21    width: 100%;22    height: 120px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    color: #616161;28    font-size: 42px;29    box-sizing: border-box;30  }31  .status-left, .status-right {32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .status-right svg { width: 54px; height: 54px; }37  .status-left svg { width: 48px; height: 48px; }38 39  /* Back arrow */40  .back-btn {41    position: absolute;42    top: 220px;43    left: 40px;44    width: 88px; height: 88px;45    display: flex;46    align-items: center; justify-content: center;47  }48  .back-btn svg { width: 76px; height: 76px; }49 50  /* Bottom bar */51  .bottom-bar {52    position: absolute;53    left: 0; right: 0;54    bottom: 160px; /* leave room for system nav */55    height: 220px;56    background: #FFFFFF;57    border-top: 1px solid #E0E0E0;58    box-sizing: border-box;59  }60  .progress-track {61    position: absolute;62    top: 0; left: 0;63    width: 100%;64    height: 18px;65    background: #E9E9E9;66  }67  .progress-fill {68    width: 68%;69    height: 100%;70    background: #2E64A2;71  }72  .nav-icons {73    position: absolute;74    bottom: 24px;75    left: 0; right: 0;76    display: flex;77    justify-content: space-around;78    align-items: center;79    padding: 0 40px;80  }81  .nav-item {82    position: relative;83    width: 120px; height: 120px;84    display: flex; align-items: center; justify-content: center;85  }86  .nav-item svg { width: 72px; height: 72px; }87  .icon-grey { stroke: #B3B3B3; fill: none; }88  .icon-black { stroke: #000000; fill: none; }89  .badge {90    position: absolute;91    top: 6px; right: 12px;92    min-width: 52px; height: 52px;93    padding: 0 6px;94    background: #1E5BB8;95    color: #fff;96    border-radius: 26px;97    display: flex; align-items: center; justify-content: center;98    font-size: 32px; font-weight: 700;99  }100 101  /* System navigation bar */102  .system-nav {103    position: absolute;104    left: 0; right: 0; bottom: 0;105    height: 160px;106    background: #000000;107    display: flex; align-items: center; justify-content: center;108  }109  .home-indicator {110    width: 320px; height: 18px;111    background: #D9D9D9;112    border-radius: 10px;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status Bar -->120  <div class="status-bar">121    <div class="status-left">122      <div>11:10</div>123      <!-- small triangular icon -->124      <svg viewBox="0 0 24 24">125        <path d="M4 5 L20 12 L4 19 Z" fill="#757575"></path>126      </svg>127    </div>128    <div class="status-right">129      <!-- WiFi -->130      <svg viewBox="0 0 24 24">131        <path d="M2 8c5-5 13-5 20 0" stroke="#757575" stroke-width="2" fill="none"/>132        <path d="M5 11c4-4 10-4 14 0" stroke="#757575" stroke-width="2" fill="none"/>133        <path d="M8 14c3-3 7-3 10 0" stroke="#757575" stroke-width="2" fill="none"/>134        <circle cx="12" cy="18" r="2" fill="#757575"/>135      </svg>136      <!-- Ring/signal icon -->137      <svg viewBox="0 0 24 24">138        <circle cx="12" cy="12" r="8" stroke="#757575" stroke-width="2" fill="none"/>139        <circle cx="12" cy="12" r="3" stroke="#757575" stroke-width="2" fill="none"/>140      </svg>141      <!-- Battery -->142      <svg viewBox="0 0 32 24">143        <rect x="2" y="4" width="24" height="16" rx="2" ry="2" stroke="#757575" stroke-width="2" fill="none"/>144        <rect x="26" y="9" width="4" height="6" rx="1" fill="#757575"/>145        <rect x="4" y="6" width="14" height="12" fill="#757575"/>146      </svg>147    </div>148  </div>149 150  <!-- Back Arrow -->151  <div class="back-btn">152    <svg viewBox="0 0 24 24">153      <path d="M15 5 L7 12 L15 19" stroke="#000000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154    </svg>155  </div>156 157  <!-- Bottom Navigation -->158  <div class="bottom-bar">159    <div class="progress-track">160      <div class="progress-fill"></div>161    </div>162 163    <div class="nav-icons">164      <!-- Home -->165      <div class="nav-item">166        <svg viewBox="0 0 24 24" class="icon-grey">167          <path d="M4 10 L12 4 L20 10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>168          <path d="M6 10 V20 H18 V10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>169        </svg>170      </div>171 172      <!-- Search/List (active) -->173      <div class="nav-item">174        <svg viewBox="0 0 24 24" class="icon-black">175          <circle cx="10" cy="10" r="5" stroke-width="2"></circle>176          <path d="M14 14 L20 20" stroke-width="2" stroke-linecap="round"></path>177          <path d="M3 4 H9" stroke-width="2" stroke-linecap="round"></path>178          <path d="M3 8 H7" stroke-width="2" stroke-linecap="round"></path>179          <path d="M3 12 H6" stroke-width="2" stroke-linecap="round"></path>180        </svg>181      </div>182 183      <!-- Chart -->184      <div class="nav-item">185        <svg viewBox="0 0 24 24" class="icon-grey">186          <path d="M5 20 V12" stroke-width="2" stroke-linecap="round"></path>187          <path d="M12 20 V8" stroke-width="2" stroke-linecap="round"></path>188          <path d="M19 20 V4" stroke-width="2" stroke-linecap="round"></path>189          <path d="M3 20 H21" stroke-width="2"></path>190        </svg>191      </div>192 193      <!-- Heart -->194      <div class="nav-item">195        <svg viewBox="0 0 24 24" class="icon-grey">196          <path d="M12 20 C12 20 5 15 5 10 A5 5 0 0 1 12 8 A5 5 0 0 1 19 10 C19 15 12 20 12 20 Z" stroke-width="2" fill="none"></path>197        </svg>198      </div>199 200      <!-- Basket with badge -->201      <div class="nav-item">202        <svg viewBox="0 0 24 24" class="icon-grey">203          <path d="M5 9 L19 9 L17 20 H7 Z" stroke-width="2" fill="none" stroke-linejoin="round"></path>204          <path d="M9 9 L9 6 M15 9 L15 6" stroke-width="2" stroke-linecap="round"></path>205          <path d="M8 6 C9 4 11 4 12 4 C13 4 15 4 16 6" stroke-width="2" fill="none" stroke-linecap="round"></path>206        </svg>207        <div class="badge">1</div>208      </div>209    </div>210  </div>211 212  <!-- System Navigation Bar -->213  <div class="system-nav">214    <div class="home-indicator"></div>215  </div>216 217</div>218</body>219</html>