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>Black Screen 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: #000000;15    color: #ffffff;16    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;17  }18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 140px;24    padding: 24px 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    box-sizing: border-box;29  }30  .sb-left, .sb-right {31    display: flex;32    align-items: center;33  }34  .sb-left { gap: 32px; }35  .sb-right { gap: 28px; }36  .time {37    font-size: 64px;38    font-weight: 600;39    letter-spacing: 1px;40  }41  .icon-text {42    font-size: 56px;43    font-weight: 700;44    line-height: 1;45  }46  .home-indicator {47    position: absolute;48    bottom: 72px;49    left: 50%;50    transform: translateX(-50%);51    width: 420px;52    height: 18px;53    background: #EDEDED;54    border-radius: 24px;55    opacity: 0.95;56  }57</style>58</head>59<body>60<div id="render-target">61 62  <div class="status-bar">63    <div class="sb-left">64      <div class="time">2:22</div>65      <div class="icon-text">M</div>66      <!-- Sun icon -->67      <svg width="64" height="64" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-label="Sun icon">68        <circle cx="12" cy="12" r="4" fill="none" stroke="#FFFFFF" stroke-width="2"/>69        <line x1="12" y1="1.5" x2="12" y2="5" stroke="#FFFFFF" stroke-width="2"/>70        <line x1="12" y1="19" x2="12" y2="22.5" stroke="#FFFFFF" stroke-width="2"/>71        <line x1="1.5" y1="12" x2="5" y2="12" stroke="#FFFFFF" stroke-width="2"/>72        <line x1="19" y1="12" x2="22.5" y2="12" stroke="#FFFFFF" stroke-width="2"/>73        <line x1="4.2" y1="4.2" x2="6.6" y2="6.6" stroke="#FFFFFF" stroke-width="2"/>74        <line x1="17.4" y1="17.4" x2="19.8" y2="19.8" stroke="#FFFFFF" stroke-width="2"/>75        <line x1="17.4" y1="6.6" x2="19.8" y2="4.2" stroke="#FFFFFF" stroke-width="2"/>76        <line x1="4.2" y1="19.8" x2="6.6" y2="17.4" stroke="#FFFFFF" stroke-width="2"/>77      </svg>78    </div>79 80    <div class="sb-right">81      <!-- WiFi icon -->82      <svg width="64" height="64" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" aria-label="WiFi icon">83        <path d="M2 8C6 4 16 4 20 8" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>84        <path d="M5 11C8.2 8.5 13.8 8.5 17 11" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>85        <path d="M8 14.2C9.7 12.9 12.3 12.9 14 14.2" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>86        <circle cx="11" cy="17.2" r="1.8" fill="#FFFFFF"/>87      </svg>88 89      <!-- Battery with lightning icon -->90      <svg width="64" height="64" viewBox="0 0 26 22" xmlns="http://www.w3.org/2000/svg" aria-label="Battery icon">91        <rect x="2" y="5" width="18" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>92        <rect x="21.2" y="8" width="3" height="6" fill="#FFFFFF"/>93        <path d="M11 6 L8 11 L11 11 L9 16 L15 10 L12 10 Z" fill="#FFFFFF"/>94      </svg>95    </div>96  </div>97 98  <!-- Empty content area is intentionally black to match screenshot -->99 100  <div class="home-indicator"></div>101</div>102</body>103</html>