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 with Status Bar</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, Helvetica, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #000000;20    color: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 120px;30    padding: 28px 36px 0 36px;31    box-sizing: border-box;32    display: flex;33    align-items: center;34    justify-content: space-between;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .time {42    font-size: 48px;43    font-weight: 600;44    letter-spacing: 1px;45    color: #ffffff;46  }47  .icon-row {48    display: flex;49    align-items: center;50    gap: 22px;51    opacity: 0.95;52  }53  .icon {54    width: 34px;55    height: 34px;56    display: inline-flex;57  }58  .status-right {59    display: flex;60    align-items: center;61    gap: 22px;62  }63  .percent {64    font-size: 34px;65    font-weight: 700;66    color: #ffffff;67  }68 69  /* Bottom gesture pill */70  .gesture-pill {71    position: absolute;72    bottom: 72px;73    left: 50%;74    transform: translateX(-50%);75    width: 420px;76    height: 14px;77    background: #EDEDED;78    border-radius: 14px;79    opacity: 0.9;80  }81</style>82</head>83<body>84<div id="render-target">85  <!-- Top Status Bar -->86  <div class="status-bar">87    <div class="status-left">88      <div class="time">12:20</div>89      <div class="icon-row">90        <!-- Bolt (charging/flash) -->91        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-label="bolt">92          <path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"></path>93        </svg>94        <!-- Check circle -->95        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-label="check">96          <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14l-4-4 1.4-1.4L11 12.2l5.6-5.6L18 8l-7 8z"></path>97        </svg>98        <!-- Badge M (simple rounded square with M) -->99        <svg class="icon" viewBox="0 0 24 24" aria-label="badge">100          <rect x="2.5" y="2.5" width="19" height="19" rx="4" ry="4" fill="none" stroke="#ffffff" stroke-width="2"></rect>101          <path d="M7 16V8h2l3 3 3-3h2v8h-2v-5l-3 3-3-3v5z" fill="#ffffff"></path>102        </svg>103        <!-- Small dot indicator -->104        <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-label="dot">105          <circle cx="12" cy="12" r="4"></circle>106        </svg>107      </div>108    </div>109    <div class="status-right">110      <!-- WiFi icon -->111      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-label="wifi">112        <path d="M12 20.5l2.2-2.2a3.1 3.1 0 00-4.4 0L12 20.5z"></path>113        <path d="M4.9 12.8l1.4 1.4a8.5 8.5 0 0111.4 0l1.4-1.4a10.5 10.5 0 00-14.2 0z"></path>114        <path d="M2.1 9.1l1.4 1.4a12.5 12.5 0 0117 0l1.4-1.4a14.5 14.5 0 00-19.8 0z"></path>115      </svg>116      <!-- Battery icon filled with level -->117      <svg class="icon" viewBox="0 0 28 24" aria-label="battery">118        <rect x="1.5" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>119        <rect x="3.5" y="7" width="16" height="10" fill="#ffffff"></rect>120        <rect x="22.5" y="9" width="4" height="6" rx="1" ry="1" fill="#ffffff"></rect>121      </svg>122      <div class="percent">91%</div>123    </div>124  </div>125 126  <!-- Empty black content area represents blank screen -->127 128  <!-- Bottom gesture navigation pill -->129  <div class="gesture-pill"></div>130</div>131</body>132</html>