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>Search Results UI</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: #222426; color: #EFEFEF;13  }14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px; padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    color: #FFFFFF; font-size: 42px; letter-spacing: 0.5px;20  }21  .status-right { display: flex; align-items: center; gap: 28px; }22  .icon { display: inline-block; }23  /* App header */24  .app-header {25    position: absolute; top: 120px; left: 0; right: 0;26    height: 140px; padding: 0 36px;27    display: flex; align-items: center; gap: 28px;28    border-bottom: 1px solid #33373A;29    color: #E7E7E7;30  }31  .app-title {32    font-size: 54px; font-weight: 500; flex: 1;33  }34  .header-actions { display: flex; align-items: center; gap: 30px; }35  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px; }36  /* Results banner */37  .results-bar {38    position: absolute; top: 260px; left: 0; right: 0;39    padding: 36px; display: flex; align-items: center; justify-content: space-between;40  }41  .results-text {42    font-size: 32px; color: #9EA3A7; letter-spacing: 1px; text-transform: uppercase;43  }44  .search-web {45    font-size: 42px; color: #CFE2FF;46    padding: 22px 34px; border: 2px solid #6E767C;47    border-radius: 18px;48    background: transparent;49  }50  /* List */51  .list {52    position: absolute; top: 360px; left: 0; right: 0; bottom: 140px;53    padding: 0 36px 120px;54    overflow: hidden;55  }56  .item {57    padding: 44px 0;58    border-bottom: 1px solid transparent;59  }60  .item-head {61    display: flex; align-items: center; gap: 24px;62    margin-bottom: 20px;63  }64  .magnify {65    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;66    color: #B8BDC2;67  }68  .item-title {69    font-size: 44px; font-weight: 700; color: #F1F1F1;70  }71  .item-sub {72    font-size: 32px; color: #A4A9AE; margin-top: 6px;73  }74  .snippet {75    font-size: 44px; line-height: 66px; color: #EDEDED;76  }77  .highlight {78    background: #4AA7FF; color: #0B2236; padding: 6px 10px; border-radius: 6px;79  }80  /* Bottom pill */81  .home-pill {82    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);83    width: 340px; height: 18px; border-radius: 9px; background: #FFFFFF; opacity: 0.85;84  }85</style>86</head>87<body>88<div id="render-target">89  <!-- Status Bar -->90  <div class="status-bar">91    <div>9:22</div>92    <div class="status-right">93      <!-- Simple mail icon -->94      <svg class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none">95        <rect x="2" y="5" width="20" height="14" rx="2" stroke="#FFFFFF" stroke-width="2"/>96        <path d="M3 7l9 6 9-6" stroke="#FFFFFF" stroke-width="2" fill="none"/>97      </svg>98      <!-- Cloud icon -->99      <svg class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none">100        <path d="M7 15a4 4 0 010-8c1.2-2.5 5.3-2.5 6.5 0A4.5 4.5 0 1117 15H7z" fill="#FFFFFF"/>101      </svg>102      <!-- Wifi icon -->103      <svg class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none">104        <path d="M2 9c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>105        <path d="M5 12c3-3 11-3 14 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>106        <path d="M8 15c2-2 6-2 8 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>107        <circle cx="12" cy="18" r="1.8" fill="#FFFFFF"/>108      </svg>109      <!-- Battery icon -->110      <svg class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none">111        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"/>112        <rect x="21" y="10" width="2" height="4" fill="#FFFFFF"/>113        <rect x="4" y="8" width="12" height="8" fill="#FFFFFF"/>114      </svg>115    </div>116  </div>117 118  <!-- App Header -->119  <div class="app-header">120    <!-- Back -->121    <div class="icon-btn">122      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">123        <path d="M15 6l-6 6 6 6" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>124      </svg>125    </div>126    <div class="app-title">schools</div>127    <div class="header-actions">128      <!-- Close -->129      <div class="icon-btn">130        <svg width="54" height="54" viewBox="0 0 24 24" fill="none">131          <path d="M6 6l12 12M18 6L6 18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>132        </svg>133      </div>134      <!-- Overflow -->135      <div class="icon-btn">136        <svg width="54" height="54" viewBox="0 0 24 24" fill="#EDEDED">137          <circle cx="12" cy="5" r="2"/>138          <circle cx="12" cy="12" r="2"/>139          <circle cx="12" cy="19" r="2"/>140        </svg>141      </div>142    </div>143  </div>144 145  <!-- Results bar -->146  <div class="results-bar">147    <div class="results-text">5 RESULTS IN THIS BOOK</div>148    <div class="search-web">Search web</div>149  </div>150 151  <!-- List of results -->152  <div class="list">153    <!-- Item 1 -->154    <div class="item">155      <div class="item-head">156        <div class="magnify">157          <svg width="56" height="56" viewBox="0 0 24 24" fill="none">158            <circle cx="10" cy="10" r="6" stroke="#9EA3A7" stroke-width="2"/>159            <path d="M14 14l6 6" stroke="#9EA3A7" stroke-width="2" stroke-linecap="round"/>160          </svg>161        </div>162        <div>163          <div class="item-title">Foreword</div>164          <div class="item-sub">at page 5</div>165        </div>166      </div>167      <div class="snippet">168        A real student will not merely read this book, he will absorb its contents and169        make them his own. This book should be adopted by all high <span class="highlight">schools</span>170        and no boy or girl should be permitted to graduate without having satisfactorily171        passed an examination on it. This philosophy will not take the place of the subjects172        taught in <span class="highlight">schools</span>, but it will enable one to organize and apply the knowledge173        acquired, and convert it into useful service and adequate compensation without174        waste of time.175      </div>176    </div>177 178    <!-- Item 2 -->179    <div class="item">180      <div class="item-head">181        <div class="magnify">182          <svg width="56" height="56" viewBox="0 0 24 24" fill="none">183            <circle cx="10" cy="10" r="6" stroke="#9EA3A7" stroke-width="2"/>184            <path d="M14 14l6 6" stroke="#9EA3A7" stroke-width="2" stroke-linecap="round"/>185          </svg>186        </div>187        <div>188          <div class="item-title">Foreword</div>189          <div class="item-sub">at page 5</div>190        </div>191      </div>192      <div class="snippet">193        This book should be adopted by all high <span class="highlight">schools</span> and no boy or girl should be194        permitted to graduate without having satisfactorily passed an examination on it.195        This philosophy will not take the place of the subjects taught in <span class="highlight">schools</span>, but it196        will enable one to organize and apply the knowledge acquired, and convert it197        into useful service and adequate compensation without waste of time. Dr.198      </div>199    </div>200 201    <!-- Item 3 (short) -->202    <div class="item">203      <div class="item-head">204        <div class="magnify">205          <svg width="56" height="56" viewBox="0 0 24 24" fill="none">206            <circle cx="10" cy="10" r="6" stroke="#9EA3A7" stroke-width="2"/>207            <path d="M14 14l6 6" stroke="#9EA3A7" stroke-width="2" stroke-linecap="round"/>208          </svg>209        </div>210        <div>211          <div class="item-title">Author’s Preface</div>212          <div class="item-sub">at page 11</div>213        </div>214      </div>215      <div class="snippet" style="color:#CFCFCF;">216        <!-- intentionally minimal snippet to mimic truncated entry -->217      </div>218    </div>219  </div>220 221  <!-- Bottom navigation pill -->222  <div class="home-pill"></div>223</div>224</body>225</html>