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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #202224; /* dark content background */13    font-family: Roboto, Arial, sans-serif;14    color: #E9ECEF;15  }16 17  /* Top bars */18  .top-area {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 240px; /* status + app bar combined */22    background: #4b4c4e;23  }24  .status-bar {25    height: 110px;26    display: flex; align-items: center; justify-content: space-between;27    padding: 0 36px;28    color: #fff;29    font-weight: 500;30    font-size: 36px;31    letter-spacing: 0.5px;32  }33  .status-left, .status-right {34    display: flex; align-items: center; gap: 18px;35  }36  .chip {37    font-size: 26px;38    background: rgba(255,255,255,0.12);39    color: #fff;40    padding: 6px 12px;41    border-radius: 10px;42  }43  .app-bar {44    height: 130px;45    display: flex; align-items: center;46    padding: 0 36px;47    color: #fff;48  }49  .back-btn {50    width: 72px; height: 72px; margin-right: 18px;51    display: flex; align-items: center; justify-content: center;52    opacity: 0.95;53  }54  .app-title {55    font-size: 58px; font-weight: 500;56    letter-spacing: 0.2px;57  }58 59  /* Content */60  .content {61    position: absolute;62    top: 240px; left: 0; right: 0; bottom: 0;63    padding: 0 52px 52px;64    overflow: hidden;65  }66  .section {67    margin: 54px 0;68  }69  .title {70    font-size: 54px; font-weight: 500; color: #e6e6e6;71    margin-bottom: 18px;72  }73  .value {74    font-size: 36px; color: #cbd2d9;75    line-height: 1.4;76  }77  .hint {78    font-size: 34px; color: #9fa6ad;79  }80  .link {81    font-size: 38px; color: #8ab4f8; font-weight: 500;82  }83 84  /* Simple scrollbar hint to mimic screenshot */85  .scroll-indicator {86    position: absolute;87    right: 8px; top: 980px;88    width: 8px; height: 440px; border-radius: 6px;89    background: rgba(255,255,255,0.18);90  }91 92  /* Icon styling */93  svg { display: block; }94</style>95</head>96<body>97<div id="render-target">98 99  <!-- Top bars -->100  <div class="top-area">101    <div class="status-bar">102      <div class="status-left">103        <div>10:24</div>104        <div class="chip">5G</div>105        <div class="chip">▸</div>106      </div>107      <div class="status-right">108        <!-- Wi-Fi icon -->109        <svg width="44" height="44" viewBox="0 0 24 24">110          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.8"/>111          <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.85"/>112          <circle cx="12" cy="17" r="2" fill="#fff"/>113        </svg>114        <!-- Battery icon -->115        <svg width="52" height="44" viewBox="0 0 28 16">116          <rect x="1" y="2" width="22" height="12" rx="2" stroke="#fff" fill="none" stroke-width="2"/>117          <rect x="3" y="4" width="16" height="8" fill="#fff"/>118          <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>119        </svg>120      </div>121    </div>122    <div class="app-bar">123      <div class="back-btn" aria-label="Back">124        <svg width="48" height="48" viewBox="0 0 24 24">125          <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>126        </svg>127      </div>128      <div class="app-title">About phone</div>129    </div>130  </div>131 132  <!-- Content -->133  <div class="content">134    <div class="section">135      <div class="title">Model</div>136      <div class="value">Pixel 5a</div>137    </div>138 139    <div class="section">140      <div class="title">IMEI</div>141      <div class="value">357641620997163</div>142    </div>143 144    <div class="section">145      <div class="title">Android version</div>146      <div class="value">13</div>147    </div>148 149    <div class="section">150      <div class="link">Device identifiers</div>151    </div>152 153    <div class="section">154      <div class="title">IP address</div>155      <div class="value">fe80::f2c:82e4:f0f6:692e<br>172.23.0.227</div>156    </div>157 158    <div class="section">159      <div class="title">Wi‑Fi MAC address</div>160      <div class="hint">To view, choose saved network</div>161    </div>162 163    <div class="section">164      <div class="title">Device Wi‑Fi MAC address</div>165      <div class="value">60:b7:6e:3c:29:d2</div>166    </div>167 168    <div class="section">169      <div class="title">Bluetooth address</div>170      <div class="value">60:b7:6e:3c:29:d1</div>171    </div>172 173    <div class="section">174      <div class="title">Up time</div>175      <div class="value">72:44:34</div>176    </div>177 178    <div class="section" style="margin-top: 80px;">179      <div class="value" style="font-size: 44px; color: #e6e6e6;">180        Send feedback <span style="text-decoration: underline;">about this</span> device181      </div>182    </div>183  </div>184 185  <div class="scroll-indicator"></div>186</div>187</body>188</html>