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>About phone UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EDEDED;13  }14 15  /* Top app bar */16  .appbar {17    position: absolute;18    top: 0; left: 0; right: 0;19    height: 220px;20    background: #3A3A3A;21  }22  .status-bar {23    height: 84px;24    padding: 0 40px;25    display: flex; align-items: center; justify-content: space-between;26    color: #ffffff; font-size: 36px; letter-spacing: 0.5px;27  }28  .status-icons { display: flex; align-items: center; gap: 26px; }29  .title-row {30    height: 136px;31    display: flex; align-items: center;32    padding: 0 40px;33    color: #ffffff;34  }35  .title-row .title {36    font-size: 64px; font-weight: 500; margin-left: 24px;37  }38 39  /* Content list */40  .content {41    position: absolute; top: 240px; left: 0; right: 0;42    padding: 0 54px 160px;43  }44  .section {45    margin-bottom: 84px;46  }47  .label {48    font-size: 52px; font-weight: 500; color: #EAEAEA; margin: 0 0 18px 0;49  }50  .value {51    font-size: 38px; color: #BDBDBD; margin: 0;52  }53  .hint {54    font-size: 36px; color: #9AA0A6; margin-top: 8px;55  }56  .link {57    font-size: 42px; color: #8AB4F8; text-decoration: none;58  }59 60  /* Bottom floating toast */61  .toast {62    position: absolute;63    left: 150px; right: 150px;64    bottom: 300px;65    background: #3A3A3A;66    color: #FFFFFF;67    padding: 28px 36px;68    border-radius: 48px;69    text-align: center;70    font-size: 38px;71    box-shadow: 0 6px 16px rgba(0,0,0,0.35);72  }73 74  /* Gesture bar */75  .gesture {76    position: absolute; bottom: 72px; left: 50%;77    width: 360px; height: 12px;78    transform: translateX(-50%);79    background: #E6E6E6; border-radius: 8px;80    opacity: 0.95;81  }82 83  /* Icon helpers */84  svg { display: block; }85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Top App Bar -->91  <div class="appbar">92    <div class="status-bar">93      <div class="time">10:28</div>94      <div class="status-icons">95        <!-- Simple play-in-rect icon -->96        <svg width="48" height="48" viewBox="0 0 24 24">97          <rect x="2" y="5" width="20" height="14" rx="3" fill="#FFFFFF" opacity="0.9"></rect>98          <path d="M10 9l6 3-6 3V9z" fill="#3A3A3A"></path>99        </svg>100        <!-- Wi-Fi icon -->101        <svg width="48" height="48" viewBox="0 0 24 24">102          <path d="M2 8c5-5 15-5 20 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>103          <path d="M5 12c4-4 10-4 14 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>104          <path d="M8 16c3-3 5-3 8 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>105          <circle cx="12" cy="19" r="1.8" fill="#FFFFFF"/>106        </svg>107        <!-- Battery icon -->108        <svg width="48" height="48" viewBox="0 0 24 24">109          <rect x="2" y="7" width="18" height="10" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"/>110          <rect x="4" y="9" width="12" height="6" rx="1.5" fill="#FFFFFF"/>111          <rect x="20" y="10" width="2" height="6" rx="1" fill="#FFFFFF"/>112        </svg>113      </div>114    </div>115 116    <div class="title-row">117      <!-- Back arrow -->118      <svg width="64" height="64" viewBox="0 0 24 24">119        <path d="M15.5 5l-7 7 7 7" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>120      </svg>121      <div class="title">About phone</div>122    </div>123  </div>124 125  <!-- Content -->126  <div class="content">127    <div class="section">128      <h3 class="label">IMEI</h3>129      <p class="value">357641620997163</p>130    </div>131 132    <div class="section">133      <h3 class="label">Android version</h3>134      <p class="value">13</p>135    </div>136 137    <div class="section">138      <a class="link" href="#">Device identifiers</a>139    </div>140 141    <div class="section">142      <h3 class="label">IP address</h3>143      <p class="value">fe80::f2c:82e4:f0f6:692e<br>172.23.0.227</p>144    </div>145 146    <div class="section">147      <h3 class="label">Wi‑Fi MAC address</h3>148      <p class="hint">To view, choose saved network</p>149    </div>150 151    <div class="section">152      <h3 class="label">Device Wi‑Fi MAC address</h3>153      <p class="value">60:b7:6e:3c:29:d2</p>154    </div>155 156    <div class="section">157      <h3 class="label">Bluetooth address</h3>158      <p class="value">60:b7:6e:3c:29:d1</p>159    </div>160 161    <div class="section">162      <h3 class="label">Up time</h3>163      <p class="value">72:49:01</p>164    </div>165 166    <div class="section">167      <h3 class="label">Send feedback about this device</h3>168    </div>169 170    <div class="section">171      <h3 class="label">Build number</h3>172      <p class="value">TQ2A.230505.002</p>173    </div>174  </div>175 176  <!-- Floating toast -->177  <div class="toast">No need, you are already a developer.</div>178 179  <!-- Gesture bar -->180  <div class="gesture"></div>181</div>182</body>183</html>