GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Report This Item UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f0f10;13    color: #fff;14  }15 16  /* Header */17  .header-title {18    position: absolute;19    top: 140px;20    left: 140px;21    font-size: 64px;22    font-weight: 700;23    letter-spacing: 0.5px;24  }25  .close-btn {26    position: absolute;27    top: 120px;28    left: 48px;29    width: 96px;30    height: 96px;31    border-radius: 48px;32    background: rgba(255,255,255,0.06);33    display: flex;34    align-items: center;35    justify-content: center;36    border: 1px solid rgba(255,255,255,0.15);37  }38  .close-btn svg { width: 44px; height: 44px; stroke: #ffffff; stroke-width: 6; }39 40  /* Dimmed underlying page hint */41  .under-title {42    position: absolute;43    top: 260px;44    left: 42px;45    font-size: 86px;46    color: rgba(255,255,255,0.12);47    font-weight: 600;48  }49 50  /* Item card */51  .item-card {52    position: absolute;53    top: 390px;54    left: 40px;55    width: 1000px;56    height: 370px;57    background: #1e1e1f;58    border-radius: 18px;59    box-shadow: 0 18px 40px rgba(0,0,0,0.6);60    padding: 40px;61    display: flex;62    gap: 36px;63  }64  .img-ph {65    width: 170px;66    height: 260px;67    background: #E0E0E0;68    border: 1px solid #BDBDBD;69    display: flex;70    align-items: center;71    justify-content: center;72    color: #757575;73    font-size: 22px;74    border-radius: 6px;75  }76  .item-info {77    flex: 1;78    display: flex;79    flex-direction: column;80    justify-content: center;81  }82  .item-title {83    font-size: 46px;84    font-weight: 700;85    margin-bottom: 22px;86  }87  .item-meta {88    font-size: 34px;89    color: #cfcfcf;90    margin: 8px 0;91  }92 93  .section-label {94    position: absolute;95    top: 800px;96    left: 60px;97    font-size: 40px;98    color: rgba(255,255,255,0.85);99    letter-spacing: 0.3px;100  }101 102  /* Modal sheet with options */103  .sheet {104    position: absolute;105    top: 940px;106    left: 60px;107    width: 960px;108    background: #3f3f41;109    border-radius: 22px;110    box-shadow: 0 26px 60px rgba(0,0,0,0.75);111    overflow: hidden;112    border: 1px solid rgba(255,255,255,0.08);113  }114  .option {115    display: flex;116    align-items: center;117    justify-content: space-between;118    padding: 52px 44px;119    font-size: 54px;120    color: #ffffff;121    border-bottom: 1px solid rgba(255,255,255,0.15);122  }123  .option:last-child { border-bottom: none; }124  .radio {125    width: 64px;126    height: 64px;127    border-radius: 50%;128    border: 6px solid rgba(255,255,255,0.85);129    box-sizing: border-box;130  }131 132  /* Gesture bar */133  .gesture-bar {134    position: absolute;135    bottom: 54px;136    left: 50%;137    transform: translateX(-50%);138    width: 300px;139    height: 10px;140    background: #ffffff;141    border-radius: 6px;142    opacity: 0.85;143  }144</style>145</head>146<body>147<div id="render-target">148  <div class="close-btn" aria-label="Close">149    <svg viewBox="0 0 24 24" fill="none">150      <path d="M4 4 L20 20 M20 4 L4 20" />151    </svg>152  </div>153 154  <div class="header-title">Report this item</div>155  <div class="under-title">File a report</div>156 157  <div class="item-card">158    <div class="img-ph">[IMG: Book Cover]</div>159    <div class="item-info">160      <div class="item-title">1984 by George Orwell</div>161      <div class="item-meta">Item no: 144204065111</div>162      <div class="item-meta">Seller: thrift.books</div>163    </div>164  </div>165 166  <div class="section-label">Report Category</div>167 168  <div class="sheet">169    <div class="option">170      <span>Copyright and trademark</span>171      <div class="radio"></div>172    </div>173    <div class="option">174      <span>Listing practices</span>175      <div class="radio"></div>176    </div>177    <div class="option">178      <span>Price gouging</span>179      <div class="radio"></div>180    </div>181    <div class="option">182      <span>Prohibited and restricted items</span>183      <div class="radio"></div>184    </div>185  </div>186 187  <div class="gesture-bar"></div>188</div>189</body>190</html>