GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search Results - Snuggle</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; }10  #render-target {11    position: relative;12    overflow: hidden;13    width: 1080px;14    height: 2400px;15    background: #26292C;16    font-family: Roboto, Arial, sans-serif;17    color: #ECEFF1;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 110px;27    background: #1F2225;28    color: #EEE;29    display: flex;30    align-items: center;31    padding: 0 40px;32    font-size: 40px;33    letter-spacing: 0.5px;34  }35  .status-icons {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .status-icons svg { fill: none; stroke: #EEE; stroke-width: 6; }42 43  /* App bar */44  .app-bar {45    position: absolute;46    top: 110px;47    left: 0;48    width: 1080px;49    height: 150px;50    background: #2E3134;51    display: flex;52    align-items: center;53    padding: 0 32px;54    color: #EAEAEA;55  }56  .app-bar .left-actions {57    display: flex;58    align-items: center;59    gap: 28px;60  }61  .app-bar .title {62    font-size: 56px;63    font-weight: 500;64    margin-left: 20px;65  }66  .app-bar .right-actions {67    margin-left: auto;68    display: flex;69    gap: 36px;70    align-items: center;71  }72  .icon-btn svg { width: 60px; height: 60px; stroke: #D0D0D0; fill: none; stroke-width: 7; }73 74  /* Content area */75  .content {76    position: absolute;77    top: 260px;78    left: 0;79    width: 100%;80    padding: 40px 48px 120px;81  }82 83  .results-header {84    display: flex;85    align-items: center;86    margin-bottom: 40px;87  }88  .results-header .caption {89    font-size: 34px;90    letter-spacing: 2px;91    color: #9FA6AD;92  }93  .web-btn {94    margin-left: auto;95    padding: 24px 40px;96    border: 3px solid #7FB3FF;97    color: #8FC0FF;98    background: transparent;99    border-radius: 18px;100    font-size: 38px;101  }102 103  .result {104    padding: 34px 0 28px;105  }106  .result + .result { margin-top: 36px; }107 108  .meta {109    display: flex;110    align-items: center;111    gap: 26px;112    margin-bottom: 12px;113  }114  .magnifier {115    width: 44px;116    height: 44px;117  }118  .meta-text .chapter {119    font-size: 42px;120    font-weight: 600;121    color: #EDEDED;122  }123  .meta-text .page {124    font-size: 32px;125    color: #A7AFB6;126    margin-top: 6px;127  }128 129  .excerpt {130    margin-left: 86px;131    font-family: Georgia, "Times New Roman", serif;132    font-size: 44px;133    line-height: 1.55;134    color: #F2F2F2;135  }136  .hl {137    background: #4FA6FF;138    color: #FFFFFF;139    padding: 6px 10px;140    border-radius: 6px;141  }142 143  /* Bottom gesture bar */144  .gesture-bar {145    position: absolute;146    bottom: 34px;147    left: 50%;148    transform: translateX(-50%);149    width: 420px;150    height: 16px;151    background: #FFFFFF;152    border-radius: 12px;153    opacity: 0.85;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status Bar -->161  <div class="status-bar">162    <div class="time">2:52</div>163    <div class="status-icons">164      <!-- small phone + cloud indicator (simplified) -->165      <svg width="44" height="44" viewBox="0 0 24 24">166        <rect x="6" y="3" width="12" height="18" rx="3"></rect>167      </svg>168      <svg width="52" height="44" viewBox="0 0 24 24">169        <path d="M6 15h12"></path>170        <path d="M3 19h18"></path>171      </svg>172      <!-- Battery -->173      <svg width="64" height="44" viewBox="0 0 24 24">174        <rect x="2" y="6" width="18" height="12" rx="2"></rect>175        <rect x="20" y="10" width="2" height="4"></rect>176        <rect x="4" y="8" width="10" height="8" fill="#EEE" stroke="none"></rect>177      </svg>178    </div>179  </div>180 181  <!-- App Bar -->182  <div class="app-bar">183    <div class="left-actions">184      <!-- Back Arrow -->185      <div class="icon-btn">186        <svg viewBox="0 0 24 24">187          <path d="M15 5L8 12l7 7"></path>188        </svg>189      </div>190      <div class="title">Snuggle</div>191    </div>192    <div class="right-actions">193      <!-- Close (X) -->194      <div class="icon-btn">195        <svg viewBox="0 0 24 24">196          <path d="M5 5l14 14M19 5l-14 14"></path>197        </svg>198      </div>199      <!-- More (vertical dots) -->200      <div class="icon-btn">201        <svg viewBox="0 0 24 24">202          <circle cx="12" cy="5" r="2" fill="#D0D0D0" stroke="none"></circle>203          <circle cx="12" cy="12" r="2" fill="#D0D0D0" stroke="none"></circle>204          <circle cx="12" cy="19" r="2" fill="#D0D0D0" stroke="none"></circle>205        </svg>206      </div>207    </div>208  </div>209 210  <!-- Content -->211  <div class="content">212    <div class="results-header">213      <span class="caption">3 RESULTS IN THIS BOOK</span>214      <button class="web-btn">Search web</button>215    </div>216 217    <!-- Result 1 -->218    <div class="result">219      <div class="meta">220        <svg class="magnifier" viewBox="0 0 24 24">221          <circle cx="10" cy="10" r="6" stroke="#A6AEB6" stroke-width="3" fill="none"></circle>222          <path d="M14 14l6 6" stroke="#A6AEB6" stroke-width="3"></path>223        </svg>224        <div class="meta-text">225          <div class="chapter">Chapter 1</div>226          <div class="page">at page 6</div>227        </div>228      </div>229      <div class="excerpt">230        Someone to make me laugh on long car rides. Someone to <span class="hl">snuggle</span> during the long mountain nights, preferably someone warmer than me. I just don’t want the wrong life partner.231      </div>232    </div>233 234    <!-- Result 2 -->235    <div class="result">236      <div class="meta">237        <svg class="magnifier" viewBox="0 0 24 24">238          <circle cx="10" cy="10" r="6" stroke="#A6AEB6" stroke-width="3" fill="none"></circle>239          <path d="M14 14l6 6" stroke="#A6AEB6" stroke-width="3"></path>240        </svg>241        <div class="meta-text">242          <div class="chapter">Chapter 11</div>243          <div class="page">at page 111</div>244        </div>245      </div>246      <div class="excerpt">247        Her expression’s unreadable, but I still feel it deep inside myself, twisting me in a place I didn’t know I had. Then the doors close and I stare at myself in the dull reflection, Susan <span class="hl">snuggled</span> against me, head now against my chest, my arm still around her shoulders so she doesn’t fall over. “This is nice,” she murmurs.248      </div>249    </div>250 251    <!-- Result 3 -->252    <div class="result">253      <div class="meta">254        <svg class="magnifier" viewBox="0 0 24 24">255          <circle cx="10" cy="10" r="6" stroke="#A6AEB6" stroke-width="3" fill="none"></circle>256          <path d="M14 14l6 6" stroke="#A6AEB6" stroke