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>E-commerce Home UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FAFAFA;15  }16 17  /* Top status bar */18  .status-bar {19    height: 120px;20    background: #2E2D33;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 32px;25    font-size: 40px;26    box-sizing: border-box;27  }28  .status-left { display: flex; align-items: center; gap: 20px; }29  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; opacity: 0.85; }30 31  /* Header with search */32  .header {33    height: 120px;34    background: #2E2D33;35    display: flex;36    align-items: center;37    padding: 0 28px;38    box-sizing: border-box;39    gap: 24px;40  }41  .icon-btn {42    width: 72px; height: 72px;43    display: flex; justify-content: center; align-items: center;44    border-radius: 36px;45    background: rgba(255,255,255,0.08);46  }47  .search-bar {48    flex: 1;49    height: 90px;50    background: #FFFFFF;51    border-radius: 44px;52    display: flex; align-items: center;53    padding: 0 30px;54    box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;55  }56  .search-bar input {57    border: none; outline: none; font-size: 36px; color: #555; flex: 1; background: transparent;58  }59  .badge-dot, .badge-count {60    position: absolute; top: -6px; right: -6px;61    background: #FF4D4F; color: #fff;62    width: 24px; height: 24px; border-radius: 50%;63    display: flex; align-items: center; justify-content: center;64    font-size: 22px; line-height: 1;65  }66  .badge-count { width: 40px; height: 40px; font-size: 26px; top: -10px; right: -10px; }67 68  /* Tabs */69  .tabs {70    background: #FFFFFF;71    display: flex;72    align-items: center;73    gap: 60px;74    padding: 24px 28px;75    box-sizing: border-box;76    border-bottom: 1px solid #eee;77    font-size: 40px;78    color: #666;79  }80  .tab-active { color: #222; position: relative; font-weight: 600; }81  .tab-active::after {82    content: ""; position: absolute; left: 0; bottom: -12px;83    width: 56px; height: 8px; background: #FF7A00; border-radius: 4px;84  }85 86  /* Quick actions row */87  .quick-actions {88    background: #FFFFFF;89    padding: 34px 28px 24px;90    display: flex; gap: 38px;91  }92  .qa-item { width: 160px; display: flex; flex-direction: column; align-items: center; }93  .qa-circle {94    width: 150px; height: 150px; border-radius: 75px;95    display: flex; align-items: center; justify-content: center;96    color: #fff; font-weight: 700; font-size: 32px;97    position: relative;98  }99  .qa-label { margin-top: 18px; font-size: 32px; color: #333; text-align: center; }100