GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>About phone - Mock</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: #121212;14    color: #FFFFFF;15    font-family: Roboto, Arial, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    padding: 24px 40px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #E0E0E0;31    font-size: 34px;32    letter-spacing: 0.5px;33  }34  .sb-right {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .icon {40    width: 36px;41    height: 36px;42    color: #E0E0E0;43  }44 45  /* Back arrow */46  .back-btn {47    position: absolute;48    top: 150px;49    left: 40px;50    width: 48px;51    height: 48px;52    color: #E0E0E0;53  }54 55  /* Title */56  .title {57    position: absolute;58    top: 260px;59    left: 40px;60    font-size: 76px;61    font-weight: 500;62    color: #F5F5F5;63  }64 65  /* Content list */66  .content {67    position: absolute;68    top: 420px;69    left: 40px;70    right: 40px;71  }72  .section-label {73    font-size: 32px;74    color: #8AB4F8;75    margin: 40px 0 12px 0;76  }77  .item {78    margin: 36px 0;79  }80  .item-title {81    font-size: 46px;82    color: #EAEAEA;83    margin-bottom: 12px;84  }85  .item-sub {86    font-size: 28px;87    color: #9AA0A6;88  }89 90  /* Bottom gesture pill */91  .gesture-pill {92    position: absolute;93    bottom: 42px;94    left: 50%;95    transform: translateX(-50%);96    width: 220px;97    height: 10px;98    background: #E0E0E0;99    border-radius: 6px;100    opacity: 0.9;101  }102 103  /* Right side scrollbar hint */104  .scrollbar {105    position: absolute;106    right: 12px;107    top: 980px;108    width: 8px;109    height: 620px;110    background: #606060;111    border-radius: 4px;112    opacity: 0.6;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status Bar -->120  <div class="status-bar">121    <div>10:21</div>122    <div class="sb-right">123      <!-- Simple cellular bars icon -->124      <svg class="icon" viewBox="0 0 24 24">125        <rect x="2" y="16" width="3" height="6" fill="currentColor"></rect>126        <rect x="7" y="13" width="3" height="9" fill="currentColor" opacity="0.85"></rect>127        <rect x="12" y="10" width="3" height="12" fill="currentColor" opacity="0.7"></rect>128        <rect x="17" y="7" width="3" height="15" fill="currentColor" opacity="0.55"></rect>129      </svg>130      <!-- Wifi icon -->131      <svg class="icon" viewBox="0 0 24 24">132        <path d="M2.5 8.5c5.2-4.7 13.8-4.7 19 0" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>133        <path d="M5 12c3.8-3.4 10.2-3.4 14 0" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>134        <path d="M8 15.5c2.6-2.3 7.4-2.3 10 0" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>135        <circle cx="12" cy="19.5" r="1.6" fill="currentColor"></circle>136      </svg>137      <!-- Battery icon -->138      <svg class="icon" viewBox="0 0 24 24">139        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>140        <rect x="3.8" y="7.8" width="14.5" height="8.4" fill="currentColor"></rect>141        <rect x="20.5" y="9" width="2.5" height="6" rx="1" fill="currentColor"></rect>142      </svg>143    </div>144  </div>145 146  <!-- Back Arrow -->147  <svg class="back-btn" viewBox="0 0 24 24">148    <path d="M15.5 4.5 6 12l9.5 7.5" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>149  </svg>150 151  <!-- Title -->152  <div class="title">About phone</div>153 154  <!-- Content -->155  <div class="content">156    <div class="section-label">Basic info</div>157 158    <div class="item">159      <div class="item-title">Device name</div>160      <div class="item-sub">Pixel 5a</div>161    </div>162 163    <div class="item">164      <div class="item-title">Google Account</div>165      <div class="item-sub">dbwscratch.test.id7@gmail.com</div>166    </div>167 168    <div class="item">169      <div class="item-title">Phone number</div>170      <div class="item-sub">Unknown</div>171    </div>172 173    <div class="section-label" style="margin-top: 70px;">Legal &amp; regulatory</div>174 175    <div class="item"><div class="item-title">Legal information</div></div>176    <div class="item"><div class="item-title">Regulatory labels</div></div>177    <div class="item"><div class="item-title">Safety &amp; regulatory manual</div></div>178 179    <div class="section-label" style="margin-top: 70px;">Device details</div>180 181    <div class="item">182      <div class="item-title">SIM status</div>183      <div class="item-sub">Not available</div>184    </div>185  </div>186 187  <!-- Scroll indicator -->188  <div class="scrollbar"></div>189 190  <!-- Gesture pill -->191  <div class="gesture-pill"></div>192</div>193</body>194</html>