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>Blue 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: #1B2A7A; /* deep cobalt blue */15    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;16  }17  .status-bar {18    position: absolute;19    top: 32px;20    left: 32px;21    right: 32px;22    height: 88px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #FFFFFF;27  }28  .status-left, .status-right {29    display: flex;30    align-items: center;31  }32  .time {33    font-size: 56px;34    font-weight: 600;35    letter-spacing: 1px;36    margin-right: 24px;37  }38  .icon {39    width: 40px;40    height: 40px;41    margin-left: 22px;42    fill: #FFFFFF;43    stroke: #FFFFFF;44    stroke-width: 1.5;45  }46  .icon.no-margin { margin-left: 0; }47  /* Bottom gesture handle */48  .gesture {49    position: absolute;50    bottom: 84px;51    left: 50%;52    transform: translateX(-50%);53    width: 420px;54    height: 16px;55    background: #E6E6E6;56    border-radius: 12px;57    opacity: 0.9;58  }59</style>60</head>61<body>62<div id="render-target">63  <!-- Status Bar -->64  <div class="status-bar">65    <div class="status-left">66      <span class="time">8:27</span>67 68      <!-- Sun/Brightness Icon -->69      <svg class="icon" viewBox="0 0 24 24">70        <circle cx="12" cy="12" r="4" fill="#FFFFFF" stroke="none"></circle>71        <path d="M12 2 L12 5 M12 19 L12 22 M2 12 L5 12 M19 12 L22 12 M4.5 4.5 L6.5 6.5 M17.5 17.5 L19.5 19.5 M17.5 6.5 L19.5 4.5 M4.5 19.5 L6.5 17.5" />72      </svg>73 74      <!-- Clock Icon -->75      <svg class="icon" viewBox="0 0 24 24">76        <circle cx="12" cy="12" r="9" fill="none"></circle>77        <path d="M12 7 L12 12 L16 14" />78      </svg>79 80      <!-- Download Icon -->81      <svg class="icon" viewBox="0 0 24 24">82        <path d="M12 4 L12 14 M8 10 L12 14 L16 10" fill="none"></path>83        <path d="M5 18 L19 18" />84      </svg>85 86      <!-- Location Pin Icon -->87      <svg class="icon" viewBox="0 0 24 24">88        <path d="M12 3 C8.7 3 6 5.7 6 9 C6 12.5 10.2 18.1 11.3 19.5 C11.7 20 12.3 20 12.7 19.5 C13.8 18.1 18 12.5 18 9 C18 5.7 15.3 3 12 3 Z" fill="none"></path>89        <circle cx="12" cy="9" r="2.5" fill="#FFFFFF" stroke="none"></circle>90      </svg>91 92      <!-- Dot Icon -->93      <svg class="icon" viewBox="0 0 24 24">94        <circle cx="12" cy="12" r="3" />95      </svg>96    </div>97 98    <div class="status-right">99      <!-- Wi-Fi Icon -->100      <svg class="icon no-margin" viewBox="0 0 24 24">101        <path d="M2.5 9 C7 5.5 17 5.5 21.5 9" fill="none"></path>102        <path d="M5 12 C9 9.5 15 9.5 19 12" fill="none"></path>103        <path d="M8 15 C10.5 13.8 13.5 13.8 16 15" fill="none"></path>104        <circle cx="12" cy="18" r="1.8" fill="#FFFFFF" stroke="none"></circle>105      </svg>106 107      <!-- Battery Icon with Lightning -->108      <svg class="icon" viewBox="0 0 24 24">109        <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none"></rect>110        <rect x="20" y="9" width="2" height="6" rx="1" ry="1" fill="#FFFFFF" stroke="none"></rect>111        <path d="M11 8 L8 12 L11 12 L9 16 L14 11 L11 11 Z" fill="#FFFFFF" stroke="none"></path>112      </svg>113    </div>114  </div>115 116  <!-- Bottom Gesture Handle -->117  <div class="gesture"></div>118</div>119</body>120</html>