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>Skype Search Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #fff; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background:#0d0f14;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; left: 0; top: 0; width: 100%; height: 120px;16    background: #0b0b0d; color:#eaeaea; display:flex; align-items:center;17    padding: 0 36px; box-sizing: border-box; font-size: 42px;18    letter-spacing: 0.5px;19  }20  .sb-right { margin-left:auto; display:flex; align-items:center; gap:26px; }21  .dot { width: 16px; height: 16px; border-radius:50%; background:#d0d0d0; opacity:.85; display:inline-block; }22 23  /* Header */24  .header {25    position: absolute; left:0; top:120px; width:100%; height: 360px;26    background: linear-gradient(90deg, #53b0ff 0%, #2f85ff 55%, #2a63ff 100%);27    display:block; box-sizing:border-box; padding: 34px 40px;28  }29  .header .title {30    position:absolute; left:40px; bottom:36px; font-weight:800; font-size: 120px; line-height:1; text-shadow:0 1px 0 rgba(0,0,0,.15);31  }32  .header .icon-btn {33    width: 84px; height: 84px; border-radius: 42px; display:flex; align-items:center; justify-content:center;34    background: transparent; border: none; padding:0; cursor: default;35  }36  .back-btn { position:absolute; left:20px; top:32px; }37  .close-btn { position:absolute; right:20px; top:32px; }38 39  /* Content area */40  .content {41    position:absolute; left:0; top:480px; width:100%; bottom:0;42    background:#17191f; overflow:hidden; overflow-y:auto;43    padding-bottom:140px;44  }45  .section {46    padding: 32px 40px 14px; color:#aeb4c2; font-size:42px; letter-spacing:.2px;47  }48  .list-row {49    display:flex; align-items:center; gap:28px; padding: 34px 40px;50    box-sizing:border-box; border-bottom: 1px solid #2a2f39; color:#e8ecf7;51  }52  .list-row.highlight { background:#0c2b4d; }53  .avatar {54    width: 104px; height:104px; border-radius: 52px; background:#e0e0e0; border:1px solid #bdbdbd;55    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; flex:0 0 104px;56  }57  .info { display:flex; flex-direction:column; gap:10px; }58  .name { font-size:52px; font-weight:700; color:#ffffff; }59  .sub {60    font-size:38px; color:#b9c0cf; display:flex; align-items:center; gap:12px;61  }62  .presence {63    width:18px; height:18px; border-radius:50%; background:#ffcf3c; display:inline-block;64  }65 66  /* Group chat pill avatar */67  .circle {68    width:104px; height:104px; border-radius:52px; background:#c6a3ff; color:#1a1033; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:44px;69  }70 71  /* Directory avatars with initials */72  .initial {73    background:#cfe2ff; color:#2b4c8a;74  }75  .initial.gray {76    background:#dfe5ef; color:#406080;77  }78 79  .row-compact .name { font-size:50px; }80  .row-compact .sub { font-size:36px; }81 82  .more {83    padding: 24px 40px; text-align:right; color:#b3bbcc; font-size:42px;84  }85 86  /* Web search */87  .search-row {88    display:flex; align-items:center; gap:26px; padding:30px 40px; border-bottom:1px solid #2a2f39; font-size:48px; color:#f1f4ff;89  }90  .search-icon {91    width:52px; height:52px; display:inline-block;92  }93 94  /* Bottom gesture bar */95  .gesture {96    position:absolute; left:50%; transform:translateX(-50%);97    bottom: 28px; width: 400px; height: 14px; border-radius: 7px; background:#bfc5d2;98    opacity:.8;99  }100 101  /* Simple helpers */102  .muted { color:#aeb4c2; }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status Bar -->109  <div class="status-bar">110    <div>7:47</div>111    <div class="sb-right">112      <span class="dot"></span>113      <span class="dot"></span>114      <span class="dot"></span>115      <div style="display:flex; align-items:center; gap:10px;">116        <svg width="44" height="44" viewBox="0 0 24 24" fill="#eaeaea"><path d="M3 12l2-2 4 4 8-8 2 2-10 10z"/></svg>117        <span>95%</span>118      </div>119    </div>120  </div>121 122  <!-- Header -->123  <div class="header">124    <button class="icon-btn back-btn" aria-label="Back">125      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">126        <path d="M15 18l-6-6 6-6"></path>127      </svg>128    </button>129 130    <button class="icon-btn close-btn" aria-label="Close">131      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">132        <circle cx="12" cy="12" r="10" opacity=".25" fill="#ffffff"></circle>133        <path d="M15 9l-6 6M9 9l6 6"></path>134      </svg>135    </button>136 137    <div class="title">Natalie Larson</div>138  </div>139 140  <!-- Content -->141  <div class="content">142 143    <div class="section">People</div>144    <div class="list-row highlight">145      <div class="avatar">[IMG: Floral Avatar]</div>146      <div class="info">147        <div class="name">Natalie Larson</div>148        <div class="sub"><span class="presence"></span> Chatted seconds ago</div>149      </div>150    </div>151 152    <div class="section">Group chats</div>153    <div class="list-row">154      <div class="circle">FR</div>155      <div class="info">156        <div class="name">Friends</div>157        <div class="sub">3 participants</div>158      </div>159    </div>160 161    <div class="section">Skype directory</div>162 163    <div class="list-row row-compact">164      <div class="avatar initial">NL</div>165      <div class="info">166        <div class="name">Natalie Larson</div>167        <div class="sub">skype: nllarsoncnm</div>168        <div class="sub">169          <svg width="36" height="36" viewBox="0 0 24 24" fill="#b9c0cf"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>170          Saint Francis, United States171        </div>172      </div>173    </div>174 175    <div class="list-row row-compact">176      <div class="avatar initial gray">NL</div>177      <div class="info">178        <div class="name">Natalie Larson</div>179        <div class="sub">skype: live:.cid.61e7158b9b2650c4</div>180      </div>181    </div>182 183    <div class="list-row row-compact">184      <div class="avatar">[IMG: User Photo]</div>185      <div class="info">186        <div class="name">Natalie Larson</div>187        <div class="sub">skype: live:n.r.larson</div>188        <div class="sub">189          <svg width="36" height="36" viewBox="0 0 24 24" fill="#b9c0cf"><path d="M12 2C8 2 5 5 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-4-3-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>190          Soldotna, United States191        </div>192      </div>193    </div>194 195    <div class="more">More</div>196 197    <div class="section">Web search</div>198 199    <div class="search-row">200      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#cfd6e6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">201        <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.35-4.35"></path>202      </svg>203      natalie larson204    </div>205    <div class="search-row">206      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#cfd6e6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">207        <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.35-4.35"></path>208      </svg>209      natalie larson harvard210    </div>211    <div class="search-row">212      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#cfd6e6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">213        <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.35-4.35"></path>214      </svg>215      natalie larson historic textiles216    </div>217    <div class="search-row">218      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#cfd6e6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">219        <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.35-4.35"></path>220      </svg>221      natalie larson md222    </div>223    <div class="search-row" style="border-bottom:none;">224      <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#cfd6e6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">225        <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.35-4.35"></path>226      </svg>227      natalie larson runner228    </div>229 230  </div>231 232  <!-- Gesture bar -->233  <div class="gesture"></div>234</div>235</body>236</html>