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>Dark Empty 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: #121212;15    border-radius: 56px;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    background: #1b1b1b;26    color: #ffffff;27    font-family: Roboto, Arial, sans-serif;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32    box-sizing: border-box;33  }34  .status-left { display: flex; align-items: center; gap: 26px; }35  .time {36    font-size: 44px;37    font-weight: 600;38    letter-spacing: 0.5px;39  }40  .left-icons { display: flex; align-items: center; gap: 14px; }41  .sq {42    width: 42px; height: 42px;43    border: 2px solid #ffffff;44    border-radius: 6px;45    display: flex; align-items: center; justify-content: center;46    font-size: 18px; font-weight: 600;47    color: #ffffff; opacity: 0.9;48  }49  .dot {50    width: 10px; height: 10px; border-radius: 50%;51    background: #ffffff; opacity: 0.7;52  }53 54  .status-right { display: flex; align-items: center; gap: 18px; }55  .wifi, .battery { display: block; }56  .wifi path { stroke: #ffffff; stroke-width: 2; fill: none; opacity: 0.95; }57  .battery rect, .battery path { stroke: #ffffff; stroke-width: 2; fill: none; }58  .battery .cap { fill: #ffffff; stroke: none; }59  .battery .level { fill: #ffffff; stroke: none; opacity: 0.95; }60  .pct { font-size: 34px; font-weight: 600; }61 62  /* Bottom gesture bar */63  .gesture {64    position: absolute;65    bottom: 72px;66    left: 50%;67    transform: translateX(-50%);68    width: 540px;69    height: 16px;70    background: #cfcfcf;71    border-radius: 10px;72    opacity: 0.9;73  }74</style>75</head>76<body>77<div id="render-target">78  <div class="status-bar">79    <div class="status-left">80      <span class="time">8:42</span>81      <div class="left-icons">82        <div class="sq">N</div>83        <div class="sq">LR</div>84        <div class="sq">F</div>85        <div class="sq">M</div>86        <div class="dot"></div>87      </div>88    </div>89    <div class="status-right">90      <!-- Simple Wi‑Fi icon -->91      <svg class="wifi" width="36" height="36" viewBox="0 0 24 24" aria-hidden="true">92        <path d="M3 8Q12 2 21 8"></path>93        <path d="M6 12Q12 7 18 12"></path>94        <path d="M9 16Q12 13 15 16"></path>95        <circle cx="12" cy="20" r="2" fill="#ffffff"></circle>96      </svg>97      <!-- Simple Battery icon -->98      <svg class="battery" width="48" height="36" viewBox="0 0 28 16" aria-hidden="true">99        <rect x="1" y="3" width="22" height="10" rx="2" ry="2"></rect>100        <rect class="cap" x="24" y="6" width="3" height="4" rx="1"></rect>101        <rect class="level" x="3.5" y="5" width="15.5" height="6" rx="1"></rect>102      </svg>103      <span class="pct">71%</span>104    </div>105  </div>106 107  <!-- Empty content area to match blank dark screen -->108  <!-- The container background already represents the blank UI -->109 110  <div class="gesture"></div>111</div>112</body>113</html>