GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Report this item - UI Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 box-shadow: 0 0 0 0 transparent;12 }13 14 /* Top black area */15 .top-area { position:absolute; left:0; top:0; width:100%; height:250px; background:#000; color:#fff; }16 .status-bar { height:88px; display:flex; align-items:center; padding:0 36px; font-size:40px; letter-spacing:0.5px; }17 .status-icons { margin-left:auto; display:flex; align-items:center; gap:28px; }18 .icon-dot { width:26px; height:26px; border-radius:50%; background:#fff; opacity:0.85; }19 .battery {20 width:48px; height:26px; border:2px solid #fff; position:relative; border-radius:4px;21 }22 .battery::after { content:""; position:absolute; right:-10px; top:6px; width:8px; height:12px; background:#fff; border-radius:2px; }23 .battery .level { position:absolute; left:3px; top:3px; width:34px; height:18px; background:#fff; }24 25 .toolbar { height:162px; display:flex; align-items:center; padding:0 36px; }26 .circle-btn {27 width:110px; height:110px; border-radius:55px; background:#1a1a1a; display:flex; align-items:center; justify-content:center; margin-right:24px;28 }29 .circle-btn svg { width:52px; height:52px; }30 .title { font-size:64px; font-weight:700; }31 32 /* Content */33 .content { position:absolute; top:250px; left:0; right:0; bottom:0; background:#fff; }34 .watermark {35 position:absolute; top:40px; left:36px; font-size:100px; color:#e6e6e6; font-weight:600;36 }37 38 .card {39 position:absolute; left:20px; right:20px; top:190px;40 background:#111; color:#fff;41 border-radius:18px;42 box-shadow: 0 12px 20px rgba(0,0,0,0.25);43 padding:40px 36px 40px 36px;44 }45 .card h2 {46 margin:0 0 28px 0;47 font-size:54px; line-height:1.18;48 color:#2ecc71; font-weight:800;49 }50 .card p { font-size:42px; line-height:1.45; margin:0 0 36px 0; color:#f1f1f1; }51 .card p.note { font-weight:700; }52 53 /* Bottom gesture bar */54 .gesture {55 position:absolute; bottom:36px; left:50%; transform:translateX(-50%);56 width:320px; height:14px; background:#cfcfcf; border-radius:8px;57 }58</style>59</head>60<body>61<div id="render-target">62 63 <!-- Top black area -->64 <div class="top-area">65 <div class="status-bar">66 <div>6:17</div>67 <div class="status-icons">68 <div class="icon-dot"></div>69 <div class="icon-dot"></div>70 <div class="icon-dot"></div>71 <div class="battery"><div class="level"></div></div>72 </div>73 </div>74 <div class="toolbar">75 <div class="circle-btn">76 <!-- X icon -->77 <svg viewBox="0 0 24 24">78 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#fff" stroke-width="3" stroke-linecap="round" fill="none"/>79 </svg>80 </div>81 <div class="title">Report this item</div>82 </div>83 </div>84 85 <!-- Main content -->86 <div class="content">87 <div class="watermark">File a report</div>88 89 <div class="card">90 <h2>Thank you for taking the time to submit this report.</h2>91 <p>This information is very important to us, so please be assured that we will thoroughly review it and take action if necessary.</p>92 <p>If there's a violation, the action we take depends on how it impacts our community. In some cases, we explain the situation to the seller, and the listing will remain on our website. If the item or listing doesn't follow our rules, we may cancel the listing. We may also restrict the seller's buying and selling activities on eBay.</p>93 <p>To protect our users' privacy, we're unable to share the action we take. Thanks for understanding.</p>94 <p class="note">Note: You don't need to contact us again. Doing so would create a new report and prolong the process.</p>95 </div>96 97 <div class="gesture"></div>98 </div>99 100</div>101</body>102</html>