GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - PowerPoint New</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #0f0f10;13    font-family: Arial, Helvetica, sans-serif;14    color: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 0 56px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #eaeaea;25    font-size: 52px;26    letter-spacing: 1px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 36px;32  }33  .icon {34    display: inline-flex;35    align-items: center;36    justify-content: center;37  }38  .icon svg { width: 56px; height: 56px; }39 40  /* Header */41  .header {42    height: 160px;43    display: flex;44    align-items: center;45    padding: 0 56px;46    border-bottom: 1px solid #1d1d1f;47  }48  .back-btn {49    width: 100px;50    height: 100px;51    display: inline-flex;52    align-items: center;53    justify-content: center;54    margin-right: 24px;55  }56  .title {57    font-size: 84px;58    font-weight: 600;59    color: #f5f5f5;60  }61 62  /* Content area */63  .content {64    padding: 48px 56px 0 56px;65  }66  .section-title {67    font-size: 56px;68    color: #cfcfcf;69    margin-bottom: 24px;70  }71  .dropdown {72    width: 1020px;73    height: 120px;74    border: 2px solid #3a3a3c;75    border-radius: 18px;76    background: #111214;77    display: flex;78    align-items: center;79    justify-content: space-between;80    padding: 0 36px 0 40px;81    color: #e9e9e9;82    font-size: 50px;83  }84  .dropdown .caret svg { width: 40px; height: 40px; }85 86  /* Templates list */87  .templates {88    margin-top: 56px;89  }90  .template-card {91    margin-bottom: 64px;92  }93  .thumb {94    width: 1260px;95    height: 560px;96    border-radius: 18px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #757575;103    font-size: 44px;104    text-align: center;105  }106  .caption {107    font-size: 56px;108    margin-top: 24px;109    color: #eaeaea;110  }111 112  /* Bottom progress bar */113  .progress-wrap {114    position: absolute;115    bottom: 170px;116    width: 100%;117    display: flex;118    justify-content: center;119  }120  .progress {121    width: 860px;122    height: 34px;123    background: linear-gradient(90deg, #ececec 0%, #d9d9d9 50%, #ececec 100%);124    border-radius: 18px;125    opacity: 0.9;126  }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status Bar -->133  <div class="status-bar">134    <div class="time">8:41</div>135    <div class="status-icons">136      <!-- Simple signal icon -->137      <div class="icon">138        <svg viewBox="0 0 64 64">139          <path d="M6 46 a26 26 0 0 1 52 0" stroke="#ffffff" stroke-width="6" fill="none"/>140          <path d="M16 46 a16 16 0 0 1 32 0" stroke="#ffffff" stroke-width="6" fill="none"/>141          <circle cx="32" cy="48" r="5" fill="#ffffff"/>142        </svg>143      </div>144      <!-- Wi-Fi icon -->145      <div class="icon">146        <svg viewBox="0 0 64 64">147          <path d="M8 24 a32 32 0 0 1 48 0" stroke="#ffffff" stroke-width="6" fill="none"/>148          <path d="M16 32 a24 24 0 0 1 32 0" stroke="#ffffff" stroke-width="6" fill="none"/>149          <path d="M24 40 a16 16 0 0 1 16 0" stroke="#ffffff" stroke-width="6" fill="none"/>150          <circle cx="32" cy="48" r="5" fill="#ffffff"/>151        </svg>152      </div>153      <!-- Battery icon -->154      <div class="icon">155        <svg viewBox="0 0 72 64">156          <rect x="6" y="16" width="52" height="32" rx="6" ry="6" stroke="#ffffff" stroke-width="6" fill="none"/>157          <rect x="14" y="24" width="36" height="16" fill="#ffffff"/>158          <rect x="60" y="24" width="6" height="16" fill="#ffffff"/>159        </svg>160      </div>161    </div>162  </div>163 164  <!-- Header -->165  <div class="header">166    <div class="back-btn">167      <svg viewBox="0 0 64 64">168        <path d="M40 10 L16 32 L40 54" stroke="#ffffff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>169      </svg>170    </div>171    <div class="title">New</div>172  </div>173 174  <!-- Content -->175  <div class="content">176    <div class="section-title">Create in</div>177    <div class="dropdown">178      <div>This device > Documents</div>179      <div class="caret">180        <svg viewBox="0 0 24 24">181          <path d="M4 8 L12 16 L20 8" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>182        </svg>183      </div>184    </div>185 186    <div class="templates">187      <div class="template-card">188        <div class="thumb">[IMG: Blank slide thumbnail]</div>189        <div class="caption">Blank presentation</div>190      </div>191 192      <div class="template-card">193        <div class="thumb">[IMG: Madison theme thumbnail]</div>194        <div class="caption">Madison</div>195      </div>196 197      <div class="template-card">198        <div class="thumb">[IMG: Atlas theme thumbnail]</div>199        <div class="caption">Atlas</div>200      </div>201 202      <div class="template-card">203        <div class="thumb">[IMG: Take a tour thumbnail]</div>204        <div class="caption">Welcome to PowerPoint</div>205      </div>206    </div>207  </div>208 209  <!-- Bottom progress bar -->210  <div class="progress-wrap">211    <div class="progress"></div>212  </div>213 214</div>215</body>216</html>