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>Alibaba.com - Mobile UI</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: Roboto, Arial, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    height: 110px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #616161;27    font-size: 36px;28  }29  .status-left { display: flex; align-items: center; gap: 18px; }30  .status-right { display: flex; align-items: center; gap: 28px; }31  .icon {32    width: 40px;33    height: 40px;34  }35 36  /* App bar */37  .app-bar {38    height: 150px;39    display: flex;40    align-items: center;41    padding: 0 30px;42    box-shadow: 0 1px 0 #E0E0E0;43  }44  .back {45    width: 72px;46    height: 72px;47    margin-right: 18px;48  }49  .title {50    font-size: 54px;51    font-weight: 500;52    color: #3C3C3C;53  }54 55  /* Top progress indicator */56  .progress-wrap {57    height: 8px;58    box-shadow: 0 2px 5px rgba(0,0,0,0.05);59  }60  .progress-base {61    width: 100%;62    height: 8px;63    background: #EFEFEF;64  }65  .progress-bar {66    width: 68%;67    height: 8px;68    background: #E07A3A; /* orange */69  }70 71  /* Content area (blank page) */72  .content {73    height: 1990px; /* remaining space above gesture bar */74    background: #FFFFFF;75  }76 77  /* Bottom gesture/navigation bar */78  .gesture-bar {79    position: absolute;80    bottom: 0;81    left: 0;82    width: 1080px;83    height: 150px;84    background: #000000;85  }86  .gesture-pill {87    position: absolute;88    left: 50%;89    bottom: 40px;90    transform: translateX(-50%);91    width: 260px;92    height: 12px;93    background: #D9D9D9;94    border-radius: 12px;95  }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status Bar -->102  <div class="status-bar">103    <div class="status-left">104      <span>3:52</span>105      <!-- Minimal message icon -->106      <svg class="icon" viewBox="0 0 24 24">107        <rect x="2" y="4" width="20" height="16" rx="2" ry="2" fill="none" stroke="#757575" stroke-width="2"/>108        <path d="M3 6l9 6 9-6" fill="none" stroke="#757575" stroke-width="2"/>109      </svg>110      <!-- Download icon -->111      <svg class="icon" viewBox="0 0 24 24">112        <path d="M12 3v10" stroke="#757575" stroke-width="2" fill="none" stroke-linecap="round"/>113        <path d="M7 9l5 5 5-5" stroke="#757575" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>114        <rect x="4" y="18" width="16" height="3" fill="#757575"/>115      </svg>116    </div>117    <div class="status-right">118      <!-- Wi-Fi icon -->119      <svg class="icon" viewBox="0 0 24 24">120        <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round"/>121        <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round"/>122        <path d="M8 16c2-2 6-2 8 0" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round"/>123        <circle cx="12" cy="19" r="1.6" fill="#757575"/>124      </svg>125      <!-- Battery icon -->126      <svg class="icon" viewBox="0 0 26 24">127        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#757575" stroke-width="2"/>128        <rect x="4" y="8" width="14" height="8" fill="#757575"/>129        <rect x="22" y="9" width="2" height="6" fill="#757575"/>130      </svg>131    </div>132  </div>133 134  <!-- App Bar -->135  <div class="app-bar">136    <svg class="back" viewBox="0 0 24 24">137      <path d="M15 6L9 12l6 6" fill="none" stroke="#424242" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>138    </svg>139    <div class="title">Alibaba.com</div>140  </div>141 142  <!-- Progress -->143  <div class="progress-wrap">144    <div class="progress-base">145      <div class="progress-bar"></div>146    </div>147  </div>148 149  <!-- Blank Content Area -->150  <div class="content"></div>151 152  <!-- Bottom Gesture Bar -->153  <div class="gesture-bar">154    <div class="gesture-pill"></div>155  </div>156 157</div>158</body>159</html>