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>Bag - Empty</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #2A2A2A;27    color: #fff;28  }29  .status-content {30    position: absolute;31    left: 34px;32    right: 34px;33    top: 26px;34    height: 68px;35    display: flex;36    align-items: center;37    justify-content: space-between;38    font-weight: 600;39  }40  .status-left {41    display: flex;42    align-items: center;43    gap: 22px;44    font-size: 42px;45  }46  .status-right {47    display: flex;48    align-items: center;49    gap: 26px;50  }51  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 4; }52 53  /* Promo banner */54  .promo {55    position: absolute;56    top: 120px;57    left: 0;58    width: 1080px;59    height: 160px;60    background: #86D4E8;61    color: #0B0B0B;62  }63  .promo .inner {64    position: absolute;65    left: 24px;66    right: 24px;67    top: 0;68    bottom: 0;69    display: flex;70    align-items: center;71    justify-content: space-between;72  }73  .promo .text {74    flex: 1;75    text-align: center;76    font-size: 36px;77    line-height: 1.2;78    font-weight: 600;79  }80  .promo .action {81    color: #005EA6;82    text-decoration: underline;83    font-weight: 700;84  }85  .promo-btn {86    width: 66px;87    height: 66px;88    border-radius: 33px;89    background: rgba(0,0,0,0.12);90    display: flex;91    align-items: center;92    justify-content: center;93  }94  .promo-btn svg { width: 28px; height: 28px; fill: #000; }95 96  /* App header */97  .header {98    position: absolute;99    top: 280px;100    left: 0;101    width: 1080px;102    height: 160px;103    background: #C81423;104    color: #fff;105  }106  .header .inner {107    position: absolute;108    left: 24px;109    right: 24px;110    top: 0;111    bottom: 0;112    display: flex;113    align-items: center;114    justify-content: space-between;115  }116  .header-left {117    display: flex;118    align-items: center;119    gap: 26px;120  }121  .back-btn svg { width: 72px; height: 72px; stroke: #fff; stroke-width: 10; fill: none; }122  .title {123    font-size: 56px;124    font-weight: 700;125    letter-spacing: 0.2px;126  }127  .header-actions {128    display: flex;129    align-items: center;130    gap: 34px;131  }132  .action-icon {133    width: 84px;134    height: 84px;135    display: flex;136    align-items: center;137    justify-content: center;138  }139  .action-icon svg { width: 70px; height: 70px; stroke: #fff; stroke-width: 8; fill: none; }140 141  /* Empty state */142  .content {143    position: absolute;144    top: 440px; /* below header */145    bottom: 120px; /* above system nav */146    left: 0;147    right: 0;148    background: #FFFFFF;149    display: flex;150    align-items: center;151    justify-content: center;152    text-align: center;153  }154  .empty-text {155    color: #9E9E9E;156    font-size: 60px;157    line-height: 1.4;158    font-weight: 600;159  }160 161  /* System navigation bar */162  .sys-nav {163    position: absolute;164    bottom: 0;165    left: 0;166    width: 1080px;167    height: 120px;168    background: #000000;169  }170  .nav-pill {171    position: absolute;172    left: 50%;173    top: 38px;174    transform: translateX(-50%);175    width: 240px;176    height: 12px;177    border-radius: 12px;178    background: #E0E0E0;179    opacity: 0.95;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status Bar -->187  <div class="status-bar">188    <div class="status-content">189      <div class="status-left">190        <div>2:01</div>191        <div class="status-icon">192          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>193        </div>194        <div class="status-icon">195          <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16"/></svg>196        </div>197        <div class="status-icon">198          <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/></svg>199        </div>200      </div>201      <div class="status-right">202        <div class="status-icon">203          <svg viewBox="0 0 24 24"><path d="M12 2l10 10-10 10"/></svg>204        </div>205        <div class="status-icon">206          <svg viewBox="0 0 24 24"><path d="M3 12h18"/><path d="M12 3v18"/></svg>207        </div>208      </div>209    </div>210  </div>211 212  <!-- Promo Banner -->213  <div class="promo">214    <div class="inner">215      <div class="promo-btn">216        <svg viewBox="0 0 24 24"><path d="M15 5L8 12l7 7"/></svg>217      </div>218      <div class="text">Use code NEW10 and get addn. 10% off on cart value Rs. 2099 and above!! <span class="action">SHOP NOW</span></div>219      <div class="promo-btn">220        <svg viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>221      </div>222    </div>223  </div>224 225  <!-- Header -->226  <div class="header">227    <div class="inner">228      <div class="header-left">229        <div class="back-btn">230          <svg viewBox="0 0 100 100"><path d="M65 20 L35 50 L65 80"/></svg>231        </div>232        <div class="title">Bag</div>233      </div>234      <div class="header-actions">235        <div class="action-icon">236          <svg viewBox="0 0 24 24">237            <circle cx="11" cy="11" r="7"/>238            <path d="M20 20l-4-4"/>239          </svg>240        </div>241        <div class="action-icon">242          <svg viewBox="0 0 24 24">243            <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/>244          </svg>245        </div>246        <div class="action-icon">247          <svg viewBox="0 0 24 24">248            <rect x="5" y="8" width="14" height="12" rx="2"/>249            <path d="M9 8V6a3 3 0 0 1 6 0v2"/>250          </svg>251        </div>252      </div>253    </div>254  </div>255 256  <!-- Content -->257  <div class="content">258    <div class="empty-text">259      No bag available.<br/>Please add an Product260    </div>261  </div>262 263  <!-- System Navigation -->264  <div class="sys-nav">265    <div class="nav-pill"></div>266  </div>267 268</div>269</body>270</html>