GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Report Item Modal</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; position:relative; overflow:hidden;9    background:#101010; color:#fff;10  }11  /* Status bar */12  .status-bar {13    position:absolute; top:0; left:0; width:100%; height:110px;14    display:flex; align-items:center; justify-content:space-between;15    padding:0 40px; box-sizing:border-box; color:#fff;16  }17  .status-time { font-size:44px; font-weight:600; }18  .status-icons { display:flex; align-items:center; gap:28px; }19  .icon-dot { width:26px; height:26px; background:#fff; border-radius:50%; opacity:0.9; }20  .icon-wifi {21    width:44px; height:44px;22  }23  .icon-battery {24    width:74px; height:36px; border:4px solid #fff; border-radius:6px; position:relative;25  }26  .icon-battery::after {27    content:""; position:absolute; right:-10px; top:8px; width:10px; height:20px; background:#fff; border-radius:2px;28  }29  .icon-battery .level {30    position:absolute; left:4px; top:4px; height:24px; width:48px; background:#fff;31  }32 33  /* Header and close */34  .close-btn {35    position:absolute; top:150px; left:40px; width:120px; height:120px;36    border-radius:60px; border:4px solid #3a3a3a; display:flex; align-items:center; justify-content:center; color:#bdbdbd;37  }38  .close-btn svg { width:60px; height:60px; }39  .title {40    position:absolute; top:170px; left:180px; font-size:72px; font-weight:700; color:#bdbdbd;41  }42 43  .ghost-heading {44    position:absolute; top:310px; left:40px; font-size:88px; color:#2a2a2a; font-weight:700;45  }46 47  /* Item card */48  .item-card {49    position:absolute; top:420px; left:40px; width:1000px; height:360px;50    background:#1b1b1b; border-radius:22px; box-shadow:0 6px 24px rgba(0,0,0,0.6);51    display:flex; align-items:center; padding:30px; box-sizing:border-box;52  }53  .book-img {54    width:210px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:6px;55  }56  .item-info { margin-left:30px; }57  .item-info .title-line { font-size:46px; font-weight:700; margin-bottom:14px; }58  .item-info .meta { font-size:36px; color:#9e9e9e; margin:8px 0; }59  .item-info .seller { font-size:36px; color:#cfcfcf; }60 61  /* Bottom sheet options */62  .sheet {63    position:absolute; bottom:100px; left:40px; width:1000px;64    background:#3a3a3a; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,0.7);65    overflow:hidden;66  }67  .option {68    position:relative; padding:42px 120px 42px 30px; font-size:54px; color:#fff; border-bottom:2px solid #5a5a5a;69  }70  .option:last-child { border-bottom:none; }71  .radio {72    position:absolute; right:24px; top:50%; transform:translateY(-50%);73    width:66px; height:66px; border-radius:50%; border:6px solid #bdbdbd;74    box-sizing:border-box;75  }76 77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Status bar -->83  <div class="status-bar">84    <div class="status-time">6:14</div>85    <div class="status-icons">86      <div class="icon-dot"></div>87      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none">88        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>89        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>90        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>91        <circle cx="12" cy="19" r="2" fill="#fff"/>92      </svg>93      <div class="icon-battery"><div class="level"></div></div>94    </div>95  </div>96 97  <!-- Close and title -->98  <div class="close-btn">99    <svg viewBox="0 0 24 24" stroke="#bdbdbd" fill="none" stroke-width="2">100      <path d="M5 5l14 14M19 5L5 19"/>101    </svg>102  </div>103  <div class="title">Report this item</div>104  <div class="ghost-heading">File a report</div>105 106  <!-- Item card -->107  <div class="item-card">108    <div class="book-img">[IMG: Book Cover]</div>109    <div class="item-info">110      <div class="title-line">1984 by George Orwell</div>111      <div class="meta">Item no: 144204065111</div>112      <div class="seller">Seller: thrift.books</div>113    </div>114  </div>115 116  <!-- Bottom sheet -->117  <div class="sheet">118    <div class="option">119      Incorrect Item Condition120      <div class="radio"></div>121    </div>122    <div class="option">123      Keyword spamming124      <div class="radio"></div>125    </div>126    <div class="option">127      Listing in an incorrect category128      <div class="radio"></div>129    </div>130    <div class="option">131      Misleading title132      <div class="radio"></div>133    </div>134    <div class="option">135      Misusing a brand name136      <div class="radio"></div>137    </div>138    <div class="option">139      Other search and browse manipulation140      <div class="radio"></div>141    </div>142  </div>143 144</div>145</body>146</html>