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>Recent Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 96px;24    background: #1f1f1f;25    color: #ffffff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    font-size: 34px;32    letter-spacing: 0.5px;33  }34  .status-icons { display: flex; align-items: center; gap: 24px; }35  .dot { width: 10px; height: 10px; background: #bdbdbd; border-radius: 50%; }36 37  /* App bar */38  .app-bar {39    position: absolute;40    top: 96px;41    left: 0;42    width: 100%;43    height: 220px;44    background: #1f1f1f;45    display: flex;46    align-items: center;47    justify-content: space-between;48    padding: 0 40px;49    box-sizing: border-box;50  }51  .app-left {52    display: flex;53    align-items: center;54    gap: 28px;55  }56  .avatar {57    width: 92px;58    height: 92px;59    border-radius: 50%;60    background: #2b2b2b;61    border: 2px solid #555;62    display: flex;63    align-items: center;64    justify-content: center;65  }66  .title {67    color: #ffffff;68    font-size: 72px;69    font-weight: 600;70  }71  .app-actions {72    display: flex;73    align-items: center;74    gap: 36px;75  }76  .icon {77    width: 52px;78    height: 52px;79  }80  .icon svg { width: 100%; height: 100%; }81 82  /* Main content */83  .content {84    position: absolute;85    top: 540px;86    left: 0;87    width: 100%;88    padding: 0 60px;89    box-sizing: border-box;90    text-align: center;91    color: #bdbdbd;92  }93  .illustration {94    width: 560px;95    height: 330px;96    margin: 0 auto 60px auto;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    color: #757575;100    display: flex;101    align-items: center;102    justify-content: center;103    border-radius: 16px;104  }105  .content p {106    font-size: 38px;107    line-height: 1.35;108    margin: 0 0 40px 0;109    color: #d0d0d0;110  }111  .btn {112    display: inline-block;113    background: #d66c2e;114    color: #ffffff;115    padding: 26px 46px;116    font-size: 40px;117    border-radius: 16px;118    text-decoration: none;119    box-shadow: 0 4px 0 rgba(0,0,0,0.35) inset;120  }121 122  /* Bottom navigation */123  .bottom-nav {124    position: absolute;125    bottom: 120px;126    left: 0;127    width: 100%;128    height: 200px;129    background: #1f1f1f;130    display: flex;131    align-items: center;132    justify-content: space-around;133    box-sizing: border-box;134    padding: 20px 0;135    color: #e0e0e0;136  }137  .nav-item {138    width: 33.33%;139    text-align: center;140  }141  .nav-item .nav-icon { width: 58px; height: 58px; margin: 0 auto 12px auto; }142  .nav-label { font-size: 34px; }143  .active .nav-label { color: #d66c2e; }144  .active svg { stroke: #d66c2e; }145 146  /* Gesture bar */147  .gesture {148    position: absolute;149    bottom: 50px;150    left: 50%;151    transform: translateX(-50%);152    width: 240px;153    height: 12px;154    background: #ffffff;155    border-radius: 6px;156    opacity: 0.9;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status Bar -->164  <div class="status-bar">165    <div>9:41</div>166    <div class="status-icons">167      <!-- simple placeholder indicators -->168      <div class="dot"></div>169      <svg width="36" height="36" viewBox="0 0 24 24">170        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>171        <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>172      </svg>173      <svg width="36" height="36" viewBox="0 0 24 24">174        <path d="M3 10h18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>175        <path d="M3 14h18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>176      </svg>177      <svg width="36" height="36" viewBox="0 0 24 24">178        <path d="M3 7h14l4 4v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>179      </svg>180      <svg width="32" height="32" viewBox="0 0 24 24">181        <path d="M4 12h16" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"></path>182      </svg>183      <svg width="32" height="32" viewBox="0 0 24 24">184        <path d="M20 7v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7" fill="none" stroke="#fff" stroke-width="2"></path>185      </svg>186    </div>187  </div>188 189  <!-- App Bar -->190  <div class="app-bar">191    <div class="app-left">192      <div class="avatar">193        <svg width="56" height="56" viewBox="0 0 24 24">194          <circle cx="12" cy="9" r="4" fill="none" stroke="#9e9e9e" stroke-width="2"></circle>195          <path d="M4 20c2.5-4 13.5-4 16 0" fill="none" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"></path>196        </svg>197      </div>198      <div class="title">Recent</div>199    </div>200    <div class="app-actions">201      <!-- Diamond -->202      <div class="icon">203        <svg viewBox="0 0 24 24">204          <path d="M12 3l5 5-5 13-5-13 5-5z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"></path>205          <path d="M7 8h10" stroke="#ffffff" stroke-width="2"></path>206        </svg>207      </div>208      <!-- Search -->209      <div class="icon">210        <svg viewBox="0 0 24 24">211          <circle cx="11" cy="11" r="6" fill="none" stroke="#ffffff" stroke-width="2"></circle>212          <path d="M20 20l-5-5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>213        </svg>214      </div>215      <!-- Plus -->216      <div class="icon">217        <svg viewBox="0 0 24 24">218          <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>219        </svg>220      </div>221    </div>222  </div>223 224  <!-- Main Content -->225  <div class="content">226    <div class="illustration">[IMG: Orange folder with clouds illustration]</div>227    <p>Access your documents from any device with OneDrive</p>228    <a class="btn" href="#">Sign In</a>229  </div>230 231  <!-- Bottom Navigation -->232  <div class="bottom-nav">233    <div class="nav-item active">234      <div class="nav-icon">235        <svg viewBox="0 0 24 24">236          <circle cx="12" cy="12" r="8" fill="none" stroke="#999" stroke-width="2"></circle>237          <path d="M12 8v5l3 2" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round"></path>238        </svg>239      </div>240      <div class="nav-label">Recent</div>241    </div>242    <div class="nav-item">243      <div class="nav-icon">244        <svg viewBox="0 0 24 24">245          <circle cx="8" cy="10" r="3" fill="none" stroke="#e0e0e0" stroke-width="2"></circle>246          <circle cx="16" cy="10" r="3" fill="none" stroke="#e0e0e0" stroke-width="2"></circle>247          <path d="M3 19c3-5 15-5 18 0" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round"></path>248        </svg>249      </div>250      <div class="nav-label">Shared</div>251    </div>252    <div class="nav-item">253      <div class="nav-icon">254        <svg viewBox="0 0 24 24">255          <path d="M3 7h9l2 2h7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linejoin="round"></path>256        </svg>257      </div>258      <div class="nav-label">Open</div>259    </div>260  </div>261 262  <!-- Gesture bar -->263  <div class="gesture"></div>264 265</div>266</body>267</html>