GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Report this item - UI</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}9  #render-target{10    width:1080px;height:2400px;11    position:relative;overflow:hidden;12    background:#000000;13    border-radius:0;14  }15 16  /* Top app bar */17  .appbar{18    position:absolute;top:0;left:0;right:0;19    height:180px;background:#000;20    color:#fff;21    padding:28px 36px 0 36px;22  }23  .close-btn{24    width:80px;height:80px;border-radius:40px;25    border:2px solid #9E9E9E;background:transparent;color:#fff;26    display:flex;align-items:center;justify-content:center;27    cursor:default;28  }29  .appbar .row{display:flex;align-items:center;gap:24px;}30  .appbar .title{31    font-size:58px;font-weight:700;line-height:1.1;margin-top:8px;32  }33  .close-btn svg{width:40px;height:40px}34  .close-btn svg path{stroke:#FFFFFF;stroke-width:6;stroke-linecap:round}35 36  /* Light banner behind card */37  .banner{38    position:absolute;top:180px;left:0;right:0;height:170px;39    background:#efefef;40  }41  .banner h1{42    margin:0;padding:34px 40px;color:#d8d8d8;43    font-size:72px;font-weight:700;letter-spacing:0.5px;44  }45 46  /* Main card */47  .card{48    position:absolute;top:320px;left:30px;width:1020px;49    background:#1e1e1e;color:#fff;border-radius:18px;50    box-shadow:0 8px 0 rgba(0,0,0,0.65), 0 30px 40px rgba(0,0,0,0.6);51    padding:32px 34px 34px 34px;52  }53  .product{54    display:flex;gap:26px;align-items:flex-start;margin-bottom:22px;55  }56  .img-ph{57    width:240px;height:240px;background:#E0E0E0;border:1px solid #BDBDBD;58    display:flex;align-items:center;justify-content:center;59    color:#757575;font-size:26px;text-align:center;border-radius:8px;60  }61  .prod-info .title{font-size:36px;font-weight:700;margin-bottom:12px;line-height:1.25;}62  .prod-info .meta{font-size:28px;color:#bdbdbd;margin:6px 0;}63  .prod-info .meta .value{color:#e0e0e0;font-weight:700}64  .divider{height:1px;background:#444;margin:24px 0;}65 66  label{67    display:block;color:#d6d6d6;font-size:28px;margin-bottom:12px;68  }69  .dropdown, select, textarea{70    width:952px; /* card inner width minus padding */71    background:#141414;color:#eaeaea;border:2px solid #616161;border-radius:12px;72    padding:22px 24px;font-size:30px;73    outline:none;74  }75  .dropdown{position:relative;padding-right:70px;margin-bottom:28px;}76  .dropdown .value{color:#eaeaea}77  .dropdown .arrow{78    position:absolute;right:22px;top:50%;transform:translateY(-50%);79    width:28px;height:28px;80  }81  .info{82    font-size:26px;color:#bdbdbd;margin:10px 0 24px 0;83  }84  .info a{color:#4f82e6;text-decoration:none;}85 86  textarea{87    height:360px;margin-top:8px;margin-bottom:12px;resize:none;88  }89  .helper{color:#7c7c7c;font-size:24px;margin-bottom:28px;}90 91  .btn{92    width:952px;height:112px;border:none;border-radius:12px;93    background:#2359a9;color:#ffffff;font-size:36px;font-weight:700;94    display:flex;align-items:center;justify-content:center;95    cursor:default;96  }97 98  /* Gesture pill */99  .gesture{100    position:absolute;bottom:20px;left:50%;transform:translateX(-50%);101    width:210px;height:12px;border-radius:6px;background:#f0f0f0;opacity:0.85;102  }103</style>104</head>105<body>106<div id="render-target">107  <div class="appbar">108    <div class="row">109      <button class="close-btn" aria-label="Close">110        <svg viewBox="0 0 24 24">111          <path d="M4 4 L20 20"></path>112          <path d="M20 4 L4 20"></path>113        </svg>114      </button>115      <div class="title">Report this item</div>116    </div>117  </div>118 119  <div class="banner">120    <h1>File a report</h1>121  </div>122 123  <div class="card">124    <div class="product">125      <div class="img-ph">[IMG: Brown leather moccasin shoe]</div>126      <div class="prod-info">127        <div class="title">Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</div>128        <div class="meta">Item no: <span class="value">155608186658</span></div>129        <div class="meta">Seller: <span class="value">clarks_official</span></div>130      </div>131    </div>132 133    <div class="divider"></div>134 135    <label>Report Category</label>136    <div class="dropdown">137      <span class="value">Prohibited and restricted items</span>138      <svg class="arrow" viewBox="0 0 24 24">139        <path d="M4 9 L12 17 L20 9" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>140      </svg>141    </div>142 143    <label>Reason for Report</label>144    <div class="dropdown">145      <span class="value">Animals, plants, and wildlife</span>146      <svg class="arrow" viewBox="0 0 24 24">147        <path d="M4 9 L12 17 L20 9" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>148      </svg>149    </div>150 151    <label>Detailed Reason</label>152    <div class="dropdown">153      <span class="value">Turtle or tortoise shell items</span>154      <svg class="arrow" viewBox="0 0 24 24">155        <path d="M4 9 L12 17 L20 9" fill="none" stroke="#cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>156      </svg>157    </div>158 159    <div class="info">Before reporting an item, please review the <a href="#">eBay Listings Policies</a>.</div>160 161    <label>Brief Description</label>162    <textarea placeholder=""></textarea>163    <div class="helper">100 characters left. Do not include HTML or JavaScript.</div>164 165    <button class="btn">Submit report</button>166  </div>167 168  <div class="gesture"></div>169</div>170</body>171</html>