GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Black Screen UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14    color: #FFFFFF;15    font-family: "Segoe UI", Roboto, Arial, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    padding: 22px 34px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    background: rgba(0,0,0,0); /* keep pure black background */31  }32  .left-items, .right-items {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .time {38    font-size: 50px;39    font-weight: 700;40    letter-spacing: 1px;41  }42 43  /* Bottom gesture bar */44  .gesture-bar {45    position: absolute;46    left: 50%;47    transform: translateX(-50%);48    bottom: 36px;49    width: 480px;50    height: 14px;51    background: #EDEDED;52    border-radius: 12px;53    opacity: 0.92;54  }55  /* Helper for icon sizes */56  .icon { display: inline-flex; }57  .icon svg { display: block; }58</style>59</head>60<body>61<div id="render-target">62  <!-- Top Status Bar -->63  <div class="status-bar">64    <div class="left-items">65      <div class="time">1:28</div>66 67      <!-- Mail/Notifications (simple envelope icon) -->68      <div class="icon">69        <svg width="46" height="46" viewBox="0 0 24 24">70          <rect x="2.5" y="5" width="19" height="14" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>71          <path d="M3 6.5 L12 13 L21 6.5" fill="none" stroke="#FFFFFF" stroke-width="2"></path>72        </svg>73      </div>74 75      <!-- Square icon -->76      <div class="icon">77        <svg width="42" height="42" viewBox="0 0 24 24">78          <rect x="4" y="4" width="16" height="16" fill="#FFFFFF" rx="2"></rect>79        </svg>80      </div>81 82      <!-- Sun icon -->83      <div class="icon">84        <svg width="46" height="46" viewBox="0 0 24 24">85          <circle cx="12" cy="12" r="4" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>86          <line x1="12" y1="1.8" x2="12" y2="5" stroke="#FFFFFF" stroke-width="2"></line>87          <line x1="12" y1="19" x2="12" y2="22.2" stroke="#FFFFFF" stroke-width="2"></line>88          <line x1="1.8" y1="12" x2="5" y2="12" stroke="#FFFFFF" stroke-width="2"></line>89          <line x1="19" y1="12" x2="22.2" y2="12" stroke="#FFFFFF" stroke-width="2"></line>90          <line x1="4.2" y1="4.2" x2="6.6" y2="6.6" stroke="#FFFFFF" stroke-width="2"></line>91          <line x1="17.4" y1="17.4" x2="19.8" y2="19.8" stroke="#FFFFFF" stroke-width="2"></line>92          <line x1="17.4" y1="6.6" x2="19.8" y2="4.2" stroke="#FFFFFF" stroke-width="2"></line>93          <line x1="4.2" y1="19.8" x2="6.6" y2="17.4" stroke="#FFFFFF" stroke-width="2"></line>94        </svg>95      </div>96    </div>97 98    <div class="right-items">99      <!-- WiFi icon -->100      <div class="icon">101        <svg width="46" height="46" viewBox="0 0 24 24">102          <path d="M2 9.5 C7 -0.5 17 -0.5 22 9.5" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>103          <path d="M5 12.5 C9 6 15 6 19 12.5" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>104          <path d="M8 15.5 C10.5 12.5 13.5 12.5 16 15.5" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>105          <circle cx="12" cy="18.5" r="1.5" fill="#FFFFFF"></circle>106        </svg>107      </div>108 109      <!-- Battery with bolt -->110      <div class="icon">111        <svg width="56" height="46" viewBox="0 0 28 16">112          <rect x="1.5" y="3" width="20" height="10" rx="2" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>113          <rect x="22.5" y="6" width="4" height="4" rx="1" fill="#FFFFFF"></rect>114          <path d="M12 4 L9 9 H12 L10 14 L16 8 H13 L15 4 Z" fill="#FFFFFF"></path>115        </svg>116      </div>117    </div>118  </div>119 120  <!-- Bottom gesture handle -->121  <div class="gesture-bar"></div>122</div>123</body>124</html>