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 - Mock</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; position:relative; overflow:hidden;11    background:#e9e9e9;12    color:#fff;13  }14 15  /* Status bar */16  .statusbar {17    position:absolute; top:0; left:0; right:0; height:90px; background:#000; color:#fff;18    padding:0 36px; box-sizing:border-box; font-size:34px; display:flex; align-items:center; justify-content:space-between;19  }20  .status-icons { display:flex; align-items:center; gap:22px; }21  .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:.8; }22  .icon-battery, .icon-signal {23    width:40px; height:24px;24  }25 26  /* Header row */27  .header {28    position:absolute; top:90px; left:0; right:0; height:160px; background:#000; display:flex; align-items:center;29    padding:0 36px; box-sizing:border-box;30  }31  .close-btn {32    width:84px; height:84px; border-radius:42px; border:2px solid #777; display:flex; align-items:center; justify-content:center;33    margin-right:24px;34  }35  .close-btn svg { width:40px; height:40px; }36  .title { font-size:64px; font-weight:700; color:#fff; }37 38  /* Light sheet background text */39  .sheet {40    position:absolute; top:250px; left:0; right:0; bottom:0;41    background:42      linear-gradient(0deg, rgba(255,255,255,0.8), rgba(255,255,255,0.8)),43      repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 12px, #efefef 12px, #efefef 24px);44  }45  .watermark {46    position:absolute; top:260px; left:36px; font-size:130px; color:#dcdcdc; opacity:.55; font-weight:600;47  }48 49  /* Card (modal) */50  .card {51    position:absolute; top:420px; left:36px; width:1008px; background:#1c1c1c; border-radius:16px; box-shadow:0 8px 12px rgba(0,0,0,0.5);52    padding:32px; box-sizing:border-box; color:#ddd;53  }54  .item-row { display:flex; gap:28px; }55  .img-ph {56    width:280px; height:280px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;57    display:flex; align-items:center; justify-content:center; text-align:center; font-size:28px; border-radius:6px;58  }59  .item-info { flex:1; }60  .item-title { color:#fff; font-size:42px; line-height:1.25; margin-top:4px; }61  .meta { margin-top:14px; color:#a9a9a9; font-size:30px; }62  .divider { height:1px; background:#3a3a3a; margin:28px 0; }63 64  /* Form */65  .field { margin-bottom:28px; }66  .label { color:#dcdcdc; font-size:32px; margin-bottom:12px; }67  .select, .textarea {68    width:100%; background:#121212; color:#e6e6e6; border:1px solid #4a4a4a; border-radius:12px;69    height:96px; display:flex; align-items:center; padding:0 24px; box-sizing:border-box; font-size:34px; position:relative;70  }71  .select .caret {72    position:absolute; right:20px; width:24px; height:24px; opacity:.8;73  }74  .textarea { height:300px; padding:18px 24px; font-size:32px; }75  .helper { color:#8e8e8e; font-size:28px; margin-top:10px; }76 77  .policy { color:#bfbfbf; font-size:30px; margin:12px 0 24px; }78  .policy a { color:#2f6fcc; text-decoration:none; }79 80  .btn {81    width:100%; height:110px; background:#0a66c2; color:#fff; border:none; border-radius:12px; font-size:38px; font-weight:700;82    display:flex; align-items:center; justify-content:center; margin-top:18px;83  }84 85  /* Bottom pill */86  .nav-pill {87    position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width:240px; height:12px; background:#fff; border-radius:8px; opacity:.9;88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="statusbar">96    <div>5:47</div>97    <div class="status-icons">98      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>99      <svg class="icon-signal" viewBox="0 0 24 24" fill="#fff"><rect x="1" y="14" width="4" height="8"/><rect x="7" y="10" width="4" height="12" opacity=".7"/><rect x="13" y="6" width="4" height="16" opacity=".5"/><rect x="19" y="2" width="4" height="20" opacity=".3"/></svg>100      <svg class="icon-battery" viewBox="0 0 36 18">101        <rect x="1" y="3" width="30" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>102        <rect x="33" y="6" width="3" height="6" fill="#fff"/>103        <rect x="3" y="5" width="24" height="8" fill="#fff"/>104      </svg>105    </div>106  </div>107 108  <!-- Header -->109  <div class="header">110    <div class="close-btn">111      <svg viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round">112        <path d="M4 4 L20 20 M20 4 L4 20"/>113      </svg>114    </div>115    <div class="title">Report this item</div>116  </div>117 118  <!-- Grey sheet with watermark -->119  <div class="sheet"></div>120  <div class="watermark">File a report</div>121 122  <!-- Card -->123  <div class="card">124    <div class="item-row">125      <div class="img-ph">[IMG: Robot Vacuum]</div>126      <div class="item-info">127        <div class="item-title">FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black</div>128        <div class="meta">Item no: <span style="color:#cfcfcf">134742755024</span></div>129        <div class="meta">Seller: <span style="color:#cfcfcf">xpectmoreforless</span></div>130      </div>131    </div>132 133    <div class="divider"></div>134 135    <div class="field">136      <div class="label">Report Category</div>137      <div class="select">Price gouging138        <svg class="caret" viewBox="0 0 24 24" fill="#d0d0d0"><path d="M6 9l6 6 6-6z"/></svg>139      </div>140    </div>141 142    <div class="field">143      <div class="label">Reason for Report</div>144      <div class="select">Price gouging145        <svg class="caret" viewBox="0 0 24 24" fill="#d0d0d0"><path d="M6 9l6 6 6-6z"/></svg>146      </div>147    </div>148 149    <div class="field">150      <div class="label">Detailed Reason</div>151      <div class="select">Other152        <svg class="caret" viewBox="0 0 24 24" fill="#d0d0d0"><path d="M6 9l6 6 6-6z"/></svg>153      </div>154    </div>155 156    <div class="policy">157      Before reporting an item, please review the <a href="#">eBay Listings Policies</a>.158    </div>159 160    <div class="field">161      <div class="label">Brief Description</div>162      <div class="textarea"></div>163      <div class="helper">100 characters left. Do not include HTML or JavaScript.</div>164    </div>165 166    <button class="btn">Submit report</button>167  </div>168 169  <div class="nav-pill"></div>170</div>171</body>172</html>