GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>No Results - Search</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0f0f10; color: #eaeaea;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 18px; left: 28px; right: 28px; height: 60px;17    display: flex; align-items: center; justify-content: space-between;18    color: #ffffff; font-size: 34px; letter-spacing: 0.5px;19  }20  .status-icons { display: flex; align-items: center; gap: 22px; }21  .dot { width: 10px; height: 10px; background:#8a8a8a; border-radius: 50%; display:inline-block; }22  .icon-shape { width: 36px; height: 22px; border: 2px solid #ffffff; border-radius: 4px; position: relative; }23  .icon-shape:after { content:''; position:absolute; right:-8px; top:8px; width:6px; height:6px; border-radius:2px; background:#ffffff; }24 25  /* Top search area */26  .topbar {27    position: absolute; top: 96px; left: 24px; right: 24px; height: 104px;28    display: flex; align-items: center; gap: 24px;29  }30  .back-btn {31    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;32  }33  .back-btn svg { width: 44px; height: 44px; fill: none; stroke:#ffffff; stroke-width: 6; }34  .search-bar {35    flex: 1;36    height: 96px; border-radius: 52px;37    background: #1b1b1d; border: 1px solid #2a2a2d;38    display: flex; align-items: center; padding: 0 36px; gap: 20px;39    color: #f3f3f3; font-size: 38px;40  }41  .search-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }42  .clear-btn svg { width: 44px; height: 44px; stroke: #bcbcbc; stroke-width: 6; fill: none; }43 44  /* Filter chips */45  .filters { position: absolute; top: 228px; left: 24px; right: 24px; display: flex; gap: 28px; }46  .chip {47    display: inline-flex; align-items: center; gap: 18px;48    padding: 20px 28px; border-radius: 34px;49    background: #151517; border: 1px solid #2e2e31; color: #dfdfdf; font-size: 34px;50  }51  .chip svg { width: 34px; height: 34px; fill: none; stroke:#cfcfcf; stroke-width: 4; }52  .chip .down { width: 28px; height: 28px; stroke: #bdbdbd; }53 54  /* Sort row and grid icon */55  .sort-row {56    position: absolute; top: 324px; left: 24px; right: 24px; height: 72px;57    display: flex; align-items: center; justify-content: space-between;58    color: #e5e5e5; font-size: 42px;59  }60  .sort-left { display: flex; align-items: center; gap: 12px; }61  .sort-left svg { width: 28px; height: 28px; stroke:#dcdcdc; fill:none; stroke-width:6; }62  .grid-icon {63    width: 48px; height: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;64  }65  .grid-icon span { background: #d9d9d9; display: block; border-radius: 4px; }66 67  /* Illustration placeholder */68  .illustration {69    position: absolute; left: 190px; top: 980px; width: 700px; height: 600px;70    background: #E0E0E0; border: 1px solid #BDBDBD;71    display: flex; align-items: center; justify-content: center; color: #555; text-align: center;72    font-size: 36px; border-radius: 8px;73  }74 75  .no-results {76    position: absolute; width: 100%; left: 0; text-align: center;77    bottom: 460px; color: #ffffff; font-size: 64px; font-weight: 700;78  }79 80  /* Bottom home indicator */81  .home-indicator {82    position: absolute; bottom: 38px; left: 50%;83    transform: translateX(-50%);84    width: 360px; height: 10px; background: #bbb; border-radius: 8px; opacity: 0.8;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status bar -->92  <div class="status-bar">93    <div>9:11</div>94    <div class="status-icons">95      <div class="dot"></div>96      <div class="dot"></div>97      <div class="dot"></div>98      <div class="icon-shape"></div>99    </div>100  </div>101 102  <!-- Search header -->103  <div class="topbar">104    <div class="back-btn">105      <svg viewBox="0 0 24 24">106        <path d="M15 4 L7 12 L15 20" />107      </svg>108    </div>109    <div class="search-bar">110      <div class="search-text">Structured query language.pdf</div>111      <div class="clear-btn">112        <svg viewBox="0 0 24 24">113          <path d="M5 5 L19 19 M19 5 L5 19" />114        </svg>115      </div>116    </div>117  </div>118 119  <!-- Filter chips -->120  <div class="filters">121    <div class="chip">122      <svg viewBox="0 0 24 24">123        <rect x="3" y="4" width="18" height="16" rx="2"></rect>124        <line x1="3" y1="9" x2="21" y2="9"></line>125      </svg>126      <span>Date</span>127      <svg class="down" viewBox="0 0 24 24">128        <path d="M6 9 L12 15 L18 9"></path>129      </svg>130    </div>131 132    <div class="chip">133      <svg viewBox="0 0 24 24">134        <rect x="3" y="3" width="6" height="6"></rect>135        <rect x="15" y="3" width="6" height="6"></rect>136        <rect x="9" y="15" width="6" height="6"></rect>137      </svg>138      <span>Type</span>139      <svg class="down" viewBox="0 0 24 24">140        <path d="M6 9 L12 15 L18 9"></path>141      </svg>142    </div>143  </div>144 145  <!-- Sort row -->146  <div class="sort-row">147    <div class="sort-left">148      <span>Most relevant</span>149      <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9"></path></svg>150    </div>151    <div class="grid-icon">152      <span></span><span></span><span></span><span></span>153    </div>154  </div>155 156  <!-- Illustration -->157  <div class="illustration">[IMG: Digging dog illustration]</div>158 159  <!-- No results label -->160  <div class="no-results">No results found</div>161 162  <!-- Home indicator -->163  <div class="home-indicator"></div>164</div>165</body>166</html>