GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Report this item - Loading</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  }14 15  /* Mock status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; width: 100%; height: 120px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 36px; color: #ffffff; opacity: 0.9;20    font-size: 40px; letter-spacing: 0.2px;21  }22  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }23  .status-icon { width: 42px; height: 42px; }24 25  /* Header with close and title */26  .app-header {27    position: absolute; top: 160px; left: 40px; right: 40px;28    display: flex; align-items: center; gap: 44px;29  }30  .close-btn {31    width: 140px; height: 140px; border-radius: 70px;32    border: 2px solid #5a5a5a;33    display: flex; align-items: center; justify-content: center;34  }35  .close-btn svg { width: 70%; height: 70%; }36  .header-title {37    color: #ffffff; font-size: 88px; font-weight: 700;38  }39 40  /* Spinner */41  .spinner {42    position: absolute; top: 1020px; left: 50%;43    transform: translateX(-50%);44    width: 180px; height: 180px;45  }46  .spinner svg { width: 100%; height: 100%; }47  .spin {48    animation: rotate 1.1s linear infinite;49    transform-origin: 50% 50%;50  }51  @keyframes rotate {52    from { transform: rotate(0deg); }53    to   { transform: rotate(360deg); }54  }55 56  /* Gesture pill */57  .gesture-pill {58    position: absolute; bottom: 54px; left: 50%;59    transform: translateX(-50%);60    width: 420px; height: 16px; border-radius: 8px;61    background: #e6e6e6;62    opacity: 0.85;63  }64</style>65</head>66<body>67<div id="render-target">68 69  <!-- Status bar -->70  <div class="status-bar">71    <div class="status-left">72      <div>4:54</div>73      <!-- Lock icon -->74      <svg class="status-icon" viewBox="0 0 24 24" fill="none">75        <rect x="5" y="10" width="14" height="10" rx="2" stroke="#fff" stroke-width="2"/>76        <path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="#fff" stroke-width="2"/>77      </svg>78      <!-- Magnifier icon -->79      <svg class="status-icon" viewBox="0 0 24 24" fill="none">80        <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2"/>81        <path d="M15 15l6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>82      </svg>83      <!-- "LR" badge -->84      <div style="width:48px;height:32px;border:2px solid #fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:22px;">LR</div>85      <div style="width:10px;height:10px;background:#ffffff;border-radius:50%;"></div>86    </div>87    <div class="status-right">88      <!-- Do not disturb -->89      <svg class="status-icon" viewBox="0 0 24 24" fill="none">90        <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"/>91        <path d="M7 12h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>92      </svg>93      <!-- WiFi icon -->94      <svg class="status-icon" viewBox="0 0 24 24" fill="none">95        <path d="M2 9c4.5-4 15.5-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>96        <path d="M5 12c3.5-3 10.5-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>97        <path d="M8 15c2.5-2 7.5-2 10 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>98        <circle cx="12" cy="18" r="1.8" fill="#fff"/>99      </svg>100      <!-- Battery -->101      <svg class="status-icon" viewBox="0 0 28 24" fill="none">102        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff" stroke-width="2"/>103        <rect x="23" y="9" width="3" height="6" rx="1" fill="#fff"/>104        <rect x="4" y="8" width="14" height="8" rx="1.5" fill="#fff"/>105      </svg>106      <div>95%</div>107    </div>108  </div>109 110  <!-- App header with close and title -->111  <div class="app-header">112    <div class="close-btn" aria-label="Close">113      <svg viewBox="0 0 24 24">114        <circle cx="12" cy="12" r="11" stroke="#757575" stroke-width="0"/>115        <path d="M6 6l12 12M18 6L6 18" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"/>116      </svg>117    </div>118    <div class="header-title">Report this item</div>119  </div>120 121  <!-- Loading spinner -->122  <div class="spinner" aria-label="Loading">123    <svg viewBox="0 0 100 100">124      <!-- Blue arc -->125      <circle class="spin" cx="50" cy="50" r="36"126              stroke="#6E8EFF" stroke-width="12" fill="none"127              stroke-linecap="round" stroke-dasharray="140 100"/>128    </svg>129  </div>130 131  <!-- Gesture pill at bottom -->132  <div class="gesture-pill"></div>133 134</div>135</body>136</html>