GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Book Report</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    position: relative;14    overflow: hidden;15    width: 1080px;16    height: 2400px;17    background: #121212;18    color: #EDEDED;19  }20 21  /* Status Bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    padding: 0 36px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #EDEDED;34    font-size: 40px;35    letter-spacing: 0.5px;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .status-icon {43    display: inline-flex;44    align-items: center;45    justify-content: center;46  }47 48  /* App Bar */49  .app-bar {50    position: absolute;51    top: 110px;52    left: 0;53    width: 1080px;54    height: 140px;55    background: #1E1E1E;56    display: flex;57    align-items: center;58    padding: 0 24px;59    box-sizing: border-box;60    border-bottom: 1px solid #2a2a2a;61  }62  .app-title {63    font-size: 44px;64    font-weight: 600;65    margin-left: 24px;66    color: #EDEDED;67  }68  .app-actions {69    margin-left: auto;70    display: flex;71    align-items: center;72    gap: 16px;73  }74 75  /* List Item */76  .list {77    position: absolute;78    top: 290px;79    left: 0;80    width: 100%;81    padding: 0 36px;82    box-sizing: border-box;83  }84  .list-item {85    display: flex;86    align-items: center;87    width: 100%;88    height: 160px;89    border-radius: 12px;90  }91  .ppt-icon {92    width: 86px;93    height: 86px;94    border-radius: 16px;95    background: #F28C3A;96    color: #212121;97    font-weight: 800;98    font-size: 44px;99    display: flex;100    align-items: center;101    justify-content: center;102    margin-right: 28px;103  }104  .item-texts {105    display: flex;106    flex-direction: column;107    justify-content: center;108  }109  .item-title {110    font-size: 40px;111    color: #FFFFFF;112    margin-bottom: 10px;113  }114  .item-subtitle {115    font-size: 30px;116    color: #A1A1A1;117  }118  .item-menu {119    margin-left: auto;120  }121 122  /* Gesture bar */123  .gesture-bar {124    position: absolute;125    bottom: 30px;126    left: 50%;127    transform: translateX(-50%);128    width: 460px;129    height: 12px;130    background: #EDEDED;131    border-radius: 12px;132    opacity: 0.9;133  }134 135  /* Icon button styles */136  .icon-btn {137    width: 80px;138    height: 80px;139    display: inline-flex;140    align-items: center;141    justify-content: center;142    border-radius: 40px;143  }144  .icon svg {145    display: block;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status Bar -->153  <div class="status-bar">154    <div class="status-left">8:57</div>155    <div class="status-right">156      <!-- Simple cellular dot -->157      <div class="status-icon">158        <svg width="26" height="26" viewBox="0 0 24 24">159          <circle cx="12" cy="12" r="3" fill="#EDEDED"></circle>160        </svg>161      </div>162      <!-- Wi-Fi icon -->163      <div class="status-icon">164        <svg width="36" height="24" viewBox="0 0 24 24">165          <path d="M2 8c5-4 15-4 20 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>166          <path d="M5 12c4-3 10-3 14 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>167          <path d="M8.5 15.5c2.5-2 4.5-2 7 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>168          <circle cx="12" cy="19" r="1.8" fill="#EDEDED"/>169        </svg>170      </div>171      <!-- Battery icon -->172      <div class="status-icon">173        <svg width="46" height="24" viewBox="0 0 28 16">174          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#EDEDED" stroke-width="2" fill="none"></rect>175          <rect x="24" y="6" width="3" height="4" fill="#EDEDED"></rect>176          <rect x="3" y="4" width="16" height="8" fill="#EDEDED"></rect>177        </svg>178      </div>179    </div>180  </div>181 182  <!-- App Bar -->183  <div class="app-bar">184    <div class="icon-btn">185      <svg width="48" height="48" viewBox="0 0 24 24">186        <path d="M15 6 L9 12 L15 18" stroke="#FFFFFF" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>187      </svg>188    </div>189    <div class="app-title">Book Report.pptx</div>190    <div class="app-actions">191      <div class="icon-btn">192        <svg width="44" height="44" viewBox="0 0 24 24">193          <path d="M6 6 L18 18" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round"/>194          <path d="M18 6 L6 18" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round"/>195        </svg>196      </div>197    </div>198  </div>199 200  <!-- File list -->201  <div class="list">202    <div class="list-item">203      <div class="ppt-icon">P</div>204      <div class="item-texts">205        <div class="item-title">Book report.pptx</div>206        <div class="item-subtitle">Modified Oct 16</div>207      </div>208      <div class="item-menu icon-btn">209        <svg width="36" height="36" viewBox="0 0 24 24">210          <circle cx="5" cy="12" r="2" fill="#BDBDBD"/>211          <circle cx="12" cy="12" r="2" fill="#BDBDBD"/>212          <circle cx="19" cy="12" r="2" fill="#BDBDBD"/>213        </svg>214      </div>215    </div>216  </div>217 218  <!-- Gesture Bar -->219  <div class="gesture-bar"></div>220 221</div>222</body>223</html>